/* Account page (/account/ in every locale) on the site layout.
   Loaded after games.css, which supplies the panel (.section-box), the
   display headings, the guide cards and the modal close key. Everything
   here reads tokens; the page wears the site violet (body[data-accent]). */

body[data-page="account"] main > .container { max-inline-size: 960px; }
body[data-page="account"] main > .container > h1.teko-title {
  margin: 0;
  font-size: var(--step-4);
  line-height: 0.95;
  text-wrap: balance;
}

/* Panels: every account panel keeps full padding, even the profile panel
   whose crop canvas would otherwise trip the game-card rule in games.css. */
main#main .section-box {
  padding: var(--space-5);
  overflow: visible;
  border: 1px solid var(--border);
  background: var(--surface-1);
}
@media (min-width: 768px) {
  main#main .section-box { padding: var(--space-6); }
}
#account-content > * + * { margin-block-start: var(--space-4); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.tab-content > * + * { margin-block-start: var(--space-4); }

/* Shared readout label ("Leaderboard Rankings", "Personal Bests" ...) */
body[data-page="account"] .label {
  margin-block: var(--space-5) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body[data-page="account"] .teko-subtitle + .label { margin-block-start: 0; }
body[data-page="account"] .divider { block-size: 1px; margin-block: var(--space-6); background: var(--border); }

/* ── Inputs and messages ──────────────────────────────────────────────── */
.auth-input {
  display: block;
  inline-size: 100%;
  min-block-size: var(--tap);
  padding: 10px var(--space-3);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  caret-color: var(--primary);
  transition: border-color var(--dur-fast) var(--ease);
}
textarea.auth-input { min-block-size: 104px; resize: vertical; line-height: 1.5; }
.auth-input::placeholder { color: var(--text-faint); opacity: 1; }
.auth-input:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--border-control)); }
.auth-input:focus { border-color: var(--primary); }
.auth-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.auth-input[aria-invalid="true"] { border-color: var(--danger); outline-color: var(--danger); }
.auth-input:disabled { opacity: 0.5; cursor: not-allowed; }

.form-msg {
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.45;
}
.form-msg:empty { display: none; }
.form-msg.error,
.form-msg.success {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-2) var(--space-3);
  border: 1px solid;
  border-radius: var(--radius-md);
  color: var(--text);
}
.form-msg.error:empty, .form-msg.success:empty { display: none; }
.form-msg.error { border-color: color-mix(in srgb, var(--danger) 60%, var(--border)); background: color-mix(in srgb, var(--danger) 12%, var(--surface-1)); }
.form-msg.success { border-color: color-mix(in srgb, var(--success) 55%, var(--border)); background: color-mix(in srgb, var(--success) 10%, var(--surface-1)); }
.form-msg.error::before,
.form-msg.success::before {
  flex: none;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  line-height: 1.45;
}
.form-msg.error::before { content: "\f06a"; color: var(--danger); }
.form-msg.success::before { content: "\f058"; color: var(--success); }

body[data-page="account"] .full-width { inline-size: 100%; justify-content: center; }
.danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  padding-inline: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--danger) 60%, var(--border-strong));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-2));
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.danger-btn:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 24%, var(--surface-2)); }
.danger-btn:active:not(:disabled) { transform: translateY(1px); }
body[data-page="account"] :is(button, .ghost-btn, .glow-btn, .danger-btn):disabled { opacity: 0.45; box-shadow: none; cursor: not-allowed; }

/* ── Guest view: the sign-in card ─────────────────────────────────────── */
main#main #account-locked {
  max-inline-size: 28rem;
  margin-inline: auto;
  border-block-start-color: var(--accent);
  background:
    linear-gradient(var(--accent), var(--accent)) top / 100% 2px no-repeat padding-box,
    var(--surface-1);
}
.locked-content { display: flex; flex-direction: column; align-items: center; text-align: center; }
.locked-key {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  margin-block-end: var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--accent);
  font-size: 1.15rem;
}
.locked-content > h2.teko-title { margin: 0; font-size: var(--step-3); line-height: 1; }
.locked-content > p.muted { margin-block: var(--space-2) var(--space-5); color: var(--text-muted); }
.auth-form-inline { inline-size: 100%; text-align: start; }
.auth-content { display: flex; flex-direction: column; gap: var(--space-3); }
.auth-content.hidden { display: none; }
.auth-content > .ghost-btn + .ghost-btn { margin-block-start: 0; }

