/* ═══════════════════════════════════════════════════════════════
   MEG — Design System v2.0
   Brief: light, editorial, late-night matchday. Pub table energy.
   Palette: Paper / Ink / Forest Green / Red Card / Amber
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  /* Palette */
  --paper:       #F7F5F0;
  --white:       #FFFFFF;
  --ink:         #1A1814;
  --ink-muted:   #6B6760;
  --ink-faint:   #C8C5BE;
  --meg-green:   #2D5A3D;
  --meg-accent:  #4A9E6A;
  --red-card:    #C0392B;
  --amber:       #f5a623;
  --blue-pick:   #1d4ed8;
  --indigo-pick: #4f46e5;
  --border:      #E2DED6;

  /* Competition colours */
  --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-cs:   #c8102e;

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

  /* Type */
  --font-serif:  'DM Serif Display', Georgia, serif;
  --font-sans:   'DM Sans', system-ui, sans-serif;
  --font-mono:   'DM Mono', 'Courier New', monospace;

  /* Spacing scale */
  --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;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;

  /* z-index layers */
  --z-base:    1;
  --z-sticky:  10;
  --z-dropdown: 20;
  --z-sidebar: 30;
  --z-overlay: 50;
  --z-modal:   100;
  --z-toast:   150;
  --z-max:     200;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg:  0 4px 16px rgba(0,0,0,0.12);

  /* States */
  --disabled-opacity: 0.4;
  --hover-green: #244a31;
}

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

html, body {
  height: 100%;
  overflow: hidden;          /* prevent iOS from scrolling the page itself */
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  -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; }

/* ═══════════════════════════════════════════════════════════════
   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(--white);
  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: #fff;
  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: #fff;
  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;
}

/* ── 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: #fff;
  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: 0 var(--space-4);
  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(--paper);
  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(--white);
}

/* Burger — mobile only */
.burger-btn {
  display: none;
  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); }

/* Header view wrapper — always stacked title above subtitle */
.header-view {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
}

.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;
}

/* Room header — left info + right actions */
#headerRoomView {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

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

.header-room-hash {
  font-size: 15px;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.header-room-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-room-divider {
  width: 1px;
  height: 14px;
  background: var(--border);
  flex-shrink: 0;
}

.header-room-desc {
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
}

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


.header-icon-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  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;
  padding: 24px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  scroll-behavior: smooth;
}

.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; }

