/* ═══════════════════════════════════════════════════════════════
   THE STANDS — Design Token System v3.0
   Brief: light, editorial, late-night matchday.
   Default: Light editorial. Dark: first-class skin via [data-theme="dark"].
   Palette: Burnt Orange mark · Forest Green shell · Warm Cream ground
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────────── */
:root {

  /* ── Surface hierarchy (light default) ──────────────────────────
     base = the ground (slightly warm grey-cream, deepest surface)
     raised = the page (the paper cards float on, same as old --paper)
     float = elevated overlays (modals, dropdowns)
     sink = recessed inputs
  */
  --surface-base:    #EFECE6;
  --surface-raised:  #F7F5F0;
  --surface-float:   #FFFFFF;
  --surface-sink:    #E6E3DB;
  --surface-hover:   rgba(26, 24, 20, 0.04);

  /* Legacy aliases — keeps all existing code working unchanged */
  --paper:  var(--surface-raised);
  --white:  var(--surface-float);

  /* ── Text (light mode) ───────────────────────────────────────────
  */
  --text-primary:   #1A1814;
  --text-secondary: #3D3A33;
  --text-muted:     #6B6760;
  --text-faint:     #9B9890;
  --text-on-brand:  #F7F5F0;

  /* Legacy text aliases */
  --ink:         var(--text-primary);
  --ink-primary: var(--text-primary);   /* used 46× — was never defined, now aliased */
  --ink-muted:   var(--text-muted);
  --ink-faint:   var(--text-faint);

  /* ── Brand mark: Burnt orange ────────────────────────────────────
     Identity only. Logo. Wordmark. Never on buttons or active nav.
     Deep, earthy, editorial. The Guardian masthead energy.
  */
  --brand-orange:     #C1440E;
  --brand-orange-mid: #D4572A;
  --brand-orange-bg:  #FDF0E8;

  /* ── Brand shell: Forest green ───────────────────────────────────
     Structure. Sidebar. CTAs. Active states. The pitch and stands.
  */
  --brand:         #2D5A3D;
  --brand-accent:  #246342;
  --brand-hover:   #1E5234;
  --brand-surface: #EBF2ED;
  --brand-text:    #2D5A3D;

  /* Legacy brand aliases */
  --meg-green:  var(--brand);
  --meg-accent: var(--brand-accent);
  --accent:     var(--brand-accent);   /* FIX: was undefined, now properly aliased */
  --hover-green: var(--brand-hover);

  /* ── Worst Eleven dark skin palette ─────────────────────────────
     Self-contained tokens for the body.mode-worst game overlay.
     Not mode-sensitive — Worst Eleven manages its own dark theme.
  */
  --worst-bg:       #1e1010;   /* deepest background */
  --worst-bg-mid:   #3d1a1a;   /* raised surface */
  --worst-bg-hover: #2e1212;   /* hover state */
  --worst-bg-sel:   #5a1a1a;   /* selected/active state */
  --worst-bg-btn:   #8B2020;   /* primary action red (hover: #a02525) */
  --worst-text:     #F0EDE8;   /* primary text on dark — warm off-white */
  --worst-muted:    #c8b0b0;   /* muted text — desaturated pink-grey */
  --worst-faint:    #8a6060;   /* faint text — deep muted */
  --worst-pos:      #4ADE80;   /* positive score delta — green pop */
  --worst-red:      #6B2020;   /* mid border/maroon */
  --worst-border:   rgba(200, 176, 176, 0.15);   /* subtle warm border */
  --worst-amber:    #F5A623;   /* amber accent (live events) */
  --worst-ink:      #f5c5b5;   /* secondary text — warm peach (headlines, reveals) */

  /* ── Semantic colours ────────────────────────────────────────────
     WCAG AA compliant on --surface-raised (#F7F5F0).
  */
  --colour-danger:    #C0392B;
  --colour-danger-bg: #FDECEA;
  --colour-live:      #1D7A40;
  --colour-live-dot:  #2ECC71;
  --colour-amber:     #A05C00;
  --colour-amber-bg:  #FFF3E0;
  --colour-amber-cta: #C87800;

  /* Legacy semantic aliases */
  --red-card: var(--colour-danger);
  --amber:    var(--colour-amber-cta);

  /* ── Tinted surfaces (light mode) ────────────────────────────────
     Subtle washes used for state feedback: correct/wrong answers,
     pick ownership, selection highlights. Must flip in dark mode.
  */
  --surface-success:       #eef7f0;
  --surface-success-muted: #e8f5ed;
  --surface-danger:        #fff5f5;
  --surface-danger-muted:  #fff8f7;
  --surface-amber:         #fff9ed;
  --surface-amber-muted:   #fff3d4;
  --surface-blue:          #f7f9ff;
  --surface-blue-muted:    #e8f0ff;
  --surface-indigo:        #f8f7ff;
  --surface-indigo-muted:  #ede8ff;
  --surface-highlight:     #fff9c4;

  /* ── Wall difficulty group colours (The Wall game) ───────────────
     Four difficulty tiers, each group gets a unique pastel wash.
     Tier 1 reuses --surface-highlight. Tiers 2–4 defined here.
  */
  --wall-diff-2: #c8e6c9;   /* soft green */
  --wall-diff-3: #b3d4f5;   /* soft blue */
  --wall-diff-4: #f3d0f8;   /* soft purple */

  /* ── Tinted borders (light mode) ─────────────────────────────────
  */
  --border-success: #b8e6c8;
  --border-danger:  #f5c6c0;
  --border-danger-strong: #e57373;
  --border-amber:   #f0d4a0;

  /* ── Editorial surfaces (mode-invariant) ─────────────────────────
     Puppeteer-rendered Back Page cards, Press Room articles.
     ALWAYS warm cream on near-black — never changes between modes.
  */
  --editorial-paper:    #F7F5F0;
  --editorial-ink:      #1A1814;
  --editorial-muted:    #6B6760;
  --editorial-rule:     #E2DED6;
  --editorial-drop-cap: #C87800;

  /* ── Borders ─────────────────────────────────────────────────────
  */
  --border-subtle:  rgba(26, 24, 20, 0.06);
  --border-default: rgba(26, 24, 20, 0.12);
  --border-strong:  rgba(26, 24, 20, 0.22);
  --border: #E2DED6;   /* Legacy — keep for backward compatibility */

  /* ── Competition colours (mode-invariant) ────────────────────────
  */
  --comp-ucl:  #001489;
  --comp-uel:  #f26522;
  --comp-ecl:  #003d29;
  --comp-pl:   #38003c;
  --comp-ch:   #1c2c5b;
  --comp-l1:   #cc0000;
  --comp-l2:   #1a3c6e;
  --comp-fac:  #b22234;
  --comp-lc:   #00b140;
  --comp-spl:  #1a1a6e;
  --comp-cs:   #c8102e;

  /* ── Misc picks (unchanged) ──────────────────────────────────────
  */
  --blue-pick:   #1d4ed8;
  --indigo-pick: #4f46e5;

  /* ── Layout (unchanged) ──────────────────────────────────────────
  */
  --sidebar-w:  240px;
  --header-h:   52px;
  --input-h:    60px;
  --radius:     12px;
  --radius-sm:  8px;
  --radius-lg:  16px;

  /* ── Typography (unchanged) ──────────────────────────────────────
  */
  --font-serif: 'Playfair Display', 'DM Serif Display', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;
  --font-mono:  'DM Mono', 'Courier New', monospace;

  /* ── Type scale (extended upward for editorial drama) ────────────
  */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  48px;   /* NEW — editorial headline, back page splash */
  --text-4xl:  64px;   /* NEW — game result score, match moment */

  /* ── Leading (for editorial drama moments) ───────────────────────
  */
  --leading-tight:  0.95;
  --leading-snug:   1.1;
  --leading-normal: 1.4;
  --leading-loose:  1.6;

  /* ── Spacing (unchanged) ─────────────────────────────────────────
  */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Shadows ─────────────────────────────────────────────────────
  */
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:        0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:        0 8px 28px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.08);
  --shadow-editorial: 0 2px 16px rgba(0,0,0,0.12);

  /* ── Z-index (unchanged) ─────────────────────────────────────────
  */
  --z-base:     1;
  --z-sticky:   10;
  --z-dropdown: 20;
  --z-sidebar:  30;
  --z-overlay:  50;
  --z-modal:    100;
  --z-toast:    150;
  --z-max:      200;

  /* ── States ──────────────────────────────────────────────────────
  */
  --disabled-opacity: 0.35;
  --transition-fast:  0.10s ease;
  --transition:       0.15s ease;
  --transition-slow:  0.25s ease;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — [data-theme="dark"]
   Apply to <html> element via JS toggle or prefers-color-scheme.
   Only surface-dependent tokens change. Brand orange, green,
   competition colours, spacing, typography — all unchanged.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {

  /* ── Dark surfaces ───────────────────────────────────────────────
  */
  --surface-base:    #0C0F0E;
  --surface-raised:  #161A18;
  --surface-float:   #1F2623;
  --surface-sink:    #272F2B;
  --surface-hover:   rgba(240, 237, 232, 0.04);

  /* Legacy surface aliases — dark values */
  --paper: var(--surface-raised);
  --white: var(--surface-float);

  /* ── Dark text ───────────────────────────────────────────────────
  */
  --text-primary:   #F0EDE8;
  --text-secondary: rgba(240, 237, 232, 0.65);
  --text-muted:     rgba(240, 237, 232, 0.35);
  --text-faint:     rgba(240, 237, 232, 0.18);

  /* Legacy text aliases — dark values */
  --ink:         var(--text-primary);
  --ink-primary: var(--text-primary);
  --ink-muted:   var(--text-muted);
  --ink-faint:   var(--text-faint);

  /* ── Brand mark on dark — burns brighter ─────────────────────────
  */
  --brand-orange:     #E05A20;
  --brand-orange-mid: #E8693A;
  --brand-orange-bg:  rgba(193, 68, 14, 0.12);

  /* ── Brand shell on dark — accent brightens for contrast ─────────
  */
  --brand-accent:  #4A9E6A;
  --brand-hover:   #3D8A5A;
  --brand-surface: #0E2018;
  --brand-text:    #4A9E6A;
  --meg-accent:    #4A9E6A;
  --accent:        #4A9E6A;
  --hover-green:   #3D8A5A;

  /* ── Semantic colours on dark — brighter for contrast ────────────
  */
  --colour-danger:    #E8453A;
  --colour-danger-bg: rgba(192, 57, 43, 0.15);
  --colour-live:      #2ECC71;
  --colour-live-dot:  #2ECC71;
  --colour-amber:     #F5A623;
  --colour-amber-bg:  rgba(245, 166, 35, 0.12);
  --colour-amber-cta: #E8A000;
  --amber:            var(--colour-amber);
  --red-card:         var(--colour-danger);

  /* ── Tinted surfaces on dark — deep washes, not pastel ───────────
  */
  --surface-success:       rgba(46, 204, 113, 0.10);
  --surface-success-muted: rgba(46, 204, 113, 0.06);
  --surface-danger:        rgba(232, 69, 58, 0.12);
  --surface-danger-muted:  rgba(232, 69, 58, 0.08);
  --surface-amber:         rgba(245, 166, 35, 0.10);
  --surface-amber-muted:   rgba(245, 166, 35, 0.06);
  --surface-blue:          rgba(29, 78, 216, 0.10);
  --surface-blue-muted:    rgba(29, 78, 216, 0.06);
  --surface-indigo:        rgba(79, 70, 229, 0.10);
  --surface-indigo-muted:  rgba(79, 70, 229, 0.06);
  --surface-highlight:     rgba(245, 166, 35, 0.15);

  /* ── Wall difficulty group colours on dark ───────────────────────
  */
  --wall-diff-2: rgba(46, 204, 113, 0.15);    /* deep green wash */
  --wall-diff-3: rgba(29, 78, 216, 0.15);     /* deep blue wash */
  --wall-diff-4: rgba(168, 85, 247, 0.15);    /* deep purple wash */

  /* ── Tinted borders on dark ─────────────────────────────────────
  */
  --border-success: rgba(46, 204, 113, 0.25);
  --border-danger:  rgba(232, 69, 58, 0.25);
  --border-danger-strong: rgba(232, 69, 58, 0.45);
  --border-amber:   rgba(245, 166, 35, 0.25);

  /* ── Borders on dark — light on dark ─────────────────────────────
  */
  --border-subtle:  rgba(240, 237, 232, 0.06);
  --border-default: rgba(240, 237, 232, 0.10);
  --border-strong:  rgba(240, 237, 232, 0.20);
  --border: rgba(240, 237, 232, 0.10);

  /* ── Shadows on dark — deeper and more present ───────────────────
  */
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.30);
  --shadow-md:        0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg:        0 8px 28px rgba(0,0,0,0.55);
  --shadow-editorial: 0 4px 24px rgba(0,0,0,0.60);
}

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

html, body {
  height: 100%;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;          /* prevent iOS from scrolling the page itself */
  overflow-x: hidden;        /* belt-and-suspenders: block horizontal scroll */
  font-family: var(--font-sans);
  background: var(--surface-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font-family: inherit; }
ul { list-style: none; }

/* ── Utility ────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   CANONICAL COMPONENT SYSTEM — Sprint 3
   These are the source-of-truth definitions. All ad-hoc components
   should converge toward these values. Never override with hardcoded
   colours — use the tokens or extend a variant.
   ═══════════════════════════════════════════════════════════════ */

/* ── Button base ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm, 8px);
  font-family: var(--font-sans);
  font-size: var(--text-sm, 13px);
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
  border: none;
  user-select: none;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: var(--disabled-opacity, 0.35); cursor: default; pointer-events: none; }

/* Primary — forest green fill */
.btn-primary {
  background: var(--brand, #2D5A3D);
  color: var(--text-on-brand, #F7F5F0);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-hover, #1E5234); }

/* Secondary — outlined */
.btn-secondary {
  background: transparent;
  color: var(--text-primary, #1A1814);
  border: 1.5px solid var(--border-default, rgba(26,24,20,0.12));
}
.btn-secondary:hover:not(:disabled) { border-color: var(--text-primary); background: var(--surface-hover); }

/* Ghost — borderless, subtle hover */
.btn-ghost {
  background: transparent;
  color: var(--text-muted, #6B6760);
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); }

/* Danger — red fill */
.btn-danger {
  background: var(--colour-danger, var(--colour-danger));
  color: var(--text-on-brand, #F7F5F0);
}
.btn-danger:hover:not(:disabled) { opacity: 0.88; }

/* Icon — square, no padding */
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-sm, 8px);
}

/* ── Canonical input ──────────────────────────────────────────── */
.input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border-default, rgba(26,24,20,0.12));
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-float, #FFFFFF);
  font-family: var(--font-sans);
  font-size: var(--text-sm, 13px);
  color: var(--text-primary, #1A1814);
  outline: none;
  transition: border-color var(--transition-fast);
}
.input:focus { border-color: var(--brand, #2D5A3D); }
.input::placeholder { color: var(--text-faint, #9B9890); }
.input:disabled { background: var(--surface-sink); color: var(--text-faint); cursor: not-allowed; }

/* ── Canonical badge ──────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  flex-shrink: 0;
}
.badge-brand,
.badge-unread   { background: var(--brand-accent, #246342); color: var(--text-on-brand, #F7F5F0); }
.badge-amber    { background: var(--colour-amber-cta, #C87800); color: var(--text-on-brand, #F7F5F0); }
.badge-danger   { background: var(--colour-danger, var(--colour-danger)); color: var(--text-on-brand, #F7F5F0); }
.badge-live     { background: var(--colour-live, #27AE60); color: var(--text-on-brand, #F7F5F0); }

/* ── Shared input foundation — all text inputs converge here ──── */
/* Overrides the stragglers (background:white, focus:white) without
   touching per-component padding/height/layout rules.              */
.chat-input, .thread-input, .rr-input, .modal-input,
.auth-input, .member-invite-input, .ts-drawer-manual-input,
.av-thread-input input {
  background: var(--surface-float, #FFFFFF);
  color: var(--text-primary, #1A1814);
  border-color: var(--border-default, rgba(26,24,20,0.12));
  outline: none;
}
.chat-input:focus, .thread-input:focus, .rr-input:focus, .modal-input:focus,
.auth-input:focus, .member-invite-input:focus, .ts-drawer-manual-input:focus,
.av-thread-input input:focus {
  border-color: var(--brand, #2D5A3D);
  background: var(--surface-float, #FFFFFF);
}
.chat-input::placeholder, .thread-input::placeholder, .rr-input::placeholder,
.modal-input::placeholder, .auth-input::placeholder,
.member-invite-input::placeholder {
  color: var(--text-faint, #9B9890);
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING
   ═══════════════════════════════════════════════════════════════ */
.onboarding {
  position: fixed;
  inset: 0;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
}








/* ═══════════════════════════════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════════════════════════════ */
.app {
  display: flex;
  height: var(--visual-vh, 100dvh);
  overflow: hidden;
}

/* ─── Sidebar ───────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--meg-green);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-brand {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.brand-platform {
  display: flex;
  align-items: center;
  gap: 7px;
}

.brand-icon { font-size: 16px; }

.brand-name {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--brand-orange);
  font-weight: 400;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

/* .brand-meg-label removed — no longer needed */

/* ── Sidebar tab navigation ──────────────────────────────────────── */
.sidebar-tabs {
  display: flex;
  padding: 6px 8px;
  gap: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 4px;
  color: rgba(255,255,255,0.4);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s, transform 0.1s;
}
.tab-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65); }
.tab-btn:active { transform: scale(0.97); }
.tab-btn.active { background: rgba(255,255,255,0.13); color: var(--white); }

/* ── Tab content panels ──────────────────────────────────────────── */
.tab-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tab-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  font-family: var(--font-sans);
}

.tab-placeholder-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.5px;
}

.sidebar-nav {
  padding: 10px 0;
}

.nav-section { padding: 4px 0; }


.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 16px;
  color: rgba(255,255,255,0.7);
  font-size: 13.5px;
  font-weight: 400;
  border-radius: 0;
  transition: background 0.1s, color 0.1s;
  text-align: left;
  position: relative;
}
.nav-item:hover { background: rgba(255,255,255,0.08); color: var(--white); }
.nav-item.active {
  background: rgba(255,255,255,0.14);
  color: var(--white);
  font-weight: 500;
}

.nav-icon { font-size: 14px; flex-shrink: 0; opacity: 0.8; }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-create {
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
  padding-top: 10px;
}
.nav-create:hover { color: rgba(255,255,255,0.7); background: none; }

.rooms-list { padding: 0; }

.room-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.room-item:hover { background: rgba(255,255,255,0.07); color: var(--white); }
.room-item.active { background: rgba(255,255,255,0.12); color: var(--white); }
.room-item.room-has-unread { color: var(--white); font-weight: 700; }
.room-icon { font-size: 12px; opacity: 0.5; display: inline-flex; align-items: center; }

/* ── Collapsible sidebar sections ─────────────────────────────────────────── */
.nav-collapsible { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 2px; }

.nav-section-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 16px 6px;
  color: rgba(255,255,255,0.4);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}
.nav-section-toggle:hover { color: rgba(255,255,255,0.7); }

.collapse-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  opacity: 0.6;
}
.nav-section-toggle[aria-expanded="false"] .collapse-chevron {
  transform: rotate(-90deg);
}

.section-toggle-label { flex: 1; }

.section-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--meg-accent);
  color: var(--text-on-brand, #F7F5F0);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section-content.section-collapsed { display: none; }

/* ── Sidebar Inbox ────────────────────────────────────────────────────────── */
.nav-inbox-section {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 8px 0 4px;
}
.inbox-heading {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding: 0 16px 4px;
}
.inbox-list { padding: 0; }
.inbox-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 0.1s;
  border-radius: 0;
}
.inbox-item:hover { background: rgba(255,255,255,0.07); }
.inbox-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Connection request / accepted inbox items */
.inbox-item--connection,
.inbox-item--accepted {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 16px;
}
.inbox-item-who {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.inbox-item-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.inbox-item--connection .inbox-item-label { color: var(--meg-accent); }
.inbox-item--accepted .inbox-item-label   { color: #6bc77a; }

.inbox-item-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--meg-accent);
  color: var(--text-on-brand, #F7F5F0);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 8px;
}
.inbox-empty {
  padding: 4px 16px 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.2);
  font-style: italic;
}

/* ── Inbox game invite items ─────────────────────────────────────────────
   Game invites appear above message unreads in the sidebar inbox.
   Extends .inbox-item base pattern with icon + badge slots.
   Spec: docs/game-notification-plan.html § Component C
   ──────────────────────────────────────────────────────────────────────── */
.inbox-item--game {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.1s;
}
.inbox-item--game:hover { background: rgba(255,255,255,0.07); }

/* Game icon — 28×28 rounded square */
.inbox-game-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.1);
}
.inbox-item--live .inbox-game-icon {
  background: rgba(245, 166, 35, 0.18);
}

/* Text body */
.inbox-game-body {
  flex: 1;
  min-width: 0;
}
.inbox-game-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-game-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* Status badge — right-aligned pill */
.inbox-game-badge {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 2px 7px;
  border-radius: 8px;
  flex-shrink: 0;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.inbox-game-badge--new {
  background: rgba(46, 204, 113, 0.18);
  color: #6bc77a;
}
.inbox-game-badge--live {
  background: rgba(245, 166, 35, 0.2);
  color: #F5A623;
}
.inbox-game-badge--deadline {
  background: rgba(192, 57, 43, 0.18);
  color: #e57373;
}

/* Slide-in animation when new invite arrives */
.inbox-item--game.inbox-game-enter {
  animation: inboxGameSlideIn 0.25s ease-out;
}
@keyframes inboxGameSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Meg avatar in Messages section ──────────────────────────────────────── */
.meg-dms-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: url('/avatars/meg.png') center/cover, var(--meg-green);
}
.meg-dms-item { cursor: pointer; }
.meg-dms-item .dms-item-preview { opacity: 0.55; }

/* Top/bottom section spacers */
.nav-section-top { padding-bottom: 2px; }
.nav-section-bottom { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 4px; }

.room-unread-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent, #4A7C59);
  color: var(--text-on-brand, #F7F5F0);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.sidebar-user {
  min-height: var(--input-h);
  padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.sidebar-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.sidebar-avatar {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  transition: opacity 0.15s;
}
.sidebar-avatar:hover { opacity: 0.8; }
.sidebar-avatar-wrap .user-presence-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
}

.user-info { flex: 1; min-width: 0; }

.user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.user-club {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── Main area (wraps main panel + thread + member panels) ────── */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-width: 0;
}

/* ─── Main panel ────────────────────────────────────────────────── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-base);
  min-width: 0;
}

/* ─── Header ────────────────────────────────────────────────────── */
.chat-header {
  height: var(--header-h);
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 16px 0 20px;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}

/* Burger — mobile only */
.burger-btn {
  display: none;
  position: relative;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 6px;
  color: var(--ink-muted);
  transition: background 0.1s, color 0.1s, transform 0.1s;
}
.burger-btn:hover { background: var(--border); color: var(--ink); }
.burger-btn:active { transform: scale(0.95); }

/* Burger badge — red dot for pending game invites
   Spec: docs/game-notification-plan.html § Component B */
.burger-badge {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--colour-danger);
  border: 1.5px solid var(--surface-raised);
  pointer-events: none;
}
.burger-badge--pulse {
  animation: burgerBadgePulse 2s ease-in-out 3;
}
@keyframes burgerBadgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}
[data-theme="dark"] .burger-badge {
  border-color: var(--surface-raised);
}

/* ── Standard header layout ─────────────────────────────────────────
   Every header-view uses the same skeleton:
     .header-view
       .header-left   (title area — stacks title + subtitle, or inline items)
       .header-right   (optional action buttons)
   ──────────────────────────────────────────────────────────────────── */
.header-view {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

/* Quit game button — shown in Meg header during active games */
.meg-quit-game-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid var(--red-card, #d44);
  background: transparent;
  color: var(--red-card, #d44);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.meg-quit-game-btn:hover {
  background: var(--red-card, #d44);
  color: #fff;
}

/* Simple views (Feed, Hot Takes, Activity, Meg, Profile) stack title + subtitle.
   Uses .header-left--stack modifier for vertical layout. */
.header-left--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.header-left--stack .header-title,
.header-left--stack .header-sub {
  display: block;
  width: 100%;
}

.header-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.header-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.3px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: 4px;
}

/* Room header — now uses standard .header-title / .header-sub via --stack.
   Legacy classes hidden for any leftover references. */
.header-room-hash,
.header-room-divider { display: none; }

/* Action buttons (shared across all views that use them) */
.header-icon-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 6px;
  color: var(--ink-muted);
  transition: background 0.1s, color 0.1s, transform 0.1s;
  font-size: 16px;
  letter-spacing: 1px;
}
.header-icon-btn:hover { background: var(--border); color: var(--ink); }
.header-icon-btn:active { transform: scale(0.97); }

/* Sidebar overlay — mobile only */
.sidebar-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 150; /* above input-bar (100), below sidebar (200) */
}
.sidebar-overlay.visible { display: block; }

/* ─── Feed ──────────────────────────────────────────────────────── */
.feed {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  scroll-behavior: smooth;
  max-width: 100%;
}

.feed::-webkit-scrollbar { width: 4px; }
.feed::-webkit-scrollbar-track { background: transparent; }
.feed::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════
   MSG-BLOCK — Unified Slack-style message layout
   ═══════════════════════════════════════════════════════════════ */

.msg-block {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  align-items: flex-start;
  flex-shrink: 0;
  position: relative;
}
.msg-block:hover .msg-actions { opacity: 1; pointer-events: auto; }

/* Avatar — 32px rounded square */
.msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--border);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.msg-avatar.meg-avatar {
  background: var(--meg-green);
  background-size: cover;
  background-position: center;
}
.msg-avatar.chip-avatar {
  background: #E6A817;
  background-size: cover;
  background-position: center;
}
.msg-avatar.fergie-avatar {
  background: #1a1a1a;
  background-size: cover;
  background-position: center;
}

/* Body */
.msg-body { flex: 1; min-width: 0; }

/* Meta row — name + status emoji + timestamp */
.msg-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}
.msg-sender {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.msg-sender.meg-sender { color: var(--meg-green); }
.msg-sender.chip-sender { color: #996600; }
.msg-sender-clickable { cursor: pointer; }
.msg-sender-clickable:hover { text-decoration: underline; text-underline-offset: 2px; }
.msg-status-emoji { font-size: 12px; line-height: 1; }
.msg-timestamp {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
}

/* Message text */
.msg-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.msg-block.msg-meg .msg-text { color: var(--meg-green); }
.msg-text strong { font-weight: 600; }
.msg-text em { font-style: italic; }

/* ═══════════════════════════════════════════════════════════════
   BUBBLE MODE — WhatsApp-style for private rooms <20 members
   ═══════════════════════════════════════════════════════════════ */

.feed-bubble-mode { padding: 8px 12px; }

/* All bubbles: rounded background, constrained width */
.msg-bubble {
  max-width: 85%;
  padding: 0;
}
.msg-bubble .msg-body {
  background: var(--surface-float);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.msg-bubble .msg-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.msg-bubble .msg-meta {
  margin-bottom: 3px;
}
.msg-bubble .msg-timestamp {
  font-size: 9px;
}

/* Own messages: right-aligned, green background, no avatar */
.msg-bubble.msg-own {
  flex-direction: row-reverse;
  align-self: flex-end;
  margin-left: auto;
}
.msg-bubble.msg-own .msg-avatar {
  display: none;
}
.msg-bubble.msg-own .msg-body {
  background: var(--meg-green, #2D5A3D);
  border-radius: 12px;
}
.msg-bubble.msg-own .msg-text {
  color: var(--text-on-brand, #F7F5F0);
}
.msg-bubble.msg-own .msg-sender {
  display: none;
}
.msg-bubble.msg-own .msg-meta {
  justify-content: flex-end;
}
.msg-bubble.msg-own .msg-timestamp {
  color: rgba(255,255,255,0.55);
}

/* Other people's bubbles: left-aligned, white background, dark text */
.msg-bubble:not(.msg-own) {
  align-self: flex-start;
  margin-right: auto;
}
.msg-bubble:not(.msg-own) .msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 10px;
}
.msg-bubble:not(.msg-own) .msg-sender {
  color: var(--ink-muted);
  font-size: 12px;
}

/* Meg/Chip keep their colours inside bubbles */
.msg-bubble.msg-meg .msg-body {
  background: rgba(45,90,61,0.08);
}
.msg-bubble.msg-meg .msg-text { color: var(--meg-green); }
.msg-bubble.msg-chip .msg-body {
  background: rgba(230,168,23,0.08);
}

/* Hover actions: reposition for bubble layout */
.msg-bubble .msg-actions {
  top: -8px;
}
.msg-bubble.msg-own .msg-actions {
  right: auto;
  left: 0;
}

/* Reactions inside bubbles */
.msg-bubble .msg-reactions {
  margin-top: 4px;
}

/* Feed container in bubble mode: flex column for alignment */
.feed-bubble-mode {
  display: flex;
  flex-direction: column;
}
/* Date separators span full width in bubble mode */
.feed-bubble-mode .date-separator {
  align-self: center;
  width: auto;
}
/* Game tiles and special cards span full width */
.feed-bubble-mode .game-tile,
.feed-bubble-mode .draft-tile,
.feed-bubble-mode .chip-broadcast-card,
.feed-bubble-mode .back-page-tile,
.feed-bubble-mode .press-room-tile,
.feed-bubble-mode .room-photo-card,
.feed-bubble-mode .boardroom-post,
.feed-bubble-mode .platform-feed-tile {
  align-self: stretch;
  max-width: 100%;
}

/* Reactions row — only rendered when reactions exist */
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
/* Ghost "add reaction" button at end of pills */
.reaction-add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  background: transparent;
  font-size: var(--text-sm);
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.12s, border-color 0.12s, transform 0.1s;
}
.reaction-add-btn:hover { opacity: 1; border-style: solid; border-color: var(--ink-faint); }
.reaction-add-btn:active { transform: scale(0.95); }
.reaction-add-btn sup { font-size: 8px; color: var(--ink-muted); }

/* Who-reacted popover */
.who-reacted-pop {
  position: fixed;
  z-index: 9999;
  background: var(--surface-raised, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 200px;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  animation: fadeIn 0.1s ease;
}
.who-reacted-emoji { font-size: 14px; flex-shrink: 0; }
.who-reacted-names { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Thread indicator */
.msg-thread-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
  transition: background 0.12s;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.msg-thread-indicator:hover { background: var(--paper); }
.msg-thread-avatars {
  display: flex;
}
.msg-thread-avatars .thread-replier-avatar {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-size: 8px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -4px;
  border: 2px solid var(--white);
  background: var(--border);
  color: var(--ink-muted);
}
.msg-thread-avatars .thread-replier-avatar:first-child { margin-left: 0; }
.msg-thread-avatars .thread-replier-avatar.meg-avatar {
  background: url('/avatars/meg.png') center/cover, var(--meg-green);
}
.msg-thread-avatars .thread-replier-more {
  background: var(--ink-faint);
  color: white;
  font-size: 7px;
}
.msg-thread-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--meg-accent);
}
.msg-thread-last {
  font-size: 11px;
  color: var(--ink-faint);
}

/* Hover action bar — top-right */
.msg-actions {
  position: absolute;
  top: -4px;
  right: 0;
  display: flex;
  gap: 2px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  box-shadow: var(--shadow-sm);
  z-index: 10;
}
/* Swipe-to-reply icon (appears at left edge during right swipe) */
.swipe-reply-icon {
  position: fixed;
  left: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.1s, transform 0.1s;
  color: var(--burnt-orange, #C8552D);
}

/* ── Inline quote reply ────────────────────────────────────────── */

/* Preview bar above input */
.quote-reply-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-sink);
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px 8px 0 0;
  margin: 0 8px;
  min-height: 36px;
}
.quote-reply-bar {
  width: 3px;
  align-self: stretch;
  background: var(--burnt-orange, #C8552D);
  border-radius: 2px;
  flex-shrink: 0;
}
.quote-reply-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.quote-reply-sender {
  font-size: 12px;
  font-weight: 600;
  color: var(--burnt-orange, #C8552D);
}
.quote-reply-text {
  font-size: 12px;
  color: var(--text-secondary, #3D3A33);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quote-reply-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.quote-reply-close:hover { background: var(--surface-hover); }

/* Inline quote bubble inside a message */
.msg-quote-bubble {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  margin: 4px 0;
  background: var(--surface-sink, #E6E3DB);
  border-left: 3px solid var(--burnt-orange, #C8552D);
  border-radius: 4px;
  max-width: 100%;
  overflow: hidden;
}
.msg-quote-sender {
  font-size: 11px;
  font-weight: 600;
  color: var(--burnt-orange, #C8552D);
  white-space: nowrap;
}
.msg-quote-text {
  font-size: 11px;
  color: var(--text-secondary, #3D3A33);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-quote-bubble:hover {
  background: var(--surface-hover, rgba(26,24,20,0.04));
}

/* Scroll-to highlight flash */
@keyframes msgHighlight {
  0%   { background: rgba(200, 85, 45, 0.15); }
  100% { background: transparent; }
}
.msg-highlight {
  animation: msgHighlight 1.5s ease-out;
}

.msg-action-btn {
  font-size: 14px;
  padding: 2px 5px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--ink-muted);
  background: none;
  border: none;
  transition: background 0.1s, color 0.1s, transform 0.1s;
}
.msg-action-btn:hover { background: var(--paper); color: var(--ink); }
.msg-action-btn:active { transform: scale(0.95); }

/* Gap between consecutive same-sender messages */

/* Fade-in animation */
.msg-new { animation: msgIn 0.2s ease forwards; }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Autocomplete dropdown ────────────────────────────────── */
.autocomplete-dropdown {
  position: fixed;
  z-index: 1000;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  max-height: 204px;
  overflow-y: auto;
  min-width: 200px;
  padding: 4px 0;
  scrollbar-width: thin;
}
.autocomplete-dropdown.hidden { display: none; }
.autocomplete-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; cursor: pointer; font-size: 14px;
}
.autocomplete-item:hover, .autocomplete-item.active {
  background: var(--surface-success);
}
.autocomplete-item .ac-avatar {
  width: 22px; height: 22px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.autocomplete-item .ac-name { color: var(--ink); }
.autocomplete-item .ac-emoji { font-size: 18px; line-height: 1; }
.autocomplete-item .ac-code { color: var(--ink-muted); font-size: 12px; margin-left: 4px; }

/* ─── @mention pill ───────────────────────────────────────── */
.mention {
  background: var(--surface-blue); color: var(--blue-pick);
  border-radius: 3px; padding: 1px 3px;
  font-weight: 500;
}

/* Legacy .message-group alias for Meg game tiles */

/* ─── Thinking indicator ─────────────────────────────────────── */
.thinking {
  padding: 6px 24px 2px;
  display: flex;
  align-items: center;
  gap: 10px;
}


.thinking-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.thinking-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--meg-green);
  opacity: 0.3;
  animation: dot-pulse 1.4s infinite ease-in-out;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
  40%            { opacity: 1;   transform: scale(1.2); }
}

/* ─── Input bar ──────────────────────────────────────────────── */
.input-bar {
  position: relative;
  z-index: var(--z-modal);
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--input-h);
  padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--white);
  overflow: visible;
}
/* Quote preview takes full row above input controls */
.input-bar > .quote-reply-preview {
  flex-basis: 100%;
  margin: 0 0 4px 0;
}

.play-btn {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 16px;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--ink);
  opacity: 0.8;
  transition: border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.1s;
}
.play-btn:hover {
  border-color: var(--meg-green);
  color: var(--meg-green);
  opacity: 1;
}
.play-btn:active { transform: scale(0.97); }

/* ── Camera button (photo upload in private rooms) ─────────────── */
.camera-btn {
  flex-shrink: 0;
  width: 36px; height: 36px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s, transform 0.1s;
}
.camera-btn:hover { border-color: var(--meg-green); color: var(--meg-green); }
.camera-btn:active { transform: scale(0.97); }

.chat-input {
  flex: 1;
  min-height: 36px;
  max-height: 120px;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 14px;
  color: var(--ink);
  resize: none;
  outline: none;
  line-height: 1.5;
  transition: border-color 0.15s;
  overflow-y: auto;
}
.chat-input:focus { border-color: var(--meg-green); }
.chat-input::placeholder { color: var(--ink-faint); }
.chat-input:disabled {
  background: var(--paper);
  color: var(--ink-faint);
  cursor: not-allowed;
}

.send-btn {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--meg-green);
  color: var(--text-on-brand, #F7F5F0);
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
}
.send-btn:hover { background: var(--hover-green); }
.send-btn:active { transform: scale(0.97); }
.send-btn:disabled { opacity: var(--disabled-opacity); cursor: default; }

/* ═══════════════════════════════════════════════════════════════
   GAME BLOCKS — Base container for all game sections
   ═══════════════════════════════════════════════════════════════ */
.game-block {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 10px 0;
  width: 100%;
  max-width: 600px;
  flex-shrink: 0;
  animation: msgIn 0.2s ease;
}

.game-block-title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}

.game-block-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* ─── Match picker ───────────────────────────────────────────── */

.match-tile.selected { border-color: var(--meg-green); background: var(--brand-surface, #f0f8f3); }



/* ─── Match reveal — archive spin ───────────────────────────── */
.reveal-match-title {
  font-family: var(--font-serif);
  font-size: 21px;
  color: var(--ink);
  margin-bottom: 3px;
  line-height: 1.2;
}

.reveal-match-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.reveal-match-blurb {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.45;
  margin-bottom: 14px;
}

.reveal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reveal-spin-btn {
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.12s, background 0.12s;
  font-family: var(--font-sans);
}
.reveal-spin-btn:hover    { border-color: var(--ink); background: var(--white); }
.reveal-spin-btn:disabled { opacity: 0.4; cursor: default; }

.reveal-timer-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ─── Coin toss ──────────────────────────────────────────────── */
.coin-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.coin-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.1s;
}
.coin-btn:hover { border-color: var(--ink); background: var(--white); }
.coin-btn:active { transform: scale(0.97); }
.coin-btn.selected { border-color: var(--meg-green); background: var(--brand-surface, #f0f8f3); }
.coin-btn:disabled { opacity: 0.5; cursor: default; }

.coin-icon { font-size: 26px; }

.coin-btn-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
}

.coin-result-line {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.coin-result-line .win  { color: var(--meg-green); font-weight: 600; }
.coin-result-line .lose { color: var(--red-card); }

/* ═══════════════════════════════════════════════════════════════
   DRAFT BOARD — Persistent dual-XI display
   ═══════════════════════════════════════════════════════════════ */
.draft-board {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius);
  margin: 10px 0;
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  flex-shrink: 0;
  animation: msgIn 0.2s ease;
}

.draft-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px 11px;
  border-bottom: 1px solid var(--border);
}

.draft-board-title {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink);
  font-weight: 400;
}

.draft-board-progress {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.5px;
}

/* Dual XI columns */
.draft-xis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
}

.draft-xi { padding: 11px 13px; }
.draft-xi:first-child { border-right: 1px solid var(--border); }

.xi-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.draft-xi.yours  .xi-label { color: var(--blue-pick); }
.draft-xi.theirs .xi-label { color: var(--red-card); }

.xi-slots { display: flex; flex-direction: column; gap: 2px; }

.xi-slot {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  border-radius: 4px;
  min-height: 24px;
  transition: background 0.15s;
}

.xi-slot.filled {
  background: var(--paper);
  animation: slotFill 0.25s ease;
}

@keyframes slotFill {
  from { opacity: 0; transform: translateX(-3px); }
  to   { opacity: 1; transform: translateX(0); }
}

.slot-pos {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  width: 22px;
  flex-shrink: 0;
}

.slot-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.xi-slot.empty .slot-name {
  font-size: 10px;
  color: var(--ink-faint);
  font-weight: 400;
}


.slot-captain {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--amber);
  font-weight: 600;
  flex-shrink: 0;
}

/* ─── Draft Pick Area ─────────────────────────────────────────── */

.draft-pick-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.draft-pick-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
}
.draft-pick-label.sabotage { color: var(--red-card); }

.draft-pick-sublabel {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
}

.draft-turn-label {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-bottom: 9px;
  font-style: italic;
}

/* Player tap cards in pick area */

.draft-player-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 7px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  text-align: left;
  gap: 1px;
  width: 100%;
}
.draft-player-btn:hover          { border-color: var(--ink); background: var(--white); }
.draft-player-btn.selected       { border-color: var(--meg-green); background: var(--brand-surface, #f0f8f3); }
.draft-player-btn:disabled:not(.draft-picked) { opacity: var(--disabled-opacity); cursor: default; }
.draft-player-btn.draft-picked   { opacity: var(--disabled-opacity); cursor: default; background: var(--border); border-color: transparent; pointer-events: none; position: relative; }
.draft-player-btn.draft-picked .dp-name { text-decoration: line-through; color: var(--ink-muted); }
.dp-taken { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-muted); }
.draft-player-btn.sabotage-pick  { border-color: #f5c6c0; }
.draft-player-btn.sabotage-pick:hover { border-color: var(--red-card); background: var(--colour-danger-bg, #fff5f5); }

.dp-name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  width: 100%;
}

.dp-meta {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--ink-muted);
  letter-spacing: 0.2px;
}


/* Board frozen once draft ends */
.draft-board.frozen .draft-pick-area { display: none; }
.draft-board.frozen { border-left-color: var(--meg-green); }

/* ─── Draft Pick Overlay — full content area during picking ─── */
.draft-pick-overlay {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: var(--white);
  min-height: 0;
}
.draft-pick-overlay.hidden { display: none; }

/* Board section — XI grids, scrollable if needed */
.overlay-board {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.overlay-board-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--border);
}
/* Compact XI slots inside overlay board */
.overlay-board .xi-slot    { min-height: 20px; padding: 2px 4px; }
.overlay-board .slot-name  { font-size: 10px; }

/* Pick section — pinned at bottom, flex column */
.overlay-pick {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--ink);
  max-height: 46vh;
  min-height: 0;
}
.overlay-pick-header {
  flex-shrink: 0;
  padding: 10px 16px 6px;
}
/* Player tiles — scrollable in the middle */
.overlay-pick-players {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 6px;
  min-height: 0;
}
/* Timer — always visible at very bottom */
.overlay-pick-timer {
  flex-shrink: 0;
  padding: 6px 16px 12px;
  border-top: 1px solid var(--border);
}

/* Team group headers inside overlay */
.draft-team-group { margin-bottom: 10px; }

.draft-team-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 5px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
}

.draft-team-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

/* Captain pick — score badge */

/* Meg auto-picking indicator */
.draft-meg-thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 2px;
  color: var(--ink-muted);
  font-size: 11.5px;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   CAPTAIN PICK
   ═══════════════════════════════════════════════════════════════ */
.captain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.captain-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  position: relative;
  gap: 1px;
}
.captain-tile:hover { border-color: var(--ink); background: var(--white); }
.captain-tile:disabled { opacity: 0.4; cursor: default; }
.captain-tile.selected {
  border-color: var(--amber);
  background: var(--surface-amber);
}
.captain-tile.selected::after {
  content: 'C';
  position: absolute;
  top: 4px; right: 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--amber);
}

.captain-tile-pos {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--ink-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.captain-tile-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  width: 100%;
}


.dice-btn {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
  font-family: var(--font-sans);
}
.dice-btn:hover { border-color: var(--ink); color: var(--ink); }
.dice-btn.selected { border-color: var(--amber); border-style: solid; color: var(--amber); }

.captain-confirm {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background 0.15s, opacity 0.15s;
  cursor: pointer;
}
.captain-confirm:hover { background: var(--surface-sink); }
.captain-confirm:disabled { opacity: var(--disabled-opacity); cursor: default; }

/* ═══════════════════════════════════════════════════════════════
   PREDICTIONS
   ═══════════════════════════════════════════════════════════════ */
.pred-question {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.35;
}

.pred-scoring-hint {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-muted);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  text-align: center;
}


.pred-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.pred-btn {
  padding: 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.12s, background 0.12s;
}
.pred-btn:hover   { border-color: var(--ink); background: var(--white); }
.pred-btn.selected{ border-color: var(--ink); background: var(--ink); color: var(--white); }
.pred-btn.correct { border-color: var(--meg-green); background: var(--brand-surface, #f0f8f3); color: var(--meg-green); }
.pred-btn.wrong   { border-color: var(--red-card); background: var(--colour-danger-bg, #fff5f5); color: var(--red-card); }
.pred-btn:disabled{ opacity: 0.4; cursor: default; }
.pred-btn.locked-in {
  opacity: 1;
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
  transform: scale(1.03);
  transition: transform 0.15s ease, background 0.15s ease;
}
.pred-btn.pred-hidden {
  opacity: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.2s ease, padding 0.2s ease;
}
.pred-pass-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.pred-pass-btn:hover { border-color: var(--ink); color: var(--ink); }
.pred-locked {
  grid-template-columns: 1fr;
  gap: 0;
}

/* ── DM Draft Pick Cards ─────────────────────────────────────── */

/* Pick pool grid */
.draft-pick-pool {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

.draft-pick-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.1s;
  text-align: left;
}
.draft-pick-chip:hover {
  border-color: var(--ink);
  background: var(--white);
  transform: translateY(-1px);
}
.draft-pick-chip:disabled { cursor: default; transform: none; }
.draft-pick-chip.draft-pick-chosen {
  border-color: var(--meg-green);
  background: var(--brand-surface, #f0f8f3);
  transform: scale(1.03);
}
.draft-pick-chip.sabotage {
  border-color: var(--red-card, #d44);
}
.draft-pick-chip.sabotage:hover {
  border-color: var(--red-card, #d44);
  background: var(--colour-danger-bg, #fff5f5);
}
.draft-pick-chip.sabotage.draft-pick-chosen {
  background: var(--colour-danger-bg, #fff5f5);
  border-color: var(--red-card, #d44);
}

.draft-pick-chip-pos {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.5px;
}
.draft-pick-chip-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.draft-pick-chip-team {
  font-size: 11px;
  color: var(--muted);
}

/* Dice / Random button */
.draft-pick-dice {
  grid-column: 1 / -1;
  align-items: center;
  text-align: center;
  border-style: dashed;
  opacity: 0.7;
}
.draft-pick-dice:hover { opacity: 1; }
.draft-pick-dice.draft-pick-chosen { opacity: 1; border-style: solid; }

.draft-pick-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
}
.draft-pick-timer-secs {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  min-width: 60px;
  text-align: right;
}

/* Pick made confirmation */
.draft-pick-made-wrap {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--meg-green);
  background: var(--brand-surface, #f0f8f3);
}
.draft-pick-made-wrap.opp-pick {
  border-left-color: var(--muted);
  background: var(--paper);
}
.draft-pick-made-wrap.sabotage {
  border-left-color: var(--red-card, #d44);
  background: var(--colour-danger-bg, #fff5f5);
}
.draft-pick-made-who {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 2px;
}
.draft-pick-made-player {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.draft-pick-made-pos {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}
.draft-pick-made-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.draft-pick-made-team {
  font-size: 11px;
  color: var(--muted);
}
.draft-pick-made-note {
  font-size: 11px;
  color: var(--red-card, #d44);
  margin-top: 4px;
}

/* Auto-pick */
.draft-auto-pick-wrap {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border);
  background: var(--paper);
}
.draft-auto-label {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  margin-top: 2px;
}

/* Sabotage phase eyebrow */
.draft-sabotage-eyebrow {
  color: var(--red-card, #d44) !important;
}
.draft-sabotage-title {
  font-size: 15px;
  color: var(--red-card, #d44);
}

/* Waiting spinner — reuses the match-picker spinner */
.draft-waiting-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   H2H DRAFT BOARD — Unified view: both players see the SAME screen.
   Mirrors the Meg experience with persistent board + pick area.
   ══════════════════════════════════════════════════════════════════════════ */

.h2h-draft-board {
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--paper);
  padding: 10px;
  margin-bottom: 8px;
  animation: msgIn 0.2s ease;
}
.h2h-draft-board.h2h-board-frozen {
  border-left-color: var(--meg-green);
}

.h2h-board-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.h2h-board-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink);
}
.h2h-board-progress {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.5px;
}

/* ── XI columns (side by side) ── */
.h2h-xis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.h2h-xi-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-bottom: 4px;
}
.h2h-xi-label.yours {
  color: var(--meg-green);
}
.h2h-xi-slots {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── XI slot ── */
.h2h-slot {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 1px 4px;
  border-radius: 3px;
}
.h2h-slot.filled {
  animation: slotFill 0.25s ease;
}
.h2h-slot.h2h-slot-new {
  background: var(--brand-surface, #f0f8f3);
}
.h2h-slot-pos {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  width: 22px;
  flex-shrink: 0;
}
.h2h-slot-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.h2h-slot-name.empty {
  color: var(--border);
}

/* ── Pick area ── */
.h2h-pick-area {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.h2h-pick-area.h2h-pick-frozen {
  opacity: 0.5;
  pointer-events: none;
}

.h2h-pick-header {
  margin-bottom: 8px;
}
.h2h-pick-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink);
}
.h2h-pick-label.sabotage {
  color: var(--red-card, #d44);
}
.h2h-pick-turn {
  font-size: 13px;
  font-weight: 600;
  margin: 4px 0;
  color: var(--ink);
}
.h2h-pick-turn.opp-turn {
  color: var(--muted);
  font-style: italic;
}
.h2h-pick-timer {
  margin-top: 4px;
  margin-bottom: 8px;
}

/* ── Player pool ── */
.h2h-pick-pool {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.h2h-team-section {
  border-left: 3px solid var(--team-accent, var(--border));
  padding-left: 8px;
}
.h2h-team-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 4px;
}
.h2h-team-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.h2h-player-btn {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  text-align: left;
}
.h2h-player-btn:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--white);
}
.h2h-player-btn:disabled {
  cursor: default;
  opacity: 0.6;
}
.h2h-player-btn.sabotage-pick {
  border-color: #f5c6c0;
}
.h2h-player-btn.sabotage-pick:hover:not(:disabled) {
  border-color: var(--red-card, #d44);
  background: var(--colour-danger-bg, #fff5f5);
}
.h2h-player-btn.h2h-player-chosen {
  border-color: var(--meg-green);
  background: var(--brand-surface, #f0f8f3);
}
/* Picked (already drafted) — greyed out, unclickable */
.h2h-player-btn.draft-picked {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
  border-color: transparent;
}
.h2h-player-btn.draft-picked .h2h-player-name { color: var(--ink-muted); }
.h2h-player-btn.draft-picked .dp-taken {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
}
.h2h-pick-avail {
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-muted);
  margin-left: auto;
}
.h2h-player-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.h2h-player-pos {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}

/* Dice button */
.h2h-dice-btn {
  width: 100%;
  padding: 8px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.12s, opacity 0.12s;
  opacity: 0.7;
}
.h2h-dice-btn:hover { opacity: 1; }
.h2h-dice-btn.h2h-player-chosen {
  border-style: solid;
  border-color: var(--meg-green);
  opacity: 1;
}

/* Pick made announcement */
.h2h-pick-made {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 0;
  font-size: 13px;
}
.h2h-pick-made-who {
  font-weight: 700;
  color: var(--ink);
}
.h2h-pick-made-player {
  font-weight: 700;
  color: var(--meg-green);
}
.h2h-pick-made-pos {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
}
.h2h-pick-made.auto-pick {
  opacity: 0.7;
  font-style: italic;
}
.h2h-auto-label {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* Draft complete state */
.h2h-draft-complete {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--meg-green);
  padding: 8px 0;
}

/* ── Sabotage banner (inside persistent board) ── */
.h2h-sabotage-banner {
  text-align: center;
  padding: 12px 8px;
  border: 1px dashed var(--red-card, #d44);
  border-radius: 6px;
  background: rgba(221, 68, 68, 0.06);
}
.h2h-sabotage-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--red-card, #d44);
  margin-bottom: 4px;
}
.h2h-sabotage-msg {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* ── Captain pick columns ── */
.h2h-captain-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.h2h-captain-col-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 6px;
}
.h2h-captain-col.mine .h2h-captain-col-label {
  color: var(--meg-green);
}
.h2h-captain-col.locked {
  opacity: 0.5;
  pointer-events: none;
}
.h2h-captain-opp-status {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════════
   H2H Dark Mode (Worst Eleven)
   ══════════════════════════════════════════════════════════════════════════ */
body.mode-worst .h2h-draft-board {
  background: var(--worst-bg);
  border-color: var(--worst-bg-sel);
  color: var(--worst-text);
}
body.mode-worst .h2h-draft-board.h2h-board-frozen {
  border-left-color: var(--worst-pos);
}
body.mode-worst .h2h-board-hdr {
  border-bottom-color: var(--worst-bg-mid);
}
body.mode-worst .h2h-board-title { color: var(--worst-text); }
body.mode-worst .h2h-board-progress { color: var(--worst-muted); }
body.mode-worst .h2h-xi-label { color: var(--worst-muted); }
body.mode-worst .h2h-xi-label.yours { color: var(--worst-pos); }
body.mode-worst .h2h-slot-pos { color: var(--worst-muted); }
body.mode-worst .h2h-slot-name { color: var(--worst-text); }
body.mode-worst .h2h-slot-name.empty { color: var(--worst-bg-mid); }
body.mode-worst .h2h-slot.h2h-slot-new { background: var(--worst-bg-hover); }
body.mode-worst .h2h-pick-area { border-top-color: var(--worst-bg-mid); }
body.mode-worst .h2h-pick-label { color: var(--worst-text); }
body.mode-worst .h2h-pick-turn { color: var(--worst-text); }
body.mode-worst .h2h-pick-turn.opp-turn { color: var(--worst-muted); }
body.mode-worst .h2h-team-section { border-left-color: var(--worst-bg-sel); }
body.mode-worst .h2h-team-label { color: var(--worst-muted); }
body.mode-worst .h2h-player-btn {
  background: var(--worst-bg-hover);
  border-color: var(--worst-bg-sel);
  color: var(--worst-text);
}
body.mode-worst .h2h-player-btn:hover:not(:disabled) {
  border-color: var(--worst-text);
  background: var(--worst-bg-sel);
}
body.mode-worst .h2h-player-btn.h2h-player-chosen {
  border-color: var(--worst-pos);
  background: var(--worst-bg-sel);
}
body.mode-worst .h2h-player-btn.sabotage-pick {
  border-color: var(--worst-pos);
}
body.mode-worst .h2h-player-name { color: var(--worst-text); }
body.mode-worst .h2h-player-pos { color: var(--worst-muted); }
body.mode-worst .h2h-dice-btn {
  background: var(--worst-bg-hover);
  border-color: var(--worst-bg-sel);
  color: var(--worst-muted);
}
body.mode-worst .h2h-pick-made-who { color: var(--worst-text); }
body.mode-worst .h2h-pick-made-player { color: var(--worst-pos); }
body.mode-worst .h2h-draft-complete { color: var(--worst-pos); }
body.mode-worst .h2h-captain-col-label { color: var(--worst-muted); }
body.mode-worst .h2h-captain-col.mine .h2h-captain-col-label { color: var(--worst-pos); }
body.mode-worst .h2h-captain-opp-status { color: var(--worst-muted); }
body.mode-worst .h2h-sabotage-banner {
  border-color: var(--worst-sabotage, #ff6b6b);
  background: rgba(255, 107, 107, 0.08);
}
body.mode-worst .h2h-sabotage-eyebrow { color: var(--worst-sabotage, #ff6b6b); }
body.mode-worst .h2h-sabotage-msg { color: var(--worst-ink); }

/* Scorer — 3 side-by-side options */
.scorer-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.scorer-btn {
  padding: 10px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  word-break: break-word;
  line-height: 1.3;
}
.scorer-btn:hover   { border-color: var(--ink); background: var(--white); }
.scorer-btn.selected{ border-color: var(--ink); background: var(--ink); color: var(--white); }
.scorer-btn.correct { border-color: var(--meg-green); background: var(--brand-surface, #f0f8f3); color: var(--meg-green); font-weight: 600; }
.scorer-btn.wrong   { border-color: var(--red-card); background: var(--colour-danger-bg, #fff5f5); color: var(--red-card); }
.scorer-btn:disabled{ opacity: 0.4; cursor: default; }

/* Prediction result */
.pred-result {
  font-size: 13px;
  font-weight: 500;
  padding: 10px 0 2px;
}
.pred-result.correct { color: var(--meg-green); }
.pred-result.wrong   { color: var(--red-card); }

/* ═══════════════════════════════════════════════════════════════
   MATCH SIMULATION
   ═══════════════════════════════════════════════════════════════ */

/* Live commentary — amber shimmer */
.commentary-live {
  margin: 4px 0 6px;
  min-height: 24px;
  padding-left: 2px;
}

.commentary-text {
  font-size: 13px;
  font-style: italic;
  color: var(--amber);
  line-height: 1.55;
  animation: commentary-shimmer 2.2s ease-in-out infinite;
}

@keyframes commentary-shimmer {
  0%   { opacity: 0.45; }
  50%  { opacity: 1; }
  100% { opacity: 0.45; }
}

/* Match event tile — compact inline row */
.match-event-tile {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  margin: 2px 0;
  border-radius: 6px;
  border-left: 3px solid var(--border);
  background: var(--white);
  font-size: 13px;
  animation: msgIn 0.2s ease;
}

.match-event-tile.user-pick { border-left-color: var(--blue-pick); background: var(--surface-blue); }
.match-event-tile.meg-pick  { border-left-color: var(--indigo-pick); background: var(--surface-indigo); }

.event-icon    { font-size: 13px; flex-shrink: 0; }

.event-player  {
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.event-detail  {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.event-delta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}
.event-delta.pos { color: var(--meg-green); }
.event-delta.neg { color: var(--red-card); }
.event-delta.neu { color: var(--ink-muted); }

.event-pick-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.event-pick-badge.yours { background: var(--surface-blue-muted); color: var(--blue-pick); }
.event-pick-badge.megs  { background: var(--surface-indigo-muted); color: var(--indigo-pick); }

/* Sticky live clock bar — created by buildMatchEventTile, sits at top of game board */
body.mode-worst .match-clock-bar {
  background: var(--worst-bg);
  border-bottom-color: var(--worst-bg-sel);
  color: var(--worst-text);
}
@keyframes pulseLive {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.75); }
}
body.mode-worst .clock-min, body.mode-worst .clock-score { color: var(--worst-text); }
body.mode-worst .clock-half { color: var(--worst-muted); }

/* Running score strip after each event */
.event-score-strip {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  text-align: right;
  padding: 2px 13px 5px;
  letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════════════════════════
   SIMULATION SCOREBAR  — always-visible bar during simulation
   ═══════════════════════════════════════════════════════════════ */
.scorebar {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  background: var(--white);
  gap: 10px;
  flex-shrink: 0;
}
.scorebar.hidden { display: none; }

.scorebar-meg,
.scorebar-you {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
}

.scorebar-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.scorebar-pts {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  transition: color 0.3s;
}
.scorebar-meg .scorebar-pts { color: var(--meg-green); }

.scorebar-commentary {
  flex: 1;
  font-size: 12px;
  font-style: italic;
  color: var(--amber);
  text-align: center;
  min-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  animation: commentary-shimmer 2.2s ease-in-out infinite;
}
.scorebar-commentary:empty { animation: none; }

/* ═══════════════════════════════════════════════════════════════
   THREAD LIVE BAR
   Sits just above the input box in the game thread.
   Shows commentary + pick scores + live match clock.
   ═══════════════════════════════════════════════════════════════ */
.thread-live-bar {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--white);
}
.thread-live-bar.hidden { display: none; }

.tlb-commentary {
  font-size: 11.5px;
  font-style: italic;
  color: var(--amber);
  text-align: center;
  padding: 5px 14px 3px;
  min-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  animation: commentary-shimmer 2.2s ease-in-out infinite;
}
.tlb-commentary:empty { display: none; }

.tlb-scores {
  display: flex;
  align-items: center;
  padding: 6px 14px 8px;
  gap: 10px;
}

.tlb-side {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.tlb-side.right { flex-direction: row-reverse; }

.tlb-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.tlb-pts {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  transition: color 0.25s;
  min-width: 30px;
}
.tlb-side.right .tlb-pts { color: var(--meg-green); text-align: right; }

.tlb-clock {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
}

.tlb-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--colour-danger);
  animation: pulseLive 1.2s infinite;
  flex-shrink: 0;
}

#threadScorebarMatchScore,
.tlb-match-score {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1px;
}

/* Dark mode overrides */
body.mode-worst .thread-live-bar {
  background: var(--worst-bg);
  border-top-color: var(--worst-bg-sel);
}
body.mode-worst .tlb-commentary { color: var(--worst-amber); }
body.mode-worst .tlb-pts        { color: var(--worst-text); }
body.mode-worst .tlb-side.right .tlb-pts { color: #b090ff; }
body.mode-worst .tlb-label      { color: var(--worst-muted); }
body.mode-worst .tlb-clock      { color: var(--worst-muted); }
body.mode-worst #threadScorebarMatchScore { color: var(--worst-text); }

/* ═══════════════════════════════════════════════════════════════
   HALFTIME
   ═══════════════════════════════════════════════════════════════ */
.halftime-score {
  text-align: center;
  padding: 4px 0 14px;
}

.halftime-match {
  font-family: var(--font-serif);
  font-size: var(--text-3xl, 48px);
  color: var(--ink);
  font-weight: 400;
  line-height: var(--leading-tight, 0.95);
  letter-spacing: -1px;
}

.halftime-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
}

.halftime-duel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.duel-side {
  text-align: center;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--paper);
}

.duel-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.duel-score {
  font-family: var(--font-serif);
  font-size: var(--text-3xl, 48px);
  color: var(--ink);
  font-weight: 400;
  line-height: var(--leading-tight, 0.95);
  letter-spacing: -1px;
}

.duel-rating {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* ─── Swap Offer ─────────────────────────────────────────────── */
.swap-offer {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.swap-heading {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 10px;
}

.swap-players {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 11px;
}

.swap-player {
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--paper);
}
.swap-player.out { border-color: var(--border-danger); background: var(--surface-danger-muted); }
.swap-player.in  { border-color: var(--border-success); background: var(--surface-success-muted); }

.swap-player-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--ink-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.swap-player-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.swap-player-pos {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-muted);
  margin-top: 1px;
}


.swap-arrow { font-size: 14px; color: var(--ink-muted); text-align: center; }


.swap-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.swap-accept {
  padding: 11px;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  border: none;
}
.swap-accept:hover    { background: var(--surface-sink); }
.swap-accept:disabled { opacity: 0.4; cursor: default; }

.swap-decline {
  padding: 11px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--ink-muted);
  cursor: pointer;
  background: transparent;
  transition: border-color 0.15s, color 0.15s;
}
.swap-decline:hover    { border-color: var(--ink); color: var(--ink); }
.swap-decline:disabled { opacity: 0.4; cursor: default; }

/* ═══════════════════════════════════════════════════════════════
   DIFFICULTY SELECT
   ═══════════════════════════════════════════════════════════════ */
.difficulty-intro {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 13px;
  line-height: 1.4;
}

.difficulty-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.difficulty-btn {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
}
.difficulty-btn:hover    { border-color: var(--ink); background: var(--white); }
.difficulty-btn:disabled { opacity: 0.4; cursor: default; }
.difficulty-btn.selected { border-color: var(--meg-accent); background: var(--brand-surface, #f0f8f3); }

.diff-badge {
  grid-row: 1 / 3;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diff-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.diff-sub {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.3;
}

/* ── Draft clue hint ─────────────────────────────────────────── */
.draft-clue-hint {
  font-size: 11.5px;
  color: var(--ink-muted);
  font-style: italic;
  background: var(--paper);
  border-left: 2px solid var(--border);
  padding: 5px 9px;
  margin: 3px 0 6px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   HALFTIME STEAL
   ═══════════════════════════════════════════════════════════════ */
.steal-intro {
  margin-bottom: 12px;
}

.steal-scores {
  display: flex;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 7px;
}

.steal-rule {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.45;
}

.steal-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

.steal-player-btn {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
}
.steal-player-btn:hover    { border-color: var(--amber); background: var(--surface-amber); }
.steal-player-btn.selected { border-color: var(--amber); background: var(--surface-amber-muted); }
.steal-player-btn:disabled { opacity: 0.4; cursor: default; }

.steal-pos  { font-family: var(--font-mono); font-size: 9px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.8px; }
.steal-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.steal-team { font-size: 10.5px; color: var(--ink-muted); }
.steal-action {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--amber);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.steal-hold-btn {
  width: 100%;
  padding: 11px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 12.5px;
  color: var(--ink-muted);
  cursor: pointer;
  margin-bottom: 9px;
  transition: border-color 0.12s, color 0.12s;
}
.steal-hold-btn:hover    { border-color: var(--ink); color: var(--ink); }
.steal-hold-btn:disabled { opacity: 0.4; cursor: default; }

.steal-timer-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}


.steal-timer-secs {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  min-width: 14px;
  text-align: right;
}

/* ── Steal result ──────────────────────────────────────────────── */
.steal-result-body {
  text-align: center;
  padding: 10px 0 4px;
}

.steal-result-icon {
  font-size: 30px;
  margin-bottom: 8px;
}

.steal-result-headline {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.steal-result-detail {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 6px;
}

.steal-swap-row {
  margin-bottom: 3px;
}

.steal-result-note {
  font-size: 11px;
  color: var(--ink-muted);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   POST-MATCH CHIP REPORT
   ═══════════════════════════════════════════════════════════════ */
.post-match-report-block {
  border-top: 2px solid var(--amber);
}

.post-match-report-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  padding-top: 4px;
  white-space: pre-wrap;
}

/* ═══════════════════════════════════════════════════════════════
   RESULT
   ═══════════════════════════════════════════════════════════════ */
.result-outcome {
  text-align: center;
  padding: 4px 0 14px;
}

.result-headline {
  font-family: var(--font-serif);
  font-size: 34px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.result-headline.won  { color: var(--meg-green); }
.result-headline.lost { color: var(--red-card); }

.result-match-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.5px;
}

.result-duel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  margin-bottom: 13px;
}

.result-side {
  text-align: center;
  padding: 12px 8px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--paper);
}
.result-side.winner { border-color: var(--meg-accent); background: var(--brand-surface, #f0f8f3); }
.result-side.loser  { border-color: var(--border-danger); background: var(--surface-danger-muted); }

.result-side-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.result-side-score {
  font-family: var(--font-serif);
  font-size: 38px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1;
}

.result-side-rating {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 4px;
}

.result-again-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
}
.result-again-btn:hover { background: var(--surface-sink); }

/* ═══════════════════════════════════════════════════════════════
   ROLLERCOASTER CHART
   ═══════════════════════════════════════════════════════════════ */
.rollercoaster-block { padding: 14px 16px; }

.rc-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
  text-align: center;
}

.rc-canvas-wrap canvas {
  display: block;
  width: 100%;
}

/* ─── Rollercoaster event markers ──────────────────────────────── */
.rc-event-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
.rc-event-marker:hover .rc-event-tooltip,
.rc-event-marker:focus .rc-event-tooltip { opacity: 1; pointer-events: auto; }
.rc-event-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 9px;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 4px;
  margin-bottom: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10;
}

/* ═══════════════════════════════════════════════════════════════
   COIN FLIP ANIMATION
   ═══════════════════════════════════════════════════════════════ */
.coin-flip-wrap { text-align: center; padding: 8px 0; }

.coin-flip-scene {
  perspective: 400px;
  display: inline-block;
  margin-bottom: 14px;
}

.coin-flip-coin {
  width: 80px;
  height: 80px;
  position: relative;
  transform-style: preserve-3d;
  animation: coinSpin 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  --coin-end-deg: 1440deg;
}

@keyframes coinSpin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(var(--coin-end-deg)); }
}

.coin-flip-face,
.coin-flip-back {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.coin-flip-face {
  background: var(--meg-green);
  color: #fff;
  border: 3px solid #1e3d2a;
}
.coin-flip-back {
  background: #444;
  color: #fff;
  border: 3px solid #222;
  transform: rotateY(180deg);
}

.coin-flip-reveal {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 4px;
}
.coin-flip-winner-name { color: var(--meg-green); }

/* ═══════════════════════════════════════════════════════════════
   RESULT TIER LABEL
   ═══════════════════════════════════════════════════════════════ */
.result-tier {
  text-align: center;
  padding: 14px 0 4px;
}
.result-tier-emoji {
  font-size: 60px;
  line-height: 1;
  display: block;
  animation: tierBounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes tierBounce {
  0%   { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.result-tier-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 6px;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   GOOD / BAD / UGLY TILES
   ═══════════════════════════════════════════════════════════════ */
.dossier-gbu {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gbu-tile {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}

.gbu-tile-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gbu-good  .gbu-tile-head { background: rgba(45,90,61,0.08);  color: var(--meg-green); }
.gbu-bad   .gbu-tile-head { background: rgba(192,57,43,0.07); color: var(--red-card);  }
.gbu-ugly  .gbu-tile-head { background: rgba(100,80,50,0.08); color: var(--ink-muted); }

.gbu-emoji { font-size: 14px; }
.gbu-heading { flex: 1; }

.gbu-player-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-top: 1px solid var(--border);
}
.gbu-player-name {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gbu-player-name.is-captain::after { content: ' ©'; color: var(--amber); font-weight: 600; }
.gbu-player-events { font-size: 10px; flex-shrink: 0; }
.gbu-player-label  { font-family: var(--font-mono); font-size: 9px; color: var(--ink-muted); flex-shrink: 0; }
.gbu-player-pts    { font-family: var(--font-mono); font-size: 11px; font-weight: 600; flex-shrink: 0; min-width: 30px; text-align: right; }
.gbu-player-pts.pos  { color: var(--meg-green); }
.gbu-player-pts.neg  { color: var(--red-card); }
.gbu-player-pts.zero { color: var(--ink-muted); }

/* ═══════════════════════════════════════════════════════════════
   FORMATION IMAGE
   ═══════════════════════════════════════════════════════════════ */
.formation-pitch {
  border-radius: var(--radius);
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 10px 0;
}
.formation-dark  { background: #111a10; }
.formation-light { background: #e8f0ea; }

.formation-row {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.formation-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 54px;
  max-width: 70px;
  flex: 1;
}

.formation-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.35);
}
.formation-dark  .formation-dot { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); }
.formation-light .formation-dot { background: rgba(45,90,61,0.18);    border-color: rgba(45,90,61,0.5);   }

.formation-player.is-captain .formation-dot {
  border-color: var(--amber);
  background: rgba(245,166,35,0.2);
}

.formation-name {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.formation-dark  .formation-name { color: #e8f5e0; }
.formation-light .formation-name { color: #1a3a20; }

.formation-pts {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
}
.formation-dark  .formation-pts.pos { color: #7ecf7e; }
.formation-dark  .formation-pts.neg { color: var(--worst-pos); }
.formation-dark  .formation-pts.zero{ color: #888; }
.formation-light .formation-pts.pos { color: var(--meg-green); }
.formation-light .formation-pts.neg { color: var(--red-card);  }
.formation-light .formation-pts.zero{ color: var(--ink-muted); }

.formation-note {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   DOSSIER
   ═══════════════════════════════════════════════════════════════ */
.dossier-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 13px;
}

.dossier-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dossier-meta-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dossier-meta-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.dossier-meta-sep {
  width: 1px; height: 24px;
  background: var(--border);
  flex-shrink: 0;
}

.chaos-high { color: var(--red-card) !important; }
.chaos-mid  { color: var(--amber) !important; }
.chaos-low  { color: var(--meg-green) !important; }

/* Side-by-side header row */
.dossier-teams-hdr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 6px;
}

.dossier-col-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--border);
}
.dossier-col-hdr.megs { border-bottom-color: var(--meg-green); }

.dossier-col-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dossier-col-score {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}
.dossier-col-score.meg-score { color: var(--meg-green); }

/* Side-by-side team columns */
.dossier-teams-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dossier-team-col { /* each column */ }

.dossier-team { margin-bottom: 13px; }


.dossier-row {
  display: grid;
  grid-template-columns: 22px 1fr 40px 36px;
  align-items: center;
  column-gap: 4px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.dossier-row:last-child { border-bottom: none; }

.dossier-pos {
  font-family: var(--font-mono);
  font-size: 7.5px;
  color: var(--ink-muted);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.dossier-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dossier-name.is-captain::after {
  content: ' ©';
  color: var(--amber);
  font-weight: 600;
}

/* Emoji icons — fixed 40px column so pts never shifts */
.dossier-events {
  display: flex;
  gap: 0;
  font-size: 10px;
  line-height: 1;
  letter-spacing: -1.5px;
  overflow: hidden;
  white-space: nowrap;
}
.dossier-events span { font-size: 10px; }

.dossier-pts {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-align: right;
}
.dossier-pts.pos  { color: var(--meg-green); }
.dossier-pts.neg  { color: var(--red-card); }
.dossier-pts.zero { color: var(--ink-muted); }

/* ─── Dossier CTA buttons ──────────────────────────────────── */
.dossier-cta-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.dossier-cta-btn {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.dossier-cta-btn:active { opacity: 0.7; }
.dossier-cta-replay {
  background: var(--accent);
  color: #fff;
}
.dossier-cta-new {
  background: var(--surface-alt, var(--surface));
  color: var(--ink);
  border: 1px solid var(--border);
}

/* ─── Good/Bad/Ugly standouts ──────────────────────────────── */




.standout-name.is-captain::after { content: ' ©'; color: var(--amber); font-weight: 600; }


.standout-pts.pos  { color: var(--meg-green); }
.standout-pts.neg  { color: var(--red-card); }
.standout-pts.zero { color: var(--ink-muted); }

.dossier-share-btn {
  display: block;
  width: calc(100% - 28px);
  margin: 14px 14px 6px;
  padding: 10px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.dossier-share-btn:hover { background: var(--brand-dark, #1a4a9a); }
body.mode-worst .dossier-share-btn { background: var(--worst-bg-btn); }
body.mode-worst .dossier-share-btn:hover { background: #a02525; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Switch to absolute positioning within .app — avoids all iOS fixed/viewport bugs */
  .app { position: relative; }
  .sidebar {
    position: absolute;
    left: -100%;
    top: 0;
    height: 100%; /* fills .app exactly — no viewport calculation needed */
    z-index: 200;
    transition: left 0.25s ease;
    width: 220px;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar.open { left: 0; }
  /* Pin profile footer to bottom of sidebar — bypasses iOS Safari flexbox min-height bug */
  .sidebar-user {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--meg-green);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1;
  }
  /* Prevent nav list from going under pinned profile footer */
  .sidebar .tab-content {
    padding-bottom: 80px;
  }
  /* Hide input bar completely when sidebar is open */
  .sidebar.open ~ .main-area .input-bar {
    display: none !important;
  }

  .burger-btn { display: flex; }

  .chat-header { padding: 0 12px; }

  .header-room-desc,
  .header-room-divider { display: none; }

  .feed { padding: 14px 12px 8px; }
  .captain-grid    { grid-template-columns: repeat(2, 1fr); }
  .result-duel     { grid-template-columns: 1fr 1fr; }
  .halftime-match  { font-size: 20px; }
  .msg-time { display: none; }
  /* Slack-style message block: smaller avatars, keep timestamps */
  .msg-avatar { width: 28px; height: 28px; font-size: 10px; }
  .msg-timestamp { font-size: 10px; }
  .msg-actions { gap: 2px; }
  .msg-action-btn { font-size: 12px; padding: 1px 3px; }
  .autocomplete-dropdown { min-width: 160px; }
  /* Keep both XIs side-by-side on mobile — tighten spacing instead */
  .draft-xi { padding: 8px 8px; }
  .xi-slot  { padding: 2px 0; }
  .slot-pos { font-size: 8px; min-width: 22px; }
  .slot-name { font-size: 10px; }
  .game-menu { left: 0; right: 0; width: auto; max-width: none; }

  /* ── Dossier side-by-side: tighten for mobile ─────────────────── */
  .dossier-teams-hdr { gap: 4px; }
  .dossier-teams-grid { gap: 4px; }
  .dossier-col-label { font-size: 8px; letter-spacing: 1px; }
  .dossier-col-score { font-size: 10px; }
  .dossier-row {
    grid-template-columns: 18px 1fr 28px;
    column-gap: 2px;
    padding: 3px 0;
  }
  .dossier-pos { font-size: 7px; }
  .dossier-name { font-size: 10px; }
  .dossier-events { display: none; }
  .dossier-pts { font-size: 9px; }

  /* Tighter input bar on mobile to guarantee send button fits */
  .input-bar {
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  /* 16px prevents iOS auto-zoom on focus (Safari zooms inputs < 16px) */
  .chat-input, .thread-input {
    font-size: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GAME MENU
   ═══════════════════════════════════════════════════════════════ */

.game-menu {
  position: fixed;       /* escapes overflow:hidden on .main */
  width: 300px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);
  overflow: hidden;
  z-index: 200;
  animation: menuFadeIn 0.15s ease;
  /* bottom/left set dynamically by JS */
}

@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.game-menu-title {
  padding: 10px 14px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}

.game-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.game-menu-item:hover {
  background: var(--paper);
}

.game-menu-item:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.game-menu-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.game-menu-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.game-menu-desc {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 1px;
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════
   TRIVIA CARDS — shared (legacy, retained for un-migrated cards)
   ═══════════════════════════════════════════════════════════════ */

.trivia-block {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 4px 0;
  max-width: 480px;
}

.trivia-eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.trivia-title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL GAME BLOCK — v1.0
   The standard container for all Tier 1 trivia games.
   Six slotted zones: header, stage, action, result, commentary, footer.
   Individual games fill stage + action; everything else is inherited.
   ═══════════════════════════════════════════════════════════════ */

.ugb {
  background: var(--surface-raised, var(--white));
  border: 1px solid var(--border-default, var(--border));
  border-radius: var(--radius);
  padding: 0;
  margin: 4px 0;
  max-width: 480px;
  overflow: hidden;
  animation: msgIn 0.2s ease;
}

/* ── Header zone ─────────────────────────────────────────────── */
.ugb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--border-subtle, rgba(26, 24, 20, 0.06));
}

.ugb-header-left {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 8px);
  min-width: 0;
}

.ugb-admin-flag {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  opacity: 0.3;
  transition: opacity 0.15s, border-color 0.15s;
}
.ugb-admin-flag:hover {
  opacity: 1;
  border-color: #d32f2f;
}

.msg-action-flag {
  opacity: 0.4;
}
.msg-action-flag:hover {
  opacity: 1;
}

.ugb-game-name {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, var(--ink-muted));
  white-space: nowrap;
}

.ugb-round {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 11px);
  color: var(--text-faint, var(--ink-faint));
  white-space: nowrap;
}

/* ── Old text timer REMOVED — replaced by .ugb-timer-bar-* ───── */

/* ── UGB Timer Bar — PLATFORM STANDARD ───────────────────────────
   ONE bar for every timed interaction across the entire platform.
   Reference design: DM Tenable shrinking bar (user-approved).
   Usage:
     <div class="ugb-timer-bar-wrap">
       <div class="ugb-timer-bar-track">
         <div class="ugb-timer-bar-fill" id="myTimerFill"></div>
       </div>
       <span class="ugb-timer-bar-sec">30s</span>  ← optional
     </div>
   JS driver: _startUGBTimerBar(fillId, totalSecs, onExpire)
   ────────────────────────────────────────────────────────────── */
.ugb-timer-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}
.ugb-timer-bar-track {
  flex: 1;
  height: 3px;
  background: var(--border, #d1cec7);
  border-radius: 2px;
  overflow: hidden;
}
.ugb-timer-bar-fill {
  height: 100%;
  width: 100%;
  background: var(--brand-accent, #246342);
  border-radius: 2px;
  transition: width 0.25s linear;
}
/* Urgency colour stages — driven by data-urgency attribute */
.ugb-timer-bar-fill[data-urgency="calm"]     { background: var(--brand-accent, #246342); }
.ugb-timer-bar-fill[data-urgency="warning"]  { background: var(--colour-amber-cta, #C87800); }
.ugb-timer-bar-fill[data-urgency="critical"] { background: var(--colour-danger, #C0392B); }
.ugb-timer-bar-sec {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, var(--ink-muted));
  min-width: 26px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
/* Seconds label colour tracks urgency */
.ugb-timer-bar-wrap[data-urgency="warning"] .ugb-timer-bar-sec  { color: var(--colour-amber-cta, #C87800); }
.ugb-timer-bar-wrap[data-urgency="critical"] .ugb-timer-bar-sec { color: var(--colour-danger, #C0392B); font-weight: 700; }

/* ── Stage zone ──────────────────────────────────────────────── */
.ugb-stage {
  padding: var(--space-4, 16px);
}
.ugb-stage:empty { display: none; }

/* Stage sub-pattern: text clue (Career Path, Cult Hero) */
.ugb-stage--clue .ugb-clue-label {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--text-muted, var(--ink-muted));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-1, 4px);
}

.ugb-stage--clue .ugb-clue-text {
  font-size: var(--text-base, 14px);
  line-height: var(--leading-normal, 1.4);
  color: var(--text-primary, var(--ink));
}

/* Stage sub-pattern: statement (Nutmeg or Myth) */
.ugb-stage--statement .ugb-statement {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--text-primary, var(--ink));
}

/* Stage sub-pattern: question text (Pub Quiz, Derby Day) */
.ugb-stage--question .ugb-question-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-primary, var(--ink));
}

/* Stage sub-pattern: image reveal (Spot the Player) */
.ugb-stage--image .ugb-image-wrap {
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  position: relative;
}

.ugb-stage--image .ugb-image-wrap img {
  width: 100%;
  display: block;
}

/* ── Action zone ─────────────────────────────────────────────── */
.ugb-action {
  padding: 0 var(--space-4, 16px) var(--space-4, 16px);
}
.ugb-action:empty { display: none; }

/* Action sub-pattern: multiple choice (Pub Quiz) */
.ugb-action--choice {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ugb-choice-btn {
  text-align: left;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px solid var(--border-default, var(--border));
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  font-size: var(--text-sm, 13px);
  font-family: inherit;
  color: var(--text-primary, var(--ink));
  cursor: pointer;
  transition: border-color var(--transition, 0.15s ease), background var(--transition, 0.15s ease);
}

@media (hover: hover) {
  .ugb-choice-btn:hover:not(:disabled) {
    border-color: var(--brand-accent, var(--meg-accent));
    background: rgba(45, 90, 61, 0.06);
  }
}

.ugb-choice-btn.ugb-selected {
  border-color: var(--brand-accent, var(--meg-accent));
  background: rgba(45, 90, 61, 0.12);
  font-weight: 600;
}

.ugb-choice-btn.ugb-correct {
  border-color: var(--colour-live, #1D7A40);
  background: rgba(29, 122, 64, 0.10);
  font-weight: 600;
}

.ugb-choice-btn.ugb-correct::before { content: '✓ '; color: var(--colour-live, #1D7A40); }

.ugb-choice-btn.ugb-wrong {
  border-color: var(--colour-danger, #C0392B);
  background: rgba(192, 57, 43, 0.06);
  opacity: 0.7;
}

.ugb-choice-btn.ugb-wrong::before { content: '✗ '; color: var(--colour-danger, #C0392B); }

.ugb-choice-btn:disabled {
  opacity: var(--disabled-opacity, 0.35);
  cursor: default;
}

/* Action sub-pattern: binary vote (Nutmeg or Myth) */
.ugb-action--binary {
  display: flex;
  gap: 10px;
}

.ugb-binary-btn {
  flex: 1;
  padding: 10px 8px;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 11px);
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 1.5px solid;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  transition: opacity var(--transition, 0.15s ease);
}

.ugb-binary-btn--positive {
  color: var(--brand-accent, var(--meg-accent));
  border-color: var(--brand-accent, var(--meg-accent));
}

.ugb-binary-btn--negative {
  color: var(--colour-danger, #C0392B);
  border-color: var(--colour-danger, #C0392B);
}

.ugb-binary-btn:disabled { opacity: var(--disabled-opacity, 0.35); cursor: default; }
.ugb-binary-btn.ugb-selected { opacity: 1 !important; }

/* Action sub-pattern: text input hint */
.ugb-action--input .ugb-input-hint {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--text-faint, var(--ink-faint));
  margin-top: var(--space-2, 8px);
}

/* ── Result zone ─────────────────────────────────────────────── */
.ugb-result {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-top: 1px solid var(--border-subtle, rgba(26, 24, 20, 0.06));
  display: none; /* hidden until populated */
}

.ugb-result.ugb-result--visible { display: block; }

.ugb-result-answer {
  font-size: var(--text-md, 16px);
  font-weight: 700;
  color: var(--text-primary, var(--ink));
  margin-bottom: var(--space-1, 4px);
}

.ugb-result-answer.ugb-result--correct { color: var(--brand-accent, var(--meg-accent)); }
.ugb-result-answer.ugb-result--wrong   { color: var(--colour-danger, #C0392B); }
.ugb-result-answer.ugb-result--nutmeg  { color: var(--brand-accent, var(--meg-accent)); }
.ugb-result-answer.ugb-result--myth    { color: var(--colour-danger, #C0392B); }

.ugb-result-who {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 11px);
  color: var(--text-muted, var(--ink-muted));
}

.ugb-result-pts {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 11px);
  color: var(--brand-accent, var(--meg-accent));
  font-weight: 700;
}

.ugb-result-context {
  font-size: var(--text-sm, 13px);
  color: var(--text-secondary, var(--ink-muted));
  line-height: var(--leading-normal, 1.4);
  margin-top: var(--space-2, 8px);
}

/* ── Commentary zone ─────────────────────────────────────────── */
.ugb-commentary {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-top: 1px solid var(--border-subtle, rgba(26, 24, 20, 0.06));
  display: none; /* hidden until populated */
}

.ugb-commentary.ugb-commentary--visible { display: block; }

.ugb-commentary-text {
  font-size: var(--text-sm, 13px);
  color: var(--text-secondary, #3D3A33);
  line-height: var(--leading-normal, 1.4);
  font-style: italic;
}

.ugb-commentary-text::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url('/avatars/meg.png') center / cover no-repeat;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
}

/* ── Footer zone ─────────────────────────────────────────────── */
.ugb-footer {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-top: 1px solid var(--border-subtle, rgba(26, 24, 20, 0.06));
  display: none; /* hidden until populated */
}

.ugb-footer.ugb-footer--visible { display: flex; }

.ugb-footer {
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
}

.ugb-scores-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.ugb-score-entry {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 11px);
  color: var(--text-muted, var(--ink-muted));
}

.ugb-score-entry strong {
  color: var(--text-primary, var(--ink));
}

.ugb-next-btn {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--brand-accent, var(--meg-accent));
  background: var(--brand-accent, var(--meg-accent));
  color: var(--text-on-brand, #F7F5F0);
  cursor: pointer;
  transition: background var(--transition, 0.15s ease);
}

.ugb-next-btn:hover { background: var(--brand-hover, #1E5234); }
.ugb-next-btn:active { transform: scale(0.97); }

/* ── Game-specific extensions ────────────────────────────────── */

/* Ten-able: HUD grid inside stage zone */
.ugb .ugb-tn-hud-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-2, 8px);
}

.ugb .ugb-tn-hud-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--surface-base, var(--paper));
  border: 1px solid var(--border-default, var(--border));
  font: 400 12px/1 var(--font-mono, monospace);
  color: var(--text-faint, var(--ink-faint));
  height: 22px;
}

.ugb .ugb-tn-hud-slot.found {
  background: rgba(45, 90, 61, 0.08);
  color: var(--text-primary, var(--ink));
  border-color: var(--brand-accent, var(--meg-accent));
  font-weight: 500;
}

.ugb .ugb-tn-hud-slot.just-found {
  animation: slotPop 0.5s ease forwards;
}

.ugb .ugb-tn-hud-num {
  font-size: 9px;
  color: var(--text-faint, var(--ink-faint));
  flex-shrink: 0;
}

.ugb .ugb-tn-hud-slot.found .ugb-tn-hud-num {
  color: var(--brand-accent, var(--meg-accent));
}

.ugb .ugb-tn-hud-stat {
  margin-left: auto;
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  color: var(--brand-accent, var(--meg-accent));
  font-weight: 600;
  flex-shrink: 0;
}

/* Ten-able: lives row */
.ugb .ugb-tn-lives {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2, 8px);
}

.ugb .ugb-tn-hearts {
  font-size: 14px;
  letter-spacing: 1px;
}

.ugb .ugb-tn-progress {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 11px);
  color: var(--text-muted, var(--ink-muted));
}

/* Derby Day: scoreboard in header */
.ugb .ugb-dd-scoreboard {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  font-family: var(--font-mono, monospace);
}

.ugb .ugb-dd-player {
  font-size: var(--text-sm, 13px);
  font-weight: 600;
  color: var(--text-primary, var(--ink));
}

.ugb .ugb-dd-score {
  font-size: var(--text-lg, 20px);
  font-weight: 700;
  color: var(--text-primary, var(--ink));
}

.ugb .ugb-dd-sep {
  color: var(--text-muted, var(--ink-muted));
}

/* Cult Hero: clue list in result */
.ugb .ugb-clue-list {
  margin-top: var(--space-2, 8px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ugb .ugb-clue-list-item {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted, var(--ink-muted));
  line-height: 1.4;
}

.ugb .ugb-clue-list-num {
  min-width: 18px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--text-faint, var(--ink-faint));
  padding-top: 1px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ugb { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   CAREER PATH CARDS
   ═══════════════════════════════════════════════════════════════ */

.cp-clue-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}

.cp-clue-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.cp-clue-row.new-clue {
  background: var(--surface-success);
  color: var(--meg-green);
  font-weight: 600;
}
.cp-clue-row.cp-clue-empty {
  opacity: 0.4;
}
.cp-clue-hidden {
  font-style: italic;
  color: var(--ink-muted);
}

.cp-clue-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-muted);
  min-width: 16px;
}

.cp-clue-arrow {
  font-size: 12px;
  color: var(--ink-muted);
}

.cp-clue-club {
  flex: 1;
}

.cp-prompt {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
}

.cp-reveal-answer {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--meg-green);
  margin: 8px 0 6px;
}

.cp-bio {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-top: 4px;
}

.cp-correct-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--meg-green);
  background: var(--surface-success);
  padding: 3px 8px;
  border-radius: 20px;
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   TEN-ABLE CARDS
   ═══════════════════════════════════════════════════════════════ */

.tn-question-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
  margin: 8px 0 12px;
}

.tn-lives {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}


.tn-hearts {
  font-size: 14px;
  letter-spacing: 1px;
}





.tn-found-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tn-found-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 12px;
  color: var(--ink-muted);
}

.tn-found-item.just-found {
  background: var(--surface-success);
  color: var(--meg-green);
  font-weight: 600;
  animation: foundPulse 0.4s ease;
}

@keyframes foundPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.tn-found-num {
  font-size: 10px;
  font-weight: 700;
  color: inherit;
  opacity: 0.7;
  min-width: 16px;
}



.tn-missing-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-danger);
  color: var(--red-card);
  font-size: 12px;
  font-weight: 500;
}

.tn-complete-title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--meg-green);
  margin: 6px 0 4px;
}

.tn-failed-title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--red-card);
  margin: 6px 0 4px;
}

/* ── Trivia timer bar ───────────────────────────────────────── */
.trivia-timer-secs {
  position: absolute;
  right: 0;
  top: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--text-secondary);
}

/* ── Play again button ──────────────────────────────────────── */
.play-again-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 0;
  border: 1.5px solid var(--meg-accent);
  border-radius: var(--radius);
  background: transparent;
  color: var(--meg-accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.play-again-btn:hover {
  background: var(--meg-accent);
  color: #fff;
}
.play-again-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════════
   TEN-ABLE HUD — persistent panel above input bar during game
   ═══════════════════════════════════════════════════════════════ */
.tenable-hud {
  background: var(--white);
  border-top: 2px solid var(--ink);
  padding: 10px 16px 12px;
  flex-shrink: 0;
}
.tenable-hud.hidden { display: none; }

.tn-hud-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tn-hud-label {
  font: 600 9px/1 var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--meg-green);
  text-transform: uppercase;
  flex-shrink: 0;
}

.tn-hud-question {
  font: 500 14px/1.35 var(--font-serif);
  color: var(--ink);
  flex: 1;
}

.tn-hud-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font: 500 12px/1 var(--font-mono);
  color: var(--ink-muted);
}

.tn-hud-progress {
  font: 600 12px/1 var(--font-mono);
  color: var(--ink);
}

.tn-hud-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tn-hud-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--paper);
  border: 1px solid var(--border);
  font: 400 12px/1 var(--font-mono);
  color: var(--ink-faint);
  height: 22px;
}

.tn-hud-slot.found {
  background: var(--surface-success-muted);
  color: var(--ink);
  border-color: var(--meg-accent);
  font-weight: 500;
}

.tn-hud-num {
  font-size: 9px;
  color: var(--ink-faint);
  flex-shrink: 0;
}

.tn-hud-slot.found .tn-hud-num {
  color: var(--meg-accent);
}

.tn-hud-slot.just-found {
  animation: slotPop 0.5s ease forwards;
}

/* Stat number shown next to name in ranked Tenable slots */
.tn-hud-stat {
  margin-left: auto;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--meg-accent);
  font-weight: 600;
  flex-shrink: 0;
}

@keyframes slotPop {
  0%   { background: var(--meg-accent); color: var(--white); border-color: var(--meg-accent); }
  60%  { transform: scale(1.04); }
  100% { background: var(--surface-success-muted); color: var(--ink); border-color: var(--meg-accent); }
}

/* ── Emoji particle system ──────────────────────────────────────────────────── */

/* Burst particle — flies out from a slot on correct answer */
.emoji-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  line-height: 1;
  user-select: none;
  animation: particleBurst 0.75s ease-out forwards;
}

@keyframes particleBurst {
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

/* Rain particle — falls from top on perfect 10 */
.emoji-rain-particle {
  position: fixed;
  top: -50px;
  pointer-events: none;
  z-index: 9999;
  line-height: 1;
  user-select: none;
  animation: emojiRainFall var(--fall-dur, 2s) ease-in forwards;
}

@keyframes emojiRainFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(115vh) rotate(var(--fall-rot, 360deg)); opacity: 0; }
}

/* ── Celebration engine: score pulse + screen shake ─────────── */
.score-pulse {
  animation: celScorePulse 0.5s ease-out;
}
@keyframes celScorePulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); color: var(--meg-green); }
  100% { transform: scale(1); }
}

.cel-shake {
  animation: celShake 0.35s ease-in-out;
}
@keyframes celShake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-3px); }
  30%      { transform: translateX(3px); }
  45%      { transform: translateX(-2px); }
  60%      { transform: translateX(2px); }
  75%      { transform: translateX(-1px); }
}

/* ═══════════════════════════════════════════════════════════════
   ROOMS — App shell update for thread panel
   ═══════════════════════════════════════════════════════════════ */

/* ── Thread panel (slide-in alongside main) ─────────────────── */
.thread-panel {
  width: 0;
  flex-shrink: 0;
  background: var(--white);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.22s ease;
}
.thread-panel.open {
  width: 380px;
}

/* On mobile: full-screen overlay.
   Use visualViewport top + height so the panel always fills exactly the
   visible area above the keyboard (inset:0 / bottom:0 anchor to the layout
   viewport which includes the area behind the keyboard). */
@media (max-width: 900px) {
  .thread-panel {
    position: fixed;
    top: var(--visual-vv-top, 0px);
    left: 0;
    right: 0;
    bottom: auto;
    height: var(--visual-vh, 100dvh);
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.22s ease;
    z-index: 60;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .thread-panel.open {
    width: 100%;
    transform: translateX(0);
  }
  .thread-replies {
    min-height: 0;
  }
}

.thread-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.thread-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
.thread-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  color: var(--ink-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s;
}
.thread-close:hover { background: var(--paper); color: var(--ink); }
.thread-close.hidden { display: none; }

.thread-parent {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--paper);
  flex-shrink: 0;
}

.thread-divider {
  padding: 6px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.thread-replies {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Pinned game board — sits between scrolling replies and input */
.thread-game-board {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 8px 12px;
  max-height: 45vh;
  overflow-y: auto;
}
.thread-game-board:empty {
  display: none;
}

/* Meg commentary inside thread game board */
.thread-meg-commentary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
}
.thread-meg-label {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--meg-green);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.thread-meg-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

/* Draft board inside thread game board */
.thread-game-board .overlay-board {
  border: none;
  padding: 0;
}
.thread-game-board .overlay-pick {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 8px;
}

/* ── Nested thread sub-replies ─────────────────────────────────────────────── */
.thread-sub-reply {
  padding-left: 32px;
  border-left: 2px solid var(--border);
  margin-left: 8px;
  opacity: 0.92;
}
.thread-sub-reply-btn {
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0 4px;
  display: block;
}
.thread-sub-reply-btn:hover { color: var(--ink); }
.thread-replying-banner {
  padding: 6px 12px;
  background: var(--surface-2, #f0f0f0);
  font-size: 12px;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
}
.thread-replying-banner strong { color: var(--ink); }
.thread-replying-cancel {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 13px;
  padding: 0;
  margin-left: auto;
}

.thread-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  margin-top: auto;
}
.thread-input {
  flex: 1;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  resize: none;
  outline: none;
  line-height: 1.4;
  min-height: 36px;
  max-height: 100px;
  overflow-y: auto;
}
.thread-input:focus { border-color: var(--meg-green); }

.thread-send-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--meg-green);
  color: white;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.thread-send-btn:hover { background: var(--meg-accent); }

/* ── Room messages ──────────────────────────────────────────── */

/* In-room feed — all messages left-aligned, show sender */
.room-msg {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  align-items: flex-start;
  flex-shrink: 0;
  position: relative;
}
.room-msg:hover .room-msg-actions { opacity: 1; pointer-events: auto; }

.room-msg-avatar.meg-avatar {
  background: url('/avatars/meg.png') center/cover, var(--meg-green);
}

.room-msg-body { flex: 1; min-width: 0; }

.room-msg-name.meg-name { color: var(--meg-green); }

.room-msg-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.room-msg.meg .room-msg-text { color: var(--meg-green); }

/* Bold / italic in room messages */
.room-msg-text strong { font-weight: 600; }
.room-msg-text em     { font-style: italic; }

/* Reactions bar */
.room-msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--white);
  font-size: var(--text-sm);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s;
}
.reaction-pill:hover { background: var(--paper); }
.reaction-pill.mine  { border-color: var(--meg-green); background: var(--brand-surface, #e8f3ec); }
.reaction-pill .pill-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  font-weight: 500;
}

/* Thread reply count */
.room-msg-thread {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--meg-accent);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  background: var(--white);
  transition: background 0.15s;
}
.room-msg-thread:hover { background: var(--paper); }

/* Hover action bar (react + reply) */
.room-action-btn {
  font-size: 14px;
  padding: 2px 5px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--ink-muted);
}
.room-action-btn:hover { background: var(--paper); color: var(--ink); }

/* Room thinking indicator (same as DM but in room context) */

/* ── Game tile in room feed ─────────────────────────────────── */
/* ── DM game cards (trivia + draft) ────────────────────────────── */
.dm-game-card {
  padding: 6px 0;
}
.dm-game-card > div {
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--meg-green);
  border-radius: var(--radius);
}
.dm-game-card-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--meg-green);
  margin-bottom: 4px;
}
.dm-game-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.dm-game-card-sub {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 4px;
}
/* ── Career Path: footer (dots + timer) ─────────────────────────────────── */
.dm-cp-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dm-cp-lock-row { display: flex; gap: 8px; }
.dm-play-again-btn {
  display: block; width: 100%; padding: 10px;
  background: var(--meg-green); color: var(--white); border: none;
  border-radius: var(--radius-sm); font-family: var(--font-sans);
  font-size: 13px; font-weight: 600; cursor: pointer; text-align: center;
}
.dm-play-again-btn:active { opacity: 0.82; }

/* ── DM H2H Tenable board extras ────────────────────────────────────────── */
/* Shared lives row — single pool for both players */
.dm-tn-lives-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0;
  padding: 8px 12px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.dm-tn-team-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dm-tn-hearts { font-size: 15px; letter-spacing: 2px; }
.dm-tn-vs-sep {
  font-size: 11px; color: var(--ink-muted); flex-shrink: 0;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
/* Missed slot (shown at result) */
.tn-hud-slot.dm-tn-missed {
  opacity: 0.45;
  font-style: italic;
}
/* Result bar inside game board */
.dm-tn-result-bar {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.dm-tn-back-btn {
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.dm-tn-back-btn:active { background: var(--paper); }

/* ── DM H2H Tenable: floating attribution toast ──────────────────────────── */
.dm-tn-toast {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 8px;
  border-radius: 24px;
  font-size: 13px;
  white-space: nowrap;
  z-index: 20;
  pointer-events: none;
  animation: dmTnToastPop 2.8s ease forwards;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.dm-tn-toast.correct {
  background: var(--meg-green);
  color: var(--white);
}
.dm-tn-toast.wrong {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--border);
}
.dm-tn-toast-badge {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}
.dm-tn-toast-text { font-size: 12px; }
.dm-tn-toast-text strong { font-weight: 700; }
@keyframes dmTnToastPop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.88); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.96); }
}

/* Make game board position:relative so toast positions correctly */
.thread-game-board { position: relative; }

.dm-cp-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--ink-faint);
  color: var(--ink-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.dm-cp-dot.is-me {
  border-color: var(--meg-accent);
  color: var(--meg-accent);
}
/* Correct lock: solid fill */
.dm-cp-dot.locked {
  background: var(--ink-faint);
  border-color: var(--ink-faint);
  color: var(--white);
}
.dm-cp-dot.locked.is-me {
  background: var(--meg-green);
  border-color: var(--meg-green);
  color: var(--white);
}
/* Wrong attempt: amber tint */
.dm-cp-dot.locked.wrong-attempt {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--white);
}
.dm-cp-dot.locked.wrong-attempt.is-me {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--white);
}

/* ── Career Path: private self-feedback chip ─────────────────────────────── */
.dm-cp-self-chip {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin: 2px 0 4px;
}
.dm-cp-self-chip.correct {
  background: var(--surface-success);
  color: var(--meg-green);
  border: 1px solid var(--border-success);
}
.dm-cp-self-chip.wrong {
  background: var(--surface-danger-muted);
  color: var(--ink-muted);
  border: 1px solid var(--border);
}

/* ── Career Path: result breakdown ──────────────────────────────────────── */
.dm-cp-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0 4px;
  padding: 10px 12px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.dm-cp-bd-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.dm-cp-bd-name {
  font-weight: 600;
  color: var(--ink-muted);
  min-width: 60px;
}
.dm-cp-bd-name.is-me { color: var(--meg-green); }
.dm-cp-bd-correct { color: var(--meg-green); flex: 1; }
.dm-cp-bd-wrong   { color: var(--ink-faint); flex: 1; }
.dm-cp-bd-pts     { font-weight: 700; color: var(--ink); margin-left: auto; }

.dm-game-card-guess.correct { background: var(--surface-success); border-color: var(--meg-green); }
.dm-game-card-guess.wrong   { background: var(--surface-danger); border-color: var(--border-danger-strong); }
.dm-game-notice {
  font-size: 12px;
  color: var(--ink-muted);
  text-align: center;
  padding: 6px 0;
  font-style: italic;
}
.dm-result-scores {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 10px 0 6px;
}
.dm-result-player { flex: 1; min-width: 0; text-align: center; }
.dm-result-player.me .dm-result-name { color: var(--meg-green); font-weight: 700; }
.dm-result-name  { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.dm-result-score { font-size: 20px; font-weight: 800; color: var(--ink); }
.dm-result-found, .dm-result-picks {
  font-size: 11px; color: var(--ink-muted); margin-top: 4px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 3px;
}
.dm-result-found span, .dm-result-picks span {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
}
.dm-result-vs     { font-size: 11px; color: var(--ink-muted); align-self: center; flex-shrink: 0; }
.dm-result-winner { font-size: 14px; font-weight: 700; text-align: center; color: var(--ink); padding-top: 8px; }

/* ── DM result breakdown (upgraded) ────────────────────────────── */
.dm-result-breakdown {
  display: flex;
  gap: 0;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.dm-result-col {
  flex: 1;
  padding: 12px 10px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dm-result-col.me { background: var(--surface-success-muted); }
.dm-result-col-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-bottom: 2px;
}
.dm-result-col.me .dm-result-col-name { color: var(--meg-green); }
.dm-result-col-score {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
}
.dm-result-col-score span {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-left: 3px;
}
.dm-result-divider {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
}
.dm-result-pick-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dm-result-pick-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--ink);
  gap: 6px;
}
.dm-result-pick-pts {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.dm-result-pick-pts.positive { color: var(--meg-green); }
.dm-result-pick-pts.negative { color: var(--red-card); }
.dm-result-pick-events { font-size: 11px; margin-left: auto; margin-right: 4px; letter-spacing: -1px; }

/* ── DM Live Bar — match scorebar with clock, commentary, scores ── */
/* Reuses .tlb-* classes from thread-live-bar for consistent look */
.dm-live-bar {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--white);
}
.dm-live-bar.hidden { display: none !important; }

.dm-live-bar-clock-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 14px 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
}

/* Dark mode overrides for DM live bar */
body.mode-worst .dm-live-bar {
  background: var(--worst-bg);
  border-top-color: var(--worst-bg-sel);
}
body.mode-worst .dm-live-bar .tlb-commentary { color: var(--worst-amber); }
body.mode-worst .dm-live-bar .tlb-pts { color: var(--worst-text); }
body.mode-worst .dm-live-bar .tlb-side.right .tlb-pts { color: #b090ff; }
body.mode-worst .dm-live-bar .tlb-label { color: var(--worst-muted); }
body.mode-worst .dm-live-bar-clock-row { color: var(--worst-muted); }

.dm-match-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 280px; overflow-y: auto; }
.dm-match-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 8px 12px; background: var(--paper); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; text-align: left; width: 100%;
  font-size: 13px; gap: 2px;
}
.dm-match-btn:hover { background: var(--surface-success); border-color: var(--meg-green); }
.dm-match-btn span  { font-size: 11px; color: var(--ink-muted); }
.dm-draft-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.55); display: flex; align-items: flex-end;
}
.dm-draft-picker-inner {
  background: var(--white); width: 100%; max-height: 90vh; overflow-y: auto;
  border-radius: 16px 16px 0 0; padding: 16px 16px 32px;
}
.dm-draft-picker-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.dm-draft-picker-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.dm-draft-close-btn {
  background: none; border: none; font-size: 16px;
  color: var(--ink-muted); cursor: pointer; padding: 4px 8px;
}

/* ── DM game challenge tile ──────────────────────────────────── */
.dm-game-challenge {
  padding: 6px 0;
}
.dm-game-challenge-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--meg-green);
  border-radius: var(--radius);
}
.dm-game-challenge-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.dm-game-challenge-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.dm-game-challenge-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.dm-game-challenge-status {
  font-size: 12px;
  color: var(--ink-muted);
}
.dm-game-challenge-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.dm-game-btn {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}
.dm-game-btn--accept {
  background: var(--meg-green);
  color: #fff;
}
.dm-game-btn--accept:hover {
  opacity: 0.88;
}
.dm-game-btn--decline {
  background: var(--paper);
  color: var(--ink-muted);
  border: 1px solid var(--border);
}
.dm-game-btn--decline:hover {
  background: var(--border);
}

/* ── Unified game tiles ──────────────────────────────────────── */
/* Used by buildMegGameTileEl, buildGameTileEl, buildDugoutTileEl */
.game-tile-wrap,
.meg-game-tile-wrap {
  display: block;
  padding: 4px 0;
  cursor: pointer;
  width: 100%;
}
@media (max-width: 600px) {
  .game-tile-wrap,
  .meg-game-tile-wrap,
  .dugout-tile {
    padding: 4px 0;
    margin: 0 -16px;
    width: calc(100% + 32px);
  }
  .game-tile-inner {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}
.game-tile-wrap:hover .game-tile-inner,
.meg-game-tile-wrap:hover .game-tile-inner {
  background: var(--surface-success);
  border-color: var(--meg-accent);
}
.game-tile-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  width: 100%;
  transition: background 0.12s, border-color 0.12s;
}
/* Active accent: green left border */
.game-tile-inner.tile-active {
  border-left-color: var(--meg-accent);
}
/* Complete: muted styling */
.game-tile-inner.tile-complete {
  opacity: 0.85;
}
.game-tile-inner.tile-complete:hover {
  opacity: 1;
}
.game-tile-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.game-tile-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.game-tile-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.game-tile-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.game-tile-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.game-tile-result-row {
  padding: 2px 0 0 28px;   /* indent to align with tile-name (icon width + gap) */
}
.game-tile-result {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}

/* ── Session tile — consolidated games list ──────────────────────────────── */
.session-games-list {
  padding: 0 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.session-games-list.collapsed {
  max-height: 0;
  padding: 0;
}
.session-game-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-family: var(--font-body);
  color: var(--ink);
  padding: 3px 0;
}
.session-game-row.session-game-done {
  color: var(--ink-muted);
}
.session-game-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-game-result {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.cta-expand {
  cursor: pointer;
}

/* Quit game: greyed out tile */
.game-tile-inner.tile-quit {
  opacity: 0.45;
  border-left-color: transparent;
}
.game-tile-inner.tile-quit:hover { opacity: 0.55; }
.tile-result-quit {
  color: var(--ink-faint, #aaa);
  font-style: italic;
}
.game-tile-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
/* CTA button (PLAY / VIEW) */
.game-tile-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s;
}
.game-tile-cta.cta-play {
  color: #fff;
  background: var(--meg-accent);
  border-color: var(--meg-accent);
}
.game-tile-cta.cta-play:hover {
  background: var(--meg-green);
  border-color: var(--meg-green);
}
.game-tile-cta.cta-view {
  color: var(--ink-muted);
  background: transparent;
  border-color: var(--border);
}
.game-tile-cta.cta-view:hover {
  color: var(--ink);
  border-color: var(--ink-muted);
}
/* Status badge */
.tile-status {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.tile-status-waiting  { color: var(--worst-amber); }
.tile-status-active   { color: var(--meg-accent); }
.tile-status-complete { color: var(--ink-muted); }
/* Cancel button */
.tile-cancel {
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: 4px;
  flex-shrink: 0;
  line-height: 1;
}
.tile-cancel:hover { color: var(--colour-danger); }
/* Member avatars */
.tile-members {
  display: flex;
  align-items: center;
  gap: 3px;
}
.tile-member-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--meg-accent);
  color: #fff;
  font-size: 8px;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tile-member-more {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  margin-left: 2px;
}
/* Derby Day scoreboard card */
.dd-scoreboard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--paper);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  margin: 6px 0;
}
.dd-scoreboard .dd-player { color: var(--ink); font-weight: 600; }
.dd-scoreboard .dd-score  { font-size: 18px; font-weight: 700; color: var(--ink); }
.dd-scoreboard .dd-sep    { color: var(--ink-muted); }
.dd-scoreboard .dd-qprog  { font-size: 10px; color: var(--ink-muted); margin-left: 8px; }
/* Derby Day result card */
.dd-result-card {
  padding: 14px 16px;
  background: var(--paper);
  border-radius: 8px;
  border: 1px solid var(--border);
  text-align: center;
  margin: 6px 0;
}
.dd-result-card .dd-winner { font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--meg-green); }
.dd-result-card .dd-final-score { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); margin-top: 4px; }

/* ── Cult Hero cards ──────────────────────────────────────────── */
.ch-clue-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.ch-clue-progress { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); }
.ch-clue-num { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.ch-clue-text { font-size: 14px; line-height: 1.5; color: var(--ink); }
.ch-correct-answer { font-size: 20px; font-weight: 700; color: var(--ink); margin: 6px 0 2px; }
.ch-pts-badge { font-family: var(--font-mono); font-size: 12px; color: var(--meg-accent); margin-bottom: 6px; }
.ch-bio { font-size: 12px; color: var(--ink-muted); margin-bottom: 10px; font-style: italic; }
.ch-reveal-clues { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ch-reveal-clue { display: flex; gap: 8px; font-size: 12px; color: var(--ink-muted); line-height: 1.4; }
.ch-reveal-clue .ch-clue-num { min-width: 18px; font-size: 10px; padding-top: 1px; }

/* ── Nutmeg or Myth cards ─────────────────────────────────────── */
.nom-statement { font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--ink); margin: 8px 0; }
.nom-statement-sm { font-size: 12px; color: var(--ink-muted); margin: 4px 0 6px; }
.nom-buttons { display: flex; gap: 10px; margin-top: 12px; }
.nom-btn {
  flex: 1; padding: 10px 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  border: 1.5px solid; border-radius: 4px; cursor: pointer;
  background: transparent; transition: opacity 0.15s;
}
.nom-btn-nutmeg { color: var(--meg-accent); border-color: var(--meg-accent); }
.nom-btn-myth   { color: var(--colour-danger); border-color: var(--colour-danger); }
.nom-btn:disabled { opacity: var(--disabled-opacity); cursor: default; }
.nom-btn-selected { opacity: 1; }
.nom-hint { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); margin-top: 8px; }
.nom-reveal-answer { font-size: 16px; font-weight: 700; margin: 6px 0; }
.nom-reveal-nutmeg { color: var(--meg-accent); }
.nom-reveal-myth   { color: var(--colour-danger); }
.nom-context { font-size: 12px; color: var(--ink-muted); line-height: 1.4; }
.nom-scores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nom-score-entry { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); }

/* ── Round Robin cards (legacy thread view) ────────────────────── */
.rr-current-player { font-size: 13px; font-weight: 600; color: var(--ink-muted); margin-top: 6px; }
.rr-letter { font-size: 52px; font-weight: 900; font-family: var(--font-mono); color: var(--meg-accent); line-height: 1; margin: 6px 0; }
.rr-active-players { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.rr-player-chip { font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 12px; color: var(--ink-muted); }
.rr-player-current { border-color: var(--meg-accent); color: var(--meg-accent); font-weight: 700; }
.rr-winner-name { font-size: 22px; font-weight: 700; color: var(--ink); margin: 8px 0 2px; }
.rr-winner-label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); }

/* ── Round Robin full-screen game page ─────────────────────────── */
.rr-game-page {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
  z-index: 110;
  background: var(--paper);
  overflow: hidden;
}

/* Header */
.rr-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.rr-page-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rr-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--ink-muted);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.rr-close-btn:hover { background: var(--paper); color: var(--ink); }

/* Phase panels */
.rr-phase {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 16px;
  overflow-y: auto;
  gap: 16px;
}

/* ─ Lobby ─ */
.rr-lobby-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rr-lobby-hint {
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
}
.rr-start-btn {
  padding: 10px 28px;
  background: var(--meg-green);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 0.15s;
}
.rr-start-btn:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
.rr-start-btn:not(:disabled):hover { opacity: 0.85; }
.rr-player-lobby { background: var(--paper); }

/* ─ Active ─ */
.rr-arena {
  width: 100%;
  max-width: 320px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.rr-whose-turn {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-height: 18px;
}
.rr-letter-big {
  font-size: 72px;
  font-weight: 900;
  font-family: var(--font-mono);
  color: var(--meg-accent);
  line-height: 1;
  margin: 8px 0;
}
.rr-timer-wrap {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 16px;
}

/* Player chips strip */
.rr-player-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  max-width: 360px;
}
.rr-player-current {
  border-color: var(--meg-accent);
  color: var(--meg-accent);
  font-weight: 700;
}
.rr-player-me {
  border-color: var(--ink);
  color: var(--ink);
}
.rr-player-eliminated {
  opacity: var(--disabled-opacity);
  text-decoration: line-through;
}
.rr-chip-sep {
  font-size: 10px;
  color: var(--border);
  align-self: center;
  padding: 0 2px;
}

/* VAR section */
.rr-var-wrap {
  width: 100%;
  max-width: 320px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px 10px;
  text-align: center;
}
.rr-var-answer-row {
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.rr-var-answer-name {
  font-weight: 700;
  color: var(--ink);
}
.rr-var-btn {
  padding: 8px 20px;
  background: var(--red-card);
  color: var(--white);
  border: none;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: opacity 0.15s;
}
.rr-var-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rr-var-btn:not(:disabled):hover { opacity: 0.85; }
.rr-var-timer-wrap {
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  overflow: hidden;
  margin-top: 8px;
}

/* Event log */
.rr-event-log {
  width: 100%;
  max-width: 360px;
  max-height: 180px;
  overflow-y: auto;
  font-size: 12px;
  color: var(--ink-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rr-event-item {
  padding: 3px 0;
  border-bottom: 1px solid var(--border-faint, var(--border));
}
.rr-event-item:last-child { border-bottom: none; }

/* ─ Done ─ */
.rr-done-wrap { text-align: center; }
.rr-done-winner {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
}
.rr-done-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.rr-done-close-btn {
  padding: 10px 28px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  margin-top: 16px;
  color: var(--ink);
  transition: background 0.12s;
}
.rr-done-close-btn:hover { background: var(--white); }

/* Input bar at bottom of game page */
.rr-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--white);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.rr-input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--paper);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}
.rr-input:focus { border-color: var(--meg-accent); background: var(--white); }
.rr-input:disabled { opacity: 0.45; cursor: not-allowed; }
.rr-submit-btn {
  padding: 9px 14px;
  background: var(--meg-green);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.rr-submit-btn:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
.rr-submit-btn:not(:disabled):hover { opacity: 0.85; }

/* ── Reaction picker popup ──────────────────────────────────── */
.reaction-picker {
  position: fixed;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  display: flex;
  gap: 2px;
  box-shadow: var(--shadow-md);
  z-index: 310;
  animation: menuFadeIn 0.12s ease;
}
.rp-emoji {
  font-size: 20px;
  padding: 4px 5px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.1s, background 0.1s;
}
.rp-emoji:hover { background: var(--paper); transform: scale(1.2); }
.rp-more {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-muted);
  font-family: var(--font-sans);
}

/* ── Full emoji reaction grid ─────────────────────────────────── */
.reaction-grid {
  position: fixed;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  width: 280px;
  max-height: 320px;
  box-shadow: var(--shadow-md);
  z-index: 310;
  animation: menuFadeIn 0.12s ease;
  display: flex;
  flex-direction: column;
}
.reaction-grid-header {
  padding: 0 0 6px;
}
.reaction-grid-header .emoji-search {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}
.reaction-grid-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  overflow-y: auto;
  max-height: 240px;
}
.reaction-grid-body .emoji-grid-btn {
  font-size: 20px;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  border: none;
  transition: background 0.1s, transform 0.1s;
  line-height: 1;
}
.reaction-grid-body .emoji-grid-btn:hover {
  background: var(--paper);
  transform: scale(1.15);
}

/* Legacy .meg-msg-actions — kept for compatibility */

/* ── Create room modal ──────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: var(--white);
  border-radius: var(--radius);
  width: 100%;
  max-width: 380px;
  margin: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow: hidden;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.modal-close {
  font-size: 14px;
  color: var(--ink-muted);
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.modal-close:hover { background: var(--paper); }

.modal-body { padding: 16px 20px; }
.modal-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.modal-optional { font-size: 10px; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.modal-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  outline: none;
}
.modal-input:focus { border-color: var(--meg-green); background: var(--surface-float); }
.modal-footer {
  padding: 12px 20px 16px;
  display: flex;
  justify-content: flex-end;
}
.modal-btn-primary {
  background: var(--meg-green);
  color: var(--text-on-brand, #F7F5F0);
  padding: 9px 20px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}
.modal-btn-primary:hover:not(:disabled) { background: var(--meg-accent); }
.modal-btn-primary:disabled { opacity: 0.4; cursor: default; }

/* ── Room header indicator ──────────────────────────────────── */

/* Private room lock icon */
.nav-item .room-type-icon {
  font-size: 10px;
  margin-left: auto;
  color: var(--ink-faint);
}

/* ═══════════════════════════════════════════════════════════════
   SPRINT 2 — Conversational onboarding, thread slide-in, UX polish
   ═══════════════════════════════════════════════════════════════ */

/* ── Date pills (Slack-style) ────────────────────────────────── */
.date-pill-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--space-4) var(--space-4) var(--space-2);
  flex-shrink: 0;
}
.date-pill-line {
  flex: 1;
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}
.date-pill {
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Legacy alias */

/* ── Message edit/delete context menu ───────────────────────── */
.msg-ctx-item.danger { color: var(--red-card); }
.msg-ctx-item.danger:hover { background: var(--colour-danger-bg, #fff5f5); }

/* ── Edited indicator ───────────────────────────────────────── */
.msg-edited-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-faint);
  margin-left: 4px;
}

/* ── Modal textarea ─────────────────────────────────────────── */
.modal-textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
}
.modal-footer.spaced {
  justify-content: space-between;
}
.modal-btn-secondary {
  padding: 9px 16px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink-muted);
  border: 1px solid var(--border);
  background: var(--paper);
  transition: background 0.12s;
}
.modal-btn-secondary:hover { background: var(--border); }

/* ── User menu popup ────────────────────────────────────────── */
.user-menu-btn {
  color: rgba(255,255,255,0.4);
  padding: 4px;
  border-radius: 4px;
  margin-left: auto;
  transition: color 0.1s, background 0.1s;
}
.user-menu-btn:hover { color: white; background: rgba(255,255,255,0.1); }

.user-menu {
  position: absolute;
  bottom: 60px;
  left: 12px;
  width: calc(var(--sidebar-w) - 24px);
  background: var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 500;
  overflow: hidden;
  animation: menuFadeIn 0.12s ease;
}
.user-menu-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.user-menu-name {
  display: block;
  color: white;
  font-size: 13px;
  font-weight: 600;
}
.user-menu-club {
  display: block;
  color: rgba(255,255,255,0.45);
  font-family: var(--font-mono);
  font-size: 10px;
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.user-menu-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.08s, color 0.08s;
}
.user-menu-item:hover { background: rgba(255,255,255,0.08); color: white; }

/* ── Channel details dropdown ───────────────────────────────── */
.channel-details-menu {
  position: fixed;
  top: 52px;
  right: 12px;
  width: 260px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);
  z-index: 400;
  overflow: hidden;
  animation: menuFadeIn 0.13s ease;
}
.cdm-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.cdm-icon {
  color: var(--ink-muted);
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}
.cdm-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cdm-type {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink-muted);
  flex-shrink: 0;
}
.cdm-desc {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.45;
  border-bottom: 1px solid var(--border);
  min-height: 32px;
}
.cdm-desc:empty::after {
  content: 'No description.';
  color: var(--ink-muted);
  opacity: 0.5;
}
.cdm-meta {
  padding: 9px 14px;
  font-size: 12px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
.cdm-actions {
  padding: 6px 10px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cdm-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
  transition: background 0.12s;
}
.cdm-action-btn:hover { background: var(--paper); }
.cdm-action-danger { color: var(--colour-danger); }
.cdm-action-danger:hover { background: var(--surface-danger); }

/* ── Presence indicators ────────────────────────────────────── */
.presence-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: auto;
}
.presence-meg { background: var(--meg-accent); }

.user-presence-badge {
  position: absolute;
  bottom: 0; right: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--meg-green);
}
.user-presence-badge.online  { background: var(--colour-live-dot); }
.user-presence-badge.offline { background: var(--ink-muted); }

.room-member-presence.online  { background: var(--colour-live-dot); }
.room-member-presence.offline { background: var(--ink-faint); }

/* ── Room header count ──────────────────────────────────────── */
.header-room-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}

/* ═══════════════════════════════════════════════════════════════
   SPRINT 3 — DMs, Activity, Room member list
   ═══════════════════════════════════════════════════════════════ */

/* ── DMs panel (sidebar tab) ────────────────────────────────── */
.dms-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.dms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px;
}
.dms-heading {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.dms-new-btn {
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 4px;
  transition: color 0.1s, background 0.1s;
}
.dms-new-btn:hover { color: white; background: rgba(255,255,255,0.1); }

.dms-list { padding: 2px 0; }
.dms-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.1s;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
}
.dms-item:hover { background: rgba(255,255,255,0.07); }
.dms-item.active { background: rgba(255,255,255,0.12); color: white; }
.dms-item.dms-item-unread { color: white; font-weight: 700; }
.dms-item-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.dms-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tab badge overlay */
.tab-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tab-dm-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  background: var(--colour-danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}
.tab-btn.has-dm-unread > span:last-child,
.tab-btn.has-activity-unread > span:last-child,
.tab-btn.has-home-unread > span:last-child {
  font-weight: 700;
  color: #fff;
}
.tab-activity-badge,
.tab-home-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  background: var(--colour-danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

.dms-unread-badge {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent, #4A7C59);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.dms-item-preview {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dms-empty {
  padding: 16px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  text-align: center;
}

/* DM user search results */
.dm-user-results {
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.dm-user-result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  cursor: pointer;
  border-radius: 6px;
  padding: 8px 10px;
  transition: background 0.1s;
}
.dm-user-result-item:hover { background: var(--paper); }

/* ── Activity panel (sidebar tab) ───────────────────────────── */
.activity-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.activity-header {
  padding: 10px 16px 6px;
}
.activity-heading {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.activity-list { padding: 0; }
.activity-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  color: rgba(255,255,255,0.35);
  font-size: 13px;
  text-align: center;
}

/* ── Games panel (sidebar tab) ──────────────────────────────── */
/* ── Profile Page (replaces Games panel) ──────────────────── */
.profile-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 24px;
}
.pp-loading {
  padding: 32px 16px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}

/* Identity hero */
.pp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pp-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 18px; font-weight: 700;
  color: #fff; margin-bottom: 10px;
  border: 2px solid rgba(255,255,255,0.15);
}
.pp-name {
  font-family: var(--font-serif); font-size: 20px; font-weight: 600;
  color: #fff; letter-spacing: -0.3px;
}
.pp-club {
  font-family: var(--font-sans); font-size: 12px;
  color: rgba(255,255,255,0.5); margin-top: 2px;
}
.pp-other-teams {
  font-size: 11px; color: rgba(255,255,255,0.35);
  margin-top: 6px; text-align: center;
}
.pp-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
}
.pp-member-since {
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,0.3); letter-spacing: 0.5px;
}
.pp-diff-chip {
  font-family: var(--font-mono); font-size: 8px;
  padding: 2px 6px; border-radius: 3px;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.pp-leagues {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
  justify-content: center;
}
.pp-league-chip {
  font-family: var(--font-mono); font-size: 8px;
  padding: 2px 6px; border-radius: 3px;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4);
  letter-spacing: 0.3px;
}

/* Sections */
.pp-section {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pp-section-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.3); margin-bottom: 10px;
}

/* Interview answers */
.pp-interview-grid {
  display: flex; flex-direction: column; gap: 6px;
}
.pp-answer-tile {
  padding: 8px 10px;
  border-left: 3px solid var(--meg-green);
  background: rgba(255,255,255,0.03);
  border-radius: 0 6px 6px 0;
}
.pp-answer-label {
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,0.35); margin-bottom: 3px;
}
.pp-answer-value {
  font-family: var(--font-serif); font-size: 13px;
  color: #fff; line-height: 1.3;
}
.pp-answer-note {
  font-family: var(--font-sans); font-size: 11px;
  color: rgba(255,255,255,0.4); font-style: italic;
  margin-top: 2px;
}

/* Interview CTA */
.pp-interview-cta {
  text-align: center; padding: 16px 0;
}
.pp-cta-text {
  font-size: 12px; color: rgba(255,255,255,0.4);
  margin-bottom: 10px;
}
.pp-cta-btn {
  font-family: var(--font-mono); font-size: 11px;
  padding: 8px 16px; border: none; border-radius: 6px;
  background: var(--meg-green); color: #fff;
  cursor: pointer; font-weight: 600;
}
.pp-cta-btn:hover { opacity: 0.9; }

/* Perfect Player */
.pp-perfect-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.pp-perfect-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
}
.pp-perfect-icon { font-size: 16px; }
.pp-perfect-detail { display: flex; flex-direction: column; }
.pp-perfect-attr {
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.pp-perfect-name {
  font-family: var(--font-sans); font-size: 12px;
  color: #fff; font-weight: 500;
}
.pp-verdict {
  margin-top: 10px; padding: 10px 12px;
  background: rgba(45,90,61,0.12);
  border-radius: 6px; border-left: 3px solid var(--meg-green);
}
.pp-verdict-label {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--meg-green); text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pp-verdict-text {
  font-size: 12px; color: rgba(255,255,255,0.7);
  display: block; margin-top: 4px; line-height: 1.4;
}

/* Perfect Player builder */
.pp-builder-slots {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 12px;
}
.pp-builder-slot {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
}
.pp-builder-icon { font-size: 16px; }
.pp-builder-info { display: flex; flex-direction: column; min-width: 70px; }
.pp-builder-attr {
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,0.5); font-weight: 600;
}
.pp-builder-sub {
  font-size: 9px; color: rgba(255,255,255,0.25);
}
.pp-builder-input {
  flex: 1; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px; padding: 5px 8px;
  font-family: var(--font-sans); font-size: 12px;
  color: #fff; outline: none;
}
.pp-builder-input:focus {
  border-color: var(--meg-green);
  background: rgba(255,255,255,0.08);
}
.pp-builder-submit { margin-top: 4px; }

/* Trivia rating hero */
.pp-trivia-rating {
  text-align: center; padding: 8px 0 14px;
}
.pp-rating-number {
  font-family: var(--font-mono); font-size: 36px;
  font-weight: 700; color: #fff; letter-spacing: -1px;
}
.pp-rating-label {
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,0.35); text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* W/D/L record */
.pp-record-strip {
  display: flex; justify-content: center; gap: 12px;
  padding: 8px 0;
}
.pp-record-item {
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 600; color: rgba(255,255,255,0.5);
}
.pp-record-item.pp-w { color: var(--meg-green); }
.pp-record-item.pp-l { color: var(--red-card, #c0392b); }

/* Game bars */
.pp-game-bars { margin-top: 10px; }
.pp-game-bar {
  display: grid; grid-template-columns: 80px 1fr 40px;
  align-items: center; gap: 8px;
  padding: 4px 0;
}
.pp-bar-label {
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,0.45); letter-spacing: 0.3px;
}
.pp-bar-track {
  height: 6px; background: rgba(255,255,255,0.06);
  border-radius: 3px; overflow: hidden;
}
.pp-bar-fill {
  height: 100%; background: var(--meg-green);
  border-radius: 3px; min-width: 2px;
  transition: width 0.5s ease;
}
.pp-bar-stat {
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,0.4); text-align: right;
}

/* Quiz stats */
.pp-quiz-stats { margin-top: 10px; }
.pp-quiz-row {
  display: flex; justify-content: space-between;
  padding: 4px 0;
}
.pp-quiz-label {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(255,255,255,0.4);
}
.pp-quiz-value {
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 600; color: #fff;
}

/* Empty state */
.pp-empty-note {
  font-size: 12px; color: rgba(255,255,255,0.25);
  padding: 8px 0;
}

/* Share card button */
.pp-share-section { text-align: center; border-bottom: none; }
.pp-share-btn {
  font-family: var(--font-mono); font-size: 11px;
  padding: 10px 24px; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; background: transparent;
  color: #fff; cursor: pointer; font-weight: 600;
  letter-spacing: 0.5px; transition: all 0.2s;
}
.pp-share-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--meg-green);
  color: var(--meg-green);
}

/* Card overlay modal */
.pp-card-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center;
}
.pp-card-modal {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
}
.pp-card-canvas-wrap {
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.pp-card-actions { display: flex; gap: 12px; }
.pp-card-download, .pp-card-close {
  font-family: var(--font-mono); font-size: 12px;
  padding: 8px 20px; border: none; border-radius: 6px;
  cursor: pointer; font-weight: 600;
}
.pp-card-download {
  background: var(--meg-green); color: #fff;
}
.pp-card-close {
  background: rgba(255,255,255,0.1); color: #fff;
}

/* ── Member list panel ──────────────────────────────────────── */
.member-panel {
  width: 0;
  flex-shrink: 0;
  background: var(--white);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s ease;
}
.member-panel.open { width: 220px; }

.member-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.member-panel-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.member-panel-close {
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 4px;
  transition: background 0.1s;
}
.member-panel-close:hover { background: var(--paper); }

/* Invite friends section */
.member-panel-invite-section {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.member-panel-invite-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.member-panel-invite-btn:hover {
  border-color: var(--meg-green);
  color: var(--meg-green);
}
.member-invite-search {
  margin-top: 8px;
}
.member-invite-recent {
  margin-bottom: 10px;
}
.member-invite-input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  background: var(--white);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.member-invite-input:focus {
  border-color: var(--meg-green);
}
.member-invite-results {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  max-height: 200px;
  overflow-y: auto;
}
.member-invite-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: default;
}
.member-invite-item:hover {
  background: var(--paper);
}
.member-invite-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-invite-add-btn {
  padding: 4px 10px;
  border: 1px solid var(--meg-green);
  border-radius: 6px;
  background: transparent;
  color: var(--meg-green);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.member-invite-add-btn:hover {
  background: var(--meg-green);
  color: var(--white);
}
.member-invite-add-btn.member-invite-added {
  border-color: var(--border);
  color: var(--ink-faint);
  cursor: default;
}
.member-invite-status {
  font-size: 11px;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.member-invite-already {
  opacity: 0.5;
}
.member-invite-empty {
  padding: 10px 4px;
  font-size: 12px;
  color: var(--ink-faint);
  list-style: none;
}

.member-panel-section {
  padding: 8px 0 4px;
}
.member-panel-heading {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 14px 4px;
}
.member-list { padding: 0; }
.member-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--ink);
  border-radius: 6px;
  transition: background 0.1s;
}
.member-list-item[style*="pointer"]:hover {
  background: var(--paper);
}
.member-list-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-muted);
  flex-shrink: 0;
  position: relative;
}
.member-list-presence {
  position: absolute;
  bottom: 0; right: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid var(--white);
}
.member-list-presence.online  { background: var(--colour-live-dot); }
.member-list-presence.offline { background: var(--ink-faint); }
.member-list-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   SPRINT 4 — Search, Emoji picker, WCAG polish
   ═══════════════════════════════════════════════════════════════ */

/* ── Global search bar ──────────────────────────────────────── */
.search-bar {
  position: fixed;
  top: 0; left: var(--sidebar-w); right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  animation: fadeIn 0.12s ease;
}
.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--ink);
  background: transparent;
}
.search-input::placeholder { color: var(--ink-faint); }
.search-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
  background: none;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}
.search-kbd:hover { color: var(--ink-muted); border-color: var(--ink-faint); }
.search-results {
  position: fixed;
  top: var(--header-h);
  left: var(--sidebar-w);
  right: 0;
  max-height: 60vh;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.search-result-item {
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  border-bottom: 1px solid var(--paper);
  cursor: pointer;
  transition: background 0.08s;
}
.search-result-item:hover { background: var(--paper); }
.search-result-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 2px;
}

/* Search result → message flash highlight */
@keyframes search-flash {
  0%   { background: var(--accent, #5a8dee); }
  100% { background: transparent; }
}
.search-flash {
  animation: search-flash 1.5s ease-out;
}

/* ── Emoji keyboard picker ──────────────────────────────────── */
.emoji-picker-btn {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  transition: color 0.12s, background 0.12s;
}
.emoji-picker-btn:hover { color: var(--ink); background: var(--paper); }

.emoji-picker {
  position: fixed;
  bottom: 80px;
  right: 16px;
  width: 320px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  z-index: 320;
  overflow: hidden;
  animation: menuFadeIn 0.12s ease;
}
.emoji-picker-header {
  padding: 10px;
  border-bottom: 1px solid var(--border);
}
.emoji-search {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--paper);
  outline: none;
}
.emoji-search:focus { border-color: var(--meg-green); }
.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.emoji-grid-btn {
  font-size: 20px;
  padding: 5px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  line-height: 1;
  transition: background 0.08s, transform 0.08s;
}
.emoji-grid-btn:hover { background: var(--paper); transform: scale(1.15); }

/* ── DM chat view in main panel ─────────────────────────────── */
/* DM uses the standard .header-left from header-view; no override needed */
.header-dm-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.header-dm-club {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted, #888);
  line-height: 1.2;
}
.header-dm-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
.header-dm-presence {
  display: none; /* hidden until presence tracking is active */
}
.header-dm-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* ── WCAG / Accessibility polish ────────────────────────────── */

/* Skip link */
.skip-link {
  position: fixed;
  top: -100px;
  left: 8px;
  background: var(--meg-green);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  z-index: 9999;
  transition: top 0.1s;
}
.skip-link:focus { top: 8px; outline: 2px solid white; outline-offset: 2px; }

/* Focus rings — WCAG 2.1 AA (min 3:1 contrast on --paper) */
:focus-visible {
  outline: 2px solid var(--meg-green);
  outline-offset: 2px;
}

/* Remove focus ring on mouse interaction (pointer leaves :focus-visible) */
.sidebar button:focus:not(:focus-visible),
.main button:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}

/* Ensure interactive elements meet 44×44 min touch target on mobile */
@media (pointer: coarse) {
  .rp-emoji, .room-action-btn, .tab-btn, .nav-item, .room-item { min-height: 44px; }
  .send-btn, .play-btn, .emoji-picker-btn { width: 44px; height: 44px; }
}
/* Tighter touch targets in the input bar on very small phones */
@media (pointer: coarse) and (max-width: 380px) {
  .input-bar .send-btn,
  .input-bar .play-btn,
  .input-bar .emoji-picker-btn { width: 38px; height: 38px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Game menu (already visible on input-bar context) ───────── */
@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive: mobile ─────────────────────────────────────── */
@media (max-width: 640px) {
  .burger-btn { display: flex; }
  .header-room-desc { display: none; }
  .header-room-divider { display: none; }
  .member-panel {
    display: flex;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 0;
    z-index: 330;
    border-left: none;
    box-shadow: -4px 0 20px rgba(0,0,0,0.18);
    transition: width 0.22s ease;
    -webkit-overflow-scrolling: touch;
  }
  .member-panel.open { width: min(280px, 85vw); }
  .search-bar { left: 0; }
  .search-results { left: 0; }
  .emoji-picker { right: 0; left: 0; width: 100%; border-radius: var(--radius) var(--radius) 0 0; bottom: 70px; }
}

@media (min-width: 641px) and (max-width: 900px) {
  .member-panel.open { width: 0; }
}

/* ── Live Draft Tile (in room feed) ────────────────────────── */
.live-draft-tile {
  cursor: pointer;
  margin: 4px 0;
}
.live-draft-tile:hover .ldt-inner {
  border-color: var(--meg-accent);
}
.ldt-inner {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--bg-elevated);
  transition: border-color 0.15s;
}
.ldt-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ldt-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.ldt-match-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary);
  line-height: 1.3;
}
.ldt-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ldt-phase {
  color: var(--meg-accent);
}
.ldt-cta {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--meg-accent);
  letter-spacing: 0.06em;
}

/* Two-button CTA row on live-draft tile */
.ldt-ctas {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}
.ldt-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.15s, color 0.15s;
}
.ldt-btn-join {
  color: var(--meg-accent);
  border-color: var(--meg-accent);
}
.ldt-btn-join:hover {
  background: var(--meg-accent);
  color: var(--bg-primary);
}
.ldt-btn-add {
  color: var(--ink-muted);
  border-color: var(--border);
}
.ldt-btn-add:hover {
  color: var(--ink-primary);
  border-color: var(--ink-muted);
}

/* ── Draft thread: header (now uses .game-block via makeBlock) ─ */
.draft-match-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-top: 8px;
}
.draft-vs {
  color: var(--ink-muted);
  font-size: 11px;
}
.draft-kickoff {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* ── Draft picker ───────────────────────────────────────────── */
.draft-picker {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.draft-mode-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.draft-mode-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.draft-mode-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.draft-mode-btn {
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.draft-mode-btn.active {
  background: var(--meg-accent);
  color: #000;
}
.draft-player-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.draft-player-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elevated);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
  min-width: 0;
}
.draft-player-chip:hover {
  background: var(--bg-hover);
}
.draft-player-chip.selected {
  background: color-mix(in srgb, var(--meg-accent) 15%, transparent);
  border-color: var(--meg-accent);
}
.dpc-shirt {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-muted);
  width: 16px;
  text-align: center;
}
.dpc-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.dpc-pos {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.draft-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  gap: 12px;
}
.draft-pick-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.draft-lock-btn {
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--meg-accent);
  color: #000;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.12s;
}
.draft-lock-btn:disabled {
  opacity: var(--disabled-opacity);
  cursor: default;
}

/* ── Pick confirm ───────────────────────────────────────────── */
.draft-pick-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 0;
  text-align: center;
}
.dpc-icon {
  font-size: 28px;
  color: var(--meg-accent);
}
.dpc-meta {
  font-size: 12px;
  color: var(--ink-muted);
}
.dpc-waiting {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* ── Draft reveal ───────────────────────────────────────────── */
.draft-reveal {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.draft-reveal-grid {
  display: grid;
  gap: 10px;
}
.draft-reveal-grid.cols-1 { grid-template-columns: 1fr; }
.draft-reveal-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.draft-reveal-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.draft-reveal-col {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--bg-elevated);
}
.drc-name {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.drc-mode {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.drc-mode.worst { color: #e05; }
.drc-mode.best  { color: var(--meg-accent); }
.drc-picks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.drc-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 3px;
}
.drc-pick.shared {
  background: color-mix(in srgb, #e05 12%, transparent);
}
.drc-pick-name {
  color: var(--ink-primary);
}
.drc-pick-pos {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-muted);
}
.draft-overlap-note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #e05;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Draft live feed ────────────────────────────────────────── */
.draft-live {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.draft-event-stream {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 300px;
  overflow-y: auto;
}
/* Draft events now use .match-event-tile (shared with archived game) */

/* ── Draft leaderboard ──────────────────────────────────────── */
.draft-leaderboard {
  overflow: hidden;
}
.dlb-mode-title {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  padding: 6px 10px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.dlb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.dlb-row:last-child { border-bottom: none; }
.dlb-rank {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  width: 16px;
}
.dlb-name { flex: 1; }
.dlb-score {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--meg-accent);
}

/* ── Live Draft Rebuild: New Components ─────────────────────────────────────── */

/* Per-team counter in picker */
.draft-team-counter {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.8;
  margin-bottom: 8px;
}

/* Team-full disabled state */
.draft-player-team-full {
  opacity: 0.35;
  pointer-events: none;
  border-color: var(--ink-muted, #555) !important;
}

/* Captain section in picker */
.draft-captain-section {
  margin-top: 16px;
  padding: 16px;
  background: var(--surface-raised, rgba(255,255,255,0.04));
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}
.draft-captain-header {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  text-align: center;
}
.draft-captain-options {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.draft-captain-btn {
  flex: 1;
  padding: 10px 8px;
  border-radius: 8px;
  border: 2px solid var(--border, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--ink, #fff);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.draft-captain-btn.active {
  border-color: var(--meg-green, #4ecdc4);
  background: rgba(78, 205, 196, 0.12);
  color: var(--meg-green, #4ecdc4);
}
.draft-captain-label {
  font-size: 12px;
  color: var(--ink-muted, #888);
  margin-bottom: 8px;
}
.draft-captain-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.draft-captain-player {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--ink, #fff);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.draft-captain-player.selected {
  border-color: var(--amber, #f5a623);
  background: rgba(245, 166, 35, 0.15);
  color: var(--amber, #f5a623);
}

/* Edit squad button */
.draft-edit-btn {
  margin-top: 12px;
  padding: 10px 20px;
  border-radius: 8px;
  border: 2px solid var(--meg-green, #4ecdc4);
  background: transparent;
  color: var(--meg-green, #4ecdc4);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.draft-edit-btn:hover {
  background: rgba(78, 205, 196, 0.1);
}

/* ── Reveal: Overlap bars ──────────────────────────────────────────────────── */
.draft-reveal-overlaps {
  margin: 12px 0 16px;
  padding: 12px;
  background: var(--surface-raised, rgba(255,255,255,0.03));
  border-radius: 8px;
}
.dro-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  position: relative;
}
.dro-name {
  flex: 0 0 120px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dro-fill {
  height: 20px;
  background: linear-gradient(90deg, rgba(78,205,196,0.3), rgba(78,205,196,0.08));
  border-radius: 4px;
  min-width: 4px;
  transition: width 0.5s ease;
}
.dro-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted, #888);
  white-space: nowrap;
}

/* Unique picks */
.draft-reveal-uniques {
  margin: 8px 0 12px;
}
.dru-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-muted, #888);
  margin-bottom: 6px;
}
.dru-tag {
  display: inline-block;
  padding: 3px 8px;
  margin: 2px 4px 2px 0;
  font-size: 11px;
  border-radius: 4px;
  background: rgba(245, 166, 35, 0.1);
  color: var(--amber, #f5a623);
  font-weight: 500;
}

/* Captain cluster */
.draft-reveal-captains {
  font-size: 13px;
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 6px;
  background: rgba(155, 89, 182, 0.1);
  border: 1px solid rgba(155, 89, 182, 0.2);
}
.drc-cap-icon {
  font-weight: 700;
  margin-right: 4px;
}

/* Mode split */
.draft-reveal-modes {
  font-size: 12px;
  text-align: center;
  color: var(--ink-muted, #888);
  padding: 6px 0;
}

/* Captain badge in reveal picks */
.drc-captain-badge {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  background: var(--amber, #f5a623);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}
.drc-pick.captain {
  border-left: 2px solid var(--amber, #f5a623);
  padding-left: 6px;
}

/* ── Halftime Swap Card ────────────────────────────────────────────────────── */
.ht-swap-card {
  border-left: 3px solid var(--purple, #9b59b6) !important;
}
.ht-swap-wrap {
  padding: 4px 0;
}
.ht-swap-header {
  font-size: 13px;
  color: var(--ink-muted, #888);
  margin-bottom: 12px;
}
.ht-swap-xi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.ht-swap-xi-btn {
  padding: 8px 6px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: var(--surface-raised, rgba(255,255,255,0.03));
  color: var(--ink, #fff);
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.ht-swap-xi-btn.selected-out {
  border-color: var(--red, #e74c3c);
  background: rgba(231, 76, 60, 0.15);
  box-shadow: 0 0 8px rgba(231, 76, 60, 0.2);
}
.hsx-pos {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--ink-muted, #888);
  margin-bottom: 2px;
}
.hsx-name {
  font-weight: 600;
}

.ht-swap-available {
  margin: 12px 0;
  padding: 12px;
  background: var(--surface-raised, rgba(255,255,255,0.02));
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}
.ht-swap-available.hidden { display: none; }
.ht-swap-avail-label {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--meg-green, #4ecdc4);
}
.ht-swap-avail-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ht-swap-grp-label {
  width: 100%;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-muted, #888);
  margin-top: 6px;
}
.ht-swap-avail-btn {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--ink, #fff);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.ht-swap-avail-btn:hover {
  background: rgba(78, 205, 196, 0.08);
  border-color: var(--meg-green, #4ecdc4);
}
.hsa-pos {
  font-size: 10px;
  color: var(--ink-muted, #888);
  margin-left: 4px;
}

.ht-swap-keep-btn {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--ink-muted, #888);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.ht-swap-keep-btn:hover {
  background: rgba(255,255,255,0.04);
  color: var(--ink, #fff);
}

.ht-swap-confirmed {
  text-align: center;
  padding: 16px;
  font-size: 14px;
  color: var(--meg-green, #4ecdc4);
  font-weight: 600;
}
.ht-swap-empty {
  text-align: center;
  padding: 16px;
  font-size: 13px;
  color: var(--ink-muted, #888);
}

/* Swap reveal */
.ht-swap-reveal {
  padding: 8px 0;
}
.hsr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
}
.hsr-name {
  font-weight: 600;
  flex: 0 0 100px;
}
.hsr-out {
  color: var(--red, #e74c3c);
}
.hsr-in {
  color: var(--meg-green, #4ecdc4);
  font-weight: 600;
}
.hsr-kept {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-muted, #888);
}
.hsr-none {
  text-align: center;
  padding: 12px;
  font-size: 13px;
  color: var(--ink-muted, #888);
}

/* ── Expanded Standings (Phase 10) ─────────────────────────────────────────── */
.dlb-row-expandable {
  cursor: pointer;
}
.dlb-row-expandable:hover {
  background: rgba(255,255,255,0.03);
}
.dlb-expand-icon {
  font-size: 10px;
  color: var(--ink-muted, #888);
  margin-left: auto;
  transition: transform 0.2s;
}
.dlb-row-expandable.expanded .dlb-expand-icon {
  transform: rotate(90deg);
}
.dlb-xi-breakdown {
  display: none;
  padding: 6px 12px 10px;
  margin: 0 0 4px;
  background: var(--surface-raised, rgba(255,255,255,0.02));
  border-radius: 0 0 6px 6px;
  font-size: 12px;
}
.dlb-xi-breakdown.visible {
  display: block;
}
.dlb-xi-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.04));
}
.dlb-xi-row:last-child {
  border-bottom: none;
}
.dlb-xi-name {
  color: var(--ink, #fff);
}
.dlb-xi-pos {
  font-size: 10px;
  color: var(--ink-muted, #888);
  margin-left: 6px;
  text-transform: uppercase;
}
.dlb-xi-pts {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dlb-xi-pts.positive { color: var(--meg-green, #4ecdc4); }
.dlb-xi-pts.negative { color: var(--red, #e74c3c); }
.dlb-swap-badge {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(155, 89, 182, 0.15);
  color: var(--purple, #9b59b6);
  margin-left: 6px;
  vertical-align: middle;
}

/* Dark mode overrides for new components */
body.mode-worst .draft-captain-section {
  background: rgba(0,0,0,0.2);
  border-color: rgba(255,255,255,0.06);
}
body.mode-worst .ht-swap-card {
  background: rgba(0,0,0,0.15);
}
body.mode-worst .draft-reveal-overlaps {
  background: rgba(0,0,0,0.2);
}

/* Draft milestones now use .game-block via makeBlock() */

/* ── Chip messages ──────────────────────────────────────────── */
.chip-msg .chip-avatar {
  background: url('/avatars/chip.png') center/cover, var(--meg-accent);
}

/* ── Draft waiting / loading ────────────────────────────────── */
.draft-loading,
.draft-waiting,
.draft-no-picks {
  padding: 24px 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}

/* ── Add-to-Room modal ──────────────────────────────────────── */
#addToRoomModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
#addToRoomModal.open {
  display: flex;
}
.atr-modal-card {
  width: min(420px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
}
.atr-match-label {
  font-size: 13px;
  margin: 0 0 4px;
}
.atr-sub {
  font-size: 11px;
  color: var(--ink-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}
.atr-room-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  max-height: 200px;
  overflow-y: auto;
}
.atr-room-btn {
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--ink-primary);
  transition: border-color 0.12s;
}
.atr-room-btn:hover {
  border-color: var(--ink-muted);
}
.atr-room-btn.selected {
  border-color: var(--meg-accent);
  color: var(--meg-accent);
}
.atr-no-rooms {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 0 0 8px;
  font-style: italic;
}
.atr-create-new-btn {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--ink-muted);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.atr-create-new-btn:hover {
  color: var(--ink-primary);
}
.atr-new-room-row {
  margin-top: 10px;
}
.atr-new-room-row.hidden {
  display: none;
}
.atr-room-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--ink-primary);
  font-size: 13px;
  font-family: inherit;
}
.atr-room-name-input:focus {
  outline: none;
  border-color: var(--meg-accent);
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.btn-primary {
  padding: 7px 16px;
  background: var(--meg-accent);
  color: var(--bg-primary);
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: default;
}
.btn-secondary {
  padding: 7px 14px;
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.btn-secondary:hover {
  color: var(--ink-primary);
  border-color: var(--ink-muted);
}

/* ── Dugout feed ─────────────────────────────────────────────── */
.dugout-feed-header {
  padding: 20px 20px 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.dugout-feed-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.dugout-feed-sub {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
  font-family: var(--font-mono);
}

/* ── Competition group tile ──────────────────────────────────────────────────── */
.comp-group-tile {
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 16px 10px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-left-color 0.15s;
}
.comp-group-tile:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.comp-group-uel { border-left-color: #f77f00; }
.comp-group-ch  { border-left-color: #f5b800; }

.cgt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cgt-comp-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}
.cgt-comp-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
.cgt-comp-pl  { background: #3d195b; color: #fff; }
.cgt-comp-ucl { background: #003087; color: #fff; }
.cgt-comp-uel { background: #f77f00; color: #fff; }
.cgt-comp-ch  { background: #f5b800; color: #1a1a1a; }
.cgt-comp-l1  { background: #2b4929; color: #fff; }
.cgt-comp-default { background: var(--ink-muted); color: #fff; }

.cgt-comp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
.cgt-date {
  font-size: 11px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.cgt-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}
.cgt-live-badge  { background: var(--surface-danger); color: var(--red-card, var(--colour-danger)); }
.cgt-draft-badge { background: var(--surface-success); color: var(--meg-green); }

.cgt-fixtures { margin-bottom: 10px; }
.cgt-fixture-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.cgt-fixture-preview:last-child { border-bottom: none; }
.cgt-fixture-preview.cgt-live .cgt-match { font-weight: 600; }
.cgt-ko {
  font-size: 11px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  flex-shrink: 0;
  width: 38px;
}
.cgt-match { flex: 1; color: var(--ink); }
.cgt-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-card, var(--colour-danger));
  flex-shrink: 0;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.cgt-more {
  font-size: 11px;
  color: var(--ink-muted);
  padding: 4px 0;
}
.cgt-footer {
  font-size: 12px;
  font-weight: 600;
  color: var(--meg-green);
  text-align: right;
  margin-top: 6px;
}

/* ── Fixture group panel ─────────────────────────────────────────────────────── */
.fgp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 290;
}
.fgp-overlay.hidden { display: none; }
.fgp-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--paper);
  border-radius: 14px 14px 0 0;
  max-height: 75vh;
  overflow-y: auto;
  z-index: 340;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  animation: slideUp 0.2s ease;
}
.fgp-panel.hidden { display: none; }
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.fgp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 1;
}
.fgp-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}
.fgp-date {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-muted);
}
.fgp-close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
}
.fgp-close:hover { color: var(--ink); }
.fgp-fixture-list { padding: 8px 0 env(safe-area-inset-bottom, 16px); }
.fgp-fixture-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.fgp-fixture-row:last-child { border-bottom: none; }
.fgp-fixture-row.fgp-live .fgp-match { font-weight: 600; }
.fgp-fixture-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.fgp-time {
  font-size: 11px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  flex-shrink: 0;
  width: 38px;
}
.fgp-match {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fgp-fixture-actions { display: flex; gap: 8px; flex-shrink: 0; }
.fgp-join-btn {
  background: var(--meg-green);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.fgp-join-btn:hover { opacity: 0.88; }
.fgp-prematch-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ink-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.fgp-prematch-btn:hover { background: var(--paper); color: var(--ink); }

/* ── Dugout tile — uses unified game-tile-inner card ──────────── */
.dugout-tile {
  display: block;
  padding: 4px 16px;
  cursor: pointer;
  width: 100%;
}
.dugout-tile:hover .game-tile-inner {
  background: var(--surface-success);
  border-color: var(--meg-accent);
}
/* Legacy dugout-tile child selectors kept for compat */
.dugout-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.dugout-badge-open      { background: var(--surface-success); color: var(--meg-green); }
.dugout-badge-live      { background: var(--surface-danger); color: var(--red-card); }
/* Dugout remind CTA (used only for scheduled state) */
.dugout-remind-btn:hover:not(.reminded) {
  border-color: var(--ink-muted);
  color: var(--ink);
}
.dugout-remind-btn.reminded {
  color: var(--ink-faint);
  cursor: default;
}

/* ── Live draft Dugout tile — special highlight ─────────────── */
.dugout-tile-draft .game-tile-inner {
  border-left: 3px solid var(--colour-amber-cta);
}
.dugout-tile-draft.dugout-tile-live .game-tile-inner {
  box-shadow: 0 0 0 1px var(--colour-amber-cta), 0 0 8px rgba(255,190,11,0.15);
  animation: draftPulse 2s ease-in-out infinite;
}
.dugout-tile-draft.dugout-tile-open .game-tile-inner {
  border-left-color: var(--colour-amber-cta);
  background: linear-gradient(90deg, rgba(255,190,11,0.04) 0%, transparent 30%);
}
@keyframes draftPulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--colour-amber-cta), 0 0 8px rgba(255,190,11,0.15); }
  50%      { box-shadow: 0 0 0 1px var(--colour-amber-cta), 0 0 16px rgba(255,190,11,0.3); }
}

/* ── Chip reminder toast ──────────────────────────────────────── */
.chip-reminder-toast {
  position: fixed;
  bottom: 80px;
  right: 20px;
  max-width: 320px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  z-index: 3000;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.chip-reminder-toast.chip-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.chip-reminder-body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.chip-reminder-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.chip-reminder-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chip-reminder-label {
  font-size: 13px;
  font-weight: 700;
}
.chip-reminder-msg {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-mono);
}
.chip-reminder-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  flex-shrink: 0;
  align-self: flex-start;
}

/* ── Group clue cards ─────────────────────────────────────────── */
.group-clue-start-card .trivia-title {
  font-size: 20px;
  font-weight: 700;
  margin: 6px 0;
}
.group-start-sub {
  font-size: 12px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  margin-top: 4px;
}
.group-clue-board {
  /* persistent board, updated in-place */
}
.group-clue-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.group-clue-text {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}
.group-clue-hint {
  font-size: 11px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
}
.group-correct-answer,
.group-reveal-answer {
  font-size: 20px;
  font-weight: 700;
  margin: 6px 0 4px;
}
.group-correct-by {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--meg-accent);
  margin-bottom: 6px;
}
.group-correct-bio {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 6px 0;
  line-height: 1.5;
}
.group-clue-list {
  margin: 8px 0 0;
  padding-left: 0;
  list-style: none;
}
.group-clue-list .clue-item {
  font-size: 12px;
  color: var(--ink-muted);
  padding: 3px 0;
  border-top: 1px solid var(--border);
}
.group-clue-list .clue-item:first-child {
  border-top: none;
}

/* ── Quiz cards ───────────────────────────────────────────────── */
.quiz-q-card .quiz-question-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  margin: 8px 0 12px;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.quiz-opt-btn {
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
}
.quiz-opt-btn:hover:not(:disabled) {
  border-color: var(--meg-accent);
  background: rgba(74, 158, 106, 0.06);
}
.quiz-opt-btn.quiz-opt-selected {
  border-color: var(--meg-accent);
  background: rgba(74, 158, 106, 0.12);
  font-weight: 600;
}
.quiz-opt-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.quiz-result-card .quiz-result-answer {
  font-size: 16px;
  font-weight: 700;
  margin: 6px 0 4px;
  color: var(--meg-accent);
}
.quiz-result-who {
  font-size: 12px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  margin-bottom: 10px;
}
.quiz-scores {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.quiz-score-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-muted);
}
.quiz-score-pts {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
}

/* ── Wall cards ───────────────────────────────────────────────── */
.wall-card {
  padding: 0;
  overflow: hidden;
}
.wall-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 6px;
}
.wall-lives {
  font-size: 14px;
  letter-spacing: 2px;
}
.wall-found-groups {
  padding: 0 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wall-found-row {
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.wall-found-row strong {
  font-weight: 700;
  white-space: nowrap;
}
.wall-diff-1 { background: var(--surface-highlight); }
.wall-diff-2 { background: var(--wall-diff-2); }
.wall-diff-3 { background: var(--wall-diff-3); }
.wall-diff-4 { background: var(--wall-diff-4); }
.wall-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 0 14px 10px;
}
.wall-item {
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--paper);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  transition: background 0.12s, border-color 0.12s;
  min-height: 44px;
}
.wall-item:hover {
  border-color: var(--meg-accent);
  background: rgba(74, 158, 106, 0.06);
}
.wall-item-selected {
  border-color: var(--meg-accent);
  background: rgba(74, 158, 106, 0.18);
  font-weight: 700;
}
.wall-submit-btn {
  display: block;
  width: calc(100% - 28px);
  margin: 0 14px 12px;
  padding: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid var(--meg-accent);
  color: var(--meg-accent);
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.wall-submit-btn:not(:disabled):hover {
  background: var(--meg-accent);
  color: #fff;
}
.wall-submit-btn:disabled {
  border-color: var(--border);
  color: var(--ink-faint);
  cursor: default;
}

/* Wall fail card */
.wall-fail-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.wall-fail-group {
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
}
.wall-fail-group.wall-fail-solved {
  opacity: 0.5;
}
.wall-fail-category {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.wall-fail-items {
  font-size: 12px;
  color: var(--ink);
}

/* ── Game complete card ───────────────────────────────────────── */
.game-complete-card .gc-winner-name {
  font-size: 20px;
  font-weight: 700;
  margin: 6px 0 10px;
}
.gc-standings {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.gc-standing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 3px 0;
}
.gc-standing-row.gc-winner {
  font-weight: 700;
}
.gc-rank {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  min-width: 14px;
}
.gc-name {
  flex: 1;
}
.gc-pts {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--meg-accent);
}

/* ── Add-to-Room success toast ──────────────────────────────── */
.atr-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink-primary);
  color: var(--bg-primary);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-family: var(--font-mono);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 2000;
}
.atr-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   GAME PAGE — mobile-first trivia layout
   ═══════════════════════════════════════════════════════════════
   NOTE: #threadPanel now carries a data-thread-mode attribute set by JS:
     'room-thread', 'live-draft', 'career-path', 'worst-eleven', 'best-eleven',
     'tenable', 'derby-day', 'cult-hero', 'nutmeg-or-myth', 'dm-game',
     'dm-tenable', 'dugout-game', 'meg-game', 'room-game'
   Use [data-thread-mode="x"] selectors to scope game-specific styles
   without relying on CSS classes that may not be cleaned up on switch.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .thread-panel.game-page.open {
    height: var(--visual-vh, 100dvh);
    top: 0;
    bottom: auto;
  }

  /* Hide chat entirely — game board provides all feedback */
  .thread-panel.game-page .thread-replies,
  .thread-panel.game-page .thread-divider,
  .thread-panel.game-page .thread-parent {
    display: none;
  }

  /* Compact header */
  .thread-panel.game-page .thread-header {
    padding: 10px 16px;
  }

  /* Game board fills remaining space, content flows from top */
  .thread-panel.game-page .thread-game-board {
    flex: 1;
    max-height: none;
    overflow-y: auto;
    padding: 8px 12px;
    border-top: none;
    position: relative;
  }

  /* Input stays at bottom */
  .thread-panel.game-page .thread-input-bar {
    flex-shrink: 0;
    padding: 8px 12px;
    margin-top: auto;
  }

  /* ── Compact Ten-able for game page ──────────── */

  /* 2-column grid halves the slot stack height:
     8 answers = 4 rows (~70px) vs 8 rows (~145px) — saves ~75px */
  .thread-panel.game-page .tn-hud-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }

  .thread-panel.game-page .tn-hud-slot {
    height: 20px;
    padding: 2px 6px;
    font-size: 11px;
    /* Prevent long names overflowing their column */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .thread-panel.game-page .tn-hud-question {
    font-size: 13px;
    margin: 2px 0 4px;
  }

  /* ── Compact Career Path for game page ──────── */
  .thread-panel.game-page .cp-clue-row {
    padding: 4px 8px;
    font-size: 12px;
  }

  .thread-panel.game-page .cp-clue-list {
    gap: 2px;
  }

  .thread-panel.game-page .trivia-title {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .thread-panel.game-page .cp-prompt {
    margin-top: 6px;
    font-size: 11px;
  }

  .thread-panel.game-page .trivia-block {
    padding: 10px 12px;
  }

  .thread-panel.game-page .trivia-eyebrow {
    font-size: 9px;
    margin-bottom: 2px;
  }
}

/* ── Player attribution badges (multiplayer) ─────── */

.slot-badge {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
  margin-left: auto;
  line-height: 1;
}

/* ── Game toast (wrong answer attribution) ──────── */

.game-toast {
  position: absolute;
  top: 8px;
  left: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.78);
  color: var(--white);
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: gameToastFade 2.2s ease forwards;
  z-index: 10;
  pointer-events: none;
}

.game-toast .toast-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
}

@keyframes gameToastFade {
  0%, 65% { opacity: 1; transform: translateY(0); }
  100%    { opacity: 0; transform: translateY(-6px); }
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE PAGE
   ═══════════════════════════════════════════════════════════════ */

.profile-loading {
  text-align: center;
  padding: 48px 16px;
  color: var(--ink-muted);
  font-size: 14px;
}

.profile-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.profile-card {
  text-align: center;
  padding: 24px 0 20px;
}

.profile-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
}
.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--meg-green);
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.profile-avatar-change {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--meg-green);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  border: 2px solid var(--bg-paper, #f5f4ef);
  transition: opacity 0.15s;
}
.profile-avatar-change:hover { opacity: 0.85; }



.profile-status-row { margin-top: 8px; position: relative; }
.profile-status-btn {
  font-size: 13px; padding: 4px 12px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--white); cursor: pointer;
  color: var(--ink); font-family: inherit;
}
.profile-status-btn:hover { background: var(--paper); }
.status-emoji-picker {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
  padding: 8px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--white); max-width: 240px;
}
.status-emoji-opt {
  width: 32px; height: 32px; border: none; background: none;
  font-size: 18px; cursor: pointer; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.status-emoji-opt:hover { background: var(--paper); }
.status-emoji-opt.status-clear { font-size: 14px; color: var(--ink-muted); }


.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 16px 0;
}

.profile-stats-grid:has(.profile-stat:nth-child(3):last-child),
.profile-stats-grid:has(.profile-stat:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

.profile-stat {
  background: var(--paper);
  padding: 14px 8px;
  text-align: center;
}

.profile-stat-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}

.profile-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
  margin-top: 2px;
}

.profile-section {
  margin-top: 20px;
}

.profile-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.profile-game-table {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.profile-game-header,
.profile-game-row {
  display: grid;
  grid-template-columns: 1fr 50px 44px 50px;
  padding: 8px 12px;
  font-size: 12px;
  align-items: center;
}

.profile-game-header {
  background: var(--border);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
}

.profile-game-row {
  border-top: 1px solid var(--border);
  color: var(--ink);
}

.profile-game-row:first-child {
  border-top: none;
}

.profile-game-name {
  font-weight: 500;
}

.profile-game-played,
.profile-game-wins,
.profile-game-pct {
  text-align: center;
  font-family: var(--font-mono);
}

.profile-game-pct {
  color: var(--meg-green);
  font-weight: 600;
}

.profile-empty {
  padding: 20px 12px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   Auth Screen
   ═══════════════════════════════════════════════════════════════ */

.auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--surface-base);
  padding: 20px;
}

.auth-card {
  width: 100%;
  max-width: 360px;
  text-align: center;
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}
.auth-brand-icon { font-size: 28px; }
.auth-brand-name {
  font-family: var(--font-serif);
  font-size: 36px;
  color: var(--brand-orange);
  letter-spacing: -0.5px;
  line-height: 1;
}

.auth-deck {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: var(--leading-tight, 0.95);
  color: var(--ink);
  letter-spacing: -0.3px;
  margin: 4px 0 6px;
}

.auth-tagline {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 28px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.15s;
}
.auth-input:focus {
  outline: none;
  border-color: var(--meg-green);
}
.auth-input::placeholder { color: var(--ink-faint); }

.auth-btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auth-btn-primary {
  background: var(--meg-green);
  color: var(--white);
  border: none;
}
.auth-btn-primary:hover { opacity: 0.9; }

.auth-btn-google {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--border);
}
.auth-btn-google:hover { background: var(--paper); }

.auth-btn-ghost {
  background: none;
  color: var(--ink-muted);
  border: 1px solid var(--border);
  font-size: 13px;
}
.auth-btn-ghost:hover { border-color: var(--ink-faint); color: var(--ink); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  color: var(--ink-faint);
  font-size: 12px;
  font-family: var(--font-mono);
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-switch {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 4px;
}
.auth-switch a {
  color: var(--meg-green);
  text-decoration: none;
  font-weight: 500;
}
.auth-switch a:hover { text-decoration: underline; }

.auth-error {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--surface-danger);
  color: var(--red-card);
  border: 1px solid var(--border-danger);
  border-radius: var(--radius-sm);
  font-size: 13px;
  text-align: left;
}

/* ── Live draft room feed event tiles ────────────────────────────────────── */
.live-draft-event-feed-tile,
.live-draft-stat-feed-tile {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--ink-muted);
  border-left: 2px solid var(--border);
  margin: 1px 0 1px 8px;
  background: transparent;
}
.live-draft-event-feed-tile .ldeft-emoji,
.live-draft-stat-feed-tile  .ldeft-emoji  { font-size: 12px; flex-shrink: 0; }
.live-draft-event-feed-tile .ldeft-label  { color: var(--ink-primary); font-weight: 500; }
.live-draft-event-feed-tile .ldeft-split  { color: var(--ink-muted); font-size: 11px; }
.live-draft-stat-feed-tile  .ldeft-label  { color: var(--ink-primary); font-weight: 500; }
.live-draft-stat-feed-tile  .ldeft-movers { color: var(--ink-muted); font-size: 11px; }

/* VAR cancelled event — slightly highlighted */
.match-event-tile.match-event-var {
  border-left-color: var(--meg-accent);
  opacity: 0.75;
}

/* Mode tag badges on event pick badges */
.mode-tag.worst { background: var(--surface-amber); color: var(--colour-amber); }
.mode-tag.best  { background: var(--surface-success); color: var(--meg-green); }

/* Stat reckoning movers in draft thread */
.stat-reckoning-movers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 4px;
}
.sr-mover {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  padding: 3px 7px;
}
.sr-name { color: var(--ink-primary); font-weight: 500; }
.sr-pts.pos { color: var(--meg-green); font-family: var(--font-mono); font-size: 11px; }
.sr-pts.neg { color: var(--red-card); font-family: var(--font-mono); font-size: 11px; }

/* ── Social: nav badge ─────────────────────────────────────────────────────── */
.nav-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--red-card, var(--colour-danger));
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
  line-height: 1;
}

/* ── Social: tab badge ─────────────────────────────────────────────────────── */

/* ── Social: connections section (Activity tab) ────────────────────────────── */
.connections-section {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 4px;
}
.connections-list { padding: 0; list-style: none; }
.connections-empty {
  padding: 8px 16px 12px;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  font-family: var(--font-mono);
}
.connection-request-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.conn-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.conn-info { flex: 1 1 0; min-width: 0; }
.conn-name { font-weight: 600; font-size: 13px; color: rgba(255,255,255,0.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-club { font-size: 11px; color: rgba(255,255,255,0.45); font-family: var(--font-mono); }
/* Buttons wrap to their own row, indented to sit under the name */
.conn-actions { display: flex; gap: 6px; width: 100%; padding-left: 44px; }
.conn-btn {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}
.conn-btn--accept { background: var(--meg-green); color: #fff; }
.conn-btn--decline { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }

/* ── Social: profile card popup ────────────────────────────────────────────── */
.profile-card-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
}
#profileCard {
  position: fixed;
  z-index: 501;
  background: var(--white, #fff);
  border: 1px solid var(--border, #ddd);
  border-radius: var(--radius, 8px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.14);
  width: 240px;
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.profile-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--border, #ddd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.profile-card-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink, #1a1a1a);
  text-align: center;
}
.profile-card-club {
  font-size: 12px;
  color: var(--ink-muted, #666);
  font-family: var(--font-mono);
  text-align: center;
  margin-bottom: 6px;
}
.profile-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.profile-card-btn {
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.1s;
}
.profile-card-btn:hover:not(:disabled) { opacity: 0.88; }
.profile-card-btn--primary { background: var(--meg-green); color: #fff; }
.profile-card-btn--secondary { background: var(--border, #ddd); color: var(--ink, #1a1a1a); }
.profile-card-btn--disabled { background: var(--border, #ddd); color: var(--ink-muted, #888); cursor: not-allowed; }

/* Profile card interview answers */
#profileCard {
  max-height: 80vh;
  overflow-y: auto;
}
.profile-card-answers {
  width: 100%;
  margin-top: 12px;
  border-top: 1px solid var(--border, #ddd);
  padding-top: 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-card-answer-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-card-answer-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted, #888);
  font-family: var(--font-mono);
}
.profile-card-answer-value {
  font-size: 12px;
  color: var(--ink, #1a1a1a);
  line-height: 1.4;
}

/* Profile interview completion banner */
.profile-interview-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  margin-top: 8px;
  background: var(--paper, #f5f4ef);
  border-radius: 8px;
  text-align: center;
}
.profile-interview-complete-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--meg-green);
}

/* ── Social: invite friends nav item ───────────────────────────────────────── */
.nav-invite { color: rgba(255,255,255,0.5); }

/* ── Historical draft: tile badges ────────────────────────────────────────── */
.ldt-historical-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(251,191,36,0.15);
  color: var(--colour-amber-cta);
  border: 1px solid rgba(251,191,36,0.3);
  vertical-align: middle;
  margin-left: 4px;
}
.ldt-score-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--colour-amber-cta);
  letter-spacing: 0.04em;
}
.ldt-kickoff-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
}

/* ── Historical draft: blurb context card ─────────────────────────────────── */
.draft-blurb-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--colour-amber-cta);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-secondary, var(--ink-muted));
  margin-bottom: 8px;
}
.draft-blurb-card strong {
  color: var(--ink-primary);
  font-weight: 600;
}

/* ── Historical draft: reveal button ──────────────────────────────────────── */
.historical-reveal-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--meg-accent, var(--colour-danger));
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.15s;
}
.historical-reveal-btn:hover:not(:disabled) { opacity: 0.88; }
.historical-reveal-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Historical draft: full-time result block ─────────────────────────────── */
.historical-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 8px;
  flex-wrap: wrap;
}
.historical-winner-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-primary);
}
.historical-result-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 4px;
}
.result-label-dominant     { background: rgba(251,191,36,0.12); color: var(--colour-amber-cta); border: 1px solid rgba(251,191,36,0.3); }
.result-label-obliterated  { background: rgba(230,57,70,0.12);  color: var(--colour-danger); border: 1px solid rgba(230,57,70,0.3); }
.historical-winner-score {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: #22c55e;
  margin-left: auto;
}

/* ── Historical draft: share button ───────────────────────────────────────── */
.historical-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  margin-top: 8px;
}
.historical-share-btn:hover {
  border-color: var(--ink-muted);
  color: var(--ink-primary);
}

/* ── Score history graph ───────────────────────────────────────────────────── */
.score-history-wrap {
  margin-top: 8px;
}
.score-history-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.score-history-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  padding: 0 2px;
}
.shl-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}
.shl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.shl-name {
  color: var(--ink-secondary, var(--ink-muted));
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shl-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  color: var(--ink-primary);
}

/* ── Historical match picker modal ─────────────────────────────────────────── */
.historical-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: flex-end;
}
.hpm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.hpm-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  margin: 0 auto;
  background: var(--bg-elevated);
  border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hpm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.hpm-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-primary);
  letter-spacing: 0.02em;
}
.hpm-close {
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 4px;
}
.hpm-close:hover { color: var(--ink-primary); }
.hpm-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}
.hpm-match-item {
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.hpm-match-item:last-child { border-bottom: none; }
.hpm-match-item:hover { background: var(--bg-hover, rgba(255,255,255,0.04)); }
.hpm-match-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.hpm-match-score {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--colour-danger);
  flex-shrink: 0;
}
.hpm-match-teams {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary);
  flex: 1;
}
.hpm-match-year {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.hpm-match-blurb {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 4px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Pack carousel (room picker) ──────────────────────────────────────────── */
.hpm-body {
  overflow-y: auto;
  flex: 1;
}
.hpm-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  padding: 12px 16px 4px;
}
.hpm-pack-carousel {
  display: flex;
  gap: 10px;
  padding: 8px 16px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hpm-pack-carousel::-webkit-scrollbar { display: none; }
.hpm-pack-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
  max-width: 72px;
  padding: 10px 6px 8px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.hpm-pack-tile:hover {
  border-color: var(--pack-colour, var(--meg-green));
  box-shadow: var(--shadow-sm);
}
.hpm-pack-tile.active {
  border-color: var(--pack-colour, var(--meg-green));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pack-colour, var(--meg-green)) 25%, transparent);
}
.hpm-pack-crest {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.hpm-pack-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.hpm-pack-count {
  font-size: 9px;
  color: var(--ink-muted);
}
.hpm-pack-match-section {
  border-top: 1px solid var(--border);
}

/* ── Meg solo match picker (game card) ────────────────────────────────────── */
.meg-picker-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 10px 0 4px;
}
.meg-picker-carousel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.meg-picker-carousel::-webkit-scrollbar { display: none; }
.meg-picker-pack-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 64px;
  max-width: 64px;
  padding: 8px 4px 6px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.meg-picker-pack-tile:hover {
  border-color: var(--pack-colour, var(--meg-green));
  box-shadow: var(--shadow-sm);
}
.meg-picker-pack-tile.active {
  border-color: var(--pack-colour, var(--meg-green));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pack-colour, var(--meg-green)) 25%, transparent);
}
.meg-picker-crest {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.meg-picker-pack-name {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.meg-picker-match-list,
#megPickerPackArea {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 8px;
}
.meg-picker-match-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-size: 13px;
  gap: 2px;
  transition: border-color 0.15s, background 0.15s;
}
.meg-picker-match-btn:hover { background: var(--surface-success); border-color: var(--meg-green); }
.meg-picker-match-btn.selected { background: var(--surface-success); border-color: var(--meg-green); pointer-events: none; opacity: 0.7; }
.meg-picker-match-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
}
.meg-picker-match-teams {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
.meg-picker-match-year {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.meg-picker-match-blurb {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.meg-picker-match-btn.played { opacity: 0.5; }
.meg-picker-match-btn.played:hover { opacity: 0.7; }
.meg-picker-match-tick {
  font-size: 11px;
  color: var(--meg-green);
  flex-shrink: 0;
}
.meg-picker-progress {
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.meg-picker-progress-count {
  font-weight: 700;
  color: var(--ink);
}
.meg-picker-pack-progress {
  font-size: 8px;
  color: var(--ink-muted);
  font-weight: 600;
}
.meg-picker-pack-tile.complete {
  border-color: var(--meg-green);
  background: var(--surface-success);
}
.meg-picker-archive-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: border-color 0.15s;
}
.meg-picker-archive-btn:hover { border-color: var(--meg-green); }
.meg-picker-archive-icon { font-size: 18px; }
.meg-picker-archive-label { font-weight: 600; flex: 1; text-align: left; color: var(--ink); }

/* ── Match reveal card ────────────────────────────────────────────────────── */
.meg-reveal-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-top: 8px;
}
.meg-reveal-match {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.meg-reveal-teams {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.meg-reveal-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
}
.meg-reveal-played {
  font-size: 10px;
  color: var(--ink-muted);
  background: var(--paper);
  border-radius: 4px;
  padding: 1px 6px;
}
.meg-reveal-new {
  font-size: 10px;
  color: var(--meg-green);
  font-weight: 700;
  background: var(--surface-success);
  border-radius: 4px;
  padding: 1px 6px;
}
.meg-reveal-blurb {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.45;
  margin-top: 6px;
}
.meg-reveal-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.meg-reveal-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.meg-reveal-btn--primary {
  background: var(--meg-green);
  color: white;
  border: none;
}
.meg-reveal-btn--primary:hover { background: var(--brand-hover); }
.meg-reveal-btn--primary:disabled { opacity: 0.4; cursor: default; }
.meg-reveal-btn--secondary {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border);
}
.meg-reveal-btn--secondary:hover { border-color: var(--ink-muted); }
.meg-reveal-btn--tertiary {
  background: none;
  color: var(--ink-muted);
  border: 1px solid var(--border);
}
.meg-reveal-btn--tertiary:hover { color: var(--ink); border-color: var(--ink-muted); }
.meg-reveal-btn--play {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: 700;
  background: var(--meg-green);
  color: white;
  border: none;
  border-radius: 6px;
}
.meg-reveal-btn--play:hover { background: var(--brand-hover); }
.meg-reveal-btn--play:disabled { opacity: 0.5; cursor: default; }

/* ── Reveal auto-confirm timer ───────────────────────────────────────────── */
.meg-reveal-timer-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.meg-reveal-timer-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  min-width: 24px;
  text-align: right;
}

/* ── Difficulty timer (saved preference) ──────────────────────────────────── */
.diff-timer-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 8px;
}
.diff-timer-secs {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  min-width: 14px;
  text-align: right;
}
.diff-change-btn {
  font-size: 12px;
  color: var(--ink-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.diff-change-btn:hover { color: var(--ink); border-color: var(--ink-muted); }

/* ── Pack carousel (DM picker) ───────────────────────────────────────────── */
.dm-pack-carousel-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-top: 10px;
  margin-bottom: 4px;
}
.dm-pack-carousel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dm-pack-carousel::-webkit-scrollbar { display: none; }
.dm-pack-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 60px;
  max-width: 60px;
  padding: 8px 4px 6px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.15s;
  flex-shrink: 0;
}
.dm-pack-tile:hover {
  border-color: var(--pack-colour, var(--meg-green));
}
.dm-pack-tile.active {
  border-color: var(--pack-colour, var(--meg-green));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pack-colour, var(--meg-green)) 25%, transparent);
}
.dm-pack-crest {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.dm-pack-name {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.dm-pack-match-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}

/* ── DM Draft Picker (upgraded components) ─────────────────────────────────── */

/* Waiting state for non-challenger */
.dm-picker-waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 0 8px;
}
.dm-picker-waiting-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--meg-green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.dm-picker-waiting-label {
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
}

/* Section label */
.dm-picker-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-top: 12px;
  margin-bottom: 6px;
}

/* Pack carousel */
.dm-picker-pack-carousel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dm-picker-pack-carousel::-webkit-scrollbar { display: none; }

/* Pack tile — larger than old dm-pack-tile, closer to Meg picker */
.dm-picker-pack-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
  max-width: 72px;
  padding: 10px 6px 8px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.dm-picker-pack-tile:hover {
  border-color: var(--pack-colour, var(--meg-green));
}
.dm-picker-pack-tile.active {
  border-color: var(--pack-colour, var(--meg-green));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pack-colour, var(--meg-green)) 20%, transparent);
}
.dm-picker-pack-crest {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.dm-picker-pack-name {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.dm-picker-pack-count {
  font-size: 9px;
  color: var(--ink-muted);
}

/* Pack match area */
.dm-picker-pack-match-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 4px;
}

/* Match list */
.dm-picker-match-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

/* Match button */
.dm-picker-match-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s, border-color 0.12s;
}
.dm-picker-match-btn:hover {
  background: var(--surface-success);
  border-color: var(--meg-green);
}
.dm-picker-match-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.dm-picker-match-teams {
  font-size: 12px;
  color: var(--ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-picker-match-date {
  font-size: 10px;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Selected match confirmation pill */
.dm-picker-selected-match {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--meg-green);
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* ── Generic toast ─────────────────────────────────────────────────────────── */
.generic-toast {
  position: fixed;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--ink-primary, #1a1a1a);
  color: var(--bg-primary, #fff);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 20px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 999;
}
.generic-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── GIF inline embed ─────────────────────────────────────────────────────── */
.msg-gif {
  display: block;
  max-width: min(320px, 100%);
  border-radius: var(--radius-sm, 6px);
  margin-top: 6px;
  cursor: pointer;
}
.msg-gif:hover { opacity: 0.92; }

/* ── Message URL links ────────────────────────────────────────────────────── */
.msg-text a {
  color: var(--meg-green);
  text-decoration: underline;
  word-break: break-all;
}
.msg-text a:hover { opacity: 0.8; }

/* ── Channel pill (header descriptor) ────────────────────────────────────── */
.channel-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
  white-space: nowrap;
}
.pill-readonly  { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.pill-dugout    { background: rgba(74,124,89,0.25); color: var(--meg-green); }
.pill-pitch     { background: rgba(74,124,89,0.25); color: var(--meg-green); }
.pill-open      { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }

/* ── Rate-limited send button ────────────────────────────────────────────── */
.send-rate-limited {
  background: var(--border) !important;
  color: var(--ink-muted) !important;
  font-size: 11px !important;
  font-family: var(--font-mono) !important;
  cursor: not-allowed !important;
  min-width: 44px;
}

/* ── Thread locked banner ────────────────────────────────────────────────── */
.thread-locked-banner {
  text-align: center;
  padding: 10px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-top: 1px solid var(--border);
}

/* ── Ticker event tile ────────────────────────────────────────────────────── */
.ticker-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  border-left: 3px solid var(--meg-green);
  margin: 3px 0;
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
}
.ticker-impact-item.up   { background: rgba(74,124,89,0.15); color: var(--meg-green); }
.ticker-impact-item.down { background: rgba(200,60,60,0.12); color: var(--colour-danger); }

/* ── Boardroom pinned post indicator ────────────────────────────────────── */
.msg-block.msg-pinned::before {
  content: 'PINNED';
  display: block;
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

/* ── Boardroom post card ─────────────────────────────────────────────────── */
.boardroom-post {
  padding: 4px 0;
}
.boardroom-post-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--meg-green);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.boardroom-post-pin {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--meg-green);
  text-transform: uppercase;
}
.boardroom-post-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.boardroom-post-body {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
}
.boardroom-post-reactions {
  min-height: 0; /* collapses when empty; reaction row handles its own spacing */
}

/* Thread panel header for boardroom posts */
.boardroom-thread-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.boardroom-thread-header-pin {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--meg-green);
  text-transform: uppercase;
}
.boardroom-thread-header-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.boardroom-thread-header-body {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
}
.boardroom-post-reactions .msg-reactions {
  margin-top: 2px;
}
.boardroom-post-footer {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.boardroom-thread-btn {
  background: none;
  border: 1px solid var(--meg-green);
  color: var(--meg-green);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.boardroom-thread-btn:hover { background: rgba(74,124,89,0.12); }

/* ── Ticker: match name header (multi-game context) ─────────────────────── */

/* ── Ticker: major / minor weight variants (legacy — kept for compat) ──────── */

/* ── te-* — unified event tile system ──────────────────────────────────────── */
.te-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.te-team {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-muted);
}
.te-team.scored { color: var(--ink); }
.te-score {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  background: var(--border);
  color: var(--ink);
  padding: 1px 5px;
  border-radius: 3px;
}
.te-match {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-muted);
}
.te-event-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.te-emoji  { font-size: 15px; line-height: 1; flex-shrink: 0; }
.te-player { font-size: 13px; font-weight: 700; color: var(--ink); flex: 1; }
.te-label  { font-size: 13px; font-weight: 700; color: var(--ink); flex: 1; }
.te-min    { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); flex-shrink: 0; }
.te-assist {
  font-size: 11px;
  color: var(--ink-muted);
  padding-left: 22px;
  margin-top: 1px;
}
.te-subs {
  padding-left: 22px;
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.te-sub-row {
  font-size: 12px;
  color: var(--ink-muted);
}
.te-arrow {
  color: var(--ink-muted);
  font-size: 11px;
  margin: 0 2px;
}
.te-impact.pos { background: rgba(74,124,89,0.15); color: var(--meg-green); }
.te-impact.neg { background: rgba(200,60,60,0.12); color: var(--colour-danger); }

/* ── Pitch sticky score strip ────────────────────────────────────────────── */
.pitch-score-strip {
  position: relative;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
.pitch-score-strip::-webkit-scrollbar { display: none; }
.pitch-score-strip.hidden { display: none; }
.strip-match.strip-ft   { opacity: 0.65; }

/* ── Dugout: kickoff group separator ────────────────────────────────────── */

/* ── Dugout: competition logo image ─────────────────────────────────────── */
.dugout-comp-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
/* ── Dugout: competition badge (text fallback) ─────────────────────────── */
.dugout-comp-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.dugout-comp-pl  { background: #38003c; color: #fff; }
.dugout-comp-ucl { background: #001489; color: #fff; }
.dugout-comp-el  { background: #f26522; color: #fff; }
.dugout-comp-ch  { background: #1c2c5b; color: #fff; }
.dugout-comp-l1  { background: #cc0000; color: #fff; }

/* ── Dugout: live score on tile ──────────────────────────────────────────── */
.dugout-live-score {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.5px;
  margin-left: auto;
}

/* ── Dugout: user picked badge ───────────────────────────────────────────── */
.dugout-picked-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--meg-green);
  margin-left: 4px;
}
.game-tile-inner.user-picked {
  border-color: var(--meg-green);
}

/* ── Match Night Hub tile ────────────────────────────────────────────────── */
.match-night-hub {
  background: var(--white);
  border: 2px solid var(--meg-green);
  border-radius: var(--radius);
  margin: 8px 0;
  overflow: hidden;
}
.mnh-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--meg-green);
  color: #fff;
}
.mnh-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex: 1;
}
.mnh-live-pill {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  background: rgba(255,255,255,0.25);
  border-radius: 10px;
  padding: 2px 8px;
  letter-spacing: 0.5px;
}
.mnh-games { padding: 4px 0; }
.mnh-empty {
  padding: 12px 16px;
  color: var(--ink-muted);
  font-size: 13px;
  text-align: center;
}
.mnh-comp-divider {
  padding: 6px 16px 4px;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-top: 2px solid;
}
.mnh-comp-divider:first-child { border-top: none; }
.mnh-game-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  transition: background 0.1s;
}
.mnh-game-row:last-child { border-bottom: none; }
.mnh-game-row.clickable { cursor: pointer; }
.mnh-game-row.clickable:hover { background: rgba(45,90,61,0.07); }
.mnh-comp-badge {
  font-size: 9px;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.mnh-team { font-weight: 600; }
.mnh-home { text-align: right; }
.mnh-away { text-align: left; }
.mnh-score {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  min-width: 40px;
  color: var(--ink);
}
.mnh-game-row.live .mnh-score { color: var(--meg-green); }
.mnh-game-row.ft  .mnh-score  { color: var(--ink-muted); }
.mnh-status {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.mnh-status.live { color: var(--meg-green); }
.mnh-status.ft   { color: var(--ink-muted); }

/* ── Draft live: scoreline header ────────────────────────────────────────── */
.draft-live-scoreline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 12px 12px;
  flex-wrap: wrap;
  row-gap: 4px;
}
.dls-team {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dls-score {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -1px;
}
.dls-phase {
  width: 100%;
  text-align: center;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--meg-green);
  text-transform: uppercase;
}

/* ── Draft live: 11v11 pitch grid ────────────────────────────────────────── */
.draft-pitch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 0 4px 12px;
}
.draft-team-col {
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
}
.draft-col-label {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.draft-player-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 12px;
  transition: background 0.1s;
}
.draft-player-card.has-events {
  background: rgba(45,90,61,0.06);
}
.dpc-badge {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
  padding: 1px 4px;
  border-radius: 3px;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.dpc-name {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dpc-icons {
  font-size: 13px;
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* ── Feed + Hot Takes ─────────────────────────────────────────────────────── */

.feed-tile {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 12px;
  margin: 0 12px 10px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.feed-tile:hover {
  border-color: var(--meg-accent);
  box-shadow: 0 2px 8px rgba(45,90,61,0.08);
}

/* Header row: channel + rank + time */
.feed-tile-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.feed-tile-channel {
  background: none;
  border: none;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--meg-green);
  cursor: pointer;
  background: rgba(45,90,61,0.07);
  letter-spacing: 0.01em;
  transition: background 0.12s;
}
.feed-tile-channel:hover { background: rgba(45,90,61,0.15); }
.feed-tile-rank {
  font-size: 11px;
  font-weight: 700;
  color: var(--amber);
  margin-left: 2px;
}
.feed-tile-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Author row */
.feed-tile-author {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.feed-tile-avatar {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  background: var(--border);
  color: var(--ink-muted);
  flex-shrink: 0;
}
.feed-tile-author-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

/* Message preview */
.feed-tile-preview {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
  margin-bottom: 10px;
  word-break: break-word;
}

/* Reply previews */
.feed-tile-replies {
  border-top: 1px solid var(--border);
  padding-top: 9px;
  margin-bottom: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feed-tile-reply-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.feed-tile-reply-avatar {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  background: var(--border);
  color: var(--ink-muted);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
.feed-tile-reply-avatar.reply-meg {
  background-color: var(--meg-green);
}
.feed-tile-reply-content {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
}
.feed-tile-reply-name {
  font-weight: 600;
  color: var(--ink);
}

/* Stats row */
.feed-tile-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.feed-tile-stat {
  font-size: 11px;
  color: var(--ink-muted);
}

/* Empty state */
.feed-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 14px;
}
.feed-empty-sub {
  font-size: 12px;
  margin-top: 4px;
  color: var(--ink-faint);
}

/* ── Launchpad ──────────────────────────────────────────────────────────── */

.launcher-mode {
  padding: 0 !important;
  background: var(--surface-base);
}

.launcher-greeting {
  padding: 20px 20px 6px;
}

.launcher-greet-text {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.launcher-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 12px 12px;
}

.launcher-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 0;
  aspect-ratio: 1;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: var(--surface-card, #FAFAF7);
  border-left: 3px solid var(--tile-accent, var(--brand-accent));
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.launcher-tile--tall {
  min-height: 0;
  aspect-ratio: 1;
}

.launcher-tile:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .launcher-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
}

.launcher-tile-icon {
  display: none;
}

.launcher-tile-img {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 55%;
  max-height: 55%;
  object-fit: contain;
  opacity: 0.55;
  pointer-events: none;
}

.launcher-tile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
  width: 100%;
}

.launcher-tile-label {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.2;
  color: var(--text-primary);
}

.launcher-tile-sub {
  font-family: var(--font-sans);
  font-size: 10px;
  opacity: 0.55;
  line-height: 1.3;
  font-weight: 400;
  color: var(--text-primary);
}

/* Larger screens: cap grid width and add breathing room */
@media (min-width: 500px) {
  .launcher-grid {
    max-width: 420px;
    margin: 0 auto;
    gap: 10px;
    padding: 12px 24px 24px;
  }
}

/* ── Worst/Best Eleven Pre-Game Page ─────────────────────────────────────── */

.eleven-pregame {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--surface-base);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.eleven-pregame-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
  border-bottom: 1px solid var(--surface-sink);
  background: var(--surface-raised);
  min-height: 48px;
}

.eleven-pregame-back,
.eleven-pregame-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.eleven-pregame-title {
  flex: 1;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
}

.eleven-pregame-mode {
  display: flex;
  gap: 8px;
  padding: 20px 20px 0;
}

.eleven-mode-btn {
  flex: 1;
  padding: 10px;
  border: 2px solid var(--surface-sink);
  border-radius: 10px;
  background: var(--surface-raised);
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.eleven-mode-btn--active {
  border-color: var(--brand);
  background: var(--brand-surface);
  color: var(--brand);
}

.eleven-pregame-desc {
  padding: 12px 20px 4px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

.eleven-pregame-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
}

.eleven-option-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  border: 1px solid var(--surface-sink);
  border-radius: 14px;
  background: var(--surface-raised);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.eleven-option-card:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .eleven-option-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-1px);
  }
}

.eleven-option-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-base);
}

.eleven-option-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eleven-option-icon-emoji {
  font-size: 22px;
}

.eleven-option-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eleven-option-label {
  font-family: 'Space Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.eleven-option-sub {
  font-size: 13px;
  color: var(--text-muted);
}

.eleven-option-arrow {
  font-size: 20px;
  color: var(--text-faint);
  flex-shrink: 0;
}

/* Friend picker */
.eleven-friend-picker {
  padding: 16px 20px;
}

.eleven-friend-section-label {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.eleven-friend-recent {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 14px;
  -webkit-overflow-scrolling: touch;
}

.eleven-friend-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  min-width: 60px;
  -webkit-tap-highlight-color: transparent;
}

.eleven-friend-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Space Mono', monospace;
}

.eleven-friend-name {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eleven-friend-search-wrap {
  margin-top: 8px;
}

.eleven-friend-search {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px dashed var(--surface-sink);
  border-radius: 10px;
  background: transparent;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
}

.eleven-friend-search:focus {
  border-color: var(--brand);
  border-style: solid;
}

.eleven-friend-results {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.eleven-friend-result {
  padding: 12px 14px;
  border-bottom: 1px solid var(--surface-sink);
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
}

.eleven-friend-result:active {
  background: var(--surface-hover);
}

/* ── Platform Feed tiles ─────────────────────────────────────────────────── */

/* ── Platform Feed — badge + title + teaser strip ─────────────────────── */
.platform-feed-tile {
  background: var(--surface-float);
  border-bottom: 1px solid var(--border-light, #e8e8e8);
  cursor: pointer;
  transition: background 0.15s ease;
  margin: 0 12px;
  overflow: hidden;
  flex-shrink: 0; /* prevent collapse in flex-column feed containers */
}
.platform-feed-tile:first-child {
  border-top: 1px solid var(--border-light, #e8e8e8);
  border-radius: 8px 8px 0 0;
}
.platform-feed-tile:last-child {
  border-radius: 0 0 8px 8px;
}
.platform-feed-tile:first-child:last-child {
  border-radius: 8px;
  border-top: 1px solid var(--border-light, #e8e8e8);
}
.platform-feed-tile:hover {
  background: var(--surface-hover, var(--surface-sink));
}

.pf-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 0 0 16px;
  min-height: 76px;
}

/* Content-type badge — colour is a category system, not decoration */
.pf-row-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 72px;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

/* Coloured dot — micro-brand signal inside the pill */
.pf-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.5;
}

/* ── Per-type pill colours ── */
.pf-pill-hottake {
  background: var(--colour-danger);
  color: #fff;
}
.pf-pill-rated {
  background: #1a1a1a;
  color: #e8c97a;
}
.pf-pill-transfers {
  background: #0c3b5e;
  color: #9fd4ff;
}
.pf-pill-h2h {
  background: #1a332a;
  color: #a0e8b0;
}
.pf-pill-rewind {
  background: #2d1b4e;
  color: #c4a8f0;
}
.pf-pill-deepdive {
  background: #1a2940;
  color: #8bb8e8;
}
.pf-pill-zeitgeist {
  background: #3b2a1a;
  color: #e8c08b;
}
.pf-pill-preview {
  background: var(--brand-hover);
  color: #8be8a0;
}
.pf-pill-draft {
  background: var(--brand-hover);
  color: #8be8a0;
}
.pf-pill-teamsheet {
  background: var(--brand);
  color: var(--text-on-brand);
}
.pf-pill-default {
  background: #333;
  color: #ccc;
}

/* Title — fills space between badge and strip */
.pf-row-title {
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink, #1a1a1a);
  line-height: 1.4;
  padding: 14px 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pf-row-title strong {
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}

/* Teaser strip — right-edge card image, flush to tile border */
.pf-row-strip {
  align-self: stretch;
  width: 190px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center left;
  position: relative;
}
.pf-row-strip::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 48px;
  background: linear-gradient(to right, var(--surface-float, #fff) 0%, transparent 100%);
  pointer-events: none;
}
.platform-feed-tile:hover .pf-row-strip::before {
  background: linear-gradient(to right, var(--bg-hover, #f8f8f6) 0%, transparent 100%);
}
.pf-row-strip-empty {
  width: 190px;
  flex-shrink: 0;
}

/* Mobile feed tiles: badge + fixed-width strip only, no title text */
@media (max-width: 640px) {
  .pf-row {
    padding: 0 0 0 12px;
    min-height: 68px;
  }
  .pf-row-title {
    display: none;
  }
  .pf-row-strip {
    width: 180px;
    flex-shrink: 0;
  }
  .pf-row-strip-empty {
    width: 180px;
    flex-shrink: 0;
  }
  .pf-row-strip::before {
    width: 36px;
  }
}

/* Sidebar nav icon sizing */
#navFeed .nav-icon,
#navHotTakes .nav-icon {
  width: 16px;
  height: 16px;
}

/* ── Shareable dossier card ──────────────────────────────────────────────── */
.dossier-card {
  margin-top: 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
.dossier-match {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}
.dossier-label-winner     { background: var(--colour-live); color: #fff; }
.dossier-label-dominant   { background: #2980b9; color: #fff; }
.dossier-label-obliterated { background: var(--meg-green); color: #fff; }
.dossier-label-beaten     { background: var(--ink-muted); color: #fff; }
.dossier-label-outclassed { background: var(--red-card); color: #fff; }
.dossier-name {
  font-weight: 700;
  font-size: 14px;
  flex: 1;
  min-width: 80px;
}
.dossier-pts {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-serif);
  color: var(--ink);
}
.dossier-rank {
  font-size: 12px;
  color: var(--ink-muted);
}
.dossier-player-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.dossier-player-row:last-child { border-bottom: none; }
.dpr-name {
  flex: 1;
  color: var(--ink);
  font-weight: 500;
}
.dpr-captain {
  font-size: 9px;
  font-weight: 800;
  background: var(--amber);
  color: var(--ink);
  padding: 0 3px;
  border-radius: 3px;
  margin-left: 3px;
}
.dpr-events {
  font-size: 12px;
  letter-spacing: -0.02em;
}
.dpr-pts {
  font-weight: 700;
  font-size: 12px;
  min-width: 32px;
  text-align: right;
}
.dpr-pts.pos { color: var(--colour-live); }
.dpr-pts.neg { color: var(--red-card); }
.dossier-share-btn {
  display: block;
  width: calc(100% - 24px);
  margin: 8px 12px 12px;
  padding: 10px;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

/* ── Halftime swap context ───────────────────────────────────────────────── */
.halftime-swap-context {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.htsc-label {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* ── Step-by-step draft picker ───────────────────────────────────────────── */
.draft-step-progress {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 8px 0 4px;
}
.draft-step-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.draft-step-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.draft-step-need {
  font-size: 12px;
  color: var(--ink-muted);
}
.chip-step-hint {
  display: block;
  font-size: 10px;
  color: var(--ink-muted);
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.draft-back-btn {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-muted);
  padding: 4px 0;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
}
.draft-picks-summary {
  padding: 8px 0;
}
.dps-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.dps-pos {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-muted);
  min-width: 70px;
}
.dps-name {
  color: var(--ink);
}

/* ── Worst XI dark mode ─────────────────────────────────────────────────────
   Applied when body.mode-worst is set. Scoped to the thread panel only.
   Flips palette to dark/red for the entire draft session.
   ─────────────────────────────────────────────────────────────────────────── */
body.mode-worst #threadPanel {
  background: var(--worst-bg);
}
body.mode-worst #threadReplies {
  background: var(--worst-bg);
}
body.mode-worst #threadPanel .thread-header {
  background: var(--worst-bg);
  border-bottom-color: var(--worst-bg-mid);
}
body.mode-worst #threadPanel .thread-input-bar {
  background: var(--worst-bg);
  border-top-color: var(--worst-bg-mid);
}
body.mode-worst #threadPanel .thread-input-bar textarea,
body.mode-worst #threadPanel .thread-input-bar input {
  background: #2a1212;
  color: var(--worst-text);
  border-color: var(--worst-red);
}
body.mode-worst #threadPanel .game-block {
  background: var(--worst-bg);
  border-color: var(--worst-bg-sel);
  color: var(--worst-text);
}
body.mode-worst #threadPanel .game-block-label {
  background: var(--worst-bg-btn);
  color: #fff;
}
body.mode-worst #threadPanel .game-block-title {
  color: #f5c5b5;
}
body.mode-worst #threadPanel .draft-player-chip {
  background: var(--worst-bg-hover);
  color: var(--worst-text);
  border-color: var(--worst-bg-sel);
}
body.mode-worst #threadPanel .draft-player-chip.selected {
  background: #7a1a1a;
  border-color: var(--colour-danger);
  color: #fff;
}
body.mode-worst #threadPanel .draft-pos-label {
  color: #b07070;
}
body.mode-worst #threadPanel .draft-lock-btn {
  background: var(--colour-danger);
  color: #fff;
}
body.mode-worst #threadPanel .draft-lock-btn:disabled {
  background: #4a1a1a;
  color: #7a4040;
}
body.mode-worst #threadPanel .draft-mode-btn {
  color: #b07070;
}
body.mode-worst #threadPanel .draft-mode-btn.active {
  background: var(--worst-bg-btn);
  color: #fff;
}
body.mode-worst #threadPanel .msg-block {
  background: var(--worst-bg);
  color: var(--worst-text);
}
body.mode-worst #threadPanel .chip-step-hint {
  color: #c07070;
}
body.mode-worst #threadPanel .draft-step-progress {
  color: #b07070;
}
body.mode-worst #threadPanel .draft-step-header {
  color: #f5c5b5;
  border-bottom-color: var(--worst-bg-mid);
}
body.mode-worst #threadPanel .captain-tile {
  background: var(--worst-bg-hover);
  border-color: var(--worst-bg-sel);
  color: var(--worst-text);
}
body.mode-worst #threadPanel .captain-tile.selected {
  background: #7a1a1a;
  border-color: var(--colour-danger);
  color: #fff;
}
body.mode-worst #threadPanel .dice-btn {
  border-color: var(--worst-bg-sel);
  color: var(--worst-amber);
}
body.mode-worst #threadPanel .draft-leaderboard {
  background: var(--worst-bg);
  border-color: var(--worst-bg-mid);
}
body.mode-worst #threadPanel .draft-lb-row {
  border-bottom-color: var(--worst-bg-mid);
  color: var(--worst-text);
}
body.mode-worst #threadPanel .draft-lb-row.mine {
  background: #2a0f0f;
}
body.mode-worst #threadPanel .match-event-tile {
  background: var(--worst-bg);
  border-color: var(--worst-bg-mid);
}
body.mode-worst #threadPanel .result-headline { color: #f5c5b5; }
body.mode-worst #threadPanel .historical-result-label { color: var(--colour-danger); }

/* ── Blanket text colour fix — all game-block children default light ───────
   Individual elements like event-player, captain-tile-name etc. have their
   own color: var(--ink) which overrides inherited parent colour.
   We reset everything to the dark-mode palette and then carve out exceptions.
   ─────────────────────────────────────────────────────────────────────────── */
body.mode-worst #threadPanel .game-block *,
body.mode-worst #threadPanel .thread-meg-commentary,
body.mode-worst #threadPanel .match-event-tile *,
body.mode-worst #threadPanel .halftime-score *,
body.mode-worst #threadPanel .halftime-duel *,
body.mode-worst #threadPanel .swap-offer *,
body.mode-worst #threadPanel .coin-result *,
body.mode-worst #threadPanel .prediction-card * {
  color: var(--worst-text);
}

/* Muted / secondary text */
body.mode-worst #threadPanel .event-detail,
body.mode-worst #threadPanel .captain-tile-pos,
body.mode-worst #threadPanel .dossier-meta-label,
body.mode-worst #threadPanel .duel-label,
body.mode-worst #threadPanel .swap-heading,
body.mode-worst #threadPanel .swap-player-label,
body.mode-worst #threadPanel .game-block-label { color: var(--worst-muted); }
/* Score strip: slightly brighter so the match score is legible */
body.mode-worst #threadPanel .event-score-strip { color: #d0b8b8; }

/* Accent headers */
body.mode-worst #threadPanel .game-block-label { background: var(--worst-bg-btn); color: #fff; }
body.mode-worst #threadPanel .game-block-title { color: #f5c5b5; }

/* ── Interactive game elements — dark background, legible text ────────────
   All buttons/tiles that use --paper/--white backgrounds in light mode
   need explicit dark overrides so text isn't invisible in mode-worst.
   ─────────────────────────────────────────────────────────────────────── */

/* Difficulty select cards */
body.mode-worst #threadPanel .difficulty-btn {
  background: var(--worst-bg-hover);
  border-color: #5a2525;
}
body.mode-worst #threadPanel .difficulty-btn:hover {
  background: var(--worst-bg-hover);
  border-color: #7a3030;
}
body.mode-worst #threadPanel .difficulty-btn .diff-label { color: var(--worst-text); }
body.mode-worst #threadPanel .difficulty-btn .diff-sub   { color: var(--worst-faint); }
body.mode-worst #threadPanel .difficulty-intro           { color: var(--worst-muted); }

/* Match selection tiles */
body.mode-worst #threadPanel .match-tile {
  background: var(--worst-bg-hover);
  border-color: var(--worst-red);
}
body.mode-worst #threadPanel .match-tile:hover  { background: var(--worst-bg-hover); border-color: var(--worst-border); }
body.mode-worst #threadPanel .match-tile.selected { background: #1a2a1a; border-color: #4a9e6a; }
body.mode-worst #threadPanel .match-tile-teams  { color: var(--worst-text); }
body.mode-worst #threadPanel .match-tile-meta   { color: var(--worst-faint); }

/* Match reveal text + spin button */
body.mode-worst #threadPanel .reveal-match-title  { color: #f5c5b5; }
body.mode-worst #threadPanel .reveal-match-meta   { color: var(--worst-faint); }
body.mode-worst #threadPanel .reveal-match-blurb  { color: var(--worst-muted); }
body.mode-worst #threadPanel .reveal-spin-btn {
  background: var(--worst-bg-hover);
  border-color: var(--worst-red);
  color: var(--worst-text);
}
body.mode-worst #threadPanel .reveal-spin-btn:hover { background: var(--worst-bg-hover); border-color: var(--worst-border); }

/* Draft player pick buttons */
body.mode-worst #threadPanel .draft-player-btn {
  background: var(--worst-bg-hover);
  border-color: var(--worst-red);
}
body.mode-worst #threadPanel .draft-player-btn:hover    { background: var(--worst-bg-hover); border-color: var(--worst-border); }
body.mode-worst #threadPanel .draft-player-btn.selected { background: var(--worst-bg-sel); border-color: var(--colour-danger); }
body.mode-worst #threadPanel .draft-player-btn.draft-picked { background: var(--worst-bg); border-color: transparent; }
body.mode-worst #threadPanel .dp-name  { color: var(--worst-text); }
body.mode-worst #threadPanel .dp-meta  { color: var(--worst-faint); }
body.mode-worst #threadPanel .dp-taken { color: var(--worst-faint); }

/* Captain selection tiles */
body.mode-worst #threadPanel .captain-tile {
  background: var(--worst-bg-hover);
  border-color: var(--worst-red);
}
body.mode-worst #threadPanel .captain-tile:hover    { background: var(--worst-bg-hover); border-color: var(--worst-border); }
body.mode-worst #threadPanel .captain-tile.selected { background: #2a2010; border-color: var(--amber); }
body.mode-worst #threadPanel .captain-tile-name { color: var(--worst-text); }
body.mode-worst #threadPanel .captain-tile-pos  { color: var(--worst-faint); }
body.mode-worst #threadPanel .captain-tile-club { color: var(--worst-faint); }
body.mode-worst #threadPanel .dice-btn { color: var(--worst-faint); border-color: var(--worst-red); }
body.mode-worst #threadPanel .dice-btn:hover { color: var(--worst-text); border-color: var(--worst-border); }
body.mode-worst #threadPanel .dice-btn.selected { color: var(--amber); border-color: var(--amber); }

/* Score deltas: positive (good for Worst XI) = amber, negative = muted red */
body.mode-worst #threadPanel .event-delta.pos { color: var(--worst-amber); }
body.mode-worst #threadPanel .event-delta.neg { color: var(--worst-pos); }
body.mode-worst #threadPanel .event-delta.neu { color: var(--worst-muted); }

/* Dossier / standout scores */
body.mode-worst #threadPanel .dossier-pts.pos,
body.mode-worst #threadPanel .standout-pts.pos { color: var(--worst-amber); }
body.mode-worst #threadPanel .dossier-pts.neg,
body.mode-worst #threadPanel .standout-pts.neg { color: var(--worst-pos); }
body.mode-worst #threadPanel .dossier-pts.zero,
body.mode-worst #threadPanel .standout-pts.zero { color: #c8b0b0; }
/* Position labels: bump font size so they read at small sizes */
body.mode-worst #threadPanel .dossier-pos { font-size: 9px; color: #c8b0b0; }

/* ── Moonshot component dark mode overrides ─────────────────────────────── */

/* New match event tiles (met-* structure from moonshot rebuild) */
body.mode-worst #threadPanel .match-event-tile {
  background: var(--worst-bg);
  border-left-color: var(--worst-bg-mid);
}
body.mode-worst #threadPanel .match-event-tile.my-pick {
  background: rgba(160,40,40,0.15);
  border-left-color: var(--colour-danger);
}
body.mode-worst #threadPanel .met-player { color: var(--worst-text) !important; }
body.mode-worst #threadPanel .met-team   { color: var(--worst-muted) !important; }
body.mode-worst #threadPanel .met-min    { color: #8a6060 !important; }
body.mode-worst #threadPanel .met-delta.pos { color: var(--worst-amber) !important; }
body.mode-worst #threadPanel .met-delta.neg { color: var(--worst-pos) !important; }
body.mode-worst #threadPanel .met-pick-tag {
  color: var(--worst-amber) !important;
  background: rgba(245,166,35,0.12);
}

/* Squad drawer */
body.mode-worst #threadPanel .squad-drawer {
  background: var(--worst-bg);
  border-top-color: var(--worst-bg-mid);
}
body.mode-worst #threadPanel .squad-drawer-handle { color: var(--worst-text); }
body.mode-worst #threadPanel .squad-drawer-pts    { color: var(--worst-amber); }
body.mode-worst #threadPanel .squad-player-chip {
  background: var(--worst-bg-hover);
  color: var(--worst-text);
}
body.mode-worst #threadPanel .squad-player-chip.captain { background: rgba(245,166,35,0.15); }
body.mode-worst #threadPanel .spc-pts.pos { color: var(--worst-amber); }
body.mode-worst #threadPanel .spc-pts.neg { color: var(--worst-pos); }

/* New dossier card (shareable full-time/halftime card) */
body.mode-worst #threadPanel .dossier-card {
  background: var(--worst-bg);
  border-color: var(--worst-bg-sel);
}
body.mode-worst #threadPanel .dossier-card-header {
  background: var(--worst-bg);
  border-bottom: 1px solid var(--worst-bg-mid);
}
body.mode-worst #threadPanel .dossier-card-header * { color: var(--worst-text) !important; }
body.mode-worst #threadPanel .dossier-match-name   { color: var(--worst-muted) !important; }
body.mode-worst #threadPanel .dossier-match-phase  { color: #8a6060 !important; }
body.mode-worst #threadPanel .dossier-pts-hero     { color: var(--worst-text) !important; }
body.mode-worst #threadPanel .dossier-rank-hero    { color: var(--worst-muted) !important; }
body.mode-worst #threadPanel .dossier-player-row   { border-bottom-color: var(--worst-bg-mid); }
body.mode-worst #threadPanel .dossier-player-row * { color: var(--worst-text) !important; }
body.mode-worst #threadPanel .dossier-pos-group-label { color: #8a6060 !important; }
body.mode-worst #threadPanel .dpr-pts.pos          { color: var(--worst-amber) !important; }
body.mode-worst #threadPanel .dpr-pts.neg          { color: var(--worst-pos) !important; }
body.mode-worst #threadPanel .dossier-chip-line    { color: var(--worst-muted); border-top-color: var(--worst-bg-mid); }
body.mode-worst #threadPanel .dossier-share-btn    { background: var(--worst-bg-btn); color: #fff; }
body.mode-worst #threadPanel .dossier-swap-btn     { background: var(--worst-bg-mid); color: var(--worst-text); }

/* Dossier overlay (appended to body, not #threadPanel — always dark) */
.dossier-overlay .dossier-card                  { background: var(--worst-bg); border-color: var(--worst-bg-mid); }
.dossier-overlay .dossier-card-header           { background: var(--worst-bg); border-bottom: 1px solid var(--worst-bg-mid); }
.dossier-overlay .dossier-card-header *         { color: var(--worst-text) !important; }
.dossier-overlay .dossier-match-name            { color: var(--worst-muted) !important; }
.dossier-overlay .dossier-match-phase           { color: #8a6060 !important; }
.dossier-overlay .dossier-pts-hero              { color: var(--worst-text) !important; }
.dossier-overlay .dossier-rank-hero             { color: var(--worst-muted) !important; }
.dossier-overlay .dossier-player-row            { border-bottom-color: var(--worst-bg-mid); }
.dossier-overlay .dossier-player-row *          { color: var(--worst-text) !important; }
.dossier-overlay .dossier-pos-group-label       { color: #8a6060 !important; }
.dossier-overlay .dpr-pts.pos                   { color: var(--worst-amber) !important; }
.dossier-overlay .dpr-pts.neg                   { color: var(--worst-pos) !important; }
.dossier-overlay .dossier-chip-line             { color: var(--worst-muted); border-top-color: var(--worst-bg-mid); }
.dossier-overlay .dossier-swap-btn              { background: var(--meg-green); color: #fff; }
.dossier-overlay .dossier-overlay-dismiss       { color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.2); }

/* Dossier breakdown drawer — mode-worst dark overrides */
body.mode-worst #threadPanel .dossier-bd-wrap    { border-top-color: var(--worst-bg-mid); }
body.mode-worst #threadPanel .dossier-bd-toggle  { color: var(--worst-muted); }
body.mode-worst #threadPanel .dossier-bd-wrap.open .dossier-bd-toggle { color: var(--worst-text); }
body.mode-worst #threadPanel .dossier-bd-row     { border-bottom-color: var(--worst-bg-mid); }
body.mode-worst #threadPanel .dossier-bd-name    { color: var(--worst-text); }
body.mode-worst #threadPanel .dossier-bd-events  { color: var(--worst-text); }
body.mode-worst #threadPanel .dossier-bd-pts     { background: var(--worst-bg-mid); color: var(--worst-text); }
body.mode-worst #threadPanel .dossier-bd-pts.zero { color: #8a6060; }
body.mode-worst #threadPanel .dossier-bd-pts.win-ring { box-shadow: 0 0 0 2px var(--worst-amber); }
body.mode-worst #threadPanel .dossier-bd-pos     { background: #000; color: var(--worst-amber); }
body.mode-worst #threadPanel .dossier-bd-events-more { background: var(--worst-bg-mid); color: var(--worst-muted); }

.dossier-overlay .dossier-bd-wrap    { border-top-color: var(--worst-bg-mid); }
.dossier-overlay .dossier-bd-toggle  { color: var(--worst-muted); }
.dossier-overlay .dossier-bd-wrap.open .dossier-bd-toggle { color: var(--worst-text); }
.dossier-overlay .dossier-bd-row     { border-bottom-color: var(--worst-bg-mid); }
.dossier-overlay .dossier-bd-name    { color: var(--worst-text); }
.dossier-overlay .dossier-bd-events  { color: var(--worst-text); }
.dossier-overlay .dossier-bd-pts     { background: var(--worst-bg-mid); color: var(--worst-text); }
.dossier-overlay .dossier-bd-pts.zero { color: #8a6060; }
.dossier-overlay .dossier-bd-pts.win-ring { box-shadow: 0 0 0 2px var(--worst-amber); }
.dossier-overlay .dossier-bd-pos     { background: #000; color: var(--worst-amber); }
.dossier-overlay .dossier-bd-events-more { background: var(--worst-bg-mid); color: var(--worst-muted); }

/* Pick badges */
body.mode-worst #threadPanel .event-pick-badge.yours { background: #4a2200; color: var(--worst-amber); }
body.mode-worst #threadPanel .event-pick-badge.megs  { background: #1a1a40; color: #b090ff; }

/* Match event tiles — user/meg pick highlights */
body.mode-worst #threadPanel .match-event-tile.user-pick {
  border-left-color: var(--worst-amber);
  background: #2a1a0a;
}
body.mode-worst #threadPanel .match-event-tile.meg-pick {
  border-left-color: #7060c0;
  background: #1a1a2e;
}

/* Prediction buttons — must override var(--paper) background */
body.mode-worst #threadPanel .pred-btn {
  background: var(--worst-bg);
  color: var(--worst-text);
  border-color: var(--worst-red);
}
body.mode-worst #threadPanel .pred-btn:hover  { background: var(--worst-bg-hover); border-color: var(--worst-bg-btn); }
body.mode-worst #threadPanel .pred-btn.selected { background: var(--worst-bg-btn); color: #fff; border-color: var(--colour-danger); }
body.mode-worst #threadPanel .pred-btn.correct  { background: #0a2010; color: #6fcf97; border-color: #6fcf97; }
body.mode-worst #threadPanel .pred-btn.wrong    { background: var(--worst-bg); color: var(--worst-pos); border-color: var(--worst-pos); }
body.mode-worst #threadPanel .pred-btn.locked-in {
  opacity: 1;
  background: var(--worst-bg-btn);
  color: #fff;
  border-color: var(--colour-danger);
  transform: scale(1.03);
}

/* Scorer question buttons (3-option) */
body.mode-worst #threadPanel .scorer-btn {
  background: var(--worst-bg);
  color: var(--worst-text);
  border-color: var(--worst-red);
}
body.mode-worst #threadPanel .scorer-btn:hover   { background: var(--worst-bg-hover); border-color: var(--worst-bg-btn); }
body.mode-worst #threadPanel .scorer-btn.selected { background: var(--worst-bg-btn); color: #fff; border-color: var(--colour-danger); }
body.mode-worst #threadPanel .scorer-btn.correct  { background: #0a2010; color: #6fcf97; border-color: #6fcf97; }
body.mode-worst #threadPanel .scorer-btn.wrong    { background: var(--worst-bg); color: var(--worst-pos); border-color: var(--worst-pos); }

/* Draft pick chips (dark mode) */
body.mode-worst #threadPanel .draft-pick-chip {
  background: var(--worst-bg);
  border-color: var(--worst-red);
  color: var(--worst-text);
}
body.mode-worst #threadPanel .draft-pick-chip:hover {
  background: var(--worst-bg-hover);
  border-color: var(--worst-bg-btn);
}
body.mode-worst #threadPanel .draft-pick-chip.draft-pick-chosen {
  background: #0a2010;
  border-color: #6fcf97;
}
body.mode-worst #threadPanel .draft-pick-chip.sabotage { border-color: var(--worst-pos); }
body.mode-worst #threadPanel .draft-pick-chip.sabotage:hover { background: #2a0a0a; }
body.mode-worst #threadPanel .draft-pick-chip.sabotage.draft-pick-chosen { background: #2a0a0a; border-color: var(--worst-pos); }
body.mode-worst #threadPanel .draft-pick-chip-pos  { color: var(--worst-muted); }
body.mode-worst #threadPanel .draft-pick-chip-name { color: var(--worst-text); }
body.mode-worst #threadPanel .draft-pick-chip-team { color: var(--worst-faint); }
body.mode-worst #threadPanel .draft-pick-dice { border-color: var(--worst-red); }

/* Draft pick-made (dark mode) */
body.mode-worst #threadPanel .draft-pick-made-wrap {
  background: var(--worst-bg-hover);
  border-left-color: #6fcf97;
}
body.mode-worst #threadPanel .draft-pick-made-wrap.opp-pick {
  border-left-color: var(--worst-muted);
  background: var(--worst-bg);
}
body.mode-worst #threadPanel .draft-pick-made-wrap.sabotage {
  border-left-color: var(--worst-pos);
  background: #2a0a0a;
}
body.mode-worst #threadPanel .draft-pick-made-who  { color: var(--worst-muted); }
body.mode-worst #threadPanel .draft-pick-made-name { color: var(--worst-text); }
body.mode-worst #threadPanel .draft-pick-made-pos  { color: var(--worst-muted); }
body.mode-worst #threadPanel .draft-pick-made-team { color: var(--worst-faint); }
body.mode-worst #threadPanel .draft-pick-made-note { color: var(--worst-pos); }

/* Draft auto-pick (dark mode) */
body.mode-worst #threadPanel .draft-auto-pick-wrap {
  background: var(--worst-bg);
  border-left-color: var(--worst-red);
}
body.mode-worst #threadPanel .draft-auto-label { color: var(--worst-faint); }

/* Draft sabotage (dark mode) */
body.mode-worst #threadPanel .draft-sabotage-eyebrow { color: var(--worst-pos) !important; }
body.mode-worst #threadPanel .draft-sabotage-title   { color: var(--worst-pos); }

/* Draft timer (dark mode) */
body.mode-worst #threadPanel .draft-pick-timer-secs { color: var(--worst-muted); }

/* Coin toss buttons */
body.mode-worst #threadPanel .coin-btn {
  background: var(--worst-bg);
  border-color: var(--worst-red);
}
body.mode-worst #threadPanel .coin-btn:hover { background: var(--worst-bg-hover); border-color: var(--worst-bg-btn); }
body.mode-worst #threadPanel .coin-btn-label { color: var(--worst-text); }

/* Swap offer */
body.mode-worst #threadPanel .swap-accept  { background: var(--worst-bg-btn); color: #fff; border-color: var(--colour-danger); }
body.mode-worst #threadPanel .swap-decline { background: var(--worst-bg-hover); color: var(--worst-muted); border-color: var(--worst-red); }
body.mode-worst #threadPanel .swap-player.out .swap-player-name { color: var(--worst-pos); }
body.mode-worst #threadPanel .swap-player.in  .swap-player-name { color: var(--worst-amber); }

/* Coin flip animation */
body.mode-worst #threadPanel .coin-flip-reveal  { color: var(--worst-text); }
body.mode-worst #threadPanel .coin-flip-winner-name { color: var(--worst-amber); }

/* Result tier label */
body.mode-worst #threadPanel .result-tier-label { color: var(--worst-muted); }

/* Good / Bad / Ugly tiles */
body.mode-worst #threadPanel .gbu-tile           { border-color: var(--worst-bg-mid); }
body.mode-worst #threadPanel .gbu-player-row     { border-color: #2d1212; }
body.mode-worst #threadPanel .gbu-good  .gbu-tile-head { background: rgba(40,80,30,0.25); color: #7ecf7e; }
body.mode-worst #threadPanel .gbu-bad   .gbu-tile-head { background: rgba(120,30,30,0.25); color: var(--worst-pos); }
body.mode-worst #threadPanel .gbu-ugly  .gbu-tile-head { background: rgba(80,60,20,0.2);  color: var(--worst-muted); }
body.mode-worst #threadPanel .gbu-player-name   { color: var(--worst-text); }
body.mode-worst #threadPanel .gbu-player-label  { color: #8a7070; }
body.mode-worst #threadPanel .gbu-player-pts.pos  { color: var(--worst-amber); }
body.mode-worst #threadPanel .gbu-player-pts.neg  { color: var(--worst-pos); }
body.mode-worst #threadPanel .gbu-player-pts.zero { color: #8a7070; }

/* RC event tooltip */
body.mode-worst #threadPanel .rc-event-tooltip { background: var(--worst-text); color: var(--worst-bg); }

/* Halftime duel scores */
body.mode-worst #threadPanel .duel-score { color: #f5c5b5; }

/* Worst mode header strip */
body.mode-worst #threadPanel .thread-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--worst-bg-btn), var(--colour-danger), var(--worst-bg-btn));
}

/* ── DM game hub tile (in DM chat) ──────────────────────────────────────────── */
/* ── Persistent DM Games Hub Tile (in chat feed) ─────────────────────────────
   ONE tile per conversation. Floats to latest when a new game starts.
   Two states: compact (no active game) and expanded (active game in progress).
   See docs/DM_GAMES_PERSISTENT_TILE.md for full spec.
   ──────────────────────────────────────────────────────────────────────────── */
.dm-hub-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-float, var(--white));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, border-color 0.2s;
  margin: 4px 0;
}
.dm-hub-tile:active { background: var(--surface-raised, var(--paper)); }
.dm-hub-tile-icon { font-size: 20px; flex-shrink: 0; }
.dm-hub-tile-body { flex: 1; min-width: 0; }
.dm-hub-tile-title { font-weight: 700; font-size: 14px; color: var(--text-primary, var(--ink)); }
.dm-hub-tile-sub {
  font-size: 12px;
  color: var(--text-muted, var(--ink-muted));
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-hub-tile-arrow { font-size: 18px; color: var(--text-faint, var(--ink-faint)); }

/* Expanded state — active game in progress */
.dm-hub-tile--active {
  border-color: var(--brand-accent, var(--meg-accent));
  border-left: 3px solid var(--brand-accent, var(--meg-accent));
}
.dm-hub-tile-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-accent, var(--meg-accent));
  margin-top: 3px;
}
.dm-hub-tile-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--colour-live-dot, #2ECC71);
  animation: hubDotPulse 1.5s ease-in-out infinite;
}
@keyframes hubDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* Pulse animation — new challenge notification */
.dm-hub-tile--challenge {
  animation: hubChallengePulse 2s ease-in-out 3;
  border-color: var(--colour-amber-cta, var(--amber));
}
@keyframes hubChallengePulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 4px rgba(200, 120, 0, 0.15); }
}

/* Float-in animation — tile repositioned to latest */
.dm-hub-tile--float-in {
  animation: hubFloatIn 0.35s ease-out;
}
@keyframes hubFloatIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── DM Games first-pass survivors (still referenced by app.js) ──────────────
   Structural selectors (.dm-games-page, -header, -back, -active, -scoreboard)
   moved to the full DM GAMES PAGE block below. These remain because app.js
   still uses these specific class names.
   ──────────────────────────────────────────────────────────────────────────── */
.dm-games-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary, var(--ink));
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-games-input-bar {
  flex-shrink: 0;
  padding: 8px 16px 12px;
  border-top: 1px solid var(--border);
}

/* Game history list (used by _buildDmHubStatsEl in app.js) */
.dm-game-history { margin-top: 16px; }
.dm-game-history-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-muted, var(--ink-muted));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.dm-game-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 6px);
  font-size: 13px;
  border-left: 3px solid transparent;
  margin-bottom: 4px;
}
.dm-game-history-win  { border-left-color: var(--colour-live-dot, #2ECC71); }
.dm-game-history-loss { border-left-color: var(--colour-danger, #E74C3C); }
.dm-game-history-draw { border-left-color: var(--text-faint, #999); }
.dm-game-history-type { font-weight: 600; flex: 1; color: var(--text-primary, var(--ink)); }
.dm-game-history-result { color: var(--text-muted, var(--ink-muted)); font-size: 12px; }
.dm-game-history-date { color: var(--text-faint, var(--ink-faint)); font-size: 11px; }

/* ── DM game thread panel hub header ────────────────────────────────────────── */
.dm-hub-loading {
  text-align: center;
  padding: 24px;
  color: var(--ink-muted);
  font-size: 13px;
}
.dm-hub-stats {
  text-align: center;
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.dm-hub-stats-score {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.dm-hub-stats-label {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
  margin-bottom: 14px;
}
.dm-hub-new-game-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 18px;
  background: var(--meg-green);
  color: var(--white);
  border: none;
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.dm-hub-new-game-btn:active { opacity: 0.82; }

/* Inline game picker (replaces openGameMenu in thread context) */
.dm-hub-game-picker {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dm-hub-picker-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 2px;
}
.dm-hub-picker-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-raised, #f9f9f9);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.dm-hub-picker-item:hover { background: var(--border); }
.dm-hub-picker-item:active { opacity: 0.75; }

/* ═══════════════════════════════════════════════════════════════════════════════
   DM GAMES PAGE — Full-screen takeover
   Same pattern as .match-page. Three zones: header, active game, scoreboard.
   See docs/DM_GAMES_PERSISTENT_TILE.md
   ═══════════════════════════════════════════════════════════════════════════════ */

.dm-games-page {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--surface-base, var(--paper));
  position: absolute;
  inset: 0;
  z-index: 110;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Header bar ───────────────────────────────────────────────────────────── */
.dm-games-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-float, var(--white));
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}
.dm-games-back {
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--text-muted, var(--ink-muted));
  background: none;
  border: none;
  transition: background 0.1s;
  flex-shrink: 0;
}
.dm-games-back:hover { background: var(--surface-hover); }
.dm-games-quit-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.dm-games-quit-btn:hover { background: var(--surface-hover); color: var(--danger, #e74c3c); }
.dm-game-notice {
  text-align: center;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-muted);
  font-style: italic;
}
/* .dm-games-header-title — REMOVED: app.js uses .dm-games-title (above) */

/* ── Active game zone ─────────────────────────────────────────────────────── */
.dm-games-active {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  overflow-y: auto;
  min-height: 0;
}
.dm-games-active:empty { display: none; }
.dm-games-active:empty + .dm-games-scoreboard { flex: 1; }

/* ── Scoreboard zone ──────────────────────────────────────────────────────── */
.dm-games-scoreboard {
  padding: 0 14px 14px;
  flex-shrink: 0;
}

/* Score display */
.dm-games-score {
  text-align: center;
  padding: 20px 0 16px;
}
.dm-games-score-names {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.dm-games-score-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, var(--ink));
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-games-score-name--me { color: var(--brand-accent, var(--meg-accent)); }
.dm-games-score-vs {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--text-primary, var(--ink));
  letter-spacing: 0.04em;
  min-width: 80px;
  text-align: center;
}
.dm-games-score-label {
  font-size: 12px;
  color: var(--text-muted, var(--ink-muted));
  margin-top: 4px;
}

/* New game button */
.dm-games-new-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  background: var(--brand, var(--meg-green));
  color: var(--text-on-brand, var(--white));
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.12s;
}
.dm-games-new-btn:active { opacity: 0.82; }

/* ── Game picker (inline, expands below button) ───────────────────────────── */
.dm-games-picker {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dm-games-picker-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, var(--ink-muted));
  margin-bottom: 2px;
}
.dm-games-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-raised, #f9f9f9);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.dm-games-picker-item:hover { background: var(--surface-hover, var(--border)); }
.dm-games-picker-item:active { opacity: 0.75; }
.dm-games-picker-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.dm-games-picker-info { flex: 1; min-width: 0; }
.dm-games-picker-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, var(--ink));
}
.dm-games-picker-desc {
  font-size: 12px;
  color: var(--text-muted, var(--ink-muted));
  margin-top: 1px;
}

/* ── Game history list ────────────────────────────────────────────────────── */
.dm-games-history {
  margin-top: 16px;
}
.dm-games-history-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, var(--ink-muted));
  margin-bottom: 8px;
}
.dm-games-history-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dm-games-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.dm-games-history-item:last-child { border-bottom: none; }
.dm-games-history-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.dm-games-history-info {
  flex: 1;
  min-width: 0;
}
.dm-games-history-type {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, var(--ink));
}
.dm-games-history-result {
  font-size: 12px;
  color: var(--text-muted, var(--ink-muted));
  margin-top: 1px;
}
.dm-games-history-date {
  font-size: 11px;
  color: var(--text-faint, var(--ink-faint));
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Result colour coding on the left border */
.dm-games-history-item--win  { border-left: 3px solid var(--brand, var(--meg-green)); padding-left: 8px; }
.dm-games-history-item--loss { border-left: 3px solid var(--colour-danger, var(--red-card)); padding-left: 8px; }
.dm-games-history-item--draw { border-left: 3px solid var(--text-faint, var(--ink-faint)); padding-left: 8px; }

/* Empty state */
.dm-games-history-empty {
  text-align: center;
  padding: 20px 0;
  font-size: 13px;
  color: var(--text-muted, var(--ink-muted));
  font-style: italic;
}

/* .dm-games-input — REMOVED: app.js uses .dm-games-input-bar (above).
   When WS1-B wires the full Games page, the input component should
   use .dm-games-input-bar or a new class. */

/* ── Tenable match history log ──────────────────────────────────────────────── */
.dm-tn-log {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.dm-tn-log-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  cursor: pointer;
  width: 100%;
  text-align: left;
  margin-bottom: 4px;
}
.dm-tn-log-toggle:hover { color: var(--ink); }
.dm-tn-log-count { font-weight: 400; }
.dm-tn-log-chevron { margin-left: auto; font-size: 10px; }
.dm-tn-log-rows { max-height: 280px; overflow-y: auto; }
.dm-tn-log-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.dm-tn-log-row:last-child { border-bottom: none; }
.dm-tn-log-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-tn-log-badge.me {
  background: var(--meg-green, #2e7d32);
  color: #fff;
}
.dm-tn-log-badge.them {
  background: var(--border);
  color: var(--ink-muted);
}
.dm-tn-log-claimed .dm-tn-log-text {
  color: var(--meg-green, #2e7d32);
  font-weight: 500;
  flex: 1;
}
.dm-tn-log-wrong .dm-tn-log-text {
  color: var(--ink-muted);
  flex: 1;
  text-decoration: line-through;
}
.dm-tn-log-lives {
  font-size: 11px;
  flex-shrink: 0;
}

/* ── DM thread challenge card ────────────────────────────────────────────────── */
.dm-thread-challenge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 6px 0;
}
.dm-thread-challenge-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.dm-thread-challenge-body { flex: 1; min-width: 0; }
.dm-thread-challenge-title { font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 3px; }

/* ═══════════════════════════════════════════════════════════
   MOONSHOT BUILD — March 2026
   ═══════════════════════════════════════════════════════════ */

/* ── Dossier card ─────────────────────────────────────────── */
.dossier-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 16px 0 40px;
}
.dossier-overlay-inner {
  width: 100%;
  max-width: 480px;
  padding: 0 16px;
}
.dossier-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  margin: 0 0 12px;
}
.dossier-card-header {
  background: var(--ink);
  color: var(--white);
  padding: 20px 20px 16px;
}
.dossier-match-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.dossier-match-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.dossier-match-phase {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dossier-result-hero {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 6px 0 2px;
  line-height: 1;
}
.dossier-pts-hero {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  color: var(--white);
  line-height: 1.1;
}
.dossier-rank-hero {
  font-size: 12px;
  text-align: center;
  opacity: 0.6;
  margin-top: 3px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.dossier-player-grid {
  padding: 4px 0;
}
.dossier-pos-group-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  padding: 6px 20px 2px;
}
.dossier-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.dossier-player-row:last-child { border-bottom: none; }
.dpr-name {
  flex: 1;
  font-weight: 500;
}
.dpr-name.captain::before {
  content: '★ ';
  color: var(--amber);
  font-size: 11px;
}
.dpr-captain-note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--amber);
  background: rgba(245,166,35,0.15);
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
}
.dpr-events {
  font-size: 14px;
  letter-spacing: 1px;
}
.dpr-pts {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  min-width: 40px;
  text-align: right;
}
.dpr-pts.pos { color: var(--meg-accent); }
.dpr-pts.neg { color: var(--red-card); }
.dossier-chip-line {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--ink-muted);
  font-style: italic;
  line-height: 1.5;
}
.dossier-chip-line::after {
  content: ' — Chip';
  font-weight: 600;
  font-style: normal;
  color: var(--amber);
}
.dossier-share-btn {
  display: block;
  width: calc(100% - 40px);
  margin: 12px 20px 20px;
  padding: 14px;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.02em;
  border: none;
}
.dossier-swap-btn {
  display: block;
  width: calc(100% - 40px);
  margin: 12px 20px 4px;
  padding: 14px;
  background: var(--meg-green);
  color: var(--white);
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border: none;
}
.dossier-overlay-dismiss {
  display: block;
  width: calc(100% - 40px);
  margin: 12px 20px 20px;
  padding: 12px;
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}

/* ── Dossier breakdown drawer — 11-row side-by-side spine ──────
   Collapsible player breakdown rendered underneath the verdict.
   Greg's pick on the left, POS chip on the spine, Meg's pick on the right.
   Tap the emoji cluster for fan-out of event detail.
   ─────────────────────────────────────────────────────────── */
.dossier-bd-wrap {
  border-top: 1px solid var(--border);
  margin: 0 20px 12px;
}
.dossier-bd-toggle {
  width: 100%;
  background: transparent;
  border: none;
  padding: 12px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  cursor: pointer;
  font-family: inherit;
}
.dossier-bd-chev {
  font-size: 10px;
  transition: transform 0.2s ease;
  display: inline-block;
}
.dossier-bd-wrap.open .dossier-bd-chev { transform: rotate(180deg); }
.dossier-bd-wrap.open .dossier-bd-toggle { color: var(--ink); }

.dossier-bd-body {
  padding: 4px 0 12px;
  display: none;
}
.dossier-bd-wrap.open .dossier-bd-body { display: block; }

.dossier-bd-row {
  display: grid;
  /* name | emoji | pts | POS | pts | emoji | name */
  grid-template-columns: 1fr 64px 44px 34px 44px 64px 1fr;
  align-items: center;
  column-gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.dossier-bd-row:last-child { border-bottom: none; }

.dossier-bd-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--ink);
}
.dossier-bd-name.left  { text-align: left; }
.dossier-bd-name.right { text-align: right; }
.dossier-bd-name.captain::before {
  content: '★ ';
  color: var(--amber);
  font-size: 11px;
}

.dossier-bd-events {
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  min-height: 14px;
}
.dossier-bd-events.left  { text-align: right; }
.dossier-bd-events.right { text-align: left; }
.dossier-bd-events:empty { cursor: default; }
.dossier-bd-events-more {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 6px;
  background: rgba(26,24,20,0.08);
  color: var(--ink-muted);
  margin-left: 2px;
  vertical-align: middle;
}

.dossier-bd-pts {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 12px;
  padding: 4px 0;
  border-radius: 999px;
  text-align: center;
  background: #f1ede3;
  color: var(--ink);
}
.dossier-bd-pts.win-ring {
  box-shadow: 0 0 0 2px var(--red-card);
}
.dossier-bd-pts.zero { color: var(--ink-faint, #9B9890); }

.dossier-bd-pos {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--white);
  background: var(--ink);
  padding: 4px 0;
  border-radius: 4px;
  text-align: center;
}

/* Best XI mode: ring is green instead of red */
.dossier-card.mode-best .dossier-bd-pts.win-ring {
  box-shadow: 0 0 0 2px var(--meg-accent);
}

/* Mobile: tighten column widths on very narrow screens */
@media (max-width: 380px) {
  .dossier-bd-row {
    grid-template-columns: 1fr 48px 38px 28px 38px 48px 1fr;
    column-gap: 6px;
    font-size: 12px;
  }
  .dossier-bd-events { font-size: 12px; letter-spacing: 0.5px; }
}

/* ── Arena event stream ───────────────────────────────────── */
.match-event-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  border-left: 3px solid var(--border);
  background: var(--white);
  margin: 3px 0;
  animation: evtDrop 0.18s ease-out;
}
.match-event-tile.my-pick {
  border-left-color: var(--meg-green);
  background: rgba(45,90,61,0.05);
}
.match-event-var {
  opacity: 0.6;
  text-decoration: line-through;
}
.met-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.met-icon { font-size: 18px; line-height: 1; }
.met-min {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-muted);
}
.met-body { flex: 1; min-width: 0; }
.met-player { font-weight: 600; font-size: 14px; display: block; }
.met-team { font-size: 11px; color: var(--ink-muted); display: block; }
.met-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.met-delta {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
}
.met-delta.pos { color: var(--meg-green); }
.met-delta.neg { color: var(--red-card); }
.met-pick-tag {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meg-green);
  background: rgba(45,90,61,0.12);
  padding: 1px 5px;
  border-radius: 3px;
}
@keyframes evtDrop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Squad drawer ─────────────────────────────────────────── */
.squad-drawer {
  border-top: 1px solid var(--border);
  background: var(--white);
  position: sticky;
  bottom: 0;
  z-index: 5;
}
.squad-drawer-handle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
}
.squad-drawer-handle span:first-child {
  font-weight: 600;
  font-size: 13px;
}
.squad-drawer-pts {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--meg-green);
}
.squad-drawer-body {
  padding: 0 16px 16px;
}
.squad-drawer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}
.squad-player-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  background: var(--paper);
  border-radius: 6px;
  font-size: 11px;
}
.squad-player-chip.captain {
  background: rgba(245,166,35,0.15);
}
.spc-pos {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.spc-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.spc-pts {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  margin-left: auto;
  flex-shrink: 0;
}
.spc-pts.pos { color: var(--meg-green); }
.spc-pts.neg { color: var(--red-card); }

/* ── Sticky scoreline ─────────────────────────────────────── */
.draft-live-scoreline {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  flex-wrap: wrap;
}
.dls-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--meg-green);
  margin-right: 5px;
  animation: pulseLive 1.5s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes pulseLive {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* ── Score strip pills ────────────────────────────────────── */
.pitch-score-strip {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.pitch-score-strip::-webkit-scrollbar { display: none; }
.strip-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: var(--white);
  border-radius: 20px;
  border: 1px solid var(--border);
  border-top-width: 3px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-size: 11px;
  user-select: none;
}
.strip-pill.active {
  box-shadow: 0 0 0 2px var(--meg-green);
}
.pill-home, .pill-away {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pill-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  padding: 0 4px;
}
.pill-status {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--meg-green);
}
.pill-status.ft { color: var(--ink-muted); }
.pill-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--meg-green);
  flex-shrink: 0;
  animation: pulseLive 1.5s ease-in-out infinite;
}
.strip-expand.open { max-height: 220px; }
.strip-react.reacted {
  background: rgba(45,90,61,0.1);
  border-color: var(--meg-green);
}

/* ── Score strip dividers ────────────────────────────────── */
.strip-divider {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 0 4px;
  border-left: 2px solid;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Compact Ticker Row ───────────────────────────────────── */
/* ── Pitch Event Card (redesigned ticker row) ────────────────────────── */
.pitch-event-card {
  background: var(--paper, #F7F5F0);
  border-radius: 10px;
  margin: 6px 12px;
  padding: 10px 14px 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.pitch-event-card:hover { background: var(--border, #E2DED6); }

.pec-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pec-minute {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  min-width: 32px;
  text-align: right;
  flex-shrink: 0;
}

.pec-comp-bar {
  width: 3px;
  height: 28px;
  border-radius: 2px;
  flex-shrink: 0;
}

.pec-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 3px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.pec-player {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pec-score-pill {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--white, #fff);
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.pec-spacer { flex: 1; min-width: 4px; }

.pec-reactions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.pec-top-emoji {
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1px;
}
.pec-emoji-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  margin-left: 1px;
}

.pec-add-emoji {
  font-size: 14px;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.pec-add-emoji:hover { opacity: 0.7; }

.pec-thread-btn {
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: opacity 0.15s;
}
.pec-thread-btn:hover { opacity: 0.7; }
.pec-thread-btn svg { display: block; }

.pec-row-bottom {
  padding: 3px 0 0 43px; /* align with player text (minute + bar gap) */
}

.pec-match-name {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-muted);
}
.pec-pts {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--meg-green);
  background: rgba(45, 90, 61, 0.1);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
}
.pec-impacts {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.pec-impact-chip {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}
.pec-impact-pos { background: rgba(45, 90, 61, 0.1); color: var(--meg-green); }
.pec-impact-neg { background: rgba(220, 53, 69, 0.1); color: var(--colour-danger); }

/* ── Legacy ticker-row (kept for non-Pitch rooms) ──────────────────── */
.ticker-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-left: 3px solid var(--meg-green);
  margin: 1px 0;
  background: var(--white);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  transition: background 0.1s;
  min-height: 32px;
}
.ticker-row:hover { background: var(--paper); }
.tr-emoji { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
.tr-player { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.tr-min { color: var(--ink-muted); font-size: 11px; flex-shrink: 0; }
.tr-assist-icon { cursor: pointer; font-size: 12px; flex-shrink: 0; }
.tr-assist-name { font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.ticker-row-sub { flex-wrap: wrap; }
.tr-sub-on { color: #2D5A3D; font-weight: 700; }
.tr-sub-off { font-size: 11px; color: var(--ink-muted); font-weight: 400; margin-left: 28px; width: 100%; padding-top: 1px; }
.tr-match { font-size: 11px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; cursor: pointer; padding: 1px 5px; border-radius: 3px; transition: background 0.1s; }
.tr-match:hover { background: rgba(0,0,0,0.06); color: var(--ink); }
.tr-comp-badge { font-size: 8px; font-weight: 700; letter-spacing: 0.5px; padding: 1px 4px; border-radius: 2px; text-transform: uppercase; flex-shrink: 0; }
.tr-spacer { flex: 1; }
.tr-thread { font-size: 11px; color: var(--ink-muted); white-space: nowrap; flex-shrink: 0; }
.tr-reactions { display: flex; gap: 3px; flex-shrink: 0; align-items: center; }
.tr-react-pill { font-size: 11px; padding: 1px 4px; border-radius: 10px; background: var(--paper); border: 1px solid var(--border); cursor: pointer; white-space: nowrap; }
.tr-react-pill.mine { background: rgba(45,90,61,0.1); border-color: var(--meg-green); }
.tr-react-more { font-size: 10px; color: var(--ink-muted); padding: 1px 3px; }

/* ── Emoji Picker Modal ────────────────────────────────────────────── */
.emoji-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emoji-picker-modal {
  background: var(--white, #fff);
  border-radius: 12px;
  width: 320px;
  max-width: 90vw;
  max-height: 70vh;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.ep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.ep-close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 0 4px;
}
.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 12px;
  overflow-y: auto;
  max-height: 50vh;
}
.ep-btn {
  background: none;
  border: none;
  font-size: 22px;
  padding: 6px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.1s;
}
.ep-btn:hover { background: var(--paper); }

/* ── Reaction Rank Modal ───────────────────────────────────────────── */
.reaction-rank-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reaction-rank-modal {
  background: var(--white, #fff);
  border-radius: 12px;
  width: 280px;
  max-width: 85vw;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.rrm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.rrm-close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 0 4px;
}
.rrm-body { padding: 8px 12px; }
.rrm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.rrm-row:hover { background: var(--paper); }
.rrm-row.mine { background: rgba(45,90,61,0.08); }
.rrm-emoji { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.rrm-bar-track {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.rrm-bar-fill {
  height: 100%;
  background: var(--meg-green, #2D5A3D);
  border-radius: 3px;
  transition: width 0.2s;
}
.rrm-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  min-width: 20px;
  text-align: right;
}
.hidden { display: none !important; }

/* ── Scores page ──────────────────────────────────────────── */
.psc-section {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.psc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  background: var(--white);
  transition: background 0.1s;
}
.psc-row:hover { background: var(--paper); }
.psc-logo { width: 18px; height: 18px; object-fit: contain; margin-right: 4px; vertical-align: middle; }
.psc-team { flex: 1; font-size: 13px; font-weight: 600; display: flex; align-items: center; }
.psc-home { justify-content: flex-end; text-align: right; }
.psc-away { justify-content: flex-start; text-align: left; }
.psc-score { font-family: var(--font-mono); font-weight: 800; font-size: 14px; flex-shrink: 0; min-width: 40px; text-align: center; }
.psc-status { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); flex-shrink: 0; }
.psc-status.psc-ft { color: var(--ink-faint); }
.psc-chevron { color: var(--ink-faint); font-size: 14px; flex-shrink: 0; }
.psc-empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--text-md);
}

/* ── Game Page ─────────────────────────────────────────────── */
.match-page {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--paper);
  position: absolute;
  inset: 0;
  /* Sit above input-bar (z-index:100) so we fully cover the chat area */
  z-index: 110;
  /* Safe area bottom for iOS */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Prevent flex children from shrinking — let the container scroll instead */
.match-page > * { flex-shrink: 0; }

/* Hide input bar while game page is open */
.input-bar.match-page-hidden {
  display: none !important;
}
.match-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}
.bc-back { cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 4px; transition: background 0.1s; }
.bc-back:hover { background: var(--paper); }
.bc-item { cursor: pointer; }
.bc-item:hover { color: var(--ink); text-decoration: underline; }
.bc-sep { color: var(--ink-faint); }
.bc-current { color: var(--ink); font-weight: 600; }

.match-header-card {
  background: var(--white);
  margin: 8px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}
.match-comp-bar {
  text-align: center;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #fff;
}
.match-teams { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px 12px 8px; }
.match-team { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.match-team-logo { width: 52px; height: 52px; object-fit: contain; }
.match-team-logo-fallback { width: 52px; height: 52px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: var(--ink-muted); }
.match-team-name { font-family: var(--font-sans); font-size: 13px; font-weight: 700; text-align: center; word-break: break-word; }
.match-scorers-side.away-side { text-align: right; }
/* Timeline team tag pill */
.tl-team-tag { font-family: var(--font-mono); font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 3px; letter-spacing: 0.4px; }
.tl-team-tag.home-tag { background: rgba(0,0,0,0.08); color: var(--ink-muted); }
.tl-team-tag.away-tag { background: rgba(0,0,0,0.08); color: var(--ink-muted); }
/* Draft empty step */
.draft-step-empty { padding: 16px; color: var(--ink-muted); font-size: 13px; text-align: center; }
.match-score-block { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.match-score { font-family: var(--font-mono); font-size: var(--text-3xl, 48px); font-weight: 800; letter-spacing: 2px; line-height: var(--leading-tight, 0.95); }
.match-minute { font-family: var(--font-mono); font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.match-minute .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--meg-green); animation: pulseLive 1.5s ease-in-out infinite; }

.match-scorers { display: flex; padding: 8px 16px 12px; gap: 16px; }
.match-scorers-side { flex: 1; font-size: 12px; color: var(--ink-muted); line-height: 1.6; }
.match-scorers-side.away { text-align: right; }
.match-scorer-name { font-weight: 600; color: var(--ink); }
.match-scorer-min { font-family: var(--font-mono); font-size: 10px; }
.match-scorer-assist { font-size: 10px; color: var(--ink-muted); }

.match-stats-card { background: var(--white); margin: 0 8px 8px; border-radius: var(--radius); border: 1px solid var(--border); padding: 12px 16px; }
.match-stat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.match-stat-label { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); text-transform: uppercase; width: 80px; text-align: center; flex-shrink: 0; }
.match-stat-bar { flex: 1; height: 6px; background: var(--paper); border-radius: 3px; overflow: hidden; display: flex; }
.match-stat-bar-home { background: var(--meg-green); transition: width 0.5s ease; }
.match-stat-bar-away { background: var(--ink-faint); transition: width 0.5s ease; }
.match-stat-val { font-family: var(--font-mono); font-size: 11px; font-weight: 700; width: 28px; flex-shrink: 0; }
.match-stat-val.home { text-align: right; }
.match-stat-val.away { text-align: left; }
.match-timeline-header { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--ink-muted); padding: 12px 12px 4px; }

/* ── Match detail timeline (home left / away right) ── */
.match-timeline { display: flex; flex-direction: column; gap: 0; padding: 0 8px 12px; }
.tl-row { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-bottom: 1px solid var(--border); font-size: 13px; }
.tl-row:last-child { border-bottom: none; }
.tl-row.tl-home { justify-content: flex-start; }
.tl-row.tl-away { justify-content: flex-end; text-align: right; }
.tl-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
.tl-content { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-min { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); flex-shrink: 0; min-width: 28px; }
.tl-row.tl-home .tl-min { text-align: left; }
.tl-row.tl-away .tl-min { text-align: right; }
.tl-assist { font-weight: 400; font-size: 12px; color: var(--ink-muted); }
.tl-sub .tl-on { color: #2D5A3D; }
.tl-sub .tl-off { color: var(--ink-muted); font-weight: 400; font-size: 12px; }
.tl-sub .tl-off::before { content: '▸ '; font-size: 9px; }

/* ── Chip broadcast card (morning preview / end-of-day recap) ── */
.chip-broadcast-card {
  margin: 6px 12px;
  border-radius: 8px;
  background: var(--paper, #F7F5F0);
  border: 1px solid var(--border);
  overflow: hidden;
}
.chip-bc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--border);
}
.chip-bc-icon { font-size: 14px; }
.chip-bc-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-muted); flex: 1; }
.chip-bc-time { font-size: 11px; color: var(--ink-muted); }
.chip-bc-body { padding: 10px 12px 6px; font-size: 14px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }
.chip-bc-sig { padding: 0 12px 10px; font-size: 12px; color: var(--ink-muted); font-style: italic; }

/* ── Back Page tiles ─────────────────────────────────────── */
/* ── Back Page tiles — editorial card system ─────────────── */
.back-page-tile {
  background: var(--white, #fff);
  border: 1px solid var(--border, #E2DED6);
  border-radius: var(--radius, 12px);
  margin: 12px 0;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
/* Override .room-msg flex — tiles must stack vertically, not horizontally */
.back-page-tile.room-msg {
  display: block;
  gap: 0;
  padding: 0;
}
.back-page-tile:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

/* Top bar: label pill + time */
.bp-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0;
}
.bp-tile-label {
  display: inline-block;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  line-height: 1;
}
.bp-tile-time {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted, #6B6760);
  letter-spacing: 0.3px;
}

/* Serif headline */
.bp-tile-headline {
  font-family: var(--font-serif, 'DM Serif Display', Georgia, serif);
  font-size: var(--text-xl, 24px);
  font-weight: 400;
  line-height: var(--leading-snug, 1.1);
  color: var(--ink, #1A1814);
  padding: 12px 20px 4px;
  margin: 0;
  letter-spacing: -0.2px;
}

/* Card image */
.bp-tile-img {
  width: calc(100% - 40px);
  margin: 12px 20px;
  border-radius: var(--radius-sm, 8px);
  display: block;
  cursor: zoom-in;
}

/* Body text — capped at 3 lines to keep tiles compact */
.bp-tile-body {
  padding: 8px 20px 12px;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink, #1A1814);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Spotlight callout (transfer roundup) */
.bp-tile-spotlight {
  margin: 0 20px 12px;
  padding: 12px 16px;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1A1814);
  background: var(--surface-amber);
  border-left: 3px solid var(--amber, var(--worst-amber));
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  line-height: 1.5;
}

/* Meg comment row */
.bp-meg-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 20px 12px;
}
.bp-meg-text {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-muted, #6B6760);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
img.bp-meg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 1px;
}
div.bp-meg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--meg-green, #2D5A3D);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.bp-meg-text {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-muted, #6B6760);
}

/* Divider before reactions */
.bp-tile-divider {
  height: 1px;
  background: var(--border, #E2DED6);
  margin: 0 20px;
}

/* Reaction pills */
.bp-tile-reactions {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  flex-wrap: wrap;
}
.bp-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid var(--border, #E2DED6);
  border-radius: 20px;
  background: var(--paper, #F7F5F0);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s ease;
  user-select: none;
}
.bp-reaction-pill:hover {
  background: var(--surface-sink);
  border-color: var(--ink-faint, #C8C5BE);
}
.bp-reaction-pill.mine {
  background: var(--surface-success);
  border-color: var(--meg-green, #2D5A3D);
}
.bp-reaction-emoji { font-size: 16px; }
.bp-reaction-count {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted, #6B6760);
  min-width: 12px;
  text-align: center;
}
.bp-reaction-pill.mine .bp-reaction-count { color: var(--meg-green, #2D5A3D); }

/* Thread CTA */
.bp-tile-thread-prompt {
  padding: 0 20px 16px;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--meg-green, #2D5A3D);
  cursor: pointer;
  text-align: right;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.bp-tile-thread-prompt:hover {
  color: var(--meg-accent, #4A9E6A);
  text-decoration: underline;
}

/* ── Admin flag button (superuser content quarantine) ── */

.admin-flag-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  background: rgba(0,0,0,0.55);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}

.admin-flag-btn:hover {
  background: var(--red-500, #ef4444);
}

*:hover > .admin-flag-btn,
.admin-flag-btn:focus {
  opacity: 1;
}

/* Trivia flag on full-screen quiz pages — always visible, top-right of content */
.trivia-flag-btn {
  opacity: 0.6;
}

/* ── Back Page — inline CSS cards (no server image needed) ── */

.bp-card-hidden { display: none; }

.bp-inline-card {
  margin: 12px 20px;
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}

/* Hot Take card */
.bp-card-hottake {
  background: linear-gradient(135deg, #0a1a0a 0%, #1a3d1a 40%, #0d2818 70%, #061208 100%);
  padding: 32px 28px;
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bp-card-pill {
  display: inline-block;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.bp-card-statement {
  font-family: var(--font-serif, 'DM Serif Display', Georgia, serif);
  font-size: 24px;
  line-height: 1.35;
  color: #fff;
  font-weight: 400;
}

/* Head to Head card — split-panel design matching Puppeteer PNG */
.bp-card-h2h {
  background: #0D0D0D;
  padding: 0;
  overflow: hidden;
}
.bp-h2h-split {
  display: flex;
  min-height: 280px;
}
.bp-h2h-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 16px;
  position: relative;
}
.bp-h2h-initial {
  font-family: var(--font-serif, 'DM Serif Display', Georgia, serif);
  font-size: 64px;
  font-weight: 700;
  opacity: 0.15;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
  filter: brightness(2);
}
.bp-h2h-centre {
  width: 120px;
  flex-shrink: 0;
  background: #0D0D0D;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
}
.bp-h2h-meta {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 10px;
  text-align: center;
}
.bp-h2h-pill {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  background: var(--colour-danger);
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.bp-h2h-name {
  font-family: var(--font-serif, 'DM Serif Display', Georgia, serif);
  font-size: 18px;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 2px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.bp-h2h-team {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.bp-h2h-divider {
  font-family: var(--font-serif, 'DM Serif Display', Georgia, serif);
  font-size: 28px;
  color: #fff;
  margin-bottom: 12px;
}
.bp-h2h-stats {
  width: 100%;
  padding: 0 4px;
  margin-bottom: 10px;
}
.bp-h2h-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  gap: 4px;
}
.bp-h2h-val {
  font-family: 'DM Mono', var(--font-sans, 'DM Sans', sans-serif);
  font-size: 16px;
  font-weight: 700;
  min-width: 28px;
  text-align: center;
}
.bp-h2h-stat-row .bp-h2h-val:last-child { text-align: center; }
.bp-h2h-label {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  text-align: center;
  flex: 1;
}
.bp-h2h-framing {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 9px;
  line-height: 1.4;
  color: rgba(255,255,255,0.45);
  text-align: center;
  padding: 0 2px;
}

/* Rated card — editorial card with gradient background */
.bp-card-rated {
  padding: 28px 24px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
}
.bp-rated-info-block {
  margin-bottom: 4px;
}
.bp-rated-name {
  font-family: var(--font-serif, 'DM Serif Display', Georgia, serif);
  font-size: 24px;
  color: #fff;
  line-height: 1.2;
}
.bp-rated-team {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 4px;
  color: rgba(255,255,255,0.5);
}
.bp-rated-stats {
  display: flex;
  gap: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.bp-rated-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.bp-rated-stat-val {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.bp-rated-stat-label {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.bp-rated-verdict {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.bp-verdict-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 10px;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Transfer Roundup card */
.bp-card-transfers {
  background: #1A1814;
  padding: 20px;
}
.bp-transfer-item {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 13px;
  line-height: 1.6;
  color: #ccc;
  padding: 8px 0;
  border-bottom: 1px solid #333;
}
.bp-transfer-item:last-child { border-bottom: none; }
.bp-transfer-spotlight-item {
  color: #fff;
  font-weight: 600;
}
.bp-transfer-question {
  margin-top: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}

/* ── Press Room tile ──────────────────────────────────────── */

.press-room-tile {
  background: var(--white, #fff);
  border: 1px solid var(--border, #E2DED6);
  border-radius: var(--radius, 12px);
  margin: 12px 0;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
/* Override .room-msg flex — tiles must stack vertically */
.press-room-tile.room-msg {
  display: block;
  gap: 0;
  padding: 0;
}
.press-room-tile:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.pr-tile-thumb {
  width: 100%;
  height: 180px;
  position: relative;
  overflow: hidden;
}
.pr-tile-fallback-icon {
  position: absolute;
  bottom: 16px;
  right: 20px;
  font-size: 56px;
  opacity: 0.4;
}
.pr-tile-category {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 12px;
  border-radius: 4px;
  line-height: 1;
}

.pr-tile-body {
  padding: 0 20px 16px;
}
.pr-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 0;
}
.pr-tile-time {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 11px;
  color: var(--ink-muted, #6B6760);
}
.pr-tile-readtime {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 11px;
  color: var(--ink-muted, #6B6760);
  letter-spacing: 0.3px;
}

.pr-tile-headline {
  font-family: var(--font-serif, 'DM Serif Display', Georgia, serif);
  font-size: var(--text-2xl, 32px);
  font-weight: 400;
  line-height: var(--leading-snug, 1.1);
  color: var(--ink, #1A1814);
  margin: 8px 0 6px;
  letter-spacing: -0.3px;
}
.pr-tile-deck {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted, #6B6760);
  margin: 0 0 12px;
}

.pr-tile-meg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.pr-tile-divider {
  height: 1px;
  background: var(--border, #E2DED6);
  margin: 4px 0 12px;
}

.pr-tile-reactions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.pr-tile-cta {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--meg-green, #2D5A3D);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: right;
}
.press-room-tile:hover .pr-tile-cta {
  text-decoration: underline;
}

/* ── Article Viewer (full-screen overlay) ─────────────────── */

.article-viewer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--white, #fff);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.av-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border, #E2DED6);
  flex-shrink: 0;
  background: var(--white, #fff);
}
.av-back {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1A1814);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.av-back:hover {
  background: var(--bg-hover, #F5F3EF);
}
.av-category {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.av-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.av-iframe {
  width: 100%;
  border: none;
  display: block;
  overflow: hidden;
}

/* Engagement zone below article */
.av-engagement {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 20px 40px;
}

.av-reactions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.av-reaction-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border, #E2DED6);
  border-radius: 20px;
  background: var(--white, #fff);
  cursor: pointer;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  transition: all 0.15s ease;
}
.av-reaction-pill:hover {
  background: var(--bg-hover, #F5F3EF);
}
.av-reaction-pill.mine {
  border-color: var(--meg-green, #2D5A3D);
  background: rgba(45,90,61,0.06);
}

.av-divider {
  height: 1px;
  background: var(--border, #E2DED6);
  margin: 24px 0;
}

.av-thread-header {
  margin-bottom: 16px;
}
.av-thread-count {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1A1814);
}

.av-thread-replies {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.av-reply {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.av-reply-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-serif, 'DM Serif Display', Georgia, serif);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.av-reply-content {
  flex: 1;
  min-width: 0;
}
.av-reply-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.av-reply-name {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1A1814);
}
.av-reply-name.meg {
  color: var(--meg-green, #2D5A3D);
}
.av-reply-time {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 11px;
  color: var(--ink-muted, #6B6760);
}
.av-reply-text {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink, #1A1814);
}

.av-thread-input {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--border, #E2DED6);
  border-radius: 12px;
  background: var(--bg, #FAF8F5);
}
.av-thread-input input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 14px;
  color: var(--ink, #1A1814);
}
.av-thread-input input::placeholder {
  color: var(--ink-muted, #6B6760);
}
.av-send-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--meg-green, #2D5A3D);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.av-send-btn:hover {
  background: var(--meg-accent, #4A9E6A);
}

/* Mobile responsive */
@media (max-width: 640px) {
  .pr-tile-thumb { height: 140px; }
  .pr-tile-headline { font-size: 20px; }
  .av-engagement { padding: 20px 16px 32px; }
  .av-thread-replies { max-height: 300px; }
}

/* ── Ticker event thread header (matches Pitch event card style) ──── */
.ticker-thread-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--paper, #F7F5F0);
  border-radius: 8px;
  margin: 0 0 4px;
}
.tth-min { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink-muted); min-width: 28px; text-align: right; }
.tth-comp-bar { width: 3px; height: 24px; border-radius: 2px; flex-shrink: 0; }
.tth-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 800; letter-spacing: 0.6px; padding: 3px 7px; border-radius: 4px; text-transform: uppercase; white-space: nowrap; }
.tth-player { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink); flex: 1; }
.tth-score { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink); background: var(--white); padding: 2px 8px; border-radius: 5px; }
.tth-match-line { padding: 2px 14px 8px 51px; font-size: 12px; color: var(--ink-muted); }

/* ── Quick-reaction bar (long-press on ticker rows) ──────── */
.quick-reaction-bar {
  position: fixed;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 6px 10px;
  box-shadow: var(--shadow-lg);
  animation: qr-pop 0.12s ease;
}
@keyframes qr-pop {
  from { opacity: 0; transform: scale(0.85) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.qr-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 8px;
  transition: transform 0.1s;
}
.qr-btn:hover, .qr-btn:active { transform: scale(1.25); }
.qr-btn-more {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-muted);
  padding: 2px 6px;
}

/* ── Pitch competition tabs ──────────────────────────────── */
.pitch-tab-strip {
  display: flex;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
.pitch-tab-strip.hidden { display: none; }
.pitch-tab-strip::-webkit-scrollbar { display: none; }
.ptab {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.ptab:hover { background: var(--paper); color: var(--ink); }
.ptab.active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

/* ── Pitch live scores table ─────────────────────────────── */
.pitch-scores-view {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.pitch-scores-view.hidden { display: none; }
.psc-section {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.psc-section:first-child { padding-top: 4px; }
.psc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.psc-row:hover { background: var(--paper); }
.psc-team {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
.psc-home { text-align: right; }
.psc-away { text-align: left; }
.psc-score {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  min-width: 36px;
  text-align: center;
}
.psc-status {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--meg-green);
  text-transform: uppercase;
  min-width: 32px;
  text-align: right;
}
.psc-ft   { color: var(--ink-muted); }
.psc-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--text-md);
}

/* ── Pitch swipe hint ────────────────────────────────────── */
.pitch-swipe-hint {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.pitch-swipe-hint.hidden { display: none; }
.psh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  display: inline-block;
  transition: background 0.15s, transform 0.15s;
}
.psh-dot.active {
  background: var(--ink);
  transform: scale(1.4);
}
.psh-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Ticker tile footer (reactions + reply) ──────────────── */
.te-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.te-reply-btn {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.1s;
}
.te-reply-btn:hover { color: var(--ink); }

/* ── Unified trivia tile ──────────────────────────────────── */
.trivia-tile {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 4px 0;
}
.trivia-tile-eyebrow {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--meg-green);
  padding: 10px 16px 0;
}
.trivia-tile-question {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.4;
  padding: 6px 16px 12px;
  color: var(--ink);
}
.trivia-tile-timer {
  padding: 0 16px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.trivia-timer-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.trivia-tile-options {
  border-top: 1px solid var(--border);
}
.trivia-option {
  display: block;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
  background: var(--white);
  border-left: none;
  border-right: none;
  border-top: none;
}
.trivia-option:last-child { border-bottom: none; }
.trivia-option:hover { background: var(--paper); }
.trivia-option--correct {
  background: var(--colour-live) !important;
  color: white !important;
  font-weight: 700;
  animation: optionCorrect 0.3s ease;
}
.trivia-option--correct::before { content: '✓ '; }
.trivia-option--wrong {
  background: var(--red-card) !important;
  color: white !important;
}
.trivia-option--wrong::before { content: '✗ '; }
.trivia-option--neutral {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
@keyframes optionCorrect {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.trivia-meg-line {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink-muted);
  font-style: italic;
}

/* ── Tenable HUD completion bar ───────────────────────────── */
.tn-completion-bar {
  height: 2px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}
.tn-completion-fill {
  height: 100%;
  background: var(--meg-green);
  transition: width 0.3s ease;
}

/* ── Dugout tile exit animation ──────────────────────────── */
.dugout-tile--completing {
  animation: tileExit 3s ease-out forwards;
  pointer-events: none;
}
@keyframes tileExit {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: 0.4; transform: scale(0.97); }
  100% { opacity: 0; transform: scale(0.94); max-height: 0; margin: 0; padding: 0; }
}

/* ── Profile game history ────────────────────────────────── */
.profile-following-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-following-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.profile-following-row:last-child { border-bottom: none; }
.profile-following-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--ink);
  flex-shrink: 0;
  cursor: pointer;
}
.profile-following-row span { flex: 1; }

.profile-history {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.profile-section-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: 10px;
  padding: 0 20px;
}
.profile-history-list {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.profile-history-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.profile-history-row:last-child { border-bottom: none; }
.profile-history-row.winner { background: rgba(74,158,106,0.06); }
.phr-icon { font-size: 16px; flex-shrink: 0; }
.phr-label { flex: 1; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phr-rank { font-size: 11px; color: var(--ink-muted); min-width: 60px; text-align: right; white-space: nowrap; }
.profile-history-row.winner .phr-rank { color: var(--meg-green); font-weight: 600; }
.phr-pts { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-muted); min-width: 50px; text-align: right; white-space: nowrap; }
.profile-history-row.winner .phr-pts { color: var(--meg-accent); }
.phr-date { font-size: 10px; color: var(--ink-faint); min-width: 50px; text-align: right; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   #5 — PREDICTION TIMER (15s)
   ═══════════════════════════════════════════════════════════════ */

.pred-timer-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}
.pred-timer-secs {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  min-width: 18px;
  text-align: right;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   #12 — REMATCH / ANOTHER GAME / INVITE UI
   ═══════════════════════════════════════════════════════════════ */

/* Dossier card footer row (share + rematch + new game) */
.dossier-footer-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 10px;
}
.dossier-footer-row .dossier-share-btn {
  flex: 1;
}
.dossier-rematch-btn,
.dossier-another-btn {
  flex: 1;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.12s, background 0.12s;
  white-space: nowrap;
}
.dossier-rematch-btn:hover  { border-color: var(--ink); background: var(--white); }
.dossier-another-btn:hover  { border-color: var(--ink); background: var(--white); }
.dossier-rematch-btn:disabled,
.dossier-another-btn:disabled { opacity: 0.55; cursor: default; }

/* Historical draft action row */
.historical-action-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.historical-action-row .historical-share-btn,
.historical-action-row .dossier-rematch-btn,
.historical-action-row .dossier-another-btn {
  flex: 1;
}

/* Invite notification block buttons */
.invite-action-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.invite-accept-btn,
.invite-decline-btn {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  transition: border-color 0.12s, background 0.12s;
}
.invite-accept-btn  { background: var(--meg-green); color: #fff; border-color: var(--meg-green); }
.invite-accept-btn:hover  { background: var(--brand-hover); border-color: var(--brand-hover); }
.invite-decline-btn { background: var(--paper); color: var(--ink-muted); }
.invite-decline-btn:hover { border-color: var(--ink-muted); background: var(--white); }
.invite-status-label {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
}

/* Dark mode overrides for rematch/another game */
body.mode-worst .dossier-rematch-btn,
body.mode-worst .dossier-another-btn {
  background: #1a1a1a;
  border-color: #3a3a3a;
  color: #ccc;
}
body.mode-worst .dossier-rematch-btn:hover,
body.mode-worst .dossier-another-btn:hover {
  background: #252525;
  border-color: #666;
}

/* ─── Room photo tile ─────────────────────────────────────────────────────── */
.room-photo-tile {
  margin: 6px 0 6px 8px;
  max-width: 340px;
}
.room-photo-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.room-photo-sender {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-primary);
}
.room-photo-time {
  font-size: 11px;
  color: var(--ink-faint);
}
.room-photo-img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: zoom-in;
  object-fit: cover;
}

/* ─── Photo lightbox ─────────────────────────────────────────────────────── */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-lightbox.hidden { display: none; }
.photo-lightbox-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  cursor: zoom-out;
}
.photo-lightbox-img {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 6px;
  object-fit: contain;
  cursor: zoom-out;
}

/* ─── Huddle floating bar ────────────────────────────────────────────────── */
/* ── Huddle invite banner — shown to non-participants ───────────────────────── */
.huddle-invite-banner {
  position: absolute;
  bottom: calc(var(--input-bar-h, 60px) + 8px);
  left: 8px;
  right: 8px;
  background: var(--meg-green);
  color: var(--white);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 90;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  animation: slideUpFade 0.2s ease;
}
.huddle-invite-banner.hidden { display: none; }
.huddle-invite-icon { font-size: 16px; flex-shrink: 0; }
.huddle-invite-text { flex: 1; font-size: 13px; font-weight: 500; }
.huddle-invite-join-btn {
  background: rgba(255,255,255,0.2);
  border: 1.5px solid rgba(255,255,255,0.5);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  font-family: var(--font-sans);
}
.huddle-invite-join-btn:hover { background: rgba(255,255,255,0.3); }
.huddle-invite-dismiss-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  flex-shrink: 0;
  line-height: 1;
}
.huddle-invite-dismiss-btn:hover { color: var(--white); }
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Huddle invite toast — shown to users not in the huddle room ─────────────── */
.huddle-invite-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--meg-green);
  color: var(--white);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  animation: slideUpFade 0.2s ease;
  max-width: 360px;
  width: calc(100vw - 40px);
}
.huddle-toast-icon { font-size: 16px; flex-shrink: 0; }
.huddle-toast-msg  { flex: 1; font-size: 13px; font-weight: 500; }
.huddle-toast-join {
  background: rgba(255,255,255,0.2);
  border: 1.5px solid rgba(255,255,255,0.5);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-sans);
  flex-shrink: 0;
}
.huddle-toast-dismiss {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
}

/* ── Draft — claimed/locked player chip ──────────────────────────────────────── */
.draft-player-chip.draft-player-claimed {
  opacity: 0.4;
  cursor: not-allowed;
  border-style: dashed;
}
.dpc-claimed {
  font-size: 9px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-left: auto;
  flex-shrink: 0;
}

.huddle-bar {
  position: absolute;
  bottom: calc(var(--input-bar-h, 60px) + 8px);
  left: 8px;
  right: 8px;
  background: var(--paper);
  border: 1.5px solid var(--meg-green);
  border-radius: var(--radius);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.huddle-bar.hidden { display: none; }

.huddle-bar-left {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.huddle-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--meg-green);
  animation: huddle-pulse 1.8s ease-in-out infinite;
}
@keyframes huddle-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.huddle-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-primary);
}
.huddle-participants {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.huddle-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  background: var(--surface);
  color: var(--ink-primary);
  border: 1px solid var(--border);
  max-width: 90px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.huddle-chip.speaking {
  border-color: var(--meg-green);
  color: var(--meg-green);
  background: color-mix(in srgb, var(--meg-green) 10%, transparent);
}
.huddle-chip.muted { opacity: 0.5; }

.huddle-bar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.huddle-btn {
  width: 28px; height: 28px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.huddle-btn:hover { border-color: var(--ink-muted); color: var(--ink); }
.huddle-btn.muted  { color: var(--ink-faint); border-color: var(--border); }
.huddle-leave-btn { border-color: var(--colour-danger); color: var(--colour-danger); }
.huddle-leave-btn:hover { background: var(--colour-danger); color: white; border-color: var(--colour-danger); }

/* ══════════════════════════════════════════════════════════════════════════════
   THE TEAMSHEET — Game Week Squad Draft
   ══════════════════════════════════════════════════════════════════════════════ */

.teamsheet-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 8px 12px;
  gap: 6px;
  background: var(--paper);
}

/* Header — compact single-line bar (Phase 1 redesign) */
.ts-header {
  padding: 8px 12px;
}
.ts-header-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-muted);
}
.ts-close-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.ts-close-btn:hover { background: var(--bg-hover); color: var(--ink-primary); }
.ts-header-comp {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: var(--meg-green);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
}
.ts-header-round {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.ts-header-dot {
  color: var(--ink-faint);
  font-size: 11px;
}
.ts-header-fixtures {
  font-size: 12px;
}
.ts-header-lock {
  font-size: 12px;
  color: var(--ink-faint);
}
/* Legacy classes kept for non-draft phases that still use old header */
.ts-title { display: none; }
.ts-round {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--meg-green);
}
.ts-meta {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 4px;
}
.ts-phase-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 6px;
}

/* Fixture bar */

/* Progress */
.ts-progress {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.ts-progress-label { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.ts-progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}
.ts-progress-fill {
  height: 100%;
  background: var(--meg-green);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.ts-pos-count { font-family: var(--font-mono); }
.ts-pos-full  { color: var(--meg-green); font-weight: 700; }


/* Fixture grid */

/* Modal */

/* Lineup selector */
.ts-lineup-selector { display: flex; flex-direction: column; gap: 12px; }
.ts-lineup-header { text-align: center; padding: 12px; }
.ts-lineup-title { font-family: var(--font-serif); font-size: 18px; margin-bottom: 4px; }
.ts-lineup-formation { display: none; /* Hidden during pick step — formation shown only in builder */ }
.ts-lineup-count { font-size: 13px; font-weight: 600; margin-top: 4px; }
.ts-lineup-section { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
.ts-lineup-section-title { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-muted); margin-bottom: 8px; }
.ts-lineup-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 4px;
}
.ts-lineup-player:hover { background: rgba(45, 90, 61, 0.04); }
.ts-lineup-starter { background: rgba(45, 90, 61, 0.08); border: 1px solid var(--meg-green); }
.ts-lineup-disabled { opacity: var(--disabled-opacity); cursor: default; }
.ts-lineup-name { flex: 1; font-weight: 500; font-size: 13px; }
.ts-lineup-team { font-size: 12px; color: var(--ink-muted); }
.ts-lineup-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--border);
  color: var(--ink-muted);
}
.ts-lineup-starter .ts-lineup-badge { background: var(--meg-green); color: white; }

/* Review — base rules (overridden by Phase 6 centred block below) */
.ts-review { display: flex; flex-direction: column; gap: 12px; max-width: 440px; margin: 0 auto; width: 100%; }
.ts-review-title { font-family: var(--font-serif); font-size: 18px; text-align: center; }
.ts-review-section { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
.ts-review-label { font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--ink-muted); letter-spacing: 0.5px; margin-bottom: 8px; }
.ts-review-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.ts-review-player:last-child { border-bottom: none; }
.ts-review-pos { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-muted); width: 30px; }
.ts-review-name { flex: 1; font-weight: 500; }
.ts-review-team { font-size: 12px; color: var(--ink-muted); }
.ts-review-starter { background: rgba(45, 90, 61, 0.03); }

/* Navigation */
.ts-nav { display: flex; gap: 10px; justify-content: center; padding: 16px 0; }
.ts-btn {
  padding: 10px 24px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.ts-btn-primary   { background: var(--meg-green); color: white; }
.ts-btn-primary:hover { background: var(--brand-hover); }
.ts-btn-secondary { background: var(--border); color: var(--ink); }
.ts-btn-secondary:hover { background: #d4d0c8; }
.ts-btn-submit    { background: var(--meg-accent); color: white; }
.ts-btn-submit:hover { background: #3b8a5a; }

/* Submitted */
.ts-submitted { text-align: center; padding: 24px 16px; }
.ts-submitted-icon { font-size: 48px; margin-bottom: 8px; }
.ts-submitted-title { font-family: var(--font-serif); font-size: 20px; margin-bottom: 4px; }
.ts-submitted-meta { font-size: 13px; color: var(--ink-muted); margin-bottom: 6px; }
.ts-submitted-hint { font-size: 12px; color: var(--ink-faint); margin-bottom: 16px; }
.ts-submitted-summary { text-align: left; margin: 0 auto; max-width: 400px; }
.ts-entrants { font-size: 13px; color: var(--ink-muted); margin-top: 16px; font-family: var(--font-mono); }

/* Live view */
.ts-live { display: flex; flex-direction: column; gap: 16px; }
.ts-section-title { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-muted); margin-bottom: 10px; }

/* Leaderboard */
.ts-leaderboard {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.ts-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.ts-lb-row:last-child { border-bottom: none; }
.ts-lb-me { background: rgba(45, 90, 61, 0.06); border-radius: var(--radius-sm); }
.ts-lb-pos { font-family: var(--font-mono); font-weight: 700; width: 24px; text-align: center; color: var(--ink-muted); }
.ts-lb-name { flex: 1; font-weight: 500; }
.ts-lb-score { font-family: var(--font-mono); font-weight: 700; }
.ts-no-entrants { text-align: center; color: var(--ink-faint); padding: 16px; font-size: 13px; }

/* My squad in live view */
.ts-my-squad, .ts-all-squads, .ts-fixture-detail {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.ts-squad-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.ts-squad-row:last-child { border-bottom: none; }
.ts-starter     { background: rgba(45, 90, 61, 0.03); }
.ts-bench-player { opacity: 0.65; }
.ts-sq-pos  { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-muted); width: 28px; }
.ts-sq-name { flex: 1; font-weight: 500; }
.ts-sq-team { font-size: 12px; color: var(--ink-muted); min-width: 80px; }
.ts-sq-pts  { font-family: var(--font-mono); font-weight: 700; min-width: 40px; text-align: right; }
.ts-pts-pos { color: var(--meg-green); }
.ts-pts-neg { color: var(--red-card); }
.ts-sq-mult { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); width: 32px; text-align: right; }

/* All squads (details/summary) */
.ts-squad-detail { margin-bottom: 4px; }
.ts-squad-summary {
  padding: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ts-squad-score { font-family: var(--font-mono); font-weight: 700; font-size: 12px; }
.ts-squad-inner { padding: 0 8px 8px; }

/* Fixture status rows */
.ts-fixture-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.ts-fixture-row:last-child { border-bottom: none; }
.ts-fr-teams { font-weight: 500; }
.ts-fr-status { font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.ts-fix-live .ts-fr-status { color: var(--red-card); }
.ts-fix-done .ts-fr-status, .ts-fix-ft .ts-fr-status { color: var(--meg-green); }

.ts-waiting, .ts-loading {
  text-align: center;
  padding: 40px 16px;
  color: var(--ink-muted);
  font-size: 14px;
}

/* ── V2 Teamsheet: Error ──────────────────────────────────────── */
.ts-error {
  background: rgba(192, 57, 43, 0.08);
  color: var(--red-card);
  font-size: 13px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(192, 57, 43, 0.2);
}

/* ── V2 Teamsheet: Progress bar (updated) ─────────────────────── */
.ts-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.ts-progress-clubs {
  font-size: 12px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
}

/* ── V2 Teamsheet: Tab bar ────────────────────────────────────── */
.ts-tab-bar {
  display: flex;
  gap: 4px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.ts-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 6px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  background: transparent;
  color: var(--ink-muted);
}
.ts-tab:hover { background: rgba(45, 90, 61, 0.04); }
.ts-tab-active {
  background: var(--meg-green) !important;
  color: white !important;
}
.ts-tab-full:not(.ts-tab-active) {
  background: rgba(45, 90, 61, 0.08);
  color: var(--meg-green);
}
.ts-tab-label { font-weight: 700; font-size: 13px; letter-spacing: 0.5px; }
.ts-tab-count { font-family: var(--font-mono); font-size: 11px; opacity: 0.85; }

/* ── V2 Teamsheet: Crest carousel ─────────────────────────────── */
.ts-crest-section { margin-top: 4px; }
.ts-crest-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 2px 8px;
}
.ts-crest-title { font-weight: 600; font-size: 14px; color: var(--ink); }
.ts-crest-slots { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.ts-crest-slots-full { color: var(--meg-green); font-weight: 700; }

.ts-crest-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (max-width: 400px) { .ts-crest-grid { grid-template-columns: repeat(4, 1fr); } }

.ts-crest-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px 8px;
  aspect-ratio: 1;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ts-crest-item:hover {
  border-color: var(--meg-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(45, 90, 61, 0.12);
}
.ts-crest-item:active { transform: scale(0.96); }

.ts-crest-no-pos {
  opacity: var(--disabled-opacity);
  cursor: default;
}
.ts-crest-no-pos:hover { border-color: var(--border); transform: none; box-shadow: none; }

.ts-crest-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.ts-crest-fallback {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-muted);
  background: var(--border);
  border-radius: 50%;
}
.ts-crest-name {
  font-size: 10px;
  color: var(--ink-muted);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ts-crest-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  color: var(--ink-faint);
  font-size: 13px;
}
.ts-crest-done {
  text-align: center;
  padding: 16px;
  color: var(--meg-green);
  font-size: 13px;
  font-weight: 500;
}

/* ── V2 Teamsheet: Picked list ────────────────────────────────── */
.ts-picked-list {
  margin-top: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.ts-picked-title {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.ts-picked-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.ts-picked-row:last-child { border-bottom: none; }
.ts-picked-logo { width: 20px; height: 20px; object-fit: contain; }
.ts-picked-name { flex: 1; font-weight: 500; font-size: 13px; }
.ts-picked-team { font-size: 12px; color: var(--ink-muted); }
.ts-picked-remove {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  color: var(--ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ts-picked-remove:hover { background: rgba(192, 57, 43, 0.08); color: var(--red-card); }

/* ── V2 Teamsheet: Player drawer ──────────────────────────────── */
.ts-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ts-drawer {
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  background: var(--white);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}
.ts-drawer-open { transform: translateY(0); }

.ts-drawer-handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
  cursor: pointer;
}
.ts-drawer-handle-bar {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
}
.ts-drawer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.ts-drawer-logo { width: 36px; height: 36px; object-fit: contain; }
.ts-drawer-team-info { display: flex; flex-direction: column; }
.ts-drawer-team-name { font-weight: 700; font-size: 15px; }
.ts-drawer-pos-label { font-size: 12px; color: var(--ink-muted); }

.ts-drawer-pos-bar {
  display: flex;
  gap: 4px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.ts-drawer-pos-btn {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--paper);
  color: var(--ink-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ts-drawer-pos-btn:hover:not(:disabled) { border-color: var(--meg-accent); }
.ts-drawer-pos-active {
  background: var(--meg-green) !important;
  color: white !important;
  border-color: var(--meg-green) !important;
}
.ts-drawer-pos-full:not(.ts-drawer-pos-active) {
  background: rgba(45, 90, 61, 0.06);
  color: var(--meg-green);
  border-color: rgba(45, 90, 61, 0.2);
}
.ts-drawer-pos-btn:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }

.ts-drawer-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.ts-drawer-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--ink-faint);
  font-size: 13px;
}
.ts-drawer-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.12s;
}
.ts-drawer-player:hover { background: rgba(45, 90, 61, 0.05); }
.ts-drawer-player:active { background: rgba(45, 90, 61, 0.1); }

.ts-drawer-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--border);
}
.ts-drawer-photo-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--border);
}
.ts-drawer-player-info { display: flex; flex-direction: column; }
.ts-drawer-player-name { font-weight: 600; font-size: 14px; }
.ts-drawer-player-meta { font-size: 12px; color: var(--ink-muted); font-family: var(--font-mono); }

/* Drawer manual entry */
.ts-drawer-manual {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.ts-drawer-manual-label {
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.ts-drawer-manual-row {
  display: flex;
  gap: 6px;
}
.ts-drawer-manual-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.ts-drawer-manual-input:focus { outline: none; border-color: var(--meg-green); }
.ts-drawer-manual-btn {
  padding: 8px 14px;
  background: var(--meg-green);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ts-drawer-manual-btn:hover { background: var(--brand-hover); }

/* ── V2 Teamsheet: Squad summary (collapsible) ────────────────── */
.ts-summary-details {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.ts-summary-toggle {
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  list-style: none;
}
.ts-summary-toggle::-webkit-details-marker { display: none; }
.ts-summary-toggle::before {
  content: '▸ ';
  font-size: 11px;
  color: var(--ink-muted);
}
.ts-summary-details[open] .ts-summary-toggle::before { content: '▾ '; }

.ts-summary-formation {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ts-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ts-summary-row-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
  width: 28px;
  text-align: center;
}
.ts-summary-slots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ts-summary-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 48px;
  padding: 4px;
}
.ts-summary-filled { }
.ts-summary-empty { opacity: var(--disabled-opacity); }
.ts-summary-slot-logo { width: 22px; height: 22px; object-fit: contain; }
.ts-summary-slot-name {
  font-size: 9px;
  color: var(--ink-muted);
  text-align: center;
  max-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ts-summary-slot-empty {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  background: var(--border);
  border-radius: 50%;
}

/* ── V2 Teamsheet: Fixture List (collapsible strategy panel) ──── */
.ts-fixture-list {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.ts-fixture-toggle {
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  list-style: none;
}
.ts-fixture-toggle::-webkit-details-marker { display: none; }
.ts-fixture-toggle::before {
  content: '▸ ';
  font-size: 11px;
  color: var(--ink-muted);
}
.ts-fixture-list[open] .ts-fixture-toggle::before { content: '▾ '; }
.ts-fixture-body {
  padding: 0 12px 12px;
}
.ts-fixture-day-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
  margin-bottom: 4px;
}
.ts-fixture-day:first-child .ts-fixture-day-label {
  margin-top: 0;
}
.ts-fixture-row {
  display: flex;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-light, #f0f0f0);
  font-size: 13px;
}
.ts-fixture-row:last-child { border-bottom: none; }
.ts-fixture-team {
  flex: 1;
  color: var(--ink);
  font-weight: 500;
}
.ts-fixture-team:first-of-type { text-align: right; }
.ts-fixture-team:last-of-type { text-align: left; }
.ts-fixture-picked {
  color: var(--accent);
  font-weight: 700;
}
.ts-fixture-vs {
  width: 24px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
}
.ts-fixture-ko {
  width: 44px;
  text-align: right;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-muted);
}

/* ── V2 Teamsheet: Formation Picker Modal ────────────────────── */
.ts-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ts-formation-modal {
  background: var(--white);
  border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.25s ease-out;
}
.ts-formation-modal-open {
  transform: translateY(0);
}
.ts-formation-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.ts-formation-modal-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.ts-formation-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.ts-formation-modal-list {
  overflow-y: auto;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}
.ts-formation-modal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.1s;
}
.ts-formation-modal-row:active {
  background: var(--hover-bg, #f5f5f5);
}
.ts-formation-modal-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--border);
  flex-shrink: 0;
}
.ts-formation-modal-photo-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.ts-formation-modal-info {
  flex: 1;
  min-width: 0;
}
.ts-formation-modal-name {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-formation-modal-meta {
  display: block;
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 1px;
}
.ts-formation-modal-rating {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  flex-shrink: 0;
  min-width: 28px;
  text-align: right;
}

/* ── V2 Teamsheet: Stat subtitle (G+A breakdown under GC/90) ─── */
.ts-stat-subtitle {
  display: block;
  font-size: 9px;
  color: var(--ink-muted);
  font-weight: 400;
  margin-top: 1px;
}

/* ── V2 Teamsheet: Next/Continue button ───────────────────────── */
.ts-btn-next {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  margin-top: 4px;
}

/* ── V2 Teamsheet: Lineup extras ──────────────────────────────── */
.ts-lineup-pos-counts {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}
.ts-lineup-logo, .ts-review-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── V3 Teamsheet: Ranked Player List ────────────────────────── */
.ts-ranked-section { margin-top: 4px; }
.ts-ranked-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
}
.ts-ranked-title { font-weight: 600; font-size: 15px; color: var(--ink); }
.ts-ranked-slots { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.ts-ranked-done {
  text-align: center;
  padding: 20px 12px;
  color: var(--meg-green);
  font-weight: 500;
  font-size: 13px;
  background: rgba(45, 90, 61, 0.04);
  border-radius: var(--radius-sm);
}
.ts-ranked-sort-label {
  font-size: 11px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  padding: 0 4px 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ts-ranked-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 420px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ts-ranked-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ts-ranked-player:hover { background: rgba(45, 90, 61, 0.04); border-color: var(--meg-accent); }
.ts-ranked-player:active { background: rgba(45, 90, 61, 0.08); transform: scale(0.995); }
.ts-ranked-player-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.ts-ranked-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--border);
  flex-shrink: 0;
}
.ts-ranked-photo-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.ts-ranked-player-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ts-ranked-player-name {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-ranked-player-meta {
  font-size: 11px;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.ts-ranked-team-crest {
  width: 14px;
  height: 14px;
  object-fit: contain;
}
.ts-ranked-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  flex-shrink: 0;
}
.ts-ranked-stat-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  color: var(--meg-green);
}
.ts-ranked-stat-label {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--ink-faint);
  letter-spacing: 0.5px;
}
.ts-ranked-empty {
  text-align: center;
  color: var(--ink-faint);
  padding: 24px;
  font-size: 13px;
}
.ts-injury-badge {
  font-size: 12px;
  margin-left: 2px;
  vertical-align: middle;
}
.ts-browse-club-btn {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.ts-browse-club-btn:hover { border-color: var(--meg-accent); color: var(--meg-accent); }
.ts-browse-back-btn {
  display: inline-block;
  padding: 6px 0;
  margin-bottom: 8px;
  background: none;
  border: none;
  color: var(--meg-accent);
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}
.ts-browse-back-btn:hover { text-decoration: underline; }

/* ── Phase 2: View toggle pill (Ranked / By Club) ────────────── */
.ts-view-toggle {
  display: flex;
  background: var(--border);
  border-radius: 6px;
  padding: 2px;
  margin: 4px 0;
}
.ts-view-btn {
  flex: 1;
  padding: 5px 12px;
  border: none;
  border-radius: 5px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ts-view-btn:hover { color: var(--ink); }
.ts-view-active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ── Phase 2: Filter bar + pills ─────────────────────────────── */
.ts-filter-bar {
  display: flex;
  gap: 6px;
  padding: 2px 0 4px;
}
.ts-filter-pill {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.ts-filter-pill:hover { border-color: var(--meg-accent); color: var(--meg-accent); }
.ts-filter-active {
  background: var(--meg-green);
  border-color: var(--meg-green);
  color: white;
}

/* ── Phase 2: Fixture line on player cards ───────────────────── */
.ts-ranked-fixture {
  font-size: 10px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}

/* ── Phase 2: Secondary stat column ──────────────────────────── */
.ts-ranked-stat-secondary {
  min-width: 36px;
  opacity: 0.6;
}
.ts-ranked-stat-secondary .ts-ranked-stat-val {
  font-size: 13px;
  color: var(--ink-muted);
}

/* ── Phase 2: Injury chip (replaces emoji) ───────────────────── */
.ts-injury-chip {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-injury-chip.ts-injury-injured {
  background: rgba(192, 57, 43, 0.12);
  color: var(--colour-danger);
}
.ts-injury-chip.ts-injury-missing-fixture {
  background: rgba(245, 166, 35, 0.15);
  color: var(--amber);
}
.ts-injury-chip.ts-injury-doubtful {
  background: rgba(241, 196, 15, 0.15);
  color: #b8860b;
}
/* Fallback for unknown injury types */
.ts-injury-chip:not(.ts-injury-injured):not(.ts-injury-missing-fixture):not(.ts-injury-doubtful) {
  background: rgba(192, 57, 43, 0.12);
  color: var(--colour-danger);
}

/* ── Phase 2: Fixture line in review rows ────────────────────── */
.ts-review-fixture {
  font-size: 10px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

/* ── Phase 5: Pick modal (bottom sheet for position picking) ─── */
.ts-pick-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1500;
  animation: tsFadeIn 0.15s ease;
}
.ts-pick-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 75vh;
  background: var(--paper);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  z-index: 1501;
  animation: tsSlideUp 0.25s ease-out;
  overflow: hidden;
}
@keyframes tsSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.ts-pick-modal-handle {
  display: flex;
  justify-content: center;
  padding: 8px;
  cursor: grab;
}
.ts-pick-modal-handle-bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
}
.ts-pick-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 8px;
  border-bottom: 1px solid var(--border);
}
.ts-pick-modal-title {
  font-weight: 600;
  font-size: 14px;
}
.ts-pick-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.ts-pick-modal-close:hover { color: var(--ink); }
.ts-pick-modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px 16px;
}

/* ── Phase 5: Clubs remaining modal ──────────────────────────── */
.ts-clubs-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--white);
  border-radius: var(--radius);
  padding: 16px;
  min-width: 260px;
  max-width: 340px;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  z-index: 2001;
  animation: tsFadeIn 0.15s ease;
}
.ts-clubs-modal-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
  text-align: center;
}
.ts-clubs-modal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ts-clubs-modal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}
.ts-clubs-modal-crest {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* ── Phase 6: Enlarged formation slots + captain ring ────────── */
.ts-pitch-slot-empty .ts-pitch-slot-label {
  width: 44px;
  height: 44px;
}
.ts-pitch-slot-captain .ts-pitch-slot-crest {
  box-shadow: 0 0 0 3px var(--amber), 0 2px 8px rgba(0,0,0,0.3);
}
@keyframes tsCaptainRing {
  0%, 100% { box-shadow: 0 0 0 3px var(--amber), 0 0 0 6px rgba(245,166,35,0); }
  50%      { box-shadow: 0 0 0 3px var(--amber), 0 0 0 8px rgba(245,166,35,0.25); }
}
.ts-pitch-slot-captain .ts-pitch-slot-crest {
  animation: tsCaptainRing 2s ease-in-out infinite;
}
@keyframes tsSlotFill {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.ts-pitch-slot-filled .ts-pitch-slot-crest {
  animation: tsSlotFill 0.25s ease-out;
}

/* ── Phase 6: Bench as horizontal scroll chips ───────────────── */
.ts-formation-bench-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 4px;
  scrollbar-width: thin;
}
.ts-bench-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 12px;
}
.ts-bench-chip-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.ts-bench-chip-name {
  font-weight: 500;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-bench-chip-pos {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
}

/* ── V3 Teamsheet: Drawer stat column ───────────────────────── */
.ts-drawer-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 36px;
  flex-shrink: 0;
}
.ts-drawer-stat-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--meg-green);
}
.ts-drawer-stat-label {
  font-size: 8px;
  text-transform: uppercase;
  color: var(--ink-faint);
  letter-spacing: 0.4px;
}

/* ── V3 Teamsheet: Slot Modal ────────────────────────────────── */
.ts-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: tsFadeIn 0.15s ease;
}
.ts-slot-modal {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  min-width: 260px;
  max-width: 320px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ts-slot-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.ts-slot-modal-logo { width: 32px; height: 32px; object-fit: contain; }
.ts-slot-modal-name { font-weight: 700; font-size: 15px; }
.ts-slot-modal-team { font-size: 12px; color: var(--ink-muted); }
.ts-slot-modal-btn {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.ts-slot-modal-btn:hover { background: var(--wash); }
.ts-slot-replace { color: var(--meg-accent); font-weight: 600; }
.ts-slot-captain { color: var(--amber); font-weight: 600; }
.ts-slot-remove { color: var(--red-card); }
.ts-slot-cancel { color: var(--ink-muted); }
@keyframes tsFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── V3 Teamsheet: Formation Builder (Pitch) ─────────────────── */
.ts-formation-builder {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ts-formation-header {
  text-align: center;
  padding: 8px;
}
.ts-formation-title {
  font-family: var(--font-serif);
  font-size: 18px;
  margin-bottom: 2px;
}
.ts-formation-sub {
  font-size: 12px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
.ts-formation-count {
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
}
.ts-formation-hint {
  font-size: 12px;
  color: var(--amber);
  font-weight: 500;
  text-align: center;
  padding: 4px 8px;
}

/* Pitch container */
.ts-pitch {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 3/4;
  background: linear-gradient(180deg, #2d7a3f 0%, #246b34 40%, #1f5e2d 100%);
  border-radius: var(--radius);
  border: 2px solid rgba(255,255,255,0.25);
  overflow: hidden;
}

/* Pitch markings */
.ts-pitch-half-line {
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 1px;
  background: rgba(255,255,255,0.2);
}
.ts-pitch-centre-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ts-pitch-penalty-area {
  position: absolute;
  left: 20%;
  right: 20%;
  height: 14%;
  border: 1px solid rgba(255,255,255,0.15);
}
.ts-pitch-penalty-top { top: 0; border-top: none; }
.ts-pitch-penalty-bottom { bottom: 0; border-bottom: none; }

/* Formation slots on pitch */
.ts-pitch-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: transform 0.15s;
  z-index: 1;
}
.ts-pitch-slot:active { transform: translate(-50%, -50%) scale(0.92); }

.ts-pitch-slot-empty {
  opacity: 0.7;
}
.ts-pitch-slot-empty .ts-pitch-slot-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px dashed rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.7);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}
.ts-pitch-slot-active .ts-pitch-slot-label {
  background: rgba(255,255,255,0.35);
  border-color: #fff;
  color: #fff;
  animation: tsPulse 1s ease-in-out infinite;
}
@keyframes tsPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); }
  50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}

.ts-pitch-slot-filled {
  opacity: 1;
}
.ts-pitch-slot-filled .ts-pitch-slot-crest {
  width: 32px;
  height: 32px;
  object-fit: contain;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  padding: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.ts-pitch-slot-filled .ts-pitch-slot-name {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  white-space: nowrap;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-pitch-slot-captain {
  position: relative;
}
.ts-captain-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: var(--amber);
  color: #000;
  font-size: 10px;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Formation player picker (below pitch) */
.ts-formation-picker {
  background: var(--white);
  border: 1px solid var(--meg-accent);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.ts-formation-picker-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--meg-accent);
}
.ts-formation-picker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ts-formation-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
}
.ts-formation-picker-row:hover { background: rgba(45, 90, 61, 0.06); }
.ts-formation-picker-row:active { background: rgba(45, 90, 61, 0.1); }
.ts-formation-picker-logo { width: 20px; height: 20px; object-fit: contain; }
.ts-formation-picker-name { font-weight: 500; font-size: 13px; flex: 1; }
.ts-formation-picker-team { font-size: 12px; color: var(--ink-muted); }
.ts-formation-picker-empty {
  text-align: center;
  color: var(--ink-faint);
  padding: 16px;
  font-size: 13px;
}
.ts-formation-picker-cancel {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: 12px;
  cursor: pointer;
}
.ts-formation-picker-cancel:hover { background: var(--wash); }

/* Formation bench */
.ts-formation-bench {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.ts-formation-bench-title {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.ts-formation-bench-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ts-formation-bench-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
.ts-formation-bench-row:last-child { border-bottom: none; }
.ts-formation-bench-pos {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-faint);
  width: 24px;
}
.ts-formation-bench-logo { width: 18px; height: 18px; object-fit: contain; }
.ts-formation-bench-name { flex: 1; font-weight: 500; }
.ts-formation-bench-team { font-size: 11px; color: var(--ink-muted); }

/* Review multiplier column */
.ts-review-mult {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  min-width: 32px;
  text-align: right;
}

/* ── V3 Teamsheet: Mobile responsiveness ─────────────────────── */
@media (max-width: 480px) {
  .ts-pitch {
    max-width: 100%;
    aspect-ratio: 3/4.2;
  }
  .ts-pitch-slot { width: 44px; }
  .ts-pitch-slot-empty .ts-pitch-slot-label { width: 32px; height: 32px; font-size: 9px; }
  .ts-pitch-slot-filled .ts-pitch-slot-crest { width: 28px; height: 28px; padding: 2px; }
  .ts-pitch-slot-filled .ts-pitch-slot-name { font-size: 8px; max-width: 48px; }
  .ts-ranked-photo { width: 32px; height: 32px; }
  .ts-ranked-player { padding: 8px 10px; }
  .ts-ranked-player-name { font-size: 12px; }
  .ts-ranked-stat-val { font-size: 14px; }
}

/* ── Teamsheet Dugout tile ────────────────────────────────────── */
.dugout-tile-teamsheet .game-tile-inner {
  border-left: 3px solid var(--meg-green);
}
.ts-tile-fixtures {
  font-size: 11px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}
.ts-tile-entrants {
  font-size: 11px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
}
.ts-tile-lock {
  font-size: 10px;
  color: var(--amber);
  font-family: var(--font-mono);
}
.ts-tile-open {
  font-size: 10px;
  color: var(--meg-accent);
  font-family: var(--font-mono);
}

/* ══════════════════════════════════════════════════════════════════════════════
   DESIGN POLISH — v2
   Cohesive tile design, smoother transitions, better empty/loading states
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Unified tile hover improvement ────────────────────────────────────────── */
.dugout-tile { transition: transform 0.12s ease; }
.dugout-tile:active { transform: scale(0.98); }
.comp-group-tile { transition: box-shadow 0.15s, border-left-color 0.15s, transform 0.12s; }
.comp-group-tile:active { transform: scale(0.98); }

/* ── Competition group tile polish ─────────────────────────────────────────── */
.cgt-fixture-preview {
  transition: background 0.1s;
}
.cgt-fixture-preview:hover {
  background: rgba(0,0,0,0.02);
}
.cgt-footer {
  opacity: 0.7;
  transition: opacity 0.15s;
}
.comp-group-tile:hover .cgt-footer {
  opacity: 1;
}

/* ── Fixture group panel polish ────────────────────────────────────────────── */
.fgp-fixture-row {
  transition: background 0.1s;
}
.fgp-fixture-row:hover {
  background: rgba(0,0,0,0.02);
}
.fgp-join-btn {
  transition: background 0.12s, transform 0.1s;
}
.fgp-join-btn:active {
  transform: scale(0.96);
}

/* ── Dugout tile entering animation ────────────────────────────────────────── */
.dugout-tile {
  animation: tileSlideIn 0.25s ease-out;
}
@keyframes tileSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Completing tile exit animation ────────────────────────────────────────── */
.dugout-tile--completing {
  animation: tileSlideOut 0.8s ease forwards;
}
@keyframes tileSlideOut {
  0%   { opacity: 1; transform: translateY(0); max-height: 100px; }
  60%  { opacity: 0; transform: translateY(-10px); max-height: 100px; }
  100% { opacity: 0; transform: translateY(-10px); max-height: 0; padding: 0; margin: 0; overflow: hidden; }
}

/* ── Pitch score strip polish ──────────────────────────────────────────────── */
.strip-pill {
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.strip-pill:hover {
  box-shadow: var(--shadow-sm);
}
.strip-pill:active {
  transform: scale(0.96);
}
.strip-pill.active {
  border-color: var(--meg-green);
}

/* ── Pitch expand panel polish ─────────────────────────────────────────────── */
.strip-expand.open {
  opacity: 1;
}

/* ── CTA button improvements ──────────────────────────────────────────────── */
.game-tile-cta {
  transition: background 0.12s, color 0.12s, transform 0.1s;
  cursor: pointer;
}
.game-tile-cta:active {
  transform: scale(0.94);
}
.game-tile-cta.cta-play {
  box-shadow: 0 1px 3px rgba(74, 158, 106, 0.3);
}
.game-tile-cta.cta-play:hover {
  box-shadow: 0 2px 6px rgba(74, 158, 106, 0.4);
}

/* ── Dugout badge live pulse ──────────────────────────────────────────────── */
@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

/* ── Loading skeleton for tiles ────────────────────────────────────────────── */
.dugout-tile-skeleton .game-tile-inner {
  background: linear-gradient(90deg, var(--paper) 25%, rgba(0,0,0,0.04) 50%, var(--paper) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-color: transparent;
  min-height: 60px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Empty state improvements ──────────────────────────────────────────────── */

/* ── Pitch tab strip improvements ──────────────────────────────────────────── */
.ptab {
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.1s;
}
.ptab:active {
  transform: scale(0.94);
}

/* ── Pitch swipe hint dots ─────────────────────────────────────────────────── */
.psh-dot {
  transition: background 0.2s, transform 0.2s;
}
.psh-dot.active {
  transform: scale(1.3);
}

/* ── Dugout timeline section headers ──────────────────────────────────────── */

/* ── Teamsheet tile polish ─────────────────────────────────────────────────── */
.dugout-tile-teamsheet .game-tile-inner {
  background: linear-gradient(135deg, rgba(45,90,61,0.03) 0%, transparent 50%);
}
.dugout-tile-teamsheet:hover .game-tile-inner {
  background: linear-gradient(135deg, rgba(45,90,61,0.06) 0%, transparent 50%);
}

/* ── Fixture group panel backdrop blur ─────────────────────────────────────── */
.fgp-overlay {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Score strip scrollbar fade hint ──────────────────────────────────────── */
.pitch-score-strip {
  mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
}
.pitch-score-strip::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 48px;
  background: linear-gradient(to right, transparent, var(--paper));
  pointer-events: none;
  z-index: var(--z-base);
}

/* ── Toast notification ────────────────────────────────────────────────────── */
.stand-toast {
  position: fixed;
  bottom: calc(var(--input-h) + 20px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 20px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.stand-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Game entry error card ───────────────────────────────────────────────── */
.game-error-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 16px;
  text-align: center;
}
.game-error-msg {
  font-size: 14px;
  color: var(--ink-muted, #888);
}
.game-error-retry {
  background: var(--accent, #1a73e8);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ── Dugout empty state subtle ────────────────────────────────────────────── */

/* ── Dugout results divider ──────────────────────────────────────────────────── */
.dugout-results-divider::before,

/* ═══════════════════════════════════════════════════════════════════════════
   DUGOUT CAROUSEL LAYOUT — event feed + fixed bottom carousel
   ═══════════════════════════════════════════════════════════════════════════ */

/* Make the messageFeed a flex column when in dugout mode */
#messageFeed.dugout-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 32px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DUGOUT v2 — Design-proposal styles (2026-04-11)
   Authoritative CSS for the rebuilt Dugout game launcher.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Your Games strip ──────────────────────────── */
.your-games {
  padding: 12px 16px;
  background: var(--brand-surface, #EBF2ED);
  border-bottom: 1px solid var(--border, #E2DED6);
}
.your-games-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--brand, #2D5A3D); margin-bottom: 8px;
}
.yg-row { display: flex; gap: 8px; overflow-x: auto; }
.yg-row::-webkit-scrollbar { display: none; }
.yg-chip {
  flex-shrink: 0; display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; background: var(--surface-raised, #F7F5F0);
  border-radius: var(--radius-sm, 8px); border: 1px solid var(--border, #E2DED6); cursor: pointer;
}
.yg-chip:hover { background: var(--surface-float, #FFFFFF); }
.yg-icon { font-size: 13px; }
.yg-text { font-size: 12px; font-weight: 500; white-space: nowrap; }
.yg-status {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.yg-live { background: rgba(29,122,64,0.12); color: var(--colour-live, #1D7A40); }
.yg-open { background: var(--brand-surface, #EBF2ED); color: var(--brand, #2D5A3D); }

/* ── Section headers ───────────────────────────── */
.dug-sh { display: flex; align-items: center; justify-content: space-between; padding: 20px 16px 10px; }
.dug-sh-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted, #6B6760); }
.dug-sh-meta { font-size: 11px; color: var(--text-faint, #9B9890); }

/* ═══════════════════════════════════════════════════
   COMPETITION STRIP — the core component
   One strip per competition+round with game buttons
   ═══════════════════════════════════════════════════ */
.comp-strip {
  margin: 0 12px 8px;
  background: var(--surface-raised, #F7F5F0);
  border-radius: var(--radius, 12px);
  border: 1px solid var(--border, #E2DED6);
  overflow: hidden;
}
.comp-strip.is-live { border-left: 3px solid var(--colour-live-dot, #2ECC71); }
.comp-strip.is-open { border-left: 3px solid var(--brand, #2D5A3D); }

.cs-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 0;
}
.cs-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: #fff; padding: 4px 10px; border-radius: 4px; white-space: nowrap;
}
.cs-badge.pl  { background: var(--comp-pl, #38003c); }
.cs-badge.ucl { background: var(--comp-ucl, #001489); }
.cs-badge.ch  { background: var(--comp-ch, #1c2c5b); }
.cs-badge.spl { background: var(--comp-spl, #c8102e); }
.cs-badge.fac { background: var(--comp-fac, #b22234); }
.cs-badge.lc  { background: var(--comp-lc, #00b140); }
.cs-badge.uel { background: var(--comp-uel, #f26522); }
.cs-badge.ecl { background: var(--comp-ecl, #003d29); }
.cs-badge.l1  { background: var(--comp-l1, #cc0000); }
.cs-badge.l2  { background: #004d98; }

.cs-round { font-size: 14px; font-weight: 600; color: var(--text-primary, #1A1814); }
.cs-meta { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cs-status {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 3px 8px; border-radius: 10px; display: inline-flex; align-items: center; gap: 4px;
}
.cs-status .dot { width: 5px; height: 5px; border-radius: 50%; }
.cs-status.live { color: var(--colour-live, #1D7A40); background: rgba(29,122,64,0.08); }
.cs-status.live .dot { background: var(--colour-live-dot, #2ECC71); }
.cs-status.open { color: var(--brand, #2D5A3D); background: var(--brand-surface, #EBF2ED); }
.cs-status.open .dot { background: var(--brand, #2D5A3D); }
.cs-status.upcoming { color: var(--colour-amber, #A05C00); background: var(--colour-amber-bg, #FFF3E0); }
.cs-status.upcoming .dot { background: var(--colour-amber, #A05C00); }
.cs-status.done { color: var(--text-faint, #9B9890); background: var(--surface-sink, #E6E3DB); }
.cs-status.done .dot { background: var(--text-faint, #9B9890); }

.cs-detail {
  padding: 4px 16px 0;
  font-size: 12px; color: var(--text-muted, #6B6760); line-height: 1.4;
}

.cs-buttons { display: flex; gap: 6px; padding: 12px 16px 14px; }
.cs-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 0; border-radius: var(--radius-sm, 8px);
  font-size: 12px; font-weight: 600; cursor: pointer; border: none;
  transition: background 0.15s, transform 0.1s;
}
.cs-btn:active { transform: scale(0.97); }
.cs-btn-icon { font-size: 13px; }
.cs-btn.primary { background: var(--brand, #2D5A3D); color: var(--text-on-brand, #F7F5F0); }
.cs-btn.primary:hover { background: var(--brand-hover, #1E5234); }
.cs-btn.secondary { background: var(--surface-sink, #E6E3DB); color: var(--text-secondary, #3D3A33); }
.cs-btn.secondary:hover { background: var(--border, #E2DED6); }
.cs-btn.live-btn { background: var(--colour-danger, #C0392B); color: #fff; }
.cs-btn.live-btn:hover { background: #a83225; }
.cs-btn.disabled { background: var(--surface-sink, #E6E3DB); color: var(--text-faint, #9B9890); cursor: default; pointer-events: none; }

/* ── Rolling Quiz card ─────────────────────────── */
.dug-quiz-card {
  margin: 0 12px; padding: 16px;
  background: var(--surface-raised, #F7F5F0); border-radius: var(--radius, 12px);
  border: 1px solid var(--border, #E2DED6);
  display: flex; align-items: center; gap: 14px; cursor: pointer;
}
.dug-quiz-card:hover { background: var(--surface-float, #FFFFFF); }
.dug-quiz-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm, 8px);
  background: var(--brand-surface, #EBF2ED); display: flex; align-items: center;
  justify-content: center; font-size: 22px; flex-shrink: 0;
}
.dug-quiz-info { flex: 1; }
.dug-quiz-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.dug-quiz-desc { font-size: 12px; color: var(--text-muted, #6B6760); margin-top: 2px; }
.dug-quiz-cta {
  font-size: 12px; font-weight: 600; color: var(--brand, #2D5A3D);
  padding: 7px 16px; border: 1px solid var(--brand, #2D5A3D); border-radius: 20px;
  background: transparent; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.dug-quiz-cta:hover { background: var(--brand-surface, #EBF2ED); }

/* ── Play Anytime ──────────────────────────────── */
.dug-anytime { display: flex; flex-direction: column; gap: 6px; padding: 0 12px; }
.dug-at-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-raised, #F7F5F0); border-radius: var(--radius, 12px);
  border: 1px solid var(--border, #E2DED6); padding: 14px 16px; cursor: pointer;
}
.dug-at-card:hover { background: var(--surface-float, #FFFFFF); }
.dug-at-icon {
  width: 36px; height: 36px; display: flex; align-items: center;
  justify-content: center; font-size: 22px; flex-shrink: 0;
  background: var(--surface-sink, #E6E3DB); border-radius: var(--radius-sm, 8px);
}
.dug-at-info { flex: 1; }
.dug-at-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.dug-at-desc { font-size: 12px; color: var(--text-muted, #6B6760); margin-top: 2px; }
.dug-at-play {
  font-size: 12px; font-weight: 600; color: var(--brand, #2D5A3D);
  padding: 6px 14px; border: 1px solid var(--brand, #2D5A3D); border-radius: 20px;
  background: transparent; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}

/* ── Dividers ──────────────────────────────────── */
.dug-divider { margin: 0 16px; border: none; border-top: 1px solid var(--border, #E2DED6); }

/* ── Empty state ───────────────────────────────── */
.dug-empty { padding: 28px 16px; text-align: center; }
.dug-empty-icon { font-size: 28px; margin-bottom: 8px; opacity: 0.35; }
.dug-empty-text { font-size: 13px; color: var(--text-faint, #9B9890); }
.dug-empty-sub { font-size: 12px; color: var(--text-faint, #9B9890); margin-top: 4px; opacity: 0.7; }

/* ═══════════════════════════════════════════════════
   END DUGOUT v2
   ═══════════════════════════════════════════════════ */

/* ── LEGACY (dead CSS — old dugout) ─────────────── */
.dugout-event-feed {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 8px;
  -webkit-overflow-scrolling: touch;
}
.dugout-event-feed .dugout-feed-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--white);
  padding: 16px 16px 10px;
}
.dugout-event-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
  gap: 8px;
}
.dugout-event-empty-icon {
  font-size: 32px;
  opacity: 0.4;
}
.dugout-event-empty-text {
  font-size: 13px;
  color: var(--ink-faint);
  max-width: 220px;
}

/* ── Game Live Tile ──────────────────────────────────────────────────── */
.game-live-tile {
  margin: 10px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  border-left: 3px solid var(--meg-green);
}
.game-live-tile:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }
.game-live-tile--done { border-left-color: var(--border); cursor: default; opacity: 0.75; }
.game-live-tile--done:hover { box-shadow: none; transform: none; }
.glt-chip-row { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.glt-chip-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--meg-green); }
.glt-chip-name { font-size: 11px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.glt-body { display: flex; flex-direction: column; gap: 8px; }
.glt-game-row { display: flex; align-items: center; gap: 8px; }
.glt-icon { font-size: 20px; line-height: 1; }
.glt-label { font-size: 16px; font-weight: 700; color: var(--ink); flex: 1; }
.glt-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; }
.glt-badge--live { background: rgba(52,168,83,0.12); color: var(--meg-green); }
.glt-badge--done { background: var(--paper); color: var(--ink-muted); }
.glt-chip-line { font-size: 13px; color: var(--ink); line-height: 1.4; margin: 0; }
.glt-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.glt-count { font-size: 12px; color: var(--ink-muted); }
.glt-cta { background: var(--meg-green); color: #fff; border: none; border-radius: 20px; padding: 6px 16px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; transition: opacity 0.15s; }
.glt-cta:hover { opacity: 0.85; }

/* ── Bottom carousel ─────────────────────────────────────────────────── */
.dugout-carousel {
  flex-shrink: 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 8px 0 12px;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}
.carousel-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 6px;
}
.carousel-label-text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-faint);
}
.carousel-count {
  background: var(--accent, #4A7C59);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 6px;
  font-family: var(--font-mono);
}
.carousel-empty {
  padding: 20px 16px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
}

/* ── Carousel track (horizontal scroll) ────────────────────────────── */
.carousel-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 14px 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

/* ── Individual carousel card ──────────────────────────────────────── */
.carousel-card {
  flex: 0 0 154px;
  min-width: 154px;
  height: 172px;
  border-radius: 12px;
  background: var(--white);
  border: 1.5px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  scroll-snap-align: start;
  box-sizing: border-box;
}
.carousel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.carousel-card:active {
  transform: scale(0.97);
}

/* Competition colour strip at top */
.carousel-comp-strip {
  height: 3px;
  background: var(--border);
}
.carousel-comp-uel { background: #f26522; }
.carousel-comp-ch  { background: #c40010; }
.carousel-comp-l1  { background: #e41b13; }

/* Card body */
.carousel-card-body {
  padding: 10px 10px 9px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Teams layout: home — center — away */
.carousel-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.carousel-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 0 0 40px;
  min-width: 0;
}
.carousel-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.carousel-logo-fallback {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
.carousel-team-name {
  font-size: 9.5px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  color: var(--ink-muted);
  max-width: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Center area: date label + time or score */
.carousel-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.carousel-ko-date {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0.1px;
  text-align: center;
  white-space: nowrap;
}
.carousel-ko-time {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.5px;
}
.carousel-score {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1px;
}
.carousel-score-live {
  color: var(--meg-green);
}
.carousel-status {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-faint);
}
.carousel-live-dot {
  color: var(--colour-danger);
  animation: dugoutPulse 1.5s ease-in-out infinite;
}
.carousel-ft {
  color: var(--ink-faint);
}

/* CTA button */
.carousel-cta {
  display: block;
  width: 100%;
  padding: 5px 0;
  border: none;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.carousel-cta:active { transform: scale(0.97); }
.carousel-cta-join {
  background: var(--meg-green);
  color: #fff;
}
.carousel-cta-join:hover { filter: brightness(1.12); }
.carousel-cta-picked {
  background: transparent;
  border: 1.5px solid var(--meg-green);
  color: var(--meg-green);
}
.carousel-cta-view {
  background: var(--paper);
  color: var(--ink-faint);
}

/* ── State variants ─────────────────────────────────────────────────── */
/* Pre-draft: amber border */
.carousel-pre-draft { border-color: #c99a1a; }
.carousel-opens {
  font-size: 10px;
  font-weight: 500;
  font-family: var(--font-mono);
  color: #9a7010;
  letter-spacing: 0.2px;
  text-align: center;
  padding: 3px 0 1px;
}
/* Open: green border */
.carousel-open { border-color: var(--meg-green); }
/* Live: red */
.carousel-live {
  border-color: var(--colour-danger);
  box-shadow: 0 0 0 1px rgba(192,57,43,0.12);
}
.carousel-cta-live {
  background: var(--colour-danger);
  color: #fff;
  font-weight: 600;
}
.carousel-done {
  opacity: 0.55;
  border-color: var(--border);
}

/* ── Other game type card (trivia, teamsheet) ───────────────────────── */
.carousel-card-other {
  flex: 0 0 120px;
  min-width: 120px;
}
.carousel-other-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 8px;
}
.carousel-other-icon {
  font-size: 22px;
}
.carousel-other-label {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
  line-height: 1.2;
}

/* ── Teamsheet carousel card ──────────────────────────────────────────────── */
.carousel-card-teamsheet {
  flex: 0 0 154px;
  min-width: 154px;
  max-width: 154px;
  height: 172px;
  border: 1.5px solid var(--accent);
  background: linear-gradient(135deg, var(--bg-primary) 0%, #e8f0e4 100%);
  box-sizing: border-box;
}
.carousel-ts-strip {
  background: var(--red-card);
  color: #fff;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 3px 0;
  border-radius: 10px 10px 0 0;
}
.carousel-ts-strip.comp-pl { background: var(--comp-pl); }
.carousel-ts-strip.comp-ucl { background: var(--comp-ucl); }
.carousel-ts-strip.comp-ch { background: var(--comp-ch); }
.carousel-ts-strip.comp-uel { background: var(--comp-uel); }
.carousel-ts-strip.comp-fac { background: var(--comp-fac); }
.carousel-ts-strip.comp-lc { background: var(--comp-lc); }
.carousel-ts-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px;
}
.carousel-ts-round {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.2;
}
/* ── Merged info line: "8 fixtures · Opens 2d" ── */
.carousel-ts-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1;
  flex-wrap: wrap;
}
.carousel-ts-info-sep {
  margin: 0 4px;
  opacity: 0.5;
}
.carousel-ts-info-status {
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.2px;
}
.ts-info-pre .carousel-ts-info-status  { color: #a07010; }
.ts-info-open .carousel-ts-info-status { color: var(--meg-green); }
.ts-info-locked .carousel-ts-info-status { color: var(--ink-muted); }
.ts-info-done .carousel-ts-info-status { color: var(--ink-faint); }
.carousel-card-teamsheet.carousel-open {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(62, 99, 52, 0.25);
}
.carousel-card-teamsheet.carousel-live .carousel-ts-strip {
  background: var(--danger, var(--colour-danger));
}
.carousel-card-teamsheet.carousel-done {
  opacity: 0.7;
  border-color: var(--border);
}

/* ── Pulse animation for live indicators ─────────────────────────────── */
@keyframes dugoutPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIVERSAL TILE SYSTEM — carousel tiles for all game types/competitions
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Carousel header + toggle ──────────────────────────────────────────── */
.carousel-header {
  padding: 4px 14px 6px;
  display: flex;
  align-items: center;
}
.carousel-toggle {
  display: flex;
  background: var(--surface-sink);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.carousel-toggle-btn {
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
}
.carousel-toggle-btn.ct-active {
  background: var(--brand);
  color: #fff;
}
.carousel-toggle-btn .carousel-count {
  font-size: 9px;
}

/* ── Competition divider pills (Fixtures view) ─────────────────────────── */
.carousel-comp-divider {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.carousel-comp-divider-pill {
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  writing-mode: vertical-lr;
  text-orientation: mixed;
}
.carousel-comp-divider-pill.comp-pl  { background: var(--comp-pl); }
.carousel-comp-divider-pill.comp-ucl { background: var(--comp-ucl); }
.carousel-comp-divider-pill.comp-uel { background: var(--comp-uel); }
.carousel-comp-divider-pill.comp-ch  { background: var(--comp-ch); }
.carousel-comp-divider-pill.comp-fac { background: var(--comp-fac); }
.carousel-comp-divider-pill.comp-lc  { background: var(--comp-lc); }

/* ── Universal tile card ───────────────────────────────────────────────── */
.ut-card {
  flex: 0 0 154px;
  min-width: 154px;
  height: 172px;
  border-radius: 12px;
  background: var(--white);
  border: 1.5px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.ut-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.ut-card:active {
  transform: scale(0.97);
}

/* ── State border variants ── */
.ut-upcoming { border-color: #c99a1a; }
.ut-open     { border-color: var(--meg-green); }
.ut-live     { border-color: var(--colour-danger); box-shadow: 0 0 0 1px rgba(192,57,43,0.12); }
.ut-locked   { border-color: var(--border); }
.ut-done     { opacity: 0.55; border-color: var(--border); }

/* ── Header strip (game type colour) ───────────────────────────────────── */
.ut-header {
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ut-header.ut-pred  { background: #E67E22; }
.ut-header.ut-draft { background: #8E44AD; }
.ut-header.ut-ts    { background: #2980B9; }

.ut-game-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  gap: 4px;
}
.ut-game-emoji {
  font-size: 12px;
}

/* ── Body ──────────────────────────────────────────────────────────────── */
.ut-body {
  padding: 6px 8px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Competition row: badge + round label */
.ut-comp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.ut-comp-badge-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}
.ut-comp-badge {
  font-size: 8px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
}
.ut-comp-badge.comp-pl  { background: var(--comp-pl); }
.ut-comp-badge.comp-ucl { background: var(--comp-ucl); }
.ut-comp-badge.comp-uel { background: var(--comp-uel); }
.ut-comp-badge.comp-ch  { background: var(--comp-ch); }
.ut-comp-badge.comp-fac { background: var(--comp-fac); }
.ut-comp-badge.comp-lc  { background: var(--comp-lc); }

.ut-round {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Multi-fixture: competition logo ───────────────────────────────────── */
.ut-crest-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 2px;
  flex: 1;
}
.ut-comp-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.ut-comp-crest {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ut-comp-crest.comp-pl  { background: var(--comp-pl); }
.ut-comp-crest.comp-ucl { background: var(--comp-ucl); }
.ut-comp-crest.comp-uel { background: var(--comp-uel); }
.ut-comp-crest.comp-ch  { background: var(--comp-ch); }
.ut-comp-crest.comp-fac { background: var(--comp-fac); }
.ut-comp-crest.comp-lc  { background: var(--comp-lc); }

.ut-fixture-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-faint);
  text-align: center;
  padding-bottom: 2px;
}

/* ── Single-fixture: team crests + score/time ──────────────────────────── */
.ut-fixture-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 0 2px;
  flex: 1;
}
.ut-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 34px;
}
.ut-team-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.ut-team-fallback {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sink);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
.ut-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.ut-ko-time {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.5px;
}
.ut-score {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1px;
}
.ut-minute {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--colour-danger);
}
.ut-ft-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ut-team-names {
  display: flex;
  justify-content: space-between;
  padding: 2px 4px 0;
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-muted);
}

/* ── Footer: status + CTA ──────────────────────────────────────────────── */
.ut-footer {
  padding: 4px 8px 6px;
  margin-top: auto;
}

/* Status line */
.ut-status {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ut-status-upcoming { color: #B8860B; }
.ut-status-open     { color: #2D5A3D; }
.ut-status-locked   { color: #777; }
.ut-status-live     { color: var(--colour-danger); }
.ut-status-done     { color: #555; }

/* Status dots */
.ut-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.ut-dot-upcoming { background: #B8860B; }
.ut-dot-open     { background: #2D5A3D; }
.ut-dot-locked   { background: #777; }
.ut-dot-live     { background: var(--colour-danger); animation: dugoutPulse 1.5s ease-in-out infinite; }
.ut-dot-done     { background: #555; }

/* CTA buttons */
.ut-cta {
  display: block;
  width: 100%;
  padding: 6px 0;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  border: none;
  text-align: center;
}
.ut-cta:active { transform: scale(0.97); }

.ut-cta-save {
  background: transparent;
  color: #B8860B;
  border: 1.5px solid #B8860B;
}
.ut-cta-saved {
  background: #fdf6e3;
  color: #B8860B;
  border: 1.5px solid #B8860B;
}
.ut-cta-enter {
  background: var(--meg-green);
  color: #fff;
}
.ut-cta-enter:hover { filter: brightness(1.12); }

.ut-cta-entered {
  background: transparent;
  border: 1.5px solid var(--meg-green);
  color: var(--meg-green);
}
.ut-cta-locked {
  background: var(--surface-sink);
  color: var(--ink-faint);
  cursor: default;
}
.ut-cta-live {
  background: var(--colour-danger);
  color: #fff;
  font-weight: 700;
}
.ut-cta-live:hover { filter: brightness(1.1); }

.ut-cta-results {
  background: var(--surface-sink);
  color: var(--ink-muted);
}

/* ── Game Open toast notification ──────────────────────────────────────── */
.game-open-toast {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1.5px solid var(--meg-green);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  z-index: 9999;
  cursor: pointer;
  transition: top 0.3s ease;
  max-width: 320px;
}
.game-open-toast.got-visible {
  top: 16px;
}
.got-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.got-body {
  flex: 1;
  min-width: 0;
}
.got-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.got-sub {
  font-size: 11px;
  color: var(--meg-green);
  font-weight: 600;
}
.got-dismiss {
  font-size: 14px;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
}
.got-dismiss:hover {
  color: var(--ink);
}

/* ── Game Invite Toast ────────────────────────────────────────────────────
   Extends .game-open-toast pattern. Slides from top on game:invite event.
   Two variants: standard (green) for trivia/DM, --live (amber) for LD/TS/Pred.
   Spec: docs/game-notification-plan.html § Component A
   ──────────────────────────────────────────────────────────────────────── */
.game-invite-toast {
  position: fixed;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-float);
  border: 1.5px solid var(--brand);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  cursor: pointer;
  transition: top 0.3s ease;
  max-width: 360px;
  width: calc(100% - 32px);
}
.game-invite-toast.git-visible {
  top: 16px;
}
.game-invite-toast--live {
  border-color: var(--colour-amber-cta);
}

/* Icon — 36×36 rounded square with tinted background */
.git-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  background: var(--brand-surface);
}
.game-invite-toast--live .git-icon {
  background: var(--colour-amber-bg);
}

/* Body — label + from line + subtitle */
.git-body {
  flex: 1;
  min-width: 0;
}
.git-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.git-from {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.git-from strong {
  color: var(--text-secondary);
  font-weight: 600;
}
.git-sub {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--brand);
  margin-top: 1px;
}
.game-invite-toast--live .git-sub {
  color: var(--colour-amber);
}

/* CTA button */
.git-cta {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--text-on-brand);
  background: var(--brand);
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  flex-shrink: 0;
  letter-spacing: 0.3px;
  transition: background var(--transition-fast);
}
.git-cta:hover {
  background: var(--brand-hover);
}
.game-invite-toast--live .git-cta {
  background: var(--colour-amber-cta);
}
.game-invite-toast--live .git-cta:hover {
  background: var(--colour-amber);
}

/* Dismiss X — floated top-right */
.git-dismiss {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-faint);
  color: var(--surface-float);
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--surface-float);
  transition: background var(--transition-fast);
}
.git-dismiss:hover {
  background: var(--text-secondary);
}

/* Slide-out animation when replaced by a newer toast */
.game-invite-toast.git-exit {
  top: -80px;
}

/* Dark mode */
[data-theme="dark"] .game-invite-toast {
  background: var(--surface-raised);
  border-color: var(--brand-accent);
}
[data-theme="dark"] .game-invite-toast--live {
  border-color: var(--colour-amber-cta);
}
[data-theme="dark"] .git-dismiss {
  border-color: var(--surface-raised);
}

/* Responsive — full width on narrow screens */
@media (max-width: 600px) {
  .game-invite-toast {
    max-width: 100%;
    width: calc(100% - 24px);
    left: 12px;
    transform: none;
  }
}

/* ── Dock badge for upcoming saved games ───────────────────────────────── */
.dock-badge-upcoming {
  background: #B8860B;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  border-radius: 6px;
  padding: 1px 4px;
  font-family: var(--font-mono);
}


/* ═══════════════════════════════════════════════════════════════════════════
   DRAFT PAGE — Phase 1: 3-screen swipeable view
   ═══════════════════════════════════════════════════════════════════════════ */

.draft-page-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ── Score bar (pinned top, dark) ────────────────────────────────────────── */
.dp-score-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 16px 8px;
  background: var(--ink);
  color: var(--white);
  flex-shrink: 0;
  position: relative;
}
.dp-back-btn {
  position: absolute;
  left: 10px;
  top: 10px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0.7;
}
.dp-back-btn:hover { opacity: 1; }
.dp-score-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
}
.dp-team {
  font-size: 14px;
  font-weight: 600;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dp-score {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--white);
}
.dp-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.dp-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: dugoutPulse 1.5s ease-in-out infinite;
}
.dp-phase {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.dp-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--white);
}
.dp-tab {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.dp-tab.active {
  color: var(--ink);
  border-bottom-color: var(--meg-green);
}
.dp-tab:hover { color: var(--ink); }

/* ── Screens container (horizontal scroll-snap) ─────────────────────────── */
.dp-screens {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dp-screens::-webkit-scrollbar { display: none; }
.dp-screen {
  min-width: 100%;
  scroll-snap-align: start;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.dp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ── Screen 1: Activity Feed ────────────────────────────────────────────── */
.dp-feed { flex: 1; }
.dp-feed-stream {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 0;
}
.dp-feed-item {
  padding: 10px 16px;
  background: var(--white);
}
.dp-feed-milestone {
  text-align: center;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 4px 0;
}
.dp-milestone-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
}
.dp-feed-event {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-left: 3px solid var(--border);
}
.dp-feed-event.dp-feed-var {
  border-left-color: var(--amber);
  opacity: 0.7;
}
.dp-feed-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  min-width: 28px;
  text-align: right;
  padding-top: 1px;
}
.dp-feed-content { flex: 1; }
.dp-feed-event-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dp-feed-icon { font-size: 16px; }
.dp-feed-player {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.dp-feed-pts {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: auto;
}
.dp-feed-pts.pos { color: var(--meg-green); background: var(--surface-success); }
.dp-feed-pts.neg { color: var(--red-card); background: var(--surface-danger); }

.dp-feed-affected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.dp-aff {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 2px;
  background: var(--paper);
}
.dp-aff.pos { color: var(--meg-green); }
.dp-aff.neg { color: var(--red-card); }

.dp-feed-chip-inline {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  border-left: 2px solid var(--meg-green);
}

.dp-feed-chip-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 12px 16px;
  background: var(--paper);
}
.dp-chip-avatar {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--meg-green);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.dp-chip-body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

.dp-pre-open-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  gap: 10px;
}
.dp-pre-open-icon { font-size: 40px; }
.dp-pre-open-title { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--ink); }
.dp-pre-open-sub { font-size: 13px; color: var(--ink-muted); line-height: 1.5; }
.dp-pre-open-hint { font-size: 11px; color: var(--ink-faint, #aaa); margin-top: 8px; font-style: italic; }

.dp-feed-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  color: var(--ink-muted);
}
.dp-feed-empty-icon { font-size: 32px; margin-bottom: 8px; }
.dp-feed-empty-text { font-family: var(--font-mono); font-size: 12px; }
.dp-feed-empty-title { font-family: var(--font-mono); font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.dp-feed-empty-sub { font-size: 12px; color: var(--ink-muted); margin-bottom: 6px; }
.dp-feed-empty-hint { font-size: 11px; color: var(--ink-muted); max-width: 220px; text-align: center; line-height: 1.4; }

/* ── Filter toggle & score summary ───────────────────────────────────────── */
.dpf-filter-toggle {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dpf-filter-btn {
  flex: 1;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.dpf-filter-btn.active {
  background: var(--meg-green);
  color: var(--white);
  border-color: var(--meg-green);
}
.dpf-filter-btn:hover { border-color: var(--ink-muted); }

.dpf-score-summary {
  padding: 8px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.dpf-score-summary-text {
  display: flex;
  gap: 12px;
  align-items: center;
}
.dpf-score-item {
  display: flex;
  gap: 4px;
}
.dpf-score-label {
  color: var(--ink-muted);
}
.dpf-score-value {
  color: var(--ink);
  font-weight: 600;
}

/* Personal event highlighting */
.dpf-personal-event {
  border-left-color: var(--meg-green) !important;
  background: linear-gradient(to right, var(--surface-success), transparent);
}
.dpf-pts-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  margin-left: 4px;
}
.dpf-pts-badge.positive {
  color: var(--meg-green);
  background: var(--surface-success);
}
.dpf-pts-badge.negative {
  color: var(--red-card);
  background: var(--surface-danger);
}

/* Hidden events (filter mode active) */
.dpf-hidden {
  display: none !important;
}

/* Dark mode support */
[data-theme="dark"] .dpf-filter-btn {
  background: var(--ink-muted);
  color: var(--white);
  border-color: var(--border);
}
[data-theme="dark"] .dpf-filter-btn.active {
  background: var(--meg-green);
  color: var(--white);
  border-color: var(--meg-green);
}
[data-theme="dark"] .dpf-personal-event {
  background: linear-gradient(to right, var(--surface-success), transparent);
}

/* Responsive */
@media (max-width: 600px) {
  .dpf-score-summary {
    font-size: 10px;
    padding: 6px 12px;
  }
  .dpf-score-summary-text {
    gap: 8px;
  }
}

/* ── Screen 2: Match Starting 11s ───────────────────────────────────────── */
.dp-lineups { padding: 12px 16px; }
.dp-lineups-empty {
  text-align: center;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 40px 0;
}
.dp-lineup-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0 12px;
  font-family: var(--font-serif);
}
.dp-lu-team {
  font-size: 14px;
  font-weight: 600;
}
.dp-lu-score {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.dp-lineup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.dp-lineup-col {
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.dp-lineup-player {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--paper);
  font-size: 12px;
}
.dp-lineup-player.subbed-off {
  opacity: 0.4;
  text-decoration: line-through;
}
.dp-lp-shirt {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}
.dp-lp-name {
  font-family: var(--font-sans);
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dp-lp-pos {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.dp-lp-icons {
  font-size: 12px;
  letter-spacing: 1px;
}
.dp-lp-score {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  min-width: 28px;
  text-align: right;
}
.dp-lp-score.pos { color: var(--meg-green); }
.dp-lp-score.neg { color: var(--red-card); }

/* ── Screen 3: Leaderboard ──────────────────────────────────────────────── */
.dp-standings { padding: 12px 16px; }
.dp-standings-empty {
  text-align: center;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 40px 0;
}
.dp-lb-section { margin-bottom: 16px; }
.dp-lb-header {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
  padding: 0 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.dp-lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--paper);
  font-size: 13px;
}
.dp-lb-row.dp-lb-me {
  background: var(--brand-surface, #f0f8f3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--meg-accent);
}
.dp-lb-rank {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  min-width: 20px;
  color: var(--ink-muted);
}
.dp-lb-name {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dp-lb-mode {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.3px;
}
.dp-lb-mode-worst { background: var(--surface-danger); color: var(--red-card); }
.dp-lb-mode-best { background: var(--surface-blue); color: var(--blue-pick); }
.dp-lb-score {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  min-width: 40px;
  text-align: right;
}
.dp-lb-delta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-muted);
  min-width: 60px;
}

/* ── Match stats summary ────────────────────────────────────────────────── */
.dp-match-stats {
  margin-top: 16px;
  padding: 12px;
  background: var(--paper);
  border-radius: var(--radius-sm);
}
.dp-stats-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.dp-stats-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 3px 0;
  color: var(--ink);
}

/* ── Enter Draft CTA ────────────────────────────────────────────────────── */
.dp-enter-cta {
  padding: 12px 16px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--white);
}
.dp-enter-btn {
  width: 100%;
  padding: 12px;
  background: var(--meg-green);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.dp-enter-btn:hover { background: var(--meg-accent); }

/* ── Dugout event card (high-threshold events in main channel) ──────────── */
.dugout-event-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--white);
  border-left: 3px solid var(--amber);
  cursor: pointer;
  margin: 4px 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.dugout-event-card:hover { background: var(--paper); }
.dec-icon { font-size: 18px; }
.dec-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dec-match {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.dec-detail {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-muted);
}
.dec-affected {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-muted);
}
.dec-score {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

/* ── Mobile: draft page fills viewport ──────────────────────────────────── */
@media (max-width: 768px) {
  .dp-team { max-width: 80px; font-size: 12px; }
  .dp-score { font-size: 24px; }
  .dp-lineup-player { padding: 5px 6px; font-size: 11px; }
  .dp-lp-shirt { width: 18px; height: 18px; font-size: 8px; }
  .dp-lp-name { font-size: 11px; }
}

/* ── Generic Trivia Game Page (Career Path, Ten-able, Derby Day, etc.) ────── */
.trivia-game-page {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--paper);
  overflow: hidden;
}
.tgp-header {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 8px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tgp-title {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tgp-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: background 0.12s, color 0.12s;
}
.tgp-back-btn:hover { background: var(--paper); color: var(--ink); }
.tgp-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--ink-muted);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.tgp-close-btn:hover { background: var(--paper); color: var(--ink); }

/* Header right slot — wraps difficulty btn + close btn */
.tgp-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ── Trivia difficulty picker ────────────────────────────────────────────── */

/* Small emoji button in tgp-header */
.triv-diff-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
  color: var(--ink);
  transition: opacity 0.12s;
  display: flex;
  align-items: center;
  opacity: 0.6;
}
.triv-diff-btn:hover,
.triv-diff-btn:focus {
  opacity: 1;
  outline: 0;
}

/* Inline wrong-answer feedback (replaces Meg commentary) */
.trivia-wrong-feedback {
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
  padding: 6px 10px;
  animation: trivFeedback 0.3s ease;
}
@keyframes trivFeedback {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Shake animation for wrong answers */
.shake {
  animation: shakeAnim 0.4s ease;
}
@keyframes shakeAnim {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Career Path lobby */
.cp-lobby-player {
  display: inline-block;
  padding: 6px 14px;
  background: var(--bg-alt, #f5f0e8);
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.cp-lobby-start-btn:active {
  transform: scale(0.96);
}

/* Floating popover */
.triv-diff-popover {
  position: fixed;
  z-index: 9999;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  min-width: 220px;
  overflow: hidden;
}
.triv-diff-popover-header {
  padding: 10px 14px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border);
}
.triv-diff-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.triv-diff-option:hover { background: var(--paper); }
.triv-diff-option.active { background: var(--paper); }
.triv-diff-option.active .triv-diff-opt-label { color: var(--meg-green, #2a7a4b); font-weight: 700; }
.triv-diff-opt-emoji { font-size: 20px; line-height: 1; flex-shrink: 0; }
.triv-diff-opt-text { display: flex; flex-direction: column; gap: 1px; }
.triv-diff-opt-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.triv-diff-opt-sub { font-size: 11px; color: var(--ink-muted); }

/* Profile difficulty row */
.profile-difficulty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 6px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.profile-difficulty-label {
  font-size: 13px;
  color: var(--ink-muted);
  font-weight: 500;
}
.profile-difficulty-value {
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-difficulty-current {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.profile-difficulty-change {
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-muted);
  padding: 3px 9px;
  transition: background 0.12s, color 0.12s;
}
.profile-difficulty-change:hover {
  background: var(--paper);
  color: var(--ink);
}

/* Pinned game board (Career Path clue list, Ten-able grid) */
.tgp-board {
  flex: 1;
  padding: 12px 14px 0;
  overflow-y: auto;
}
.tgp-board:empty { display: none; }

/* Scrollable replies (result cards, feedback) */
.tgp-replies {
  flex: 0 0 auto;
  overflow-y: auto;
  max-height: 30vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tgp-replies:empty { display: none; }
.tgp-replies:not(:empty) { padding: 10px 14px; border-top: 1px solid var(--border); }

/* Input bar */
.tgp-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 12px;
  background: var(--white);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.tgp-input {
  flex: 1;
  resize: none;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  outline: none;
  line-height: 1.4;
  max-height: 100px;
  overflow-y: auto;
  transition: border-color 0.12s;
}
.tgp-input:focus { border-color: var(--meg-green); }
.tgp-submit-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--meg-green);
  color: var(--white);
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.tgp-submit-btn:hover { opacity: 0.85; }

/* Game-page styles re-applied inside tgp context */
.tgp-board .cp-clue-row { padding: 4px 8px; font-size: 12px; }
.tgp-board .cp-clue-list { gap: 2px; }
.tgp-board .trivia-title { font-size: 16px; margin-bottom: 4px; }
.tgp-board .cp-prompt { margin-top: 6px; font-size: 11px; }
.tgp-board .tn-hud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.tgp-board .tn-hud-slot { height: 20px; padding: 2px 6px; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.tgp-board .tn-hud-question { font-size: 13px; margin: 2px 0 4px; }
.tgp-board .trivia-block { border-radius: 10px; padding: 12px; }
.tgp-board .trivia-eyebrow { font-size: 10px; }
.tgp-replies .trivia-block { border-radius: 10px; padding: 12px; }

/* ── Eleven Game Page (Worst/Best Eleven — full-screen) ────────────────────── */
.eleven-game-page {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--paper);
  overflow: hidden;
}
body.mode-worst .eleven-game-page {
  background: var(--worst-bg, #0d1117);
}
.egp-header {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 8px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
body.mode-worst .egp-header {
  background: #161b22;
  border-bottom-color: #30363d;
}
.egp-title {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.mode-worst .egp-title { color: #e6edf3; }
.egp-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: background 0.12s, color 0.12s;
}
.egp-back-btn:hover { background: var(--paper); color: var(--ink); }
body.mode-worst .egp-back-btn { color: #8b949e; }
body.mode-worst .egp-back-btn:hover { background: #21262d; color: #e6edf3; }
.egp-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.egp-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--ink-muted);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.egp-close-btn:hover { background: var(--paper); color: var(--ink); }
body.mode-worst .egp-close-btn { color: #8b949e; }
body.mode-worst .egp-close-btn:hover { background: #21262d; color: #e6edf3; }
.egp-close-btn.hidden { display: none; }
.egp-board {
  flex: 1;
  padding: 12px 14px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── Dark mode dossier inside game page (.egp-board) ───────────────────── */
body.mode-worst .egp-board .dossier-pts.pos,
body.mode-worst .egp-board .standout-pts.pos { color: var(--worst-amber); }
body.mode-worst .egp-board .dossier-pts.neg,
body.mode-worst .egp-board .standout-pts.neg { color: var(--worst-pos); }
body.mode-worst .egp-board .dossier-pts.zero,
body.mode-worst .egp-board .standout-pts.zero { color: #c8b0b0; }
body.mode-worst .egp-board .dossier-pos { color: #c8b0b0; }
body.mode-worst .egp-board .dossier-meta-label { color: var(--worst-muted); }
body.mode-worst .egp-board .dossier-name { color: var(--worst-text, #e6edf3); }
body.mode-worst .egp-board .dossier-col-label { color: var(--worst-muted); }
body.mode-worst .egp-board .dossier-col-score { color: var(--worst-text, #e6edf3); }
body.mode-worst .egp-board .dossier-col-hdr { border-bottom-color: var(--worst-bg-mid); }
body.mode-worst .egp-board .dossier-row { border-bottom-color: var(--worst-bg-mid); }
body.mode-worst .egp-board .dossier-share-btn { background: var(--worst-bg-btn); color: #fff; }
body.mode-worst .egp-board .gbu-tile { border-color: var(--worst-bg-mid); }
body.mode-worst .egp-board .gbu-good .gbu-tile-head { background: rgba(40,80,30,0.25); color: #7ecf7e; }
body.mode-worst .egp-board .gbu-bad  .gbu-tile-head { background: rgba(120,30,30,0.25); color: var(--worst-pos); }
body.mode-worst .egp-board .gbu-ugly .gbu-tile-head { background: rgba(80,60,20,0.2); color: var(--worst-muted); }

/* ── Pub Quiz Game Page ────────────────────────────────────────────────────── */
.pq-game-page {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
  z-index: 110;
  background: var(--paper);
  overflow: hidden;
}

/* Header */
.pq-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pq-page-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pq-page-progress {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.pq-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--ink-muted);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.pq-close-btn:hover { background: var(--paper); color: var(--ink); }

/* Header actions group */
.pq-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.pq-header-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
  display: flex;
  align-items: center;
}
@media (hover: hover) { .pq-header-icon-btn:hover { background: var(--paper); color: var(--ink); } }

/* Invite panel (slides below header) */
.pq-invite-panel {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  max-height: 320px;
  overflow-y: auto;
}
.pq-invite-panel.hidden { display: none; }

.pq-invite-search-wrap {
  margin-bottom: 8px;
}
.pq-invite-search-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  outline: none;
  font-family: var(--font-sans);
  transition: border-color 0.15s;
}
.pq-invite-search-input:focus { border-color: var(--meg-green); border-style: solid; }
.pq-invite-search-input::placeholder { color: var(--ink-muted); }

.pq-invite-recent {
  margin-bottom: 10px;
}
.pq-invite-recent-title,
.pq-invite-playing-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.pq-invite-recent-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.pq-invite-recent-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 56px;
  cursor: pointer;
}
.pq-invite-recent-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.pq-invite-recent-name {
  font-size: 10px;
  color: var(--ink);
  text-align: center;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pq-invite-recent-item.pq-invited .pq-invite-recent-avatar {
  opacity: 0.5;
}
.pq-invite-recent-item.pq-invited::after {
  content: 'Invited';
  font-size: 9px;
  color: var(--meg-green);
  font-weight: 600;
}

.pq-invite-results {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pq-invite-results li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.pq-invite-result-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.pq-invite-result-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--meg-green);
  background: var(--surface-success);
  border: 1px solid var(--meg-green);
  border-radius: 14px;
  padding: 3px 12px;
  cursor: pointer;
  transition: opacity 0.12s;
}
.pq-invite-result-btn:disabled { opacity: 0.5; cursor: default; }
.pq-invite-result-status {
  font-size: 11px;
  color: var(--ink-muted);
}

.pq-invite-playing {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.pq-invite-playing-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pq-invite-playing-chip {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  padding: 3px 8px;
  border-radius: 10px;
}

/* Convert nudge (quiz guest → real name) */
.pq-convert-nudge {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  text-align: center;
}
.pq-convert-msg {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}
.pq-convert-form {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
.pq-convert-input {
  flex: 1;
  padding: 8px 10px;
  font-size: 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  outline: none;
  font-family: var(--font-sans);
}
.pq-convert-input:focus { border-color: var(--meg-green); }
.pq-convert-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--meg-green);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.pq-convert-dismiss {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 4px;
}

/* Scrollable content area */
.pq-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 24px;
  overflow-y: auto;
  gap: 20px;
}

/* Question text */
.pq-question-text {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
  text-align: center;
  max-width: 340px;
}

/* Options 2×2 grid */
.pq-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 380px;
}
.pq-opt-btn {
  padding: 14px 10px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  line-height: 1.35;
  transition: border-color 0.12s, background 0.12s;
}
@media (hover: hover) { .pq-opt-btn:hover:not(:disabled) { border-color: var(--meg-green); background: var(--surface-success); } }
.pq-opt-btn:disabled { cursor: default; }
.pq-opt-btn.pq-opt-selected { border-color: var(--meg-green); background: var(--surface-success); color: var(--meg-green); font-weight: 600; }
.pq-opt-btn.pq-opt-correct   { border-color: var(--meg-green); background: var(--surface-success); color: var(--meg-green); font-weight: 600; }
.pq-opt-btn.pq-opt-wrong     { border-color: var(--neg);       background: var(--surface-danger); color: var(--neg); }

/* Timer — thin wrapper; the ugb-timer-bar-wrap inside handles height/track/fill */
.pq-timer-wrap {
  width: 100%;
  max-width: 380px;
  margin-top: 8px;
}

/* Result view */
.pq-result-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.pq-result-correct {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--meg-green);
  text-align: center;
}
.pq-result-who {
  font-size: 14px;
  color: var(--ink-muted);
  text-align: center;
}

/* Leaderboard */
.pq-scores {
  width: 100%;
  max-width: 380px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.pq-score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.pq-score-row:last-child { border-bottom: none; }
.pq-score-row.pq-score-me { background: var(--surface-success-muted); }
.pq-score-name { color: var(--ink); }
.pq-score-pts {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--meg-green);
}

/* Done / final standings */
.pq-done-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.pq-done-winner {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--ink);
  text-align: center;
}
.pq-done-close-btn {
  margin-top: 8px;
  padding: 10px 28px;
  background: var(--meg-green);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 0.15s;
}
.pq-done-close-btn:hover { opacity: 0.85; }

/* Waiting / between questions */
.pq-waiting {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  text-align: center;
  padding: 40px 0;
}

/* ── Rolling Quiz extras ──────────────────────────────────────── */

.rq-difficulty {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
  text-align: center;
}
.rq-diff-easy   { color: var(--meg-green); }
.rq-diff-medium { color: var(--amber, #f59e0b); }
.rq-diff-hard   { color: var(--neg); }

.rq-player-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  text-align: center;
  margin-top: var(--space-3);
}

.rq-reveal-stat {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
  margin-bottom: var(--space-2);
}

.rq-flavour {
  font-size: 14px;
  text-align: center;
  margin-top: var(--space-3);
  font-weight: 500;
}
.rq-flavour-correct { color: var(--meg-green); }
.rq-flavour-wrong   { color: var(--ink-muted); }

.rq-leaderboard {
  margin-top: var(--space-4);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}
.rq-lb-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}

.rq-shutdown-msg {
  font-size: 15px;
  color: var(--ink);
  text-align: center;
  padding: var(--space-4) 0;
}

/* ═══════════════════════════════════════════════════════════════
   Profile Page: Football Identity Card + Interview
   ═══════════════════════════════════════════════════════════════ */

.profile-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-4);
}

/* ── Identity Card (Football Sticker) ────────────────────────────── */
.identity-card {
  --club-primary: #1a3c2a;
  --club-accent: #4a9e6b;
  background: linear-gradient(135deg, var(--club-primary), color-mix(in srgb, var(--club-primary) 80%, #000));
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  position: relative;
}

.identity-card-header {
  background: var(--club-primary);
  padding: var(--space-4) var(--space-4) var(--space-3);
  color: #fff;
  border-bottom: 3px solid var(--club-accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.identity-card-name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  flex: 1;
  line-height: 1.2;
}

.identity-card-club-badge {
  background: rgba(255, 255, 255, 0.15);
  color: var(--club-accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
  white-space: nowrap;
}

.identity-card-body {
  background: var(--white);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.identity-card-avatar-cell {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.identity-card-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--surface-sink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 28px;
  color: #fff;
  flex-shrink: 0;
  border: 3px solid var(--club-primary);
}

.identity-card-status {
  text-align: center;
  font-size: 32px;
  margin: var(--space-1) 0;
}

.identity-card-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.identity-card-field:last-of-type {
  border-bottom: none;
}

.identity-card-field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.identity-card-field-value {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.identity-card-field-detail {
  font-size: 13px;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 4px;
}

.identity-card-field-quote {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  border-left: 3px solid var(--club-accent);
  padding-left: var(--space-2);
  font-style: italic;
}

.identity-card-teams {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: 12px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.team-pill {
  background: var(--surface-sink);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}

.identity-card-footer {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.identity-card-share-btn {
  padding: var(--space-2) var(--space-3);
  background: var(--club-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}

.identity-card-share-btn:hover {
  opacity: 0.9;
}

.identity-card-progress {
  height: 2px;
  background: var(--surface-sink);
  position: relative;
}

.identity-card-progress .progress-bar {
  height: 100%;
  background: var(--club-accent);
  transition: width 0.3s ease;
}

/* ── Identity Card Empty State ─────────────────────────────────────── */
.identity-card-empty {
  background: linear-gradient(135deg, var(--club-primary), color-mix(in srgb, var(--club-primary) 80%, #000));
  border-radius: var(--radius-lg);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.identity-card-empty-content {
  text-align: center;
  color: #fff;
}

.identity-card-empty-icon {
  font-size: 48px;
  margin-bottom: var(--space-3);
}

.identity-card-empty-content h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.identity-card-empty-content p {
  margin: 0 0 var(--space-4);
  font-size: 14px;
  opacity: 0.9;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

.identity-card-cta-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--club-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.identity-card-cta-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.identity-card-cta-btn:active {
  transform: translateY(0);
}

/* ── Editable Basics Section ────────────────────────────────────────── */
.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
}
.profile-avatar-row .profile-avatar-wrap {
  margin-bottom: 0;
}
.profile-avatar-row .profile-avatar {
  width: 64px;
  height: 64px;
  font-size: 22px;
}
.profile-editable-basics {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.profile-editable-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.profile-editable-row:last-child {
  border-bottom: none;
}

.profile-editable-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  min-width: 60px;
}

.profile-editable-value {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--ink);
}

.profile-edit-btn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-muted);
  transition: all 0.15s;
  flex-shrink: 0;
}

.profile-edit-btn:hover {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--ink-muted);
}

.profile-editable-input {
  flex: 1;
  padding: var(--space-2) var(--space-2);
  font-size: 14px;
  border: 1px solid var(--meg-accent);
  border-radius: 6px;
  font-family: inherit;
  color: var(--ink);
}

.profile-editable-input:focus {
  outline: none;
  border-color: var(--meg-green);
  box-shadow: 0 0 0 2px rgba(45, 90, 61, 0.1);
}

/* ── Profile Interview Chat UI ─────────────────────────────────────── */
.profile-interview {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  background: var(--white);
}

.profile-interview-header {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.profile-interview-skip-btn {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted, #888);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.15s;
}

.profile-interview-skip-btn:hover {
  color: var(--ink);
}

.profile-interview-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.profile-interview-msg {
  max-width: 70%;
  padding: var(--space-2) var(--space-3);
  border-radius: 12px;
  word-wrap: break-word;
  font-size: 14px;
  line-height: 1.4;
}


.profile-interview-msg--user {
  align-self: flex-end;
  background: var(--meg-green);
  color: #fff;
  border-top-right-radius: 4px;
}

.profile-interview-input-bar {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--white);
  flex-shrink: 0;
}

.profile-interview-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  resize: none;
  line-height: 1.4;
}

.profile-interview-input:focus {
  outline: none;
  border-color: var(--meg-accent);
  box-shadow: 0 0 0 2px rgba(74, 158, 106, 0.1);
}

.profile-interview-send-btn {
  padding: var(--space-2) var(--space-3);
  background: var(--meg-green);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s;
  flex-shrink: 0;
  min-width: 70px;
}

.profile-interview-send-btn:hover {
  opacity: 0.85;
}

.profile-interview-send-btn:active {
  transform: scale(0.98);
}

/* ── Profile Stats Grid & Tables (refactored styling) ────────────────── */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.profile-stat {
  background: var(--surface-raised);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  text-align: center;
  border: 1px solid var(--border);
}

.profile-stat-value {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.profile-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.profile-section {
  margin-bottom: var(--space-4);
}

.profile-section-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.profile-game-table {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.profile-game-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.profile-game-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  align-items: center;
}

.profile-game-row:last-child {
  border-bottom: none;
}

.profile-game-name {
  color: var(--ink);
  font-weight: 500;
}

.profile-game-played,
.profile-game-wins,
.profile-game-pct {
  color: var(--ink-muted);
  text-align: center;
  font-family: var(--font-mono);
}

.profile-following-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: 13px;
  cursor: pointer;
}

.profile-following-row input[type="checkbox"] {
  cursor: pointer;
}

.profile-history-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto auto;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
  font-size: 13px;
}

.profile-history-row:last-child {
  border-bottom: none;
}

.profile-history-row.winner {
  background: var(--surface-success);
}

.phr-icon {
  font-size: 18px;
  text-align: center;
}

.phr-label {
  color: var(--ink);
  font-weight: 500;
}

.phr-rank {
  color: var(--ink-muted);
  font-size: 12px;
}

.phr-pts {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--meg-accent);
  min-width: 50px;
  text-align: right;
}

.phr-date {
  color: var(--ink-muted);
  font-size: 12px;
  min-width: 50px;
  text-align: right;
}

.profile-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}

.profile-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--ink-muted);
}

/* ── Profile tabs ───────────────────────────────────────────────────────── */
.profile-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border, #e5e0d8);
  padding: 0 20px;
  background: var(--paper, #FAF8F5);
  position: sticky;
  top: 0;
  z-index: 2;
}

.profile-tab {
  padding: 14px 20px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted, #888);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  letter-spacing: 0.2px;
}

.profile-tab:hover {
  color: var(--ink, #1a1a1a);
}

.profile-tab.active {
  color: var(--meg-green, #2a7a4f);
  border-bottom-color: var(--meg-green, #2a7a4f);
}

.profile-tab-panel {
  min-height: 0;
}

.profile-tab-panel.hidden {
  display: none;
}

/* ── Guide tab ──────────────────────────────────────────────────────────── */
.guide-section {
  padding: 24px 20px 8px;
  border-bottom: 1px solid var(--border-light, #e8e8e8);
}

.guide-section:last-child {
  border-bottom: none;
}

.guide-section-title {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-muted, #888);
  margin-bottom: 14px;
}

.guide-entry {
  margin-bottom: 20px;
}

.guide-entry-heading {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
  margin-bottom: 6px;
}

.guide-entry-body {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-secondary, #444);
}

.guide-entry-body p {
  margin: 0 0 10px;
}

.guide-entry-body p:last-child {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN DASHBOARD
   ══════════════════════════════════════════════════════════════════════════ */

.admin-loading { padding: var(--space-8); text-align: center; color: var(--ink-muted); font-family: var(--font-sans); }
.admin-error { padding: var(--space-8); text-align: center; color: var(--red-card); font-family: var(--font-sans); }

/* Top-level section tabs (Games / Editorial) */
.admin-top-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border, #e5e0d8);
  background: var(--paper, #FAF8F5);
  padding: 0 var(--space-6, 24px);
  position: sticky;
  top: 0;
  z-index: 2;
}
.admin-top-tab {
  padding: 14px 24px;
  font-family: var(--font-serif, 'Libre Baskerville', serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-muted, #6B6760);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.admin-top-tab:hover { color: var(--ink, #1A1814); }
.admin-top-tab.active {
  color: var(--meg-green, #2D5A3D);
  border-bottom-color: var(--meg-green, #2D5A3D);
}
/* #admin-hub-root must propagate height from #messageFeed so the
   editorial container's calc(100% - ...) has a reference to resolve against. */
#admin-hub-root {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.admin-editorial-container {
  padding: 0;
  overflow-y: auto;
  flex: 1;          /* fill remaining space after topNav + analytics */
  min-height: 0;    /* allow flex child to shrink below content size */
}

/* Header */
.admin-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-6); border-bottom: 1px solid var(--border); }
.admin-header-left { display: flex; align-items: baseline; gap: var(--space-3); }
.admin-title { font-family: var(--font-serif); font-size: var(--text-2xl); color: var(--ink); margin: 0; }
.admin-subtitle { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-muted); }

/* Period Filter */
.admin-period-filter { display: flex; gap: var(--space-1); background: var(--paper); border-radius: var(--radius-sm); padding: 2px; }
.admin-period-btn { font-family: var(--font-sans); font-size: var(--text-xs); padding: var(--space-1) var(--space-3); border: none; border-radius: 6px; background: transparent; color: var(--ink-muted); cursor: pointer; transition: all 0.15s; }
.admin-period-btn.active { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.admin-period-btn:hover:not(.active) { color: var(--ink); }

/* Sections */
.admin-section { padding: var(--space-6); border-bottom: 1px solid var(--border); }
.admin-section-inline { display: flex; flex-direction: column; }
.admin-section-title { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--ink); margin: 0 0 var(--space-4) 0; }

/* Activity Feed Strip */
.admin-feed-strip { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); -webkit-overflow-scrolling: touch; }
.admin-feed-strip::-webkit-scrollbar { height: 4px; }
.admin-feed-strip::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 2px; }
.admin-feed-card { min-width: 160px; padding: var(--space-3) var(--space-4); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; gap: var(--space-3); align-items: flex-start; flex-shrink: 0; }
.admin-feed-icon { font-size: 20px; }
.admin-feed-info { font-family: var(--font-sans); }
.admin-feed-label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.admin-feed-time { font-size: var(--text-xs); color: var(--ink-muted); }
.admin-feed-phase { font-size: var(--text-xs); color: var(--meg-accent); font-weight: 500; }
.admin-feed-players { font-size: var(--text-xs); color: var(--ink-muted); }

/* Heatmap */
.admin-heatmap-wrap { overflow-x: auto; }
.admin-heatmap { display: flex; flex-direction: column; gap: 2px; min-width: 600px; }
.admin-heatmap-row { display: flex; gap: 2px; align-items: center; }
.admin-heatmap-header { margin-bottom: 2px; }
.admin-heatmap-day { width: 36px; font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-muted); flex-shrink: 0; text-align: right; padding-right: var(--space-2); }
.admin-heatmap-hour { flex: 1; font-family: var(--font-mono); font-size: 9px; color: var(--ink-faint); text-align: center; min-width: 20px; }
.admin-heatmap-cell { flex: 1; min-width: 20px; height: 18px; border-radius: 3px; cursor: default; transition: transform 0.1s; }
.admin-heatmap-cell:hover { transform: scale(1.3); z-index: 1; }

/* Stat Cards */
.admin-stat-row, .admin-stats-bar { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.admin-stat-card { flex: 1; min-width: 120px; padding: var(--space-4); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: center; }
.admin-stat-value { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--ink); }
.admin-stat-pct { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-muted); }
.admin-stat-label { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-muted); margin-top: var(--space-1); }
.admin-stat-warn { color: var(--red-card); }

/* Game Tiles Grid */
.admin-tiles-grid { display: flex; flex-direction: column; gap: var(--space-2); }
.admin-cat-header { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: var(--space-3) 0 var(--space-1); margin-top: var(--space-2); }
.admin-cat-header:first-child { margin-top: 0; }
.admin-game-tile { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; }
.admin-game-tile:hover { border-color: var(--meg-green); box-shadow: var(--shadow-sm); }
.admin-tile-top { display: flex; align-items: center; gap: var(--space-3); }
.admin-tile-icon { font-size: 20px; }
.admin-tile-name { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; color: var(--ink); }
.admin-tile-badge { font-family: var(--font-sans); font-size: var(--text-xs); padding: 2px 8px; background: var(--meg-green); color: white; border-radius: 10px; }
.admin-tile-stats { display: flex; gap: var(--space-4); }
.admin-tile-stat { text-align: right; }
.admin-tile-stat-value { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; color: var(--ink); display: block; }
.admin-tile-stat-label { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-muted); }

/* Detail Page */
.admin-detail-header { padding: var(--space-6); border-bottom: 1px solid var(--border); }
.admin-back-btn { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--meg-green); background: none; border: none; cursor: pointer; padding: 0; margin-bottom: var(--space-3); }
.admin-back-btn:hover { text-decoration: underline; }
.admin-detail-title-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.admin-detail-icon { font-size: 28px; }
.admin-detail-title { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--ink); margin: 0; }
.admin-detail-category { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-muted); }

/* Content Health Bar */
.admin-health-bar-wrap { margin-top: var(--space-2); }
.admin-health-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--border); }
.admin-health-used { background: var(--ink-faint); }
.admin-health-remaining { transition: width 0.3s; }
.admin-health-labels { display: flex; justify-content: space-between; font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-muted); margin-top: var(--space-1); }

/* Difficulty Breakdown */
.admin-diff-bars { display: flex; flex-direction: column; gap: var(--space-2); }
.admin-diff-row { display: flex; align-items: center; gap: var(--space-3); }
.admin-diff-label { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink); width: 80px; text-transform: capitalize; }
.admin-diff-bar-track { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.admin-diff-bar-fill { height: 100%; background: var(--meg-green); border-radius: 4px; transition: width 0.3s; }
.admin-diff-count { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-muted); width: 30px; text-align: right; }

/* Question Performance Flags */
.admin-perf-flags { display: flex; flex-direction: column; gap: var(--space-2); }
.admin-perf-flag { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); }
.admin-flag-easy { border-left: 3px solid var(--meg-accent); }
.admin-flag-hard { border-left: 3px solid var(--red-card); }
.admin-flag-label { font-weight: 600; width: 70px; }
.admin-flag-easy .admin-flag-label { color: var(--meg-accent); }
.admin-flag-hard .admin-flag-label { color: var(--red-card); }
.admin-flag-id { color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.admin-flag-rate { margin-left: auto; color: var(--ink-muted); }
.admin-muted { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-muted); }

/* Hourly Activity Chart */
.admin-hour-chart { display: flex; align-items: flex-end; gap: 2px; height: 80px; padding-top: var(--space-2); }
.admin-hour-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.admin-hour-bar { width: 100%; background: var(--meg-green); border-radius: 2px 2px 0 0; min-height: 2px; transition: height 0.3s; }
.admin-hour-label { font-family: var(--font-mono); font-size: 8px; color: var(--ink-faint); margin-top: 2px; }

/* Recent Additions */
.admin-recent-list { display: flex; flex-direction: column; gap: var(--space-2); }
.admin-recent-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.admin-recent-title { flex: 1; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink); }
.admin-recent-meta { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-muted); display: flex; gap: var(--space-2); }
.admin-recent-diff { background: var(--paper); padding: 1px 6px; border-radius: 4px; text-transform: capitalize; }
.admin-preview-btn { font-family: var(--font-sans); font-size: var(--text-xs); padding: var(--space-1) var(--space-3); background: var(--meg-green); color: white; border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.admin-preview-btn:hover { background: var(--meg-accent); }

/* Scheduled Games */
.admin-sched-list { display: flex; flex-direction: column; gap: var(--space-1); }
.admin-sched-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-3); font-family: var(--font-sans); font-size: var(--text-sm); background: var(--white); border-radius: var(--radius-sm); }
.admin-sched-time { color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.admin-sched-state { padding: 1px 8px; border-radius: 10px; font-size: var(--text-xs); font-weight: 500; }
.admin-state-live { background: var(--surface-success); color: var(--meg-green); }
.admin-state-scheduled, .admin-state-unknown { background: var(--surface-amber); color: var(--amber); }
.admin-sched-players { color: var(--ink-muted); font-size: var(--text-xs); margin-left: auto; }

/* Preview Page */
.admin-preview-content { padding: var(--space-6); }
.admin-preview-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-6); max-width: 640px; }
.admin-preview-answer { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--ink); margin: 0 0 var(--space-3) 0; }
.admin-preview-question { font-family: var(--font-sans); font-size: var(--text-md); color: var(--ink); margin: 0 0 var(--space-4) 0; line-height: 1.5; }
.admin-preview-diff { display: inline-block; font-family: var(--font-sans); font-size: var(--text-xs); padding: 2px 8px; background: var(--paper); border-radius: 4px; color: var(--ink-muted); text-transform: capitalize; margin-bottom: var(--space-3); }
.admin-preview-bio { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.5; margin: var(--space-3) 0; }
.admin-preview-meta { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-muted); }
.admin-preview-clues h3, .admin-preview-answers h3 { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-muted); margin: var(--space-4) 0 var(--space-2); }
.admin-preview-clues ol, .admin-preview-answers ol { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink); padding-left: var(--space-6); line-height: 1.8; }
.admin-preview-options { display: flex; flex-direction: column; gap: var(--space-2); }
.admin-preview-option { padding: var(--space-2) var(--space-3); background: var(--paper); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink); display: flex; align-items: center; gap: var(--space-2); }
.admin-preview-correct { background: var(--surface-success); border: 1px solid var(--meg-accent); font-weight: 600; }
.admin-option-letter { font-weight: 700; color: var(--ink-muted); width: 20px; }
.admin-preview-verdict { font-family: var(--font-serif); font-size: var(--text-lg); padding: var(--space-3); border-radius: var(--radius-sm); text-align: center; margin: var(--space-4) 0; }
.admin-verdict-true { background: var(--surface-success); color: var(--meg-green); }
.admin-verdict-false { background: var(--surface-danger); color: var(--red-card); }
.admin-preview-raw { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink); background: var(--paper); padding: var(--space-4); border-radius: var(--radius-sm); overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.admin-preview-groups { display: flex; flex-direction: column; gap: var(--space-4); }
.admin-wall-group h3 { font-family: var(--font-sans); font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.admin-wall-items { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.admin-wall-item { font-family: var(--font-sans); font-size: var(--text-sm); padding: var(--space-1) var(--space-3); background: var(--paper); border: 1px solid var(--border); border-radius: 6px; }
.admin-wall-grid { margin-top: var(--space-4); }

/* ── Admin nav item (below DMs) ───────────────────────────────────────────── */
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) var(--space-3) 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  transition: background .15s;
  width: calc(100% - var(--space-3) * 2);
}
.admin-nav-item:hover { background: rgba(0,0,0,.04); }
.admin-nav-item .nav-icon { opacity: .6; }

/* ── Trivia tiles in Dugout carousel ──────────────────────────────────────── */
.trivia-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  max-width: 160px;
  height: 172px;
  padding: var(--space-3);
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  text-align: center;
  gap: var(--space-1);
  flex-shrink: 0;
  box-sizing: border-box;
}
.trivia-tile.tile-live { border-color: var(--meg-green); box-shadow: 0 0 0 1px var(--meg-green); }
.trivia-tile.tile-done { opacity: .55; }
.trivia-tile-icon { font-size: 24px; }
.trivia-tile-name { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--ink); line-height: 1.2; }
.trivia-tile-status { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink); opacity: .6; display: flex; align-items: center; gap: 4px; }
.trivia-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--meg-green); animation: trivia-pulse 1.5s ease-in-out infinite; }
@keyframes trivia-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.trivia-tile-cta {
  margin-top: var(--space-1);
  padding: 4px 14px;
  border: none;
  border-radius: 6px;
  background: var(--meg-green);
  color: white;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.trivia-tile-cta:hover { opacity: .85; }
.trivia-tile-cta:disabled { background: var(--border); color: var(--ink); opacity: .5; cursor: default; }

/* Game instance number — small grey tag bottom-right of tiles */
.game-instance-num {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink);
  opacity: .3;
  pointer-events: none;
  line-height: 1;
}
.trivia-tile, .carousel-card { position: relative; }

/* ── Content Hub (Admin) ──────────────────────────────────────────────── */

.admin-content-hub-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--bg);
  background: var(--meg-green);
  border: none;
  border-radius: var(--radius);
  padding: 6px 14px;
  cursor: pointer;
  margin-top: var(--space-2);
  transition: opacity .15s;
}
.admin-content-hub-btn:hover { opacity: .85; }

/* Content Hub Tabs */
.admin-content-tabs {
  display: flex;
  gap: 2px;
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.admin-content-tab {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.admin-content-tab:hover { color: var(--ink); }
.admin-content-tab.active {
  color: var(--meg-green);
  border-bottom-color: var(--meg-green);
}

.admin-content-body { padding: var(--space-6); }

/* Theme Plan */
.admin-theme-plan {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}
.admin-theme-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition: border-color .15s;
}
.admin-theme-card:hover { border-color: var(--meg-green); }
.admin-theme-today { border-color: var(--meg-green); border-width: 2px; }
.admin-theme-date {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.admin-theme-day {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
.admin-theme-datestr {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
.admin-theme-today-badge {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--bg);
  background: var(--meg-green);
  border-radius: 3px;
  padding: 1px 5px;
}
.admin-theme-body { margin-top: var(--space-2); }
.admin-theme-primary {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-1);
}
.admin-theme-secondary {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  margin-top: var(--space-1);
}
.admin-theme-override, .admin-theme-fixture, .admin-theme-anniversary,
.admin-theme-calendar, .admin-theme-evergreen {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  border-radius: 3px;
  padding: 1px 5px;
  display: inline-block;
}
.admin-theme-override { background: var(--amber); color: var(--bg); }
.admin-theme-fixture { background: var(--meg-green); color: var(--bg); }
.admin-theme-anniversary { background: #8b5cf6; color: white; }
.admin-theme-calendar { background: var(--border); color: var(--ink); }
.admin-theme-evergreen { background: var(--ink-muted); color: var(--bg); }

/* Pool Cards */
.admin-pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.admin-pool-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.admin-pool-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.admin-pool-name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  flex: 1;
}
.admin-pool-total {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--meg-green);
}
.admin-pool-bar-wrap { margin: var(--space-2) 0; }
.admin-pool-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}
.admin-pool-bar-static { background: var(--ink-muted); }
.admin-pool-bar-gen { background: var(--meg-green); }
.admin-pool-breakdown {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
.admin-pool-flagged { color: var(--red-card); }

/* Analytics tables */
.admin-analytics-table { font-family: var(--font-sans); font-size: var(--text-sm); }
.admin-at-header {
  display: flex; gap: 4px; padding: 8px 12px;
  background: var(--meg-green); color: white; border-radius: var(--radius) var(--radius) 0 0;
  font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em;
}
.admin-at-row {
  display: flex; gap: 4px; padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.admin-at-row:nth-child(even) { background: rgba(0,0,0,0.02); }
.admin-at-row:last-child { border-bottom: none; }
.admin-at-col { flex: 1; min-width: 0; text-align: center; }
.admin-at-col.admin-at-wide { flex: 2; text-align: left; }
.admin-at-col.admin-at-extra-wide { flex: 3; text-align: left; }
.admin-at-col.admin-at-bold { font-weight: 600; }
.admin-at-col.admin-at-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-stat-warn { color: var(--red-card); }
.admin-stat-good { color: var(--meg-green); font-weight: 600; }

/* Daily trend chart */
.admin-daily-chart { padding: 8px 0; }
.admin-dc-bars {
  display: flex; gap: 4px; align-items: flex-end; height: 120px;
  padding: 0 4px;
}
.admin-dc-day { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.admin-dc-bar-wrap {
  width: 100%; height: 100px; display: flex; gap: 2px; align-items: flex-end; justify-content: center;
}
.admin-dc-bar {
  width: 40%; border-radius: 3px 3px 0 0; min-height: 2px;
  transition: height 0.3s;
}
.admin-dc-bar-games { background: var(--meg-green); }
.admin-dc-bar-impressions { background: var(--meg-accent, var(--colour-danger)); opacity: 0.7; }
.admin-dc-label { font-family: var(--font-mono); font-size: 9px; color: var(--ink-muted); margin-top: 4px; }
.admin-dc-legend {
  display: flex; gap: 16px; justify-content: center; margin-top: 8px;
  font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-muted);
}
.admin-dc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

/* Empty state */
.admin-empty-state {
  padding: 24px; text-align: center;
  font-family: var(--font-sans); color: var(--ink-muted);
  background: var(--surface); border-radius: var(--radius);
}
.admin-empty-state p { margin: 8px 0; }

/* Pool Entry Browser */
.admin-pool-entries { display: flex; flex-direction: column; gap: 2px; }
.admin-pool-entry-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.admin-pool-entry-row:hover { background: var(--surface-hover, #f5f5f5); }
.admin-pool-entry-flagged { opacity: 0.5; text-decoration: line-through; }
.admin-pool-entry-info { flex: 1; min-width: 0; }
.admin-pool-entry-main { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-pool-entry-sub { font-size: var(--text-xs); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-pool-entry-meta { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.admin-pool-entry-actions { display: flex; gap: 4px; flex-shrink: 0; }
.admin-search-input { font-family: var(--font-sans); }
.admin-entry-editor { padding: var(--space-4); }
.admin-entry-fields { display: flex; flex-direction: column; gap: var(--space-3); }
.admin-entry-field { display: flex; flex-direction: column; gap: 4px; }
.admin-entry-field label { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; color: var(--ink-muted); text-transform: uppercase; }
.admin-entry-input {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}
.admin-entry-input:focus { border-color: var(--meg-green); outline: none; }

/* Generation Log */
.admin-log-list { display: flex; flex-direction: column; gap: 2px; }
.admin-log-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.admin-log-game { font-weight: 600; min-width: 120px; }
.admin-log-theme { color: var(--ink-muted); flex: 1; }
.admin-log-count { font-family: var(--font-mono); font-size: var(--text-xs); }
.admin-log-status { font-size: var(--text-xs); color: var(--meg-green); font-weight: 600; }
.admin-log-date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); }
.admin-log-flags { font-size: var(--text-xs); color: var(--red-card); }
.admin-log-view-btn {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--meg-green);
  background: none;
  border: 1px solid var(--meg-green);
  border-radius: var(--radius);
  padding: 2px 8px;
  cursor: pointer;
}
.admin-log-view-btn:hover { background: var(--meg-green); color: var(--bg); }

.admin-empty {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  padding: var(--space-6);
  text-align: center;
}

/* Batch Detail */
.admin-batch-entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}
.admin-batch-flagged { border-color: var(--red-card); background: rgba(220, 38, 38, .03); }
.admin-batch-entry-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.admin-batch-entry-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
.admin-batch-flag-badge {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--red-card);
  background: rgba(220, 38, 38, .1);
  border-radius: 3px;
  padding: 1px 5px;
}
.admin-batch-flag-btn {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 8px;
  cursor: pointer;
  margin-left: auto;
}
.admin-batch-flag-btn:hover { border-color: var(--red-card); color: var(--red-card); }
.admin-batch-entry-body {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  background: var(--bg);
  border-radius: var(--radius);
  padding: var(--space-2);
  overflow-x: auto;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Generate Form */
.admin-gen-form { max-width: 480px; }
.admin-gen-row { margin-bottom: var(--space-4); }
.admin-gen-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-1);
}
.admin-gen-select, .admin-gen-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
}
.admin-gen-input-sm { width: 80px; }
.admin-gen-hint {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  margin-top: 4px;
}
.admin-gen-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.admin-gen-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--bg);
  background: var(--meg-green);
  border: none;
  border-radius: var(--radius);
  padding: 10px 20px;
  cursor: pointer;
  transition: opacity .15s;
}
.admin-gen-btn:hover { opacity: .85; }
.admin-gen-btn:disabled { opacity: .5; cursor: default; }
.admin-gen-btn-secondary {
  background: none;
  color: var(--meg-green);
  border: 1px solid var(--meg-green);
}
.admin-gen-btn-secondary:hover { background: var(--meg-green); color: var(--bg); }
.admin-gen-result { margin-top: var(--space-4); }
.admin-gen-success {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--meg-green);
  background: rgba(45, 90, 61, .08);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.admin-gen-error {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--red-card);
  background: rgba(220, 38, 38, .05);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.admin-gen-breakdown {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink);
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--surface);
  border-radius: var(--radius);
}
.admin-gen-breakdown-row { padding: 2px 0; }

.admin-stat-card-sm { min-width: 0; }

/* ── Pitch: Join Draft CTA ──────────────────────────────────────────────── */
.match-draft-cta {
  margin: 8px 0;
}
.match-draft-cta-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--white);
  border-left: 3px solid var(--meg-green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.mdcta-icon { font-size: 18px; }
.mdcta-text {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.mdcta-btn {
  background: var(--meg-green);
  color: var(--white);
  border: none;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-transform: uppercase;
}
.mdcta-btn:hover { opacity: 0.9; }

/* ── Room draft event cards (private rooms) ─────────────────────────────── */
.room-draft-event-card {
  border-left-color: var(--meg-green);
}

/* ── Draft page: room badge + room pages switcher ───────────────────────── */
.dp-room-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--meg-green);
  color: var(--white);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
}

.dp-room-switcher {
  display: flex;
  gap: 6px;
  padding: 6px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dp-room-switcher::-webkit-scrollbar { display: none; }

.dp-room-pill {
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  padding: 4px 12px;
  border-radius: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.dp-room-pill.active {
  background: var(--meg-green);
  color: var(--white);
  border-color: var(--meg-green);
}
.dp-room-pill:hover:not(.active) {
  border-color: var(--meg-green);
  color: var(--ink);
}

/* ─── Room Guest Mode (/r/:slug entry) ─────────────────────────── */
/* Hide sidebar and show only the room for guests arriving via shared link */

.room-guest-mode .sidebar {
  display: none !important;
}

.room-guest-mode .content {
  width: 100% !important;
  max-width: 100% !important;
}

/* Room-guest welcome banner */
.room-guest-banner {
  background: var(--meg-green);
  color: var(--white);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 13px;
  gap: 12px;
}

.room-guest-banner-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
}

.room-guest-banner-legend {
  opacity: 0.85;
  font-size: 12px;
}

.room-guest-banner-explore {
  background: rgba(255,255,255,0.2);
  color: var(--white);
  border: none;
  padding: 6px 14px;
  border-radius: 16px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.room-guest-banner-explore:hover {
  background: rgba(255,255,255,0.35);
}

/* Share + Invite button styling — auto-width when text visible */
.room-share-header-btn,
.room-invite-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: auto;
}

/* ═══════════════════════════════════════════════════════════════
   PREDICTION LEAGUE
   ═══════════════════════════════════════════════════════════════ */

.prediction-panel {
  border-bottom: 1px solid var(--border);
  background: var(--white);
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Header */
.pred-header {
  padding: 14px 16px 8px;
}
.pred-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.pred-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-muted);
}
.pred-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pred-badge-open { background: var(--meg-green); color: var(--white); }
.pred-badge-live { background: var(--colour-danger); color: var(--white); animation: pred-pulse 2s infinite; }
.pred-badge-complete { background: var(--ink-faint); color: var(--ink-muted); }
.pred-countdown { font-weight: 500; }

@keyframes pred-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Tabs */
.pred-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
}
.pred-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: var(--font-body);
  transition: color 0.15s;
}
.pred-tab.active {
  color: var(--meg-green);
  border-bottom-color: var(--meg-green);
}
.pred-tab:hover:not(.active) { color: var(--ink); }

/* Fixtures list */
.pred-fixtures {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Individual fixture card */
.pred-fixture {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.pred-fixture:last-child { border-bottom: none; }

/* Date/time display */
.pred-fix-datetime {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.pred-fix-day {
  font-weight: 600;
  color: var(--ink);
}
.pred-fix-date {
  color: var(--ink-muted);
}
.pred-fix-time {
  color: var(--ink-muted);
  font-weight: 500;
}
.pred-fix-ft {
  font-weight: 700;
  color: var(--ink-muted);
}
.pred-fix-live-label {
  font-weight: 700;
  color: var(--colour-danger);
  font-size: 11px;
  text-transform: uppercase;
}
.pred-fix-live-score {
  font-weight: 700;
  color: var(--ink);
  font-size: 13px;
}
.pred-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--colour-danger);
  display: inline-block;
  animation: pred-pulse 1.5s infinite;
}

/* Pick row — team names as buttons */
.pred-pick-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.pred-team-btn {
  flex: 1;
  min-width: 0;
  padding: 10px 8px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.pred-vs-btn {
  flex: 0 0 40px;
  padding: 10px 0;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink-muted);
  font-size: 16px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  line-height: 1;
}
.pred-team-btn:hover:not(:disabled),
.pred-vs-btn:hover:not(:disabled) {
  border-color: var(--meg-green);
  color: var(--ink);
}
.pred-team-btn.selected,
.pred-vs-btn.selected {
  background: var(--meg-green);
  color: var(--white);
  border-color: var(--meg-green);
}
.pred-team-btn:disabled,
.pred-vs-btn:disabled {
  cursor: default;
  opacity: 0.8;
}
.pred-team-btn.pred-actual,
.pred-vs-btn.pred-actual {
  border-color: var(--meg-green);
  background: rgba(45, 90, 61, 0.1);
}
.pred-team-btn.pred-missed.selected,
.pred-vs-btn.pred-missed.selected {
  background: rgba(200, 60, 60, 0.15);
  border-color: rgba(200, 60, 60, 0.4);
  color: var(--ink-muted);
}
.pred-pick-locked .pred-team-btn,
.pred-pick-locked .pred-vs-btn {
  cursor: default;
}
.pred-no-pick {
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
}

/* Result highlighting */
.pred-fixture.pred-correct { background: rgba(45, 90, 61, 0.06); border-radius: 8px; }
.pred-fixture.pred-exact { background: rgba(45, 90, 61, 0.06); border-radius: 8px; }
.pred-fixture.pred-result { background: rgba(245, 166, 35, 0.06); border-radius: 8px; }
.pred-fixture.pred-wrong { opacity: 0.6; }

.pred-result-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}
.pred-result-badge.pred-correct { background: var(--meg-green); color: var(--white); }
.pred-result-badge.pred-exact { background: var(--meg-green); color: var(--white); }
.pred-result-badge.pred-result { background: var(--amber); color: var(--white); }
.pred-result-badge.pred-wrong { background: var(--ink-faint); color: var(--ink-muted); }

/* Submit button */
.pred-submit-btn {
  display: block;
  width: calc(100% - 24px);
  margin: 8px 12px 14px;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: var(--meg-green);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.pred-submit-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.pred-submit-btn:not(:disabled):hover { opacity: 0.9; }
.pred-submit-btn:not(:disabled):active { transform: scale(0.98); }

/* Open round button (empty state) */
.pred-empty {
  padding: 30px 20px;
  text-align: center;
}
.pred-empty-icon { font-size: 32px; margin-bottom: 8px; }
.pred-empty-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.pred-empty-desc {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}
.pred-open-btn {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  background: var(--meg-green);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: opacity 0.15s;
}
.pred-open-btn:hover { opacity: 0.9; }

/* Competition picker (multi-competition empty state) */
.pred-comp-picker {
  padding: 20px 16px;
  text-align: center;
}
.pred-comp-picker-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.pred-comp-picker-desc {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}
.pred-comp-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.pred-comp-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 72px;
}
.pred-comp-btn:hover {
  border-color: var(--meg-green);
  background: var(--meg-green-faint, rgba(67, 160, 71, 0.08));
}
.pred-comp-icon { font-size: 20px; }
.pred-comp-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-body);
}

/* Competition header in panel */
.pred-comp-header {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 12px 4px;
  text-align: center;
}

/* Standings */
.pred-standings { padding: 8px 12px; }
.pred-standing-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
}
.pred-standing-row:last-child { border-bottom: none; }
.pred-standing-me { background: rgba(45, 90, 61, 0.06); border-radius: 8px; }
.pred-pos { font-size: 13px; font-weight: 600; min-width: 28px; text-align: center; color: var(--ink-muted); }
.pred-standing-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--white);
  flex-shrink: 0;
}
.pred-standing-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--ink); }
.pred-standing-pts { font-size: 14px; font-weight: 700; color: var(--ink); }
.pred-standing-pts small { font-weight: 400; color: var(--ink-muted); font-size: 12px; }
.pred-standing-detail { font-size: 11px; color: var(--ink-muted); min-width: 40px; text-align: right; }
.pred-no-standings { padding: 30px; text-align: center; color: var(--ink-muted); font-size: 13px; }

/* Clickable opponent rows */
.pred-standing-clickable { cursor: pointer; }
.pred-standing-clickable:active { background: rgba(0,0,0,0.04); }
.pred-view-hint { color: var(--ink-faint); font-size: 12px; margin-left: 2px; }

/* Opponent picks overlay */
.pred-opponent-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 0 env(safe-area-inset-bottom, 0);
}
.pred-opponent-card {
  background: var(--white); border-radius: 16px 16px 0 0;
  width: 100%; max-width: 480px; max-height: 75vh;
  overflow-y: auto; padding-bottom: 16px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
}
.pred-opponent-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--white);
  border-radius: 16px 16px 0 0;
}
.pred-opponent-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0;
}
.pred-opponent-name { flex: 1; font-size: 15px; font-weight: 600; color: var(--ink); }
.pred-opponent-score { font-size: 14px; font-weight: 700; color: var(--meg-green); }
.pred-opponent-close {
  background: none; border: none; font-size: 18px; color: var(--ink-muted);
  cursor: pointer; padding: 4px 8px; margin-left: 4px;
}
.pred-opponent-picks { padding: 4px 12px; }
.pred-opponent-pick-row {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 6px; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.pred-opponent-pick-row:last-child { border-bottom: none; }
.pred-opp-teams { flex: 1; color: var(--ink); font-weight: 500; }
.pred-opp-score { font-size: 12px; color: var(--ink-muted); font-weight: 600; min-width: 30px; text-align: center; }
.pred-opp-pick {
  font-size: 13px; font-weight: 600; min-width: 60px; text-align: right;
  color: var(--ink);
}
.pred-pick-correct .pred-opp-pick { color: var(--meg-green); }
.pred-pick-exact .pred-opp-pick { color: var(--meg-green); font-weight: 700; }
.pred-pick-exact .pred-opp-teams { color: var(--meg-green); }
.pred-pick-wrong .pred-opp-pick { color: var(--red-card); }

/* Toast */
.pred-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--ink);
  color: var(--white);
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 13px;
  font-family: var(--font-body);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  z-index: 9999;
}
.pred-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Prediction mode toggle (Result / Score) ───────────────────── */
.pred-mode-toggle {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin: 0 12px 12px;
  flex-shrink: 0;
}
.pred-mode-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 0 7px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: var(--font-body);
}
.pred-mode-btn + .pred-mode-btn {
  border-left: 1.5px solid var(--border);
}
.pred-mode-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-muted);
  line-height: 1;
}
.pred-mode-pts {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-faint);
  line-height: 1;
}
.pred-mode-btn.active .pred-mode-label { color: var(--white); }
.pred-mode-btn.active .pred-mode-pts   { color: rgba(255,255,255,0.75); }
.pred-mode-btn.active { background: var(--ink); }
.pred-mode-btn:not(.active):hover { background: var(--surface); }
.pred-mode-btn:not(.active):hover .pred-mode-label { color: var(--ink); }

/* ── Score mode: pill becomes a label with inline number input ─── */
/* pred-score-label sits alongside pred-team-btn in the HTML so it needs
   the same box model — flex:1, border, border-radius, bg, font */
.pred-score-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 10px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  box-sizing: border-box;
}
.pred-score-label.has-score {
  border-color: var(--meg-green);
  background: rgba(45, 90, 61, 0.06);
}
.pred-score-team {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.pred-score-team-away {
  text-align: right;
}
.pred-score-num {
  width: 26px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-body);
  text-align: right;
  padding: 0;
  cursor: pointer;
  outline: none;
  -moz-appearance: textfield;
}
.pred-score-num-away {
  text-align: left;
}
.pred-score-num::-webkit-outer-spin-button,
.pred-score-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pred-score-num::placeholder { color: var(--ink-faint); font-weight: 400; font-size: 13px; }
.pred-score-num:focus { color: var(--meg-green); }

/* Static score display (locked/submitted state) */
.pred-score-static {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
  min-width: 20px;
}
.pred-score-locked {
  cursor: default;
}

/* Vs divider in score mode — non-interactive text label */
.pred-vs-divider {
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: 0.5px;
  cursor: default;
  text-align: center;
  pointer-events: none;
}
.pred-vs-static {
  cursor: default;
}
.pred-vs-home {
  color: var(--meg-green);
}
.pred-vs-away {
  color: var(--meg-green);
}
.pred-vs-draw {
  color: var(--amber, var(--worst-amber));
}

/* ── Result badges — updated points ──────────────────────────── */
/* Exact score: gold (the jackpot) */
.pred-fixture.pred-exact { background: rgba(196, 154, 10, 0.07); border-radius: 8px; }
.pred-result-badge.pred-exact { background: #b8860b; color: var(--white); }

/* Correct result (Mode A 2pts): green */
.pred-result-badge.pred-correct { background: var(--meg-green); color: var(--white); }

/* Correct result via score mode (1pt): amber */
.pred-result-badge.pred-result { background: var(--amber, var(--worst-amber)); color: var(--white); }

/* Wrong: muted grey */
.pred-result-badge.pred-wrong { background: var(--ink-faint); color: var(--ink-muted); }

/* ── My Picks (read-only locked predictions) ──────────────────── */
.pred-picks-list { padding: 12px; }
.pred-pick-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  margin-bottom: 8px;
}
.pred-pick-card:last-child { margin-bottom: 0; }
.pred-pick-card-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.pred-pick-card-content {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
}
.pred-pick-card-team {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pred-pick-card-score,
.pred-pick-card-result {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-muted);
  flex: 0 0 auto;
  text-align: center;
  min-width: 30px;
}

/* ── Live Fixtures (colour-coded against picks) ───────────────── */
.pred-live-fixtures { padding: 12px; }
.pred-live-fixture {
  padding: 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  margin-bottom: 10px;
  transition: background 0.2s, border-color 0.2s;
}
.pred-live-fixture:last-child { margin-bottom: 0; }

/* Colour coding for live fixtures */
.pred-live-fixture.exact {
  background: rgba(184, 134, 11, 0.07);
  border-color: #b8860b;
}
.pred-live-fixture.correct {
  background: rgba(45, 90, 61, 0.06);
  border-color: var(--meg-green);
}
.pred-live-fixture.wrong {
  background: rgba(229, 62, 73, 0.06);
  border-color: rgba(229, 62, 73, 0.3);
}
.pred-live-fixture.pending {
  background: var(--white);
  border-color: var(--border);
}

.pred-lf-main {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  justify-content: space-between;
}
.pred-lf-status {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 50px;
}
.pred-lf-team {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pred-lf-team.away { text-align: right; }
.pred-lf-score {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  flex: 0 0 auto;
  text-align: center;
  min-width: 40px;
}

.pred-lf-your-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink-muted);
}
.pred-lf-label {
  font-weight: 500;
  flex-shrink: 0;
}
.pred-lf-your-pick strong {
  color: var(--ink);
  font-weight: 700;
  flex: 1;
}
.pred-lf-pts {
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--ink-faint);
  color: var(--ink-muted);
}
.pred-lf-pts.exact { background: #b8860b; color: var(--white); }
.pred-lf-pts.correct { background: var(--meg-green); color: var(--white); }
.pred-lf-pts.wrong { background: rgba(229, 62, 73, 0.1); color: rgba(229, 62, 73, 0.8); }

/* ── Dark mode: boost prediction fixture colour-coding opacity ── */
[data-theme="dark"] .pred-live-fixture.exact {
  background: rgba(184, 134, 11, 0.15);
  border-color: rgba(184, 134, 11, 0.6);
}
[data-theme="dark"] .pred-live-fixture.correct {
  background: rgba(45, 90, 61, 0.18);
  border-color: var(--meg-green);
}
[data-theme="dark"] .pred-live-fixture.wrong {
  background: rgba(229, 62, 73, 0.12);
  border-color: rgba(229, 62, 73, 0.4);
}
[data-theme="dark"] .pred-lf-pts.wrong {
  background: rgba(229, 62, 73, 0.18);
  color: rgba(229, 62, 73, 0.9);
}

.pred-no-picks,
.pred-no-fixtures {
  padding: 24px 12px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   GAME DOCK — Carousel pills + expandable panel
   ═══════════════════════════════════════════════════════════════ */

.game-dock {
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

/* Pill strip — horizontal scroll, snap to pills */
.game-dock-pills {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.game-dock-pills::-webkit-scrollbar { display: none; }

/* Individual pill */
.dock-pill {
  flex: 0 0 auto;
  /* Nearly full-width on mobile — show ~20px peek of next pill */
  width: calc(100vw - 80px);
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  font-family: var(--font-body);
}
.dock-pill:hover {
  border-color: var(--meg-green);
}
.dock-pill-active {
  border-color: var(--meg-green);
  background: rgba(45, 90, 61, 0.04);
  box-shadow: 0 1px 4px rgba(45, 90, 61, 0.1);
}

/* Only 1 pill? Centre it, no peek needed */
.game-dock-pills:has(.dock-pill:only-child) {
  justify-content: center;
}
.dock-pill:only-child {
  width: calc(100% - 0px);
  max-width: none;
}

.dock-pill-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.dock-pill-comp-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
.dock-pill-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 160px;
}
.dock-pill-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

/* ── Empty dock CTA ──────────────────────────────────────────────────── */
.dock-empty-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  width: 100%;
}
.dock-empty-text {
  font-size: 13px;
  color: var(--ink-faint);
}
.dock-empty-btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--meg-green);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.dock-empty-btn:hover { opacity: 0.8; }

/* Badge variants */
.dock-badge-open { background: var(--meg-green); color: var(--white); }
.dock-badge-cta { background: var(--meg-green); color: var(--white); }
.dock-badge-done { background: var(--ink-faint); color: var(--ink-muted); }
.dock-badge-locked { background: var(--ink-faint); color: var(--ink-muted); }
.dock-badge-live { background: var(--colour-danger); color: var(--white); animation: pred-pulse 2s infinite; }
.dock-badge-complete { background: var(--ink-faint); color: var(--ink-muted); }

/* Info icons */
.dock-pill-info {
  flex-shrink: 0;
  font-size: 12px;
  opacity: 0.4;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: 4px;
  transition: opacity 0.15s;
}
.dock-pill-info:hover { opacity: 0.8; }

.dock-info-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 240px;
  padding: 10px 14px;
  background: var(--ink, #1a1a2e);
  color: var(--white, #fff);
  font-size: 13px;
  line-height: 1.4;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  animation: fadeInUp 0.15s ease;
}

.carousel-info-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 11px;
  opacity: 0.3;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.15s;
}
.carousel-info-icon:hover { opacity: 0.7; }

.carousel-info-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 240px;
  padding: 10px 14px;
  background: var(--ink, #1a1a2e);
  color: var(--white, #fff);
  font-size: 13px;
  line-height: 1.4;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  animation: fadeInUp 0.15s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Expanded panel */
.game-dock-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.game-dock-panel.dock-panel-open {
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Upcoming draft dock panel */
.dock-upcoming-panel { padding: 14px 16px 10px; }
.dock-upcoming-match { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--ink); }
.dock-upcoming-meta { font-size: 12px; color: var(--ink-muted); margin-bottom: 8px; }
.dock-upcoming-countdown { font-family: var(--font-mono); font-size: 12px; color: var(--meg-green); margin-bottom: 12px; }
.dock-upcoming-view-btn {
  display: block; width: 100%; padding: 10px;
  background: var(--meg-green); color: #000;
  border: none; border-radius: 6px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  margin-bottom: 10px;
}
.dock-upcoming-note { font-size: 11px; color: var(--ink-muted); margin: 0; }

/* Prediction meta inside dock panel (replaces old pred-header) */
.pred-panel-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 4px;
  font-size: 12px;
  color: var(--ink-muted);
}

/* Desktop: pills shrink to natural width, no carousel needed */
@media (min-width: 600px) {
  .dock-pill {
    width: auto;
    min-width: 180px;
    max-width: 260px;
  }
}

/* ── Dock Launcher ──────────────────────────────────────────────────────── */

.dock-launcher {
  padding: 12px;
}

.dock-launcher-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.dock-launcher-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.dock-launcher-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 4px 8px;
}

.dock-launcher-step-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}

.dock-launcher-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dock-launcher-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-float);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

.dock-launcher-opt:active {
  background: var(--surface-hover);
}

.dock-launcher-opt-icon {
  font-size: 24px;
}

.dock-launcher-opt-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.dock-launcher-opt-desc {
  font-size: 12px;
  color: var(--ink-muted);
  margin-left: auto;
  white-space: nowrap;
}

.dock-launcher-back {
  background: none;
  border: none;
  color: var(--meg-green);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 8px;
  transition: opacity 0.15s;
}

.dock-launcher-back:active {
  opacity: 0.8;
}

.dock-launcher-comps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dock-launcher-comp {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-float);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}

.dock-launcher-comp:active {
  background: var(--surface-hover);
}

.dock-launcher-comp-label {
  font-size: 14px;
  font-weight: 700;
  display: block;
  color: var(--ink);
}

.dock-launcher-comp-round {
  font-size: 11px;
  color: var(--ink-muted);
  display: block;
}

.dock-launcher-comp-count {
  font-size: 11px;
  color: var(--ink-muted);
  display: block;
}

.dock-launcher-fixtures {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dock-launcher-fixture {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-float);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.dock-launcher-fixture:active {
  background: var(--surface-hover);
}

.dock-launcher-fx-teams {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.dock-launcher-fx-status {
  font-size: 12px;
  color: var(--meg-green);
  font-weight: 600;
}

.dock-launcher-confirm {
  text-align: center;
  padding: 12px 0;
}

.dock-launcher-confirm-type {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--ink);
}

.dock-launcher-confirm-comp {
  font-size: 14px;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.dock-launcher-confirm-fixture {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--ink);
}

.dock-launcher-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

.dock-launcher-play {
  padding: 10px 32px;
  background: var(--meg-green);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.dock-launcher-play:active {
  opacity: 0.9;
}

.dock-launcher-secondary {
  padding: 10px 20px;
  background: transparent;
  color: var(--meg-green);
  border: 1.5px solid var(--meg-green);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.dock-launcher-secondary:active { opacity: 0.8; }

/* Add Game pill */
.dock-pill-add {
  border-style: dashed;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.dock-pill-add:active {
  opacity: 1;
}

.dock-launcher-empty {
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
  padding: 20px 0;
}

/* ── Nudge System ──────────────────────────────────────────────────────────── */

/* Modal overlay */
.nudge-overlay.visible { opacity: 1; }


.nudge-dismiss:hover { color: var(--text, #eee); }




/* Shared CTA button */

/* Shared input */
.nudge-input-error { border-color: #ef4444; animation: nudge-shake 0.3s; }

@keyframes nudge-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Banner */
.nudge-banner.visible { opacity: 1; transform: translateY(0); }




.nudge-banner-close:hover { color: var(--text, #eee); }

/* Inline */
.nudge-inline.visible { opacity: 1; transform: translateY(0); }



.nudge-inline-close:hover { color: var(--text, #eee); }

/* Card */
.nudge-card.visible { opacity: 1; transform: translateY(0); }

.nudge-card-close:hover { color: var(--text, #eee); }



/* Toast (reused pattern) */
.nudge-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Guest account conversion banner ───────────────────────────────────────── */
.guest-convert-banner {
  background: var(--surface-alt, #1a1a2e);
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 8px 12px;
  animation: gcb-slide-in 0.3s ease-out;
}
@keyframes gcb-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gcb-text {
  font-size: 14px;
  color: var(--text-secondary, #aaa);
  margin-bottom: 10px;
  line-height: 1.4;
}
.gcb-text.gcb-success {
  color: var(--pos, #4caf50);
  margin-bottom: 0;
}
.gcb-actions {
  display: flex;
  gap: 8px;
}
.gcb-form input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--bg, #111);
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  color: var(--text, #eee);
  font-size: 14px;
}
.gcb-form input:focus {
  border-color: var(--accent, #5a8dee);
  outline: none;
}
.gcb-error {
  color: var(--neg, var(--colour-danger));
  font-size: 13px;
  margin-bottom: 8px;
}
.gcb-buttons {
  display: flex;
  gap: 8px;
}
.gcb-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.gcb-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.gcb-btn-primary {
  background: var(--accent, #5a8dee);
  color: #fff;
}
.gcb-btn-secondary {
  background: transparent;
  color: var(--text-secondary, #aaa);
  border: 1px solid var(--border, #333);
}

/* ── Guest engagement nudge (red dot + inline card) ─────────────────────── */
.guest-nudge-dot {
  position: absolute;
  top: 2px; right: 2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--colour-danger);
  pointer-events: none;
}
.guest-nudge-card {
  background: var(--white);
  border: 1px solid var(--meg-green);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 12px 4px;
  animation: gcb-slide-in 0.3s ease-out;
}
.gnc-text {
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.4;
}
.gnc-actions { display: flex; gap: 8px; }
.gnc-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.gnc-btn-primary {
  background: var(--meg-green);
  color: #fff;
}
.gnc-btn-dismiss {
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* === DEAD CODE — REVIEW BEFORE DELETING ================================= */
/* 293 rules (1,588 lines) identified as having no matching DOM element or   */
/* class in app.js, index.html, teamsheet.js, admin.js, or auth.js.         */
/* Audited March 2026. Do NOT delete without verifying each rule is unused.  */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* DEAD - legacy onboarding (replaced by Firebase auth) — .onboarding-card */
.onboarding-card {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* DEAD - legacy onboarding (replaced by Firebase auth) — .onboarding-logo */
.onboarding-logo {
  font-size: 40px;
  margin-bottom: 4px;
}
/* DEAD - legacy onboarding (replaced by Firebase auth) — .onboarding-title */
.onboarding-title {
  font-family: var(--font-serif);
  font-size: 34px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.3px;
  text-align: center;
}
/* DEAD - legacy onboarding (replaced by Firebase auth) — .onboarding-meg-sub */
.onboarding-meg-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: -4px;
  margin-bottom: 2px;
}
/* DEAD - legacy onboarding (replaced by Firebase auth) — .onboarding-sub */
.onboarding-sub {
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
  margin-bottom: 4px;
}
/* DEAD - legacy onboarding (replaced by Firebase auth) — .onboarding-input */
.onboarding-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}
/* DEAD - legacy onboarding (replaced by Firebase auth) — .onboarding-input:focus */
.onboarding-input:focus { border-color: var(--meg-green); }
/* DEAD - legacy onboarding (replaced by Firebase auth) — .onboarding-input::placeholder */
.onboarding-input::placeholder { color: var(--ink-faint); }
/* DEAD - legacy onboarding (replaced by Firebase auth) — .onboarding-btn */
.onboarding-btn {
  width: 100%;
  padding: 13px;
  background: var(--meg-green);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
}
/* DEAD - legacy onboarding (replaced by Firebase auth) — .onboarding-btn:hover */
.onboarding-btn:hover { background: var(--hover-green); }
/* DEAD - legacy onboarding (replaced by Firebase auth) — .onboarding-btn:active */
.onboarding-btn:active { transform: scale(0.97); }
/* DEAD - legacy onboarding (replaced by Firebase auth) — .onboarding-btn:disabled */
.onboarding-btn:disabled { opacity: var(--disabled-opacity); cursor: default; }
/* DEAD - old nav styles — .nav-heading */
.nav-heading {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding: 8px 16px 4px;
}
/* DEAD - old room UI elements — .room-lock */
.room-lock { font-size: 10px; opacity: 0.5; margin-left: auto; }
/* DEAD - old user display — .user-dot */
.user-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--meg-accent);
  flex-shrink: 0;
}
/* DEAD - old room UI elements — .header-room-members */
.header-room-members {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  padding: 0 8px;
  border-right: 1px solid var(--border);
  margin-right: 4px;
}
/* DEAD - old message formatting — .msg-gap */
.msg-gap { height: 14px; flex-shrink: 0; }
/* DEAD - unknown feature — .message-group */
.message-group { display: block; padding: 4px 0; flex-shrink: 0; position: relative; }
/* DEAD - old thinking indicator — .thinking-label */
.thinking-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--meg-green);
  width: 24px;
  text-align: center;
}
/* DEAD - old match display styles — .match-grid */
.match-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* DEAD - old match display styles — .match-tile */
.match-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  text-align: left;
  gap: 12px;
  width: 100%;
}
/* DEAD - old match display styles — .match-tile:hover */
.match-tile:hover { border-color: var(--ink); background: var(--white); }
/* DEAD - old match display styles — .match-tile:disabled */
.match-tile:disabled { opacity: 0.4; cursor: default; }
/* DEAD - old match display styles — .match-tile-teams */
.match-tile-teams {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* DEAD - old match display styles — .match-tile-meta */
.match-tile-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
/* DEAD - old slot display — .slot-dot */
.slot-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* DEAD - old draft UI elements — .draft-pick-area */
.draft-pick-area {
  padding: 13px 16px 14px;
}
/* DEAD - old draft UI elements — .draft-players */
.draft-players {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
/* DEAD - old captain tile styles — .captain-tile-score */
.captain-tile-score {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--meg-accent);
  font-weight: 500;
  margin-top: 2px;
}
/* DEAD - old captain tile styles — .captain-tile-club */
.captain-tile-club {
  font-size: 10px;
  color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  width: 100%;
}
/* DEAD - old match display styles — .match-clock-bar */
.match-clock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
/* DEAD - old clock display — .clock-pulse */
.clock-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--colour-danger);
  animation: pulseLive 1.2s infinite;
  flex-shrink: 0;
}
/* DEAD - old clock display — .clock-min */
.clock-min   { font-family: var(--font-mono); color: var(--ink); }
/* DEAD - old clock display — .clock-score */
.clock-score { font-family: var(--font-mono); color: var(--brand); font-size: 13px; }
/* DEAD - old clock display — .clock-half */
.clock-half  { font-size: 10px; color: var(--ink-muted); letter-spacing: 0.5px; margin-left: auto; }
/* DEAD - old swap UI — .swap-player-pts */
.swap-player-pts {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}
/* DEAD - match dossier feature (not in current UI) — .dossier-team-label */
.dossier-team-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
/* DEAD - match dossier feature (not in current UI) — .dossier-standouts */
.dossier-standouts {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
/* DEAD - old teamsheet styles — .dossier-standouts-label */
.dossier-standouts-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
/* DEAD - match standout cards (not in current UI) — .standout-tile */
.standout-tile {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
/* DEAD - match standout cards (not in current UI) — .standout-tile:last-child */
.standout-tile:last-child { border-bottom: none; }
/* DEAD - match standout cards (not in current UI) — .standout-badge */
.standout-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink-muted);
  min-width: 140px;
  flex-shrink: 0;
}
/* DEAD - match standout cards (not in current UI) — .standout-name */
.standout-name {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* DEAD - match standout cards (not in current UI) — .standout-events */
.standout-events { font-size: 10px; flex-shrink: 0; }
/* DEAD - match standout cards (not in current UI) — .standout-pts */
.standout-pts {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}
/* DEAD - old draft UI elements — .draft-players */
  .draft-players   { grid-template-columns: 1fr; }
/* DEAD - old tenable/game layout — .tn-lives-label */
.tn-lives-label {
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 500;
}
/* DEAD - old tenable/game layout — .tn-progress */
.tn-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
/* DEAD - old tenable/game layout — .tn-progress-bar */
.tn-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
/* DEAD - old tenable/game layout — .tn-progress-fill */
.tn-progress-fill {
  height: 100%;
  background: var(--meg-green);
  border-radius: 2px;
  transition: width 0.3s ease;
}
/* DEAD - old tenable/game layout — .tn-progress-label */
.tn-progress-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--meg-green);
  min-width: 32px;
  text-align: right;
}
/* DEAD - old tenable/game layout — .tn-blank-item */
.tn-blank-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  opacity: 0.4;
}
/* DEAD - old tenable/game layout — .tn-blank-dash */
.tn-blank-dash {
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 3px;
}
/* DEAD - old room UI elements — .room-msg-avatar */
.room-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--border);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
/* DEAD - old room UI elements — .room-msg-meta */
.room-msg-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
/* DEAD - old room UI elements — .room-msg-name */
.room-msg-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
/* DEAD - old room UI elements — .room-msg-time */
.room-msg-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
}
/* DEAD - old room UI elements — .room-msg-actions */
.room-msg-actions {
  position: absolute;
  top: -4px;
  right: 0;
  display: flex;
  gap: 2px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  box-shadow: var(--shadow-sm);
}
/* DEAD - old room UI elements — .room-thinking */
.room-thinking {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  align-items: center;
}
/* DEAD - old room UI elements — .room-thinking-avatar */
.room-thinking-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--meg-green);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: white;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
/* DEAD - old DM styles — .dm-game-card-guess */
.dm-game-card-guess {
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 13px;
}
/* DEAD - old game UI elements — .game-tile-play-again */
.game-tile-play-again {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--meg-accent);
  background: transparent;
  border: 1px solid var(--meg-accent);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  margin-left: 8px;
  transition: background 0.12s, color 0.12s;
}
/* DEAD - old game UI elements — .game-tile-play-again:hover */
.game-tile-play-again:hover {
  color: #fff;
  background: var(--meg-accent);
}
/* DEAD - old message formatting — .meg-msg-actions */
.meg-msg-actions { display: none; }
/* DEAD - old room UI elements — .header-room-badge */
.header-room-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: middle;
}
/* DEAD - old tenable styles — .date-separator */
.date-separator { display: none; }
/* DEAD - old message formatting — .msg-ctx-menu */
.msg-ctx-menu {
  position: absolute;
  top: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: var(--shadow-md);
  z-index: 200;
  min-width: 130px;
  animation: menuFadeIn 0.1s ease;
}
/* DEAD - old message formatting — .msg-ctx-item */
.msg-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.08s;
}
/* DEAD - old message formatting — .msg-ctx-item:hover */
.msg-ctx-item:hover { background: var(--paper); }
/* DEAD - old user display — .user-presence-wrap */
.user-presence-wrap {
  position: relative;
  flex-shrink: 0;
}
/* DEAD - old user display — .user-dot */
.user-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}
/* DEAD - old room UI elements — .room-member-presence */
.room-member-presence {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}
/* DEAD - old DM styles — .dm-user-result-avatar */
.dm-user-result-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  flex-shrink: 0;
}
/* DEAD - old DM styles — .dm-user-result-name */
.dm-user-result-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
/* DEAD - old activity feed styles — .activity-item */
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.1s;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* DEAD - old activity feed styles — .activity-item:hover */
.activity-item:hover { background: rgba(255,255,255,0.06); }
/* DEAD - old activity feed styles — .activity-item-icon */
.activity-item-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
/* DEAD - old activity feed styles — .activity-item-text */
.activity-item-text { flex: 1; min-width: 0; }
/* DEAD - old activity feed styles — .activity-item-room */
.activity-item-room {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}
/* DEAD - old search styles — .search-result-room */
.search-result-room {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
/* DEAD - old search styles — .search-result-content */
.search-result-content {
  font-size: 13px;
  color: var(--ink);
}
/* DEAD - old search styles — .search-result-content mark */
.search-result-content mark {
  background: var(--surface-amber);
  color: var(--ink);
  border-radius: 2px;
}
/* DEAD - old draft UI elements — .draft-pos-section */
.draft-pos-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* DEAD - old draft UI elements — .draft-pos-label */
.draft-pos-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* DEAD - old draft pick card/reveal — .dpc-text */
.dpc-text {
  font-size: 15px;
  font-weight: 600;
}
/* DEAD - old draft UI elements — .draft-reveal-title */
.draft-reveal-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
/* DEAD - old chip display — .chip-name */
.chip-name {
  color: var(--meg-accent) !important;
}
/* DEAD - unknown feature — .dugout-empty */
.dugout-empty {
  padding: 20px;
  font-size: 13px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
/* DEAD - old competition badge variants — .comp-group-pl */
.comp-group-pl  { border-left-color: #3d195b; }
/* DEAD - old competition badge variants — .comp-group-ucl */
.comp-group-ucl { border-left-color: #003087; }
/* DEAD - old competition badge variants — .comp-group-l1 */
.comp-group-l1  { border-left-color: #2b4929; }
/* DEAD - old competition badge variants — .comp-group-ecl */
.comp-group-ecl { border-left-color: #00ff87; }
/* DEAD - old competition badge variants — .cgt-comp-ecl */
.cgt-comp-ecl { background: #003d29; color: #00ff87; }
/* DEAD - unknown feature — .dugout-divider */
.dugout-divider {
  padding: 10px 20px 6px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
/* DEAD - unknown feature — .dugout-tile-time */
.dugout-tile-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
/* DEAD - old dugout badge variants — .dugout-badge-scheduled */
.dugout-badge-scheduled { background: var(--border); color: var(--ink-muted); }
/* DEAD - old dugout badge variants — .dugout-badge-complete */
.dugout-badge-complete  { background: var(--border); color: var(--ink-faint); }
/* DEAD - unknown feature — .dugout-remind-btn */
.dugout-remind-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  transition: border-color 0.15s, color 0.15s;
}
/* DEAD - old profile card elements — .profile-name */
.profile-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
/* DEAD - old profile card elements — .profile-club */
.profile-club {
  font-size: 14px;
  color: var(--ink-muted);
  margin-top: 2px;
}
/* DEAD - old profile card elements — .profile-joined */
.profile-joined {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* DEAD - unknown feature — .mode-tag */
.mode-tag { font-size: 9px; font-family: var(--font-mono); text-transform: uppercase; padding: 1px 3px; border-radius: 2px; vertical-align: middle; }
/* DEAD - old tab styles — .tab-badge */
.tab-badge {
  background: var(--red-card, var(--colour-danger));
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  vertical-align: middle;
}
/* DEAD - unknown feature — .result-label-just-about */
.result-label-just-about   { background: rgba(148,163,184,0.15); color: #94a3b8; border: 1px solid rgba(148,163,184,0.3); }
/* DEAD - unknown feature — .result-label-winner */
.result-label-winner       { background: rgba(34,197,94,0.12);  color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
/* DEAD - old match display styles — .meg-picker-match-score */
.meg-picker-match-score {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--colour-danger);
  flex-shrink: 0;
}
/* DEAD - old Meg UI elements — .meg-reveal-score */
.meg-reveal-score {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--colour-danger);
}
/* DEAD - old ticker styles — .ticker-event-line */
.ticker-event-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}
/* DEAD - old ticker styles — .ticker-minute */
.ticker-minute {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  min-width: 30px;
}
/* DEAD - old ticker styles — .ticker-score */
.ticker-score {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
}
/* DEAD - old ticker styles — .ticker-impact */
.ticker-impact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
/* DEAD - old ticker styles — .ticker-impact-item */
.ticker-impact-item {
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: 4px;
}
/* DEAD - old ticker styles — .ticker-reply-hint */
.ticker-reply-hint {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-muted);
  margin-top: 4px;
}
/* DEAD - old ticker styles — .ticker-match-header */
.ticker-match-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
/* DEAD - old ticker styles — .ticker-match-name */
.ticker-match-name {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
  text-transform: uppercase;
}
/* DEAD - old ticker styles — .ticker-score-badge */
.ticker-score-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  background: var(--meg-green);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
}
/* DEAD - old ticker styles — .ticker-team */
.ticker-team {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
/* DEAD - old ticker styles — .ticker-team-scored */
.ticker-team-scored {
  color: var(--meg-green);
  font-weight: 800;
}
/* DEAD - old ticker styles — .ticker-emoji */
.ticker-emoji { font-size: 16px; line-height: 1; }
/* DEAD - old ticker styles — .ticker-player */
.ticker-player { font-size: 14px; font-weight: 600; }
/* DEAD - old ticker styles — .ticker-tile-major */
.ticker-tile-major { border-left-width: 4px; }
/* DEAD - old ticker styles — .ticker-tile-minor */
.ticker-tile-minor { border-left-width: 3px; }
/* DEAD - old ticker styles — .ticker-minor-row */
.ticker-minor-row  { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-muted); }
/* DEAD - old ticker styles — .ticker-emoji-sm */
.ticker-emoji-sm   { font-size: 13px; line-height: 1; }
/* DEAD - old ticker styles — .ticker-minor-match, .ticker-minor-event, .ticker-minor-score */
.ticker-minor-match, .ticker-minor-event, .ticker-minor-score { font-size: 12px; color: var(--ink-muted); }
/* DEAD - old tenable styles — .te-team-sm */
.te-team-sm {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--ink-muted);
  flex-shrink: 0;
}
/* DEAD - old tenable styles — .te-impacts */
.te-impacts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
  padding-left: 22px;
}
/* DEAD - old tenable styles — .te-impact */
.te-impact {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
}
/* DEAD - old score strip UI — .strip-match */
.strip-match {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 6px;
  background: var(--white);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-top-width: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
  font-size: 11px;
}
/* DEAD - old score strip UI — .strip-match:hover */
.strip-match:hover { opacity: 0.85; }
/* DEAD - old score strip UI — .strip-match.strip-live */
.strip-match.strip-live { background: color-mix(in srgb, var(--meg-green) 8%, var(--white)); }
/* DEAD - old score strip UI — .strip-home, .strip-away */
.strip-home, .strip-away {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: 0.2px;
}
/* DEAD - old score strip UI — .strip-score */
.strip-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  color: var(--ink);
  padding: 0 3px;
}
/* DEAD - old score strip UI — .strip-status */
.strip-status {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
  margin-left: 2px;
}
/* DEAD - old score strip UI — .strip-live .strip-status */
.strip-live .strip-status { color: var(--meg-green); }
/* DEAD - unknown feature — .dugout-ko-group */
.dugout-ko-group {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 10px 12px 4px;
}
/* DEAD - old dugout badge variants — .dugout-comp-ecl */
.dugout-comp-ecl { background: #003d29; color: #00ff87; }
/* DEAD - old draft UI elements — .mnh-draft-badge */
.mnh-draft-badge {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  background: var(--amber);
  color: var(--ink);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
/* DEAD - match dossier feature (not in current UI) — .dossier-header */
.dossier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  background: var(--ink);
  color: var(--white);
}
/* DEAD - match dossier feature (not in current UI) — .dossier-result-label */
.dossier-result-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--amber);
  color: var(--ink);
}
/* DEAD - match dossier feature (not in current UI) — .dossier-label-just-about */
.dossier-label-just-about { background: var(--amber); color: var(--ink); }
/* DEAD - match dossier feature (not in current UI) — .dossier-label-so-close */
.dossier-label-so-close   { background: var(--amber); color: var(--ink); }
/* DEAD - match dossier feature (not in current UI) — .dossier-score-row */
.dossier-score-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px 6px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
/* DEAD - match dossier feature (not in current UI) — .dossier-mode */
.dossier-mode {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  background: var(--paper);
  padding: 2px 6px;
  border-radius: 4px;
}
/* DEAD - match dossier feature (not in current UI) — .dossier-breakdown */
.dossier-breakdown {
  padding: 4px 12px 8px;
}
/* DEAD - old draft pick card/reveal — .dpr-pos */
.dpr-pos {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-muted);
  min-width: 28px;
}
/* DEAD - old score strip UI — .strip-expand */
.strip-expand {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}
/* DEAD - old score strip UI — .strip-expand-inner */
.strip-expand-inner { padding: 12px 16px; }
/* DEAD - old score strip UI — .strip-expand-match */
.strip-expand-match {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}
/* DEAD - old score strip UI — .strip-expand-scorer */
.strip-expand-scorer {
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
/* DEAD - old score strip UI — .strip-expand-reactions */
.strip-expand-reactions {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
/* DEAD - old score strip UI — .strip-react */
.strip-react {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 10px;
  background: var(--paper);
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.1s;
}
/* DEAD - old score strip UI — .strip-react span */
.strip-react span {
  font-size: 11px;
  font-family: var(--font-mono);
}
/* DEAD - old score strip UI — .strip-expand-actions */
.strip-expand-actions { margin-top: 4px; }
/* DEAD - old score strip UI — .strip-draft-btn */
.strip-draft-btn {
  padding: 8px 16px;
  background: var(--ink);
  color: var(--white);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}
/* DEAD - old back page styles — .bp-tile-time-detail */
.bp-tile-time-detail {
  display: block;
  font-size: 10px;
  color: var(--ink-faint, #C8C5BE);
  text-align: right;
  margin-top: 2px;
}
/* DEAD - old draft UI elements — .psc-draft-badge */
.psc-draft-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--meg-green);
  background: rgba(74,124,89,0.1);
  padding: 2px 5px;
  border-radius: 3px;
}
/* DEAD - old teamsheet styles — .ts-phase-draft_open */
.ts-phase-draft_open   { background: var(--meg-accent); color: white; }
/* DEAD - old teamsheet styles — .ts-phase-draft_locked */
.ts-phase-draft_locked { background: var(--amber); color: var(--ink); }
/* DEAD - old teamsheet styles — .ts-phase-live */
.ts-phase-live         { background: var(--red-card); color: white; }
/* DEAD - old teamsheet styles — .ts-phase-complete */
.ts-phase-complete     { background: var(--ink-muted); color: white; }
/* DEAD - old teamsheet styles — .ts-phase-upcoming */
.ts-phase-upcoming     { background: var(--border); color: var(--ink-muted); }
/* DEAD - old teamsheet styles — .ts-fixture-bar */
.ts-fixture-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0;
  scrollbar-width: none;
}
/* DEAD - old teamsheet styles — .ts-fixture-bar::-webkit-scrollbar */
.ts-fixture-bar::-webkit-scrollbar { display: none; }
/* DEAD - old teamsheet styles — .ts-fixture-pill */
.ts-fixture-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--ink-muted);
}
/* DEAD - old teamsheet styles — .ts-fix-live */
.ts-fix-live   { border-color: var(--red-card); color: var(--red-card); }
/* DEAD - old teamsheet styles — .ts-fix-ht */
.ts-fix-ht     { border-color: var(--amber); color: var(--amber); }
/* DEAD - old teamsheet styles — .ts-fix-done, .ts-fix-ft */
.ts-fix-done, .ts-fix-ft { border-color: var(--meg-green); color: var(--meg-green); }
/* DEAD - old teamsheet styles — .ts-fix-vs */
.ts-fix-vs { font-size: 10px; color: var(--ink-faint); }
/* DEAD - old teamsheet styles — .ts-pos-counts */
.ts-pos-counts { display: flex; gap: 12px; font-size: 12px; color: var(--ink-muted); }
/* DEAD - old teamsheet styles — .ts-instruction */
.ts-instruction {
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
}
/* DEAD - old teamsheet styles — .ts-fixture-grid */
.ts-fixture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
/* DEAD - old teamsheet styles — .ts-fixture-card */
.ts-fixture-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
/* DEAD - old teamsheet styles — .ts-fc-header */
.ts-fc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
/* DEAD - old teamsheet styles — .ts-fc-team */
.ts-fc-team { font-weight: 600; font-size: 13px; }
/* DEAD - old teamsheet styles — .ts-fc-vs */
.ts-fc-vs   { font-size: 11px; color: var(--ink-faint); }
/* DEAD - old teamsheet styles — .ts-fc-ko */
.ts-fc-ko   { font-size: 11px; color: var(--ink-muted); margin-bottom: 8px; }
/* DEAD - old teamsheet styles — .ts-fc-picks */
.ts-fc-picks { display: flex; flex-direction: column; gap: 6px; }
/* DEAD - old teamsheet styles — .ts-fc-pick */
.ts-fc-pick {
  padding: 10px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
/* DEAD - old teamsheet styles — .ts-fc-pick:hover */
.ts-fc-pick:hover { border-color: var(--meg-accent); background: rgba(74, 158, 106, 0.04); }
/* DEAD - old teamsheet styles — .ts-fc-picked */
.ts-fc-picked {
  border-style: solid;
  border-color: var(--meg-green);
  background: rgba(45, 90, 61, 0.05);
}
/* DEAD - old teamsheet styles — .ts-fc-pick-name */
.ts-fc-pick-name { font-weight: 600; font-size: 13px; }
/* DEAD - old teamsheet styles — .ts-fc-pick-pos */
.ts-fc-pick-pos  { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); margin-left: 6px; }
/* DEAD - old teamsheet styles — .ts-fc-pick-prompt */
.ts-fc-pick-prompt { font-size: 12px; color: var(--ink-faint); }
/* DEAD - old teamsheet styles — .ts-modal-overlay */
.ts-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
/* DEAD - old teamsheet styles — .ts-modal-content */
.ts-modal-content {
  background: var(--white);
  border-radius: var(--radius);
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
}
/* DEAD - old teamsheet styles — .ts-modal-header */
.ts-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
/* DEAD - old teamsheet styles — .ts-modal-title */
.ts-modal-title  { font-weight: 700; font-size: 16px; }
/* DEAD - old teamsheet styles — .ts-modal-close */
.ts-modal-close  { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--ink-muted); }
/* DEAD - old teamsheet styles — .ts-modal-hint */
.ts-modal-hint   { font-size: 12px; color: var(--ink-muted); margin-bottom: 8px; }
/* DEAD - old teamsheet styles — .ts-modal-pos-status */
.ts-modal-pos-status { font-size: 11px; color: var(--ink-muted); margin-bottom: 12px; font-family: var(--font-mono); }
/* DEAD - old teamsheet styles — .ts-modal-input-wrap */
.ts-modal-input-wrap { margin-bottom: 12px; }
/* DEAD - old teamsheet styles — .ts-modal-search */
.ts-modal-search {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-sans);
}
/* DEAD - old teamsheet styles — .ts-modal-search:focus */
.ts-modal-search:focus { outline: none; border-color: var(--meg-green); }
/* DEAD - old teamsheet styles — .ts-modal-list */
.ts-modal-list { display: flex; flex-direction: column; gap: 6px; }
/* DEAD - old teamsheet styles — .ts-modal-loading */
.ts-modal-loading { text-align: center; color: var(--ink-faint); font-size: 13px; padding: 20px 0; }
/* DEAD - old teamsheet styles — .ts-pos-btn */
.ts-pos-btn {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font-sans);
  transition: background 0.15s, border-color 0.15s;
}
/* DEAD - old teamsheet styles — .ts-pos-btn:hover:not(:disabled) */
.ts-pos-btn:hover:not(:disabled) { border-color: var(--meg-green); background: rgba(45, 90, 61, 0.05); }
/* DEAD - old teamsheet styles — .ts-pos-btn-disabled */
.ts-pos-btn-disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
/* DEAD - old score strip UI — .strip-expand */
.strip-expand {
  transition: max-height 0.25s ease-out, opacity 0.2s;
  opacity: 0;
}
/* DEAD - old score strip UI — .strip-draft-btn */
.strip-draft-btn {
  transition: background 0.12s, transform 0.1s;
}
/* DEAD - old score strip UI — .strip-draft-btn:hover */
.strip-draft-btn:hover {
  background: var(--meg-green);
}
/* DEAD - old score strip UI — .strip-draft-btn:active */
.strip-draft-btn:active {
  transform: scale(0.96);
}
/* DEAD - old dugout badge variants — .dugout-badge-live */
.dugout-badge-live {
  animation: badgePulse 2s ease-in-out infinite;
}
/* DEAD - unknown feature — .dugout-tile-skeleton */
.dugout-tile-skeleton {
  padding: 4px 16px;
}
/* DEAD - unknown feature — .dugout-empty */
.dugout-empty {
  text-align: center;
  padding: 32px 16px;
  font-size: 14px;
  color: var(--ink-muted);
  font-family: var(--font-sans);
}
/* DEAD - unknown feature — .dugout-section-label */
.dugout-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-faint);
  padding: 12px 16px 4px;
}
/* DEAD - unknown feature — .dugout-empty-subtle */
.dugout-empty-subtle {
  font-size: 12px;
  color: var(--ink-faint);
  padding: 8px 16px 4px;
}
/* DEAD - old teamsheet styles — .dugout-results-divider */
.dugout-results-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-faint);
}
/* DEAD - old teamsheet styles — .dugout-results-divider::after */
.dugout-results-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
/* DEAD - old carousel variants — .carousel-comp-pl */
.carousel-comp-pl  { background: #3d195b; }
/* DEAD - old carousel variants — .carousel-comp-ucl */
.carousel-comp-ucl { background: #00204a; }
/* DEAD - old carousel variants — .carousel-comp-ecl */
.carousel-comp-ecl { background: #09b83e; }
/* DEAD - old profile card elements — .profile-interview-msg--meg */
.profile-interview-msg--meg {
  align-self: flex-start;
  background: var(--surface-raised);
  color: var(--ink);
  border-top-left-radius: 4px;
}
/* DEAD - unused admin panel variants — .admin-feed-dugout */
.admin-feed-dugout { border-left: 3px solid var(--meg-green); }
/* DEAD - old draft UI elements — .admin-feed-live-draft, .admin-feed-live-draft-active */
.admin-feed-live-draft, .admin-feed-live-draft-active { border-left: 3px solid var(--comp-pl); }
/* DEAD - unused admin panel variants — .admin-feed-teamsheet */
.admin-feed-teamsheet { border-left: 3px solid var(--amber); }
/* DEAD - unused admin panel variants — .admin-state-complete */
.admin-state-complete { background: var(--paper); color: var(--ink-muted); }
/* DEAD - unused admin panel variants — .admin-pool-critical */
.admin-pool-critical { border-color: var(--red-card); }
/* DEAD - unused admin panel variants — .admin-pool-low */
.admin-pool-low { border-color: var(--amber); }
/* DEAD - old predictions UI — .pred-header */
.pred-header {
  padding: 14px 16px 8px;
  border-bottom: 1px solid var(--border);
}
/* DEAD - old predictions UI — .pred-title */
.pred-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
/* DEAD - old predictions UI — .pred-meta */
.pred-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-muted);
}
/* DEAD - old predictions UI — .pred-badge */
.pred-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
/* DEAD - old predictions UI — .pred-badge-open */
.pred-badge-open { background: var(--meg-green); color: var(--white); }
/* DEAD - old predictions UI — .pred-badge-live */
.pred-badge-live { background: var(--red-card); color: var(--white); animation: pred-pulse 2s infinite; }
/* DEAD - old predictions UI — .pred-badge-complete */
.pred-badge-complete { background: var(--ink-faint); color: var(--ink); }
/* DEAD - old predictions UI — .pred-countdown */
.pred-countdown {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
/* DEAD - old predictions UI — .pred-tabs */
.pred-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
}
/* DEAD - old predictions UI — .pred-tab */
.pred-tab {
  background: none;
  border: none;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
/* Dead prediction styles removed — live styles are above (line ~15440+) */
/* DEAD - removed nudge system — .nudge-overlay */
.nudge-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s;
  padding: 20px;
}
/* DEAD - removed nudge system — .nudge-modal */
.nudge-modal {
  background: var(--surface, #1a1a2e);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 360px;
  width: 100%;
  position: relative;
  text-align: center;
}
/* DEAD - removed nudge system — .nudge-dismiss */
.nudge-dismiss {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-muted, #888);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
/* DEAD - removed nudge system — .nudge-modal-title */
.nudge-modal-title {
  font-family: var(--font-display, sans-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--text, #eee);
  margin-bottom: 8px;
}
/* DEAD - removed nudge system — .nudge-modal-body */
.nudge-modal-body {
  font-size: 14px;
  color: var(--text-muted, #aaa);
  line-height: 1.5;
  margin-bottom: 20px;
}
/* DEAD - removed nudge system — .nudge-modal-actions */
.nudge-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* DEAD - removed nudge system — .nudge-cta-btn */
.nudge-cta-btn {
  background: var(--accent, #4ade80);
  color: #111;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body, sans-serif);
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  width: 100%;
}
/* DEAD - removed nudge system — .nudge-cta-btn:hover */
.nudge-cta-btn:hover { background: var(--accent-hover, #22c55e); }
/* DEAD - removed nudge system — .nudge-cta-btn:active */
.nudge-cta-btn:active { transform: scale(0.97); }
/* DEAD - removed nudge system — .nudge-cta-sm */
.nudge-cta-sm {
  padding: 8px 16px;
  font-size: 13px;
  width: auto;
  border-radius: 8px;
}
/* DEAD - removed nudge system — .nudge-input */
.nudge-input {
  background: var(--input-bg, #111);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--text, #eee);
  font-family: var(--font-body, sans-serif);
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
}
/* DEAD - removed nudge system — .nudge-input:focus */
.nudge-input:focus { border-color: var(--accent, #4ade80); }
/* DEAD - removed nudge system — .nudge-input-sm */
.nudge-input-sm { padding: 8px 12px; font-size: 13px; width: 180px; }
/* DEAD - removed nudge system — .nudge-banner */
.nudge-banner {
  background: var(--surface, #1a1a2e);
  border-bottom: 1px solid var(--border, #2a2a4a);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s;
  position: relative;
  z-index: 100;
}
/* DEAD - removed nudge system — .nudge-banner-content */
.nudge-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  flex-wrap: wrap;
}
/* DEAD - removed nudge system — .nudge-banner-text */
.nudge-banner-text {
  font-size: 13px;
  color: var(--text-muted, #aaa);
  flex: 1;
  min-width: 150px;
}
/* DEAD - removed nudge system — .nudge-banner-text strong */
.nudge-banner-text strong {
  color: var(--text, #eee);
}
/* DEAD - removed nudge system — .nudge-banner-actions */
.nudge-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* DEAD - removed nudge system — .nudge-banner-close */
.nudge-banner-close {
  background: none;
  border: none;
  color: var(--text-muted, #666);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  flex-shrink: 0;
}
/* DEAD - removed nudge system — .nudge-inline */
.nudge-inline {
  background: var(--surface, #1a1a2e);
  border: 1px solid var(--accent, #4ade80);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.3s;
}
/* DEAD - removed nudge system — .nudge-inline-content */
.nudge-inline-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
/* DEAD - removed nudge system — .nudge-inline-text */
.nudge-inline-text {
  font-size: 13px;
  color: var(--text, #eee);
  flex: 1;
}
/* DEAD - removed nudge system — .nudge-inline-close */
.nudge-inline-close {
  background: none;
  border: none;
  color: var(--text-muted, #666);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
/* DEAD - removed nudge system — .nudge-card */
.nudge-card {
  background: var(--surface, #1a1a2e);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 14px;
  padding: 20px;
  margin: 10px 12px;
  position: relative;
  text-align: center;
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.3s;
}
/* DEAD - removed nudge system — .nudge-card-close */
.nudge-card-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted, #666);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
/* DEAD - removed nudge system — .nudge-card-title */
.nudge-card-title {
  font-family: var(--font-display, sans-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--text, #eee);
  margin-bottom: 6px;
}
/* DEAD - removed nudge system — .nudge-card-body */
.nudge-card-body {
  font-size: 13px;
  color: var(--text-muted, #aaa);
  line-height: 1.5;
  margin-bottom: 16px;
}
/* DEAD - removed nudge system — .nudge-toast */
.nudge-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--surface, #1a1a2e);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 10px;
  padding: 10px 20px;
  color: var(--text, #eee);
  font-size: 13px;
  font-family: var(--font-body, sans-serif);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  z-index: 10001;
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT HUB — Admin editorial dashboard
   ═══════════════════════════════════════════════════════════════ */

.ch-hub { padding: 20px; max-width: 900px; margin: 0 auto; }
.ch-loading { padding: 40px; text-align: center; color: var(--ink-muted); }
.ch-empty { padding: 40px; text-align: center; color: var(--ink-muted); font-style: italic; }

.ch-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ch-toolbar-left { display: flex; flex-direction: column; gap: 8px; }
.ch-toolbar-right { display: flex; gap: 8px; align-items: center; }
.ch-title { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0; }

.ch-counts { display: flex; gap: 4px; }
.ch-count { font-size: 12px; padding: 4px 10px; border-radius: 12px; cursor: pointer; color: var(--ink-muted); background: var(--paper); border: 1px solid var(--border); transition: all 0.15s; }
.ch-count:hover { background: var(--white); }
.ch-count.active { background: var(--meg-green); color: white; border-color: var(--meg-green); }

.ch-type-filter { font-size: 13px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--white); color: var(--ink); }

.ch-btn { font-size: 13px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--white); color: var(--ink); cursor: pointer; transition: all 0.15s; font-weight: 500; }
.ch-btn:hover { background: var(--paper); }
.ch-btn-primary { background: var(--meg-green); color: white; border-color: var(--meg-green); }
.ch-btn-primary:hover { background: var(--brand-hover); }
.ch-btn-danger { color: var(--red-card); border-color: var(--red-card); }
.ch-btn-danger:hover { background: var(--red-card); color: white; }
.ch-btn-sm { font-size: 11px; padding: 4px 10px; }
.ch-btn-create { background: var(--meg-green); color: white; border-color: var(--meg-green); font-weight: 600; }
.ch-btn-generate-previews, .ch-btn-generate-reviews {
  background: transparent; color: var(--meg-green); border-color: var(--meg-green); font-weight: 500; font-size: var(--text-xs);
}
.ch-btn-generate-previews:hover, .ch-btn-generate-reviews:hover { background: var(--meg-green); color: white; }
.ch-btn-generate-previews:disabled, .ch-btn-generate-reviews:disabled { opacity: 0.5; cursor: wait; }

/* Card list */
.ch-list { display: flex; flex-direction: column; gap: 12px; }

.ch-card { display: flex; gap: 14px; padding: 14px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.15s; align-items: flex-start; }
.ch-card:hover { border-color: var(--meg-green); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

.ch-card-thumb { width: 80px; height: 80px; border-radius: 8px; background-size: cover; background-position: center; flex-shrink: 0; }
.ch-card-body { flex: 1; min-width: 0; }
.ch-card-meta { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.ch-card-headline { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.ch-card-preview { font-size: 13px; color: var(--ink-muted); line-height: 1.4; }
.ch-card-channels { font-size: 11px; color: var(--meg-green); margin-top: 4px; font-weight: 500; }
.ch-card-date { font-size: 11px; color: var(--ink-muted); }
.ch-card-source { font-size: 12px; }

.ch-card-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }

.ch-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.ch-badge-type { background: var(--paper); color: var(--ink-muted); }
.ch-status-published { background: var(--surface-success); color: #2e7d32; }
.ch-status-draft { background: var(--surface-amber); color: #e65100; }
.ch-status-unpublished { background: var(--surface-danger); color: var(--colour-danger); }

/* Schedule */
.ch-schedule { margin-bottom: 32px; }
.ch-schedule-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ink-muted); margin-bottom: 12px; }
.ch-schedule-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
@media (max-width: 900px) { .ch-schedule-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .ch-schedule-grid { grid-template-columns: repeat(2, 1fr); } }
.ch-sch-day { background: var(--paper); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 80px; }
.ch-sch-date { font-size: 11px; font-weight: 700; color: var(--ink); margin-bottom: 4px; line-height: 1.3; }
.ch-sch-item { display: flex; flex-direction: column; gap: 1px; padding: 4px 6px; border-radius: 4px; }
.ch-sch-press { background: rgba(52, 168, 83, 0.12); border-left: 2px solid var(--meg-green); }
.ch-sch-backpage { background: rgba(234, 139, 0, 0.10); border-left: 2px solid var(--orange); }
.ch-sch-time { font-size: 10px; color: var(--ink-muted); font-weight: 500; }
.ch-sch-label { font-size: 11px; font-weight: 600; color: var(--ink); }

/* Form */
.ch-form { padding: 20px; max-width: 700px; margin: 0 auto; }
.ch-form-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.ch-form-header h2 { flex: 1; font-size: 18px; margin: 0; }
.ch-form-actions { display: flex; gap: 8px; }
.ch-form-body { display: flex; flex-direction: column; gap: 16px; }

/* Card + square image previews in edit form */
.ch-field--image-preview {}
.ch-img-preview { display: block; max-width: 100%; border-radius: 6px; border: 1px solid var(--border); }
.ch-img-preview--square { max-width: 160px; }
.ch-error { padding: 10px 14px; background: var(--surface-danger); border: 1px solid var(--border-danger); border-radius: 6px; color: var(--colour-danger); font-size: 13px; }
.ch-empty-sm { font-size: 12px; color: var(--ink-muted); }

.ch-field { display: flex; flex-direction: column; gap: 4px; }
.ch-field label { font-size: 12px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.ch-field-row { display: flex; gap: 12px; }
.ch-field-row .ch-field { flex: 1; }
.ch-stat-row { align-items: flex-end; }

.ch-input { font-size: 14px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--white); color: var(--ink); font-family: inherit; }
.ch-input:focus { outline: none; border-color: var(--meg-green); }
.ch-input-sm { max-width: 120px; }
.ch-textarea { font-size: 14px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--white); color: var(--ink); font-family: inherit; resize: vertical; }
.ch-textarea:focus { outline: none; border-color: var(--meg-green); }

.ch-channel-checkboxes { display: flex; gap: 16px; flex-wrap: wrap; }
.ch-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; color: var(--ink); }
.ch-checkbox input[type="checkbox"] { accent-color: var(--meg-green); }

/* ── Content Hub shell + tabs ───────────────────────────────────────── */
.ch-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ch-tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--border); padding: 0 20px; background: var(--white); flex-shrink: 0; }
.ch-tab-btn { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 12px 20px; font-size: 13px; font-weight: 600; color: var(--ink-muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; font-family: inherit; }
.ch-tab-btn:hover { color: var(--ink); }
.ch-tab-btn.active { color: var(--ink); border-bottom-color: var(--meg-green); }
.ch-tab-body { flex: 1; min-height: 0; overflow-y: auto; }

/* ── Image Library ──────────────────────────────────────────────────── */
.ch-img-lib { padding: 20px; max-width: 1100px; margin: 0 auto; }

/* ── Upload & Stylize panel ── */
.ch-img-upload-panel { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 20px; background: var(--white); overflow: hidden; }
.ch-img-upload-toggle { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: none; border: none; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.ch-img-upload-toggle:hover { background: var(--paper); }
.ch-img-upload-toggle-icon { font-size: 10px; color: var(--ink-muted); }
.ch-img-upload-body { display: none; padding: 0 16px 16px; border-top: 1px solid var(--border); }
.ch-img-upload-panel.open .ch-img-upload-body { display: block; }
.ch-img-upload-hint { font-size: 12px; color: var(--ink-muted); margin: 12px 0 14px; line-height: 1.5; }
.ch-img-upload-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ch-img-upload-name { flex: 1; min-width: 180px; font-family: var(--font-sans); font-size: 13px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--paper); color: var(--ink); outline: none; }
.ch-img-upload-name:focus { border-color: var(--meg-green); }
.ch-img-upload-role { font-family: var(--font-sans); font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--paper); color: var(--ink); outline: none; cursor: pointer; }
.ch-img-upload-file-label { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.ch-img-upload-file { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.ch-img-upload-file-text { font-size: 12px; font-weight: 600; color: var(--ink-muted); background: var(--paper); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; white-space: nowrap; transition: border-color 0.15s; }
.ch-img-upload-file-label:hover .ch-img-upload-file-text { border-color: var(--meg-green); color: var(--ink); }
.ch-img-upload-btn { font-family: var(--font-sans); font-size: 13px; font-weight: 600; padding: 8px 16px; background: var(--meg-green); color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: opacity 0.15s; }
.ch-img-upload-btn:hover:not(:disabled) { opacity: 0.85; }
.ch-img-upload-btn:disabled { opacity: 0.4; cursor: default; }
.ch-img-upload-status { margin-top: 10px; font-size: 12px; min-height: 18px; }
.ch-img-upload-status.loading { color: var(--ink-muted); }
.ch-img-upload-status.success { color: var(--meg-accent); font-weight: 600; }
.ch-img-upload-status.error { color: var(--red-card); font-weight: 600; }

/* ── Toolbar ── */
.ch-img-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.ch-img-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.ch-img-cat { background: var(--paper); border: 1px solid var(--border); border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 600; color: var(--ink-muted); cursor: pointer; transition: all 0.15s; font-family: inherit; }
.ch-img-cat:hover { border-color: var(--meg-green); color: var(--ink); }
.ch-img-cat.active { background: var(--meg-green); border-color: var(--meg-green); color: #fff; }
.ch-img-search-wrap { flex-shrink: 0; }
.ch-img-search { font-size: 13px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 20px; background: var(--white); color: var(--ink); font-family: inherit; width: 200px; outline: none; }
.ch-img-search:focus { border-color: var(--meg-green); }
.ch-img-count { font-size: 12px; color: var(--ink-muted); margin-bottom: 16px; }

/* ── Image grid ── */
.ch-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ch-img-tile { position: relative; border-radius: 10px; overflow: hidden; background: var(--paper); border: 1px solid var(--border); transition: transform 0.15s, box-shadow 0.15s, outline 0.15s; }
.ch-img-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.ch-img-tile--updated { outline: 2px solid var(--meg-accent); }
.ch-img-thumb { width: 100%; aspect-ratio: 1/1; background-size: cover; background-position: center top; background-color: #e8e4dc; cursor: pointer; }
.ch-img-meta { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 4px; gap: 4px; }
.ch-img-label { font-size: 11px; font-weight: 600; color: var(--ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ch-img-cat-badge { flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }
.ch-img-cat-badge--stylized { background: rgba(0,0,0,0.65); color: #fff; }
.ch-img-cat-badge--wiki { background: rgba(52,168,83,0.85); color: #fff; }
.ch-img-cat-badge--api-football { background: rgba(66,133,244,0.85); color: #fff; }

/* ── Audit controls ── */
.ch-img-audit { display: flex; gap: 4px; padding: 4px 6px 6px; }
.ch-img-audit-btn { flex: 1; font-family: var(--font-sans); font-size: 10px; font-weight: 600; padding: 5px 4px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; background: var(--paper); }
.ch-img-audit-btn--rerun { color: var(--meg-green); }
.ch-img-audit-btn--rerun:hover { background: var(--meg-green); color: #fff; border-color: var(--meg-green); }
.ch-img-audit-btn--wrong { color: var(--red-card); }
.ch-img-audit-btn--wrong:hover { background: var(--red-card); color: #fff; border-color: var(--red-card); }

/* ── Correction input ── */
.ch-img-correct { display: none; align-items: center; gap: 4px; padding: 4px 6px 6px; }
.ch-img-correct-input { flex: 1; font-family: var(--font-sans); font-size: 11px; padding: 5px 8px; border: 1px solid var(--meg-green); border-radius: 6px; background: var(--white); color: var(--ink); outline: none; min-width: 0; }
.ch-img-correct-run { font-family: var(--font-sans); font-size: 11px; font-weight: 700; padding: 5px 8px; background: var(--meg-green); color: #fff; border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.ch-img-correct-cancel { font-family: var(--font-sans); font-size: 11px; padding: 5px 6px; background: var(--paper); border: 1px solid var(--border); border-radius: 6px; color: var(--ink-muted); cursor: pointer; }

/* ── Tile loading overlay ── */
.ch-img-overlay { position: absolute; inset: 0; background: rgba(247,245,240,0.92); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; z-index: 2; }
.ch-img-overlay-text { font-size: 11px; font-weight: 600; color: var(--ink); text-align: center; padding: 0 8px; }
.ch-img-spinner { width: 22px; height: 22px; border: 2px solid var(--border); border-top-color: var(--meg-green); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Dugout fork button ("+" to private room) ──────────────────────────────── */
.dugout-tile-cta-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dugout-fork-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--ink-muted);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}
.dugout-fork-btn:hover {
  border-color: var(--meg-green);
  color: var(--meg-green);
  background: var(--surface-success);
}
.dugout-fork-btn:active {
  transform: scale(0.92);
}

/* ── Room picker modal ─────────────────────────────────────────────────────── */
.room-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}
.room-picker-modal {
  background: var(--white);
  border-radius: var(--radius);
  width: 340px;
  max-width: 92vw;
  max-height: 80vh;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.rp-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
}
.rp-close:hover { background: var(--paper); color: var(--ink); }
.rp-game-label {
  padding: 10px 16px 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
}
.rp-room-list {
  overflow-y: auto;
  max-height: 240px;
  padding: 4px 8px;
}
.rp-room-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
  font-family: var(--font-sans);
}
.rp-room-btn:hover { background: var(--paper); }
.rp-room-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.rp-room-members {
  font-size: 12px;
  color: var(--ink-muted);
}
.rp-empty {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
}
.rp-new-room {
  display: flex;
  gap: 8px;
  padding: 10px 12px 14px;
  border-top: 1px solid var(--border);
}
.rp-new-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  outline: none;
}
.rp-new-input:focus { border-color: var(--meg-green); }
.rp-new-btn {
  padding: 8px 14px;
  background: var(--meg-green);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.rp-new-btn:hover { background: #245A32; }

/* Room picker — section layout */
.rp-section {
  padding: 8px 8px 4px;
}
.rp-section + .rp-section {
  border-top: 1px solid var(--border);
}
.rp-section-label {
  padding: 4px 12px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-muted);
}
.rp-room-dugout {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.rp-room-dugout:hover { background: var(--surface-hover, #e8e4de); }
.rp-friends-list {
  max-height: 156px; /* ~3 rows visible */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.rp-empty-hint {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink-muted);
  font-style: italic;
}
.rp-section .rp-new-room {
  border-top: none;
  padding-top: 6px;
}

/* ── Match Preview Modal ─────────────────────────────────────────────── */
.match-preview-modal {
  background: var(--white);
  border-radius: 16px;
  padding: 24px;
  max-width: 360px;
  width: 90%;
  position: relative;
  text-align: center;
}
.mp-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--ink-muted);
  cursor: pointer;
}
.mp-comp {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}
.mp-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 8px;
}
.mp-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mp-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.mp-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.mp-vs {
  font-size: 13px;
  color: var(--ink-muted);
  font-weight: 500;
}
.mp-ko {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 20px;
}
.mp-draft-section {
  background: var(--bg-subtle, #f8f9fa);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.mp-draft-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.mp-draft-desc {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.mp-draft-actions {
  display: flex;
  gap: 8px;
}
.mp-draft-btn {
  flex: 1;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.mp-draft-btn:hover { opacity: 0.85; }
.mp-draft-enter {
  background: var(--meg-green);
  color: var(--white);
}
.mp-draft-room {
  background: var(--ink-faint, #e5e7eb);
  color: var(--ink);
}
.mp-view-match {
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 8px;
}
.mp-view-match:hover { color: var(--ink); }

/* ── PPI — Pitch Power Index ────────────────────────────────────────────── */

.ppi-tabs-bar {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--ink);
  padding: 0 4px;
  flex-shrink: 0;
}
.ppi-tabs-bar::-webkit-scrollbar { display: none; }

.ppi-tab-btn {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  padding: 9px 12px;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 0.12s, border-color 0.12s;
}
.ppi-tab-btn.active {
  color: #fff;
  border-bottom-color: var(--meg-accent);
}

.ppi-controls-row {
  display: flex;
  align-items: center;
  padding: 7px 14px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.ppi-count-label {
  font-size: 11px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}

.ppi-list { padding: 0; }

/* ── Compact tile ── */
.ppi-entry-tile {
  display: flex;
  align-items: stretch;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  min-height: 96px;
  cursor: pointer;
  transition: background 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.ppi-entry-tile:hover { background: var(--surface-hover); }

.ppi-compact-rank {
  width: 42px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 2px;
}
.ppi-rank-num {
  font-family: var(--font-serif);
  font-size: 21px;
  color: var(--ink);
  line-height: 1;
}
.ppi-rank-num.top3 { color: var(--meg-green); }

.ppi-delta { font-size: 10px; font-family: var(--font-mono); font-weight: 600; }
.ppi-delta.up   { color: var(--meg-accent); }
.ppi-delta.down { color: var(--red-card); }
.ppi-delta.same { color: var(--ink-faint); }

.ppi-compact-portrait {
  width: 72px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ppi-portrait-initials {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* Stylized portrait photo — fills the portrait container */
.ppi-portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}
/* Keep cat stripe above the photo */
.ppi-compact-portrait .ppi-cat-stripe,
.ppi-exp-portrait .ppi-cat-stripe { z-index: 1; }
.ppi-cat-stripe {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
}

.ppi-compact-content {
  flex: 1;
  padding: 8px 10px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ppi-compact-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.ppi-compact-name-block { min-width: 0; flex: 1; }
.ppi-compact-name {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ppi-compact-outlet {
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.ppi-compact-score-block { text-align: right; flex-shrink: 0; }
.ppi-compact-score {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--ink);
  line-height: 1;
}
.ppi-score-label {
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Mini bars (compact tile) */
.ppi-compact-bars { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.ppi-mini-bar-row { display: flex; align-items: center; gap: 5px; }
.ppi-mini-label { font-size: 9px; font-family: var(--font-mono); color: var(--ink-faint); width: 36px; flex-shrink: 0; text-transform: uppercase; }
.ppi-mini-track { flex: 1; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.ppi-mini-fill  { height: 100%; border-radius: 2px; }
.ppi-mini-val   { font-size: 9px; font-family: var(--font-mono); color: var(--ink-faint); width: 20px; text-align: right; }

/* Compact vote */
.ppi-compact-vote { display: flex; gap: 5px; align-items: center; }
.ppi-vote-sm {
  width: 32px;
  height: 26px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--paper);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.ppi-vote-sm.ppi-vote-up.voted,  .ppi-vote-sm.ppi-vote-up:hover  { background: var(--surface-success); border-color: var(--meg-accent); }
.ppi-vote-sm.ppi-vote-down.voted,.ppi-vote-sm.ppi-vote-down:hover { background: var(--surface-danger); border-color: #e87b6e; }

/* ── Expanded tile ── */
.ppi-entry-tile.expanded {
  flex-direction: column;
  min-height: unset;
  cursor: default;
  background: var(--white);
  border-bottom: 2px solid var(--meg-green);
}

.ppi-exp-header {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}
.ppi-exp-portrait {
  width: 88px;
  min-height: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.ppi-exp-portrait .ppi-portrait-initials { font-size: 26px; }

.ppi-exp-meta {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ppi-exp-name {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
  line-height: 1.2;
}
.ppi-exp-outlet {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
  margin-bottom: 4px;
}
.ppi-exp-bio {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
  padding: 12px 16px 4px;
  border-top: 1px solid var(--border);
}
.ppi-exp-rankrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.ppi-exp-rank { font-size: 11px; color: var(--ink-muted); font-family: var(--font-mono); }

.ppi-exp-score-block { padding: 12px 12px 12px 4px; text-align: right; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; }
.ppi-exp-score { font-family: var(--font-serif); font-size: 40px; color: var(--ink); line-height: 1; }

/* Category chips */
.ppi-cat-chip {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid;
}
.ppi-cat-chip--journalist  { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.ppi-cat-chip--pundit      { color: var(--meg-green); border-color: #a7f3d0; background: #ecfdf5; }
.ppi-cat-chip--youtuber    { color: #b45309; border-color: #fde68a; background: #fffbeb; }
.ppi-cat-chip--podcast     { color: #7c3aed; border-color: #ddd6fe; background: #f5f3ff; }
.ppi-cat-chip--stats       { color: #0e7490; border-color: #a5f3fc; background: #ecfeff; }
.ppi-cat-chip--commentator { color: #374151; border-color: #e5e7eb; background: #f9fafb; }
.ppi-cat-chip--wildcard    { color: #be185d; border-color: #fbcfe8; background: #fdf2f8; }

/* Expanded bars */
.ppi-exp-bars { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ppi-exp-bars-title { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 10px; }
.ppi-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.ppi-bar-label { font-size: 11px; font-weight: 600; color: var(--ink-muted); width: 68px; flex-shrink: 0; }
.ppi-bar-track { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.ppi-bar-fill  { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.ppi-bar-val   { font-size: 11px; font-family: var(--font-mono); color: var(--ink); width: 26px; text-align: right; }

/* Vote section */
.ppi-exp-vote { padding: 12px 14px; }
.ppi-vote-q { font-size: 11px; color: var(--ink-muted); margin-bottom: 8px; }
.ppi-vote-btns { display: flex; gap: 8px; }
.ppi-vote-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--paper);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ppi-vote-btn.ppi-vote-up.voted,  .ppi-vote-btn.ppi-vote-up:hover  { background: var(--surface-success); border-color: var(--meg-accent); color: var(--meg-green); }
.ppi-vote-btn.ppi-vote-down.voted,.ppi-vote-btn.ppi-vote-down:hover { background: var(--surface-danger); border-color: #e87b6e; color: var(--red-card); }

/* ── PPI Photo Admin ─────────────────────────────────────────────────────── */
.ppi-photo-admin-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.82);
  z-index: 2000; display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
}
.ppi-photo-admin-panel {
  background: var(--surface-float); border-radius: 12px; width: 100%; max-width: 1100px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5); overflow: hidden;
  position: relative; z-index: 2001; color: #1a1a1a;
}
.ppi-photo-admin-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 20px 20px 12px; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.ppi-photo-admin-title { font-family: var(--font-serif); font-size: 18px; color: #1a1a1a; }
.ppi-photo-admin-sub   { font-size: 12px; color: #666; margin-top: 2px; }
.ppi-photo-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ppi-photo-admin-status {
  padding: 6px 20px; font-size: 12px; color: var(--text-muted); background: var(--surface-raised);
  border-bottom: 1px solid #e5e5e0; min-height: 28px; display: flex; align-items: center; gap: 8px;
}
.ppi-photo-admin-status.sourcing { color: #b45309; }
.ppi-photo-admin-status.done     { color: #166534; }
.ppi-photo-admin-legend {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 20px;
  border-bottom: 1px solid var(--border-subtle); background: var(--surface-raised);
}
.ppi-photo-admin-grid {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.ppa-stats-row {
  grid-column: 1/-1; display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-muted); padding-bottom: 8px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.ppa-warn { color: #c45c00; font-weight: 600; }
.ppa-loading { grid-column: 1/-1; text-align: center; padding: 40px; color: var(--ink-muted); }

/* Cards */
.ppa-card {
  border: 1px solid #e0e0da; border-radius: 8px; overflow: hidden;
  background: var(--surface-float); transition: box-shadow 0.15s;
}
.ppa-card--approved { border-color: #86efac; background: var(--surface-success); }
.ppa-card--stylized { border-color: #4f7942; background: var(--surface-success); }
.ppa-img-wrap { width: 100%; aspect-ratio: 1; background: var(--surface-sink); overflow: hidden; }
.ppa-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ppa-img-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 28px; color: var(--ink-muted);
}
.ppa-card-body { padding: 8px; }
.ppa-card-name   { font-size: 12px; font-weight: 600; color: #1a1a1a; line-height: 1.3; margin-bottom: 2px; }
.ppa-card-outlet { font-size: 11px; color: #666; margin-bottom: 4px; }
.ppa-card-actions { display: flex; gap: 4px; margin: 6px 0 4px; flex-wrap: wrap; }
.ppa-done { font-size: 11px; color: var(--meg-green); }

/* URL form */
.ppa-url-form { display: flex; gap: 4px; margin-top: 4px; }
.ppa-url-form input {
  flex: 1; min-width: 0; font-size: 10px; padding: 3px 6px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-subtle); color: var(--ink);
}
.ppa-url-form button {
  font-size: 10px; padding: 3px 8px; border-radius: 4px;
  background: var(--meg-green); color: #fff; border: none; cursor: pointer;
  white-space: nowrap;
}

/* Badges */
.ppa-badge {
  display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: 10px;
  font-weight: 600; letter-spacing: 0.02em;
}
.ppa-badge--youtube    { background: #fee2e2; color: #b91c1c; }
.ppa-badge--wikipedia  { background: #e0f2fe; color: #0369a1; }
.ppa-badge--manual     { background: #fef3c7; color: #92400e; }
.ppa-badge--none       { background: #f3f4f6; color: #6b7280; }
.ppa-badge--approved   { background: #dcfce7; color: #166534; }
.ppa-badge--stylized   { background: #d1fae5; color: var(--meg-green); }

.btn-ghost-sm {
  font-size: 12px; padding: 5px 12px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--ink); cursor: pointer; white-space: nowrap;
  transition: background 0.1s, border-color 0.1s;
}
.btn-ghost-sm:hover { background: var(--bg-subtle); border-color: var(--ink-faint); }

/* ── PPI Hub (Editorial Hub → The Index tab) ─────────────────────── */
.ppi-hub { padding: 0; }
.ppi-hub-section { border-bottom: 1px solid var(--border); padding: 20px 24px; }
.ppi-hub-section:last-child { border-bottom: none; }
.ppi-hub-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ppi-hub-section-title { font-family: var(--font-serif); font-size: 16px; color: var(--ink); margin: 0; }
.ppi-hub-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ppi-hub-run-status { font-size: 13px; color: var(--ink-muted); }
.ppi-hub-photo-status { font-size: 12px; color: var(--ink-muted); margin-bottom: 8px; min-height: 20px; }
.ppi-hub-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ppi-hub-stat { font-size: 12px; color: var(--ink-muted); }
.ppi-hub-stat-sep { font-size: 12px; color: var(--ink-faint); }
.ppi-hub-warn { color: #b45309; font-weight: 600; }
.ppi-hub-status-note { font-size: 12px; margin-left: 4px; }
.ppi-hub-status-note.sourcing { color: #b45309; }
.ppi-hub-status-note.done { color: #166534; }
.ppi-hub-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.ch-btn-xs { font-size: 11px; padding: 3px 8px; }

/* ══════════════════════════════════════════════════════════════════════════════
   ADMIN HUB — Unified Content Control Plane
   ══════════════════════════════════════════════════════════════════════════════ */

/* Shell */
.ah-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-primary, #faf9f6);
}

.ah-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--border-light, #e5e2db);
  overflow-x: auto;
  flex-shrink: 0;
  background: var(--bg-secondary, #f5f3ee);
  -webkit-overflow-scrolling: touch;
}

.ah-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted, #8c8578);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.ah-tab:hover { color: var(--ink-primary, #2d2a26); }
.ah-tab--active {
  color: var(--green-700, #15803d);
  border-bottom-color: var(--green-700, #15803d);
  font-weight: 600;
}
.ah-tab-icon { opacity: 0.6; flex-shrink: 0; }
.ah-tab--active .ah-tab-icon { opacity: 1; }

.ah-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 0;
}

/* Loading & error states */
.ah-loading {
  text-align: center;
  padding: 40px 0;
  color: var(--ink-muted, #8c8578);
  font-size: 13px;
}
.ah-error {
  text-align: center;
  padding: 24px;
  color: var(--red-600, #dc2626);
  background: var(--red-50, #fef2f2);
  border-radius: 8px;
  font-size: 13px;
}
.ah-empty {
  text-align: center;
  padding: 24px;
  color: var(--ink-muted, #8c8578);
  font-size: 13px;
}

/* Sections */
.ah-section { margin-bottom: 24px; }
.ah-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary, #2d2a26);
  margin: 0 0 10px;
}
.ah-section-desc {
  font-size: 12px;
  color: var(--ink-muted, #8c8578);
  margin: -6px 0 12px;
}
.ah-section-note {
  font-size: 11px;
  color: var(--ink-muted, #8c8578);
  margin-top: 8px;
}

/* Sub-tabs */
.ah-subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}
.ah-subtab {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted, #8c8578);
  background: var(--bg-secondary, #f5f3ee);
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.ah-subtab:hover { color: var(--ink-primary, #2d2a26); background: var(--bg-primary, #faf9f6); }
.ah-subtab--active {
  color: var(--green-700, #15803d);
  background: white;
  border-color: var(--green-700, #15803d);
  font-weight: 600;
}

/* Status strip (Dashboard) */
.ah-status-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.ah-status-card {
  background: white;
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 8px;
  padding: 14px;
}
.ah-status-card--clickable { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.ah-status-card--clickable:hover { border-color: var(--green-700, #15803d); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.ah-status-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ah-status-label { font-size: 13px; font-weight: 600; color: var(--ink-primary, #2d2a26); }
.ah-status-detail { font-size: 11px; color: var(--ink-muted, #8c8578); }

/* Badges */
.ah-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ah-badge--success { background: var(--green-100, #dcfce7); color: var(--green-800, #166534); }
.ah-badge--warning { background: var(--amber-100, #fef3c7); color: var(--amber-800, #92400e); }
.ah-badge--danger  { background: var(--red-100, #fee2e2);   color: var(--red-800, #991b1b); }
.ah-badge--info    { background: var(--blue-100, #dbeafe);  color: var(--blue-800, #1e40af); }
.ah-badge--default { background: var(--bg-secondary, #f5f3ee); color: var(--ink-muted, #8c8578); }

.ah-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
}

/* Performance table */
.ah-perf-table { border: 1px solid var(--border-light, #e5e2db); border-radius: 8px; overflow: hidden; }
.ah-perf-header, .ah-perf-row { display: flex; padding: 8px 12px; font-size: 12px; }
.ah-perf-header { background: var(--bg-secondary, #f5f3ee); font-weight: 600; color: var(--ink-muted, #8c8578); text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; }
.ah-perf-row { border-top: 1px solid var(--border-light, #e5e2db); }
.ah-perf-row:hover { background: var(--bg-hover, #faf9f6); }
.ah-perf-col { flex: 1; text-align: center; }
.ah-perf-wide { flex: 2; text-align: left; }
.ah-perf-bold { font-weight: 600; color: var(--ink-primary, #2d2a26); }
.ah-stat-good { color: var(--green-600, #16a34a); font-weight: 600; }

/* Alerts */
.ah-alerts { display: flex; flex-direction: column; gap: 8px; }
.ah-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
}
.ah-alert--warning { background: var(--amber-50, #fffbeb); border: 1px solid var(--amber-200, #fde68a); }
.ah-alert--info    { background: var(--blue-50, #eff6ff);  border: 1px solid var(--blue-200, #bfdbfe); }
.ah-alert--danger  { background: var(--red-50, #fef2f2);   border: 1px solid var(--red-200, #fecaca); }
.ah-alert-text { color: var(--ink-primary, #2d2a26); }
.ah-alert-btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  color: var(--green-700, #15803d);
  font-family: inherit;
}
.ah-alert-btn:hover { background: var(--green-50, #f0fdf4); }

/* Date navigation */
.ah-date-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ah-date-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary, #2d2a26);
  min-width: 100px;
  text-align: center;
}
.ah-date-btn {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 4px;
  background: white;
  cursor: pointer;
  font-family: inherit;
}
.ah-date-btn:hover { background: var(--bg-secondary, #f5f3ee); }
.ah-date-today { color: var(--green-700, #15803d); border-color: var(--green-700, #15803d); }

.ah-info-banner {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--blue-800, #1e40af);
  background: var(--blue-50, #eff6ff);
  border: 1px solid var(--blue-200, #bfdbfe);
  border-radius: 8px;
  margin-bottom: 16px;
}

/* Pipeline board */
.ah-pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  min-height: 300px;
}
@media (max-width: 900px) { .ah-pipeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .ah-pipeline { grid-template-columns: 1fr; } }

.ah-pipeline-col {
  background: var(--bg-secondary, #f5f3ee);
  border-radius: 8px;
  padding: 10px;
  min-height: 200px;
}
.ah-pipeline-col--qa { background: var(--amber-50, #fffbeb); }
.ah-pipeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light, #e5e2db);
}
.ah-pipeline-title { font-size: 12px; font-weight: 600; color: var(--ink-primary, #2d2a26); text-transform: uppercase; letter-spacing: 0.5px; }
.ah-pipeline-count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  background: var(--ink-muted, #8c8578);
  border-radius: 50%;
}
.ah-pipeline-items { display: flex; flex-direction: column; gap: 8px; }
.ah-pipeline-empty { font-size: 11px; color: var(--ink-muted, #8c8578); text-align: center; padding: 16px 8px; }

/* Pipeline cards */
.ah-pipeline-card {
  background: white;
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 6px;
  padding: 10px;
  font-size: 12px;
}
.ah-pipeline-card--planned { border-left: 3px solid var(--blue-400, #60a5fa); }
.ah-pipeline-card--creating { border-left: 3px solid var(--purple-400, #c084fc); }
.ah-pipeline-card--published { border-left: 3px solid var(--green-500, #22c55e); }
.ah-pipeline-card-type { font-weight: 600; color: var(--ink-primary, #2d2a26); margin-bottom: 2px; }
.ah-pipeline-card-time { font-size: 11px; color: var(--ink-muted, #8c8578); }
.ah-pipeline-card-detail { font-size: 11px; color: var(--ink-muted, #8c8578); margin-top: 4px; }
.ah-pipeline-card-headline { font-size: 12px; color: var(--ink-primary, #2d2a26); margin-top: 4px; }
.ah-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border-light, #e5e2db);
  border-top-color: var(--purple-500, #a855f7);
  border-radius: 50%;
  animation: ah-spin 0.8s linear infinite;
  margin-top: 6px;
}
@keyframes ah-spin { to { transform: rotate(360deg); } }

/* Draft cards (approval workflow) */
.ah-draft-card {
  background: white;
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 6px;
  overflow: hidden;
}
.ah-draft-card--draft { border-left: 3px solid var(--amber-400, #fbbf24); }
.ah-draft-card--approved { border-left: 3px solid var(--blue-400, #60a5fa); }
.ah-draft-card--published { border-left: 3px solid var(--green-500, #22c55e); }
.ah-draft-card--rejected { border-left: 3px solid var(--red-400, #f87171); opacity: 0.7; }

.ah-draft-card-top {
  display: flex;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
}
.ah-draft-card-top:hover { background: var(--bg-hover, #faf9f6); }
.ah-draft-thumb {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-secondary, #f5f3ee);
}
.ah-draft-card-info { flex: 1; min-width: 0; }
.ah-draft-card-type { font-size: 11px; display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.ah-draft-card-headline { font-size: 12px; font-weight: 500; color: var(--ink-primary, #2d2a26); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-draft-card-time { font-size: 10px; color: var(--ink-muted, #8c8578); margin-top: 2px; }

.ah-draft-card-actions {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  border-top: 1px solid var(--border-light, #e5e2db);
  background: var(--bg-secondary, #f5f3ee);
}

/* Draft detail (expanded) */
.ah-draft-detail {
  padding: 12px;
  border-top: 1px solid var(--border-light, #e5e2db);
  background: var(--bg-primary, #faf9f6);
}
.ah-draft-components { display: flex; flex-direction: column; gap: 10px; }
.ah-draft-component { display: flex; flex-direction: column; gap: 4px; }
.ah-draft-comp-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-muted, #8c8578); }
.ah-draft-detail-img { max-width: 200px; border-radius: 4px; }
.ah-draft-detail-actions { margin-top: 10px; display: flex; gap: 8px; }

/* QA results */
.ah-draft-qa { margin-top: 12px; }
.ah-qa-result { padding: 8px; border-radius: 6px; font-size: 12px; }
.ah-qa-result--pass { background: var(--green-50, #f0fdf4); color: var(--green-800, #166534); }
.ah-qa-result--fail { background: var(--red-50, #fef2f2); color: var(--red-800, #991b1b); }
.ah-qa-error { font-size: 11px; margin-top: 4px; }

/* Buttons */
.ah-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 5px;
  background: white;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.ah-btn:hover { background: var(--bg-secondary, #f5f3ee); }
.ah-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ah-btn--sm { padding: 4px 10px; font-size: 11px; }
.ah-btn--xs { padding: 3px 8px; font-size: 10px; }
.ah-btn--primary { background: var(--green-700, #15803d); color: white; border-color: var(--green-700, #15803d); }
.ah-btn--primary:hover { background: var(--green-800, #166534); }
.ah-btn--success { background: var(--green-600, #16a34a); color: white; border-color: var(--green-600, #16a34a); }
.ah-btn--success:hover { background: var(--green-700, #15803d); }
.ah-btn--danger { background: var(--red-500, #ef4444); color: white; border-color: var(--red-500, #ef4444); }
.ah-btn--danger:hover { background: var(--red-600, #dc2626); }

/* Draft grid (dashboard) */
.ah-draft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* Calendar */
.ah-cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.ah-cal-grid--weekly { grid-template-columns: repeat(5, 1fr); }
.ah-cal-day {
  background: white;
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 6px;
  padding: 8px;
}
.ah-cal-day--today { border-color: var(--green-600, #16a34a); background: var(--green-50, #f0fdf4); }
.ah-cal-day-header { font-size: 11px; font-weight: 600; margin-bottom: 6px; color: var(--ink-primary, #2d2a26); }
.ah-cal-slots { display: flex; flex-direction: column; gap: 4px; }
.ah-cal-slot { display: flex; gap: 6px; font-size: 10px; align-items: center; }
.ah-cal-slot--pr { color: var(--blue-700, #1d4ed8); }
.ah-cal-time { color: var(--ink-muted, #8c8578); min-width: 32px; }
.ah-cal-type { color: var(--ink-primary, #2d2a26); }

/* Data freshness */
.ah-data-panel { max-width: 900px; }
.ah-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.ah-data-card {
  background: white;
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 8px;
  padding: 14px;
}
.ah-data-card h4 { font-size: 12px; font-weight: 600; margin: 0 0 8px; color: var(--ink-primary, #2d2a26); }
.ah-data-stat { font-size: 18px; font-weight: 700; color: var(--ink-primary, #2d2a26); }
.ah-data-detail { font-size: 11px; color: var(--ink-muted, #8c8578); margin-top: 4px; }
.ah-data-ok { font-size: 11px; color: var(--green-600, #16a34a); margin-top: 6px; font-weight: 600; }
.ah-data-warn { font-size: 11px; color: var(--amber-600, #d97706); margin-top: 6px; font-weight: 600; }
.ah-data-note { font-size: 10px; color: var(--ink-muted, #8c8578); margin-top: 4px; font-style: italic; }

.ah-records { display: flex; flex-direction: column; gap: 4px; }
.ah-record { font-size: 12px; color: var(--ink-primary, #2d2a26); }

/* Theme plan */
.ah-theme-list { display: flex; flex-direction: column; gap: 4px; }
.ah-theme-day { display: flex; gap: 12px; padding: 6px 8px; border-radius: 4px; font-size: 12px; }
.ah-theme-day--today { background: var(--green-50, #f0fdf4); }
.ah-theme-date { font-weight: 600; min-width: 80px; color: var(--ink-muted, #8c8578); }
.ah-theme-primary { color: var(--ink-primary, #2d2a26); font-weight: 500; }
.ah-theme-secondary { color: var(--ink-muted, #8c8578); }

/* 8-stage pipeline */
.ah-stage-list { display: flex; flex-direction: column; gap: 3px; }
.ah-stage { display: flex; align-items: center; gap: 6px; font-size: 10px; padding: 3px 6px; border-radius: 3px; }
.ah-stage--idle { color: var(--ink-muted, #8c8578); }
.ah-stage--active { color: var(--purple-700, #7e22ce); background: var(--purple-50, #faf5ff); font-weight: 600; }
.ah-stage--done { color: var(--green-600, #16a34a); }
.ah-stage-num { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-secondary, #f5f3ee); font-weight: 700; font-size: 9px; }

/* PPI */
.ah-ppi-status { margin-bottom: 20px; }
.ah-ppi-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ah-ppi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.ah-ppi-person {
  background: white;
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.ah-ppi-photo { width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; overflow: hidden; background: var(--bg-secondary, #f5f3ee); }
.ah-ppi-img { width: 100%; height: 100%; object-fit: cover; }
.ah-ppi-img--candidate { opacity: 0.7; filter: grayscale(50%); }
.ah-ppi-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ink-muted, #8c8578); font-size: 18px; }
.ah-ppi-name { font-size: 11px; font-weight: 600; color: var(--ink-primary, #2d2a26); }
.ah-ppi-role { font-size: 10px; color: var(--ink-muted, #8c8578); }
.ah-ppi-badges { margin-top: 4px; }

/* Roadmap */
.ah-roadmap { display: flex; flex-direction: column; gap: 12px; }
.ah-roadmap-phase { padding: 12px; border: 1px solid var(--border-light, #e5e2db); border-radius: 8px; background: white; }
.ah-roadmap-phase--current { border-color: var(--green-400, #4ade80); background: var(--green-50, #f0fdf4); }
.ah-roadmap-label { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.ah-roadmap-desc { font-size: 12px; color: var(--ink-muted, #8c8578); }

/* Games content editor */
.ah-game-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.ah-game-type-card {
  padding: 16px;
  background: white;
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.15s;
}
.ah-game-type-card:hover { border-color: var(--green-500, #22c55e); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.ah-game-type-label { font-size: 13px; font-weight: 600; color: var(--ink-primary, #2d2a26); margin-bottom: 4px; }
.ah-game-type-fields { font-size: 10px; color: var(--ink-muted, #8c8578); }

.ah-content-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

.ah-content-list { border: 1px solid var(--border-light, #e5e2db); border-radius: 8px; overflow: hidden; }
.ah-content-list-header, .ah-content-list-row { display: flex; padding: 8px 12px; font-size: 12px; align-items: center; }
.ah-content-list-header { background: var(--bg-secondary, #f5f3ee); font-weight: 600; color: var(--ink-muted, #8c8578); text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; }
.ah-content-list-row { border-top: 1px solid var(--border-light, #e5e2db); }
.ah-content-list-row:hover { background: var(--bg-hover, #faf9f6); }
.ah-cl-col { flex: 1; text-align: center; }
.ah-cl-wide { flex: 2.5; text-align: left; }

.ah-difficulty-select {
  padding: 3px 6px;
  font-size: 11px;
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 4px;
  background: white;
  font-family: inherit;
  cursor: pointer;
  transition: outline 0.2s;
}

/* Archive */
.ah-archive-list { border: 1px solid var(--border-light, #e5e2db); border-radius: 8px; overflow: hidden; }
.ah-archive-item { display: flex; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--border-light, #e5e2db); font-size: 12px; align-items: center; }
.ah-archive-item:first-child { border-top: none; }
.ah-archive-date { font-size: 11px; color: var(--ink-muted, #8c8578); min-width: 50px; }
.ah-archive-title { flex: 1; color: var(--ink-primary, #2d2a26); }
.ah-archive-views { font-size: 11px; color: var(--ink-muted, #8c8578); }

/* Schedule */
.ah-schedule-timeline { display: flex; flex-direction: column; gap: 2px; }
.ah-schedule-item { display: flex; gap: 12px; padding: 8px 10px; border-radius: 4px; font-size: 12px; align-items: center; }
.ah-schedule-item:hover { background: var(--bg-secondary, #f5f3ee); }
.ah-schedule-time { font-weight: 600; min-width: 90px; color: var(--ink-muted, #8c8578); }
.ah-schedule-stream { font-weight: 600; min-width: 80px; font-size: 11px; }
.ah-schedule-label { flex: 1; color: var(--ink-primary, #2d2a26); }
.ah-schedule-days { font-size: 10px; color: var(--ink-muted, #8c8578); text-transform: uppercase; }
.ah-schedule-note { font-size: 12px; color: var(--ink-muted, #8c8578); padding: 8px 10px; }

/* Forms */
.ah-form { display: flex; flex-direction: column; gap: 12px; }
.ah-form-group { display: flex; flex-direction: column; gap: 4px; }
.ah-form-label { font-size: 11px; font-weight: 600; color: var(--ink-muted, #8c8578); text-transform: uppercase; letter-spacing: 0.3px; }
.ah-form-input {
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 5px;
  background: white;
  font-family: inherit;
}
.ah-form-input:focus, .ah-form-textarea:focus { outline: none; border-color: var(--green-500, #22c55e); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15); }
.ah-form-textarea {
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 5px;
  background: white;
  font-family: inherit;
  resize: vertical;
}

/* Modal */
.ah-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.ah-modal {
  background: white;
  border-radius: 10px;
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.ah-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light, #e5e2db);
}
.ah-modal-header h3 { font-size: 14px; margin: 0; }
.ah-modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--ink-muted, #8c8578); padding: 0 4px; }
.ah-modal-body { padding: 16px; overflow-y: auto; flex: 1; }
.ah-modal-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border-light, #e5e2db); }

/* Stats grid in draft detail */
.ah-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.ah-stat-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ah-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--ink-muted, #8c8578);
}
.ah-stat-row-edit {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ah-stat-input {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 4px;
  background: white;
  font-family: var(--font-mono, monospace);
  text-align: center;
}
.ah-stat-input:focus {
  outline: none;
  border-color: var(--green-500, #22c55e);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
}
.ah-stat-vs {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-faint, #c4bfb6);
  flex-shrink: 0;
}

/* Stats context explainer */
.ah-stats-context {
  padding: 6px 10px;
  background: var(--bg-secondary, #f5f3ee);
  border-radius: 4px;
  margin-bottom: 8px;
}
.ah-stats-context-label {
  font-size: 11px;
  font-style: italic;
  color: var(--ink-muted, #8c8578);
}

/* Stats regeneration prompt */
.ah-stats-regen {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ah-stats-regen .ah-form-textarea {
  width: 100%;
  min-height: 44px;
  resize: vertical;
}
.ah-stats-regen .ah-btn {
  align-self: flex-start;
}

/* Fullscreen image overlay */
.ah-fullscreen-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.ah-fullscreen-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}
.ah-fullscreen-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  color: var(--ink-primary, #2d2a26);
  z-index: 3001;
}
.ah-fullscreen-close:hover {
  background: var(--bg-secondary, #f5f3ee);
}
.ah-fullscreen-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  cursor: default;
}

/* Clickable image hint */
.ah-img-clickable {
  cursor: zoom-in;
  transition: opacity 0.15s;
}
.ah-img-clickable:hover {
  opacity: 0.85;
}

/* QA description */
.ah-draft-qa-desc {
  font-size: 11px;
  color: var(--ink-muted, #8c8578);
  margin: 4px 0 8px;
  line-height: 1.4;
}

/* ── Image Bank ──────────────────────────────────────────────────────────── */

.ah-image-bank { padding: 0; }

.ah-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 0;
  flex-wrap: wrap;
}

.ah-form-select {
  padding: 6px 10px;
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  background: var(--bg-secondary, #1a1a1a);
  color: var(--text-primary, #e5e5e5);
  font-size: 13px;
}

.ah-image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 8px 0;
}

.ah-image-card {
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-secondary, #1a1a1a);
  transition: border-color 0.15s;
}

.ah-image-card:hover {
  border-color: var(--accent-color, #4A7C59);
}

.ah-image-thumb {
  width: 100%;
  height: 160px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-tertiary, #222);
}

.ah-image-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary, #666);
  font-size: 12px;
}

.ah-image-info {
  padding: 8px 10px;
}

.ah-image-subject {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ah-image-meta {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

.ah-image-usage {
  font-size: 11px;
  color: var(--text-tertiary, #666);
}

.ah-image-actions {
  padding: 6px 10px 10px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.ah-image-approved-label {
  font-size: 11px;
  color: var(--green-600, #16a34a);
  font-weight: 500;
}

/* ── Meg Prompt Section ──────────────────────────────────────────────────── */

.ah-meg-regen {
  margin-top: 6px;
}

.ah-meg-presets {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.ah-meg-tone {
  font-size: 11px !important;
  padding: 2px 8px !important;
}

/* ── Editorial Calendar / Schedule ───────────────────────────────────────── */

.ah-week-theme-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ah-template-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ah-override-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ah-override-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-secondary, #1a1a1a);
  border-radius: 6px;
  font-size: 13px;
}

.ah-override-date {
  color: var(--text-tertiary, #666);
  font-size: 12px;
  min-width: 80px;
}

.ah-override-type {
  font-weight: 600;
  min-width: 100px;
}

.ah-override-topic {
  flex: 1;
}

.ah-cal-slot--override {
  border-left: 3px solid var(--accent-color, #4A7C59) !important;
  padding-left: 6px;
}

.ah-cal-subject {
  display: block;
  font-size: 11px;
  color: var(--accent-color, #4A7C59);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ah-cal-theme {
  font-size: 10px;
  background: var(--accent-color, #4A7C59);
  color: white;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
}

.ah-meg-summary,
.ah-stats-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
}

.ah-cal-slot {
  cursor: pointer;
  transition: background 0.1s;
  padding: 3px 6px;
  border-radius: 4px;
}

.ah-cal-slot:hover {
  background: var(--bg-tertiary, #222);
}

/* ── Content Health Dashboard ────────────────────────────────────────────── */

.ah-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.ah-health-card {
  padding: 14px;
  background: var(--bg-secondary, #1a1a1a);
  border-radius: 8px;
  border: 1px solid var(--border-color, #333);
}

.ah-health-card h4 {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 600;
}

.ah-health-stat {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary, #e5e5e5);
}

.ah-health-detail {
  font-size: 12px;
  color: var(--text-tertiary, #666);
  margin-top: 4px;
}

.ah-health-warn {
  font-size: 12px;
  color: var(--amber-500, #f59e0b);
  margin-top: 4px;
}

.ah-health-ok {
  font-size: 12px;
  color: var(--green-600, #16a34a);
  margin-top: 4px;
}

/* ── Modal improvements ──────────────────────────────────────────────────── */

.ah-modal {
  min-width: 400px;
  max-width: 600px;
}

.ah-modal-body .ah-form-group {
  margin-bottom: 12px;
}

.ah-form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-secondary, #aaa);
}

/* ── QA results persistence fix ──────────────────────────────────────────── */

.ah-qa-result {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  margin-top: 6px;
}

.ah-qa-result--pass {
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid var(--green-600, #16a34a);
  color: var(--green-600, #16a34a);
}

.ah-qa-result--fail {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--red-500, #ef4444);
  color: var(--red-500, #ef4444);
}

.ah-qa-error {
  margin-top: 4px;
  font-size: 12px;
  padding-left: 8px;
  border-left: 2px solid var(--red-500, #ef4444);
}

/* ── Stats preset buttons ────────────────────────────────────────────────── */

.ah-stats-presets {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

/* Hide admin.js top nav when embedded in games tab */
.ah-games-wrap .admin-top-nav { display: none !important; }
/* Ensure admin-hub-root fills available space */
#admin-hub-root { height: 100%; display: flex; flex-direction: column; }

/* ═══════════════════════════════════════════════════════════════
   QUARANTINE TAB — Content review, editor, Claude chat
   ═══════════════════════════════════════════════════════════════ */

.ah-q-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 12px;
  min-height: 500px;
  margin-top: 12px;
}

.ah-q-list {
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 8px;
  overflow-y: auto;
  max-height: 700px;
  background: var(--surface, #faf8f5);
}

.ah-q-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light, #e5e2db);
  cursor: pointer;
  transition: background 0.1s;
}
.ah-q-row:hover { background: var(--surface-hover, #f0ede8); }
.ah-q-row--active { background: var(--surface-hover, #f0ede8); border-left: 3px solid var(--brand, #2D5A3D); }

.ah-q-row-top { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-muted, #8c8279); }
.ah-q-row-type { text-transform: capitalize; }
.ah-q-row-time { margin-left: auto; }
.ah-q-row-title { font-size: 13px; font-weight: 600; margin-top: 2px; color: var(--ink, #2c2418); }
.ah-q-row-reason { font-size: 11px; color: var(--red-500, #ef4444); margin-top: 2px; }

.ah-q-detail {
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 8px;
  overflow-y: auto;
  max-height: 700px;
  background: var(--surface, #faf8f5);
}

.ah-q-detail-inner { padding: 16px; }

.ah-q-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ah-q-detail-header h4 { margin: 0; font-size: 15px; }
.ah-q-detail-actions { display: flex; gap: 6px; }

.ah-q-detail-meta {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--ink-muted, #8c8279);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light, #e5e2db);
}

.ah-q-editor { margin-bottom: 16px; }

.ah-q-diff { margin-bottom: 16px; }
.ah-q-diff-scroll { max-height: 200px; overflow-y: auto; font-size: 12px; }
.ah-q-diff-row { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--border-light, #e5e2db); }
.ah-q-diff-key { width: 100px; flex-shrink: 0; font-weight: 600; color: var(--ink-muted, #8c8279); }
.ah-q-diff-same { color: var(--ink, #2c2418); word-break: break-all; }
.ah-q-diff-old { color: var(--red-500, #ef4444); text-decoration: line-through; word-break: break-all; }
.ah-q-diff-new { color: var(--green-600, #16a34a); word-break: break-all; }
.ah-q-diff-changed { background: rgba(239, 68, 68, 0.05); }

.ah-q-chat { border-top: 1px solid var(--border-light, #e5e2db); padding-top: 12px; }

.ah-q-chat-log {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 8px;
  padding: 8px;
  background: var(--surface-2, #f5f2ed);
  border-radius: 6px;
  min-height: 60px;
}

.ah-q-chat-msg { margin-bottom: 8px; }
.ah-q-chat-msg--user .ah-q-chat-role { color: var(--brand, #2D5A3D); font-weight: 600; font-size: 11px; }
.ah-q-chat-msg--assistant .ah-q-chat-role { color: var(--ink-muted, #8c8279); font-weight: 600; font-size: 11px; }
.ah-q-chat-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; }

.ah-q-chat-input-row { display: flex; gap: 6px; }
.ah-q-chat-input-row .ah-form-input { flex: 1; }

.ah-q-search-bar { margin-top: 8px; }

.ah-q-search-result {
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border-light, #e5e2db);
  border-radius: 6px;
  font-size: 13px;
}
.ah-q-search-result .ah-btn--xs { margin-top: 6px; }

@media (max-width: 768px) {
  .ah-q-layout { grid-template-columns: 1fr; }
  .ah-q-list { max-height: 250px; }
}

/* ═══════════════════════════════════════════════════════════════
   PITCH COMPETITION HUB — Light palette with green/orange accents
   ═══════════════════════════════════════════════════════════════ */

/* ── Competition selector strip ──────────────────────────────── */

.pitch-comp-selector {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--surface-raised, #F7F5F0);
  border-bottom: 1px solid var(--border-default, rgba(26,24,20,0.08));
}
.pitch-comp-selector::-webkit-scrollbar { display: none; }

.pcs-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--border-default, rgba(26,24,20,0.10));
  background: var(--surface-float, #fff);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-secondary, #3D3A33);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.pcs-pill:hover {
  border-color: var(--brand, #2D5A3D);
  background: var(--brand-surface, #EBF2ED);
  transform: translateY(-1px);
}
.pcs-pill:active { transform: scale(0.97); }

.pcs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pcs-label {
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
}

/* ── Pitch Home — Today's Fixtures ──────────────────────────── */

.pitch-home {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--surface-base, #EFECE6);
  -webkit-overflow-scrolling: touch;
}

/* Date navigation bar */
.phm-date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 16px 12px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-base, #EFECE6);
}
.phm-date-label {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary, #1A1814);
  letter-spacing: 0.2px;
  min-width: 180px;
  text-align: center;
}
.phm-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-default, rgba(26,24,20,0.12));
  background: var(--surface-raised, #F7F5F0);
  color: var(--text-primary, #1A1814);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.phm-arrow:hover:not(:disabled) {
  background: var(--surface-float, #FFFFFF);
  border-color: var(--text-muted, #6B6760);
}
.phm-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Fixture groups container */
.phm-fixtures {
  padding: 0 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Competition group */
.phm-group {
  background: var(--surface-raised, #F7F5F0);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-default, rgba(26,24,20,0.06));
}

/* Competition header — clickable */
.phm-comp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-left: 3px solid #666;
  cursor: pointer;
  transition: background 0.12s ease;
}
.phm-comp-header:hover {
  background: var(--surface-hover, rgba(26,24,20,0.04));
}
.phm-comp-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 6px;
}
.phm-comp-name {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary, #3D3A33);
  flex: 1;
}
.phm-comp-arrow {
  font-size: 14px;
  color: var(--text-muted, #6B6760);
  transition: transform 0.12s;
}
.phm-comp-header:hover .phm-comp-arrow {
  transform: translateX(2px);
}

/* Individual fixture row */
.phm-fixture {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--border-default, rgba(26,24,20,0.06));
  cursor: pointer;
  transition: background 0.1s;
  gap: 8px;
}
.phm-fixture:hover {
  background: var(--surface-hover, rgba(26,24,20,0.03));
}

.phm-team {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.phm-home { justify-content: flex-end; text-align: right; }
.phm-away { justify-content: flex-start; text-align: left; }

.phm-name {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #1A1814);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phm-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Centre column: score / kickoff time */
.phm-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  flex-shrink: 0;
}
.phm-score {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #1A1814);
  letter-spacing: 1px;
}
.phm-score.phm-live {
  color: var(--colour-live, #1D7A40);
}
.phm-kickoff {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 12px;
  color: var(--text-muted, #6B6760);
}
.phm-status-live {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--colour-live, #1D7A40);
  animation: pulseLiveBadge 1.5s infinite;
}
.phm-status-ft {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint, #9B9890);
}

.phm-empty {
  padding: 40px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted, #6B6760);
  font-style: italic;
}

/* ── Competition pill strip ─────────────────────────────────── */

.phm-strip {
  display: flex;
  gap: 4px;
  padding: 0 12px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.phm-strip::-webkit-scrollbar { display: none; }

.phm-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--border-default, rgba(26,24,20,0.10));
  border-radius: 12px;
  background: var(--surface-raised, #F7F5F0);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.12s ease;
}
.phm-pill:hover {
  border-color: var(--text-faint, #9B9890);
  background: var(--surface-float, #FFFFFF);
}
.phm-pill:active { transform: scale(0.97); }

.phm-pill-active {
  border-color: var(--brand, #2D5A3D);
  background: var(--brand-surface, #EBF2ED);
}

.phm-pill-dim {
  opacity: 0.45;
}

.phm-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.phm-pill-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--colour-live, #1D7A40);
  flex-shrink: 0;
  animation: pulseLiveBadge 1.5s infinite;
}
.phm-pill-label {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #3D3A33);
  white-space: nowrap;
}

/* Main body area (switches between fixtures and feed) */
.phm-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Live event feed ───────────────────────────────────────── */

.phm-feed {
  padding: 0 12px 20px;
}

/* Filter header row */
.phm-feed-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.1s;
  position: relative;
}
.phm-feed-filter:hover {
  background: var(--surface-hover, rgba(26,24,20,0.04));
}
.phm-feed-filter-label {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #6B6760);
}
.phm-feed-filter-arrow {
  font-size: 12px;
  color: var(--text-faint, #9B9890);
  transition: transform 0.12s;
}
.phm-feed-filter:hover .phm-feed-filter-arrow {
  transform: translateX(1px);
}

/* Filter dropdown */
.phm-filter-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--surface-float, #FFFFFF);
  border: 1px solid var(--border-default, rgba(26,24,20,0.10));
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  padding: 4px 0;
  max-height: 320px;
  overflow-y: auto;
}
.phm-fd-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.08s;
}
.phm-fd-option:hover {
  background: var(--surface-hover, rgba(26,24,20,0.04));
}
.phm-fd-check {
  width: 16px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  flex-shrink: 0;
  color: var(--brand, #2D5A3D);
}
.phm-fd-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.phm-fd-name {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 13px;
  color: var(--text-primary, #1A1814);
}
.phm-fd-all .phm-fd-name {
  font-weight: 500;
}
.phm-fd-divider {
  height: 1px;
  background: var(--border-default, rgba(26,24,20,0.06));
  margin: 2px 12px;
}

/* Event rows */
.phm-feed-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.phm-feed-event {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-raised, #F7F5F0);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}
.phm-feed-event:hover {
  background: var(--surface-float, #FFFFFF);
}
.phm-fe-accent {
  width: 3px;
  height: 24px;
  border-radius: 2px;
  flex-shrink: 0;
}
.phm-fe-min {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 11px;
  color: var(--text-muted, #6B6760);
  min-width: 24px;
  flex-shrink: 0;
}
.phm-fe-badge {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.phm-fe-player {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #1A1814);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phm-fe-match {
  font-size: 11px;
  color: var(--text-faint, #9B9890);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.phm-fe-score {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary, #3D3A33);
  flex-shrink: 0;
}

.phm-feed-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted, #6B6760);
  font-style: italic;
  line-height: 1.5;
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .phm-date-label { font-size: 16px; min-width: 140px; }
  .phm-name { font-size: 12px; }
  .phm-logo { width: 18px; height: 18px; }
  .phm-score { font-size: 13px; }
  .phm-fixture { padding: 8px 10px; }
  .phm-comp-header { padding: 8px 10px; }
  .phm-comp-name { font-size: 11px; }
  .phm-pill { padding: 3px 6px; }
  .phm-pill-label { font-size: 9px; }
  .phm-fe-player { font-size: 12px; }
  .phm-fe-match { font-size: 10px; }
}

/* ── Pitch Scores/Live tab selector ────────────────────────── */

.phm-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-default, rgba(26,24,20,0.10));
  padding: 0 12px;
  gap: 0;
  flex-shrink: 0;
}
.phm-tab {
  position: relative;
  padding: 8px 16px 8px 0;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #6B6760);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s;
}
.phm-tab-active {
  color: var(--text-primary, #1A1814);
}
.phm-tab-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 16px;
  height: 2px;
  background: var(--brand, #2D5A3D);
  border-radius: 2px 2px 0 0;
}
.phm-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--colour-live, #1D7A40);
  flex-shrink: 0;
  animation: pulseLiveBadge 1.5s infinite;
}

/* Competition filter pills strip */
.phm-comp-filter-strip {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-default, rgba(26,24,20,0.06));
}
.phm-comp-filter-strip::-webkit-scrollbar { display: none; }

/* ── Major / All event mode toggle ─────────────────────────── */

.phm-mode-toggle {
  display: flex;
  gap: 0;
  padding: 8px 12px 4px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-raised, #F7F5F0);
}
.phm-mode-btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono, 'DM Mono', monospace);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #6B6760);
  background: var(--surface-raised, #F7F5F0);
  border: 1px solid var(--border-default, rgba(26,24,20,0.10));
  cursor: pointer;
  transition: all 0.12s;
}
.phm-mode-btn:first-child { border-radius: 6px 0 0 6px; }
.phm-mode-btn:last-child  { border-radius: 0 6px 6px 0; border-left: none; }
.phm-mode-btn.active {
  background: var(--brand-surface, #EBF2ED);
  border-color: var(--brand, #2D5A3D);
  color: var(--brand, #2D5A3D);
}

/* ── Live event tiles ──────────────────────────────────────── */

.phm-live-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 12px 20px;
}

.phm-event-tile {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--surface-raised, #F7F5F0);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.1s;
}
.phm-event-tile:hover { background: var(--surface-float, #FFFFFF); }
.phm-et-secondary { opacity: 0.72; }

.phm-et-accent {
  width: 3px;
  flex-shrink: 0;
}
.phm-et-body {
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.phm-et-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.phm-et-min {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 11px;
  color: var(--text-muted, #6B6760);
  min-width: 26px;
  flex-shrink: 0;
}
.phm-et-badge {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.phm-et-comp-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted, #6B6760);
  flex-shrink: 0;
}
.phm-et-dash {
  color: var(--text-faint, #9B9890);
  font-size: 11px;
  flex-shrink: 0;
}
.phm-et-player {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #1A1814);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.phm-et-score {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #3D3A33);
  flex-shrink: 0;
}
.phm-et-score-bold {
  font-weight: 700;
  color: var(--text-primary, #1A1814);
}
.phm-et-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
}
.phm-et-match {
  font-size: 11px;
  color: var(--text-faint, #9B9890);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phm-et-subline {
  font-size: 11px;
  color: var(--text-muted, #6B6760);
  white-space: nowrap;
}
.phm-et-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  flex-shrink: 0;
}
.phm-et-reactions {
  display: flex;
  align-items: center;
  gap: 3px;
}
.phm-et-reaction {
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(26,24,20,0.06);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: background 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}
.phm-et-reaction:hover { background: rgba(26,24,20,0.12); }
.phm-et-reaction-mine {
  background: rgba(212,120,44,0.12);
  border-color: rgba(212,120,44,0.3);
}
.phm-et-react-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted, #6B6760);
  line-height: 1;
}
.phm-et-react-add {
  font-size: 15px;
  color: var(--text-faint, #9B9890);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 10px;
  transition: color 0.1s, background 0.1s;
}
.phm-et-react-add:hover { color: var(--text-muted, #6B6760); background: rgba(26,24,20,0.05); }
.phm-et-thread {
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-faint, #9B9890);
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: color 0.1s;
}
.phm-et-thread:hover { color: var(--text-muted, #6B6760); }
.phm-et-thread-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent, #D4782C);
  line-height: 1;
}

/* ── Event tile emoji fan-out ──────────────────────────────── */
.et-emoji-fanout {
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-subtle, #E5E2DB);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.et-fanout-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(26,24,20,0.04);
  cursor: pointer;
  transition: background 0.1s, transform 0.1s;
}
.et-fanout-btn:hover { background: rgba(26,24,20,0.1); transform: scale(1.08); }
.et-fanout-btn:active { transform: scale(0.95); }
.et-fanout-mine { border-color: rgba(212,120,44,0.3); background: rgba(212,120,44,0.1); }
.et-fanout-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #6B6760);
}
.et-fanout-more {
  font-size: 16px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px dashed var(--border-subtle, #ccc);
  background: none;
  color: var(--text-faint, #9B9890);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.et-fanout-more:hover { background: rgba(26,24,20,0.06); color: var(--text-muted, #6B6760); }

/* ── Match state markers in Live tab ────────────────────────── */

.phm-match-markers {
  padding: 4px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.phm-match-marker {
  font-size: 11px;
  font-family: var(--font-mono, 'DM Mono', monospace);
  color: var(--text-muted, #6B6760);
  padding: 4px 8px;
  background: rgba(26,24,20,0.04);
  border-radius: 4px;
}
.phm-mm-ht { border-left: 2px solid var(--colour-live, #1D7A40); }
.phm-mm-ft { border-left: 2px solid var(--text-faint, #9B9890); }

/* ── Pitch Hub container ─────────────────────────────────────── */

.pitch-hub {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--surface-base, #EFECE6);
}

.ph-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-raised, #F7F5F0);
  border-bottom: 1px solid var(--border-default, rgba(26,24,20,0.08));
}
.ph-back {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-text, #2D5A3D);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  white-space: nowrap;
}
.ph-back:hover { text-decoration: underline; }

.ph-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ph-comp-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.ph-comp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ph-comp-name {
  font-family: var(--font-serif, 'DM Serif Display', Georgia, serif);
  font-size: 18px;
  color: var(--text-primary, #1A1814);
  font-weight: 400;
}

/* ── Hub tabs ────────────────────────────────────────────────── */

.ph-tabs {
  display: flex;
  gap: 0;
  padding: 0 14px;
  background: var(--surface-raised, #F7F5F0);
  border-bottom: 2px solid var(--border-default, rgba(26,24,20,0.08));
  overflow-x: auto;
  scrollbar-width: none;
}
.ph-tabs::-webkit-scrollbar { display: none; }

.ph-tab {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #6B6760);
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.ph-tab:hover { color: var(--text-primary, #1A1814); }
.ph-tab-active {
  color: var(--brand-text, #2D5A3D);
  border-bottom-color: var(--brand, #2D5A3D);
  font-weight: 600;
}

/* ── Hub body ────────────────────────────────────────────────── */

.ph-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 24px;
}

.ph-loading {
  text-align: center;
  padding: 32px 0;
  color: var(--text-muted, #6B6760);
  font-size: 13px;
  font-family: var(--font-mono, monospace);
}
.ph-empty {
  text-align: center;
  padding: 32px 0;
  color: var(--text-muted, #6B6760);
  font-size: 14px;
}
.ph-error {
  text-align: center;
  padding: 24px 0;
  color: var(--colour-danger, #C0392B);
  font-size: 13px;
}

/* ── Sections ────────────────────────────────────────────────── */

.ph-section {
  margin-bottom: 20px;
}
.ph-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ph-section-title {
  font-family: var(--font-serif, 'DM Serif Display', Georgia, serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-primary, #1A1814);
  margin: 0;
}
.ph-section-more {
  font-size: 12px;
  color: var(--brand-text, #2D5A3D);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
}
.ph-section-more:hover { text-decoration: underline; }

/* ── Play CTAs ───────────────────────────────────────────────── */
.ph-play-btns {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 4px 0;
}
.ph-play-btn {
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ph-play-btn:hover {
  background: var(--brand-bg, #e8f0eb);
  border-color: var(--brand-text, #2D5A3D);
}

/* ── Pitch play split buttons ────────────────────────────────────────── */
.ph-play-row {
  display: flex;
  gap: 0;
}
.ph-play-row .ph-play-btn {
  flex: 0 0 auto;
  border-radius: 8px 0 0 8px;
  margin-bottom: 0;
}
.ph-play-btn-secondary {
  flex: 0 0 42px;
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 8px 8px 0;
  background: var(--white);
  color: var(--ink-muted);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.ph-play-btn-secondary:hover {
  background: var(--meg-green);
  color: var(--white);
}

/* ── Table ───────────────────────────────────────────────────── */

.ph-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  background: var(--surface-float, #fff);
  border: 1px solid var(--border-default, rgba(26,24,20,0.08));
}
.ph-table-mini { border-radius: 6px; }

.ph-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ph-thead-row {
  background: var(--surface-sink, #E6E3DB);
}
.ph-th {
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #6B6760);
  white-space: nowrap;
}
.ph-th-num { text-align: center; }
.ph-th-team { text-align: left; }

.ph-tr {
  border-bottom: 1px solid var(--border-default, rgba(26,24,20,0.04));
  transition: background 0.1s;
}
.ph-tr:last-child { border-bottom: none; }
.ph-tr:hover { background: var(--surface-hover, rgba(26,24,20,0.02)); }

.ph-td {
  padding: 7px 8px;
  color: var(--text-primary, #1A1814);
  vertical-align: middle;
}
.ph-td-rank {
  width: 28px;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted, #6B6760);
}
.ph-td-team {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 120px;
}
.ph-team-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
.ph-team-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.ph-td-num {
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  min-width: 24px;
}
.ph-td-gd {
  font-weight: 500;
}
.ph-td-pts {
  font-weight: 700;
  color: var(--text-primary, #1A1814);
}
.ph-td-stat {
  font-weight: 700;
  color: var(--brand-text, #2D5A3D);
  font-size: 14px;
}

/* Table zones */
.ph-zone-ucl .ph-td-rank { color: #001489; border-left: 3px solid #001489; }
.ph-zone-uel .ph-td-rank { color: #f26522; border-left: 3px solid #f26522; }
.ph-zone-ecl .ph-td-rank { color: #003d29; border-left: 3px solid #003d29; }
.ph-zone-rel .ph-td-rank { color: var(--colour-danger, #C0392B); border-left: 3px solid var(--colour-danger, #C0392B); }
.ph-zone-playoff .ph-td-rank { color: var(--colour-amber-cta, #C87800); border-left: 3px solid var(--colour-amber-cta, #C87800); }

/* Table separator row */
.ph-tr-sep { background: none; }
.ph-sep-line {
  text-align: center;
  padding: 4px 0;
  color: var(--text-faint, #9B9890);
  font-size: 12px;
  letter-spacing: 3px;
  border: none;
}

/* Form dots */
.ph-td-form { white-space: nowrap; }
.ph-form-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  margin: 0 1px;
}
.ph-form-w { background: var(--brand, #2D5A3D); }
.ph-form-d { background: var(--colour-amber-cta, #C87800); }
.ph-form-l { background: var(--colour-danger, #C0392B); }

/* ── Table toggles ───────────────────────────────────────────── */

.ph-table-toggles {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.ph-toggle {
  padding: 5px 12px;
  border-radius: 16px;
  border: 1.5px solid var(--border-default, rgba(26,24,20,0.10));
  background: var(--surface-float, #fff);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #3D3A33);
  cursor: pointer;
  transition: all 0.15s;
}
.ph-toggle:hover { border-color: var(--brand, #2D5A3D); }
.ph-toggle-active {
  background: var(--brand, #2D5A3D);
  color: var(--text-on-brand, #F7F5F0);
  border-color: var(--brand, #2D5A3D);
}

/* ── Player stats ────────────────────────────────────────────── */

.ph-td-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
}
.ph-player-photo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-sink, #E6E3DB);
}
.ph-player-photo-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-sink, #E6E3DB);
  flex-shrink: 0;
}
.ph-player-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.ph-player-name {
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-player-team {
  font-size: 11px;
  color: var(--text-muted, #6B6760);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mini scorers list (overview tab) */
.ph-mini-scorers { display: flex; flex-direction: column; gap: 0; }
.ph-mini-scorer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface-float, #fff);
  border-bottom: 1px solid var(--border-default, rgba(26,24,20,0.04));
  border-radius: 0;
}
.ph-mini-scorer:first-child { border-radius: 8px 8px 0 0; }
.ph-mini-scorer:last-child { border-radius: 0 0 8px 8px; border-bottom: none; }
.ph-mini-scorer:only-child { border-radius: 8px; }

.ph-ms-rank {
  width: 20px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #6B6760);
}
.ph-ms-photo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-sink, #E6E3DB);
}
.ph-ms-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ph-ms-stat {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text, #2D5A3D);
  font-family: var(--font-mono, monospace);
}

/* ── Fixture list ────────────────────────────────────────────── */

.ph-fixture-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-float, #fff);
  border: 1px solid var(--border-default, rgba(26,24,20,0.08));
}
.ph-fixture-row {
  display: flex;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-default, rgba(26,24,20,0.04));
  transition: background 0.1s;
}
.ph-fixture-row:last-child { border-bottom: none; }
.ph-fixture-row:hover { background: var(--surface-hover, rgba(26,24,20,0.02)); }

.ph-fx-teams {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
}
.ph-fx-team {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.ph-fx-home { justify-content: flex-end; text-align: right; }
.ph-fx-away { justify-content: flex-start; text-align: left; }

.ph-fx-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}
.ph-fx-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #1A1814);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ph-fx-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 60px;
  flex-shrink: 0;
}
.ph-fx-score {
  font-family: var(--font-mono, monospace);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #1A1814);
  letter-spacing: 1px;
}
.ph-fx-live {
  color: var(--colour-live, #1D7A40);
}
.ph-fx-time {
  font-size: 11px;
  color: var(--text-muted, #6B6760);
  text-align: center;
  line-height: 1.3;
}

.ph-fx-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ph-fx-badge-live {
  background: var(--colour-live, #1D7A40);
  color: #fff;
  animation: pulseLiveBadge 1.5s infinite;
}
.ph-fx-badge-ft {
  background: var(--surface-sink, #E6E3DB);
  color: var(--text-muted, #6B6760);
}

/* Lightning draft badge on fixtures */
.ph-fx-draft-badge {
  font-size: 12px;
  margin-left: 4px;
  animation: pulse-glow 2s infinite;
}
.ph-fx-has-draft {
  cursor: pointer;
  border-left: 2px solid var(--meg-green);
}
@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes pulseLiveBadge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ── Round navigation ────────────────────────────────────────── */

.ph-round-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}
.ph-round-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border-default, rgba(26,24,20,0.12));
  background: var(--surface-float, #fff);
  color: var(--text-primary, #1A1814);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.ph-round-btn:hover:not(:disabled) {
  border-color: var(--brand, #2D5A3D);
  background: var(--brand-surface, #EBF2ED);
}
.ph-round-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.ph-round-label {
  font-family: var(--font-serif, 'DM Serif Display', Georgia, serif);
  font-size: 15px;
  color: var(--text-primary, #1A1814);
  min-width: 120px;
  text-align: center;
}

/* ── H2H section ─────────────────────────────────────────────── */

.ph-h2h-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-float, #fff);
  border: 1px solid var(--border-default, rgba(26,24,20,0.08));
}
.ph-h2h-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  border-bottom: 1px solid var(--border-default, rgba(26,24,20,0.04));
}
.ph-h2h-row:last-child { border-bottom: none; }
.ph-h2h-date {
  width: 80px;
  flex-shrink: 0;
  color: var(--text-muted, #6B6760);
  font-size: 11px;
}
.ph-h2h-home {
  flex: 1;
  text-align: right;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-h2h-score {
  min-width: 40px;
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
}
.ph-h2h-away {
  flex: 1;
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-h2h-comp {
  width: 30px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint, #9B9890);
}

/* ── Visual lineups ──────────────────────────────────────────── */

.ph-lineups {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 8px;
  overflow: hidden;
}

.ph-lineup-team {
  background: var(--brand, #2D5A3D);
  padding: 12px 8px;
}
.ph-lineup-home { border-radius: 8px 8px 0 0; }
.ph-lineup-away {
  border-radius: 0 0 8px 8px;
  background: var(--text-primary, #1A1814);
}

.ph-lineup-header {
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ph-lineup-formation {
  font-family: var(--font-mono, monospace);
  color: rgba(255,255,255,0.5);
  font-weight: 400;
}

.ph-lineup-pitch {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0;
}
.ph-lineup-away .ph-lineup-pitch {
  flex-direction: column-reverse;
}

.ph-lineup-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ph-lineup-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 56px;
  position: relative;
}
.ph-lineup-player.ph-lu-subbed .ph-lu-photo,
.ph-lineup-player.ph-lu-subbed .ph-lu-num-circle,
.ph-lineup-player.ph-lu-subbed .ph-lu-num-fallback {
  opacity: 0.4;
  filter: grayscale(60%);
}
.ph-lineup-player.ph-lu-subbed .ph-lineup-name {
  opacity: 0.55;
}

/* ── Player avatar ── */
.ph-lu-avatar {
  position: relative;
  width: 38px;
  height: 38px;
}
.ph-lu-photo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.6);
}
.ph-lu-num-circle,
.ph-lu-num-fallback {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.3);
}

/* ── Shirt number badge (bottom-left) ── */
.ph-lu-shirt {
  position: absolute;
  bottom: -2px;
  left: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* ── Rating badge (bottom-right) ── */
.ph-lu-rating {
  position: absolute;
  bottom: -2px;
  right: -4px;
  min-width: 20px;
  height: 16px;
  border-radius: 8px;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}
.ph-lu-rat-good { background: #16a34a; }
.ph-lu-rat-avg  { background: #d97706; }
.ph-lu-rat-poor { background: #dc2626; }

/* ── Event icons (overlaid top-right of avatar) — stacked with overlap ── */
.ph-lu-events {
  position: absolute;
  top: -6px;
  right: -8px;
  font-size: 9px;
  line-height: 1;
  display: flex;
  z-index: 2;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
  padding: 2px 3px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ph-lu-ev-icon {
  display: inline-block;
  font-size: 9px;
  line-height: 1;
  transition: margin 0.2s ease;
}
/* Stacked: overlapping emoji */
.ph-lu-ev-stacked .ph-lu-ev-icon + .ph-lu-ev-icon {
  margin-left: -6px;
}
/* Spread: click to fan out */
.ph-lu-ev-stacked.ph-lu-ev-spread .ph-lu-ev-icon + .ph-lu-ev-icon {
  margin-left: 1px;
}
.ph-lu-ev-stacked.ph-lu-ev-spread {
  background: rgba(0,0,0,0.8);
  padding: 2px 4px;
}

/* ── Sub minute badge (top-left, replaces old 🔄) ── */
.ph-lu-sub-min {
  position: absolute;
  top: -4px;
  left: -6px;
  min-width: 18px;
  height: 14px;
  border-radius: 7px;
  background: rgba(220,38,38,0.85);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  z-index: 3;
}
.ph-lu-sub-min-sm {
  top: -3px;
  left: -5px;
  min-width: 16px;
  height: 12px;
  font-size: 7px;
  border-radius: 6px;
}
/* Sub-on badge (bench): green to distinguish from sub-off (red) */
.ph-lu-bench-player .ph-lu-sub-min {
  background: rgba(22,163,74,0.85);
}

/* ── Player name ── */
.ph-lineup-name {
  font-size: 9px;
  color: rgba(255,255,255,0.85);
  text-align: center;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Subs bench ── */
.ph-lu-bench {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 10px;
  padding-top: 8px;
}
.ph-lu-bench-label {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-align: center;
}
.ph-lu-bench-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ph-lu-bench-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0.5;
  cursor: pointer;
  position: relative;
}
.ph-lu-bench-player.ph-lu-bench-used {
  opacity: 1;
}
.ph-lu-bench-player.ph-lu-bench-used .ph-lu-num-circle,
.ph-lu-bench-player.ph-lu-bench-used .ph-lu-num-fallback,
.ph-lu-bench-player.ph-lu-bench-used .ph-lu-photo {
  box-shadow: 0 0 0 2px #16a34a;
}

/* ── Position tag above bench player avatar ── */
.ph-lu-pos-tag {
  font-size: 7px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
  margin-bottom: -1px;
}
.ph-lu-bench-used .ph-lu-pos-tag {
  color: rgba(255,255,255,0.8);
}

/* ── Shirt number badge for bench (smaller variant) ── */
.ph-lu-shirt-sm {
  bottom: -1px;
  left: -3px;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  font-size: 7px;
  padding: 0 2px;
}
.ph-lu-avatar-sm {
  width: 26px;
  height: 26px;
}
.ph-lu-photo.ph-lu-photo-sm {
  width: 26px;
  height: 26px;
}
.ph-lu-num-circle.ph-lu-num-sm,
.ph-lu-num-fallback.ph-lu-num-sm {
  width: 26px;
  height: 26px;
  font-size: 10px;
}
.ph-lu-bench-name {
  font-size: 8px;
  color: rgba(255,255,255,0.7);
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.ph-lu-bench-player .ph-lu-events {
  font-size: 7px;
  top: -4px;
  right: -6px;
  padding: 1px 2px;
}
.ph-lu-bench-player .ph-lu-ev-icon {
  font-size: 7px;
}
.ph-lu-bench-player .ph-lu-ev-stacked .ph-lu-ev-icon + .ph-lu-ev-icon {
  margin-left: -5px;
}
.ph-lu-bench-player .ph-lu-ev-stacked.ph-lu-ev-spread .ph-lu-ev-icon + .ph-lu-ev-icon {
  margin-left: 1px;
}

/* ── Expanded state (clicked card) ── */
.ph-lineup-player {
  cursor: pointer;
}
.ph-lineup-player.ph-lu-expanded,
.ph-lu-bench-player.ph-lu-expanded {
  z-index: 5;
}

/* ── Dugout Live Feed ────────────────────────────────────────────────── */
.dugout-live-feed {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.dlf-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 12px;
  flex-shrink: 0;
}
.dlf-tab {
  flex: 1;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-align: center;
}
.dlf-tab:hover { color: var(--ink); }
.dlf-tab-active {
  color: var(--meg-green);
  border-bottom-color: var(--meg-green);
}

.dlf-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  -webkit-overflow-scrolling: touch;
}

.dlf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}
.dlf-empty-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.4; }
.dlf-empty-text { font-size: 13px; color: var(--ink-faint); }

/* ═══════════════════════════════════════════════════════════════════════════
   Dugout Live Feed v2 — Event Pills, Player Rankings, Standings
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Event Pills ── */
.dlf-event-list { display: flex; flex-direction: column; gap: 4px; }

.dlf-event-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  font-size: 13px;
}
.dlf-event-pill.dlf-event-user {
  background: rgba(45, 90, 61, 0.06);
  border-left: 3px solid var(--meg-green);
}
.dlf-ep-min {
  font-size: 12px;
  color: var(--ink-muted);
  min-width: 28px;
  flex-shrink: 0;
}
.dlf-ep-emoji { font-size: 16px; flex-shrink: 0; }
.dlf-ep-player {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.dlf-ep-team {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.dlf-ep-desc {
  font-size: 11px;
  color: var(--ink-muted);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dlf-ep-pts {
  font-weight: 700;
  font-size: 12px;
  min-width: 50px;
  text-align: right;
  flex-shrink: 0;
}
.dlf-pts-pos { color: var(--colour-danger, #dc3545); }
.dlf-pts-neg { color: var(--meg-green); }

/* ── Summary Pills (HT / FT) ── */
.dlf-summary-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  margin: 6px 0;
  background: var(--white);
  border: 1px solid var(--border);
}
.dlf-summary-ht { border-left: 3px solid #D4A017; }
.dlf-summary-ft { border-left: 3px solid var(--ink); }
.dlf-sp-left { flex: 1; }
.dlf-sp-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #D4A017;
  margin-bottom: 2px;
}
.dlf-summary-ft .dlf-sp-label { color: var(--ink); }
.dlf-sp-score {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.dlf-sp-right { text-align: right; }
.dlf-sp-pts {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ── Player Rankings v2 ── */
.dlf-players-comp-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.dlf-players-comp-section:last-child { border-bottom: none; }
.dlf-players-comp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 8px;
  gap: 6px;
}
.dlf-comp-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}
.dlf-players-comp-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
}
/* Sort arrow — Excel-style column sort toggle */
.dlf-sort-arrow {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--bg-subtle, #f5f5f0);
  color: var(--ink-muted);
  transition: all 0.15s;
  font-family: var(--font-sans);
}
.dlf-sort-arrow:hover {
  background: var(--white);
  border-color: var(--ink-muted);
}
.dlf-sort-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.dlf-sort-icon {
  font-size: 10px;
  line-height: 1;
}

.dlf-player-list { display: flex; flex-direction: column; gap: 2px; }
.dlf-player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
}
.dlf-player-row:nth-child(odd) { background: rgba(0,0,0,0.02); }
.dlf-player-rank {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-muted);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.dlf-player-pos {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.dlf-player-info { flex: 1; min-width: 0; }
.dlf-player-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dlf-player-team { font-size: 11px; color: var(--ink-muted); }
.dlf-player-rating {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-muted);
  background: var(--bg-subtle, #f5f5f0);
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.dlf-player-score {
  font-size: 14px;
  font-weight: 700;
  min-width: 36px;
  text-align: right;
  flex-shrink: 0;
}
.dlf-score-pos { color: var(--meg-green); }
.dlf-score-neg { color: var(--colour-danger, #dc3545); }

.dlf-players-expand {
  text-align: center;
  padding: 8px;
  color: var(--meg-green);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.dlf-players-expand:hover { text-decoration: underline; }

/* ── Standings v2 ── */
.dlf-standings-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.dlf-standings-box-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.dlf-standings-comp-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
}
.dlf-standings-game-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 3px;
  color: #fff;
}
.dlf-gt-pred { background: #D4A017; }
.dlf-gt-ts { background: var(--meg-green); }

.dlf-standings-list { display: flex; flex-direction: column; gap: 2px; }
.dlf-standings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
}
.dlf-standings-me {
  background: rgba(45, 90, 61, 0.06);
  border: 1px solid rgba(45, 90, 61, 0.15);
  border-radius: 6px;
}
.dlf-standings-separator {
  text-align: center;
  color: var(--ink-muted);
  font-size: 14px;
  padding: 2px 0;
  letter-spacing: 3px;
}
.dlf-standings-rank { font-size: 13px; font-weight: 700; color: var(--ink-muted); width: 22px; text-align: center; }
.dlf-standings-name { font-size: 13px; color: var(--ink); flex: 1; }
.dlf-standings-score { font-size: 13px; font-weight: 700; color: var(--meg-green); }

/* Standings live/due badges */
.dlf-standings-live-badge {
  font-size: 9px;
  font-weight: 700;
  color: var(--colour-danger, #dc3545);
  animation: dugoutPulse 1.5s ease-in-out infinite;
}
.dlf-standings-due-badge {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
.dlf-standings-final {
  color: var(--meg-green);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════ */
/* Dugout Page Rebuild — Your Games, Competition Strips, Rolling Quiz   */
/* ════════════════════════════════════════════════════════════════════ */

/* ── Your Games strip (horizontal scrollable chips) ────── */
.dug-your-games {
  padding: 12px 16px;
  background: var(--brand-surface);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}

.dug-your-games-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: block;
}

.dug-yg-row {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.dug-yg-row::-webkit-scrollbar { display: none; }

.dug-yg-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.dug-yg-chip:hover {
  background: var(--surface-float);
  border-color: var(--border);
}

.dug-yg-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.dug-yg-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.dug-yg-status {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.dug-yg-status.live {
  background: rgba(76, 175, 80, 0.15);
  color: var(--colour-live);
}

.dug-yg-status.open {
  background: var(--brand-surface);
  color: var(--brand);
}

/* ── Section headers ────── */
.dug-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 10px;
}

.dug-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
}

.dug-section-meta {
  font-size: 11px;
  color: var(--text-faint);
}

/* ── Competition strips (core component) ────── */
.dug-comp-strip {
  margin: 0 12px 8px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s;
}

.dug-comp-strip.is-live {
  border-left: 3px solid var(--colour-live-dot);
}

.dug-comp-strip.is-open {
  border-left: 3px solid var(--brand);
}

.dug-cs-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 0;
}

.dug-cs-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  flex-shrink: 0;
}

.dug-cs-badge.pl { background: var(--comp-pl); }
.dug-cs-badge.ucl { background: var(--comp-ucl); }
.dug-cs-badge.ch { background: var(--comp-ch); }
.dug-cs-badge.spl { background: var(--comp-spl); }
.dug-cs-badge.fac { background: var(--comp-fac); }
.dug-cs-badge.lc { background: var(--comp-lc); }
.dug-cs-badge.uel { background: var(--comp-uel); }
.dug-cs-badge.ecl { background: var(--comp-ecl); }
.dug-cs-badge.l1 { background: var(--comp-l1); }
.dug-cs-badge.l2 { background: var(--comp-l2, #666); }

.dug-cs-round {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.dug-cs-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.dug-cs-status {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.dug-cs-status .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dug-cs-status.live {
  color: var(--colour-live);
  background: rgba(76, 175, 80, 0.15);
}

.dug-cs-status.live .dot {
  background: var(--colour-live-dot);
}

.dug-cs-status.open {
  color: var(--brand);
  background: var(--brand-surface);
}

.dug-cs-status.open .dot {
  background: var(--brand);
}

.dug-cs-status.upcoming {
  color: var(--colour-amber);
  background: var(--colour-amber-bg);
}

.dug-cs-status.upcoming .dot {
  background: var(--colour-amber);
}

.dug-cs-status.done {
  color: var(--text-faint);
  background: var(--surface-sink);
}

.dug-cs-status.done .dot {
  background: var(--text-faint);
}

.dug-cs-detail {
  padding: 4px 16px 0;
  font-size: 12px;
  color: var(--text-muted);
}

.dug-cs-buttons {
  display: flex;
  gap: 6px;
  padding: 12px 16px 14px;
}

.dug-cs-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 0;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.dug-cs-btn:active {
  transform: scale(0.97);
}

.dug-cs-btn.primary {
  background: var(--brand);
  color: var(--text-on-brand);
}

.dug-cs-btn.primary:hover {
  background: var(--brand-hover);
}

.dug-cs-btn.secondary {
  background: var(--surface-sink);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}

.dug-cs-btn.secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border);
}

.dug-cs-btn.live-btn {
  background: var(--colour-danger);
  color: #fff;
}

.dug-cs-btn.live-btn:hover {
  background: #c82333;
}

.dug-cs-btn-icon {
  font-size: 13px;
  flex-shrink: 0;
}

/* ── Rolling Quiz card ────── */
.dug-quiz-card {
  margin: 0 12px;
  padding: 16px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.dug-quiz-card:hover {
  background: var(--surface-float);
  border-color: var(--border);
}

.dug-quiz-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-surface);
  border-radius: var(--radius-sm);
  font-size: 22px;
}

.dug-quiz-info {
  flex: 1;
  min-width: 0;
}

.dug-quiz-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.dug-quiz-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.dug-quiz-cta {
  padding: 6px 12px;
  border: 1px solid var(--brand);
  background: transparent;
  color: var(--brand);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.dug-quiz-cta:hover {
  background: var(--brand-surface);
}

/* ── Play Anytime cards ────── */
.dug-anytime {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px;
}

.dug-at-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.dug-at-card:hover {
  background: var(--surface-float);
  border-color: var(--border);
}

.dug-at-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sink);
  border-radius: var(--radius-sm);
  font-size: 22px;
}

.dug-at-info {
  flex: 1;
  min-width: 0;
}

.dug-at-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.dug-at-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.dug-at-play {
  padding: 6px 12px;
  border: 1px solid var(--brand);
  background: transparent;
  color: var(--brand);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.dug-at-play:hover {
  background: var(--brand-surface);
}

/* ── Dividers and empty states ────── */
.dug-divider {
  margin: 0 16px;
  border-top: 1px solid var(--border);
}

.dug-empty {
  padding: 28px 16px;
  text-align: center;
}

.dug-empty-icon {
  font-size: 28px;
  opacity: 0.35;
  margin-bottom: 8px;
}

.dug-empty-text {
  font-size: 13px;
  color: var(--text-faint);
}

.dug-empty-sub {
  font-size: 12px;
  color: var(--text-faint);
  opacity: 0.7;
  margin-top: 4px;
}

/* ── Responsive ────── */
@media (max-width: 600px) {
  .dug-comp-strip {
    margin: 0 8px 6px;
  }

  .dug-cs-buttons {
    flex-wrap: wrap;
  }

  .dug-cs-btn {
    min-width: calc(50% - 3px);
  }

  .dug-quiz-card {
    margin: 0 8px;
  }

  .dug-anytime {
    padding: 0 8px;
  }

  .dug-at-card {
    padding: 12px 14px;
  }
}

/* ── Dugout idle section (always visible at top of Dugout feed) ────── */
.dugout-idle-section {
  padding: 0 0 8px;
}
.dugout-idle-section:empty { display: none; }
.dugout-idle-quiz {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  margin: 12px 14px;
  background: var(--white);
  border: 1.5px solid var(--meg-green);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.dugout-idle-quiz:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(45,90,61,0.12);
}
.dugout-idle-quiz:active { transform: scale(0.98); }
.diq-icon { font-size: 28px; flex-shrink: 0; }
.diq-content { flex: 1; min-width: 0; }
.diq-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-sans);
}
.diq-subtitle {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.diq-play {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--meg-green);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter 0.15s;
}
.diq-play:hover { filter: brightness(1.1); }

/* Countdown tile */
.dugout-idle-countdown {
  text-align: center;
  padding: 20px 18px;
  margin: 8px 14px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.dic-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.dic-time {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1px;
  line-height: 1.1;
}
.dic-match {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 6px;
}

/* No games today */
.dugout-idle-nogames {
  text-align: center;
  padding: 40px 18px;
  margin: 12px 14px;
}
.din-icon { font-size: 28px; opacity: 0.4; margin-bottom: 8px; }
.din-text { font-size: 13px; color: var(--ink-faint); }

/* Dock game panel tabs */
.dock-game-panel { padding: 0; }
.dgp-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.dgp-tab {
  flex: 1;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-align: center;
}
.dgp-tab-active {
  color: var(--meg-green);
  border-bottom-color: var(--meg-green);
}
.dgp-content { padding: 12px; }
.dgp-info-text {
  font-size: 13px;
  color: var(--ink-muted);
  cursor: pointer;
}
.dgp-info-text:hover { color: var(--ink); }

/* ── Mobile responsive ───────────────────────────────────────── */

@media (max-width: 480px) {
  .ph-team-name { max-width: 100px; font-size: 12px; }
  .ph-fx-name { font-size: 12px; }
  .ph-td-num { font-size: 11px; min-width: 18px; }
  .ph-th { font-size: 10px; padding: 4px 4px; }
  .ph-td { padding: 5px 4px; }
  .ph-player-name { font-size: 12px; }
  .ph-comp-name { font-size: 16px; }
  .pcs-pill { padding: 4px 8px; font-size: 10px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   LIVE DRAFT PICKER — Pitch + bottom-sheet rebuild (2026-04-08)
   Selectors prefixed .ldp- to keep them isolated from the legacy
   .draft-picker / .draft-player-* classes still used elsewhere.
   Mobile-first; desktop layout activates ≥720px.
   ───────────────────────────────────────────────────────────────────────── */

.ldp-root {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border, var(--line, #e6e1d6));
  position: relative;
  min-height: 540px;
}

/* ── Mode bar ─────────────────────────────────────────────────────────── */
.ldp-modebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e6e1d6);
  background: var(--paper);
  flex-wrap: wrap;
}
.ldp-toggle {
  display: inline-flex;
  background: var(--surface, #f0ebde);
  border-radius: 8px;
  padding: 2px;
}
.ldp-tog-btn {
  background: transparent;
  border: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--ink-muted);
  cursor: pointer;
  font-family: inherit;
}
.ldp-tog-btn.active {
  background: var(--paper);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.ldp-tally {
  display: inline-flex;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.ldp-tally strong { font-weight: 800; }
.ldp-progress {
  margin-left: auto;
  background: rgba(45, 90, 61, 0.1);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 10px;
  letter-spacing: 0.04em;
}

/* ── Body — pitch + sheet ─────────────────────────────────────────────── */
.ldp-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 360px;
}

/* Pitch canvas */
.ldp-pitch {
  flex: 1;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.06) 100%),
    repeating-linear-gradient(180deg, #2d6038 0 56px, #275533 56px 112px);
  position: relative;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  min-height: 320px;
}
.ldp-pitch::before {
  content: "";
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 2px solid rgba(255,255,255,0.32);
  border-radius: 4px;
  pointer-events: none;
}
.ldp-pitch::after {
  /* halfway line */
  content: "";
  position: absolute;
  left: 6px; right: 6px;
  top: 50%;
  border-top: 1.5px solid rgba(255,255,255,0.28);
  pointer-events: none;
}

.ldp-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  z-index: 2;
}

.ldp-slot {
  background: transparent;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  text-align: center;
  color: #fff;
  font-family: inherit;
  width: 64px;
}
.ldp-puck {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: #1a1a1a;
  font-size: 12px;
  font-weight: 800;
  margin: 0 auto;
  border: 2px solid rgba(0,0,0,0.2);
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ldp-puck.empty {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  border: 2px dashed rgba(255,255,255,0.55);
  font-size: 18px;
  font-weight: 400;
}
.ldp-slot:hover .ldp-puck { transform: scale(1.05); }
.ldp-slot.active .ldp-puck.empty,
.ldp-slot.active .ldp-puck {
  box-shadow: 0 0 0 4px rgba(240, 196, 25, 0.45);
  background: #fff8d6;
  color: #6b4f00;
  border-color: #f0c419;
}
.ldp-cap-badge {
  position: absolute;
  top: -3px; right: -3px;
  background: #f0c419;
  color: #1a1a1a;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
}
.ldp-slot-name {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ldp-slot-pos {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

/* ── Bottom sheet (mobile) ────────────────────────────────────────────── */
.ldp-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.ldp-scrim.open {
  opacity: 1;
  pointer-events: auto;
}

.ldp-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--paper);
  border-radius: 22px 22px 0 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  max-height: 75%;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
  transform: translateY(100%);
  transition: transform 0.22s ease;
  pointer-events: none;
}
.ldp-sheet.open {
  transform: translateY(0);
  pointer-events: auto;
}
.ldp-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border, #e6e1d6);
  border-radius: 2px;
  margin: 8px auto 4px;
  flex-shrink: 0;
}
.ldp-sheet-head {
  padding: 4px 16px 10px;
  border-bottom: 1px solid var(--border, #e6e1d6);
  flex-shrink: 0;
}
.ldp-sheet-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ldp-sheet-title-row h3 {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
  text-transform: capitalize;
}
.ldp-sheet-for {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: rgba(45, 90, 61, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 800;
}
.ldp-sheet-close {
  margin-left: auto;
  background: var(--surface, #f0ebde);
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--ink-muted);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ldp-pos-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ldp-pos-pill {
  background: var(--surface, #f0ebde);
  border: 0;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.ldp-pos-pill.active {
  background: var(--accent);
  color: #fff;
}
.ldp-pos-n {
  display: inline-block;
  background: rgba(0,0,0,0.08);
  padding: 0 5px;
  border-radius: 4px;
  margin-left: 4px;
  font-size: 10px;
}
.ldp-pos-pill.active .ldp-pos-n {
  background: rgba(255,255,255,0.25);
}
.ldp-sheet-body {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0 12px;
}
.ldp-sheet-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}

/* Player rows */
.ldp-prow {
  border-bottom: 1px solid var(--border-soft, var(--border, #f0ebde));
}
.ldp-prow-main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
}
.ldp-prow.taken { opacity: 0.45; cursor: default; }
.ldp-prow.taken .ldp-prow-main { cursor: default; }
.ldp-prow.limit { opacity: 0.55; }
.ldp-prow.limit .ldp-prow-main { cursor: not-allowed; }
.ldp-prow.expanded {
  background: rgba(45, 90, 61, 0.05);
  border-left: 3px solid var(--accent);
}
.ldp-prow.expanded .ldp-prow-main { padding-left: 13px; }
.ldp-prow-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface, #f0ebde);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  flex-shrink: 0;
  border: 2px solid var(--ink-muted);
}
.ldp-prow-info { flex: 1; min-width: 0; }
.ldp-prow-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.ldp-prow-meta {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.ldp-prow-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.ldp-prow-chev {
  font-size: 18px;
  color: var(--ink-muted);
}

/* Expanded row detail */
.ldp-prow-detail {
  padding: 4px 16px 14px 19px;
  background: rgba(45, 90, 61, 0.05);
  border-left: 3px solid var(--accent);
}
.ldp-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.ldp-stat {
  background: var(--paper);
  padding: 7px 4px;
  border-radius: 6px;
  text-align: center;
  border: 1px solid var(--border-soft, var(--border, #f0ebde));
}
.ldp-stat .v {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.ldp-stat .l {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.ldp-detail-note {
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 10px;
  padding: 6px 10px;
  background: var(--paper);
  border-radius: 6px;
}
.ldp-detail-pick {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  font-family: inherit;
}
.ldp-detail-pick:hover { filter: brightness(1.05); }

/* ── Lockbar (sticky footer) ──────────────────────────────────────────── */
.ldp-lockbar {
  background: var(--paper);
  border-top: 1px solid var(--border, #e6e1d6);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ldp-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
}
.ldp-count strong {
  color: var(--ink);
  font-size: 18px;
}
.ldp-cap-chip {
  background: var(--surface, #f0ebde);
  color: var(--ink-muted);
  border: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
}
.ldp-cap-chip.set {
  background: #fff8d6;
  color: #6b4f00;
}
.ldp-lock-btn {
  margin-left: auto;
  background: var(--ink-muted);
  color: #fff;
  border: 0;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.55;
  cursor: not-allowed;
  font-family: inherit;
}
.ldp-lock-btn.ready {
  background: var(--accent);
  opacity: 1;
  cursor: pointer;
}

/* ── Captain modal ────────────────────────────────────────────────────── */
.ldp-cap-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.ldp-cap-modal-card {
  background: var(--paper);
  border-radius: 14px;
  width: 100%;
  max-width: 360px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.ldp-cap-modal-head {
  padding: 14px 16px 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border, #e6e1d6);
}
.ldp-cap-modal-head h3 {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
}
.ldp-cap-modal-close {
  margin-left: auto;
  background: var(--surface, #f0ebde);
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--ink-muted);
  cursor: pointer;
  font-family: inherit;
}
.ldp-cap-modal-options {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #e6e1d6);
}
.ldp-cap-mode-btn {
  flex: 1;
  background: var(--surface, #f0ebde);
  border: 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  cursor: pointer;
  font-family: inherit;
}
.ldp-cap-mode-btn.active {
  background: var(--accent);
  color: #fff;
}
.ldp-cap-modal-list {
  overflow-y: auto;
  padding: 6px 0;
  flex: 1;
}
.ldp-cap-modal-empty {
  padding: 20px 16px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}
.ldp-cap-modal-item {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ldp-cap-modal-item:hover { background: var(--surface, #f0ebde); }
.ldp-cap-modal-item.selected {
  background: rgba(45, 90, 61, 0.1);
  color: var(--accent);
  font-weight: 800;
}
.ldp-cap-modal-pos {
  margin-left: auto;
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* ── Desktop layout ≥720px — sheet becomes a fixed right pane ─────────── */
@media (min-width: 720px) {
  .ldp-root { min-height: 620px; }

  .ldp-body {
    flex-direction: row;
    min-height: 480px;
  }
  .ldp-pitch {
    flex: 1 1 auto;
    min-height: 480px;
  }

  /* Sheet: persistent right column, no transform */
  .ldp-scrim { display: none; }
  .ldp-sheet {
    position: relative;
    width: 360px;
    flex-shrink: 0;
    max-height: none;
    border-radius: 0;
    border-left: 1px solid var(--border, #e6e1d6);
    box-shadow: none;
    transform: none;
    pointer-events: auto;
  }
  .ldp-sheet:not(.open) {
    /* On desktop, sheet is always visible — fall back to "tap a slot" prompt */
    pointer-events: auto;
    transform: none;
  }
  .ldp-sheet-handle { display: none; }
}

/* ── Larger desktop ≥1100px — pitch wider, sheet wider too ────────────── */
@media (min-width: 1100px) {
  .ldp-sheet { width: 400px; }
  .ldp-pitch { min-height: 560px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEAMSHEET V3 (2026-04-08) — 3-pane pool · pitch · squad redesign
   Spec: teamsheet-redesign.html
   Dark workbench aesthetic on top of app chrome. Uses local V3 tokens so we
   don't drag platform-wide colours into one game view.
   ═══════════════════════════════════════════════════════════════════════════ */
.ts-v3 {
  --v3-bg:       #0b0f0c;
  --v3-panel:    #0f1411;
  --v3-panel-2:  #151c17;
  --v3-line:     #22302a;
  --v3-line-2:   #2c3a33;
  --v3-ink:      #eef2ee;
  --v3-ink-2:    #c8d2cb;
  --v3-mute:     #7f8d85;
  --v3-mute-2:   #5b6862;
  --v3-green:    #7CFFB2;
  --v3-green-2:  #34d488;
  --v3-warn:     #ffb84d;
  --v3-bad:      #ff6b6b;
  --v3-captain:  #ffd24a;
  --v3-pitch-1:  #143b22;
  --v3-pitch-2:  #0d2a17;
  --v3-pitch-line: rgba(255,255,255,.18);

  background: linear-gradient(180deg, #0b1410 0%, #070a08 100%);
  color: var(--v3-ink);
  border-radius: 14px;
  overflow: hidden;
  margin: 8px;
  border: 1px solid var(--v3-line);
}
.ts-v3 * { box-sizing: border-box; }

.ts-v3-body {
  display: grid;
  grid-template-columns: 300px 1fr 280px;
  min-height: 680px;
}
.ts-v3-body > div { padding: 16px; }

/* ─── Pool (left) ─────────────────────────────────────────────────────── */
.ts-v3 .ts-pool {
  border-right: 1px solid var(--v3-line);
  background: #0a0e0c;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ts-v3 .ts-pool-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.ts-v3 .ts-pos-tabs {
  display: flex; gap: 4px;
  background: #0f1411; padding: 3px; border-radius: 10px;
  border: 1px solid var(--v3-line);
}
.ts-v3 .ts-pos-tab {
  flex: 1; background: transparent; border: 0; color: var(--v3-mute);
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  padding: 7px 0; border-radius: 7px; cursor: pointer; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.ts-v3 .ts-pos-tab.on { background: var(--v3-green); color: #070a08; }
.ts-v3 .ts-pos-tab.full { color: var(--v3-green-2); }
.ts-v3 .ts-pos-tab.on.full { color: #070a08; }
.ts-v3 .ts-pos-tab .ct { font-size: 10px; opacity: .75; }
.ts-v3 .ts-pool-search { position: relative; }
.ts-v3 .ts-pool-search input {
  width: 100%; background: #0f1411; border: 1px solid var(--v3-line);
  color: var(--v3-ink); padding: 9px 12px; border-radius: 9px;
  font-size: 12.5px; outline: none;
}
.ts-v3 .ts-pool-search input:focus { border-color: rgba(124,255,178,.5); }

.ts-v3 .ts-sort-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 10px 0 8px; font-size: 11px; color: var(--v3-mute);
  text-transform: uppercase; letter-spacing: .08em;
}

.ts-v3 .ts-pool-list {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 -16px; padding: 0 16px;
  max-height: 600px;
}
.ts-v3 .ts-pool-empty {
  color: var(--v3-mute); font-size: 12px; text-align: center; padding: 20px;
}
.ts-v3 .prow {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px;
  align-items: center; padding: 9px 10px;
  background: #0f1411; border: 1px solid var(--v3-line);
  border-radius: 11px; cursor: pointer; position: relative;
  transition: all .15s;
}
.ts-v3 .prow:hover { border-color: rgba(124,255,178,.4); background: #121814; }
.ts-v3 .prow.picked { opacity: .6; border-color: rgba(124,255,178,.4); background: rgba(124,255,178,.04); }
.ts-v3 .prow.picked::after {
  content: "PICKED"; position: absolute; right: 10px; top: 6px;
  font-size: 8.5px; background: var(--v3-green); color: #070a08;
  padding: 2px 6px; border-radius: 4px; font-weight: 700; letter-spacing: .06em;
}
.ts-v3 .prow.club-locked { opacity: .45; background: #0c100e; }
.ts-v3 .prow.club-locked .nm { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }
.ts-v3 .prow.club-locked .badge-locked {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 8.5px; background: #2a221a; color: var(--v3-warn);
  padding: 3px 7px; border-radius: 5px; font-weight: 600;
  border: 1px solid rgba(255,184,77,.25); white-space: nowrap;
}
.ts-v3 .prow .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #1f2a23, #0e1410);
  border: 1px solid var(--v3-line-2);
  display: grid; place-items: center; font-size: 11px;
  color: var(--v3-mute); font-weight: 600; flex-shrink: 0; overflow: hidden;
}
.ts-v3 .prow .avatar img { width: 100%; height: 100%; object-fit: cover; }
.ts-v3 .prow .pinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts-v3 .prow .pinfo .nm {
  font-size: 13px; font-weight: 600; color: var(--v3-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ts-v3 .prow .pinfo .meta {
  font-size: 10.5px; color: var(--v3-mute);
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ts-v3 .prow .pinfo .meta .club-dot-img { width: 12px; height: 12px; border-radius: 50%; }
.ts-v3 .prow .pinfo .meta .vs { color: var(--v3-mute-2); }
.ts-v3 .prow .pscore { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ts-v3 .prow .pscore .big {
  font-size: 14px; font-weight: 700; color: var(--v3-ink);
  font-variant-numeric: tabular-nums;
}
.ts-v3 .prow .pscore .lbl {
  font-size: 9px; color: var(--v3-mute); text-transform: uppercase; letter-spacing: .04em;
}

/* ─── Pitch (middle) ──────────────────────────────────────────────────── */
.ts-v3 .ts-pitch-wrap {
  background: radial-gradient(ellipse at top, #0e1a13 0%, #070a08 70%);
  display: flex; flex-direction: column; align-items: center;
}
.ts-v3 .ts-v3-pitch {
  aspect-ratio: 7/9;
  width: 100%;
  max-width: 480px;
  max-height: 640px;
  background: linear-gradient(180deg, var(--v3-pitch-1), var(--v3-pitch-2));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  position: relative;
  box-shadow: inset 0 0 80px rgba(0,0,0,.4);
  overflow: hidden;
}
.ts-v3 .ts-v3-pitch::before {
  content: ""; position: absolute; inset: 8px;
  border: 1.5px solid var(--v3-pitch-line);
  border-radius: 8px; pointer-events: none;
}
.ts-v3 .ts-v3-pitch .centre {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 90px; height: 90px; border: 1.5px solid var(--v3-pitch-line);
  border-radius: 50%; pointer-events: none;
}
.ts-v3 .ts-v3-pitch .midline {
  position: absolute; left: 8px; right: 8px; top: 50%;
  height: 1.5px; background: var(--v3-pitch-line); pointer-events: none;
}
.ts-v3 .ts-v3-pitch .box-top {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 55%; height: 18%;
  border: 1.5px solid var(--v3-pitch-line); border-top: 0; pointer-events: none;
}
.ts-v3 .ts-v3-pitch .box-bot {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: 55%; height: 18%;
  border: 1.5px solid var(--v3-pitch-line); border-bottom: 0; pointer-events: none;
}
.ts-v3 .ts-pitch-row {
  position: absolute; left: 0; right: 0;
  display: flex; justify-content: space-around; align-items: center;
  padding: 0 18px;
}
.ts-v3 .ts-pitch-row.r-att { top: 14%; }
.ts-v3 .ts-pitch-row.r-mid { top: 38%; }
.ts-v3 .ts-pitch-row.r-def { top: 62%; }
.ts-v3 .ts-pitch-row.r-gk  { top: 84%; }

.ts-v3 .ts-v3-slot {
  width: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; position: relative;
}
.ts-v3 .ts-v3-slot .dot {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.35);
  display: grid; place-items: center;
  font-size: 9px; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.15);
  transition: all .15s;
  overflow: hidden;
}
.ts-v3 .ts-v3-slot.empty:hover .dot {
  border-color: var(--v3-green); color: var(--v3-green);
  background: rgba(124,255,178,.08);
}
.ts-v3 .ts-v3-slot.active .dot {
  border-style: solid; border-color: var(--v3-green);
  background: rgba(124,255,178,.18);
  box-shadow: 0 0 0 4px rgba(124,255,178,.15), 0 0 22px rgba(124,255,178,.4);
  color: var(--v3-green);
  animation: tsV3ActivePulse 1.8s ease-in-out infinite;
}
@keyframes tsV3ActivePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(124,255,178,.15), 0 0 22px rgba(124,255,178,.4); }
  50% { box-shadow: 0 0 0 6px rgba(124,255,178,.22), 0 0 30px rgba(124,255,178,.55); }
}
.ts-v3 .ts-v3-slot.filled .dot {
  border: 2px solid #fff; background: #0a0e0c;
}
.ts-v3 .ts-v3-slot.filled .dot .pic {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #2a3d31, #101a13);
  display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: 700; border-radius: 50%;
}
.ts-v3 .ts-v3-slot.filled .dot img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.ts-v3 .ts-v3-slot .lbl {
  font-size: 9.5px; color: #fff; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  max-width: 72px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ts-v3 .ts-v3-slot .sub {
  font-size: 8.5px; color: rgba(255,255,255,.6);
  text-transform: uppercase; letter-spacing: .06em;
}
.ts-v3 .ts-v3-slot.captain .dot {
  border-color: var(--v3-captain);
  box-shadow: 0 0 0 3px rgba(255,210,74,.25);
}
.ts-v3 .ts-v3-slot.captain::before {
  content: "C"; position: absolute; top: -2px; right: 0;
  background: var(--v3-captain); color: #070a08;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 800;
  z-index: 2; border: 2px solid #070a08;
}

/* ─── Bench ───────────────────────────────────────────────────────────── */
.ts-v3 .ts-v3-bench {
  width: 100%;
  max-width: 480px;
  margin-top: 12px;
  background: #0a0e0c; border: 1px solid var(--v3-line);
  border-radius: 12px; padding: 10px 12px;
}
.ts-v3 .ts-v3-bench .bh {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.ts-v3 .ts-v3-bench .bh h5 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--v3-mute); margin: 0;
}
.ts-v3 .ts-v3-bench .bh .cnt { font-size: 10px; color: var(--v3-mute); }
.ts-v3 .ts-v3-bench .bench-row {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.ts-v3 .bslot {
  aspect-ratio: 1;
  border-radius: 9px;
  border: 1.5px dashed rgba(255,255,255,.2);
  background: #0e1310;
  display: grid; place-items: center;
  font-size: 9px; color: var(--v3-mute-2);
  text-transform: uppercase; cursor: pointer; position: relative;
}
.ts-v3 .bslot.filled {
  background: linear-gradient(135deg, #1a261f, #0e1410);
  border: 1.5px solid #fff; color: #fff;
  font-size: 10px; font-weight: 700;
}
.ts-v3 .bslot.filled .pos {
  position: absolute; top: -4px; right: -4px;
  font-size: 8px; background: var(--v3-green); color: #070a08;
  padding: 1px 4px; border-radius: 4px; font-weight: 700;
}

/* ─── Squad (right) ───────────────────────────────────────────────────── */
.ts-v3 .ts-squad {
  border-left: 1px solid var(--v3-line);
  background: #0a0e0c;
  display: flex; flex-direction: column;
  min-width: 0;
}
.ts-v3 .squad-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ts-v3 .squad-head h4 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--v3-mute); margin: 0;
}
.ts-v3 .squad-head .cnt {
  font-size: 12px; color: var(--v3-ink); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ts-v3 .ts-v3-progress {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
}
.ts-v3 .pbar { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.ts-v3 .pbar .lbl {
  width: 32px; color: var(--v3-mute);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.ts-v3 .pbar .track {
  flex: 1; height: 6px; background: #0f1411;
  border-radius: 3px; overflow: hidden; border: 1px solid var(--v3-line);
}
.ts-v3 .pbar .fill {
  height: 100%; background: var(--v3-green);
  border-radius: 2px; transition: width .2s;
}
.ts-v3 .pbar .ct {
  width: 32px; text-align: right; color: var(--v3-ink);
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.ts-v3 .ts-v3-clubs { margin-top: 6px; }
.ts-v3 .ts-v3-clubs .lbl {
  font-size: 10px; color: var(--v3-mute);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
.ts-v3 .ts-v3-clubs .grid { display: flex; flex-wrap: wrap; gap: 4px; }
.ts-v3 .ts-v3-clubs .club-pill {
  font-size: 10px; padding: 3px 7px;
  background: #0f1411; border: 1px solid var(--v3-line);
  border-radius: 5px; color: var(--v3-ink-2);
  display: flex; align-items: center; gap: 4px;
}
.ts-v3 .ts-v3-clubs .club-pill img { width: 12px; height: 12px; border-radius: 50%; }
.ts-v3 .ts-v3-empty-hint { font-size: 11px; color: var(--v3-mute); font-style: italic; }
.ts-v3 .ts-v3-fixtures {
  margin-top: 14px; border-top: 1px solid var(--v3-line); padding-top: 14px;
}
.ts-v3 .ts-v3-fixtures .lbl {
  font-size: 10px; color: var(--v3-mute);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px;
}
.ts-v3 .ts-v3-fixtures .fx-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; padding: 4px 0; color: var(--v3-ink-2);
}
.ts-v3 .ts-v3-fixtures .fx-row .vs { color: var(--v3-mute); font-size: 10px; }
.ts-v3 .ts-v3-fixtures .fx-row .picked { color: var(--v3-green); font-weight: 600; }
.ts-v3 .ts-v3-fixtures .fx-more { font-size: 10px; color: var(--v3-mute); margin-top: 4px; }
/* 2-col grid so all 10 fixtures are visible in one box (5 left / 5 right) */
.ts-v3 .ts-v3-fixtures .fx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  row-gap: 0;
}
.ts-v3 .ts-v3-fixtures .fx-grid .fx-row {
  min-width: 0;
}
.ts-v3 .ts-v3-fixtures .fx-grid .fx-row > span:first-child,
.ts-v3 .ts-v3-fixtures .fx-grid .fx-row > span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 0; min-width: 0;
}
.ts-v3 .ts-v3-fixtures .fx-grid .fx-row > span:last-child { text-align: right; }
.ts-v3 .ts-v3-cta {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--v3-line);
  display: flex; flex-direction: column; gap: 8px;
}
.ts-v3 .ts-v3-btn {
  background: var(--v3-green); color: #070a08; border: 0;
  padding: 12px 16px; border-radius: 10px;
  font-weight: 700; font-size: 13px; cursor: pointer; letter-spacing: .02em;
}
.ts-v3 .ts-v3-btn.secondary {
  background: #0f1411; color: var(--v3-ink); border: 1px solid var(--v3-line);
}
.ts-v3 .ts-v3-btn:disabled { opacity: .4; cursor: not-allowed; }
.ts-v3 .ts-v3-cta .hint {
  font-size: 10.5px; color: var(--v3-mute); text-align: center;
}

/* ─── Slot popover menu + captain modal (fixed overlay) ──────────────── */
.ts-v3-menu-overlay {
  position: fixed; inset: 0;
  background: rgba(7,10,8,.75); backdrop-filter: blur(6px);
  display: grid; place-items: center; z-index: 1000; padding: 24px;
}
.ts-v3-menu {
  background: linear-gradient(180deg, #0f1714, #0a100d);
  border: 1px solid #2c3a33; border-radius: 14px;
  padding: 16px; max-width: 320px; width: 100%;
  display: flex; flex-direction: column; gap: 8px;
  color: #eef2ee;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
}
.ts-v3-menu-head {
  padding: 4px 4px 10px;
  border-bottom: 1px solid #22302a;
  margin-bottom: 4px;
}
.ts-v3-menu-head .nm { font-size: 14px; font-weight: 700; color: #eef2ee; }
.ts-v3-menu-head .sub { font-size: 11px; color: #7f8d85; margin-top: 2px; }
.ts-v3-menu-btn {
  background: #0f1411; border: 1px solid #22302a;
  color: #c8d2cb; padding: 10px 12px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left;
}
.ts-v3-menu-btn:hover { background: #141a16; border-color: #2c3a33; }
.ts-v3-menu-btn.danger { color: #ff6b6b; border-color: rgba(255,107,107,.25); }
.ts-v3-menu-btn.secondary { background: transparent; color: #7f8d85; }

.ts-v3-captain-panel {
  background: linear-gradient(180deg, #0f1714, #0a100d);
  border: 1px solid #2c3a33; border-radius: 16px;
  padding: 22px; max-width: 460px; width: 100%;
  color: #eef2ee;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
}
.ts-v3-captain-panel h4 { font-size: 18px; margin: 0 0 6px; text-align: center; }
.ts-v3-captain-panel .sub {
  color: #7f8d85; font-size: 12.5px; text-align: center;
  margin: 0 0 16px; line-height: 1.5;
}
.ts-v3-cap-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 14px;
}
.ts-v3-cap-pick {
  background: #0f1411; border: 1.5px solid #22302a;
  border-radius: 10px; padding: 10px;
  cursor: pointer; text-align: center; position: relative;
}
.ts-v3-cap-pick.on {
  border-color: #ffd24a; background: rgba(255,210,74,.08);
}
.ts-v3-cap-pick.on::before {
  content: "C"; position: absolute; top: -6px; right: -6px;
  background: #ffd24a; color: #070a08;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 800;
  border: 2px solid #0f1714;
}
.ts-v3-cap-pick .av {
  width: 32px; height: 32px; border-radius: 50%;
  background: #1a2620; margin: 0 auto 6px;
  display: grid; place-items: center;
  font-size: 10px; color: #fff; font-weight: 700;
}
.ts-v3-cap-pick .nm { font-size: 11px; color: #eef2ee; font-weight: 600; line-height: 1.2; }
.ts-v3-cap-pick .vs { font-size: 9px; color: #7f8d85; margin-top: 2px; }

/* ─── Pool: Limited-minutes divider (appearances threshold split) ───── */
.ts-v3 .ts-v3-pool-divider {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  margin: 14px 4px 6px;
  padding: 6px 2px 8px;
  border-top: 1px dashed #22302a;
}
.ts-v3 .ts-v3-pool-divider .lbl {
  font-size: 10px; font-weight: 700;
  color: #c8d2cb;
  text-transform: uppercase; letter-spacing: .08em;
}
.ts-v3 .ts-v3-pool-divider .hint {
  font-size: 10px; color: #7f8d85; font-style: italic;
}
.ts-v3 .ts-v3-pool-list .ts-v3-pool-row.dim {
  opacity: .62;
}
.ts-v3 .ts-v3-pool-list .ts-v3-pool-row.dim:hover { opacity: .85; }

/* ─── Slot menu: "Swap with bench (POS only)" section ───────────────── */
.ts-v3-menu-sub {
  font-size: 10px; font-weight: 700;
  color: #7f8d85;
  text-transform: uppercase; letter-spacing: .08em;
  margin: 8px 2px 4px;
}
.ts-v3-swap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 4px;
}
.ts-v3-swap-chip {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px; row-gap: 0;
  align-items: center;
  background: #0f1411; border: 1px solid #22302a;
  color: #c8d2cb;
  padding: 6px 8px; border-radius: 9px;
  font-size: 11.5px; text-align: left; cursor: pointer;
}
.ts-v3-swap-chip:hover:not(.disabled) {
  background: #141a16; border-color: #2c3a33;
}
.ts-v3-swap-chip .pic {
  grid-row: 1 / span 2;
  width: 28px; height: 28px; border-radius: 50%;
  background: #1a221d; overflow: hidden;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #7f8d85;
}
.ts-v3-swap-chip .pic img { width: 100%; height: 100%; object-fit: cover; }
.ts-v3-swap-chip .lbl {
  font-size: 11.5px; font-weight: 600; color: #eef2ee;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ts-v3-swap-chip .sub {
  font-size: 9.5px; color: #7f8d85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ts-v3-swap-chip.disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Club-locked tap-to-swap confirmation modal ────────────────────── */
.ts-v3-swap-panel {
  background: linear-gradient(180deg, #0f1714, #0a100d);
  border: 1px solid #2c3a33; border-radius: 16px;
  padding: 22px;
  max-width: 520px; width: 100%;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  color: #eef2ee;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
  display: flex; flex-direction: column; gap: 16px;
}
.ts-v3-swap-head .hd {
  font-size: 16px; font-weight: 700; color: #eef2ee;
  margin-bottom: 4px;
}
.ts-v3-swap-head .sub {
  font-size: 12px; color: #7f8d85; line-height: 1.5;
}
.ts-v3-swap-head .sub strong { color: #eef2ee; }
.ts-v3-swap-current .lbl,
.ts-v3-swap-targets .lbl {
  font-size: 10px; font-weight: 700; color: #7f8d85;
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 8px;
}
.ts-v3-swap-current .row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px; align-items: center;
  background: rgba(255,107,107,.06);
  border: 1px solid rgba(255,107,107,.25);
  border-radius: 12px;
  padding: 10px 12px;
}
.ts-v3-swap-current .pic {
  width: 44px; height: 44px; border-radius: 50%;
  background: #1a221d; overflow: hidden;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #7f8d85;
}
.ts-v3-swap-current .pic img { width: 100%; height: 100%; object-fit: cover; }
.ts-v3-swap-current .info { min-width: 0; }
.ts-v3-swap-current .nm {
  font-size: 13px; font-weight: 700; color: #eef2ee;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ts-v3-swap-current .meta {
  font-size: 11px; color: #7f8d85; margin-top: 2px;
}
.ts-v3-swap-current .tag-remove {
  font-size: 10px; font-weight: 700;
  color: #ff6b6b;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(255,107,107,.12);
  border: 1px solid rgba(255,107,107,.3);
  white-space: nowrap;
}
.ts-v3-swap-targets .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}
.ts-v3-swap-target {
  background: #0f1411; border: 1.5px solid #22302a;
  border-radius: 12px; padding: 10px 8px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; color: #c8d2cb; position: relative;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.ts-v3-swap-target:hover { background: #141a16; border-color: #2c3a33; }
.ts-v3-swap-target.chosen {
  border-color: var(--v3-green, #5eea8c);
  background: rgba(94,234,140,.08);
  transform: translateY(-1px);
}
.ts-v3-swap-target .slotlbl {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #7f8d85;
}
.ts-v3-swap-target .pic {
  width: 40px; height: 40px; border-radius: 50%;
  background: #1a221d; overflow: hidden;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #7f8d85;
  margin-top: 2px;
}
.ts-v3-swap-target .pic img { width: 100%; height: 100%; object-fit: cover; }
.ts-v3-swap-target .pic.empty {
  background: transparent;
  border: 1.5px dashed #2c3a33;
  color: #5a6b62;
  font-size: 18px; font-weight: 400;
}
.ts-v3-swap-target .occ {
  font-size: 10.5px; font-weight: 600; color: #eef2ee;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ts-v3-swap-target .tag {
  font-size: 8.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 6px; border-radius: 999px;
  color: #ffb84a;
  background: rgba(255,184,74,.1);
  border: 1px solid rgba(255,184,74,.28);
  margin-top: 2px;
}
.ts-v3-swap-target .tag.fill {
  color: var(--v3-green, #5eea8c);
  background: rgba(94,234,140,.1);
  border-color: rgba(94,234,140,.28);
}
.ts-v3-swap-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid #22302a;
  margin-top: 4px;
  padding-top: 14px;
}
.ts-v3-swap-foot .ts-v3-btn {
  flex: 1 1 auto;
  max-width: 320px;
}
.ts-v3-swap-foot .ts-v3-btn:disabled {
  opacity: .45; cursor: not-allowed;
}
@media (max-width: 560px) {
  .ts-v3-swap-panel { padding: 18px; gap: 14px; }
  .ts-v3-swap-targets .grid {
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  }
  .ts-v3-swap-foot { flex-direction: column-reverse; }
  .ts-v3-swap-foot .ts-v3-btn { max-width: none; }
}

/* ─── Narrow / mobile — pitch on top, pool flows naturally ──────────────
   Breakpoint is 1080px not 900px because 3 panes only breathe nicely
   above ~1100px. Below that we stack vertically and turn the
   .teamsheet-view into a fullscreen overlay so there's exactly ONE
   scroll container (fixes the mobile "screen doesn't move" bug — the
   inline-in-dugout mount was competing with Dugout feed scroll).
*/
@media (max-width: 1080px) {
  .teamsheet-view {
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 900;
    padding: 0;
    gap: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .teamsheet-view .ts-header {
    position: sticky;
    top: 0;
    background: var(--paper);
    z-index: 10;
    border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
  }
  .ts-v3 {
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    overflow: visible;  /* let the outer .teamsheet-view handle scrolling */
  }
  .ts-v3-body {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    min-height: auto;
  }
  .ts-v3-body > div { padding: 12px; }

  /* Pitch first, squad (progress + clubs) second, pool last.
     Squad sits directly under the pitch so progress + clubs used are
     readable while you pick, instead of being buried beneath the pool. */
  .ts-v3 .ts-pitch-wrap { order: 1; border-bottom: 1px solid var(--v3-line); }
  .ts-v3 .ts-squad      { order: 2; border-left: 0; border-bottom: 1px solid var(--v3-line); }
  .ts-v3 .ts-pool       { order: 3; border-right: 0; padding-bottom: 100px; }

  /* Lock CTA becomes a fixed bottom bar — always reachable */
  .ts-v3 .ts-squad .ts-v3-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    margin: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(10,14,12,.0), rgba(10,14,12,.96) 30%, #0a0e0c);
    border-top: 1px solid var(--v3-line);
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .ts-v3 .ts-squad .ts-v3-cta .ts-v3-btn { flex: 1; padding: 13px 16px; }
  .ts-v3 .ts-squad .ts-v3-cta .hint {
    flex: 0 0 auto;
    text-align: right;
    margin: 0;
  }
  /* Squad in-flow section no longer needs its own sticky bottom padding */
  .ts-v3 .ts-squad { padding-bottom: 14px; }

  /* Pitch shouldn't dominate the viewport on phones */
  .ts-v3 .ts-v3-pitch {
    aspect-ratio: auto;
    height: 56vh;
    max-height: 460px;
    min-height: 360px;
    width: 100%;
    max-width: none;
  }
  .ts-v3 .ts-v3-bench { max-width: none; }

  /* Pool list flows naturally — no internal scroll on mobile so the
     outer .teamsheet-view is the single scroll container. Sticky position
     tabs keep the filter reachable even when scrolled deep into the pool. */
  .ts-v3 .ts-pool-list {
    max-height: none;
    overflow: visible;
  }
  .ts-v3 .ts-pool-head {
    position: sticky;
    top: 0;
    background: #0a0e0c;
    padding-top: 8px;
    margin: -12px -12px 10px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--v3-line);
    z-index: 2;
  }
  .ts-v3 .ts-v3-slot { width: 58px; }
  .ts-v3 .ts-v3-slot .dot { width: 42px; height: 42px; }
  .ts-v3 .ts-pitch-row { padding: 0 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   UNIFIED EVENT TILE (UET)
   Shared base tile for Pitch live feed + Dugout Events tab.
   Same HTML structure, CSS-swappable via context classes.
   Scoring overlay (points, drafter impacts) shows conditionally.
   ══════════════════════════════════════════════════════════════════════════════ */

.uet-tile {
  display: flex;
  align-items: stretch;
  background: var(--bg-message, #1a1f2e);
  border-radius: 10px;
  margin: 4px 0;
  overflow: hidden;
  position: relative;
  transition: background 0.15s;
  cursor: pointer;
}
.uet-tile:hover { background: var(--bg-hover, #1e2438); }
.uet-secondary { opacity: 0.75; }
.uet-secondary:hover { opacity: 1; }

/* ── Accent bar (competition colour) ── */
.uet-accent {
  width: 3px;
  flex-shrink: 0;
  border-radius: 10px 0 0 10px;
}

/* ── Body ── */
.uet-body {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
}

.uet-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.uet-min {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary, #8b95a5);
  min-width: 28px;
}

.uet-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  white-space: nowrap;
}

.uet-team-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.3px;
}

.uet-player {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary, #e0e6ed);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uet-score {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary, #e0e6ed);
  margin-left: auto;
  white-space: nowrap;
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 4px;
}

.uet-row-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.uet-match {
  font-size: 0.72rem;
  color: var(--text-muted, #5c6370);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uet-comp {
  font-size: 0.65rem;
  color: var(--text-muted, #5c6370);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.uet-assist {
  font-size: 0.75rem;
  color: var(--text-secondary, #8b95a5);
}

/* ── Scoring overlay (conditional — only renders when draft data present) ── */
.uet-scoring {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}

.uet-pos {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-secondary, #8b95a5);
  background: rgba(255,255,255,0.08);
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}

.uet-pts {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.uet-pts-pos { color: #4ade80; background: rgba(74,222,128,0.12); }
.uet-pts-neg { color: #f87171; background: rgba(248,113,113,0.12); }

.uet-impact {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.uet-impact-pos { color: #4ade80; background: rgba(74,222,128,0.08); }
.uet-impact-neg { color: #f87171; background: rgba(248,113,113,0.08); }

/* ── Actions bar (Pitch context — reactions + thread) ── */
.uet-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,0.04);
}

.uet-reaction {
  font-size: 0.75rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.uet-reaction:hover { background: rgba(255,255,255,0.08); }
.uet-react-count { font-size: 0.65rem; color: var(--text-muted); }

.uet-react-add {
  font-size: 0.7rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  color: var(--text-muted);
}
.uet-react-add:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }

.uet-thread {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 2px 4px;
  border-radius: 4px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.uet-thread:hover { background: rgba(255,255,255,0.08); }
.uet-thread-count {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── User-relevant highlight (Dugout — player you drafted) ── */
.dlf-event-user .uet-tile {
  background: rgba(74,222,128,0.06);
  border: 1px solid rgba(74,222,128,0.15);
}

/* ── Context-specific adjustments ── */
/* Dugout: no actions bar, slightly tighter */
.dlf-event-list .uet-tile {
  margin: 3px 0;
}
.dlf-event-list .uet-actions { display: none; }

/* Pitch Home: full actions, standard spacing */
.phm-live-events .uet-tile {
  margin: 5px 0;
  background: var(--surface-raised, #F7F5F0);
  border: 1px solid var(--border-subtle, rgba(26,24,20,0.06));
}
.phm-live-events .uet-tile:hover {
  background: var(--surface-float, #FFFFFF);
}
/* Fix text colours inside uet tiles when in Pitch (light theme) context */
.phm-live-events .uet-player {
  color: var(--text-primary, #1A1814);
}
.phm-live-events .uet-min {
  color: var(--text-muted, #6B6760);
}
.phm-live-events .uet-match {
  color: var(--text-faint, #9B9890);
}
.phm-live-events .uet-score {
  color: var(--text-primary, #1A1814);
  background: rgba(26,24,20,0.06);
}
.phm-live-events .uet-assist,
.phm-live-events .uet-row-bottom span {
  color: var(--text-muted, #6B6760);
}
.phm-live-events .uet-reaction {
  background: rgba(26,24,20,0.06);
  border-color: transparent;
}
.phm-live-events .uet-reaction:hover {
  background: rgba(26,24,20,0.12);
}
.phm-live-events .uet-thread {
  color: var(--text-muted, #6B6760);
  background: none;
  border: none;
}
.phm-live-events .uet-react-add {
  color: var(--text-muted, #6B6760);
}
/* Dark mode: revert to original dark tile style */
[data-theme="dark"] .phm-live-events .uet-tile {
  background: var(--surface-raised, #161A18);
  border-color: var(--border-subtle, rgba(240,237,232,0.06));
}

/* ────────────────────────────────────────────────────────────────────────────
   DUGOUT — SECTION-BASED LAYOUT (2026-04-11)
   ──────────────────────────────────────────────────────────────────────────── */

/* Dugout strip layout — inherits height + scroll from #messageFeed.dugout-layout (line 18200) */
.dugout-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 32px;
}

.dugout-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dugout-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 4px;
}

/* ── Your Games strip ── */
.dugout-your-games .dugout-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
}
.dugout-your-games .dugout-strip::-webkit-scrollbar {
  height: 4px;
}
.dugout-your-games .dugout-strip::-webkit-scrollbar-track {
  background: transparent;
}
.dugout-your-games .dugout-strip::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 2px;
}

.dugout-game-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dugout-game-chip:hover {
  background: var(--surface-float);
  border-color: var(--border-default);
}
.dugout-game-chip:active {
  transform: scale(0.97);
}

.dgc-badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  border-radius: 6px;
}

.dgc-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dgc-game {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}
.dgc-detail {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ── Match Day sections ── */
.dugout-comp-strip {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface-base);
}

.dugout-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.dugout-strip-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
}

.dugout-comp-badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  border-radius: 8px;
}

.dugout-comp-badge.comp-pl  { background: var(--comp-pl); }
.dugout-comp-badge.comp-ucl { background: var(--comp-ucl); }
.dugout-comp-badge.comp-ch  { background: var(--comp-ch); }
.dugout-comp-badge.comp-spl { background: var(--comp-spl); }
.dugout-comp-badge.comp-fac { background: var(--comp-fac); }
.dugout-comp-badge.comp-lc  { background: var(--comp-lc); }
.dugout-comp-badge.comp-uel { background: var(--comp-uel); }
.dugout-comp-badge.comp-ecl { background: var(--comp-ecl); }
.dugout-comp-badge.comp-l1  { background: var(--comp-l1); }
.dugout-comp-badge.comp-l2  { background: var(--comp-l2, #666); }
.dugout-comp-badge.comp-default { background: var(--ink-muted); }

.dgc-badge.comp-pl  { background: var(--comp-pl); }
.dgc-badge.comp-ucl { background: var(--comp-ucl); }
.dgc-badge.comp-ch  { background: var(--comp-ch); }
.dgc-badge.comp-spl { background: var(--comp-spl); }
.dgc-badge.comp-fac { background: var(--comp-fac); }
.dgc-badge.comp-lc  { background: var(--comp-lc); }
.dgc-badge.comp-uel { background: var(--comp-uel); }
.dgc-badge.comp-ecl { background: var(--comp-ecl); }
.dgc-badge.comp-l1  { background: var(--comp-l1); }
.dgc-badge.comp-l2  { background: var(--comp-l2, #666); }
.dgc-badge.comp-default { background: var(--ink-muted); }

.dugout-round {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.dugout-status-pill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  margin-left: auto;
}

.dugout-status-live {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}
.dugout-status-open {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}
.dugout-status-upcoming {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}
.dugout-status-done {
  background: rgba(107, 114, 128, 0.12);
  color: #6b7280;
}

.dugout-game-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dugout-game-btn {
  flex: 1;
  min-width: 100px;
  padding: 10px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.dugout-game-btn:hover {
  background: var(--text-primary);
  color: var(--surface-raised);
}
.dugout-game-btn:active {
  transform: scale(0.97);
}

/* ── Live Draft expand button ── */
.dugout-game-btn--expand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dgb-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--text-primary);
  color: var(--surface-raised);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.dugout-game-btn--open {
  background: var(--text-primary);
  color: var(--surface-raised);
}
.dugout-game-btn--open .dgb-count {
  background: var(--surface-raised);
  color: var(--text-primary);
}

/* ── Draft fixture picker ── */
.dugout-draft-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 16px 16px;
  padding: 8px;
  background: var(--surface-sink);
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
}
.dugout-draft-fixture {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dugout-draft-fixture:hover {
  background: var(--text-primary);
  color: var(--surface-raised);
  border-color: var(--text-primary);
}

/* ── Always On — Rolling Quiz ── */
.dugout-always-on {
  padding: 16px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  border-radius: 12px;
}

.dugout-quiz-card {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.dqc-icon {
  flex-shrink: 0;
  font-size: 2rem;
}

.dqc-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dqc-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
}

.dqc-subtitle {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
}

.dqc-play {
  flex-shrink: 0;
  padding: 8px 16px;
  background: #fff;
  color: #4f46e5;
  border: none;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dqc-play:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.dqc-play:active {
  transform: scale(0.97);
}

/* ── Play Anytime section ── */
.dugout-play-anytime {
  margin-bottom: 16px;
}

.dugout-anytime-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.dugout-anytime-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.dugout-anytime-card:hover {
  background: var(--surface-float);
  border-color: var(--border-default);
  transform: translateY(-2px);
}
.dugout-anytime-card:active {
  transform: scale(0.97);
}

.dac-icon {
  font-size: 2rem;
}

.dac-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.dac-subtitle {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.dugout-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-secondary);
}

/* ═════════════════════════════════════════════════════════════════
   TEAMSHEET PAGE — Full-screen game UI
   ═════════════════════════════════════════════════════════════════ */

.tsp-page-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tsp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary);
  font-size: 16px;
}

.tsp-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
  min-height: var(--header-h);
}

.tsp-back-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.tsp-back-btn:hover {
  background: var(--surface-hover);
}

.tsp-header-title {
  flex: 1;
  min-width: 0;
}

.tsp-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tsp-phase {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.tsp-tabs {
  display: flex;
  gap: 0;
  padding: 0 12px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tsp-tab {
  flex: 1;
  min-width: 100px;
  padding: 12px 8px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}
.tsp-tab:hover {
  color: var(--text-primary);
}
.tsp-tab.tsp-tab-active {
  color: var(--text-primary);
  border-bottom-color: var(--brand);
}

.tsp-screens {
  flex: 1;
  overflow: hidden;
  display: flex;
}

.tsp-screen {
  display: none;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
}
.tsp-screen.tsp-screen-active {
  display: block;
}

.tsp-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary);
  font-size: 14px;
}

/* ── Squad Screen ── */
.tsp-squad-screen {
  padding: 16px;
}

.tsp-total-banner {
  text-align: center;
  padding: 24px 16px;
  background: var(--surface-float);
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  margin-bottom: 24px;
}

.tsp-total-pts {
  font-size: 48px;
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
}

.tsp-total-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.tsp-squad-section {
  margin-bottom: 20px;
}

.tsp-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-left: 4px;
}

.tsp-player-card {
  padding: 12px;
  margin-bottom: 8px;
  background: var(--surface-float);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  position: relative;
}
.tsp-player-card.tsp-bench-card {
  opacity: 0.85;
}

.tsp-pc-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.tsp-pc-info {
  flex: 1;
  min-width: 0;
}

.tsp-pc-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tsp-pc-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tsp-pc-pts {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand);
  min-width: 50px;
  text-align: right;
}

.tsp-bench-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-block;
  background: var(--surface-amber);
  color: var(--colour-amber);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Feed Screen ── */
.tsp-feed-screen {
  padding: 16px;
}

.tsp-feed-stream {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tsp-feed-event {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--surface-float);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.tsp-fe-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.tsp-fe-pts {
  flex: 1;
  color: var(--text-primary);
  font-weight: 500;
}

/* ── Standings Screen ── */
.tsp-standings-screen {
  padding: 16px;
}

.tsp-standings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface-float);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.tsp-standings-row:hover {
  background: var(--surface-hover);
  border-color: var(--border-default);
}
.tsp-standings-row.tsp-standings-you {
  background: var(--surface-success);
  border-color: var(--border-success);
  font-weight: 600;
}

.tsp-sr-rank {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 32px;
}

.tsp-sr-name {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tsp-sr-pts {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand);
  min-width: 60px;
  text-align: right;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .tsp-header,
  .tsp-tabs,
  .tsp-total-banner,
  .tsp-player-card,
  .tsp-feed-event,
  .tsp-standings-row {
    /* Use existing dark mode variables from design token system */
  }
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .tsp-total-pts {
    font-size: 36px;
  }

  .tsp-pc-pts,
  .tsp-sr-pts {
    font-size: 14px;
  }

  .tsp-tab {
    min-width: 80px;
    font-size: 13px;
    padding: 10px 6px;
  }
}

@media (max-width: 400px) {
  .tsp-title {
    font-size: 14px;
  }

  .tsp-pc-name {
    font-size: 13px;
  }

  .tsp-section-title {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DUGOUT v2 — Competition strips feed
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Your Games chip row ─────────────────────────────────────────── */
.dug-your-games { padding: 8px 12px; }
.dug-yg-title { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 700; margin-bottom: 5px; }
.dug-yg-row { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.dug-yg-row::-webkit-scrollbar { display: none; }
.dug-yg-chip {
  background: var(--surface-float); border-radius: 10px; padding: 7px 11px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06); display: flex; align-items: center; gap: 5px;
  cursor: pointer; transition: background 0.15s;
}
.dug-yg-chip:hover { background: var(--surface-sink); }
.dug-yg-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dug-yg-dot--live  { background: #DC2626; }
.dug-yg-dot--open  { background: #16A34A; }
.dug-yg-dot--soon  { background: #D97706; }
.dug-yg-dot--locked { background: #D97706; }
.dug-yg-dot--done  { background: var(--text-faint); }

/* ── Divider ─────────────────────────────────────────────────────── */
.dug-divider { height: 1px; background: var(--surface-sink); margin: 6px 12px; }

/* ── Filter pills ────────────────────────────────────────────────── */
.dug-filters { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.dug-filters::-webkit-scrollbar { display: none; }
.dug-fp {
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
  background: var(--surface-float); color: var(--text-secondary); white-space: nowrap;
  cursor: pointer; transition: all 0.15s; border: 1px solid var(--surface-sink);
}
.dug-fp:hover { background: var(--surface-sink); }
.dug-fp--on { background: var(--brand); color: white; border-color: var(--brand); }

/* ── Competition strip card ──────────────────────────────────────── */
.dug-strip {
  background: var(--surface-float); border-radius: 12px; margin: 6px 12px; overflow: hidden;
}
.dug-strip-hd { display: flex; align-items: center; gap: 8px; padding: 9px 12px; }
.dug-strip-logo {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  object-fit: contain;
}
.dug-strip-badge {
  width: 28px; height: 28px; border-radius: 7px; display: flex;
  align-items: center; justify-content: center;
  color: white; font-size: 8px; font-weight: 800; flex-shrink: 0;
}
.dug-strip-round { font-size: 14px; font-weight: 700; flex: 1; }
.dug-strip-meta { padding: 0 12px 4px; font-size: 10px; color: var(--text-muted); }

/* Status pill */
.dug-pill {
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
}
.dug-pill--open { background: #DCFCE7; color: #15803D; }
.dug-pill--live { background: #FEE2E2; color: #DC2626; }
.dug-pill--locked { background: #FEF3C7; color: #B45309; }
.dug-pill--upcoming { background: #DBEAFE; color: #1E40AF; }
.dug-pill--done { background: var(--surface-sink); color: var(--text-muted); }

/* ── Game buttons ────────────────────────────────────────────────── */
.dug-strip-btns { padding: 4px 12px 10px; display: flex; gap: 5px; }
.dug-gbtn {
  flex: 1; border: none !important; border-radius: 8px; padding: 9px 5px;
  font-size: 10px; font-weight: 700; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  transition: filter 0.15s; background: var(--surface-sink); color: var(--text-secondary);
  -webkit-appearance: none; appearance: none;
}
.dug-gbtn:hover { filter: brightness(0.95); }
.dug-gbtn--pred { background: var(--brand-surface); color: var(--brand); }
.dug-gbtn--ts { background: #EEF2FF; color: #4338CA; }
.dug-gbtn--draft { background: #FFF7ED; color: #C2410C; }
.dug-gbtn--off { background: var(--surface-sink); color: var(--text-faint); opacity: 0.6; cursor: default; }
.dug-gbtn-sub { font-size: 9px; font-weight: 400; opacity: 0.7; }

/* ── Trivia section ──────────────────────────────────────────────── */
.dug-trivia-header {
  padding: 14px 12px 6px; font-size: 10px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-muted); font-weight: 700;
}
.dug-trivia-tile {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--surface-float); border-radius: 10px; margin: 3px 12px;
  cursor: pointer; transition: background 0.15s;
}
.dug-trivia-tile:hover { background: var(--surface-sink); }
.dug-trivia-icon { font-size: 22px; }
.dug-trivia-info { flex: 1; }
.dug-trivia-name { font-size: 13px; font-weight: 700; }
.dug-trivia-time { font-size: 10px; color: var(--text-muted); }

/* ── Section header ──────────────────────────────────────────────── */
.dug-section-hd {
  padding: 10px 12px 4px; font-size: 10px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-muted); font-weight: 700;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.dug-empty {
  text-align: center; padding: 40px 20px; font-size: 13px; color: var(--text-faint);
}

/* ── Fixture Selector Modal ──────────────────────────────────────── */
.dug-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 1000; display: flex; align-items: flex-end; justify-content: center;
}
.dug-modal {
  background: var(--surface-float); border-radius: 16px 16px 0 0; width: 100%; max-width: 500px;
  max-height: 80vh; overflow-y: auto; box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  animation: dugModalSlide 0.25s ease-out;
}
@keyframes dugModalSlide {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.dug-modal-bar {
  padding: 12px 14px; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(0,0,0,0.06); position: sticky; top: 0;
  background: var(--surface-float); z-index: 1;
}
.dug-modal-title { font-size: 15px; font-weight: 700; }
.dug-modal-close { font-size: 18px; cursor: pointer; color: var(--text-muted); padding: 4px; }
.dug-modal-body { padding: 8px 0; }

/* Fixture selector rows */
.dug-fsel {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--surface-float); margin: 0; border-bottom: 1px solid rgba(0,0,0,0.04);
}
.dug-fsel-teams { flex: 1; min-width: 0; }
.dug-fsel-name { font-size: 13px; font-weight: 600; }
.dug-fsel-meta { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.dug-fsel-empty { text-align: center; padding: 30px; font-size: 12px; color: var(--text-faint); }

/* Fixture action buttons */
.dug-fsel-action {
  padding: 6px 14px; border-radius: 8px; font-size: 11px; font-weight: 700;
  border: none; cursor: pointer; flex-shrink: 0; transition: filter 0.15s;
}
.dug-fsel-action:hover { filter: brightness(0.92); }
.dug-fsel-action--join { background: var(--brand); color: white; }
.dug-fsel-action--save { background: var(--brand-surface); color: var(--brand); border: 1.5px solid var(--brand); }
.dug-fsel-action--saved { background: var(--surface-sink); color: var(--text-faint); cursor: default; }

/* ── Toast ────────────────────────────────────────────────────────── */
.dug-toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-100px);
  background: var(--text-primary); color: var(--surface-float);
  padding: 10px 18px; border-radius: 10px; font-size: 12px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2); z-index: 2000;
  transition: transform 0.3s ease-out; max-width: 90vw; text-align: center;
}
.dug-toast--visible { transform: translateX(-50%) translateY(0); }
.dug-toast--brand { background: var(--brand); }
.dug-toast--red { background: #DC2626; }
.dug-toast--amber { background: #B45309; }

/* ═══════════════════════════════════════════════════════════════════════════════
   PREDICTIONS v2 — Standardised game header + pill styles
   ═══════════════════════════════════════════════════════════════════════════════ */

.pred-game-header {
  display: flex; align-items: center; padding: 10px 12px 7px; gap: 7px;
  background: var(--surface-float); border-bottom: 1px solid rgba(0,0,0,0.06);
}
.pred-gh-back { font-size: 17px; color: var(--text-secondary); cursor: pointer; padding: 2px 4px; }
.pred-gh-title { font-size: 14px; font-weight: 700; flex: 1; }

.pred-pill { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.pred-pill--open { background: #DCFCE7; color: #15803D; }
.pred-pill--live { background: #FEE2E2; color: #DC2626; }
.pred-pill--locked { background: #FEF3C7; color: #B45309; }
.pred-pill--done { background: var(--surface-sink); color: var(--text-muted); }

.pred-empty-state {
  text-align: center; padding: 40px 20px; font-size: 13px; color: var(--text-faint);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TEAMSHEET v2 — Pitch view with emojis and scores
   ═══════════════════════════════════════════════════════════════════════════════ */

.tsp-pitch {
  background: linear-gradient(to bottom, #2d7d46, #236b38);
  border-radius: 12px; margin: 7px 12px; padding: 14px 6px;
  position: relative; min-height: 240px;
}
.tsp-pitch-lines {
  position: absolute; inset: 0; border: 2px solid rgba(255,255,255,0.18); border-radius: 12px;
  pointer-events: none;
}
.tsp-pitch-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 50px; height: 50px; border: 2px solid rgba(255,255,255,0.12); border-radius: 50%;
  pointer-events: none;
}
.tsp-pitch-slot {
  position: absolute; width: 52px; text-align: center; transform: translateX(-50%);
}
.tsp-pitch-dot {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7); margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: white; font-weight: 700;
  background: rgba(0,0,0,0.25); position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tsp-pitch-cap {
  border-color: #F5A623; box-shadow: 0 0 6px rgba(245,166,35,0.5);
}
.tsp-pitch-emoji {
  position: absolute; top: -6px; right: -8px; font-size: 12px;
  pointer-events: none;
}
.tsp-pitch-pts {
  font-size: 9px; color: #4ADE80; font-weight: 800; margin-top: 1px;
}
.tsp-pitch-pts-cap { color: #F5A623; }

/* ═══════════════════════════════════════════════════════════════════════════════
   TEAMSHEET — Enhanced header with status pill
   ═══════════════════════════════════════════════════════════════════════════════ */

.tsp-pill { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; margin-left: auto; }
.tsp-pill--open { background: #DCFCE7; color: #15803D; }
.tsp-pill--live { background: #FEE2E2; color: #DC2626; }
.tsp-pill--locked { background: #FEF3C7; color: #B45309; }
.tsp-pill--done { background: var(--surface-sink); color: var(--text-muted); }

/* Feed events */
.tsp-feed-ev {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px;
  margin: 3px 12px; background: var(--surface-float); border-radius: 8px;
}
.tsp-feed-ev--hl { border-left: 3px solid #16A34A; background: #F0FDF4; }
.tsp-feed-ev--dim { border-left: 3px solid var(--surface-sink); opacity: 0.6; }
.tsp-feed-ev-icon { font-size: 14px; flex-shrink: 0; }
.tsp-feed-ev-info { flex: 1; min-width: 0; }
.tsp-feed-ev-player { font-size: 12px; font-weight: 700; }
.tsp-feed-ev-detail { font-size: 10px; color: var(--text-muted); }
.tsp-feed-ev-pts { font-size: 13px; font-weight: 800; color: #16A34A; flex-shrink: 0; }

/* Standings banner */
.tsp-standings-banner {
  text-align: center; padding: 14px; background: var(--surface-float);
  margin: 6px 12px; border-radius: 12px;
}
.tsp-standings-list { margin: 6px 12px; }
.tsp-standings-row { cursor: pointer; }
.tsp-standings-row:hover { background: var(--surface-sink); }

/* ═══════════════════════════════════════════════════════════════════════════════
   LIVE DRAFT v2 — Dark header, constraint bar, squad builder, feed, standings
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Header ──────────────────────────────────────────────────────── */
.dp-v2-header {
  background: #1A1814; color: #fff; padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
}
.dp-v2-back { font-size: 17px; color: #ccc; cursor: pointer; padding: 2px 4px; }
.dp-v2-match { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.dp-v2-badge { width: 22px; height: 22px; border-radius: 50%; object-fit: contain; }
.dp-v2-team { font-size: 12px; font-weight: 700; }
.dp-v2-score { font-size: 18px; font-weight: 800; letter-spacing: 2px; min-width: 40px; text-align: center; }
.dp-v2-v { font-size: 14px; color: #aaa; font-weight: 600; }
.dp-v2-phase {
  font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  background: rgba(255,255,255,0.15); color: #ccc; text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dp-v2-phase--live { background: #FEE2E2; color: #DC2626; }
.dp-v2-phase--picking { background: #DCFCE7; color: #15803D; }
.dp-v2-phase--done { background: rgba(255,255,255,0.1); color: #999; }

/* ── Constraint bar ─────────────────────────────────────────────── */
.dp-v2-cbar {
  display: flex; justify-content: center; gap: 18px;
  padding: 6px 12px; background: var(--surface-raised);
  border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 11px; color: var(--text-muted);
}
.dp-v2-cbar-item { display: flex; align-items: center; gap: 4px; }
.dp-v2-cbar-count { font-weight: 800; color: var(--text-primary); }
.dp-v2-cbar-limit { color: var(--text-faint); }
.dp-v2-cbar-warn { color: #DC2626; font-weight: 700; }

/* ── Submit button ──────────────────────────────────────────────── */
.dp-v2-submit {
  display: block; width: calc(100% - 24px); margin: 10px 12px;
  padding: 12px; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 700; text-align: center;
  cursor: pointer; transition: all 0.15s;
}
.dp-v2-submit--pri {
  background: var(--brand); color: var(--text-on-brand);
}
.dp-v2-submit--pri:active { transform: scale(0.98); opacity: 0.9; }
.dp-v2-submit--dis {
  background: var(--surface-sink); color: var(--text-faint);
  cursor: not-allowed; pointer-events: none;
}

/* ── Squad builder pitch (reuses tsp-pitch base) ────────────────── */
.dp-builder { margin-bottom: 6px; }

.dp-pitch-slot--empty .tsp-pitch-dot {
  border: 2px dashed rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.08);
  cursor: pointer;
}
.dp-pitch-slot--empty .tsp-pitch-dot:active { background: rgba(255,255,255,0.15); }

.dp-pitch-slot--filled .tsp-pitch-dot {
  border: 2px solid rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.25);
  cursor: pointer;
}
.dp-pitch-slot--cap .tsp-pitch-dot {
  border-color: #F5A623; box-shadow: 0 0 8px rgba(245,166,35,0.6);
}
.dp-pitch-cap-badge {
  position: absolute; top: -4px; left: -4px; background: #F5A623;
  color: #1A1814; font-size: 7px; font-weight: 900; width: 14px; height: 14px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* ── Position modal (bottom sheet) ──────────────────────────────── */
.dp-pos-modal {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.dp-pos-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.45);
}
.dp-pos-sheet {
  position: relative; background: var(--surface-float);
  border-radius: 16px 16px 0 0; max-height: 70vh;
  overflow-y: auto; padding-bottom: env(safe-area-inset-bottom, 12px);
  animation: dpSheetUp 0.25s ease-out;
}
@keyframes dpSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.dp-pos-handle {
  width: 36px; height: 4px; background: var(--surface-sink);
  border-radius: 2px; margin: 8px auto;
}
.dp-pos-title {
  padding: 4px 16px 10px; font-size: 14px; font-weight: 700;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.dp-pos-list { padding: 6px 0; }

.dp-pos-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer; transition: background 0.1s;
}
.dp-pos-row:active { background: var(--surface-hover); }
.dp-pos-row--disabled { opacity: 0.35; pointer-events: none; }
.dp-pos-row--picked { background: #F0FDF4; }

.dp-pos-team-stripe {
  width: 3px; height: 32px; border-radius: 2px; flex-shrink: 0;
}
.dp-pos-name { flex: 1; font-size: 13px; font-weight: 600; }
.dp-pos-team-tag { font-size: 10px; color: var(--text-faint); }
.dp-pos-stat {
  font-size: 12px; font-weight: 800; color: var(--brand);
  min-width: 40px; text-align: right;
}
.dp-pos-picked-badge {
  font-size: 9px; font-weight: 700; color: #15803D;
  background: #DCFCE7; padding: 2px 7px; border-radius: 8px;
}

/* ── Draft feed ─────────────────────────────────────────────────── */
.dp-feed-ev {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px;
  margin: 3px 12px; background: var(--surface-float); border-radius: 8px;
}
.dp-feed-ev--hl { border-left: 3px solid #16A34A; background: #F0FDF4; }
.dp-feed-ev--dim { border-left: 3px solid var(--surface-sink); opacity: 0.5; }
.dp-feed-ev-icon { font-size: 14px; flex-shrink: 0; }
.dp-feed-ev-info { flex: 1; min-width: 0; }
.dp-feed-ev-player { font-size: 12px; font-weight: 700; }
.dp-feed-ev-detail { font-size: 10px; color: var(--text-muted); }
.dp-feed-ev-pts { font-size: 13px; font-weight: 800; color: #16A34A; flex-shrink: 0; }
.dp-feed-ev-cap { font-size: 9px; color: #F5A623; font-weight: 700; margin-left: 2px; }

/* ── Draft standings ────────────────────────────────────────────── */
.dp-standings-banner {
  text-align: center; padding: 14px; background: var(--surface-float);
  margin: 6px 12px; border-radius: 12px;
}
.dp-standings-rank { font-size: 28px; font-weight: 900; color: var(--brand); }
.dp-standings-score { font-size: 16px; font-weight: 700; }
.dp-standings-list { margin: 6px 12px; }

/* ── Empty state placeholder ────────────────────────────────────── */
.dp-empty {
  text-align: center; padding: 40px 20px; font-size: 13px; color: var(--text-faint);
}

/* ── Player disabled overlay ────────────────────────────────────── */
.dp-player-disabled {
  opacity: 0.35; pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PROFILE v2 — Avg score cards, game history filter tabs
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Average score cards ─────────────────────────────────────────── */
.profile-avg-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 0 12px 10px;
}
.profile-avg-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-float); border-radius: 10px; padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.05);
}
.profile-avg-icon { font-size: 20px; flex-shrink: 0; }
.profile-avg-info { flex: 1; min-width: 0; }
.profile-avg-name { font-size: 11px; font-weight: 700; color: var(--text-primary); }
.profile-avg-score { font-size: 16px; font-weight: 800; color: var(--brand); line-height: 1.2; }
.profile-avg-meta { font-size: 9px; color: var(--text-faint); }

/* ── Game history filter tabs ────────────────────────────────────── */
.profile-hist-filters {
  display: flex; gap: 5px; padding: 6px 12px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.profile-hist-filters::-webkit-scrollbar { display: none; }
.profile-hist-fp {
  flex-shrink: 0; font-size: 11px; font-weight: 600;
  padding: 4px 12px; border-radius: 16px; border: none;
  background: var(--surface-sink); color: var(--text-muted); cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.profile-hist-fp--on {
  background: var(--brand); color: var(--text-on-brand);
}
.profile-hist-fp:active { transform: scale(0.96); }