/* ──────────────────────────────────────────────────────────────────────────
   TABLE OF CONTENTS
   1.  TOKENS         design tokens (colors, radii), light-theme overrides
   2.  RESET          baseline element resets
   3.  UTILITIES      .hidden, .text-right, .mb-1, .modal-hint, etc.
   4.  NAV            top bar, links, badges, theme toggle
   5.  LIVE GAME      in-progress panel (clock, turn stepper, hint)
   6.  LAYOUT         <main>, .page-header
   7.  BUTTONS        .btn + variants, .btn-load-more
   8.  FILTER BAR     .pill, .filter-char-toggle, .filter-actions
   9.  LIST HEADER    .list-header (game-log header row)
   10. RESULTS HINT   tiny "n of m" caption
   11. RESUME BANNER  new-game resume-after-reload chip
   12. GAME CARDS     .game-card and friends (used by game-log + player)
   13. EMPTY/LOADING  empty-state, spinner
   14. BOTTOM SHEET   overlay, sheet, sheet-{header,body,footer}
   15. FORM           inputs, labels, .form-row, section-label
   16. LEADERBOARD    .lb-table, summary stat boxes, ranks/bars
   17. CHARACTER PICKER avatar grid, .seg, .pace-color, .exclude-toggle
   18. PLAYER SLOTS   new-game order-slot rows + dice/me/winner buttons
   19. QR CODE        QR overlay sizing
   20. CLAIM PAGE     join.html row layout
   21. CHARACTER STATS char detail page (cs-*) + monthly summary cards
   22. HOME PAGE      index.html hero / steps / FAQ
   23. ACCOUNT PAGE   account.html identity + danger zone
   24. HOVER STATES   pointer-only hover styles, grouped by component
   25. RESPONSIVE     media queries, kept LAST so cascade lands correctly
   ────────────────────────────────────────────────────────────────────────── */

/* ── 1. TOKENS ────────────────────────────────────────────────────── */
:root {
  --bg: #000000;
  --nav-bg: rgba(0, 0, 0, 0.94);
  --s1: #111;
  --s2: #1a1a1a;
  --s3: #222;
  --s4: #2a2a2a;
  --border: #2a2a2a;
  --text: #f0f0f0;
  --muted: #888;
  --dim: #444;
  --accent: #7c6af7;
  --accent-d: rgba(124, 106, 247, 0.12);
  --gold: #f0a500;
  --gold-d: rgba(240, 165, 0, 0.1);
  --red: #e05454;
  --red-d: rgba(224, 84, 84, 0.08);
  --r: 10px;
  --rs: 6px;

  /* Pace band colours, shared by the pace dots (character pages) and the
     new-game / game-log pace swatches. */
  --pace-green:  #4ade80;
  --pace-yellow: #facc15;
  --pace-orange: #fb923c;
  --pace-red:    #e05454;
  --pace-gray:   #9ca3af;
}

[data-theme="light"] {
  --bg: #ffffff;
  --nav-bg: rgba(255, 255, 255, 0.94);
  --s1: #f8f8f8;
  --s2: #f0f0f0;
  --s3: #e8e8e8;
  --s4: #dedede;
  --border: #dedede;
  --text: #0a0a0a;
  --muted: #555;
  --dim: #bbb;
  --gold: #e6a200;
}

/* ── RESET ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── UTILITIES ────────────────────────────────────────────────────── */
.hidden          { display: none !important; }
.text-right      { text-align: right; }
.mb-1            { margin-bottom: 1rem; }
.mb-1-25         { margin-bottom: 1.25rem; }
.mt-1-5          { margin-top: 1.5rem; }

/* Modal/sheet body intro paragraph (replaces inline font/color/margin styles). */
.modal-hint {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.modal-hint strong { color: var(--text); }

/* Page header that aligns its right-side controls to the top instead of center. */
.page-header.align-top { align-items: flex-start; }

/* Reserve the standard control height (38px input) so a search box that only
   appears after data loads (the game log location filter) doesn't grow the
   header and shift the title down on first render. */
.page-header.has-search-control { min-height: 38px; }

/* Char detail-page identity portrait (40px). Compound selector wins against
   the later `.char-portrait` rule (18px) when both classes are applied. */
.identity-portrait,
.char-portrait.identity-portrait { width: 40px; height: 40px; flex-shrink: 0; }

/* Tight spinner for inline reloads. */
.spinner-inline { padding: 1rem 0; }

/* QR-copy "✓" success flash on the copy button. */
.copy-success { color: #4ade80; }

/* Live-game-edit confirm strong text */
.text-emph { color: var(--text); }

/* 404 page back-to-home spacer */
.home-back-link { margin-top: 18px; }

button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

/* ── NAV ──────────────────────────────────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: 54px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav-brand {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
}
.nav-brand img { height: 28px; width: auto; display: block; }

.nav-right { display: flex; align-items: center; gap: 4px; }
.nav-auth  { display: flex; align-items: center; gap: 6px; padding-left: 6px; border-left: 1px solid var(--border); margin-left: 2px; }

.nav-links { display: flex; gap: 2px; }

.nav-links a {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: var(--rs);
  transition: color 0.15s, background 0.15s;
}

.nav-links a.has-live-game::after,
.nav-links a.has-paused-game::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--nav-bg);
}
.nav-links a.has-live-game::after   { background: var(--red);  animation: livePulse 1.2s ease-in-out infinite; }
.nav-links a.has-paused-game::after { background: var(--gold); }

.nav-links a.active { color: var(--text); background: var(--s2); }

/* Nav avatar (signed-in indicator) */
.nav-avatar-link {
  display: flex;
  align-items: center;
  border-radius: 50%;
  text-decoration: none;
}
.nav-avatar-link.active .nav-avatar {
  box-shadow: 0 0 0 2px var(--accent);
}
.nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  display: block;
  transition: opacity 0.15s;
}

/* Icon-only nav buttons (sign in / sign out) */
.nav-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.nav-avatar-guest {
  opacity: 0.4;
}
.nav-icon-btn {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  padding: 5px 6px;
  border-radius: var(--rs);
  cursor: pointer;
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
}

/* Clickable chip (profile link from game card / leaderboard) */
a.chip {
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.chip.self { outline: 1px solid rgba(124, 106, 247, 0.45); outline-offset: -2px; }

/* Inline links within chips */
.chip-char a.char-link {
  color: inherit;
  text-decoration: none;
}
.chip-nick a.nick-link { color: inherit; text-decoration: none; }

/* The name + box inside a stat row are each their own link. */
.row-name-link, .row-sub-link { cursor: pointer; text-decoration: none; }

/* Own profile identity (avatar + nickname) */
#pfIdentity {
  padding: 16px 0 20px;
}

#csIdentity {
  margin-bottom: 20px;
}