/* 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;
}
.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: #e8f0e8;
}
.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: #E8F0FE; color: #1a73e8;
  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;
  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;
}

.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(--white);
  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: #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;
}

.reveal-timer-bar {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.reveal-timer-fill {
  height: 100%;
  background: var(--amber);
  border-radius: 2px;
  transition: width 7s linear;
}

.reveal-timer-secs {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  width: 8px;
  text-align: right;
  flex-shrink: 0;
}

/* ─── 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: #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: #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: #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;
}

/* Draft timer strip */
.draft-timer-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.draft-timer-bar {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.draft-timer-fill {
  height: 100%;
  background: var(--amber);
  border-radius: 2px;
  transition: width 1s linear;
}

.draft-timer-secs {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}

/* 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: #fff9ed;
}
.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: #333; }
.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-timer-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 10px;
}

.pred-timer-fill {
  height: 100%;
  background: var(--amber);
  border-radius: 2px;
  width: 100%;
  transition: width 15s linear;
}

.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: #f0f8f3; color: var(--meg-green); }
.pred-btn.wrong   { border-color: var(--red-card); background: #fff5f5; color: var(--red-card); }
.pred-btn:disabled{ opacity: 0.4; cursor: default; }

/* 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: #f0f8f3; color: var(--meg-green); font-weight: 600; }
.scorer-btn.wrong   { border-color: var(--red-card); background: #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: #f7f9ff; }
.match-event-tile.meg-pick  { border-left-color: var(--indigo-pick); background: #f8f7ff; }

.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: #e8f0ff; color: var(--blue-pick); }
.event-pick-badge.megs  { background: #ede8ff; color: var(--indigo-pick); }

/* Sticky live clock bar — created by buildMatchEventTile, sits at top of game board */
body.mode-worst .match-clock-bar {
  background: #1e1010;
  border-bottom-color: #5a1a1a;
  color: #f0ddd5;
}
@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: #f0ddd5; }
body.mode-worst .clock-half { color: #c0a0a0; }

/* 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: #e74c3c;
  animation: pulseLive 1.2s infinite;
  flex-shrink: 0;
}

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

/* Dark mode overrides */
body.mode-worst .thread-live-bar {
  background: #1e1010;
  border-top-color: #5a1a1a;
}
body.mode-worst .tlb-commentary { color: #f5a623; }
body.mode-worst .tlb-pts        { color: #f0ddd5; }
body.mode-worst .tlb-side.right .tlb-pts { color: #b090ff; }
body.mode-worst .tlb-label      { color: #c0a0a0; }
body.mode-worst .tlb-clock      { color: #c0a0a0; }
body.mode-worst #threadScorebarMatchScore { color: #f0ddd5; }

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

.halftime-match {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.3px;
}

.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: 28px;
  color: var(--ink);
  font-weight: 400;
}

.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: #f5c6c0; background: #fff8f7; }
.swap-player.in  { border-color: #b8e6c8; background: #f5fff8; }

.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-timer-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 9px;
}

.swap-timer-fill {
  height: 100%;
  background: var(--amber);
  border-radius: 2px;
  width: 100%;
  transition: width 1s linear;
}

.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: #333; }
.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: #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: #fff9ef; }
.steal-player-btn.selected { border-color: var(--amber); background: #fff3d4; }
.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-bar {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.steal-timer-fill {
  height: 100%;
  background: var(--amber);
  border-radius: 2px;
  width: 100%;
}

.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: #f0f8f3; }
.result-side.loser  { border-color: #f5c6c0; background: #fff8f7; }

.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: #333; }

/* ═══════════════════════════════════════════════════════════════
   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: #e07070; }
.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); }

/* ─── 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: #8b2020; }
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; }

  /* 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
   ═══════════════════════════════════════════════════════════════ */

.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;
}

/* ═══════════════════════════════════════════════════════════════
   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: #EBF3EE;
  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: #EBF3EE;
  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: #EBF3EE;
  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: #FFF3F2;
  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-bar {
  position: relative;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 12px;
  overflow: hidden;
}
.trivia-timer-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
  background: var(--meg-accent);
  border-radius: 2px;
  transition: width 1s linear;
}
.trivia-timer-fill.urgent {
  background: var(--red-card);
}
.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: #e8f5ed;
  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: #e8f5ed; 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: #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-cp-timer-wrap { display: flex; align-items: center; gap: 8px; }
.dm-cp-timer-bar-track {
  flex: 1; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden;
}
.dm-cp-timer-bar {
  height: 100%; width: 100%; background: var(--meg-accent);
  border-radius: 2px; transition: width 0.25s linear;
}
.dm-cp-timer-sec {
  font-size: 11px; font-weight: 600; color: var(--ink-muted);
  min-width: 26px; text-align: right; font-variant-numeric: tabular-nums;
}
.dm-cp-timer-next { font-size: 11px; color: var(--ink-muted); font-style: italic; }
.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: #edf7f0;
  color: var(--meg-green);
  border: 1px solid #b6dfc4;
}
.dm-cp-self-chip.wrong {
  background: #fef5f0;
  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: #f0faf2; border-color: var(--meg-green); }
.dm-game-card-guess.wrong   { background: #fff5f5; border-color: #e57373; }
.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-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: #eef7f0; 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: #eef7f0;
  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);
}
.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: #f5a623; }
.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: #C0392B; }
/* 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: #C0392B; border-color: #C0392B; }
.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: #C0392B; }
.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-timer-bar { height: 3px; background: var(--meg-accent); border-radius: 2px; }
.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;
}
.rr-timer-bar {
  height: 100%;
  background: var(--meg-accent);
  border-radius: 2px;
  will-change: width;
}

/* 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;
}
.rr-var-timer-bar {
  height: 100%;
  background: var(--red-card);
  border-radius: 1px;
  will-change: width;
}

/* 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: white; }
.modal-footer {
  padding: 12px 20px 16px;
  display: flex;
  justify-content: flex-end;
}
.modal-btn-primary {
  background: var(--meg-green);
  color: white;
  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: #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-hash {
  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);
}

/* ── 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: #52C41A; }
.user-presence-badge.offline { background: var(--ink-muted); }

.room-member-presence.online  { background: #52C41A; }
.room-member-presence.offline { background: var(--ink-faint); }

/* ── Room header count ──────────────────────────────────────── */
.header-icon-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}
.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: #e53e3e;
  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: #e53e3e;
  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) ──────────────────────────────── */
.games-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.games-header { padding: 10px 16px 6px; }
.games-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);
}
.games-hub { padding: 8px 0; }
.games-section-title {
  padding: 8px 16px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.games-lb-empty {
  padding: 6px 16px 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}

/* ── 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); }

.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: #52C41A; }
.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 ─────────────────────────────── */
#headerDmView {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.header-dm-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.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);
}

/* 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-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: #FDEDED; color: var(--red-card, #c62828); }
.cgt-draft-badge { background: #E8F5E9; 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, #c62828);
  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: #eef7f0;
  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: #E8F5E9; color: var(--meg-green); }
.dugout-badge-live      { background: #FDEDED; 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 #FFBE0B;
}
.dugout-tile-draft.dugout-tile-live .game-tile-inner {
  box-shadow: 0 0 0 1px #FFBE0B, 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: #FFBE0B;
  background: linear-gradient(90deg, rgba(255,190,11,0.04) 0%, transparent 30%);
}
@keyframes draftPulse {
  0%, 100% { box-shadow: 0 0 0 1px #FFBE0B, 0 0 8px rgba(255,190,11,0.15); }
  50%      { box-shadow: 0 0 0 1px #FFBE0B, 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-timer-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.quiz-timer-fill {
  height: 100%;
  background: var(--meg-accent);
  width: 100%;
}
.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: #fff9c4; }
.wall-diff-2 { background: #c8e6c9; }
.wall-diff-3 { background: #b3d4f5; }
.wall-diff-4 { background: #f3d0f8; }
.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: #f9f9f7;
}
.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(--paper);
  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: 28px;
  color: var(--ink);
}

.auth-tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 32px;
  letter-spacing: 0.5px;
}

.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: #fef2f2;
  color: var(--red-card);
  border: 1px solid #fecaca;
  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: #fef3c7; color: #92400e; }
.mode-tag.best  { background: #dcfce7; color: #166534; }

/* 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, #e53e3e);
  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; }

/* ── 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: #fbbf24;
  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: #fbbf24;
  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 #fbbf24;
  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, #e63946);
  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: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.result-label-obliterated  { background: rgba(230,57,70,0.12);  color: #e63946; 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: #e63946;
  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: #eef7f0; border-color: var(--meg-green); }
.meg-picker-match-btn.selected { background: #eef7f0; 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: #f0f9f3;
}
.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: #eef7f0;
  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: #245030; }
.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: #245030; }
.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-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.meg-reveal-timer-fill {
  height: 100%;
  background: var(--meg-accent);
  border-radius: 2px;
  width: 100%;
}
.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-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.diff-timer-fill {
  height: 100%;
  background: var(--meg-green);
  border-radius: 2px;
  transition: width 5s linear;
}
.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;
}

/* ── 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: #c83c3c; }

/* ── 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: #c83c3c; }

/* ── 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 badge ───────────────────────────────────────────── */
.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);
}

/* ── Platform Feed tiles ─────────────────────────────────────────────────── */

.platform-feed-tile {
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.platform-feed-tile:hover {
  border-color: var(--accent, #4A7C59);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.pf-tile-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.pf-badge-press {
  background: #2c3e50;
  color: #fff;
}
.pf-badge-backpage {
  background: #d35400;
  color: #fff;
}
.pf-badge-draft {
  background: #27ae60;
  color: #fff;
}

.pf-tile-thumb {
  width: 100%;
  height: 140px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  margin-bottom: 8px;
}

.pf-tile-body {
  padding: 0;
}
.pf-tile-category {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted, #888);
  margin-bottom: 2px;
}
.pf-tile-headline {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink, #1a1a1a);
  margin-bottom: 4px;
}
.pf-tile-deck {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-muted, #666);
  margin-bottom: 6px;
}
.pf-tile-preview {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-muted, #666);
  margin-bottom: 6px;
}
.pf-tile-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-faint, #999);
}
.pf-tile-dot {
  color: var(--ink-faint, #ccc);
}

/* Draft highlight matches */
.pf-draft-matches {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0;
}
.pf-draft-match {
  font-size: 13px;
  color: var(--ink, #1a1a1a);
  padding: 4px 0;
  border-bottom: 1px solid var(--border-light, #eee);
}
.pf-draft-match:last-child {
  border-bottom: none;
}

/* 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: #27ae60; 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: #27ae60; }
.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: #150d0d;
}
body.mode-worst #threadReplies {
  background: #150d0d;
}
body.mode-worst #threadPanel .thread-header {
  background: #1e0f0f;
  border-bottom-color: #3d1a1a;
}
body.mode-worst #threadPanel .thread-input-bar {
  background: #1e0f0f;
  border-top-color: #3d1a1a;
}
body.mode-worst #threadPanel .thread-input-bar textarea,
body.mode-worst #threadPanel .thread-input-bar input {
  background: #2a1212;
  color: #f0ddd5;
  border-color: #5a2020;
}
body.mode-worst #threadPanel .game-block {
  background: #1e1010;
  border-color: #5a1a1a;
  color: #f0ddd5;
}
body.mode-worst #threadPanel .game-block-label {
  background: #8b1a1a;
  color: #fff;
}
body.mode-worst #threadPanel .game-block-title {
  color: #f5c5b5;
}
body.mode-worst #threadPanel .draft-player-chip {
  background: #2a1010;
  color: #f0ddd5;
  border-color: #5a1a1a;
}
body.mode-worst #threadPanel .draft-player-chip.selected {
  background: #7a1a1a;
  border-color: #c0392b;
  color: #fff;
}
body.mode-worst #threadPanel .draft-pos-label {
  color: #b07070;
}
body.mode-worst #threadPanel .draft-lock-btn {
  background: #c0392b;
  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: #8b1a1a;
  color: #fff;
}
body.mode-worst #threadPanel .msg-block {
  background: #1e1010;
  color: #f0ddd5;
}
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: #3d1a1a;
}
body.mode-worst #threadPanel .captain-tile {
  background: #2a1010;
  border-color: #5a1a1a;
  color: #f0ddd5;
}
body.mode-worst #threadPanel .captain-tile.selected {
  background: #7a1a1a;
  border-color: #c0392b;
  color: #fff;
}
body.mode-worst #threadPanel .dice-btn {
  border-color: #5a1a1a;
  color: #f5a623;
}
body.mode-worst #threadPanel .draft-leaderboard {
  background: #1e1010;
  border-color: #3d1a1a;
}
body.mode-worst #threadPanel .draft-lb-row {
  border-bottom-color: #3d1a1a;
  color: #f0ddd5;
}
body.mode-worst #threadPanel .draft-lb-row.mine {
  background: #2a0f0f;
}
body.mode-worst #threadPanel .match-event-tile {
  background: #1e1010;
  border-color: #3d1a1a;
}
body.mode-worst #threadPanel .result-headline { color: #f5c5b5; }
body.mode-worst #threadPanel .historical-result-label { color: #c0392b; }

/* ── 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: #f0ddd5;
}

/* 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: #c0a0a0; }
/* 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: #8b1a1a; 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: #2a1515;
  border-color: #5a2525;
}
body.mode-worst #threadPanel .difficulty-btn:hover {
  background: #361818;
  border-color: #7a3030;
}
body.mode-worst #threadPanel .difficulty-btn .diff-label { color: #f0ddd5; }
body.mode-worst #threadPanel .difficulty-btn .diff-sub   { color: #b09090; }
body.mode-worst #threadPanel .difficulty-intro           { color: #c0a0a0; }

/* Match selection tiles */
body.mode-worst #threadPanel .match-tile {
  background: #2a1515;
  border-color: #5a2020;
}
body.mode-worst #threadPanel .match-tile:hover  { background: #361818; border-color: #7a2a2a; }
body.mode-worst #threadPanel .match-tile.selected { background: #1a2a1a; border-color: #4a9e6a; }
body.mode-worst #threadPanel .match-tile-teams  { color: #f0ddd5; }
body.mode-worst #threadPanel .match-tile-meta   { color: #b09090; }

/* Match reveal text + spin button */
body.mode-worst #threadPanel .reveal-match-title  { color: #f5c5b5; }
body.mode-worst #threadPanel .reveal-match-meta   { color: #b09090; }
body.mode-worst #threadPanel .reveal-match-blurb  { color: #c0a0a0; }
body.mode-worst #threadPanel .reveal-spin-btn {
  background: #2a1515;
  border-color: #5a2020;
  color: #f0ddd5;
}
body.mode-worst #threadPanel .reveal-spin-btn:hover { background: #361818; border-color: #7a2a2a; }

/* Draft player pick buttons */
body.mode-worst #threadPanel .draft-player-btn {
  background: #2a1515;
  border-color: #5a2020;
}
body.mode-worst #threadPanel .draft-player-btn:hover    { background: #361818; border-color: #7a2a2a; }
body.mode-worst #threadPanel .draft-player-btn.selected { background: #5a1a1a; border-color: #c0392b; }
body.mode-worst #threadPanel .draft-player-btn.draft-picked { background: #1a0a0a; border-color: transparent; }
body.mode-worst #threadPanel .dp-name  { color: #f0ddd5; }
body.mode-worst #threadPanel .dp-meta  { color: #b09090; }
body.mode-worst #threadPanel .dp-taken { color: #b09090; }

/* Captain selection tiles */
body.mode-worst #threadPanel .captain-tile {
  background: #2a1515;
  border-color: #5a2020;
}
body.mode-worst #threadPanel .captain-tile:hover    { background: #361818; border-color: #7a2a2a; }
body.mode-worst #threadPanel .captain-tile.selected { background: #2a2010; border-color: var(--amber); }
body.mode-worst #threadPanel .captain-tile-name { color: #f0ddd5; }
body.mode-worst #threadPanel .captain-tile-pos  { color: #b09090; }
body.mode-worst #threadPanel .captain-tile-club { color: #b09090; }
body.mode-worst #threadPanel .dice-btn { color: #b09090; border-color: #5a2020; }
body.mode-worst #threadPanel .dice-btn:hover { color: #f0ddd5; border-color: #7a2a2a; }
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: #f5a623; }
body.mode-worst #threadPanel .event-delta.neg { color: #e07070; }
body.mode-worst #threadPanel .event-delta.neu { color: #c0a0a0; }

/* Dossier / standout scores */
body.mode-worst #threadPanel .dossier-pts.pos,
body.mode-worst #threadPanel .standout-pts.pos { color: #f5a623; }
body.mode-worst #threadPanel .dossier-pts.neg,
body.mode-worst #threadPanel .standout-pts.neg { color: #e07070; }
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: #1e1010;
  border-left-color: #3d1a1a;
}
body.mode-worst #threadPanel .match-event-tile.my-pick {
  background: rgba(160,40,40,0.15);
  border-left-color: #c0392b;
}
body.mode-worst #threadPanel .met-player { color: #f0ddd5 !important; }
body.mode-worst #threadPanel .met-team   { color: #c0a0a0 !important; }
body.mode-worst #threadPanel .met-min    { color: #8a6060 !important; }
body.mode-worst #threadPanel .met-delta.pos { color: #f5a623 !important; }
body.mode-worst #threadPanel .met-delta.neg { color: #e07070 !important; }
body.mode-worst #threadPanel .met-pick-tag {
  color: #f5a623 !important;
  background: rgba(245,166,35,0.12);
}