/* Sign in / Create account: the segmented control */
.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  margin-block-end: var(--space-5);
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-md) + var(--space-1));
  background: var(--bg-raised);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-faint);
  font-size: var(--step--1);
}
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; block-size: 1px; background: var(--border); }
.auth-footer { margin-block-start: var(--space-1); color: var(--text-muted); font-size: var(--step--1); text-align: center; }
.link-text {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primary) 60%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  cursor: pointer;
}
.link-text:hover { text-decoration-color: var(--primary); }

/* ── Segmented tabs (account sections, sign-in, achievement filters) ──── */
.account-tabs,
.ach-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-inline: auto;
  padding: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-md) + var(--space-1));
  background: var(--bg-raised);
}
:is(.account-tabs, .ach-filters)::-webkit-scrollbar { display: none; }
.account-tab,
.auth-tab,
.ach-filter {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  min-inline-size: 0;
  padding-inline: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.auth-tab { display: block; overflow: hidden; text-overflow: ellipsis; padding-inline: var(--space-3); text-align: center; }
:is(.account-tab, .auth-tab, .ach-filter):hover { background: var(--surface-2); color: var(--text); }
:is(.account-tab, .auth-tab, .ach-filter):is(.active, [aria-selected="true"]) {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--text);
  box-shadow: var(--shadow-1);
}
.account-tab > i { font-size: 0.9em; }
.account-tab.active > i { color: var(--accent); }
.ach-filter { min-block-size: 36px; padding-inline: var(--space-3); }
.ach-filters { margin: var(--space-4) 0 var(--space-5); }
/* Phones: the five sections wrap onto a second row instead of scrolling
   or truncating long localized labels. */
@media (max-width: 599.98px) {
  .account-tabs { flex-wrap: wrap; inline-size: 100%; overflow: visible; }
  .account-tab { flex: 1 1 auto; padding-inline: var(--space-3); }
}

/* ── Level strip (top of the signed-in view) ──────────────────────────── */
.xp-bar-container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}
.xp-level-info { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.xp-level-number {
  display: grid;
  place-items: center;
  min-inline-size: 44px;
  block-size: 44px;
  padding: 0.12em var(--space-2) 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-ink);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.xp-level-title { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-bar-wrapper { min-inline-size: 0; }
.xp-bar-track,
.level-progress-bar,
.ach-progress-track,
.ach-mini-track {
  block-size: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}
.xp-progress-fill,
.level-progress-fill,
.ach-progress-fill,
.ach-mini-fill {
  block-size: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width var(--dur-med) var(--ease);
}
.xp-bar-text {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: 6px;
  color: var(--text-muted);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.xp-bar-text > span:last-child { color: var(--text-faint); text-align: end; }
.xp-coins-display {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.xp-coins-display > .coin-icon { color: var(--amber); font-size: 0.8em; }
.coin-value { padding-block-start: 0.12em; }
@media (max-width: 599.98px) {
  .xp-bar-container { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); }
  .xp-bar-wrapper { grid-column: 1 / -1; grid-row: 2; }
}

/* ── Profile panel + editor (was account/profile-editor.css) ──────────── */
.profile-panel { color: var(--text-muted); }
.profile-hero {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--border);
}
.profile-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  inline-size: 96px;
  block-size: 96px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  padding-block-start: 0.1em;
}
.profile-avatar:has(img) { padding: 0; }
.profile-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.profile-identity { flex: 1; min-inline-size: 0; }
.profile-identity h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1;
  overflow-wrap: anywhere;
}
.profile-handle-row { display: flex; align-items: center; gap: var(--space-1); min-block-size: var(--tap); color: var(--text-muted); }
.profile-handle-row #global-name { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.copy-btn {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--tap);
  block-size: var(--tap);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}