.pf-identity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--rs);
  transition: opacity 0.15s;
}

.pf-identity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pf-share-btn { flex: none; }

.pf-name-block { display: flex; flex-direction: column; gap: 1px; }
.pf-nick { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.pf-since { font-size: 12px; font-weight: 400; color: var(--dim); letter-spacing: 0; }
.pf-since-link { color: inherit; text-decoration: none; cursor: pointer; }

.char-objective {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.pace-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
  flex-shrink: 0;
}
a.pace-dot { cursor: pointer; transition: transform 0.12s; }
a.pace-dot:hover { transform: scale(1.3); }
.pace-dot.green  { background: var(--pace-green); }
.pace-dot.yellow { background: var(--pace-yellow); }
.pace-dot.orange { background: var(--pace-orange); }
.pace-dot.red    { background: var(--pace-red); }
.pace-dot.gray   { background: var(--pace-gray); }

/* ── LIVE GAME PANEL ──────────────────────────────────────────────── */
.live-status {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 6px;
}
.live-info {
  text-align: center;
  font-size: 12px;
  color: var(--dim);
  margin-top: 4px;
}
.live-status::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  margin-right: 6px;
  vertical-align: middle;
  animation: livePulse 1.2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.live-time {
  text-align: center;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin: 10px 0 20px;
}
.live-turns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
}
.live-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--s2);
  color: var(--text);
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.live-btn:active { transform: scale(0.95); }
.live-turn-count {
  min-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.live-turn-count > span:first-child {
  font-size: 42px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.live-turn-lbl {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.live-hint {
  text-align: center;
  font-size: 12px;
  color: var(--dim);
  max-width: 320px;
  margin: 4px auto 4px;
  line-height: 1.5;
}

/* ── LAYOUT ───────────────────────────────────────────────────────── */
main {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.25rem 1rem 5rem;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.page-header h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── BUTTONS ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--rs);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary { background: var(--accent); color: #fff; }

.btn-ghost { background: var(--s2); color: var(--muted); border: 1px solid var(--border); }

.btn-danger { background: transparent; color: var(--red); border: 1px solid rgba(224, 84, 84, 0.2); }

.btn-save { background: #f59e0b; color: #271a02; border: 1px solid #f59e0b; }

.btn-sm { font-size: 12px; padding: 5px 10px; border-radius: 5px; }

/* ── FILTER BAR ───────────────────────────────────────────────────── */
.filter-bar { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 8px; }

.pill-group { display: flex; gap: 4px; flex-wrap: wrap; }

.pill {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.pill.on { background: var(--s2); color: var(--text); border-color: var(--s4); }

.filter-char-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  height: 30px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  font-family: inherit;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  width: auto;
  align-self: flex-start;
}
.filter-char-toggle .toggle-right { display: flex; align-items: center; gap: 8px; }

.badge {
  font-size: 11px;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  padding: 1px 5px;
  border-radius: 10px;
  display: none;
}
.badge.visible { display: inline-block; }

.chevron { font-size: 11px; color: var(--dim); transition: transform 0.2s; }
.chevron.open { transform: rotate(180deg); }

.filter-char-panel {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  padding: 12px;
  display: none;
  margin-top: -2px;   /* filter-bar's 8px gap → ~6px, matching new-game */
}
.filter-char-panel.open { display: block; }

.filter-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}
.filter-apply-btn { margin-left: auto; }
.gl-filter-hint { font-size: 11px; color: var(--dim); margin: 0 0 8px; }
.txt-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.12s;
}
.sep { color: var(--dim); font-size: 12px; }


/* ── LIST HEADER (results hint + new game button) ─────────────────── */
.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.list-header .results-hint { margin-bottom: 0; }

/* ── RESULTS HINT ─────────────────────────────────────────────────── */
.results-hint {
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 10px;
}

/* ── RESUME BANNER ────────────────────────────────────────────────── */
.resume-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--accent-d);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.resume-banner-text { display: flex; flex-direction: column; gap: 0.15rem; }
.resume-banner-text strong { color: var(--accent); font-size: 0.9rem; }
.resume-banner-text span   { color: var(--muted);  font-size: 0.8rem; }
.resume-banner-btns { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ── LOAD MORE BUTTON ─────────────────────────────────────────────── */
.btn-load-more {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-load-more:disabled { opacity: 0.5; cursor: default; }

/* ── GAME CARDS ───────────────────────────────────────────────────── */
.games-list { display: flex; flex-direction: column; gap: 8px; }

.pf-games-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  margin-bottom: 12px;
}
.pf-games-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* "Played with": ranked list of the co-players sharing the most games. */
.pf-friends {
  background: var(--s1);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 20px;
}
.pf-friend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text);
  border-top: 1px solid var(--border);
}
.pf-friend:first-child { border-top: none; }
.pf-friend .player-avatar { margin-right: 0; }
.pf-friend-rank  { width: 16px; flex-shrink: 0; text-align: right; font-size: 13px; font-weight: 700; color: var(--muted); }
.pf-friend-nick  { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-friend-count { flex-shrink: 0; font-size: 13px; color: var(--dim); }

/* Character detail: "Rivalries", most-beaten / most-lost-to opponents. */
.cs-adv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.cs-adv-col { background: var(--s1); border-radius: var(--r); overflow: hidden; }
.cs-adv-title {
  padding: 10px 14px 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.cs-adv-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; text-decoration: none; color: var(--text);
  border-top: 1px solid var(--border);
}
.cs-adv-row .char-portrait { width: 24px; height: 24px; flex-shrink: 0; }
.cs-adv-name  { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-adv-count { flex-shrink: 0; font-size: 12px; color: var(--dim); }
.cs-adv-empty { padding: 4px 14px 12px; color: var(--dim); font-size: 13px; }
.cs-adv-seg .seg-btn { padding: 4px 11px; }

/* ── CHARTS PAGE + CHART PRIMITIVES ───────────────────────────────────────── */
.charts-intro { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.chart-picker { margin-bottom: 16px; }
.chart-select-wrap { position: relative; width: 100%; }
.chart-chevron {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--muted); font-size: 18px;
  transition: transform 0.2s;
}
.chart-select:open ~ .chart-chevron { transform: translateY(-50%) rotate(180deg); }
/* Inherits height/line-height/border/box-sizing/appearance from the global
   select rule, which UA-centres the value; we only retune colour, weight, the
   right padding for the chevron, and hide the global arrow. */
.chart-select {
  width: 100%;
  font-size: 14px; font-weight: 600;
  background: var(--s1);
  background-image: none;
  padding: 0 32px 0 12px;
  cursor: pointer;
}

.chart-card {
  background: var(--s1); border: 1px solid var(--border);
  border-radius: var(--r); padding: 16px;
}
.chart-card-desc { font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.45; min-height: 4.4em; }
.chart-stage { min-height: 240px; }
.chart-note { color: var(--muted); font-size: 13px; text-align: center; padding: 60px 16px; }
.chart-note code { background: var(--s3); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.chart-caption { margin-top: 10px; min-height: 18px; font-size: 13px; font-weight: 600; color: var(--text); text-align: center; }
.chart-caption-link { color: var(--accent); text-decoration: none; }

/* SVG chart primitives (charts.js) */
.chart-svg { width: 100%; height: auto; display: block; }
.ch-zoomable { touch-action: pan-y; }   /* zoomable scatter; JS toggles to 'none' while zoomed in */
.chart-svg text { font-family: inherit; pointer-events: none; }
.ch-lbl { font-size: 11px; fill: var(--text); }
.ch-ax  { font-size: 9.5px; fill: var(--muted); }
.ch-axlbl { font-size: 10px; fill: var(--muted); }
.ch-grid { stroke: var(--border); stroke-width: 1; }
.ch-cellval { font-size: 10px; font-weight: 600; fill: #fff; }
.ch-cell-empty { fill: var(--s2); }
.ch-empty { font-size: 12px; fill: var(--muted); }
.ch-hit { cursor: pointer; }
.ch-hit.sel { stroke: var(--text); stroke-width: 2; }
/* Scatter dots sit in a scaled group; keep their selection ring a constant width. */
.ch-dot { vector-effect: non-scaling-stroke; }
/* Scatter zoom: the plot frame brightens and a level badge appears while zoomed. */
.ch-plot-frame { fill: none; stroke: var(--border); stroke-width: 1; }
.ch-zoomable.zoomed .ch-plot-frame { stroke: var(--accent); stroke-width: 1.5; }
.ch-zoom-badge { opacity: 0; transition: opacity 0.15s ease; pointer-events: none; }
.ch-zoomable.zoomed .ch-zoom-badge { opacity: 1; pointer-events: auto; cursor: pointer; }
.ch-zoom-badge-bg { fill: var(--accent); }
.ch-zoom-badge-txt { font-size: 10px; font-weight: 700; fill: #fff; }

@media (hover: hover) {
  .chart-select:hover { border-color: var(--s4); }
  .chart-caption-link:hover { text-decoration: underline; }
}

/* Shared dark panel surface, game cards and the leaderboard / stats table. */
.game-card,
.lb-table {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.card-body { padding: 12px 14px; }

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}

.card-date { font-size: 13px; font-weight: 600; }

.card-meta {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  text-align: right;
  line-height: 1.6;
}
.card-loc-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.card-loc-btn:hover { text-decoration: underline; text-underline-offset: 2px; }

.card-players { display: flex; flex-wrap: wrap; gap: 6px; }

/* Character-primary chip */
.chip {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--rs);
  background: var(--s2);
  border: 1px solid var(--border);
}

.chip-img { display: flex; flex-shrink: 0; }
.chip .char-portrait { width: 32px; height: 32px; }
.chip-body { min-width: 0; }

.chip-char {
  font-weight: 600;
  color: var(--text);
  display: block;
}

.chip-char .win-star { font-size: 11px; }
.win-star { font-size: 13px; line-height: 1; align-self: center; }

.chip-nick { font-size: 11px; color: var(--muted); }

/* Winner highlight, game-card chips and claim-page rows. */
.chip.winner,
.claim-row.winner {
  background: var(--gold-d);
  border-color: rgba(240, 165, 0, 0.28);
}
.chip.winner .chip-char { color: var(--gold); }
.chip.winner .chip-nick { color: rgba(240, 165, 0, 0.55); }
[data-theme="light"] .chip.winner .chip-nick { color: var(--gold); opacity: 1; }

.card-actions {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
}

/* ── EMPTY / LOADING ──────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--muted);
}
.empty-icon { font-size: 32px; margin-bottom: 0.5rem; opacity: 0.4; }
.empty h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.empty p { font-size: 13px; margin-bottom: 1rem; }
.spinner { text-align: center; padding: 3rem; color: var(--dim); font-size: 13px; }

/* ── BOTTOM SHEET ─────────────────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 50;
  display: none;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.overlay.open { display: flex; }

.sheet {
  width: 100%;
  max-width: 640px;
  max-height: 92dvh;
  background: var(--s1);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.22s ease;
}
@keyframes slideUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--s4);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sheet-header h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

.sheet-close {
  background: var(--s2);
  border: none;
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  line-height: 1;
}

.sheet-body {
  overflow-y: auto;
  padding: 16px;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.sheet-footer {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.sheet-footer .btn { width: 100%; justify-content: center; font-size: 14px; padding: 11px; }

.sheet-footer-row {
  display: flex;
  gap: 8px;
}
.sheet-footer-row .btn { flex: 1; }

.btn:disabled,
.pf-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.confirm-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* ── FORM ─────────────────────────────────────────────────────────── */
.field { margin-bottom: 12px; min-width: 0; }
.form-row .field { margin-bottom: 6px; }
.form-row .field label { margin-bottom: 2px; }
.form-row input { height: 30px; min-height: 30px; max-height: 30px; font-size: 13px; }

.field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}

.optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--dim);
  font-size: 11px;
}

input[type="datetime-local"],
input[type="number"],
input[type="text"],
select {
  width: 100%;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  box-sizing: border-box;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.3;
  padding: 0 11px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
input[type="datetime-local"] {
  display: flex;
  align-items: center;
  overflow: hidden;
}
input[type="datetime-local"]::-webkit-datetime-edit         { padding: 0; line-height: 1.3; height: 100%; display: flex; align-items: center; }
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator    { padding: 0; margin: 0; }
input[type="datetime-local"]::-webkit-inner-spin-button            { display: none; }
input:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-d);
}
input::placeholder { color: var(--dim); }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}
select option { background: #1a1a1a; }
select optgroup { background: #1a1a1a; color: var(--muted); font-style: normal; font-size: 11px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 16px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#formContent .section-label { margin: 10px 0 6px; min-height: 28px; }
#formContent .form-row + .section-label { margin-top: 2px; }
#formContent .section-label > .btn-sm,
#formContent .section-label > .players-count-select,
#formContent .section-label .header-actions .btn-sm,
#formContent .section-label .header-actions .players-count-select { margin: -2px 0; }

.players-count-select {
  width: auto;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  padding: 0 22px 0 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background-position: right 6px center;
}

.players-legend {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  /* font-style: italic; */
  color: var(--dim);
  font-size: 9px;
  margin-left: 10px;
  /* Take the row's free width so _layoutLegend() can measure how much fits and
     split the legend into balanced rows. */
  flex: 1 1 auto;
  min-width: 0;
}
/* Each "symbol = meaning" pair stays on one line; _layoutLegend() groups pairs
   into balanced .legend-row lines, with separators only between pairs on a row. */
.players-legend .legend-row  { display: block; }
.players-legend .legend-item { white-space: nowrap; }
.players-legend .legend-sep  { white-space: pre; }

.row-num { font-size: 12px; color: var(--dim); width: 16px; text-align: right; flex-shrink: 0; margin-right: 8px; }
.drag-handle {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: grab;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
.drag-handle:active { cursor: grabbing; }
.drag-dots { font-size: 16px; color: var(--muted); line-height: 1; }

.pf-btn.me.on {
  background: var(--accent-d);
  border-color: rgba(124, 106, 247, 0.35);
  color: var(--accent);
}
.pf-btn.me.locked { opacity: 0.4; }

.pf-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--rs);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  border: 1px solid var(--border);
  font-size: 14px;
  background: var(--s3);
  color: var(--dim);
}
.pf-btn.win.on {
  background: var(--gold-d);
  border-color: rgba(240, 165, 0, 0.35);
  color: var(--gold);
}
.pf-btn.del {
  color: var(--muted);
}

/* .pf-btn:disabled shares .btn:disabled (above). */
select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: var(--s3);
}