/* Squad drawer */
body.mode-worst #threadPanel .squad-drawer {
  background: #1e1010;
  border-top-color: #3d1a1a;
}
body.mode-worst #threadPanel .squad-drawer-handle { color: #f0ddd5; }
body.mode-worst #threadPanel .squad-drawer-pts    { color: #f5a623; }
body.mode-worst #threadPanel .squad-player-chip {
  background: #2a1010;
  color: #f0ddd5;
}
body.mode-worst #threadPanel .squad-player-chip.captain { background: rgba(245,166,35,0.15); }
body.mode-worst #threadPanel .spc-pts.pos { color: #f5a623; }
body.mode-worst #threadPanel .spc-pts.neg { color: #e07070; }

/* New dossier card (shareable full-time/halftime card) */
body.mode-worst #threadPanel .dossier-card {
  background: #1e1010;
  border-color: #5a1a1a;
}
body.mode-worst #threadPanel .dossier-card-header {
  background: #0d0505;
  border-bottom: 1px solid #3d1a1a;
}
body.mode-worst #threadPanel .dossier-card-header * { color: #f0ddd5 !important; }
body.mode-worst #threadPanel .dossier-match-name   { color: #c0a0a0 !important; }
body.mode-worst #threadPanel .dossier-match-phase  { color: #8a6060 !important; }
body.mode-worst #threadPanel .dossier-pts-hero     { color: #f0ddd5 !important; }
body.mode-worst #threadPanel .dossier-rank-hero    { color: #c0a0a0 !important; }
body.mode-worst #threadPanel .dossier-player-row   { border-bottom-color: #3d1a1a; }
body.mode-worst #threadPanel .dossier-player-row * { color: #f0ddd5 !important; }
body.mode-worst #threadPanel .dossier-pos-group-label { color: #8a6060 !important; }
body.mode-worst #threadPanel .dpr-pts.pos          { color: #f5a623 !important; }
body.mode-worst #threadPanel .dpr-pts.neg          { color: #e07070 !important; }
body.mode-worst #threadPanel .dossier-chip-line    { color: #c0a0a0; border-top-color: #3d1a1a; }
body.mode-worst #threadPanel .dossier-share-btn    { background: #8b1a1a; color: #fff; }
body.mode-worst #threadPanel .dossier-swap-btn     { background: #3d1a1a; color: #f0ddd5; }

