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

:root {
  /* felt tones — swapped to blue while Test Mode is on (see body.test-mode-active) */
  --felt-1: #1e6533;
  --felt-2: #17542a;
  --felt-3: #122d1c;
  --felt-4: #0c2016;
  --wood:      #2c1508;
  --rail:      #1a0b03;
  --gold:      #c4991e;
  --gold-dim:  rgba(196,153,30,0.45);
  --ivory:     #f2ede4;
  --white10:   rgba(255,255,255,0.10);
  --white06:   rgba(255,255,255,0.06);
  --g-win:     #4daa54;
  --r-loss:    #b05050;
  --sans: 'DM Sans', system-ui, sans-serif;

  /* type scale — one typeface, two weights, a handful of sizes. Every
     font-size/font-weight in this file should resolve to one of these. */
  --fw-reg:  500;
  --fw-bold: 700;
  --fs-2xs:  0.65rem;
  --fs-xs:   0.75rem;
  --fs-sm:   0.85rem;
  --fs-md:   1rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3.5rem;
}

/* Test Mode — swap the felt from green to blue so the whole board reads as
   "not the real table" at a glance, alongside the banner below. The top
   padding makes room for the fixed banner so it doesn't cover the wordmark. */
body.test-mode-active {
  --felt-1: #1e6fa8;
  --felt-2: #164a75;
  --felt-3: #102849;
  --felt-4: #0a1830;
  --celeb-tint: rgba(5,30,50,0.97);
  padding-top: 40px;
}

html, body { height: 100%; overflow: hidden; }
body { font-family: var(--sans); font-weight: var(--fw-reg); background: var(--wood); }

/* ── FRAME ── */
/* the wood frame + felt span the full page; only the dashboard content
   inside (.content-max) is capped so it doesn't stretch absurdly wide */
.frame-outer {
  height: 100vh; height: 100dvh;
  background:
    repeating-linear-gradient(92deg, transparent 0, transparent 3px, rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 5px),
    linear-gradient(178deg, #5a2a0e 0%, #2c1508 18%, #4a2009 35%, #221006 55%, #3a1a08 75%, #2c1508 100%);
  padding: 22px;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.7);
  overflow: hidden;
  display: flex;
}

.frame-inner {
  flex: 1; min-width: 0;
  background: linear-gradient(145deg, #160804 0%, #2e1407 30%, #160804 55%, #261006 80%, #160804 100%);
  border-radius: 10px;
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.6), 0 8px 32px rgba(0,0,0,0.8);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-max {
  width: 100%; max-width: 1920px; margin: 0 auto;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}

.pocket { position: absolute; border-radius: 50%; background: radial-gradient(circle at 33% 33%, #222, #050505); z-index: 20; box-shadow: inset 0 3px 8px rgba(0,0,0,0.95), 0 1px 3px rgba(0,0,0,0.6); border: 3px solid #0d0603; }
.pc { width: 44px; height: 44px; }
.ps { width: 32px; height: 32px; }
.pocket.tl { top:-5px; left:-5px; }
.pocket.tr { top:-5px; right:-5px; }
.pocket.bl { bottom:-5px; left:-5px; }
.pocket.br { bottom:-5px; right:-5px; }
.pocket.ml { top:50%; left:-4px; transform:translateY(-50%); }
.pocket.mr { top:50%; right:-4px; transform:translateY(-50%); }

/* ── FELT ── */
.felt {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(0,0,0,0.035) 4px, rgba(0,0,0,0.035) 8px),
    repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(0,0,0,0.025) 4px, rgba(0,0,0,0.025) 8px),
    linear-gradient(155deg, var(--felt-1) 0%, var(--felt-2) 35%, var(--felt-3) 65%, var(--felt-2) 100%);
  border-radius: 5px;
  flex: 1; min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── WORDMARK ── */
.wordmark { display:flex; align-items:center; gap:12px; padding:20px 28px 0; flex-shrink:0; }
.wordmark-primary { font-size:var(--fs-md); font-weight:var(--fw-bold); letter-spacing:0.32em; color:var(--gold); text-transform:uppercase; }
.wordmark-sep { width:1px; height:14px; background:var(--gold-dim); align-self:center; flex-shrink:0; }
.wordmark-secondary { font-size:var(--fs-xs); font-weight:var(--fw-reg); letter-spacing:0.22em; color:rgba(255,255,255,0.45); text-transform:uppercase; }

.btn-start-game {
  margin-left:auto; padding:10px 18px; background:linear-gradient(145deg,#8a6012,#c4991e,#8a6012);
  border:1px solid #9a7016; border-radius:6px; color:#1a0c02; font-family:var(--sans);
  font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:0.14em; text-transform:uppercase; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.26), inset 0 -2px 0 rgba(0,0,0,0.25), 0 2px 10px rgba(0,0,0,0.4);
  transition:all 0.14s; white-space:nowrap; flex-shrink:0;
}
.btn-start-game:hover { background:linear-gradient(145deg,#9a701a,#d4a92e,#9a701a); transform:translateY(-1px); }
.btn-start-game:active { transform:translateY(1px); }

/* 🔔 up-next alerts — sits just left of the Start button */
.btn-bell { position:relative; margin-left:auto; width:38px; height:38px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.7); cursor:pointer; transition:all 0.14s; }
.btn-bell:hover { background:rgba(255,255,255,0.12); color:#fff; }
.btn-bell + .btn-start-game { margin-left:0; }
.btn-bell-dot { position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%; background:#e8b800; box-shadow:0 0 0 2px #1f5030; }
.btn-bell-dot[hidden] { display:none; }

/* achievements in the player card */
.pm-holding { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 10px; }
.pm-holding-label { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.45); margin-right:2px; }
.pm-hold { font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--ivory); padding:4px 10px; border-radius:999px; background:linear-gradient(135deg, rgba(196,153,30,0.28), rgba(0,0,0,0.2)); border:1px solid rgba(240,208,112,0.55); cursor:help; }
.pm-badge-count { font-size:var(--fs-2xs); color:rgba(255,255,255,0.48); letter-spacing:0.06em; }
.pm-badge-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.pm-badge { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px; background:rgba(0,0,0,0.16); border:1px solid rgba(232,184,0,0.28); min-width:0; }
.pm-badge-icon { font-size:20px; line-height:1; flex-shrink:0; }
.pm-badge-name { font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--ivory); overflow-wrap:anywhere; }
.pm-badge-desc { font-size:var(--fs-2xs); color:rgba(255,255,255,0.5); line-height:1.35; margin-top:1px; }
.pm-badge.locked { border-color:rgba(255,255,255,0.08); opacity:0.42; filter:grayscale(1); }
/* a badge you're part-way to reads as "on its way", not "locked" */
.pm-badge.locked.in-progress { opacity:0.9; filter:none; border-color:rgba(232,184,0,0.2); }
.pm-badge.locked.in-progress .pm-badge-icon { filter:grayscale(1); opacity:0.7; }
/* monthly-board badges: billiard-felt green with a gold rim, so they read as the "table" set */
.pm-badge.pm-badge-monthly { background:linear-gradient(135deg, rgba(31,80,48,0.55), rgba(0,0,0,0.2)); border-color:rgba(232,184,0,0.55); box-shadow:inset 0 0 0 1px rgba(232,184,0,0.12); }
.pm-badge.pm-badge-monthly.locked { background:rgba(0,0,0,0.16); box-shadow:none; }
.pm-badge-times { font-size:var(--fs-2xs); color:#f0d070; font-variant-numeric:tabular-nums; margin-left:2px; }
.pm-badge-meter { margin-top:7px; }
.pm-badge-bar { height:5px; border-radius:999px; background:rgba(255,255,255,0.12); overflow:hidden; }
.pm-badge-fill { height:100%; border-radius:999px; background:linear-gradient(90deg, #c4991e, #f0d070); }
.pm-badge-progress { margin-top:4px; font-size:var(--fs-2xs); color:rgba(255,255,255,0.6); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.pm-share { font-size:15px; }

/* de-emphasized "back to starting a game" link, used only when already in
   log-a-past-game mode — the other direction (play → log) is a full-width
   .btn-gold-ghost.btn-block button instead, since that one was easy to miss */
.sg-mode-link { text-align:center; margin-top:12px; }
.sg-mode-link a { font-size:var(--fs-2xs); color:rgba(255,255,255,0.4); text-decoration:none; }
.sg-mode-link a:hover { color:var(--gold); text-decoration:underline; }

/* ── TABS ── */
.tab-rail {
  display:flex; align-items:flex-end; gap:2px; flex-shrink:0;
  padding:14px 28px 0;
  border-bottom:1px solid rgba(0,0,0,0.35);
  position:relative;
}
.tab-rail::after {
  content:''; position:absolute; bottom:-1px; left:28px; right:28px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,153,30,0.18) 20%,rgba(196,153,30,0.25) 50%,rgba(196,153,30,0.18) 80%,transparent);
}
.tab { padding:9px 18px 11px; font-size:var(--fs-xs); font-weight:var(--fw-reg); letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.46); border:none; background:transparent; cursor:pointer; border-radius:4px 4px 0 0; border-bottom:2px solid transparent; transition:color 0.15s, border-color 0.15s, background 0.15s; position:relative; bottom:-1px; white-space:nowrap; }
.tab:hover { color:rgba(255,255,255,0.56); background:rgba(255,255,255,0.03); }
.tab.active { color:var(--gold); border-bottom-color:var(--gold); background:rgba(196,153,30,0.06); }

/* hints that the tab rail scrolls horizontally when it's too narrow to show
   every tab (phone widths) — otherwise a clipped last tab looks like the
   edge of the page rather than something to scroll to */
.tab-rail-fade { display:none; }

/* Tab content: fills all remaining felt height, scrolls if content runs long */
.tab-content { display:none; flex:1; min-height:0; padding:18px 28px 18px; overflow:hidden; }
.tab-content.active { display:block; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(196,153,30,0.12) transparent; }
.tab-content[data-tab="overview"].active { display:flex; flex-direction:column; }
.tab-content::-webkit-scrollbar { width:3px; }
.tab-content::-webkit-scrollbar-thumb { background:rgba(196,153,30,0.15); border-radius:2px; }

/* ── SECTION TITLE ── */
.section-title {
  font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:0.28em; text-transform:uppercase;
  color:rgba(196,153,30,0.72); margin-bottom:14px;
  display:flex; align-items:center; gap:12px;
}
.section-title::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(196,153,30,0.14),transparent); }
.admin-collapsible-title { cursor:pointer; user-select:none; transition:color 0.14s; }
.admin-collapsible-title:hover { color:var(--gold); }
.admin-collapse-chevron { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:2px; border-radius:50%; background:rgba(196,153,30,0.14); font-size:var(--fs-xs); color:var(--gold); }

/* ── STAT CHIPS ── */
.stat-strip { display:flex; gap:10px; margin-bottom:28px; }
.stat-chip { flex:1; background:rgba(0,0,0,0.22); border:1px solid rgba(255,255,255,0.07); border-radius:6px; padding:16px 20px; display:flex; flex-direction:column; gap:6px; }
.stat-chip-label { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.24em; text-transform:uppercase; color:rgba(255,255,255,0.46); }
.stat-chip-value { font-family:var(--sans); font-size:var(--fs-2xl); font-weight:var(--fw-bold); color:var(--ivory); line-height:1; }
.stat-chip-value.hero { font-size:var(--fs-xl); color:var(--gold); }

/* ── PANEL ── */
.panel { background:rgba(0,0,0,0.18); border:1px solid rgba(255,255,255,0.07); border-radius:7px; overflow:hidden; }
.panel + .panel { margin-top:20px; }
.panel-body { padding:18px; }

/* ── GRID ── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:22px; }
/* grid items default to min-width:auto, which forces each track to at least
   its content's max-content size — override so 1fr tracks can actually
   shrink (otherwise a wide row like the leaderboard blows out the grid) */
.grid-2 > *, .grid-3 > * { min-width:0; }

/* ── BALL ── */
.ball { border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-weight:var(--fw-bold); flex-shrink:0; position:relative; overflow:hidden; color:white; text-shadow:0 1px 3px rgba(0,0,0,0.6); box-shadow:inset -3px -3px 7px rgba(0,0,0,0.45), inset 2px 2px 5px rgba(255,255,255,0.28), 0 2px 8px rgba(0,0,0,0.45); }
.ball::before { content:''; position:absolute; top:18%; left:22%; width:32%; height:26%; background:rgba(255,255,255,0.22); border-radius:50%; transform:rotate(-20deg); }
.ball.sm { width:30px; height:30px; font-size:var(--fs-2xs); }
.ball.md { width:40px; height:40px; font-size:var(--fs-xs); }
.ball.lg { width:58px; height:58px; font-size:var(--fs-md); }
.ball.xl { width:74px; height:74px; font-size:var(--fs-lg); }

/* a picked flag no longer replaces the ball — it's a small badge pinned to
   the top-right corner, like a status indicator. Sized in % of the wrapper
   so it scales automatically with every .ball size class. The wrapper (not
   .ball itself, which clips to its own circle for the gloss highlight) is
   what the badge is positioned against. */
/* align-self:flex-start guards against any ancestor flex container with
   align-items:stretch (e.g. the mobile Current Game card, which stacks
   ball-above-name in a column) blowing this up to the container's full
   cross-axis size — inline-flex alone isn't enough to stop a stretch */
.avatar-wrap { position:relative; display:inline-flex; flex-shrink:0; align-self:flex-start; }
.avatar-flag-badge {
  position:absolute; top:-3px; right:-3px; width:46%; aspect-ratio:1;
  border-radius:50%; overflow:hidden; background:rgba(255,255,255,0.12);
  border:2px solid rgba(255,255,255,0.85); box-shadow:0 1px 4px rgba(0,0,0,0.55);
}
.avatar-flag-badge img { width:100%; height:100%; object-fit:cover; display:block; }

/* small company logo shown right after a name — see companyTagHtml() */
.company-tag { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:4px; background:rgba(255,255,255,0.92); vertical-align:-3px; margin-left:5px; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,0.4); }
.company-tag img { width:100%; height:100%; object-fit:contain; border-radius:3px; display:block; }