.add-row-btn {
  width: 100%;
  background: transparent;
  border: 1px dashed var(--s4);
  border-radius: var(--rs);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 10px;
  cursor: pointer;
  margin-top: 0;
  transition: all 0.15s;
}
.add-row-btn:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

.err {
  background: var(--red-d);
  border: 1px solid rgba(224, 84, 84, 0.3);
  color: var(--red);
  font-size: 13px;
  padding: 9px 12px;
  border-radius: var(--rs);
  margin-bottom: 12px;
  display: none;
}
.err.show { display: block; }
.err.shake { animation: errShake 0.45s cubic-bezier(.36,.07,.19,.97); }
@keyframes errShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* ── LEADERBOARD ──────────────────────────────────────────────────── */
.controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.25rem; }

.seg {
  display: flex;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  padding: 3px;
  gap: 3px;
  width: fit-content;
}
.seg-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.seg-btn.on { background: var(--s3); color: var(--text); }

.summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 1.25rem;
}

.stat-box {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
}
.stat-val { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.stat-lbl { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* .lb-table surface is defined with .game-card (shared panel surface). */
.lb-head,
.lb-row {
  display: grid;
  grid-template-columns: 28px 1fr 80px 58px 52px;
  padding: 9px 14px;
  align-items: center;
}

.lb-head {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.lb-head span {
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.lb-row {
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.lb-row:last-child { border-bottom: none; }

/* Leaderboard only: character rows carry a 2-line identity (name + box sub) while
   player rows are 1 line, so they differ in height. Even both tabs out to a
   middle height, a min-height plus slightly tighter padding so the taller
   (character) rows shrink and the shorter (player) rows grow to meet it. */
#lb .lb-row, #pfRoot .lb-row { min-height: 47px; padding-top: 7px; padding-bottom: 7px; }
/* The character identity is two lines (name + box) and inherits body line-height
   1.5, making it taller than the min-height can absorb. Tighten it so the block
   fits and min-height governs both tabs to the same height. Applied on the
   leaderboard (#lb) and the player page's character board (#pfRoot) alike.
   The tightened line-height clips descenders (g/y/p/q/j) against the
   overflow:hidden box needed for the ellipsis truncation, so pad the box
   past the line-box and cancel the padding with an equal negative margin,
   this keeps the two-line block's total footprint (and thus min-height)
   unchanged while giving descenders physical room inside the clip box. */
#lb .row-name, #pfRoot .row-name { line-height: 1.3; padding-bottom: 3px; margin-bottom: -3px; }
#lb .row-sub,  #pfRoot .row-sub  { line-height: 1.2; margin-top: 0; padding-bottom: 2px; margin-bottom: -2px; }

/* The viewer's own row, highlighted wherever it appears (top list or pinned). */
.lb-row-self {
  background: var(--accent-d);
  box-shadow: inset 3px 0 0 var(--accent);
}
/* "Your position" divider shown above a pinned self-row that ranks below the cut. */
.lb-row-sep {
  padding: 6px 14px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.rank-num { font-size: 12px; font-weight: 700; color: var(--dim); }
.rank-num.gold   { color: var(--gold); }
.rank-num.silver { color: #aaa; }
.rank-num.bronze { color: #a0856a; }

.row-name { display: block; font-size: 14px; font-weight: 600; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-name .char-portrait { margin-right: 5px; }
.row-sub  { display: block; font-size: 11px; color: var(--dim); text-decoration: none; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.row-identity { display: flex; align-items: center; gap: 8px; overflow: hidden; min-width: 0; }
.row-identity > div { overflow: hidden; min-width: 0; }
.row-identity .char-portrait { width: 28px; height: 28px; flex-shrink: 0; }
.row-identity .player-avatar { width: 28px; height: 28px; flex-shrink: 0; }

.row-val   { font-size: 14px; font-weight: 700; text-align: right; }
.row-games { font-size: 12px; color: var(--muted); text-align: right; }

.bar-cell { padding: 0 4px; }
.bar-bg { height: 4px; background: var(--s4); border-radius: 2px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.3s ease; }
.bar-fill.gold { background: var(--gold); }

.empty-state { text-align: center; padding: 2.5rem; color: var(--muted); font-size: 13px; }

/* ── CHARACTER PICKER ─────────────────────────────────────────────── */
.char-portrait {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  vertical-align: middle;
}

.player-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 5px;
}
.player-avatar-lg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.zoomable { cursor: zoom-in; }

/* ── AVATAR ZOOM LIGHTBOX ─────────────────────────────────────────── */
.avatar-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
  cursor: zoom-out;
}
.avatar-lightbox.open { display: flex; }
.avatar-lightbox-img {
  max-width: min(420px, 80vw);
  max-height: min(420px, 80vh);
  width: auto;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  background: var(--s1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  cursor: zoom-out;
}
.avatar-lightbox-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.avatar-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.avatar-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 4px 0 8px;
}
.avatar-option {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s;
}
.avatar-option.selected { border-color: var(--accent); opacity: 1; }

/* ── COMPOSITE AVATAR (recipe) ────────────────────────────────────── */
/* A built avatar renders as a sized box (it reuses the same size class as a
   plain <img>, e.g. .player-avatar / .nav-avatar) with the part PNGs stacked
   inside and clipped to the circle. */
.avatar-stack {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.avatar-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  /* The source art sits slightly left of centre; nudge every layer right.
     Percentage keeps it proportional at every avatar size (nav → lightbox). */
  transform: translateX(2%);
}
/* Composite shown in the zoom lightbox needs an explicit square size since the
   stacked layers are absolutely positioned (no intrinsic dimensions). */
.avatar-stack.avatar-lightbox-img {
  width: min(420px, 80vw);
  height: min(420px, 80vw);
  max-width: none;
  max-height: none;
  aspect-ratio: 1 / 1;
}

/* ── AVATAR BUILDER ───────────────────────────────────────────────── */
/* Toolbar row: the Presets / Build .seg tabs on the left, "Use default icon" on
   the right. */
.avatar-tab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}
.avatar-actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* Phone widths (iPhone SE etc.): tighten gaps + horizontal padding so the tabs
   and the Default/Random/Apply buttons stay on one row. */
@media (max-width: 430px) {
  .avatar-tab-row { gap: 5px; }
  .avatar-actions { gap: 4px; }
  .avatar-tab-row .seg-btn { padding-left: 8px; padding-right: 8px; }
  .avatar-tab-row .btn-sm  { padding-left: 7px; padding-right: 7px; }
}
.builder-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.builder-preview {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}
/* In the Presets pane the preview sits above the grid (no flex-gap parent), so
   give it its own spacing. */
#photosPreview { margin-bottom: 14px; }
.builder-preview-av {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--s2);
  object-fit: cover;   /* crop preset photos to the circle (ignored by composites) */
}
.builder-controls {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  container-type: inline-size;
}
.builder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* Part rows reuse the compact month-nav buttons; shrink them a touch more
   here and remove inter-row spacing so the eight slots stay tight. */
.builder-row .cs-month-nav {
  width: 22px;
  height: 22px;
  font-size: 14px;
}
.builder-row-label {
  font-size: 0.82rem;
  color: var(--text);
}
.builder-stepper {
  display: flex;
  align-items: center;
  gap: 5px;
}
.builder-count {
  min-width: 38px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
}
.builder-num { color: var(--text); font-weight: 600; }
/* Give the background row a little breathing room from the tight part rows. */
.builder-row-bg { align-items: flex-start; margin-top: 8px; }
.builder-swatches {
  display: grid;
  grid-template-columns: repeat(10, 24px);
  gap: 6px;
  justify-content: flex-end;
}
/* All ten in one row when there's room; otherwise fall back to two rows of five. */
@container (max-width: 380px) {
  .builder-swatches { grid-template-columns: repeat(5, 24px); }
}
.builder-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.builder-swatch.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-d); }
.builder-swatch-custom {
  position: relative;
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}
.builder-swatch-custom input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}
.box-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  padding: 4px 0 8px;
}
.box-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--s1);
  border: 0;
  border-radius: var(--rs);
  padding: 6px;
  cursor: pointer;
  font: inherit;
  color: var(--muted);
  transition: color 0.15s;
}
.box-option img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  border-radius: var(--rs);
  filter: grayscale(1);
  opacity: 0.45;
  transition: filter 0.15s, opacity 0.15s;
}
/* Box-completion achievements: a compact strip of covers (grayscale until the
   box is fully played, like the box picker) with play/win gold markers. */