/* Dossier overlay (appended to body, not #threadPanel — always dark) */
.dossier-overlay .dossier-card                  { background: #1e1010; border-color: #3d1a1a; }
.dossier-overlay .dossier-card-header           { background: #0d0505; border-bottom: 1px solid #3d1a1a; }
.dossier-overlay .dossier-card-header *         { color: #f0ddd5 !important; }
.dossier-overlay .dossier-match-name            { color: #c0a0a0 !important; }
.dossier-overlay .dossier-match-phase           { color: #8a6060 !important; }
.dossier-overlay .dossier-pts-hero              { color: #f0ddd5 !important; }
.dossier-overlay .dossier-rank-hero             { color: #c0a0a0 !important; }
.dossier-overlay .dossier-player-row            { border-bottom-color: #3d1a1a; }
.dossier-overlay .dossier-player-row *          { color: #f0ddd5 !important; }
.dossier-overlay .dossier-pos-group-label       { color: #8a6060 !important; }
.dossier-overlay .dpr-pts.pos                   { color: #f5a623 !important; }
.dossier-overlay .dpr-pts.neg                   { color: #e07070 !important; }
.dossier-overlay .dossier-chip-line             { color: #c0a0a0; border-top-color: #3d1a1a; }
.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); }

/* Pick badges */
body.mode-worst #threadPanel .event-pick-badge.yours { background: #4a2200; color: #f5a623; }
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: #f5a623;
  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: #1e0c0c;
  color: #f0ddd5;
  border-color: #5a2020;
}
body.mode-worst #threadPanel .pred-btn:hover  { background: #2e1212; border-color: #8b2020; }
body.mode-worst #threadPanel .pred-btn.selected { background: #8b1a1a; color: #fff; border-color: #c0392b; }
body.mode-worst #threadPanel .pred-btn.correct  { background: #0a2010; color: #6fcf97; border-color: #6fcf97; }
body.mode-worst #threadPanel .pred-btn.wrong    { background: #2a0a0a; color: #e07070; border-color: #e07070; }

/* Scorer question buttons (3-option) */
body.mode-worst #threadPanel .scorer-btn {
  background: #1e0c0c;
  color: #f0ddd5;
  border-color: #5a2020;
}
body.mode-worst #threadPanel .scorer-btn:hover   { background: #2e1212; border-color: #8b2020; }
body.mode-worst #threadPanel .scorer-btn.selected { background: #8b1a1a; color: #fff; border-color: #c0392b; }
body.mode-worst #threadPanel .scorer-btn.correct  { background: #0a2010; color: #6fcf97; border-color: #6fcf97; }
body.mode-worst #threadPanel .scorer-btn.wrong    { background: #2a0a0a; color: #e07070; border-color: #e07070; }

/* Coin toss buttons */
body.mode-worst #threadPanel .coin-btn {
  background: #1e0c0c;
  border-color: #5a2020;
}
body.mode-worst #threadPanel .coin-btn:hover { background: #2e1212; border-color: #8b2020; }
body.mode-worst #threadPanel .coin-btn-label { color: #f0ddd5; }

/* Swap offer */
body.mode-worst #threadPanel .swap-accept  { background: #8b1a1a; color: #fff; border-color: #c0392b; }
body.mode-worst #threadPanel .swap-decline { background: #2a1010; color: #c0a0a0; border-color: #5a2020; }
body.mode-worst #threadPanel .swap-player.out .swap-player-name { color: #e07070; }
body.mode-worst #threadPanel .swap-player.in  .swap-player-name { color: #f5a623; }

/* Coin flip animation */
body.mode-worst #threadPanel .coin-flip-reveal  { color: #f0ddd5; }
body.mode-worst #threadPanel .coin-flip-winner-name { color: #f5a623; }

/* Result tier label */
body.mode-worst #threadPanel .result-tier-label { color: #c0a0a0; }

/* Good / Bad / Ugly tiles */
body.mode-worst #threadPanel .gbu-tile           { border-color: #3d1a1a; }
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: #e07070; }
body.mode-worst #threadPanel .gbu-ugly  .gbu-tile-head { background: rgba(80,60,20,0.2);  color: #c0a0a0; }
body.mode-worst #threadPanel .gbu-player-name   { color: #f0ddd5; }
body.mode-worst #threadPanel .gbu-player-label  { color: #8a7070; }
body.mode-worst #threadPanel .gbu-player-pts.pos  { color: #f5a623; }
body.mode-worst #threadPanel .gbu-player-pts.neg  { color: #e07070; }
body.mode-worst #threadPanel .gbu-player-pts.zero { color: #8a7070; }

/* RC event tooltip */
body.mode-worst #threadPanel .rc-event-tooltip { background: #f0ddd5; color: #1a0a0a; }

/* 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, #8b1a1a, #c0392b, #8b1a1a);
}

/* ── DM game hub tile (in DM chat) ──────────────────────────────────────────── */
.dm-hub-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
  margin: 4px 0;
}
.dm-hub-tile:active { background: 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(--ink); }
.dm-hub-tile-sub { font-size: 12px; color: var(--ink-muted); margin-top: 1px; }
.dm-hub-tile-arrow { font-size: 18px; color: var(--ink-faint); }

/* ── 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; }

/* ── 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;
}

/* ── 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 ───────────────────────────────────── */
.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; }
.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; }
.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);
}

/* 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: 32px; font-weight: 800; letter-spacing: 2px; }
.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; }

/* ── Chip broadcast card (morning preview / end-of-day recap) ── */
.chip-broadcast-card {
  margin: 6px 12px;
  border-radius: 8px;
  background: var(--surface-2, #1a1a1a);
  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: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink, #1A1814);
  padding: 12px 20px 4px;
  margin: 0;
}

/* 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: #FFF8E1;
  border-left: 3px solid var(--amber, #f5a623);
  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;
}
.bp-meg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--meg-green, #2D5A3D);
  color: #fff;
  font-family: var(--font-serif, 'DM Serif Display', Georgia, serif);
  font-size: 14px;
  font-weight: 400;
  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: #EDEAE3;
  border-color: var(--ink-faint, #C8C5BE);
}
.bp-reaction-pill.mine {
  background: #E8F0EB;
  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;
}

/* ── 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: #C0392B;
  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 — full-height editorial card with dark background */
.bp-card-rated {
  background: linear-gradient(135deg, #1a1814 0%, #2D5A3D 100%);
  padding: 28px 24px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bp-rated-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.bp-rated-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.2);
}
.bp-rated-initial {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif, 'DM Serif Display', Georgia, serif);
  font-size: 28px;
  color: #fff;
  font-weight: 400;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.2);
}
.bp-rated-name {
  font-family: var(--font-serif, 'DM Serif Display', Georgia, serif);
  font-size: 22px;
  color: #fff;
  line-height: 1.2;
}
.bp-rated-team {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-top: 2px;
  color: rgba(255,255,255,0.6);
}
.bp-rated-stats {
  display: flex;
  gap: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: auto;
}
.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);
}