/* ── LEADERBOARD ── */
.lb-row { display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:5px; transition:background 0.12s; }
.lb-row:hover { background:rgba(255,255,255,0.04); }
.lb-row + .lb-row { border-top:1px solid rgba(255,255,255,0.04); }
.lb-rank { font-family:var(--sans); font-size:var(--fs-md); color:rgba(255,255,255,0.42); width:22px; text-align:right; flex-shrink:0; }
.lb-rank.gold { color:var(--gold); font-size:var(--fs-lg); }
.lb-info { flex:1; min-width:0; }
.lb-name { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ivory); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-meta { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.lb-elo { font-family:var(--sans); font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--gold); line-height:1; min-width:52px; text-align:right; }
.lb-elo.sm { font-size:var(--fs-lg); }
.lb-wl { font-size:var(--fs-xs); color:rgba(255,255,255,0.46); white-space:nowrap; }
.lb-wl span { color:var(--g-win); font-weight:var(--fw-bold); }
.lb-detail-count { color:rgba(255,255,255,0.35) !important; font-weight:var(--fw-reg) !important; }

.lb-wins { display:flex; flex-direction:column; align-items:center; gap:2px; flex-shrink:0; min-width:48px; padding-right:14px; margin-right:2px; border-right:1px solid rgba(255,255,255,0.07); }
.lb-wins-value { font-family:var(--sans); font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--g-win); line-height:1; }
.lb-wins-value.sm { font-size:var(--fs-md); }
.lb-wins-label { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.5); }