.ach-group-label { font-size: 11px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; margin: 6px 0 5px; }
.box-ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 8px;
  padding: 2px 0 10px;
}
.box-ach { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.box-ach-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  border-radius: var(--rs);
  filter: grayscale(1);
  opacity: 0.4;
  transition: filter 0.2s, opacity 0.2s;
}
.box-ach.played .box-ach-img { filter: none; opacity: 1; }
/* Won-all: a crown badge on the top-right corner of the (full-colour) cover. */
.box-ach.won { position: relative; }
.box-ach.won::after { content: '👑'; position: absolute; top: -4px; left: -4px; font-size: 15px; line-height: 1; }
/* Medal strip under achievement / box-completion tiles. */
.box-ach-medals,
.ach-tile-medals { display: flex; gap: 6px; font-size: 13px; line-height: 1; }
.box-ach-medal:not(.on) { color: var(--dim); }

/* Box achievement detail sheet */
.box-detail-cover { width: 46px; aspect-ratio: 4 / 5; object-fit: contain; border-radius: var(--rs); flex-shrink: 0; }
.box-detail-list { display: flex; flex-direction: column; margin-top: 14px; }
.box-detail-char { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-top: 1px solid var(--border); }
.box-detail-char .char-portrait { width: 28px; height: 28px; flex-shrink: 0; }
.box-detail-char-name { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.box-detail-marks { display: flex; gap: 10px; font-size: 13px; flex-shrink: 0; }
.box-detail-marks span:not(.on) { color: var(--dim); }

.box-option-name { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; }
.box-option-year { font-size: 11px; }
.box-option.selected { color: var(--text); }
.box-option.selected img { filter: none; opacity: 1; }
.ach-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px;
}
.ach-grid {
  /* auto-fill (not auto-fit) keeps a fixed ~80px tile size: empty columns are
     preserved rather than collapsed, so a player with only a few achievements
     gets the same tile size as a fully-populated grid, with blank space on the
     right instead of oversized stretched tiles. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
  padding: 4px 0 8px;
}
.ach-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  background: none;
  border: 0;
  padding: 2px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.ach-tile-imgwrap { position: relative; display: inline-flex; line-height: 0; }
.ach-tile-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  transition: filter 0.2s, opacity 0.2s;
}
/* Grayscale + dim characters with no plays and no wins (mirrors a locked box). */
.ach-tile.dim .ach-tile-img { filter: grayscale(1); opacity: 0.4; }
/* Crown (gold on both plays and wins) on the portrait corner, like the box badge. */
.ach-tile.crowned .ach-tile-imgwrap::after { content: '👑'; position: absolute; top: -6px; left: -6px; font-size: 15px; line-height: 1; }
/* .ach-tile-medals shares .box-ach-medals (above). */
/* Badge used as the "image" for global tiles (table-size number, location pin). */
.gl-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--s2);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.gl-badge-emoji { font-size: 21px; font-weight: 400; }
.gl-badge { transition: filter 0.2s, opacity 0.2s; }
.ach-tile.dim .gl-badge { filter: grayscale(1); opacity: 0.45; }
.ach-row-icon { font-size: 12px; opacity: 0.7; }
.ach-medal {
  font-size: 13px;
  line-height: 1;
  transition: opacity 0.15s;
}
/* Locked = empty slot: a dim middot, uniform with the box medals. */
.ach-medal.locked { color: var(--dim); filter: none; }
/* Cup tier tints, recolor the 🏆 emoji per tier via filters.
   The trick: grayscale flattens the emoji, then sepia + hue-rotate
   tints it toward bronze/silver/gold. Silver keeps a slight cool tint so
   it doesn't blend into the neutral-grey locked state. */