/* 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: 24px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink, #1A1814);
  margin: 8px 0 6px;
}
.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 ──────────────────────────── */
.ticker-thread-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface-2, #f5f5f5);
  font-size: 13px;
  border-radius: 4px;
  margin: 0 0 8px;
  border-left-width: 3px;
  border-left-style: solid;
}
.tth-emoji { font-size: 15px; }
.tth-player { font-weight: 600; color: var(--ink); flex: 1; }
.tth-min { color: var(--ink-muted); font-size: 12px; }
.tth-match { color: var(--ink-muted); font-size: 12px; font-family: var(--font-mono); }

/* ── 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-bar {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.trivia-timer-fill {
  height: 100%;
  width: 100%;
  background: var(--meg-green);
  border-radius: 2px;
  transition: width 30s linear;
}
.trivia-timer-fill.urgent { background: var(--red-card); }
.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: #27ae60 !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-wrap .pred-timer-bar { flex: 1; margin-bottom: 0; }
.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: #2d9e57; border-color: #2d9e57; }
.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-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: #d9534f; color: #d9534f; }
.huddle-leave-btn:hover { background: #d9534f; color: white; border-color: #d9534f; }

/* ══════════════════════════════════════════════════════════════════════════════
   THE TEAMSHEET — Game Week Squad Draft
   ══════════════════════════════════════════════════════════════════════════════ */