/* ── HISTORY ── */
.hist-row { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:5px; transition:background 0.12s; }
.hist-row:hover { background:rgba(255,255,255,0.04); }
.hist-row + .hist-row { border-top:1px solid rgba(255,255,255,0.05); }
.hist-date { font-size:var(--fs-xs); color:rgba(255,255,255,0.46); min-width:44px; flex-shrink:0; }
.hist-players { flex:1; display:flex; align-items:center; gap:10px; min-width:0; }
.hist-winner { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ivory); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hist-loser  { font-size:var(--fs-md); color:rgba(255,255,255,0.48); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hist-arrow  { font-size:var(--fs-2xs); color:rgba(196,153,30,0.38); flex-shrink:0; }
.hist-deltas { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; min-width:36px; }
.delta { font-size:var(--fs-xs); font-weight:var(--fw-bold); }
.delta.up   { color:var(--g-win); }
.delta.down { color:var(--r-loss); }
.delta.dash { color:rgba(255,255,255,0.35); font-weight:var(--fw-reg); }
.casual-tag { flex-shrink:0; font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.42); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:3px; padding:2px 7px; }
.nemesis-tag { flex-shrink:0; font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.06em; text-transform:uppercase; color:#ff9d4d; background:rgba(255,120,20,0.14); border:1px solid rgba(255,120,20,0.3); border-radius:3px; padding:2px 7px; }
.bullet-tag { flex-shrink:0; font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.06em; text-transform:uppercase; color:#5cc8ff; background:rgba(40,160,255,0.14); border:1px solid rgba(40,160,255,0.3); border-radius:3px; padding:2px 7px; }
.pm-decay-tag { flex-shrink:0; font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.06em; text-transform:uppercase; color:#7fb8ff; background:rgba(90,150,255,0.14); border:1px solid rgba(90,150,255,0.3); border-radius:3px; padding:2px 7px; margin-left:8px; }

/* ── FORMS ── */
.form-group { margin-bottom:14px; position:relative; }
.form-group:last-child { margin-bottom:0; }
.form-label { display:block; font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.48); margin-bottom:7px; }
input, select, textarea { width:100%; padding:10px 13px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.1); border-radius:5px; color:var(--ivory); font-family:var(--sans); font-size:var(--fs-sm); font-weight:var(--fw-reg); appearance:none; -webkit-appearance:none; outline:none; transition:border-color 0.18s, background 0.18s; }
input:focus, select:focus, textarea:focus { border-color:rgba(196,153,30,0.4); background:rgba(0,0,0,0.38); }
input::placeholder, textarea::placeholder { color:rgba(255,255,255,0.41); }
select option { background:#1a1a1a; }
textarea { resize:vertical; line-height:1.5; font-family:var(--sans); }
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }

.vs-divider { display:flex; align-items:center; gap:10px; margin:6px 0 14px; }
.vs-divider-line { flex:1; height:1px; background:rgba(255,255,255,0.08); }
.vs-divider-text { font-family:var(--sans); font-size:var(--fs-sm); color:rgba(196,153,30,0.32); }

/* ── AUTOCOMPLETE ── */
.ac-wrap { position:relative; }
.ac-dropdown {
  position:fixed; z-index:1000;
  background:#1e1208; border:1px solid rgba(196,153,30,0.25); border-radius:5px;
  box-shadow:0 8px 24px rgba(0,0,0,0.6);
  max-height:240px; overflow-y:auto;
  display:none;
  min-width:160px;
}
.ac-dropdown.open { display:block; }
.ac-item { padding:10px 13px; font-size:var(--fs-sm); color:var(--ivory); cursor:pointer; transition:background 0.1s; border-bottom:1px solid rgba(255,255,255,0.04); }
.ac-item:last-child { border-bottom:none; }
.ac-item:hover, .ac-item.focused { background:rgba(196,153,30,0.12); }
.ac-item em { color:var(--gold); font-style:normal; font-weight:var(--fw-bold); }
.ac-item.ac-static { cursor:default; color:rgba(255,255,255,0.36); font-size:var(--fs-xs); font-style:italic; }
.ac-item.ac-static:hover { background:none; }
.ac-dropdown { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; }
.ac-item { overflow-wrap:break-word; }

/* ── BUTTONS ── */
.btn-primary { width:100%; padding:12px; background:linear-gradient(145deg,#8a6012,#c4991e,#8a6012); border:1px solid #9a7016; border-radius:5px; color:#1a0c02; font-family:var(--sans); font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:0.2em; text-transform:uppercase; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,0.26), inset 0 -2px 0 rgba(0,0,0,0.25), 0 2px 10px rgba(0,0,0,0.4); transition:all 0.14s; }
.btn-primary:hover { background:linear-gradient(145deg,#9a701a,#d4a92e,#9a701a); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(1px); }

.btn-ghost { padding:9px 16px; background:transparent; border:1px solid rgba(255,255,255,0.12); border-radius:5px; color:rgba(255,255,255,0.51); font-family:var(--sans); font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:all 0.14s; white-space:nowrap; }
.btn-ghost:hover { border-color:rgba(255,255,255,0.24); color:rgba(255,255,255,0.65); background:rgba(255,255,255,0.04); }

.btn-gold-ghost { padding:9px 16px; background:transparent; border:1px solid rgba(196,153,30,0.25); border-radius:5px; color:rgba(196,153,30,0.55); font-family:var(--sans); font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:all 0.14s; white-space:nowrap; }
.btn-gold-ghost:hover { border-color:rgba(196,153,30,0.5); color:var(--gold); background:rgba(196,153,30,0.06); }

/* full-width variant — used for "Log a Previous Game", a secondary action
   that still needs to be easy to spot, not a buried text link */
.btn-gold-ghost.btn-block { width:100%; padding:12px; margin-top:10px; }

/* ── MODE TOGGLE (ranked/casual segmented control) ── */
.mode-toggle { display:inline-flex; gap:3px; background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.08); border-radius:6px; padding:3px; flex-shrink:0; }
.mode-toggle-btn { padding:5px 12px; border:none; background:transparent; border-radius:4px; font-family:var(--sans); font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.45); cursor:pointer; transition:all 0.14s; white-space:nowrap; }
.mode-toggle-btn:hover { color:rgba(255,255,255,0.7); }
.mode-toggle-btn.active { background:rgba(196,153,30,0.18); color:var(--gold); }

.btn-danger-ghost { padding:6px 14px; background:rgba(180,70,70,0.1); border:1px solid rgba(180,70,70,0.4); border-radius:5px; color:#d08a8a; font-family:var(--sans); font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; transition:all 0.14s; }
.btn-danger-ghost:hover { border-color:rgba(180,70,70,0.7); color:#e8a0a0; background:rgba(180,70,70,0.18); }

.btn-icon-remove { width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); color:rgba(255,255,255,0.45); font-size:var(--fs-xs); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.14s; line-height:1; }
.btn-icon-remove:hover { background:rgba(180,70,70,0.18); border-color:rgba(180,70,70,0.4); color:#c07070; }

/* ── QUEUE ── */
.queue-add-row { display:flex; gap:9px; align-items:flex-end; margin-bottom:0; }
.queue-add-row .form-group { flex:1; margin-bottom:0; }
.queue-btn-group { display:flex; flex-direction:column; gap:6px; align-self:flex-end; flex-shrink:0; }

@keyframes queueSlideIn {
  from { opacity:0; transform:translateX(-8px); background:rgba(196,153,30,0.12); }
  to   { opacity:1; transform:translateX(0);    background:rgba(0,0,0,0.15); }
}
@keyframes queueFlash {
  0%,100% { border-color:rgba(255,255,255,0.06); }
  40%     { border-color:rgba(196,153,30,0.5); box-shadow:0 0 12px rgba(196,153,30,0.15); }
}

.queue-item { display:flex; align-items:center; gap:13px; padding:14px 16px; border-radius:6px; border:1px solid rgba(255,255,255,0.06); background:rgba(0,0,0,0.15); transition:background 0.15s, border-color 0.15s, opacity 0.15s; }
.queue-item + .queue-item { margin-top:8px; }
.queue-item.new { animation:queueSlideIn 0.35s ease, queueFlash 1.2s ease 0.35s; }
.queue-item.is-next { border-color:rgba(196,153,30,0.25); background:rgba(196,153,30,0.05); }
.queue-item.dragging { opacity:0.4; }
.queue-item.drag-over { border-color:rgba(196,153,30,0.5); }
.queue-drag-handle { cursor:grab; color:rgba(255,255,255,0.3); font-size:var(--fs-sm); flex-shrink:0; letter-spacing:-1px; }
.queue-drag-handle:hover { color:rgba(255,255,255,0.55); }
.queue-badge { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.18em; text-transform:uppercase; padding:4px 9px; border-radius:3px; flex-shrink:0; }
.queue-badge.next { background:rgba(196,153,30,0.14); color:var(--gold); border:1px solid rgba(196,153,30,0.25); }
.queue-badge.pos  { background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.44); border:1px solid rgba(255,255,255,0.08); }
.queue-names { flex:1; font-size:var(--fs-md); font-weight:var(--fw-reg); color:var(--ivory); display:flex; align-items:center; gap:8px; min-width:0; }
.queue-name-part { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-names-vs { font-family:var(--sans); font-size:var(--fs-sm); color:rgba(196,153,30,0.32); flex-shrink:0; }
.queue-challenger-tag { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.08em; text-transform:uppercase; color:rgba(196,153,30,0.45); background:rgba(196,153,30,0.08); border:1px solid rgba(196,153,30,0.18); border-radius:3px; padding:2px 7px; flex-shrink:0; }
.queue-source { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.42); flex-shrink:0; }
.queue-source.slack { color:rgba(120,180,120,0.52); }
.btn-icon-start { width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); color:rgba(255,255,255,0.45); font-size:var(--fs-2xs); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.14s; line-height:1; }
.btn-icon-start:hover { background:rgba(196,153,30,0.16); border-color:rgba(196,153,30,0.4); color:var(--gold); }

/* ── SCROLL ── */
.scroll-area { overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(196,153,30,0.12) transparent; }
.scroll-area::-webkit-scrollbar { width:3px; }
.scroll-area::-webkit-scrollbar-thumb { background:rgba(196,153,30,0.15); border-radius:2px; }

.empty { text-align:center; padding:32px 16px; color:rgba(255,255,255,0.41); font-size:var(--fs-sm); letter-spacing:0.05em; }

.divider { height:1px; background:linear-gradient(90deg,transparent,rgba(196,153,30,0.15) 30%,rgba(196,153,30,0.22) 50%,rgba(196,153,30,0.15) 70%,transparent); margin:24px 0; }

.flex-between { display:flex; align-items:center; justify-content:space-between; }
.mb-14 { margin-bottom:14px; }
.mb-20 { margin-bottom:20px; }

/* ── UP NEXT OVERLAY ── */
.overlay { position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 4px,rgba(0,0,0,0.05) 4px,rgba(0,0,0,0.05) 8px),
    repeating-linear-gradient(90deg,transparent,transparent 4px,rgba(0,0,0,0.04) 4px,rgba(0,0,0,0.04) 8px),
    linear-gradient(155deg,var(--felt-1) 0%,var(--felt-3) 45%,var(--felt-4) 65%,var(--felt-3) 100%);
  opacity:0; pointer-events:none; transition:opacity 0.45s ease; }
.overlay.show { opacity:1; pointer-events:all; }
.ov-pocket { position:absolute; border-radius:50%; background:radial-gradient(circle at 33% 33%,#181818,#050505); box-shadow:inset 0 3px 8px rgba(0,0,0,0.95); }
.ov-pocket.tl { width:52px;height:52px;top:16px;left:16px; }
.ov-pocket.tr { width:52px;height:52px;top:16px;right:16px; }
.ov-pocket.bl { width:52px;height:52px;bottom:16px;left:16px; }
.ov-pocket.br { width:52px;height:52px;bottom:16px;right:16px; }

.ov-inner { text-align:center; }
.ov-eyebrow { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.55em; text-transform:uppercase; color:rgba(196,153,30,0.52); margin-bottom:14px; opacity:0; transform:translateY(6px); transition:all 0.4s ease 0.3s; }
.overlay.show .ov-eyebrow { opacity:1; transform:none; }
.ov-heading { font-family:var(--sans); font-size:var(--fs-2xl); font-weight:var(--fw-bold); letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); line-height:1; text-shadow:0 0 52px rgba(196,153,30,0.32); margin-bottom:48px; opacity:0; transform:translateY(14px); transition:all 0.45s ease 0.42s; }
.overlay.show .ov-heading { opacity:1; transform:none; }
.ov-players { display:flex; align-items:center; gap:40px; justify-content:center; margin-bottom:56px; opacity:0; transform:translateY(14px); transition:all 0.45s ease 0.54s; }
.overlay.show .ov-players { opacity:1; transform:none; }
.ov-player { display:flex; flex-direction:column; align-items:center; gap:14px; }
.ov-player-name { font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--ivory); letter-spacing:0.02em; }
.ov-vs { font-family:var(--sans); font-size:var(--fs-xl); color:rgba(196,153,30,0.28); padding-bottom:24px; }

.ov-progress-wrap { width:260px; margin:0 auto; opacity:0; transition:opacity 0.35s ease 0.88s; }
.overlay.show .ov-progress-wrap { opacity:1; }
.ov-progress-track { height:1px; background:rgba(255,255,255,0.08); border-radius:1px; overflow:hidden; margin-bottom:14px; }
.ov-progress-bar { height:100%; background:linear-gradient(90deg,rgba(196,153,30,0.3),rgba(196,153,30,0.7)); transform-origin:left; transition:none; }
.ov-progress-bar.drain { transform:scaleX(0); transition:transform 8s linear; }
.ov-dismiss { font-size:var(--fs-2xs); letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.42); cursor:pointer; }
.ov-dismiss:hover { color:rgba(255,255,255,0.49); }

/* ── WINNER CELEBRATION ── */
@keyframes celebBallIn {
  0%   { opacity:0; transform:scale(0.2) rotate(-180deg); }
  60%  { transform:scale(1.18) rotate(8deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes celebNameIn {
  0%   { opacity:0; transform:translateY(20px); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes celebGlow {
  0%,100% { text-shadow:0 0 24px rgba(196,153,30,0.3); }
  50%     { text-shadow:0 0 60px rgba(196,153,30,0.7), 0 0 100px rgba(196,153,30,0.3); }
}
@keyframes celebRays {
  from { transform:rotate(0deg); opacity:0.08; }
  to   { transform:rotate(360deg); opacity:0.08; }
}
@keyframes celebFadeIn {
  from { opacity:0; } to { opacity:1; }
}

.celeb-overlay { position:fixed; inset:0; z-index:210; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, var(--celeb-tint, rgba(0,40,15,0.97)) 0%, rgba(0,0,0,0.98) 100%);
  opacity:0; pointer-events:none; transition:opacity 0.4s ease; }
.celeb-overlay.show { opacity:1; pointer-events:all; }

.celeb-rays { position:absolute; inset:-50%; background:repeating-conic-gradient(rgba(196,153,30,0.06) 0deg 10deg, transparent 10deg 20deg); animation:celebRays 12s linear infinite; border-radius:50%; }

.celeb-inner { text-align:center; position:relative; z-index:2; }
.celeb-label { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.55em; text-transform:uppercase; color:rgba(196,153,30,0.5); margin-bottom:20px; animation:celebFadeIn 0.5s ease 0.2s both; }
.celeb-ball-wrap { margin-bottom:28px; display:flex; justify-content:center; align-items:center; animation:celebBallIn 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.15s both; }
.celeb-name { font-family:var(--sans); font-size:var(--fs-3xl); font-weight:var(--fw-bold); color:var(--gold); letter-spacing:0.06em; line-height:1; animation:celebNameIn 0.55s ease 0.55s both, celebGlow 2s ease-in-out 1.1s infinite; }
.celeb-subtext { font-size:var(--fs-md); color:rgba(255,255,255,0.49); margin-top:12px; letter-spacing:0.1em; animation:celebFadeIn 0.5s ease 0.85s both; }
.celeb-elo { display:flex; gap:16px; justify-content:center; margin-top:14px; font-size:var(--fs-sm); font-weight:700; letter-spacing:0.04em; animation:celebFadeIn 0.5s ease 1.2s both; }
.celeb-elo[hidden] { display:none; }
.celeb-elo-up { color:#4ade80; }
.celeb-elo-down { color:#f87171; }
.celeb-vs { font-size:var(--fs-xs); color:rgba(255,255,255,0.43); margin-top:6px; letter-spacing:0.08em; animation:celebFadeIn 0.5s ease 1s both; }
.celeb-dismiss { margin-top:40px; font-size:var(--fs-2xs); letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.42); cursor:pointer; animation:celebFadeIn 0.5s ease 1.2s both; }
.celeb-dismiss:hover { color:rgba(255,255,255,0.49); }

/* ── SLACK BANNER ── */
.slack-notif { position:fixed; top:0; left:0; right:0; z-index:300; background:linear-gradient(90deg,#112016,#1a3824,#112016); border-bottom:1px solid rgba(77,170,84,0.3); padding:16px 28px; display:flex; align-items:center; gap:15px; box-shadow:0 4px 24px rgba(0,0,0,0.6); transform:translateY(-100%); transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.slack-notif.show { transform:translateY(0); }
.slack-notif-icon { font-size:var(--fs-lg); flex-shrink:0; }
.slack-notif-text { flex:1; }
.slack-notif-title { font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:0.12em; text-transform:uppercase; color:var(--g-win); margin-bottom:3px; }
.slack-notif-detail { font-size:var(--fs-sm); color:rgba(255,255,255,0.68); }
.slack-notif-detail strong { color:var(--ivory); font-weight:var(--fw-bold); }
.slack-notif-close { font-size:var(--fs-xs); color:rgba(255,255,255,0.45); cursor:pointer; padding:4px 8px; }
.slack-notif-close:hover { color:rgba(255,255,255,0.55); }

/* ── CONFIRM ── */
.confirm-veil { position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:400; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.18s; }
.confirm-veil.show { opacity:1; pointer-events:all; }
.confirm-box { background:linear-gradient(145deg,#1a0c04,#2a1408); border:1px solid rgba(196,153,30,0.18); border-radius:8px; padding:30px 32px; width:310px; box-shadow:0 16px 56px rgba(0,0,0,0.75); transform:scale(0.96); transition:transform 0.18s; }
.confirm-veil.show .confirm-box { transform:scale(1); }
.confirm-title { font-family:var(--sans); font-size:var(--fs-lg); color:var(--ivory); margin-bottom:10px; }
.confirm-body { font-size:var(--fs-xs); color:rgba(255,255,255,0.49); line-height:1.6; margin-bottom:24px; }
.confirm-actions { display:flex; gap:10px; justify-content:flex-end; }
.btn-confirm-cancel { padding:9px 16px; background:transparent; border:1px solid rgba(255,255,255,0.1); border-radius:4px; color:rgba(255,255,255,0.49); font-family:var(--sans); font-size:var(--fs-xs); font-weight:var(--fw-reg); cursor:pointer; transition:all 0.14s; }
.btn-confirm-cancel:hover { border-color:rgba(255,255,255,0.22); color:rgba(255,255,255,0.6); }
.btn-confirm-ok { padding:9px 16px; background:linear-gradient(145deg,#6e1a1a,#962424); border:1px solid #7a1e1e; border-radius:4px; color:#f0b8b8; font-family:var(--sans); font-size:var(--fs-xs); font-weight:var(--fw-bold); cursor:pointer; transition:all 0.14s; }
.btn-confirm-ok:hover { background:linear-gradient(145deg,#7e2020,#a82828); }

/* ── ADMIN ── */
.admin-error { color:#d68a8a; font-size:var(--fs-xs); margin-top:12px; }
.admin-hint  { font-size:var(--fs-xs); color:rgba(255,255,255,0.45); margin-top:10px; line-height:1.5; }
.admin-game-row { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:5px; transition:background 0.12s; }
.admin-game-row:hover { background:rgba(255,255,255,0.04); }
.admin-game-row + .admin-game-row { border-top:1px solid rgba(255,255,255,0.05); }

.admin-user-row { display:flex; align-items:center; gap:12px; padding:11px 16px; border-radius:5px; cursor:pointer; transition:background 0.12s; }
.admin-user-row:hover { background:rgba(255,255,255,0.04); }
.admin-user-row:hover .admin-user-name { color:var(--gold); }
.admin-user-row + .admin-user-row { border-top:1px solid rgba(255,255,255,0.04); }
.admin-user-name { font-size:var(--fs-md); font-weight:var(--fw-reg); color:var(--ivory); flex:1; }
.admin-user-sub { font-size:var(--fs-xs); color:rgba(255,255,255,0.4); flex-shrink:0; }
/* seed-a-competition checklist — a custom checkmark instead of a native
   checkbox, since a bare unstyled checkbox reads unclear against the felt
   background and doesn't match any other control in the app */
.seed-select-row { border-radius:6px; transition:background 0.12s; }
.seed-select-row.selected { background:rgba(196,153,30,0.12); }
.seed-check { width:20px; height:20px; border-radius:5px; border:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:var(--fs-xs); color:var(--gold); font-weight:var(--fw-bold); }
.seed-select-row.selected .seed-check { border-color:var(--gold); background:rgba(196,153,30,0.28); }
.seed-match { display:flex; align-items:center; gap:12px; padding:10px 16px; }
.seed-match-side { flex:1; display:flex; align-items:center; gap:10px; min-width:0; }
.seed-match-side.right { justify-content:flex-end; }
.seed-match-vs { color:rgba(255,255,255,0.4); font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.06em; flex-shrink:0; }
.seed-match + .seed-match { border-top:1px solid rgba(255,255,255,0.06); }

.admin-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.admin-toggle-label { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ivory); }

.toggle-switch { position:relative; display:inline-block; width:46px; height:26px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.toggle-slider { position:absolute; inset:0; cursor:pointer; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.15); border-radius:26px; transition:background 0.2s, border-color 0.2s; }
.toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:2px; background:#fff; border-radius:50%; transition:transform 0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.4); }
.toggle-switch input:checked + .toggle-slider { background:linear-gradient(135deg,#8a6012,#c4991e); border-color:#9a7016; }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(20px); }
.toggle-switch input:focus-visible + .toggle-slider { outline:2px solid rgba(196,153,30,0.5); outline-offset:2px; }

/* ── TEST MODE BANNER ── */
.test-mode-badge {
  position:fixed; top:0; left:0; right:0; z-index:700; height:40px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(90deg,#0a1830,#1e6fa8,#0a1830);
  border-bottom:1px solid rgba(140,200,240,0.4);
  font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:0.1em; text-transform:uppercase; color:#eaf6ff;
  cursor:pointer; box-shadow:0 4px 20px rgba(0,0,0,0.5); transition:opacity 0.15s;
}
.test-mode-badge:hover { opacity:0.88; }
.test-mode-badge .test-mode-exit { font-weight:var(--fw-reg); letter-spacing:0.02em; text-transform:none; color:rgba(234,246,255,0.6); }
.test-mode-dot { width:7px; height:7px; border-radius:50%; background:#eaf6ff; box-shadow:0 0 6px rgba(234,246,255,0.8); animation:pulse 2s ease-in-out infinite; flex-shrink:0; }

/* ── TOAST ── */
.toast { position:fixed; bottom:22px; right:22px; background:linear-gradient(135deg,#1a3d22,#164d1e); border:1px solid rgba(77,170,84,0.3); border-radius:5px; padding:11px 18px; color:#5dbb63; font-size:var(--fs-sm); font-weight:var(--fw-reg); box-shadow:0 4px 20px rgba(0,0,0,0.5); transform:translateY(72px); opacity:0; transition:all 0.26s ease; z-index:500; }
.toast.show { transform:translateY(0); opacity:1; }
.undo-toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%,72px); opacity:0; pointer-events:none; display:flex; align-items:center; gap:14px; max-width:calc(100vw - 32px); background:#1b1f1c; border:1px solid rgba(255,255,255,0.16); border-radius:8px; padding:10px 12px 10px 16px; color:rgba(255,255,255,0.88); font-size:var(--fs-sm); box-shadow:0 6px 28px rgba(0,0,0,0.6); transition:all 0.26s ease; z-index:700; }
.undo-toast.show { transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.undo-toast button { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.22); color:#fff; border-radius:5px; padding:8px 14px; min-height:36px; font:inherit; font-weight:var(--fw-semi, 600); cursor:pointer; }
.undo-toast button:hover { background:rgba(255,255,255,0.18); }
.undo-toast #undo-toast-text { min-width:0; overflow-wrap:anywhere; }

/* ── CURRENT GAME ── */
.current-game { margin-bottom:24px; transition:opacity 0.25s; }
.current-game.hidden { display:none; }

.cg-panel {
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  padding:28px 32px 24px;
}

.cg-eyebrow { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.4em; text-transform:uppercase; color:rgba(196,153,30,0.55); margin-bottom:22px; display:flex; align-items:center; gap:10px; }
.cg-eyebrow::before { content:''; width:6px; height:6px; background:var(--g-win); border-radius:50%; box-shadow:0 0 8px var(--g-win); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(0.85)} }

.cg-players { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; margin-bottom:24px; }

.cg-player { display:flex; flex-direction:column; gap:10px; min-width:0; }
.cg-player.right { align-items:flex-end; }

.cg-player-top { display:flex; align-items:center; gap:12px; min-width:0; }
.cg-player.right .cg-player-top { flex-direction:row-reverse; }
.cg-player-top > div:last-child { min-width:0; }

.cg-player-name { font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--ivory); letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cg-player-elo  { font-size:var(--fs-xs); color:rgba(255,255,255,0.48); font-weight:var(--fw-reg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cg-player-stats { font-size:var(--fs-xs); color:rgba(255,255,255,0.46); }
.cg-player-new { font-size:var(--fs-2xs); color:rgba(196,153,30,0.55); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

.cg-hero-topbar { display:flex; justify-content:flex-end; margin-bottom:6px; min-height:1px; }

.cg-select-heading { text-align:center; font-family:var(--sans); font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--gold); margin-bottom:4px; }
.cg-select-caption { text-align:center; font-size:var(--fs-xs); color:rgba(255,255,255,0.45); margin-bottom:24px; letter-spacing:0.02em; }

/* the whole ball+name+elo block is the "select winner" tap target now —
   no separate button — see playerCard() */
.cg-player.selectable { cursor:pointer; border-radius:10px; padding:10px; transition:background 0.15s, box-shadow 0.15s; }
.cg-player.selectable:hover { background:rgba(196,153,30,0.07); }
.cg-player.selectable.selected { background:linear-gradient(145deg,rgba(138,96,18,0.22),rgba(196,153,30,0.14)); box-shadow:0 0 0 2px rgba(196,153,30,0.5) inset; }
.cg-player-selected-tag { margin-top:10px; font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); }

.cg-vs-center { text-align:center; }
.cg-vs-text { font-family:var(--sans); font-size:var(--fs-xl); color:rgba(196,153,30,0.28); }

/* stats card — odds, form & head-to-head grouped into one block so they
   read as a single "match stats" unit instead of three loose rows */
.cg-stats-card {
  margin-top:4px;
  padding:18px 20px 16px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:8px;
}

/* odds bar */
.cg-odds { margin-bottom:20px; }
.cg-odds-bar { height:6px; background:rgba(0,0,0,0.4); border-radius:3px; overflow:hidden; margin:10px 0 8px; }
.cg-odds-fill { height:100%; background:linear-gradient(90deg,rgba(77,170,84,0.7),rgba(77,170,84,0.4)); border-radius:3px; transition:width 0.5s ease; }
.cg-odds-labels { display:flex; justify-content:space-between; }
.cg-odds-pct { font-family:var(--sans); font-size:var(--fs-lg); font-weight:var(--fw-bold); }
.cg-odds-pct.fav  { color:var(--g-win); }
.cg-odds-pct.dog  { color:rgba(255,255,255,0.47); }
.cg-odds-sub { font-size:var(--fs-2xs); color:rgba(255,255,255,0.44); letter-spacing:0.1em; text-transform:uppercase; display:block; margin-top:1px; }
/* sized to match .cg-meta-value below (Head to Head / Form) so the
   potential-gain numbers read at the same weight as the rest of the stat row */
.cg-elo-delta { display:block; margin-top:6px; font-size:var(--fs-md); font-weight:var(--fw-reg); color:rgba(255,255,255,0.55); letter-spacing:0.01em; }
.cg-elo-delta .up   { color:var(--g-win); font-weight:var(--fw-bold); }
.cg-elo-delta .down { color:var(--r-loss); font-weight:var(--fw-bold); }

/* h2h & form — mirrors the same left/center/right grid as .cg-players and
   .cg-odds so every stat row lines up under the player it belongs to; only
   Head to Head is inherently shared, so it stays centered like the "vs" */
.cg-form-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.06); }
.cg-form-side { display:flex; flex-direction:column; gap:6px; min-width:0; }
.cg-form-side.right { align-items:flex-end; text-align:right; }
.cg-form-center { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:140px; text-align:center; flex-shrink:0; }
.cg-meta-label { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.45); }
.cg-meta-value { font-size:var(--fs-md); font-weight:var(--fw-reg); color:var(--ivory); }
.cg-meta-value.no-data { color:rgba(255,255,255,0.43); font-style:italic; font-size:var(--fs-sm); }

.form-dots { display:flex; gap:7px; align-items:center; }
.cg-form-side.right .form-dots { justify-content:flex-end; }
.form-dot { width:16px; height:16px; border-radius:50%; }
.form-dot.w { background:var(--g-win); box-shadow:0 0 6px rgba(77,170,84,0.45); }
.form-dot.l { background:rgba(176,80,80,0.6); }

.cg-h2h-history {
  margin-top:16px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.06);
  overflow:hidden;
}

.cg-h2h-row {
  display:flex; align-items:center; gap:12px;
  padding:8px 10px; border-radius:4px;
  transition:background 0.1s;
}
.cg-h2h-row:hover { background:rgba(255,255,255,0.04); }
.cg-h2h-row + .cg-h2h-row { border-top:1px solid rgba(255,255,255,0.04); }
.cg-h2h-date   { font-size:var(--fs-xs); color:rgba(255,255,255,0.44); min-width:40px; flex-shrink:0; }
.cg-h2h-winner { font-size:var(--fs-md); font-weight:var(--fw-bold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40%; }
.cg-h2h-winner.a { color:var(--g-win); }
.cg-h2h-winner.b { color:rgba(255,255,255,0.55); }
.cg-h2h-arrow  { font-size:var(--fs-2xs); color:rgba(196,153,30,0.3); flex-shrink:0; }
.cg-h2h-loser  { font-size:var(--fs-md); color:rgba(255,255,255,0.46); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40%; }

/* ── LEADERBOARD SEGMENTED CONTROL — one board visible at a time instead of
   a busy 2x2 grid; see setLbSegment() ── */
.lb-segmented { display:flex; gap:4px; background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:4px; margin-bottom:20px; }
.lb-segmented-btn { flex:1; padding:10px 10px; border:none; background:transparent; border-radius:6px; font-family:var(--sans); font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.5); cursor:pointer; transition:all 0.14s; white-space:nowrap; text-align:center; }
.lb-segmented-btn:hover { color:rgba(255,255,255,0.75); background:rgba(255,255,255,0.04); }
.lb-segmented-btn.active { background:rgba(196,153,30,0.18); color:var(--gold); }

/* ── COMPANY LEADERBOARD — sub-tabs nested inside the "Companies" segment ── */
.lb-company-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.lb-company-tab {
  display:flex; align-items:center; gap:8px; padding:8px 14px;
  background:rgba(0,0,0,0.22); border:1px solid rgba(255,255,255,0.08); border-radius:7px;
  cursor:pointer; transition:all 0.14s; color:rgba(255,255,255,0.6);
  font-family:var(--sans); font-size:var(--fs-xs); font-weight:var(--fw-bold);
}
.lb-company-tab img { width:18px; height:18px; object-fit:contain; border-radius:3px; background:rgba(255,255,255,0.92); padding:2px; flex-shrink:0; }
.lb-company-tab:hover { border-color:rgba(255,255,255,0.2); color:var(--ivory); }
.lb-company-tab.active { background:rgba(196,153,30,0.18); border-color:rgba(196,153,30,0.4); color:var(--gold); }

/* ── MONTHLY LEADERBOARD NAV ── */
.lb-month-nav { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:14px; }
.lb-month-nav-btn {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  border:1px solid rgba(196,153,30,0.25); background:rgba(196,153,30,0.08); color:var(--gold);
  font-size:var(--fs-sm); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background 0.14s, opacity 0.14s;
}
.lb-month-nav-btn:hover:not(:disabled) { background:rgba(196,153,30,0.18); }
.lb-month-nav-btn:disabled { opacity:0.25; cursor:default; }
.lb-month-nav-label-wrap { min-width:170px; text-align:center; }
.lb-month-nav-label { font-family:var(--sans); font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ivory); }
.lb-month-nav-today {
  display:block; font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(196,153,30,0.65); cursor:pointer; margin-top:2px;
}
.lb-month-nav-today:hover { color:var(--gold); }

/* ── CURRENT GAME TAB LAYOUT ── */
/* Fully stacked: hero on top (full width), then Log a Game, then Queue —
   each panel sized to its own content instead of stretched to fill a row,
   which is what used to leave large empty gaps under a short queue. */
.cg-tab-layout {
  display:flex; flex-direction:column;
  gap:16px;
}

.cg-hero {
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:8px;
  display:flex; flex-direction:column; justify-content:center;
  padding:30px 36px;
  min-height:180px;
}
.cg-hero.empty-state { align-items:center; padding:44px 36px 38px; }

.cg-empty-prompt { text-align:center; color:rgba(255,255,255,0.41); }

/* an 8-ball built from the same .ball avatar component used everywhere
   else (so it matches the app's existing ball art) — floats gently with a
   shadow that shrinks/fades in sync, so it reads as resting on the felt
   rather than a static icon */
.cg-empty-ball {
  margin:0 auto 4px;
  background:radial-gradient(circle at 32% 28%, #3c3c3c, #0a0a0a 60%, #000 100%);
  animation: cgEmptyFloat 3.4s ease-in-out infinite;
}
.cg-empty-ball-badge {
  width:30px; height:30px; border-radius:50%; background:var(--ivory);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:var(--fw-bold); font-size:var(--fs-xs); color:#141414; text-shadow:none;
  box-shadow:0 1px 2px rgba(0,0,0,0.3);
}
.cg-empty-ball-shadow {
  width:46px; height:10px; margin:8px auto 20px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.4), transparent 72%);
  animation: cgEmptyShadow 3.4s ease-in-out infinite;
}
@keyframes cgEmptyFloat  { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes cgEmptyShadow { 0%,100% { transform:scale(1); opacity:0.5; } 50% { transform:scale(0.7); opacity:0.28; } }

.cg-empty-prompt-text { font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--ivory); letter-spacing:0.01em; }
.cg-empty-prompt-sub  { font-size:var(--fs-xs); margin-top:6px; color:rgba(255,255,255,0.42); }
.cg-empty-cta { margin-top:22px; padding:12px 24px; font-size:var(--fs-sm); }

/* Hero content — full-width now, sized generously */
.cg-hero .cg-eyebrow { margin-bottom:18px; }
.cg-hero .cg-players { margin-bottom:20px; gap:16px; }
.cg-hero .cg-player-name { font-size:clamp(1.4rem,2.2vw,2.1rem); }
.cg-hero .cg-player-elo  { font-size:clamp(0.78rem,0.7vw,0.9rem); }
.cg-hero .ball.lg { width:64px; height:64px; font-size:var(--fs-md); }
.cg-hero .ball.lg::before { top:18%; left:22%; width:32%; height:26%; }
.cg-hero .cg-vs-text { font-size:var(--fs-xl); }
.cg-hero .cg-odds { margin-bottom:0; }
.cg-hero .cg-odds-bar { height:8px; }
.cg-hero .cg-odds-pct { font-size:clamp(1.1rem,1.4vw,1.5rem); }

.cg-queue-panel {
  background:rgba(0,0,0,0.18); border:1px solid rgba(255,255,255,0.07);
  border-radius:7px; padding:18px 22px;
  display:flex; flex-direction:column; gap:10px;
}
.cg-queue-panel .scroll-area { max-height:340px; }

/* ── PLAYER DETAIL MODAL ── */
.player-modal.qm-card { max-width:640px; padding:32px 36px 36px; }
.player-modal.pm-compact { padding:28px 32px 32px; }
.qm-list { max-height:50vh; }
.player-modal-veil { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:350; display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.22s; }
.player-modal-veil.show { opacity:1; pointer-events:all; }

.player-modal {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(0,0,0,0.03) 4px, rgba(0,0,0,0.03) 8px),
    linear-gradient(165deg, var(--felt-1) 0%, var(--felt-2) 40%, var(--felt-3) 100%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px 12px 0 0;
  width:100%; max-width:860px;
  max-height:88vh; overflow-y:auto;
  padding:32px 36px 40px;
  /* position:relative + bottom (not transform) for the slide-in — a
     transform here would make this the containing block for any
     position:fixed descendant (e.g. the .ac-dropdown name suggestions),
     throwing off their viewport-relative positioning */
  position:relative; bottom:-40px;
  transition:bottom 0.28s cubic-bezier(0.34,1.2,0.64,1);
  scrollbar-width:thin; scrollbar-color:rgba(196,153,30,0.12) transparent;
}
.player-modal-veil.show .player-modal { bottom:0; }
.player-modal::-webkit-scrollbar { width:3px; }
.player-modal::-webkit-scrollbar-thumb { background:rgba(196,153,30,0.15); border-radius:2px; }

.pm-header { display:flex; align-items:center; gap:18px; margin-bottom:30px; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,0.07); }
.pm-header-info { flex:1; min-width:0; }
.pm-name { font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--ivory); letter-spacing:-0.01em; line-height:1.1; margin-bottom:6px; overflow-wrap:break-word; }
.pm-elo-line { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pm-elo-current { font-family:var(--sans); font-size:var(--fs-xl); color:var(--gold); font-weight:var(--fw-bold); }
.pm-elo-peak { font-size:var(--fs-xs); color:rgba(255,255,255,0.46); }
.pm-close { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.51); font-size:var(--fs-sm); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.14s; }
.pm-close:hover { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.75); }

.pm-rank-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.pm-kpi-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:28px; }
/* the player-profile stat strip only has 3 tiles now that Record (raw W/L
   counts) is gone — pin it to 3 even columns regardless of viewport instead
   of inheriting the 4-tile responsive breakpoints above */
.pm-kpi-strip.pm-kpi-strip-3 { grid-template-columns:repeat(3,1fr); }
.pm-kpi { background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.07); border-radius:6px; padding:13px 15px; }
.pm-kpi-label { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.45); display:block; margin-bottom:5px; }
.pm-kpi-value { font-family:var(--sans); font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--ivory); line-height:1; }
.pm-kpi-value.gold { color:var(--gold); }
.pm-kpi-value.green { color:var(--g-win); }
.pm-kpi-value.red { color:var(--r-loss); }
.pm-kpi-value-of { font-size:var(--fs-sm); font-weight:var(--fw-reg); color:rgba(255,255,255,0.4); margin-left:2px; }
.pm-kpi-sub { font-size:var(--fs-2xs); color:rgba(255,255,255,0.42); margin-top:4px; }

.pm-section { margin-bottom:26px; }
.pm-section-title { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.28em; text-transform:uppercase; color:rgba(196,153,30,0.62); margin-bottom:13px; display:flex; align-items:center; gap:10px; }
.pm-section-title::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(196,153,30,0.12),transparent); }

.pm-insight-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:4px; }
/* a very long unbroken name must wrap inside its tile, not stretch the grid */
.pm-insight-grid > *, .pm-kpi-strip > *, .pm-rank-grid > * { min-width:0; }
.pm-insight-value, .pm-insight-label, .pm-insight-sub { overflow-wrap:break-word; }
.pm-insight { background:rgba(0,0,0,0.18); border:1px solid rgba(255,255,255,0.06); border-radius:6px; padding:13px 15px; }
.pm-insight-label { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.45); display:block; margin-bottom:5px; }
.pm-insight-value { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ivory); }
.pm-insight-sub { font-size:var(--fs-xs); color:rgba(255,255,255,0.46); margin-top:2px; }

.pm-h2h-row { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:5px; }
.pm-h2h-row:hover { background:rgba(255,255,255,0.04); }
.pm-h2h-row + .pm-h2h-row { border-top:1px solid rgba(255,255,255,0.04); }
.pm-h2h-name { flex:1; min-width:0; font-size:var(--fs-sm); font-weight:var(--fw-reg); color:var(--ivory); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-h2h-pct { font-size:var(--fs-xs); min-width:38px; text-align:right; }
.pm-h2h-bar-bg { width:80px; height:4px; background:rgba(0,0,0,0.4); border-radius:2px; overflow:hidden; }
.pm-h2h-bar-fill { height:100%; background:linear-gradient(90deg,#2e8a38,var(--g-win)); border-radius:2px; }

.pm-game-row { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:5px; }
.pm-game-row:hover { background:rgba(255,255,255,0.04); }
.pm-game-row + .pm-game-row { border-top:1px solid rgba(255,255,255,0.04); }
.pm-game-date { font-size:var(--fs-xs); color:rgba(255,255,255,0.45); min-width:42px; flex-shrink:0; }
.pm-game-result { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xs); font-weight:var(--fw-bold); flex-shrink:0; }
.pm-game-result.w { background:rgba(77,170,84,0.18); color:var(--g-win); border:1px solid rgba(77,170,84,0.3); }
.pm-game-result.l { background:rgba(176,80,80,0.14); color:var(--r-loss); border:1px solid rgba(176,80,80,0.25); }
.pm-game-result.decay { background:rgba(90,150,255,0.14); color:#7fb8ff; border:1px solid rgba(90,150,255,0.3); font-size:var(--fs-xs); }
.pm-game-opponent { flex:1; min-width:0; font-size:var(--fs-sm); color:rgba(255,255,255,0.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-decay-row .pm-game-opponent { color:rgba(255,255,255,0.5); font-style:italic; }
.pm-game-delta { font-size:var(--fs-xs); font-weight:var(--fw-bold); min-width:34px; text-align:right; }
.pm-game-delta.up { color:var(--g-win); }
.pm-game-delta.dn { color:var(--r-loss); }

.pm-form-row { display:flex; gap:5px; flex-wrap:wrap; padding:4px 0; }
.pm-form-chip { display:flex; flex-direction:column; align-items:center; gap:3px; }
.pm-form-chip-dot { width:12px; height:12px; border-radius:50%; }
.pm-form-chip-dot.w { background:var(--g-win); box-shadow:0 0 5px rgba(77,170,84,0.4); }
.pm-form-chip-dot.l { background:rgba(176,80,80,0.55); }

/* ── RATING CHART ── */
.pm-elo-chart-wrap { position:relative; }
.pm-elo-chart { display:block; width:100%; height:130px; }
.pm-elo-baseline { stroke:rgba(255,255,255,0.14); stroke-width:1; }
.pm-elo-area { fill:var(--gold); opacity:0.1; }
.pm-elo-line { fill:none; stroke:var(--gold); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.pm-elo-line-decay { fill:none; stroke:#7fb8ff; stroke-width:2; stroke-dasharray:4 3; stroke-linejoin:round; stroke-linecap:round; }
.pm-elo-endlabel { font-family:var(--sans); font-size:var(--fs-2xs); font-weight:var(--fw-bold); fill:var(--gold); }
.pm-elo-endlabel.decay { fill:#7fb8ff; }
.pm-elo-hit { cursor:pointer; }
.pm-elo-hit:focus { outline:none; }
.pm-elo-tooltip {
  position:absolute; left:0; top:0; transform:translate(-50%,-100%) translateY(-8px);
  background:linear-gradient(145deg,#1a0c04,#2a1408); border:1px solid rgba(196,153,30,0.3); border-radius:6px;
  padding:8px 11px; pointer-events:none; opacity:0; transition:opacity 0.1s;
  white-space:nowrap; z-index:5; box-shadow:0 4px 14px rgba(0,0,0,0.4);
}
.pm-elo-tooltip.show { opacity:1; }
.pm-elo-tooltip-rating { font-family:var(--sans); font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--gold); }
.pm-elo-tooltip-delta { font-family:var(--sans); font-size:var(--fs-xs); font-weight:var(--fw-bold); margin-left:5px; }
.pm-elo-tooltip-delta.up { color:var(--g-win); }
.pm-elo-tooltip-delta.dn { color:var(--r-loss); }
.pm-elo-tooltip-meta { font-size:var(--fs-2xs); color:rgba(255,255,255,0.55); margin-top:2px; }

/* ── STATS TAB: history expand ── */
.hist-more { border-top:1px solid rgba(255,255,255,0.05); }
.hist-expand-btn {
  display:block; width:100%; padding:12px; margin-top:2px; background:transparent; border:none;
  border-top:1px solid rgba(255,255,255,0.06); color:rgba(196,153,30,0.75); font-family:var(--sans);
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:color 0.14s;
}
.hist-expand-btn:hover { color:var(--gold); }

/* ── STATS TAB: compare players ── */
.compare-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.compare-chip {
  display:flex; align-items:center; gap:7px; padding:6px 8px 6px 10px; background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.1); border-radius:20px; font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--ivory);
}
.compare-chip-swatch { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.compare-chip-remove {
  width:16px; height:16px; border-radius:50%; border:none; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.6);
  font-size:var(--fs-2xs); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.14s, color 0.14s;
}
.compare-chip-remove:hover { background:rgba(176,80,80,0.35); color:#fff; }

.compare-chart-wrap { position:relative; margin-top:18px; }
.compare-legend { display:flex; flex-wrap:wrap; gap:14px 18px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.06); }
.compare-legend-item { display:flex; align-items:center; gap:7px; font-size:var(--fs-xs); color:rgba(255,255,255,0.75); }
.compare-legend-item em { font-style:normal; color:rgba(255,255,255,0.4); }
.compare-legend-swatch { display:inline-block; width:14px; height:3px; border-radius:2px; flex-shrink:0; }

.compare-table-wrap { padding:0; overflow-x:auto; }
.compare-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.compare-table th, .compare-table td { padding:12px 16px; text-align:left; white-space:nowrap; border-bottom:1px solid rgba(255,255,255,0.06); }
.compare-table thead th { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.45); border-bottom-color:rgba(255,255,255,0.1); }
.compare-table th.compare-col-head { color:var(--ivory); font-size:var(--fs-sm); text-transform:none; letter-spacing:0; }
.compare-table td.compare-stat-label { color:rgba(255,255,255,0.55); font-weight:var(--fw-reg); }
.compare-table td.compare-value { color:var(--ivory); font-weight:var(--fw-bold); font-family:var(--sans); font-size:var(--fs-md); }
.compare-col-head-inner { display:flex; align-items:center; gap:8px; }

/* ── STATS TAB: head to head compare ── */
.h2h-compare-card { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.h2h-compare-side { display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; min-width:0; }
.h2h-compare-name { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ivory); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.h2h-compare-pct { font-family:var(--sans); font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--gold); line-height:1; }
.h2h-compare-mid { display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; padding:0 6px; }
.h2h-compare-vs { font-family:var(--sans); font-size:var(--fs-md); color:rgba(196,153,30,0.4); }
.h2h-compare-bar-bg { height:8px; border-radius:4px; background:var(--r-loss); overflow:hidden; }
.h2h-compare-bar-fill { height:100%; background:var(--g-win); }

/* ── BALL PICKER ── */
.pm-ball-btn {
  position:relative; border:none; padding:0; background:transparent; cursor:pointer;
  border-radius:50%;
}
.pm-ball-btn:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.pm-ball-edit {
  position:absolute; right:-2px; bottom:-2px; width:20px; height:20px; border-radius:50%;
  background:var(--gold); color:#241a06; display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-2xs); border:2px solid var(--felt-2); pointer-events:none;
}

.ball-picker-veil { position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:400; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.2s; padding:20px; }
.ball-picker-veil.show { opacity:1; pointer-events:all; }
.ball-picker {
  background:linear-gradient(165deg, var(--felt-1) 0%, var(--felt-2) 40%, var(--felt-3) 100%);
  border:1px solid rgba(255,255,255,0.08); border-radius:14px;
  width:100%; max-width:420px; padding:26px 24px 28px;
  transform:scale(0.94); transition:transform 0.22s cubic-bezier(0.34,1.2,0.64,1);
}
.ball-picker-veil.show .ball-picker { transform:scale(1); }
.ball-picker-title { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ivory); margin-bottom:2px; }
.ball-picker-sub { font-size:var(--fs-xs); color:rgba(255,255,255,0.46); margin-bottom:18px; }

.ball-picker-style { display:flex; gap:6px; background:rgba(0,0,0,0.22); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:4px; margin-bottom:20px; }
.ball-picker-style-btn {
  flex:1; padding:8px; border:none; border-radius:5px; background:transparent; cursor:pointer;
  color:rgba(255,255,255,0.55); font-family:var(--sans); font-size:var(--fs-xs); font-weight:var(--fw-bold);
  letter-spacing:0.04em; transition:background 0.14s, color 0.14s;
}
.ball-picker-style-btn.active { background:var(--gold); color:#241a06; }

.ball-picker-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px; }
.ball-picker-grid[hidden] { display:none; }
.ball-picker-swatch {
  width:100%; aspect-ratio:1; border-radius:50%; border:2px solid transparent; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:transform 0.14s, border-color 0.14s;
  overflow:hidden; position:relative;
}
.ball-picker-swatch:hover { transform:scale(1.08); }
.ball-picker-swatch.selected { border-color:var(--gold); }
.ball-picker-swatch-custom {
  background:rgba(255,255,255,0.06); border:2px dashed rgba(255,255,255,0.25);
  color:rgba(255,255,255,0.55); font-size:var(--fs-md); font-weight:var(--fw-bold);
}
.ball-picker-swatch-custom:hover { border-color:rgba(255,255,255,0.5); color:var(--ivory); }
.ball-picker-swatch-custom.selected { border-style:solid; border-color:var(--gold); color:var(--gold); }
.ball-picker-cancel {
  width:100%; padding:11px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  border-radius:7px; color:rgba(255,255,255,0.7); font-family:var(--sans); font-size:var(--fs-xs); font-weight:var(--fw-bold);
  cursor:pointer; transition:background 0.14s;
}
.ball-picker-cancel:hover { background:rgba(255,255,255,0.1); }

.ball-picker-flag-list { max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; margin-bottom:14px; border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:6px; }
.ball-picker-flag-row {
  display:flex; align-items:center; gap:11px; width:100%; padding:8px 10px; border-radius:5px;
  background:transparent; border:none; cursor:pointer; text-align:left;
  color:var(--ivory); font-family:var(--sans); font-size:var(--fs-sm); transition:background 0.12s;
}
.ball-picker-flag-row:hover, .ball-picker-flag-row.selected { background:rgba(196,153,30,0.14); }
.ball-picker-flag-row .flag-icon { width:24px; height:18px; object-fit:cover; border-radius:3px; flex-shrink:0; box-shadow:0 0 0 1px rgba(255,255,255,0.12); }
.ball-picker-flag-empty { padding:14px 4px; text-align:center; font-size:var(--fs-xs); color:rgba(255,255,255,0.4); font-style:italic; }
.ball-picker-flag-clear {
  width:100%; padding:9px; background:transparent; border:1px solid rgba(180,70,70,0.25); border-radius:7px;
  color:rgba(180,70,70,0.6); font-family:var(--sans); font-size:var(--fs-xs); font-weight:var(--fw-bold);
  cursor:pointer; margin-bottom:14px; transition:all 0.14s;
}
.ball-picker-flag-clear:hover { border-color:rgba(180,70,70,0.5); color:#c07070; background:rgba(180,70,70,0.06); }

/* company affiliation — independent of ball color/flag, so it's its own
   always-visible section rather than another style tab */
.ball-picker-divider { height:1px; background:rgba(255,255,255,0.08); margin:4px 0 16px; }
.ball-picker-company-label { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.45); margin-bottom:10px; }
.ball-picker-company-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.ball-picker-company-chip {
  width:52px; height:52px; border-radius:10px; border:2px solid transparent; padding:6px; cursor:pointer;
  background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center;
  transition:transform 0.14s, border-color 0.14s;
}
.ball-picker-company-chip img { width:100%; height:100%; object-fit:contain; }
.ball-picker-company-chip:hover { transform:scale(1.06); }
.ball-picker-company-chip.selected { border-color:var(--gold); }
.ball-picker-company-chip.none {
  background:rgba(255,255,255,0.06); border:2px dashed rgba(255,255,255,0.25);
  color:rgba(255,255,255,0.5); font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.04em;
}
.ball-picker-company-chip.none:hover { border-color:rgba(255,255,255,0.5); color:rgba(255,255,255,0.75); }
.ball-picker-company-chip.none.selected { border-style:solid; border-color:var(--gold); color:var(--gold); }

/* ── INFO MODAL (Details unlock — reuses .player-modal) ── */
.info-modal-icon {
  width:58px; height:58px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--gold);
  background:radial-gradient(circle at 32% 28%, rgba(196,153,30,0.28), rgba(196,153,30,0.08));
  border:1px solid rgba(196,153,30,0.3);
}
.pm-body-text { font-size:var(--fs-sm); line-height:1.65; color:rgba(255,255,255,0.72); }
.pm-body-text + .pm-body-text { margin-top:10px; }
.pm-formula {
  font-family:'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size:var(--fs-xs);
  color:var(--ivory); line-height:1.7; white-space:pre-wrap; word-break:break-word;
}
.elo-example-row {
  display:flex; align-items:center; gap:12px; padding:9px 14px;
  font-size:var(--fs-xs); color:rgba(255,255,255,0.7);
}
.elo-example-row + .elo-example-row { border-top:1px solid rgba(255,255,255,0.05); }
.elo-example-row .rating { flex-shrink:0; width:70px; font-weight:var(--fw-bold); color:var(--ivory); }
.elo-example-row .weeks { flex:1; display:flex; gap:14px; flex-wrap:wrap; }
.elo-example-row .weeks span { color:rgba(255,255,255,0.45); }
.elo-example-row .weeks b { color:var(--gold); font-weight:var(--fw-bold); }
.elo-example-head {
  display:flex; align-items:center; gap:12px; padding:8px 14px 10px;
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.4);
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.elo-example-head .rating { width:70px; flex-shrink:0; }

.lb-row-clickable { cursor:pointer; }
.lb-row-clickable:hover .lb-name { color:var(--gold); }

/* any player name shown as read-only text (head-to-head lists, match
   history, current-game headers, queue rows) — click through to their
   own profile modal */
.player-link { cursor:pointer; }
.player-link:hover { color:var(--gold); text-decoration:underline; text-underline-offset:2px; }

.btn-abandon {
  padding:6px 14px; margin-left:auto; background:rgba(180,70,70,0.1); border:1px solid rgba(180,70,70,0.4);
  border-radius:5px; color:#d08a8a; font-family:var(--sans); font-size:var(--fs-2xs);
  font-weight:var(--fw-bold); letter-spacing:0.12em; text-transform:uppercase; cursor:pointer;
  transition:all 0.14s; white-space:nowrap;
}
.btn-abandon:hover { border-color:rgba(180,70,70,0.7); color:#e8a0a0; background:rgba(180,70,70,0.18); }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .cg-hero { min-height:auto; padding:20px 22px; }
  .grid-2,.grid-3 { grid-template-columns:1fr; }
  .pm-kpi-strip { grid-template-columns:repeat(2,1fr); }
  .pm-insight-grid { grid-template-columns:1fr 1fr; }
  .player-modal { padding:22px 18px calc(32px + env(safe-area-inset-bottom)); }

  /* modals track the visible area (above the on-screen keyboard) instead of
     the full layout viewport — see syncVisualViewport() */
  .player-modal-veil, .ball-picker-veil, .confirm-veil {
    inset:auto 0 auto 0; top:var(--vv-top, 0px); height:var(--vv-h, 100vh); height:var(--vv-h, 100dvh);
  }
  .player-modal { max-height:88vh; max-height:min(88dvh, calc(var(--vv-h, 100dvh) - 12px)); }
  .player-modal.pm-compact, .player-modal.qm-card { padding:22px 18px calc(28px + env(safe-area-inset-bottom)); }
  .qm-list { max-height:50vh; max-height:min(50dvh, calc(var(--vv-h, 100dvh) - 230px)); }

  .tab-content.active { -webkit-overflow-scrolling:touch; }

  /* inputs/selects under 16px trigger iOS Safari's auto-zoom-on-focus */
  input, select { font-size:16px; }
}

@media (max-width:600px) {
  .stat-strip { flex-direction:column; }
  .frame-outer { padding:8px; }
  .frame-inner { padding:8px; border-radius:8px; }
  .pocket { display:none; } /* corner/side pockets crowd the felt at this size */
  .wordmark { padding:calc(18px + env(safe-area-inset-top)) 14px 0; }
  .btn-start-game { padding:8px 10px; font-size:var(--fs-2xs); letter-spacing:0.08em; }
  .lb-segmented { flex-wrap:wrap; }
  .lb-segmented-btn { flex:1 1 45%; font-size:var(--fs-2xs); padding:9px 6px; }
  .tab-rail { padding:10px 14px 0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; flex-wrap:nowrap; }
  .tab-rail::-webkit-scrollbar { display:none; }
  .tab-content { padding:10px 12px 10px; }
  .tab { padding:8px 12px 9px; font-size:var(--fs-2xs); letter-spacing:0.06em; }
  .tab-rail-fade {
    display:block; position:absolute; top:10px; bottom:1px; right:0; width:26px;
    background:linear-gradient(90deg, transparent, var(--felt-1) 65%);
    pointer-events:none; z-index:2;
  }
  .cg-hero { padding:14px 16px; }
  .cg-form-row { gap:10px; }
  .cg-form-center { min-width:0; }

  /* two name columns + a ball each leave very little width on a phone —
     stack ball above name so the name gets the card's full width instead
     of fighting the ball for space (was causing ugly mid-word wrapping).
     align-items stays "stretch" (the default) so the name/elo wrapper is
     bound to the column's actual width — needed for ellipsis truncation
     to kick in instead of the text just growing past the column. */
  .cg-player-top { flex-direction:column; align-items:stretch; align-self:stretch; width:100%; gap:6px; }
  .cg-player.right .cg-player-top { text-align:right; }
  .cg-player.right .cg-player-top .avatar-wrap { align-self:flex-end; }
  .cg-hero .ball.lg { width:40px; height:40px; font-size:var(--fs-xs); }
  .cg-hero .cg-player-name { font-size:var(--fs-md); }
  .cg-h2h-winner, .cg-h2h-loser { max-width:32%; }
  .pm-kpi-strip { grid-template-columns:repeat(2,1fr); }
  .pm-insight-grid { grid-template-columns:1fr; }
  .ov-heading { font-size:var(--fs-2xl); }
  .celeb-name { font-size:var(--fs-2xl); }

  /* queue add row: stack inputs + actions instead of cramming into one line */
  .queue-add-row { flex-direction:column; align-items:stretch; gap:11px; }
  .queue-btn-group { flex-direction:row; align-self:stretch; }
  .queue-btn-group button { flex:1; }
  .queue-item { flex-wrap:wrap; row-gap:8px; }
  .queue-source { display:none; }

  /* the win count is already in .lb-wl ("5W 1L · 83%") right under the name —
     dropping the redundant standalone column gives the name column enough
     width to stop truncating to 4-5 characters on a phone */
  .lb-wins { display:none; }

  .cg-player-elo, .cg-player-new { white-space:normal; }

  /* names wrap (two lines max on the leaderboard) instead of ellipsising to a
     few characters — there are two name columns plus a rating on a phone */
  .lb-name { white-space:normal; overflow-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.2; }
  .queue-names { flex-wrap:wrap; row-gap:2px; }
  .queue-name-part, .hist-winner, .hist-loser, .pm-h2h-name { white-space:normal; overflow-wrap:break-word; min-width:0; }
  /* match history: nothing is clipped on a phone — names and bonus tags wrap
     onto extra lines and the row grows to fit */
  .hist-row { align-items:flex-start; }
  .hist-players { flex-wrap:wrap; align-items:center; row-gap:6px; column-gap:8px; }
  .hist-winner, .hist-loser { overflow:visible; text-overflow:clip; max-width:100%; }
  .hist-deltas { padding-top:1px; }
  .pm-game-row { align-items:flex-start; }
  .pm-game-opponent { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:break-word; line-height:1.5; }
  .pm-game-opponent .nemesis-tag, .pm-game-opponent .bullet-tag, .pm-game-opponent .bounty-tag, .pm-game-opponent .happy-tag { display:inline-block; white-space:nowrap; margin-top:2px; }
  .cg-h2h-row { flex-wrap:wrap; row-gap:4px; align-items:flex-start; }
  .cg-h2h-winner, .cg-h2h-loser { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:break-word; max-width:none; min-width:0; flex:1 1 30%; }
  /* tighter rows so the name column gets more than ~80px at 320px */
  .lb-row { gap:10px; padding:12px 10px; }
  .lb-rank { width:18px; }
  .lb-elo { font-size:var(--fs-lg); min-width:44px; }
}

/* comfortable touch targets on phones and any touch screen */
@media (max-width:600px), (pointer:coarse) {
  .lb-segmented-btn { min-height:44px; }
  .mode-toggle-btn { min-height:40px; }
  .ball-picker-style-btn { min-height:40px; }
  .btn-icon-start, .btn-icon-remove { width:38px; height:38px; }
  .pm-close { width:42px; height:42px; }
  .btn-start-game { min-height:40px; }
  .btn-danger-ghost { min-height:36px; }
  .ac-item { padding:13px 14px; }
}

/* ── seasons: champion banner, season board, hall of fame ── */
.champ-banner { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:14px 28px 0; padding:9px 14px;
  border-radius:8px; background:linear-gradient(135deg, rgba(232,184,0,0.2), rgba(232,184,0,0.07)); border:1px solid rgba(232,184,0,0.38); }
.champ-banner[hidden] { display:none; }
.champ-banner-main { display:flex; align-items:center; gap:10px; min-width:0; background:none; border:0; padding:0; color:inherit; font:inherit; cursor:pointer; text-align:left; }
.champ-banner-trophy { font-size:22px; line-height:1; }
.champ-banner-label { font-size:var(--fs-2xs); letter-spacing:0.14em; text-transform:uppercase; color:rgba(232,184,0,0.85); }
.champ-banner-name { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ivory); overflow-wrap:anywhere; }
.champ-banner-sub { font-size:var(--fs-xs); color:rgba(255,255,255,0.55); }
.champ-banner-live { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:rgba(255,255,255,0.85); border-radius:999px; padding:5px 12px; font:inherit; font-size:var(--fs-2xs); letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; }
.champ-banner-live:hover { background:rgba(255,255,255,0.14); }

.season-head { margin-bottom:14px; }
.season-name { font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--ivory); overflow-wrap:anywhere; }
.season-meta { font-size:var(--fs-2xs); letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.45); margin-top:4px; line-height:1.6; }

.hof-card { border-radius:10px; background:rgba(0,0,0,0.14); border:1px solid rgba(232,184,0,0.22); margin-bottom:12px; overflow:hidden; }
.hof-top { display:flex; align-items:center; gap:14px; padding:14px 16px; }
.hof-trophy { font-size:30px; line-height:1; flex-shrink:0; }
.hof-info { min-width:0; flex:1; }
.hof-season { font-size:var(--fs-2xs); letter-spacing:0.14em; text-transform:uppercase; color:rgba(232,184,0,0.85); }
.hof-champ { font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--ivory); overflow-wrap:anywhere; cursor:pointer; }
.hof-podium { font-size:var(--fs-xs); color:rgba(255,255,255,0.6); margin-top:3px; overflow-wrap:anywhere; }
.hof-meta { font-size:var(--fs-2xs); color:rgba(255,255,255,0.4); margin-top:4px; }
.hof-card summary { list-style:none; cursor:pointer; padding:9px 16px; font-size:var(--fs-2xs); letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.5); border-top:1px solid rgba(255,255,255,0.06); }
.hof-card summary::-webkit-details-marker { display:none; }
.hof-card summary:hover { color:#fff; background:rgba(255,255,255,0.03); }
.hof-card[open] summary { color:rgba(232,184,0,0.9); }
.title-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.title-chip { font-size:var(--fs-2xs); letter-spacing:0.04em; padding:3px 9px; border-radius:999px; background:rgba(232,184,0,0.14); border:1px solid rgba(232,184,0,0.35); color:#f0d070; }

/* ── doubles ── */
.dbl-teams { display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; margin-bottom:6px; }
.dbl-team-label { font-size:var(--fs-2xs); letter-spacing:0.14em; text-transform:uppercase; color:rgba(232,184,0,0.85); margin-bottom:8px; }
.dbl-vs { font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:0.14em; color:rgba(255,255,255,0.35); padding-top:24px; }
.duo-avatars { display:flex; flex-shrink:0; }
.duo-avatars > * + * { margin-left:-7px; }
.dbl-game-row { display:flex; align-items:center; gap:12px; padding:11px 16px; font-size:var(--fs-sm); }
.dbl-game-row + .dbl-game-row { border-top:1px solid rgba(255,255,255,0.04); }
.dbl-game-teams { min-width:0; flex:1; overflow-wrap:anywhere; line-height:1.45; }
.dbl-game-win { font-weight:var(--fw-bold); color:var(--ivory); }
.dbl-game-lose { color:rgba(255,255,255,0.55); }
.dbl-game-delta { font-weight:var(--fw-bold); color:var(--g-win); white-space:nowrap; font-size:var(--fs-xs); }
@media (max-width:600px) {
  .champ-banner { margin:12px 14px 0; }
  .dbl-teams { grid-template-columns:1fr; gap:4px; }
  .dbl-vs { padding:0; text-align:center; }
}

/* ── predictions: odds chips + the Predict card ── */
.odds-line { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.02em; white-space:nowrap; flex-shrink:0; }
.odds-pct { padding:2px 7px; border-radius:999px; background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.6); }
.odds-pct.fav { background:rgba(232,184,0,0.18); color:#f0d070; }
.odds-sep { color:rgba(255,255,255,0.3); font-weight:var(--fw-reg); }
.odds-name { color:var(--ivory); font-weight:var(--fw-reg); letter-spacing:0; }
.odds-new { color:rgba(255,255,255,0.4); cursor:help; }
.queue-names .odds-line { margin-left:auto; }
.sg-odds { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:12px 0 14px; padding:10px 12px; border-radius:8px; background:rgba(0,0,0,0.18); border:1px solid rgba(255,255,255,0.07); }
.sg-odds[hidden] { display:none; }
.odds-eyebrow { font-size:var(--fs-2xs); letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.45); }
.un-odds { display:flex; justify-content:center; margin:6px 0 2px; min-height:1px; }
.un-odds .odds-line { font-size:var(--fs-md); gap:10px; }
.un-odds .odds-pct { padding:4px 12px; }

.predict-section { margin-top:0; }
.pred-card { border-radius:10px; background:rgba(0,0,0,0.16); border:1px solid rgba(255,255,255,0.08); padding:12px 14px; margin-bottom:10px; }
.pred-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.pred-card-label { font-size:var(--fs-2xs); letter-spacing:0.14em; text-transform:uppercase; color:rgba(232,184,0,0.85); }
.pred-note { font-size:var(--fs-2xs); color:rgba(255,255,255,0.45); }
.pred-bar { height:6px; border-radius:999px; background:rgba(255,255,255,0.1); overflow:hidden; margin-bottom:10px; }
.pred-bar-fill { height:100%; background:linear-gradient(90deg, #c4991e, #f0d070); }
.pred-picks { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pred-pick { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; text-align:left; padding:10px 12px; border-radius:8px; cursor:pointer; font:inherit;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); color:var(--ivory); transition:all 0.14s; }
.pred-pick:hover:not(:disabled) { background:rgba(255,255,255,0.1); }
.pred-pick:disabled { opacity:0.4; cursor:not-allowed; }
.pred-pick.chosen { background:rgba(232,184,0,0.16); border-color:rgba(232,184,0,0.7); }
.pred-pick-name { font-size:var(--fs-md); font-weight:var(--fw-bold); overflow-wrap:anywhere; }
.pred-pick-odds { font-size:var(--fs-sm); color:rgba(255,255,255,0.7); }
.pred-pick.fav .pred-pick-odds { color:#f0d070; }
.pred-pick-pts { font-size:var(--fs-2xs); color:rgba(255,255,255,0.45); }
.pred-pick.chosen .pred-pick-pts { color:#f0d070; }
.pred-crowd { margin-top:8px; font-size:var(--fs-2xs); color:rgba(255,255,255,0.45); overflow-wrap:anywhere; }
.pred-result { display:flex; gap:10px; align-items:flex-start; padding:7px 4px; font-size:var(--fs-xs); color:rgba(255,255,255,0.7); overflow-wrap:anywhere; }
.pred-result + .pred-result { border-top:1px solid rgba(255,255,255,0.04); }
.pred-result-mark { font-weight:var(--fw-bold); width:14px; flex-shrink:0; }
.pred-result.right .pred-result-mark, .pred-pts { color:var(--g-win); }
.pred-result.wrong .pred-result-mark { color:var(--r-loss); }
@media (max-width:600px) { .pred-picks { grid-template-columns:1fr; } .queue-names .odds-line { margin-left:0; } }

/* ── install banner (phones) + sign-in nudge ── */
.install-banner { display:none; align-items:center; gap:10px; padding:10px 12px calc(10px) 12px; padding-top:calc(10px + env(safe-area-inset-top));
  background:linear-gradient(180deg, #1d4a2a, #163d22); border-bottom:1px solid rgba(232,184,0,0.45); color:var(--ivory); }
.install-banner-icon { border-radius:9px; flex-shrink:0; }
.install-banner-text { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; font-size:var(--fs-xs); line-height:1.3; }
.install-banner-text b { font-size:var(--fs-sm); }
.install-banner-text span { color:rgba(255,255,255,0.62); }
.install-banner-btn { flex-shrink:0; min-height:36px; padding:0 14px; border-radius:6px; border:1px solid #9a7016; cursor:pointer; font:inherit; font-size:var(--fs-xs); font-weight:var(--fw-bold);
  letter-spacing:0.08em; text-transform:uppercase; color:#1a0c02; background:linear-gradient(145deg,#8a6012,#c4991e,#8a6012); }
.install-banner-x { flex-shrink:0; width:34px; height:34px; border-radius:50%; border:0; background:transparent; color:rgba(255,255,255,0.55); font-size:15px; cursor:pointer; }
.install-banner-x:hover { color:#fff; background:rgba(255,255,255,0.08); }
@media (max-width:820px) { .install-banner:not([hidden]) { display:flex; } }

.auth-banner { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:9px 14px; font-size:var(--fs-xs); color:var(--ivory);
  background:rgba(232,184,0,0.14); border-bottom:1px solid rgba(232,184,0,0.35); }
.auth-banner[hidden] { display:none; }
.auth-banner button { min-height:32px; padding:0 12px; border-radius:6px; cursor:pointer; font:inherit; font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.08em; text-transform:uppercase;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); color:#fff; }

/* ── account ── */
.btn-account .account-initials { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.02em; }
.btn-account.signed-in { background:rgba(232,184,0,0.2); border-color:rgba(232,184,0,0.6); color:#f0d070; }
.btn-account.signed-in .account-icon { display:none; }
.btn-account[hidden] { display:none; }
.btn-account:not([hidden]) ~ .btn-bell { }
.btn-bell + .btn-account { margin-left:0; }
.account-slack-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:46px; border-radius:8px; border:1px solid rgba(255,255,255,0.3);
  background:#fff; color:#1d1c1d; font:inherit; font-weight:var(--fw-bold); cursor:pointer; text-decoration:none; }
.account-slack-btn:hover { background:#f4f4f4; }
.account-suggest { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; padding:10px 12px; margin-bottom:8px; border-radius:8px; cursor:pointer; font:inherit;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); color:var(--ivory); }
.account-suggest:hover { background:rgba(255,255,255,0.1); }
.account-suggest-name { font-weight:var(--fw-bold); font-size:var(--fs-md); overflow-wrap:anywhere; }
.account-suggest-why { font-size:var(--fs-2xs); color:rgba(255,255,255,0.5); }
.account-row { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.06); font-size:var(--fs-sm); }
.account-row span:first-child { color:rgba(255,255,255,0.5); }
.account-row span:last-child { text-align:right; overflow-wrap:anywhere; }

/* ── queue extras: "on my way" ticks, who queued it ── */
.queue-ack { font-size:var(--fs-2xs); font-weight:var(--fw-bold); color:var(--g-win); background:rgba(80,180,100,0.14); border-radius:999px; padding:2px 8px; white-space:nowrap; flex-shrink:0; }
.queue-by { font-size:var(--fs-2xs); color:rgba(255,255,255,0.4); flex-shrink:0; white-space:nowrap; }
.admin-game-by { font-size:var(--fs-2xs); color:rgba(255,255,255,0.4); white-space:nowrap; }
@media (max-width:600px) { .queue-by { display:none; } }

/* `hidden` must always win. Several components set their own `display` (flex, grid…), which silently
   beats the browser's built-in [hidden] rule — that left flagged-off sections (e.g. Predict the Winner)
   visible but empty. */
[hidden] { display: none !important; }

/* ── notification preferences in the 🔔 card ── */
.notify-prefs { display:flex; flex-direction:column; gap:8px; margin:0 0 14px; }
.notify-pref { display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:8px; cursor:pointer; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); }
.notify-pref:hover { background:rgba(255,255,255,0.09); }
/* the app's global input style strips native checkboxes (no tick), so draw one */
.notify-pref input[type="checkbox"] { -webkit-appearance:none; appearance:none; display:grid; place-content:center; flex-shrink:0; width:22px; height:22px; min-height:0; padding:0; margin:1px 0 0;
  border-radius:6px; border:2px solid rgba(255,255,255,0.4); background:rgba(0,0,0,0.3); cursor:pointer; }
.notify-pref input[type="checkbox"]:checked { background:#e8b800; border-color:#e8b800; }
.notify-pref input[type="checkbox"]:checked::after { content:'✓'; color:#1a0c02; font-size:15px; font-weight:800; line-height:1; }
.notify-pref input[type="checkbox"]:focus-visible { outline:2px solid #f0d070; outline-offset:2px; }
.notify-pref span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.notify-pref b { font-size:var(--fs-sm); color:var(--ivory); }
.notify-pref small { font-size:var(--fs-2xs); color:rgba(255,255,255,0.5); line-height:1.35; }

/* ── Stats tab ── cards rise in, numbers count up and bars grow whenever the tab opens
   (.fs-play is added by playStatsEntrance() and removed again once the show is over) */
.fs-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; margin-bottom:14px; }
.fs-kpi { background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.07); border-radius:8px; padding:14px 16px; min-width:0; }
.fs-kpi-label { display:block; font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.45); margin-bottom:8px; }
.fs-kpi-num { font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--gold); line-height:1; font-variant-numeric:tabular-nums; }
.fs-kpi-sub { font-size:var(--fs-2xs); color:rgba(255,255,255,0.46); margin-top:6px; }

.fs-trivia { display:flex; align-items:center; gap:16px; margin-bottom:26px; padding:16px 18px 16px 20px; border-radius:10px;
  background:linear-gradient(135deg, rgba(196,153,30,0.18), rgba(0,0,0,0.22)); border:1px solid rgba(196,153,30,0.38); }
.fs-trivia-body { flex:1; min-width:0; }
.fs-trivia-eyebrow { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.fs-trivia-text { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ivory); line-height:1.4; transition:opacity 0.16s, transform 0.16s; }
.fs-trivia-text.swap { opacity:0; transform:translateY(4px); }
.fs-shuffle { flex-shrink:0; padding:9px 14px; border-radius:6px; background:rgba(196,153,30,0.16); border:1px solid rgba(196,153,30,0.4); color:var(--gold); font-family:var(--sans); font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; transition:background 0.14s; }
.fs-shuffle:hover { background:rgba(196,153,30,0.28); }
.fs-shuffle span { display:inline-block; transition:transform 0.3s; }
.fs-shuffle:active span { transform:rotate(180deg); }

.fs-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; margin-bottom:26px; }
.fs-grid > * { min-width:0; }
.fs-card { position:relative; display:flex; flex-direction:column; gap:10px; padding:14px 16px 15px; border-radius:8px; overflow:hidden;
  background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.07); box-shadow:inset 0 2px 0 var(--accent, transparent); transition:transform 0.18s, border-color 0.18s, background 0.18s; }
.fs-card:hover { transform:translateY(-2px); border-color:rgba(196,153,30,0.35); background:rgba(0,0,0,0.26); }
.fs-card.wide { grid-column:1 / -1; }
.fs-card-top { display:flex; align-items:center; gap:8px; }
.fs-emoji { font-size:18px; line-height:1; display:inline-block; }
.fs-card:hover .fs-emoji { animation:fsWiggle 0.5s ease; }
.fs-label { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.fs-card-main { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.fs-who { display:flex; align-items:center; gap:10px; min-width:0; }
.fs-avatars { display:flex; flex-shrink:0; }
.fs-stack .avatar-wrap + .avatar-wrap { margin-left:-10px; }
.fs-who-name { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ivory); overflow-wrap:anywhere; min-width:0; }
.fs-text { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ivory); line-height:1.35; overflow-wrap:anywhere; }
.fs-big { flex-shrink:0; font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--gold); line-height:1; font-variant-numeric:tabular-nums; text-align:right; }
.fs-big small { font-size:var(--fs-xs); font-weight:var(--fw-reg); color:rgba(255,255,255,0.5); }
.fs-sub { font-size:var(--fs-xs); color:rgba(255,255,255,0.55); line-height:1.5; overflow-wrap:anywhere; }
.fs-sub b { color:var(--ivory); }
.fs-runners { margin-top:6px; color:rgba(255,255,255,0.42); }
.fs-vacant { font-style:italic; color:rgba(255,255,255,0.5); }
.fs-unclaimed { display:flex; flex-wrap:wrap; gap:6px; }
.fs-unclaimed-badge { font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--ivory); padding:4px 9px; border-radius:999px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); cursor:help; }
.fs-subtitle { margin:0 0 10px; }
.fs-of { font-size:var(--fs-xs); font-weight:var(--fw-reg); color:rgba(255,255,255,0.4); }
.fs-race-icons { display:flex; flex-wrap:wrap; gap:1px 3px; font-size:14px; line-height:1.25; margin:3px 0 5px; }

.fs-bar { height:7px; border-radius:999px; background:rgba(255,255,255,0.1); overflow:hidden; }
.fs-bar-thin { height:4px; }
.fs-bar-fill { height:100%; width:var(--w); border-radius:999px; background:linear-gradient(90deg, #c4991e, #f0d070); transform-origin:left center; }

.fs-days { display:flex; align-items:flex-end; gap:8px; height:130px; }
.fs-day { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; height:100%; min-width:0; }
.fs-day-pct { font-size:var(--fs-2xs); color:rgba(255,255,255,0.45); font-variant-numeric:tabular-nums; }
.fs-day-bar { width:100%; height:calc((100% - 38px) * var(--h) / 100); min-height:4px; border-radius:4px 4px 0 0; background:rgba(255,255,255,0.15); transform-origin:bottom center; }
.fs-day.top .fs-day-bar { background:linear-gradient(0deg, #c4991e, #f0d070); }
.fs-day.top .fs-day-pct, .fs-day.top .fs-day-name { color:var(--gold); }
.fs-day-name { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.fs-days-note { margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.06); font-size:var(--fs-sm); color:rgba(255,255,255,0.6); }
.fs-days-note b { color:var(--gold); }

.fs-co-row { display:flex; align-items:center; gap:14px; padding:10px 0; }
.fs-co-row + .fs-co-row { border-top:1px solid rgba(255,255,255,0.06); }
.fs-co-logo { width:26px; height:26px; object-fit:contain; flex-shrink:0; }
.fs-co-main { flex:1; min-width:0; }
.fs-co-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.fs-co-name { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ivory); }
.fs-co-pct { font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--gold); font-variant-numeric:tabular-nums; }

@keyframes fsRise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes fsGrowX { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes fsGrowY { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes fsWiggle { 0%,100% { transform:rotate(0) scale(1); } 25% { transform:rotate(-14deg) scale(1.25); } 60% { transform:rotate(10deg) scale(1.25); } }
.fs-play .fs-card, .fs-play .fs-kpi, .fs-play .fs-trivia { animation:fsRise 0.5s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i, 0) * 55ms); }
.fs-play .fs-kpi:nth-child(2) { animation-delay:60ms; } .fs-play .fs-kpi:nth-child(3) { animation-delay:120ms; } .fs-play .fs-kpi:nth-child(4) { animation-delay:180ms; }
.fs-play .fs-trivia { animation-delay:240ms; }
.fs-play .fs-bar-fill { animation:fsGrowX 0.9s cubic-bezier(.2,.8,.2,1) 0.2s both; }
.fs-play .fs-day-bar { animation:fsGrowY 0.8s cubic-bezier(.2,.8,.2,1) 0.15s both; }
@media (prefers-reduced-motion:reduce) {
  .fs-play .fs-card, .fs-play .fs-kpi, .fs-play .fs-trivia, .fs-play .fs-bar-fill, .fs-play .fs-day-bar, .fs-card:hover .fs-emoji { animation:none; }
  .fs-card, .fs-trivia-text { transition:none; }
}
@media (max-width:600px) {
  .fs-trivia { flex-direction:column; align-items:stretch; gap:12px; }
  .fs-shuffle { align-self:flex-start; }
  .fs-grid { grid-template-columns:1fr; }
  .fs-days { gap:5px; }
}

/* happy hour */
.happy-tag { flex-shrink:0; font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.06em; text-transform:uppercase; color:#ffc247; background:rgba(255,184,40,0.14); border:1px solid rgba(255,184,40,0.32); border-radius:3px; padding:2px 7px; }
.happy-banner { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:10px 14px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); }
.happy-banner.on { background:rgba(255,184,40,0.14); border-color:rgba(255,184,40,0.4); }
.happy-banner .happy-ico { font-size:22px; }
.happy-banner .happy-title { font-weight:var(--fw-bold); font-size:var(--fs-sm); }
.happy-banner .happy-sub { font-size:var(--fs-xs); color:rgba(255,255,255,0.6); }
.happy-banner.on .happy-title { color:#ffc247; }

/* moving titles up front */
.titles-banner { display:flex; gap:10px; margin-bottom:14px; overflow-x:auto; padding-bottom:2px; }
.titles-banner[hidden] { display:none; }
.title-chip { flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:10px 16px 10px 12px; border-radius:10px; cursor:pointer; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); transition:transform 0.15s, border-color 0.15s; }
.title-chip:hover { transform:translateY(-1px); border-color:rgba(196,153,30,0.45); }
.title-chip-ico { font-size:26px; line-height:1; }
.title-chip-name { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.title-chip-holder { font-size:var(--fs-md); font-weight:var(--fw-bold); line-height:1.25; }
.title-chip-sub { font-size:var(--fs-xs); color:rgba(255,255,255,0.6); }
.title-chip.belt { flex:1 1 auto; padding:14px 20px 14px 16px; background:linear-gradient(100deg,rgba(196,153,30,0.26),rgba(196,153,30,0.07)); border-color:rgba(196,153,30,0.55); box-shadow:0 0 24px rgba(196,153,30,0.14); }
.title-chip.belt .title-chip-ico { font-size:38px; }
.title-chip.belt .title-chip-name { color:#e6c35c; }
.title-chip.belt .title-chip-holder { font-size:var(--fs-xl, 1.4rem); }
.title-ico { margin-left:5px; font-size:0.9em; cursor:default; }
.bounty-tag { flex-shrink:0; font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.06em; text-transform:uppercase; color:#7be0a0; background:rgba(60,200,120,0.14); border:1px solid rgba(60,200,120,0.32); border-radius:3px; padding:2px 7px; white-space:nowrap; }
.celeb-belt { margin-top:14px; font-size:var(--fs-md); font-weight:700; letter-spacing:0.06em; color:#e6c35c; animation:celebFadeIn 0.5s ease 1.1s both; }
.celeb-belt[hidden] { display:none; }
.celeb-belt.taken { font-size:var(--fs-lg, 1.2rem); text-transform:uppercase; }
.celeb-elo { flex-wrap:wrap; }
.celeb-elo-bounty { color:#7be0a0; }

/* third-party tabs */
.tab-content.ext-panel.active { display:flex; padding:0; }
.ext-panel iframe { flex:1; width:100%; border:0; background:#fff; border-radius:8px; }
.tab-content.ext-panel[data-trusted] { padding:18px 28px; overflow-y:auto; }

/* admin page — one section at a time, flags grouped under small headings */
.admin-sec { display:none; }
.admin-sec.active { display:block; }
.admin-nav { position:sticky; top:0; z-index:5; backdrop-filter:blur(6px); }
.admin-group-title { font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.48); margin:4px 2px 8px; }
.admin-sec .section-title { margin-top:26px; }
.admin-sec .section-title:first-child, .admin-sec > .stat-strip + .panel { margin-top:0; }
.admin-flag-list .admin-toggle-row { padding:16px 0; }
.admin-flag-list .admin-toggle-row:first-child { padding-top:0; }
.admin-flag-list .admin-toggle-row:last-child { padding-bottom:0; }
.admin-flag-list .admin-toggle-row + .admin-toggle-row { border-top:1px solid rgba(255,255,255,0.06); }
.admin-flag-list .admin-toggle-label { margin-bottom:2px; }

/* extension + marketplace rows in admin: info on the left, actions on the right */
.admin-ext-row { display:flex; justify-content:space-between; align-items:center; gap:12px 16px; flex-wrap:wrap; padding:12px 0; }
.admin-ext-row + .admin-ext-row { border-top:1px solid rgba(255,255,255,0.06); }
.admin-ext-info { flex:1 1 260px; min-width:0; }
.admin-ext-name { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ivory); }
.admin-ext-meta { font-size:var(--fs-xs); color:rgba(255,255,255,0.45); margin-top:2px; overflow-wrap:anywhere; }
.admin-ext-flag { font-size:var(--fs-2xs); letter-spacing:0.14em; text-transform:uppercase; color:#e0a860; margin-left:6px; }
.admin-ext-actions { display:flex; gap:8px; flex-wrap:wrap; }
.admin-ext-actions .btn-gold-ghost[disabled] { opacity:0.45; cursor:default; }
.admin-sec .admin-hint a, .admin-hint a { color:var(--gold); }