/* Star tier tints, same recipe as the cups so plays/wins share an aura. */
.ach-cup.ach-cup-bronze,
.ach-star.ach-star-bronze {
    filter: grayscale(1) sepia(1) saturate(1.8) hue-rotate(-35deg) brightness(0.75) contrast(1.1);
}
.ach-cup.ach-cup-silver,
.ach-star.ach-star-silver {
  filter: grayscale(0.85) saturate(0.7) hue-rotate(180deg) brightness(1.3) contrast(0.9);
}
.ach-cup.ach-cup-gold,
.ach-star.ach-star-gold {
  filter: grayscale(1) sepia(1) saturate(3.5) hue-rotate(12deg) brightness(1.15) contrast(1.05);
}

@media (hover: hover) {
  .ach-tile:hover .ach-tile-img,
  .ach-tile:hover .gl-badge { filter: none; opacity: 0.85; }
}

.ach-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.ach-detail-head.crowned { position: relative; }
.ach-detail-head.crowned::after { content: '👑'; position: absolute; top: -6px; left: -6px; font-size: 17px; line-height: 1; }
.ach-detail-name { font-size: 18px; font-weight: 700; }
.ach-track {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.ach-track-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.ach-track-tier {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  opacity: 0.5;
}
.ach-track-tier.earned { opacity: 1; }
.ach-track-icon { font-size: 18px; text-align: center; line-height: 1; }
.ach-track-tier:not(.earned) .ach-track-icon { filter: grayscale(1); }
.ach-track-name { font-size: 13px; font-weight: 600; }
.ach-track-status { font-size: 12px; color: var(--muted); }

.box-option.selected::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
@media (hover: hover) {
  .box-option:hover img { filter: none; opacity: 0.85; }
  .box-ach:hover .box-ach-img { filter: none; opacity: 0.85; }
}

.draw-mode-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1rem;
}
.draw-mode-row .seg-btn { padding: 5px 9px; }
.draw-mode-select {
  width: auto;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  padding: 0 26px 0 10px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  background-position: right 8px center;
}
.pace-colors { display: flex; gap: 4px; flex-shrink: 0; }
.pace-color {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.pace-color.green  { background: var(--pace-green); }
.pace-color.yellow { background: var(--pace-yellow); }
.pace-color.orange { background: var(--pace-orange); }
.pace-color.red    { background: var(--pace-red); }
.pace-color:hover  { transform: scale(1.08); }
/* Selection states. "primary" is the clicked colour, full colour + the black
   ring (2px border + 1px box-shadow, which Firefox renders evenly, unlike a 3px
   border). Pace+ neighbours render at full colour with no ring (no rule needed).
   Colours outside the selection stay coloured but fade back. */
.pace-color.sel-primary { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.pace-color.sel-out     { opacity: 0.2; }

/* Inline variant, sits in the same row as the mode select */
.exclude-toggle.exclude-toggle-inline {
  width: auto;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  height: 30px;
  flex-shrink: 0;
  gap: 6px;
}
.exclude-toggle.exclude-toggle-inline .toggle-right { gap: 6px; }
.draw-mode-actions { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
.owned-toggle.disabled { opacity: 0.45; }
.exclude-toggle-inline ~ .exclude-body,
.draw-mode-row + .exclude-body {
  border-top: 1px solid var(--border);
  border-radius: var(--rs);
  margin-top: 0;
}
/* Tuck the toggle row close to whatever follows it, the open pool panel, or
   the Players section when the panel is closed, instead of leaving the row's
   full bottom margin (which felt like too big a gap when closed). */
.draw-mode-row:has(+ .exclude-body) { margin-bottom: 6px; }

/* Pace/Mine selection row inside the filter: "Pace:" swatches, the Pace+
   modifier, and "Mine". */
.filter-bulk-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.filter-bulk-row .seg-btn { padding: 4px 10px; }
.owned-toggle.on { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── PLAYER SLOTS ─────────────────────────────────────────────────── */
#orderSlots { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.order-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 3px 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.order-slot.spinning {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-d);
}
.order-slot.dragging { opacity: 0.35; }
.order-slot.spinning .order-slot-portrait {
  animation: slotPulse 0.55s ease-in-out infinite;
}
@keyframes slotPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.order-slot-portrait {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.order-slot .pf-btn { width: 30px; height: 30px; font-size: 12px; }
.order-slot-actions {
  display: flex;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}
.order-slot-info {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
/* Hidden picker, overlays the info area; tap to open the dropdown */
.order-slot-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
  background: none;
  border: none;
  padding: 0;
}
.order-slot-select option,
.order-slot-select optgroup { font-size: 13px; }
.order-slot-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-slot-empty { color: var(--dim); font-weight: 400; font-style: italic; }
.order-slot-chevron {
  flex-shrink: 0;
  font-size: 22px;
  color: var(--muted);
  line-height: 1;
  transition: transform 0.2s;
}
/* Progressive enhancement: rotate the chevron while the native picker is open.
   :open on <select> is supported in recent Chromium; the rule is a harmless
   no-op in browsers that don't recognise it. */
.order-slot-select:open ~ .order-slot-chevron { transform: rotate(180deg); }

/* New game page footer */
.new-game-footer {
  display: flex;
  gap: 8px;
  margin-top: 0.5rem;
  padding-bottom: env(safe-area-inset-bottom);
}
.new-game-footer .btn { flex: 1; justify-content: center; font-size: 14px; padding: 9px; }

/* Shared char grid (exclude panel + filter panel) */
.exclude-toggle,
.filter-char-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  width: 100%;
  font-family: inherit;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.exclude-toggle-label { color: inherit; }
.toggle-right { display: flex; align-items: center; gap: 8px; }

.exclude-body {
  background: var(--s1);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--rs) var(--rs);
  padding: 12px 14px;
  display: none;
  margin-bottom: 0;
}
.exclude-body.open { display: block; }

.box-group { margin-bottom: 10px; }
.box-group:last-child { margin-bottom: 0; }
.box-name {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 5px;
  cursor: pointer;
  transition: color 0.12s;
}
/* Guard hover so a tap on touch devices doesn't leave the name stuck highlighted. */
@media (hover: hover) {
  .box-name:hover { color: var(--text); }
}
.box-pills { display: flex; flex-wrap: wrap; gap: 5px; }

.char-pill {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  user-select: none;
}

/* "on" = selected as include-filter (games page) */
.char-pill .char-portrait { width: 14px; height: 14px; }
.char-pill.on {
  background: var(--accent-d);
  border-color: rgba(124, 106, 247, 0.4);
  color: #c4bbff;
}

/* "excluded" = excluded from draw (character page) */
.char-pill.excluded {
  color: var(--dim);
  border-color: var(--s3);
  background: var(--s2);
  text-decoration: line-through;
  opacity: 0.5;
}

/* ── QR CODE ──────────────────────────────────────────────────────── */
.qr-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.qr-wrap > div { line-height: 0; border-radius: var(--rs); overflow: hidden; }
.qr-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.qr-url {
  flex: 1;
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
}

/* ── CLAIM PAGE ───────────────────────────────────────────────────── */
.claim-game-info {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 20px;
}
.claim-date { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.claim-meta { font-size: 12px; color: var(--muted); }

.claim-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.claim-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 14px;
}
/* .claim-row.winner shares .chip.winner (winner highlight, above). */
.claim-row.mine { border-color: rgba(124, 106, 247, 0.4); }

.claim-char { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.claim-row.winner .claim-char { color: var(--gold); }
.claim-nick { font-size: 12px; color: var(--muted); }
.claim-nick.unclaimed { font-style: italic; }
.claim-mine-actions { display: flex; align-items: center; gap: 10px; }
.claim-topbar { margin-bottom: 8px; }
.claim-share-row { display: flex; justify-content: flex-end; gap: 8px; margin: 4px 0 14px; }
.claim-success {
  text-align: center;
  font-size: 13px;
  color: var(--accent);
  padding: 12px 0 0;
}

/* ── CHARACTER STATS PAGE ─────────────────────────────────────────── */
.cs-table .lb-head,
.cs-table .lb-row {
  grid-template-columns: 80px 1fr 64px 52px;
}

.row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

/* Roster summary (top/bottom 3 per metric) */
.cs-summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.cs-month-picker-wrap { flex: 1; position: relative; display: flex; justify-content: center; }
.cs-month-text {
  text-align: center;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}
@media (hover: hover) {
  .cs-month-text:hover { color: var(--accent); }
}
.cs-month-picker-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 10px;
  min-width: 220px;
}
.cs-month-picker-panel.open { display: block; }
.cs-mp-year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cs-mp-year-text { font-weight: 700; font-size: 14px; }
.cs-mp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.cs-mp-month {
  background: var(--s2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--rs);
  padding: 6px 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.cs-mp-month.selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.cs-mp-month:disabled { opacity: 0.35; cursor: not-allowed; }
@media (hover: hover) {
  .cs-mp-month:not(:disabled):not(.selected):hover { background: var(--s3); }
}
.cs-month-nav {
  background: var(--s2);
  border: 1px solid var(--border);
  color: var(--text);
  width: 26px;
  height: 26px;
  border-radius: var(--rs);
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.cs-month-nav:disabled { opacity: 0.35; cursor: not-allowed; }
@media (hover: hover) {
  .cs-month-nav:not(:disabled):hover { background: var(--s3); }
}
.cs-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 1.25rem;
}
/* First-load skeleton: a placeholder row that mirrors a real .cs-mini-row so the
   card is the right height before data arrives (no layout jump). */
.cs-skel-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--s3); flex: none; }
.cs-skel-bar { height: 12px; width: 34px; border-radius: 4px; background: var(--s3); margin-left: auto; }
.cs-skel { pointer-events: none; }
.cs-skel .cs-skel-dot, .cs-skel .cs-skel-bar { animation: csSkelPulse 1.2s ease-in-out infinite; }
@keyframes csSkelPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* While a new month loads, the existing cards stay put but dim for feedback. */
.cs-report-loading .cs-summary { opacity: 0.45; transition: opacity 0.1s; }
.cs-summary-empty { color: var(--muted); font-size: 13px; padding: 14px 2px; margin-bottom: 1.25rem; }
.cs-summary-card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.cs-summary-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}
.cs-mini-section-lbl {
  font-size: 9px;
  font-weight: 700;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 3px 0 1px;
}
.cs-mini-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 2px;
  border-radius: var(--rs);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.cs-mini-row .char-portrait { width: 28px; height: 28px; }
.cs-mini-val {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .cs-mini-row:hover { background: var(--s2); }
}

.cs-roster-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem; }
.cs-roster-controls-lbl { font-size: 12px; font-weight: 600; color: var(--muted); }