.teamsheet-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  gap: 16px;
  background: var(--paper);
}

/* Header */
.ts-header {
  text-align: center;
  padding: 20px 16px 12px;
}
.ts-title {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--ink);
  letter-spacing: 0.5px;
}
.ts-round {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--meg-green);
  margin-top: 4px;
}
.ts-meta {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 6px;
}
.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: 8px;
}

/* Fixture bar */

/* Progress */
.ts-progress {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.ts-progress-label { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.ts-progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.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 { font-size: 12px; color: var(--ink-muted); font-family: var(--font-mono); }
.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 */
.ts-review { display: flex; flex-direction: column; gap: 16px; }
.ts-review-title { font-family: var(--font-serif); font-size: 20px; 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: #245a32; }
.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: 6px;
}
.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: 2px;
  padding: 10px 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;
  gap: 4px;
  padding: 10px 4px 8px;
  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: #245a32; }

/* ── 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: 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;
}

/* ── 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);
}

/* ── 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: hidden;
  padding: 0;
}

/* ── Event feed (scrollable upper area) ──────────────────────────────── */
.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;
}

/* ── 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;
  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;
}
.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: #e53e3e;
  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: #c0392b;
  box-shadow: 0 0 0 1px rgba(192,57,43,0.12);
}
.carousel-cta-live {
  background: #c0392b;
  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;
  border: 2px solid var(--accent);
  background: linear-gradient(135deg, var(--bg-primary) 0%, #e8f0e4 100%);
}
.carousel-ts-strip {
  background: var(--red-card);
  color: #fff;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 4px 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: 10px 8px 8px;
}
.carousel-ts-round {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.2;
}
.carousel-ts-fixtures {
  font-size: 11px;
  color: var(--text-secondary);
}
.carousel-ts-status {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.2px;
  width: 100%;
  text-align: center;
}
.ts-status-pre {
  background: rgba(245, 166, 35, 0.15);
  color: #a07010;
  border: 1px solid rgba(245, 166, 35, 0.4);
}
.ts-status-open {
  background: rgba(45, 90, 61, 0.12);
  color: var(--meg-green);
  border: 1px solid rgba(45, 90, 61, 0.3);
}
.ts-status-locked {
  background: rgba(0,0,0,0.06);
  color: var(--ink-muted);
  border: 1px solid var(--border);
}
.ts-status-done {
  background: rgba(0,0,0,0.04);
  color: var(--ink-faint);
  border: 1px solid var(--border);
}
.carousel-ts-entrants {
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
}
.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, #c0392b);
}
.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; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   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-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: #e8f5e9; }
.dp-feed-pts.neg { color: var(--red-card); background: #fce4ec; }

.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-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; }

/* ── 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: #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: #fce4ec; color: var(--red-card); }
.dp-lb-mode-best { background: #e3f2fd; 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: absolute;
  inset: 0;
  z-index: 110;
  background: var(--paper);
  overflow: hidden;
}
.tgp-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;
}
.tgp-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.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); }

/* Pinned game board (Career Path clue list, Ten-able grid) */
.tgp-board {
  flex-shrink: 0;
  padding: 12px 14px 0;
  overflow-y: auto;
  max-height: 55%;
}
.tgp-board:empty { display: none; }

/* Scrollable replies (result cards, feedback) */
.tgp-replies {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 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; }

/* ── 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); }

/* 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;
}
.pq-opt-btn:hover:not(:disabled) { border-color: var(--meg-green); background: #f0f7f1; }
.pq-opt-btn:disabled { cursor: default; }
.pq-opt-btn.pq-opt-selected { border-color: var(--meg-green); background: #e8f5ea; color: var(--meg-green); font-weight: 600; }
.pq-opt-btn.pq-opt-correct   { border-color: var(--meg-green); background: #e8f5ea; color: var(--meg-green); font-weight: 600; }
.pq-opt-btn.pq-opt-wrong     { border-color: var(--neg);       background: #fdeaea; color: var(--neg); }

/* Timer */
.pq-timer-wrap {
  width: 100%;
  max-width: 380px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.pq-timer-fill {
  height: 100%;
  background: var(--meg-accent);
  border-radius: 2px;
  width: 100%;
  will-change: width;
}

/* 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: #f8fef9; }
.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;
}

/* ═══════════════════════════════════════════════════════════════
   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: #ccc;
  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 #f0f0f0;
}

.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 #f0f0f0;
}

.team-pill {
  background: #f0f0f0;
  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: #e0e0e0;
  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: #f8f8f8;
  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-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: #f8f8f8;
  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: #f8f8f8;
  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 #f0f0f0;
  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 #f0f0f0;
  align-items: center;
  font-size: 13px;
}

.profile-history-row:last-child {
  border-bottom: none;
}

.profile-history-row.winner {
  background: #f0f8f4;
}

.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);
}

/* ══════════════════════════════════════════════════════════════════════════
   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); }

/* 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: #e8f5e9; color: var(--meg-green); }
.admin-state-scheduled, .admin-state-unknown { background: #fff3e0; 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: #e8f5e9; 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: #e8f5e9; color: var(--meg-green); }
.admin-verdict-false { background: #ffebee; 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;
  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;
}
.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); }

/* 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 button styling */
.room-share-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   PREDICTION LEAGUE
   ═══════════════════════════════════════════════════════════════ */

.prediction-panel {
  border-bottom: 1px solid var(--border);
  background: var(--white);
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}






@keyframes pred-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}




.pred-tab.active {
  color: var(--meg-green);
  border-bottom-color: var(--meg-green);
}

.pred-tab:hover:not(.active) { color: var(--ink); }














.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.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); }





