.copy-btn:hover { background: var(--surface-2); color: var(--text); }
.profile-bio-text { max-inline-size: 65ch; margin: var(--space-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-muted); }

.profile-editor { padding-block-start: var(--space-5); }
.profile-editor h3 { margin: 0 0 var(--space-5); color: var(--text); font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1; }
.profile-photo { display: flex; align-items: center; gap: var(--space-4); margin-block-end: var(--space-5); }
.profile-photo .profile-avatar { inline-size: 72px; block-size: 72px; border-radius: var(--radius-md); font-size: 2.1rem; }
.profile-photo-controls { flex: 1; min-inline-size: 0; }
.profile-field label,
.profile-photo-title,
.profile-crop label { display: block; margin-block-end: var(--space-2); color: var(--text); font-weight: 600; }
.profile-photo-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.profile-photo-buttons label { margin: 0; cursor: pointer; }
.profile-file { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; opacity: 0; }
.profile-file:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.profile-file:disabled + label { opacity: 0.45; cursor: not-allowed; }
.profile-crop { display: flex; align-items: center; gap: var(--space-5); margin-block-end: var(--space-5); }
.profile-crop[hidden] { display: none; }
.profile-crop canvas { inline-size: 128px; block-size: 128px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-raised); }
.profile-crop input { min-block-size: var(--tap); max-inline-size: 100%; accent-color: var(--primary); }
.profile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.profile-field { min-inline-size: 0; }
.profile-field-wide { grid-column: 1 / -1; }
.profile-help { max-inline-size: 65ch; margin: var(--space-2) 0 0; color: var(--text-faint); font-size: var(--step--1); line-height: 1.5; }
.profile-count { margin-block-start: var(--space-1); color: var(--text-faint); font-size: var(--step--1); text-align: end; font-variant-numeric: tabular-nums; }
.profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-start: var(--space-5); }
.profile-actions button { touch-action: manipulation; }
.profile-panel #nick-status { margin-block-start: var(--space-4); }
.profile-panel ::selection,
.locked-content ::selection { background: color-mix(in srgb, var(--primary) 38%, transparent); color: var(--text); }
@media (max-width: 599.98px) {
  .profile-hero { align-items: flex-start; gap: var(--space-4); }
  .profile-hero .profile-avatar { inline-size: 72px; block-size: 72px; font-size: 2.2rem; }
  .profile-fields { grid-template-columns: 1fr; gap: var(--space-4); }
  .profile-photo { align-items: flex-start; }
  .profile-actions { align-items: stretch; }
  .profile-actions button { flex: 1 1 150px; justify-content: center; }
  .profile-crop { gap: var(--space-4); }
}