.char-roster-group { margin-bottom: 1.5rem; scroll-margin-top: 70px; }

.char-roster-group-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
}

.char-roster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.char-roster-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px 12px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-decoration: none;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}

.char-roster-portrait {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

.char-roster-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.cs-search {
  position: relative;
  width: 190px;
  flex-shrink: 0;
}
.cs-search input { font-size: 13px; padding: 7px 10px; }

/* Wrapper that anchors a .cs-dropdown to a full-width form input. */
.ac-wrap { position: relative; }

.cs-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  max-height: 260px;
  overflow-y: auto;
  z-index: 30;
  display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.cs-dropdown.open { display: block; }

.cs-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.cs-option.active { background: var(--s3); }
.cs-option .char-portrait { width: 20px; height: 20px; flex-shrink: 0; }
.cs-option-box {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

/* ── HOME PAGE ────────────────────────────────────────────────────── */
.home-hero {
  margin-bottom: 2rem;
  padding-top: 0.5rem;
}

.home-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text);
}

.home-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-title-row .home-title { flex: 1; }

.home-tagline {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.home-share-btn { flex-shrink: 0; }

.home-steps-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px 2px;
}

.home-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 2rem;
}

.home-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--s1);
  border-radius: var(--r);
  padding: 14px 16px;
}