.pred-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(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, #e74c3c);
  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);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* === 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: #e74c3c;
  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: #fff3cd;
  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, #e53e3e);
  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: #e63946;
  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: #e63946;
}
/* 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: #f5f5f5;
  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 - old predictions UI — .pred-fixtures */
.pred-fixtures { padding: 8px 16px; }
/* DEAD - old predictions UI — .pred-fixture */
.pred-fixture {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
/* DEAD - old predictions UI — .pred-fixture:last-child */
.pred-fixture:last-child { border-bottom: none; }
/* DEAD - old predictions UI — .pred-fix-time */
.pred-fix-time {
  width: 50px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  text-align: center;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* DEAD - old predictions UI — .pred-live-dot */
.pred-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-card);
  animation: pred-pulse 1.5s infinite;
  flex-shrink: 0;
}
/* DEAD - old predictions UI — .pred-fix-teams */
.pred-fix-teams { flex: 1; min-width: 0; }
/* DEAD - old predictions UI — .pred-fix-row */
.pred-fix-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
/* DEAD - old predictions UI — .pred-team-name */
.pred-team-name {
  flex: 1;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* DEAD - old predictions UI — .pred-score-input */
.pred-score-input {
  width: 36px;
  height: 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  flex-shrink: 0;
}
/* DEAD - old predictions UI — .pred-score-input:focus */
.pred-score-input:focus {
  border-color: var(--meg-green);
  background: var(--white);
}
/* DEAD - old predictions UI — .pred-score-input::placeholder */
.pred-score-input::placeholder {
  color: var(--ink-faint);
  font-weight: 400;
}
/* DEAD - old predictions UI — .pred-pick-display */
.pred-pick-display {
  width: 36px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--meg-green);
  background: rgba(45, 90, 61, 0.08);
  border-radius: 6px;
  flex-shrink: 0;
}
/* DEAD - old predictions UI — .pred-actual-score */
.pred-actual-score {
  width: 28px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}