/* ── Stats: level, HUD tiles, ranks, bests, games ─────────────────────── */
.level-details {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4) var(--space-5);
}
.level-current { display: flex; align-items: center; gap: var(--space-3); }
.level-icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--accent);
  font-size: 1.35rem;
}
.level-rank { color: var(--text-muted); font-size: var(--step--1); }
.level-rank #level-number { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.level-title-big { color: var(--text); font-family: var(--font-display); font-size: var(--step-2); line-height: 1; padding-block-start: 0.08em; }
.level-progress-section { min-inline-size: 0; }
.level-progress-bar { block-size: 8px; }
.level-progress-text { margin-block-start: 6px; color: var(--text-muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.level-next {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
}
.level-next-label { color: var(--text-muted); font-size: var(--step--1); }
.level-next-title { color: var(--text); font-weight: 600; }
.level-next-xp { margin-inline-start: auto; color: var(--accent); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.account-wheel-characters { grid-column: 1 / -1; }
@media (max-width: 599.98px) {
  .level-details { grid-template-columns: 1fr; }
  .level-next-xp { margin-inline-start: 0; inline-size: 100%; }
}

/* HUD of stat tiles: Deck 1 cells on a Seam bar, 1px apart. */
.stats-overview,
.account-ranks-grid,
.personal-bests-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--border);
  box-shadow: var(--shadow-1);
}
.account-ranks-grid,
.personal-bests-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.account-ranks-grid > p { grid-column: 1 / -1; margin: 0; padding: var(--space-5); background: var(--surface-1); color: var(--text-muted); text-align: center; }
.personal-bests-grid:empty { display: none; }
.stat-box,
.rank-card,
.pb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-inline-size: 0;
  padding: var(--space-3) var(--space-2);
  background: var(--surface-1);
  text-align: center;
}
.stat-box-value,
.rc-rank,
.pb-value {
  max-inline-size: 100%;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 0.9;
  padding-block-start: 0.1em;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-box-value--date { font-size: var(--step-2); }
.stat-box-label,
.rc-mode,
.pb-duration {
  max-inline-size: 100%;
  overflow: hidden;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.stat-box:first-child { box-shadow: inset 0 2px 0 var(--accent); }
.stat-box:nth-child(3) .stat-box-value,
.rank-card .rc-rank:not(.unranked) { color: var(--accent); }
.rc-rank.unranked,
.pb-value.empty { color: var(--text-faint); }
.rc-cps { color: var(--text-faint); font-size: var(--step--1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-card { gap: 4px; }
@media (max-width: 767.98px) {
  .account-ranks-grid,
  .personal-bests-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
  .stats-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-box-value { font-size: var(--step-2); }
}

.acc-games-hint { max-inline-size: 65ch; margin-block: calc(-1 * var(--space-2)) var(--space-4); color: var(--text-muted); }
.account-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
  gap: var(--space-3);
}
.account-games-grid > p { grid-column: 1 / -1; margin: 0; padding: var(--space-5); color: var(--text-muted); text-align: center; }
.game-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-muted);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.game-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--surface-3); color: var(--text-muted); }
.gc-head { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; }
.gc-head > i { flex: none; inline-size: 1.25em; color: var(--accent); text-align: center; }
.gc-name { flex: 1; min-inline-size: 0; overflow: hidden; color: var(--text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.gc-rank { flex: none; padding: 1px var(--space-2); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 18%, var(--surface-1)); color: var(--text); font-size: var(--step--1); font-weight: 600; font-variant-numeric: tabular-nums; }
.gc-rank--none { background: var(--surface-1); color: var(--text-muted); font-weight: 500; }
.gc-main { display: flex; align-items: baseline; gap: var(--space-2); }
.gc-value { color: var(--text); font-family: var(--font-display); font-size: var(--step-2); line-height: 0.9; font-variant-numeric: tabular-nums; }
.gc-label, .gc-sub { color: var(--text-muted); font-size: var(--step--1); }
.gc-sub strong { color: var(--text); font-variant-numeric: tabular-nums; }
.gc-empty { color: var(--text-muted); font-size: var(--step--1); }
.gc-play { margin-block-start: auto; color: var(--text); font-size: var(--step--1); font-weight: 600; }
.gc-play > i { color: var(--accent); font-size: 0.85em; }
[dir="rtl"] .gc-play > i { transform: scaleX(-1); }
.game-card--empty { background: var(--surface-1); }

/* ── Achievements ─────────────────────────────────────────────────────── */
.ach-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-3); }
.ach-header .teko-subtitle { margin: 0; }
.ach-total { color: var(--text-muted); font-family: var(--font-display); font-size: var(--step-2); line-height: 1; font-variant-numeric: tabular-nums; }
.ach-total > span:first-child { color: var(--accent); }
.ach-progress-track { block-size: 8px; }
.achievements-groups > * + * { margin-block-start: var(--space-6); }
.ach-cat-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ach-cat-head::after { content: ""; flex: 1; order: 2; block-size: 1px; background: var(--border); }
.ach-cat-icon { color: var(--accent); font-size: 0.8em; }
.ach-cat-count { order: 3; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-2);
}
.achievement-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-content: start;
  gap: 2px var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.achievement-card > :not(.achievement-card-icon) { grid-column: 2; }