.home-step-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--dim);
  line-height: 1;
  flex-shrink: 0;
  width: 20px;
}

.home-step-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.home-step-body strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.home-sections {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-section-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--s1);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.12s;
  box-sizing: border-box;
}

.home-section-static { cursor: default; }

.home-section-btns {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.home-section-btns .btn {
  min-width: 34px;
  padding: 5px 8px;
  justify-content: center;
}

.home-section-icon {
  font-size: 22px;
  line-height: 1;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.home-section-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-section-name {
  color: var(--text);
}

.home-section-desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.home-faq {
  margin-top: 2rem;
}

.home-faq-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px 2px;
}

.home-faq-title span {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.home-faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.home-faq-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--s1);
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.home-faq-item strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.home-ack { margin-top: 2rem; }
.home-ack-card {
  background: var(--s1);
  border-radius: var(--r);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.home-ack-card p { margin: 0; }
.home-ack-card p + p { margin-top: 8px; }
.home-ack-card strong { color: var(--text); font-weight: 600; }
.home-ack-card a { color: var(--accent); text-decoration: none; }

/* ── ACCOUNT PAGE ────────────────────────────────────────────────── */

/* Player-info identity: large avatar + name/since/actions, centred as one block.
   The avatar doubles as the live preview, so it stays put across both icon tabs. */
.acct-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 4px 0 16px;
}
.acct-identity-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--s2);
  object-fit: cover;
  flex-shrink: 0;
}
.acct-identity-info { display: flex; flex-direction: column; gap: 4px; }
.acct-nick { font-size: 20px; font-weight: 700; color: var(--text); }
.acct-nick-link { color: inherit; text-decoration: none; }
.acct-change-nick { align-self: flex-start; margin-top: 6px; }