/* DEAD - old predictions UI — .pred-result-badge */
.pred-result-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}
/* DEAD - old predictions UI — .pred-submit-btn */
.pred-submit-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 12px 16px 16px;
  padding: 12px;
  background: var(--meg-green);
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
/* DEAD - old predictions UI — .pred-submit-btn:hover:not(:disabled) */
.pred-submit-btn:hover:not(:disabled) { background: #245030; }
/* DEAD - old predictions UI — .pred-submit-btn:disabled */
.pred-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* DEAD - old predictions UI — .pred-standings */
.pred-standings { padding: 8px 16px; }
/* DEAD - old predictions UI — .pred-standing-row */
.pred-standing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
/* DEAD - old predictions UI — .pred-standing-row:last-child */
.pred-standing-row:last-child { border-bottom: none; }
/* DEAD - old predictions UI — .pred-standing-me */
.pred-standing-me {
  background: rgba(45, 90, 61, 0.06);
  border-radius: 8px;
  margin: 0 -8px;
  padding: 10px 8px;
}
/* DEAD - old predictions UI — .pred-pos */
.pred-pos {
  width: 28px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
}
/* DEAD - old predictions UI — .pred-standing-avatar */
.pred-standing-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
/* DEAD - old predictions UI — .pred-standing-name */
.pred-standing-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* DEAD - old predictions UI — .pred-standing-pts */
.pred-standing-pts {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--meg-green);
  flex-shrink: 0;
}
/* DEAD - old predictions UI — .pred-standing-pts small */
.pred-standing-pts small {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-muted);
}
/* DEAD - old predictions UI — .pred-standing-detail */
.pred-standing-detail {
  font-size: 11px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
/* DEAD - old predictions UI — .pred-empty */
.pred-empty {
  padding: 32px 20px;
  text-align: center;
}
/* DEAD - old predictions UI — .pred-empty-icon */
.pred-empty-icon { font-size: 36px; margin-bottom: 12px; }
/* DEAD - old predictions UI — .pred-empty-title */
.pred-empty-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
/* DEAD - old predictions UI — .pred-empty-desc */
.pred-empty-desc {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
  max-width: 320px;
  margin: 0 auto 16px;
}
/* DEAD - old predictions UI — .pred-open-btn */
.pred-open-btn {
  background: var(--meg-green);
  color: var(--white);
  border: none;
  padding: 10px 24px;
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
/* DEAD - old predictions UI — .pred-open-btn:hover */
.pred-open-btn:hover { background: #245030; }
/* DEAD - old predictions UI — .pred-no-standings */
.pred-no-standings {
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}
/* DEAD - old predictions UI — .pred-toast */
.pred-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-family: var(--font-body);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  z-index: 9999;
}
/* 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;
}