.achievement-card-icon {
  grid-row: 1 / span 4;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-1));
  color: var(--accent);
  font-size: 1rem;
}
.achievement-card-name { color: var(--text); font-weight: 600; line-height: 1.3; }
.achievement-card-desc { color: var(--text-muted); font-size: var(--step--1); line-height: 1.4; }
.achievement-card-date,
.achievement-card-reward { margin-block-start: var(--space-1); color: var(--text-faint); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.achievement-card-reward { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.achievement-card-reward i { color: var(--amber); }
.achievement-card.earned { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.achievement-card.earned .achievement-card-icon { background: var(--accent); color: var(--accent-ink); }
.achievement-card.locked { background: var(--surface-1); }
.achievement-card.locked .achievement-card-icon { background: var(--surface-2); color: var(--text-faint); }
.achievement-card.locked .achievement-card-name { color: var(--text-muted); }
.ach-mini-track { block-size: 4px; margin-block-start: var(--space-2); }
.ach-mini-nums { color: var(--text-faint); font-size: var(--step--1); font-variant-numeric: tabular-nums; }

/* ── Friends ──────────────────────────────────────────────────────────── */
.friend-search-row { display: flex; gap: var(--space-2); }
.friend-search-row .auth-input { flex: 1; min-inline-size: 0; }
.friend-search-row .glow-btn { flex: none; }
#search-status { margin-block-start: var(--space-3); }
#incoming-requests, #friends-list { display: flex; flex-direction: column; gap: 2px; }
#incoming-requests > p, #friends-list > p { margin: 0; color: var(--text-muted); }
.friend-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  min-block-size: 56px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
}
.friend-card:nth-child(even) { background: var(--surface-1); }
.friend-left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-inline-size: 0; }
.friend-left strong { color: var(--text); overflow-wrap: anywhere; }
.friend-left .muted { color: var(--text-faint); font-size: var(--step--1); }
.friend-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.friend-actions :is(.glow-btn, .ghost-btn) { min-block-size: var(--tap); padding-inline: var(--space-3); font-size: var(--step--1); }

/* ── Settings ─────────────────────────────────────────────────────────── */
#tab-settings .section-box > .glow-btn { margin-block-end: var(--space-3); }
#logout-status { margin-block-start: var(--space-3); }
.danger-zone-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  inline-size: 100%;
  min-block-size: 56px;
  padding: 0 var(--space-5);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.danger-zone-toggle > span > i { margin-inline-end: var(--space-2); color: var(--danger); }
.danger-zone-toggle > i { color: var(--text-faint); transition: transform var(--dur-fast) var(--ease); }
.danger-zone-toggle.open { border-end-start-radius: 0; border-end-end-radius: 0; }
.danger-zone-toggle.open > i { transform: rotate(180deg); }
.danger-zone-toggle:hover { background: var(--surface-2); }
body[data-page="account"] .danger-zone-content { display: none; margin-block-start: 0; }
body[data-page="account"] .danger-zone-content.open {
  display: block;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  border-block-start: 0;
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
  background: var(--surface-1);
}
.danger-zone-content > p { margin-block-end: var(--space-4); color: var(--text-muted); font-size: var(--step--1); }

/* ── Dialogs: password, delete, friend profile ────────────────────────── */
.modal-form { display: flex; flex-direction: column; gap: var(--space-3); }
.modal-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-1); }
.modal-actions > * { flex: 1 1 8rem; justify-content: center; }
#delete-modal .modal-header .teko-title { color: var(--danger); }
#delete-instructions { margin-block-end: var(--space-4); color: var(--text-muted); }
.friend-modal-header { display: flex; align-items: center; gap: var(--space-4); }
.friend-avatar {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 2rem;
  padding-block-start: 0.1em;
}
.friend-avatar:has(img) { padding: 0; }
.friend-modal-info { flex: 1; min-inline-size: 0; }
.friend-modal-info h3 { margin: 0; color: var(--text); font-size: var(--step-1); overflow-wrap: anywhere; }
.global-tag { color: var(--text-muted); font-size: var(--step--1); }
.friend-modal-level { color: var(--text-muted); font-size: var(--step--1); }
.fm-level { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.friend-modal-badge img { display: block; inline-size: 32px; block-size: 32px; }
.friend-stats-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-block: var(--space-4);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--border);
}
.friend-stat-item { padding: var(--space-3); background: var(--surface-2); text-align: center; }
.friend-stat-value { color: var(--text); font-family: var(--font-display); font-size: var(--step-2); line-height: 0.9; font-variant-numeric: tabular-nums; }
.friend-stat-label { color: var(--text-muted); font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.friend-history-item { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-block-end: 1px solid var(--border); font-size: var(--step--1); }
.fh-cps { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.fh-info { color: var(--text-faint); font-variant-numeric: tabular-nums; }
#friend-modal-actions { margin-block-start: var(--space-4); text-align: center; }
#friend-modal-status { margin-block-start: var(--space-3); }

/* Page-local toast (copy confirmations) */
.simple-toast {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline-start: 50%;
  z-index: var(--z-toast);
  max-inline-size: min(440px, calc(100% - 2 * var(--gutter)));
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
  color: var(--text);
  opacity: 0;
  translate: -50% 8px;
  transition: opacity var(--dur-med) var(--ease), translate var(--dur-med) var(--ease);
}
[dir="rtl"] .simple-toast { translate: 50% 8px; }
.simple-toast.show { opacity: 1; translate: -50% 0; }
[dir="rtl"] .simple-toast.show { translate: 50% 0; }

@media (prefers-reduced-motion: reduce) {
  :is(.xp-progress-fill, .level-progress-fill, .ach-progress-fill, .ach-mini-fill, .danger-zone-toggle > i, .simple-toast) { transition: none; }
}

/* Existing daily competitions and private chat are reachable from the friends panel. */
.friend-activities { margin-block: var(--space-4) var(--space-5); padding-block: var(--space-3); border-block: 1px solid var(--border); }
.friend-activities h3 { margin: 0 0 var(--space-2); font-size: var(--step-0); }
.friend-activities p { margin: 0 0 var(--space-3); color: var(--text-muted); }
.friend-activities nav, #friend-modal-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.friend-activities .ghost-btn, .friend-actions a, #friend-modal-actions a { text-decoration: none; }
#friend-modal-actions { justify-content: center; }

body.account-dialog-open { overflow: hidden; }

/* Persistent form labels remain visible after typing, including RTL locales. */
.auth-field-label { display:block; margin-block:0 6px; text-align:start; color:var(--text-main); font-size:.875rem; font-weight:500; }
.account-load-state { padding:24px; text-align:center; color:var(--text-main); }
.account-load-state p { margin-block:0 16px; }
.auth-content > .auth-field-label { margin-block-end:-6px; }

.account-load-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-3); }

/* Recovery is part of the sign-in form, with no modal or focus trap. */
.account-recovery[hidden], .account-recovery [hidden], .auth-tabs[hidden], .account-guest-upgrade[hidden], #account-forgot-password[hidden] { display: none; }
.account-recovery { display: grid; gap: var(--space-4); text-align: start; }
.account-recovery h3 { margin: 0; font-size: var(--step-1); }
.account-recovery p { margin: 0; overflow-wrap: anywhere; }
.account-recovery .auth-content { min-inline-size: 0; }
.account-recovery input { inline-size: 100%; min-inline-size: 0; }
#recovery-code { letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.account-guest-upgrade { display: grid; gap: var(--space-3); margin-block-end: var(--space-4); padding: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md); text-align: start; }
.account-guest-upgrade p { margin: 0; }