.acct-section {
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.acct-section .section-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 10px;
}

.acct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── SIGN-IN PAGE ─────────────────────────────────────────────────── */
.signin-card {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.signin-intro {
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
.signin-hint {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}
.signin-hint strong { color: var(--text); margin-right: 4px; }
.signin-providers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--s1);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
.signin-btn:active { transform: translateY(1px); }
.signin-btn-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── ACCOUNT: LINKED PROVIDERS ────────────────────────────────────── */
.acct-identities { margin-bottom: 12px; }
.identity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--s1);
}
.identity-row + .identity-row { margin-top: 8px; }
.identity-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}
.identity-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.identity-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.identity-meta {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.identity-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.identity-linked-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-d);
  padding: 4px 8px;
  border-radius: 999px;
}

/* ── HOVER STATES (pointer devices only) ─────────────────────────── */
@media (hover: hover) {
  .nav-links a:hover                        { color: var(--text); background: var(--s2); }
  .nav-brand:hover                          { opacity: 0.65; }
  .nav-avatar:hover                         { opacity: 0.75; }
  .nav-avatar-btn:hover .nav-avatar-guest   { opacity: 0.7; }
  .nav-icon-btn:hover                       { color: var(--text); background: var(--s2); }
  a.chip:hover                              { border-color: var(--s4); }
  a.chip.winner:hover                       { border-color: rgba(240, 165, 0, 0.5); }
  .chip-char a.char-link:hover              { text-decoration: underline; text-underline-offset: 2px; }
  .chip-nick a.nick-link:hover              { text-decoration: underline; text-underline-offset: 2px; }
  /* No underline-offset here: the rows clip overflow (for ellipsis) and run a
     tight line-height, so an offset underline gets cut off. Default position
     keeps it inside the line box and visible. */
  .row-name-link:hover                      { text-decoration: underline; }
  .row-sub-link:hover                       { text-decoration: underline; color: var(--muted); }
  .pf-since-link:hover                      { text-decoration: underline; text-underline-offset: 2px; color: var(--muted); }
  .pf-friend:hover                          { background: var(--s2); }
  .pf-friend:hover .pf-friend-nick          { text-decoration: underline; }
  .cs-adv-row:hover                         { background: var(--s2); }
  .cs-adv-row:hover .cs-adv-name            { text-decoration: underline; }
  .home-ack-card a:hover                    { text-decoration: underline; }
  .acct-nick-link:hover                     { text-decoration: underline; text-underline-offset: 2px; }
  .lb-row:hover                             { background: var(--s2); }
  .pf-identity:hover                        { opacity: 1; }
  .live-btn:hover                           { background: var(--s3); border-color: var(--s4); }
  .btn-primary:hover                        { opacity: 0.88; }
  .btn-ghost:hover                          { color: var(--text); background: var(--s3); }
  .btn-danger:hover                         { background: var(--red-d); border-color: rgba(224, 84, 84, 0.45); }
  .btn-save:hover                           { opacity: 0.88; }
  .btn-load-more:hover                      { background: var(--s2); color: var(--text); }
  .signin-btn:hover                         { background: var(--s2); border-color: var(--s4); }
  .pill:hover                               { color: var(--text); border-color: var(--s4); }
  .filter-char-toggle:hover                 { background: var(--s2); color: var(--text); }
  .exclude-toggle:hover                     { background: var(--s2); color: var(--text); }
  .txt-btn:hover                            { color: var(--text); }
  .sheet-close:hover                        { color: var(--text); background: var(--s3); }
  .pf-btn.rand:hover                        { background: var(--s4); border-color: var(--dim); color: var(--text); }
  .pf-btn.me:hover                          { background: var(--accent-d); border-color: rgba(124, 106, 247, 0.35); color: var(--accent); }
  .pf-btn.win:hover                         { background: var(--gold-d); border-color: rgba(240, 165, 0, 0.35); color: var(--gold); }
  .pf-btn.del:hover                         { color: var(--red); border-color: rgba(224, 84, 84, 0.35); background: var(--red-d); }
  .add-row-btn:hover                        { color: var(--text); border-color: var(--accent); }
  .seg-btn:hover:not(.on)                   { color: var(--text); }
  .avatar-option:hover                      { opacity: 1; }
  .char-pill:hover                          { color: var(--text); border-color: var(--s4); }
  .char-roster-item:hover                   { background: var(--s2); border-color: var(--s4); }
  .cs-option:hover                          { background: var(--s3); }
  .home-section-link:hover                  { background: var(--s2); }
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────────
   Lives at the end of the file so each rule wins the cascade against its
   unconditional counterpart, regardless of where in the file that lives.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .draw-mode-row                  { gap: 6px; }
  .filter-bulk-row .pace-colors   { gap: 3px; }
  .filter-bulk-row .pace-color    { width: 24px; height: 24px; border-width: 1px; }
}

@media (max-width: 480px) {
  .home-steps    { grid-template-columns: 1fr; }
  .home-faq-list { grid-template-columns: 1fr; }
  .lb-head, .lb-row                     { grid-template-columns: 24px 1fr 52px 52px 44px; }
  .cs-table .lb-head, .cs-table .lb-row { grid-template-columns: 68px 1fr 56px 44px; }
  .form-row input { font-size: 13px; }
  .filter-bulk-row .pace-color    { width: 22px; height: 22px; }
  /* Tighter box picker: lets 3 columns fit instead of 2, keeping cover art
     a comfortable size on phones. */
  .box-picker { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
  /* Charts scale down on phones, so bump the in-SVG text up to stay legible. */
  .ch-ax, .ch-axlbl, .ch-cellval { font-size: 12.5px; }
  .ch-lbl                        { font-size: 13.5px; }
  /* Descriptions wrap to more lines on narrow screens; reserve more so the card
     keeps a consistent height across charts. */
  .chart-card-desc { min-height: 7.3em; }
}

@media (max-width: 360px) {
  .nav-links a { padding: 4px 6px; font-size: 12px; }
  .draw-mode-row                  { gap: 4px; }
  .filter-bulk-row .pace-colors   { gap: 2px; }
  .filter-bulk-row .pace-color    { width: 20px; height: 20px; }
  .draw-mode-row .exclude-toggle.exclude-toggle-inline { padding: 5px 6px; font-size: 11px; }
  .box-picker { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
}