/* ==========================================================================
   Arcade Cup — UI Refresh (site-wide)
   --------------------------------------------------------------------------
   Loaded AFTER styles.css. Clean, monochrome, wireframe-inspired aesthetic
   (reference: Game UI Wireframe Kit). Covers:
     - Home, header, library nav
     - Teams side panel
     - All game screens (shared primitives + per-game shells)
     - Shared modals and sub-panels

   To disable the refresh: remove the <link> tag for this file from
   index.html. The original styles.css takes over again.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Warm cream/off-white palette — wireframe feel */
  --rf-bg:          #efeeea;
  --rf-bg-alt:      #f7f6f2;
  --rf-surface:     #ffffff;
  --rf-ink:         #1a1a1a;   /* near-black primary text */
  --rf-ink-2:       #4a4a4a;   /* secondary text */
  --rf-ink-3:       #8a8a85;   /* muted/labels */
  --rf-line:        #d5d3cc;   /* hairline borders */
  --rf-line-strong: #1a1a1a;   /* heavy underlines, active rules */
  --rf-accent:      #2f9a4c;   /* single green accent */
  --rf-accent-ink:  #ffffff;
  --rf-shadow:      0 1px 0 rgba(0, 0, 0, 0.04);

  --rf-font-mono:    'Space Mono', ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --rf-font-body:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;

  /* Spacing scale */
  --rf-sp-1: 4px;
  --rf-sp-2: 8px;
  --rf-sp-3: 12px;
  --rf-sp-4: 16px;
  --rf-sp-5: 24px;
  --rf-sp-6: 32px;
  --rf-sp-8: 48px;
  --rf-sp-10: 64px;
}

/* --------------------------------------------------------------------------
   Base: page background + body typography
   -------------------------------------------------------------------------- */
body {
  background: var(--rf-bg) !important;
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-body) !important;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Kill the dark "cabinet" container look */
.app {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: var(--rf-sp-6) var(--rf-sp-5) var(--rf-sp-8) !important;
  width: min(1200px, 94vw) !important;
  margin: 0 auto !important;
  overflow: visible !important;
}
.app::before,
.app::after { display: none !important; }

/* --------------------------------------------------------------------------
   Header — wordmark left, utility actions right
   -------------------------------------------------------------------------- */
.header {
  margin: 0 0 var(--rf-sp-6);
  padding: 0 0 var(--rf-sp-4);
  border-bottom: 1px solid var(--rf-line);
  background: transparent !important;
  box-shadow: none !important;
  position: static !important;
}

.header-top {
  align-items: center !important;
  gap: var(--rf-sp-4);
}

.header h1,
#appTitle {
  font-family: var(--rf-font-mono) !important;
  font-weight: 700 !important;
  font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase;
  color: var(--rf-ink) !important;
  text-shadow: none !important;
}
/* Corner brackets flanking the wordmark (subtle game-UI nod) */
#appTitle::before { content: '[ '; color: var(--rf-ink-3); }
#appTitle::after  { content: ' ]'; color: var(--rf-ink-3); }

.header p {
  color: var(--rf-ink-2) !important;
  font-family: var(--rf-font-body);
}

.header-actions {
  gap: var(--rf-sp-3) !important;
  align-items: center !important;
}

/* Minimal text-link buttons for Home / Theme */
#goHomeBtn {
  background: transparent !important;
  border: 0 !important;
  padding: 6px 10px !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--rf-ink) !important;
  cursor: pointer;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color 120ms ease;
}
#goHomeBtn:hover,
#goHomeBtn:focus-visible {
  border-bottom-color: var(--rf-line-strong) !important;
  outline: none !important;
}

.theme-control {
  gap: var(--rf-sp-2) !important;
}
.theme-control label {
  font-family: var(--rf-font-mono) !important;
  font-size: 0.7rem !important;
  color: var(--rf-ink-3) !important;
  letter-spacing: 0.1em !important;
}
.theme-control select {
  font-family: var(--rf-font-mono) !important;
  font-size: 0.8rem !important;
  background: transparent !important;
  color: var(--rf-ink) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: 4px 8px !important;
  box-shadow: none !important;
}
.theme-control select:focus-visible {
  outline: 2px solid var(--rf-ink);
  outline-offset: 2px;
  border-color: var(--rf-ink) !important;
}

/* --------------------------------------------------------------------------
   Library Nav — kept hidden (JS uses the home picker instead);
   when visible, render as a clean underline-per-item nav
   -------------------------------------------------------------------------- */
.library-nav {
  gap: var(--rf-sp-5) !important;
  margin: 0 0 var(--rf-sp-5) !important;
  padding: 0 0 var(--rf-sp-3);
  border-bottom: 1px solid var(--rf-line);
  flex-wrap: wrap;
}
.library-nav .library-btn {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--rf-ink-2) !important;
  padding: 4px 0 6px !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  box-shadow: none !important;
  border-bottom: 2px solid transparent !important;
  transition: color 120ms ease, border-color 120ms ease;
  text-shadow: none !important;
  animation: none !important;
}
.library-nav .library-btn::after,
.library-nav .library-btn::before {
  display: none !important;
  content: none !important;
}
.library-nav .library-btn:hover,
.library-nav .library-btn:focus-visible {
  color: var(--rf-ink) !important;
  border-bottom-color: var(--rf-ink) !important;
  outline: none !important;
}
.library-nav .library-btn.active {
  color: var(--rf-ink) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--rf-line-strong) !important;
  box-shadow: none !important;
  animation: none !important;
}

/* --------------------------------------------------------------------------
   Home page container
   -------------------------------------------------------------------------- */
#homePage {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#homePage h2 {
  font-family: var(--rf-font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: var(--rf-ink-3) !important;
  margin: 0 0 var(--rf-sp-5) !important;
  text-align: left !important;
  text-shadow: none !important;
  padding-bottom: var(--rf-sp-2);
  border-bottom: 1px solid var(--rf-line);
}

/* --------------------------------------------------------------------------
   Mode selector — two big text-only cards
   -------------------------------------------------------------------------- */
.home-mode-choices {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: var(--rf-sp-4) !important;
  margin: 0 0 var(--rf-sp-6) !important;
  justify-content: stretch !important;
  align-items: stretch !important;
}

@media (max-width: 640px) {
  .home-mode-choices { grid-template-columns: 1fr; }
}

.home-mode-card {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: space-between;
  width: auto !important;
  min-height: 180px;
  padding: var(--rf-sp-5) var(--rf-sp-5) var(--rf-sp-4) !important;
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
  text-align: left;
}

.home-mode-card:hover,
.home-mode-card:focus-visible {
  border-color: var(--rf-ink) !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.home-mode-card.active {
  background: var(--rf-ink) !important;
  border-color: var(--rf-ink) !important;
  color: var(--rf-accent-ink) !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

/* Hide the neon PNGs (kept in DOM so JS/state don't break) */
.home-mode-card img,
#homeArcadeCupHeroImg,
#homeJustForFunHeroImg {
  display: none !important;
}

/* Kill the INSERT COIN pseudo + data-desc hover tooltip from the old style */
.home-mode-card::before,
.home-mode-card::after,
.home-mode-card[data-desc]:hover::after,
.home-mode-card[data-desc]:focus-visible::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Text labels inside the card */
.mode-card-label {
  display: flex;
  flex-direction: column;
  gap: var(--rf-sp-2);
  width: 100%;
}
.mode-card-title {
  font-family: var(--rf-font-mono);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: inherit;
}
.mode-card-subtitle {
  font-family: var(--rf-font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rf-ink-3);
}
.home-mode-card.active .mode-card-subtitle {
  color: rgba(255, 255, 255, 0.62);
}
.mode-card-meta {
  margin-top: var(--rf-sp-4);
  display: flex;
  align-items: center;
  gap: var(--rf-sp-2);
  font-family: var(--rf-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rf-ink-3);
}
.home-mode-card.active .mode-card-meta { color: rgba(255, 255, 255, 0.62); }
.mode-card-meta::before {
  content: '';
  width: 10px; height: 10px;
  border: 1px solid currentColor;
  display: inline-block;
}
.home-mode-card.active .mode-card-meta::before {
  background: var(--rf-accent);
  border-color: var(--rf-accent);
}

/* --------------------------------------------------------------------------
   Arcade Cup game picker + Just-for-fun buttons — underline nav style
   -------------------------------------------------------------------------- */
#homeArcadeCupPanel,
#homeJustForFunPanel {
  margin: 0 0 var(--rf-sp-5);
}

#homeArcadePicker {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: var(--rf-sp-5) var(--rf-sp-4) !important;
  padding: var(--rf-sp-4) 0 0 !important;
  margin: 0 !important;
}

#homeArcadePicker .library-btn,
#homeJustForFunPanel .fun-game-btn {
  font-family: var(--rf-font-mono) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  background: transparent !important;
  color: var(--rf-ink-2) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 4px 0 6px !important;
  min-height: auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
  overflow: visible !important;
  transition: color 120ms ease, border-color 120ms ease;
}

#homeArcadePicker .library-btn::after,
#homeArcadePicker .library-btn::before,
#homeJustForFunPanel .fun-game-btn::after,
#homeJustForFunPanel .fun-game-btn::before {
  display: none !important;
  content: none !important;
  animation: none !important;
}

#homeArcadePicker .library-btn:hover,
#homeArcadePicker .library-btn:focus-visible,
#homeJustForFunPanel .fun-game-btn:hover,
#homeJustForFunPanel .fun-game-btn:focus-visible {
  color: var(--rf-ink) !important;
  border-bottom-color: var(--rf-ink) !important;
  background: transparent !important;
  transform: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#homeArcadePicker .library-btn.active,
#homeJustForFunPanel .fun-game-btn.active {
  color: var(--rf-ink) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--rf-line-strong) !important;
  box-shadow: none !important;
}

#homeJustForFunPanel .word-hunt-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rf-sp-5) var(--rf-sp-4);
  padding: var(--rf-sp-4) 0 0;
}

/* --------------------------------------------------------------------------
   Settings toggle + panel on the home screen
   -------------------------------------------------------------------------- */
#homeSettingsToggleBtn {
  display: inline-flex;
  align-items: center;
  gap: var(--rf-sp-2);
  margin-top: var(--rf-sp-4) !important;
  padding: 8px 12px !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--rf-ink) !important;
  background: transparent !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color 120ms ease, background 120ms ease;
}
#homeSettingsToggleBtn:hover,
#homeSettingsToggleBtn:focus-visible {
  border-color: var(--rf-ink) !important;
  background: var(--rf-bg-alt) !important;
  outline: none !important;
}
#homeSettingsToggleBtn::before {
  content: '> ';
  color: var(--rf-ink-3);
  font-weight: 700;
}

#homeSettingsPanel {
  margin-top: var(--rf-sp-3) !important;
  padding: var(--rf-sp-4) !important;
  background: var(--rf-bg-alt) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#homeSettingsPanel .word-hunt-row {
  gap: var(--rf-sp-3);
  align-items: center;
}
#homeSettingsPanel label {
  font-family: var(--rf-font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rf-ink-3) !important;
}
#homeSettingsPanel select {
  font-family: var(--rf-font-mono) !important;
  font-size: 0.8rem !important;
  color: var(--rf-ink) !important;
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: 6px 10px !important;
  box-shadow: none !important;
}
#homeSettingsPanel select:focus-visible {
  outline: 2px solid var(--rf-ink);
  outline-offset: 2px;
}

#homeModesStatus {
  margin-top: var(--rf-sp-4) !important;
  font-family: var(--rf-font-mono);
  font-size: 0.75rem;
  color: var(--rf-ink-3);
  letter-spacing: 0.05em;
  text-align: left !important;
}

/* Kill the old home-settings-card (decorative cabinet image wrapper) */
.home-settings-card { display: none !important; }

/* --------------------------------------------------------------------------
   Screen transition overlay — make it cream instead of black
   -------------------------------------------------------------------------- */
.screen-transition {
  background: var(--rf-bg) !important;
}

/* ==========================================================================
   PART 2 — GAMES NAV + TEAMS SIDE PANEL
   ==========================================================================
   Target: (1) the top library-nav strip and the in-game arcade-scroller,
           (2) the #globalTeamsPanel aside with its Scores + Team Mgmt tabs.
   Leaves game-panel interiors untouched.
   ========================================================================== */

/* Team color tokens for scoreboard/lanes — muted, not neon */
:root {
  --rf-red:      #c43d3d;
  --rf-red-bg:   #f6e8e8;
  --rf-blue:     #2b6bc4;
  --rf-blue-bg:  #e6eef9;
  --rf-stripe:   #f3f2ee;   /* alternating row stripe */
  --rf-active:   #1a1a1a;   /* active row fill (table) */
}

/* --------------------------------------------------------------------------
   In-game top nav (library-nav) — horizontal underline nav
   -------------------------------------------------------------------------- */
@media (min-width: 980px) {
  body.arcade-stage-active .library-nav,
  body.fun-stage-active .library-nav {
    display: flex !important;
  }
}
/* (The existing base CSS controls when it's visible; we just style it.) */

/* --------------------------------------------------------------------------
   Arcade Scroller — in-game game rotation strip
   -------------------------------------------------------------------------- */
.arcade-scroller {
  gap: var(--rf-sp-3) !important;
  margin: 0 0 var(--rf-sp-4) !important;
  padding: var(--rf-sp-2) 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--rf-line) !important;
  border-bottom: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.arcade-scroller-track {
  gap: var(--rf-sp-4) !important;
  padding: 2px 0 !important;
}

/* Prev / Next arrow buttons — Figma "Arrow Buttons" style */
#arcadePrevBtn,
#arcadeNextBtn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.85rem !important;
  line-height: 1;
  transition: border-color 120ms ease, background 120ms ease;
}
#arcadePrevBtn:hover,
#arcadeNextBtn:hover,
#arcadePrevBtn:focus-visible,
#arcadeNextBtn:focus-visible {
  border-color: var(--rf-ink) !important;
  background: var(--rf-bg-alt) !important;
  outline: none !important;
}
#arcadePrevBtn:disabled,
#arcadeNextBtn:disabled {
  color: var(--rf-ink-3) !important;
  border-color: var(--rf-line) !important;
  background: transparent !important;
  cursor: not-allowed;
}

/* Arcade chips — the individual game items in the scroller (Tag style) */
.arcade-chip {
  white-space: nowrap;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--rf-ink) !important;
  background: transparent !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: 6px 10px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.arcade-chip:hover,
.arcade-chip:focus-visible {
  background: var(--rf-bg-alt) !important;
  border-color: var(--rf-ink) !important;
  outline: none !important;
}
.arcade-chip.active {
  background: var(--rf-ink) !important;
  color: var(--rf-accent-ink) !important;
  border-color: var(--rf-ink) !important;
}

/* --------------------------------------------------------------------------
   Global Teams Panel — wrapper
   -------------------------------------------------------------------------- */
.global-teams-panel {
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  background: var(--rf-surface) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
  color: var(--rf-ink) !important;
  padding: 0 !important;
  max-height: calc(100vh - 60px) !important;
  top: 90px !important;
}

.global-teams-head {
  padding: var(--rf-sp-4) var(--rf-sp-4) var(--rf-sp-3) !important;
  border-bottom: 1px solid var(--rf-line);
  margin: 0 !important;
  gap: var(--rf-sp-3);
}

.global-teams-panel h3,
#globalOverlayTitle {
  font-family: var(--rf-font-mono) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--rf-ink) !important;
  text-shadow: none !important;
  margin: 0 !important;
}

/* "Hide Tab" button — minimal text button */
#toggleGlobalTeamsBtn {
  font-family: var(--rf-font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--rf-ink-2) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
#toggleGlobalTeamsBtn:hover,
#toggleGlobalTeamsBtn:focus-visible {
  color: var(--rf-ink) !important;
  border-bottom-color: var(--rf-ink) !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   Scores / Team Management tabs (inside the panel)
   -------------------------------------------------------------------------- */
.global-teams-panel #globalTeamTabs {
  margin: 0 !important;
  padding: 0 var(--rf-sp-4) !important;
  gap: var(--rf-sp-5) !important;
  border-bottom: 1px solid var(--rf-line);
  background: transparent !important;
}

.global-teams-panel #globalTeamTabs button {
  flex: 0 0 auto !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--rf-ink-3) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  margin-bottom: -1px !important;   /* pull into the panel's bottom border */
  box-shadow: none !important;
  text-shadow: none !important;
  transition: color 120ms ease, border-color 120ms ease;
}
.global-teams-panel #globalTeamTabs button:hover,
.global-teams-panel #globalTeamTabs button:focus-visible {
  color: var(--rf-ink) !important;
  outline: none !important;
}
.global-teams-panel #globalTeamTabs button.active {
  color: var(--rf-ink) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--rf-ink) !important;
  box-shadow: none !important;
}

/* Body padding for the two tab panes */
#globalTeamsBody { padding: var(--rf-sp-4) !important; }
#globalTeamsScoresPane,
#globalTeamsManagePane {
  display: flex;
  flex-direction: column;
  gap: var(--rf-sp-4);
}

/* --------------------------------------------------------------------------
   Scoreboard Table — Scores tab
   -------------------------------------------------------------------------- */
.teams-score-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--rf-font-body);
  font-size: 0.88rem;
  background: var(--rf-surface);
}

.teams-score-table th,
.teams-score-table td {
  border: 0 !important;
  border-bottom: 1px solid var(--rf-line) !important;
  padding: 10px 12px !important;
  text-align: center;
}

.teams-score-table thead th {
  background: transparent !important;
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-bottom: 2px solid var(--rf-ink) !important;
  text-align: center;
}
.teams-score-table thead th:first-child { text-align: left; }

.teams-score-table tbody th {
  background: transparent !important;
  color: var(--rf-ink) !important;
  text-align: left;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.teams-score-table tbody tr:nth-child(even) th,
.teams-score-table tbody tr:nth-child(even) td {
  background: var(--rf-stripe) !important;
}

/* Red / Blue column tint — subtle (no neon) */
.teams-score-table .score-red-col,
#globalTeamsScoreboard .teams-score-table td:nth-child(2),
#globalPlayersScoreList td.players-team-red {
  color: var(--rf-red) !important;
  font-family: var(--rf-font-mono) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}
.teams-score-table .score-blue-col,
#globalTeamsScoreboard .teams-score-table td:nth-child(3),
#globalPlayersScoreList td.players-team-blue {
  color: var(--rf-blue) !important;
  font-family: var(--rf-font-mono) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

/* Total row — dark fill, inverted, matches Figma "selected row" pattern */
.teams-score-table .teams-score-total-row th,
.teams-score-table .teams-score-total-row td {
  background: var(--rf-active) !important;
  color: var(--rf-accent-ink) !important;
  font-weight: 700 !important;
  border-bottom: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.teams-score-table .teams-score-total-row th {
  font-family: var(--rf-font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.teams-score-table .teams-score-total-row td:nth-child(2) { color: #ff9b9b !important; }
.teams-score-table .teams-score-total-row td:nth-child(3) { color: #9cc0ff !important; }

/* Per-player sortable headers — render chevrons cleanly */
.players-sort-btn {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font: inherit;
  color: inherit !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
.players-sort-btn:hover { color: var(--rf-ink) !important; }
.players-sort-btn .sort-indicator {
  font-size: 0.9em;
  color: var(--rf-ink-3);
}
.players-sort-btn[data-sort-dir="asc"] .sort-indicator,
.players-sort-btn[data-sort-dir="desc"] .sort-indicator {
  color: var(--rf-ink);
}

/* Reset Points button — outline */
#resetGlobalPointsBtn {
  align-self: flex-start;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--rf-ink) !important;
  background: transparent !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
#resetGlobalPointsBtn:hover,
#resetGlobalPointsBtn:focus-visible {
  border-color: var(--rf-ink) !important;
  background: var(--rf-bg-alt) !important;
  outline: none !important;
}

.global-players-title {
  font-family: var(--rf-font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--rf-ink) !important;
  margin: 0 0 var(--rf-sp-2) !important;
}

/* --------------------------------------------------------------------------
   Team Management tab — toolbar + lanes
   -------------------------------------------------------------------------- */
#globalPlayersToolbar {
  gap: var(--rf-sp-2) !important;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: var(--rf-sp-3);
  border-bottom: 1px solid var(--rf-line);
}
#globalPlayersNameInput {
  flex: 1 1 160px;
  font-family: var(--rf-font-body) !important;
  font-size: 0.9rem !important;
  color: var(--rf-ink) !important;
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: 8px 10px !important;
  box-shadow: none !important;
}
#globalPlayersNameInput::placeholder { color: var(--rf-ink-3) !important; }
#globalPlayersNameInput:focus {
  outline: 2px solid var(--rf-ink);
  outline-offset: -1px;
  border-color: var(--rf-ink) !important;
}

/* Toolbar action buttons: Add, Randomize, Delete */
#globalPlayersAddBtn,
#globalTeamsRandomizeBtn,
#globalPlayersDeleteBtn {
  font-family: var(--rf-font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
#globalPlayersAddBtn {
  color: var(--rf-accent-ink) !important;
  background: var(--rf-ink) !important;
  border: 1px solid var(--rf-ink) !important;
}
#globalPlayersAddBtn:hover,
#globalPlayersAddBtn:focus-visible {
  background: #000 !important;
  outline: none !important;
}
#globalTeamsRandomizeBtn {
  color: var(--rf-ink) !important;
  background: transparent !important;
  border: 1px solid var(--rf-line) !important;
}
#globalTeamsRandomizeBtn:hover,
#globalTeamsRandomizeBtn:focus-visible {
  border-color: var(--rf-ink) !important;
  background: var(--rf-bg-alt) !important;
  outline: none !important;
}
#globalPlayersDeleteBtn {
  color: var(--rf-ink-2) !important;
  background: transparent !important;
  border: 1px solid var(--rf-line) !important;
  font-size: 0.9rem !important;
}
#globalPlayersDeleteBtn:hover,
#globalPlayersDeleteBtn:focus-visible {
  color: var(--rf-red) !important;
  border-color: var(--rf-red) !important;
  background: var(--rf-red-bg) !important;
  outline: none !important;
}

.players-select-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--rf-ink-2) !important;
}

/* Team lanes grid */
#globalTeamsManagePane .team-lanes,
.global-teams-panel .team-lanes {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: var(--rf-sp-3) !important;
}

.team-lane {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: var(--rf-sp-3) !important;
  box-shadow: none !important;
  min-height: 120px;
}
.team-lane[data-team="none"] {
  background: var(--rf-bg-alt) !important;
  border-color: var(--rf-line) !important;
}
.team-lane[data-team="red"] {
  background: var(--rf-surface) !important;
  border-color: var(--rf-line) !important;
  border-top: 3px solid var(--rf-red) !important;
}
.team-lane[data-team="blue"] {
  background: var(--rf-surface) !important;
  border-color: var(--rf-line) !important;
  border-top: 3px solid var(--rf-blue) !important;
}
.team-lane.drag-over {
  background: var(--rf-bg-alt) !important;
  box-shadow: inset 0 0 0 2px var(--rf-ink) !important;
}

.team-lane h3 {
  margin: 0 0 var(--rf-sp-3) !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--rf-ink) !important;
  text-shadow: none !important;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rf-line);
}

.team-list { min-height: 60px; }

.team-list li {
  background: var(--rf-bg-alt) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: 8px 10px !important;
  margin-bottom: 6px !important;
  box-shadow: none !important;
  color: var(--rf-ink) !important;
  cursor: grab;
  font-family: var(--rf-font-body);
  font-size: 0.88rem;
  font-weight: 500;
}
.team-list li:active { cursor: grabbing; }

.team-lane[data-team="red"] .team-list li {
  background: var(--rf-red-bg) !important;
  border-color: var(--rf-red) !important;
  color: var(--rf-ink) !important;
}
.team-lane[data-team="blue"] .team-list li {
  background: var(--rf-blue-bg) !important;
  border-color: var(--rf-blue) !important;
  color: var(--rf-ink) !important;
}
.team-lane[data-team="none"] .team-list li {
  background: var(--rf-surface) !important;
  border-color: var(--rf-line) !important;
  color: var(--rf-ink-2) !important;
}
.team-list li.dragging { opacity: 0.5; }

.team-player-name {
  font-family: var(--rf-font-body);
  font-size: 0.88rem;
  color: inherit;
}

/* Remove-player (x) button on each chip */
.remove-name-btn {
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: var(--rf-ink-3) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.remove-name-btn:hover,
.remove-name-btn:focus-visible {
  color: var(--rf-red) !important;
  border-color: var(--rf-red) !important;
  background: var(--rf-red-bg) !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   Collapsed "Teams" side-tab (when panel is hidden)
   -------------------------------------------------------------------------- */
.teams-open-tab {
  border-radius: 0 !important;
  padding: 12px 8px !important;
  min-width: 40px !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: var(--rf-ink) !important;
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  border-right: 0 !important;
  box-shadow: -2px 2px 0 rgba(0, 0, 0, 0.04) !important;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.teams-open-tab:hover,
.teams-open-tab:focus-visible {
  background: var(--rf-bg-alt) !important;
  border-color: var(--rf-ink) !important;
  outline: none !important;
}

/* Resize handle — simple triangle marker */
.global-panel-resize-handle {
  border-right: 2px solid var(--rf-ink-3) !important;
  border-bottom: 2px solid var(--rf-ink-3) !important;
  border-radius: 0 !important;
  opacity: 0.5;
}
.global-panel-resize-handle:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Small responsive tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .global-teams-panel {
    width: min(92vw, 520px) !important;
  }
  #globalTeamsManagePane .team-lanes,
  .global-teams-panel .team-lanes {
    grid-template-columns: 1fr !important;
  }
}

/* Override any dark theme-specific panel rules from base styles */
body[data-theme="plain"] .global-teams-panel,
body[data-theme="dark"] .global-teams-panel {
  background: var(--rf-surface) !important;
  color: var(--rf-ink) !important;
  border-color: var(--rf-line) !important;
}

/* ==========================================================================
   PART 3 — GAME SCREENS (shared primitives + per-game shells)
   --------------------------------------------------------------------------
   Strategy: the base stylesheet uses a dark, neon aesthetic everywhere. We
   override the shared primitives (.game-panel container, .word-hunt-row,
   .word-hunt-challenge, .status, .live-answers, buttons, inputs, chips,
   timers, modals) so the refresh propagates to every game with only a few
   spot-fixes per distinctive shell.
   ========================================================================== */

/* Team tokens (re-used throughout) --------------------------------------- */
:root {
  --rf-red:      #c43d3d;
  --rf-red-bg:   #f6e8e8;
  --rf-red-ink:  #8a1f1f;
  --rf-blue:     #2b6bc4;
  --rf-blue-bg:  #e6eef9;
  --rf-blue-ink: #1a3d78;

  --rf-chip-bg:  #f0eee8;
  --rf-chip-line: #d5d3cc;
}

/* --------------------------------------------------------------------------
   Shared game panel container
   -------------------------------------------------------------------------- */
.game-panel {
  background: transparent !important;
  color: var(--rf-ink) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.game-panel h2,
.game-panel h3 {
  font-family: var(--rf-font-mono) !important;
  color: var(--rf-ink) !important;
  text-shadow: none !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin: 0 0 var(--rf-sp-3) !important;
}

.game-panel h2 {
  font-size: 1.3rem !important;
  padding-bottom: var(--rf-sp-2) !important;
  border-bottom: 1px solid var(--rf-line) !important;
}

.game-panel h3 {
  font-size: 0.95rem !important;
}

.game-panel p,
.game-panel li,
.game-panel label,
.game-panel span:not(.badge):not(.sort-indicator):not(.mode-card-label):not(.mode-card-title):not(.mode-card-subtitle):not(.mode-card-meta) {
  color: var(--rf-ink) !important;
  text-shadow: none !important;
}

/* Re-assert the home mode card label colors so they beat any blanket rule. */
#homePage .home-mode-card .mode-card-title {
  color: var(--rf-ink) !important;
}
#homePage .home-mode-card .mode-card-subtitle,
#homePage .home-mode-card .mode-card-meta {
  color: var(--rf-ink-3) !important;
}
#homePage .home-mode-card.active .mode-card-title {
  color: var(--rf-surface) !important;
}
#homePage .home-mode-card.active .mode-card-subtitle,
#homePage .home-mode-card.active .mode-card-meta {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* The .word-hunt wrapper serves as the "page body" for each game.          */
.word-hunt,
.word-hunt-online,
.word-hunt-join,
.player-banner {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  box-shadow: var(--rf-shadow) !important;
  color: var(--rf-ink) !important;
}

.word-hunt {
  padding: var(--rf-sp-5) !important;
  margin: 0 0 var(--rf-sp-4) !important;
}

.word-hunt-online,
.word-hunt-join,
.player-banner {
  padding: var(--rf-sp-4) !important;
  margin: 0 0 var(--rf-sp-3) !important;
}

/* --------------------------------------------------------------------------
   Form rows, inputs, selects, buttons
   -------------------------------------------------------------------------- */
.word-hunt-row,
.controls {
  gap: var(--rf-sp-2) !important;
  margin: var(--rf-sp-2) 0 !important;
  align-items: center !important;
}

.word-hunt-row input,
.word-hunt-row select,
.word-hunt-row textarea,
.word-hunt-online input,
.word-hunt-online select,
.word-hunt-online textarea,
input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
select,
textarea {
  background: var(--rf-surface) !important;
  color: var(--rf-ink) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  font-family: var(--rf-font-body) !important;
  font-size: 0.9rem !important;
  padding: 0.5rem 0.65rem !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: border-color 120ms ease !important;
}

.word-hunt-row input:focus,
.word-hunt-row select:focus,
.word-hunt-online input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--rf-line-strong) !important;
  box-shadow: 0 0 0 1px var(--rf-line-strong) inset !important;
}

.word-hunt-row input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--rf-ink-3) !important;
  opacity: 1 !important;
}

/* Shared button styling (applies to all .word-hunt-row buttons + .controls) */
.word-hunt-row button,
.word-hunt-online button,
.controls button,
button.primary,
button.secondary {
  background: var(--rf-surface) !important;
  color: var(--rf-ink) !important;
  border: 1px solid var(--rf-line-strong) !important;
  border-radius: 0 !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 0.5rem 0.85rem !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transition: background 120ms ease, color 120ms ease !important;
}

.word-hunt-row button:hover,
.word-hunt-online button:hover,
.controls button:hover,
button.primary:hover {
  background: var(--rf-ink) !important;
  color: var(--rf-surface) !important;
}

.word-hunt-row button:active,
.word-hunt-online button:active,
.controls button:active { transform: translateY(1px) !important; }

.word-hunt-row button:disabled,
.word-hunt-online button:disabled,
.controls button:disabled,
button:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  background: var(--rf-surface) !important;
  color: var(--rf-ink) !important;
}

/* Primary call-to-action (rare full-bleed button) */
#wordHuntStartBtn,
#wordHuntSubmitBtn,
#codeNameStartBtn,
#wordTrainSubmitBtn,
#scrambleStartBtn,
#rebusSubmitBtn,
#wavelengthStartBtn,
#wavelengthGuessBtn,
#timelineTossStartBtn,
#boxCountSubmitBtn,
#tabooStartBtn,
#friendshipStartBtn {
  background: var(--rf-ink) !important;
  color: var(--rf-surface) !important;
  border-color: var(--rf-ink) !important;
}
#wordHuntStartBtn:hover,
#wordHuntSubmitBtn:hover,
#codeNameStartBtn:hover,
#wordTrainSubmitBtn:hover,
#scrambleStartBtn:hover,
#rebusSubmitBtn:hover,
#wavelengthStartBtn:hover,
#wavelengthGuessBtn:hover,
#timelineTossStartBtn:hover,
#boxCountSubmitBtn:hover,
#tabooStartBtn:hover,
#friendshipStartBtn:hover {
  background: var(--rf-accent) !important;
  border-color: var(--rf-accent) !important;
  color: var(--rf-accent-ink) !important;
}

/* Team-colored action buttons */
.team-red-btn {
  background: var(--rf-red-bg) !important;
  border: 1px solid var(--rf-red) !important;
  color: var(--rf-red-ink) !important;
}
.team-red-btn:hover {
  background: var(--rf-red) !important;
  color: #fff !important;
}
.team-blue-btn {
  background: var(--rf-blue-bg) !important;
  border: 1px solid var(--rf-blue) !important;
  color: var(--rf-blue-ink) !important;
}
.team-blue-btn:hover {
  background: var(--rf-blue) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Challenge / status / help / score / timer — the main info bar primitives
   -------------------------------------------------------------------------- */
.word-hunt-help {
  margin: 0 0 var(--rf-sp-4) !important;
  font-family: var(--rf-font-body) !important;
  font-size: 0.95rem !important;
  color: var(--rf-ink-2) !important;
  text-shadow: none !important;
}

.status {
  min-height: 1.3rem !important;
  margin: 0 0 var(--rf-sp-3) !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--rf-ink-2) !important;
  text-shadow: none !important;
}

.word-hunt-challenge {
  display: flex !important;
  gap: var(--rf-sp-3) !important;
  flex-wrap: wrap !important;
  margin: var(--rf-sp-3) 0 !important;
}

.score,
.timer,
.word-hunt-challenge div {
  min-width: 120px !important;
  padding: var(--rf-sp-2) var(--rf-sp-3) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  background: var(--rf-bg-alt) !important;
  color: var(--rf-ink) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.score span,
.timer span,
.word-hunt-challenge span {
  display: block !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--rf-ink-3) !important;
}

.score strong,
.timer strong,
.word-hunt-challenge strong {
  font-family: var(--rf-font-mono) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--rf-ink) !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
}

#firstLetter,
#lastLetter {
  font-size: 1.9rem !important;
  line-height: 1 !important;
  color: var(--rf-ink) !important;
}

/* Timer team-tinted states */
.timer.red {
  background: var(--rf-red-bg) !important;
  border-color: var(--rf-red) !important;
}
.timer.red strong,
.timer.red span { color: var(--rf-red-ink) !important; }

.timer.blue {
  background: var(--rf-blue-bg) !important;
  border-color: var(--rf-blue) !important;
}
.timer.blue strong,
.timer.blue span { color: var(--rf-blue-ink) !important; }

.timer.active {
  box-shadow: 0 0 0 2px var(--rf-ink) inset !important;
  transform: none !important;
}
.timer.red.active {
  box-shadow: 0 0 0 2px var(--rf-red) inset !important;
}
.timer.blue.active {
  box-shadow: 0 0 0 2px var(--rf-blue) inset !important;
}

/* Timer adjuster (Codenames pre-game) */
.timer-adjuster {
  background: var(--rf-bg-alt) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: 0.25rem 0.55rem !important;
}
.timer-adjuster-label {
  font-family: var(--rf-font-mono) !important;
  font-weight: 700 !important;
  color: var(--rf-ink-2) !important;
}
.timer-arrow-btn {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line-strong) !important;
  border-radius: 0 !important;
  color: var(--rf-ink) !important;
}
.timer-arrow-btn:hover {
  background: var(--rf-ink) !important;
  color: var(--rf-surface) !important;
}
.timer-adjuster-value {
  font-family: var(--rf-font-mono) !important;
  color: var(--rf-ink) !important;
}

/* Badges — small team chips */
.badge {
  width: auto !important;
  min-width: 60px !important;
  height: 26px !important;
  padding: 0 0.55rem !important;
  border-radius: 0 !important;
  border: 1px solid var(--rf-line-strong) !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.badge.red {
  background: var(--rf-red-bg) !important;
  color: var(--rf-red-ink) !important;
  border-color: var(--rf-red) !important;
}
.badge.blue {
  background: var(--rf-blue-bg) !important;
  color: var(--rf-blue-ink) !important;
  border-color: var(--rf-blue) !important;
}

/* Cards-left chip (Codenames remaining cards) */
.cards-left-chip {
  background: var(--rf-bg-alt) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 0.28rem 0.55rem !important;
}
.cards-left-chip strong {
  color: var(--rf-ink) !important;
  text-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Live answers / score lists (used by Word Hunt, Scrambled, Scattergories,
   Rebus, Taboo, Word Train, Codenames, Wavelength, Timeline Toss)
   -------------------------------------------------------------------------- */
.live-answers {
  margin: var(--rf-sp-3) 0 0 !important;
  padding-left: 0 !important;
  max-height: 220px !important;
  list-style: none !important;
  border: 1px solid var(--rf-line) !important;
  background: var(--rf-surface) !important;
}

.live-answers li {
  display: flex !important;
  align-items: center !important;
  gap: var(--rf-sp-2) !important;
  padding: 0.45rem 0.7rem !important;
  border-bottom: 1px solid var(--rf-line) !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.82rem !important;
  color: var(--rf-ink) !important;
  background: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.live-answers li:last-child { border-bottom: 0 !important; }
.live-answers li:nth-child(even) { background: var(--rf-bg-alt) !important; }

.live-answers li.manual-score-row span,
.live-answers li.score-row span {
  color: var(--rf-ink) !important;
}
.live-answers li.manual-score-row button,
.live-answers li .score-adjust-btn {
  background: var(--rf-surface) !important;
  color: var(--rf-ink) !important;
  border: 1px solid var(--rf-line-strong) !important;
  border-radius: 0 !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.75rem !important;
  padding: 0.18rem 0.45rem !important;
  min-width: 26px !important;
  min-height: 26px !important;
  box-shadow: none !important;
}
.live-answers li.manual-score-row button:hover,
.live-answers li .score-adjust-btn:hover {
  background: var(--rf-ink) !important;
  color: var(--rf-surface) !important;
}

/* Points leaderboard / scores lists — remove neon title color */
.global-players-title,
#pointsLeaderboard ~ *,
h3 {
  color: var(--rf-ink) !important;
  text-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Player banner / join QR / players list
   -------------------------------------------------------------------------- */
.player-banner {
  font-family: var(--rf-font-mono) !important;
  color: var(--rf-ink) !important;
}

.join-qr {
  background: var(--rf-surface) !important;
  padding: var(--rf-sp-2) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.players-list {
  margin: var(--rf-sp-3) 0 var(--rf-sp-4) !important;
}
.players-list li {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: 0.45rem 0.6rem !important;
  color: var(--rf-ink) !important;
  box-shadow: none !important;
}
.avatar {
  background: var(--rf-bg-alt) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 999px !important;
}

/* --------------------------------------------------------------------------
   Shared modals: winner modal (.winner-modal) + mine special modal
   -------------------------------------------------------------------------- */
.winner-modal,
.mine-special-modal {
  background: rgba(26, 26, 26, 0.45) !important;
  backdrop-filter: blur(2px) !important;
}

.winner-modal-card,
.mine-special-modal-card {
  width: min(440px, 92vw) !important;
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line-strong) !important;
  border-radius: 0 !important;
  padding: var(--rf-sp-5) !important;
  text-align: left !important;
  box-shadow: 0 8px 32px rgba(26, 26, 26, 0.18) !important;
  color: var(--rf-ink) !important;
}

.winner-modal-card h3,
.mine-special-modal-card h3 {
  font-family: var(--rf-font-mono) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin: 0 0 var(--rf-sp-3) !important;
  padding-bottom: var(--rf-sp-2) !important;
  border-bottom: 1px solid var(--rf-line) !important;
  color: var(--rf-ink) !important;
  text-shadow: none !important;
}

.winner-modal-card p,
.mine-special-modal-card p {
  font-family: var(--rf-font-body) !important;
  color: var(--rf-ink-2) !important;
  margin: 0 0 var(--rf-sp-3) !important;
}

.winner-modal-card.red {
  border-color: var(--rf-red) !important;
  background: var(--rf-red-bg) !important;
  box-shadow: 0 8px 32px rgba(196, 61, 61, 0.18) !important;
}
.winner-modal-card.red h3 { color: var(--rf-red-ink) !important; }

.winner-modal-card.blue {
  border-color: var(--rf-blue) !important;
  background: var(--rf-blue-bg) !important;
  box-shadow: 0 8px 32px rgba(43, 107, 196, 0.18) !important;
}
.winner-modal-card.blue h3 { color: var(--rf-blue-ink) !important; }

.mine-special-modal-close {
  background: transparent !important;
  border: 0 !important;
  color: var(--rf-ink-2) !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  padding: 0.2rem 0.4rem !important;
}
.mine-special-modal-close:hover {
  color: var(--rf-ink) !important;
  background: var(--rf-bg-alt) !important;
}

/* --------------------------------------------------------------------------
   Codenames — 5x5 board, HUD, corner scores, team corners
   -------------------------------------------------------------------------- */
.codenames-hud {
  gap: var(--rf-sp-3) !important;
}

.codenames-corner-score {
  background: var(--rf-bg-alt) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: 0.5rem 0.75rem !important;
  box-shadow: none !important;
}
.codenames-corner-score span {
  font-family: var(--rf-font-mono) !important;
  font-weight: 700 !important;
  color: var(--rf-ink) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 0.9rem !important;
}
.codenames-corner-score.team-red {
  background: var(--rf-red-bg) !important;
  border-color: var(--rf-red) !important;
}
.codenames-corner-score.team-red span { color: var(--rf-red-ink) !important; }
.codenames-corner-score.team-blue {
  background: var(--rf-blue-bg) !important;
  border-color: var(--rf-blue) !important;
}
.codenames-corner-score.team-blue span { color: var(--rf-blue-ink) !important; }

.codenames-corner-score .score-adjust-btn {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line-strong) !important;
  border-radius: 0 !important;
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.75rem !important;
  min-width: 26px !important;
  min-height: 26px !important;
  box-shadow: none !important;
}
.codenames-corner-score .score-adjust-btn:hover {
  background: var(--rf-ink) !important;
  color: var(--rf-surface) !important;
}

/* Codenames grid (.board + .card) */
.board {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  gap: var(--rf-sp-2) !important;
}

.card {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line-strong) !important;
  border-radius: 0 !important;
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
  font-weight: 700 !important;
  font-size: clamp(0.6rem, 1.2vw, 0.8rem) !important;
  letter-spacing: 0.05em !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background 120ms ease, color 120ms ease !important;
}
.card:hover:not(.revealed) {
  background: var(--rf-bg-alt) !important;
  border-color: var(--rf-ink) !important;
  box-shadow: none !important;
  transform: none !important;
}
.card:active:not(.revealed) {
  background: var(--rf-ink) !important;
  color: var(--rf-surface) !important;
  transform: none !important;
  box-shadow: none !important;
}
.card.revealed {
  border-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.card.revealed.neutral {
  background: var(--rf-chip-bg) !important;
  color: var(--rf-ink-2) !important;
  border-color: var(--rf-line) !important;
}
.card.revealed.red,
.card.team-red {
  background: var(--rf-red) !important;
  color: #fff !important;
}
.card.revealed.blue,
.card.team-blue {
  background: var(--rf-blue) !important;
  color: #fff !important;
}
.card.revealed.assassin {
  background: var(--rf-ink) !important;
  color: var(--rf-surface) !important;
}

.team-word-red { color: var(--rf-red) !important; }
.team-word-blue { color: var(--rf-blue) !important; }

/* --------------------------------------------------------------------------
   Wavelength — dial, scale, track, end labels, meta cards
   -------------------------------------------------------------------------- */
.wavelength-track {
  margin: var(--rf-sp-2) 0 var(--rf-sp-3) !important;
}
.wavelength-track span {
  font-family: var(--rf-font-mono) !important;
  font-size: 0.72rem !important;
  color: var(--rf-ink-3) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.wavelength-end-label {
  font-family: var(--rf-font-mono) !important;
  color: var(--rf-ink) !important;
  letter-spacing: 0.03em !important;
  text-shadow: none !important;
}
.wavelength-end-label > span {
  font-family: var(--rf-font-mono) !important;
  color: var(--rf-ink) !important;
}
.wavelength-arrow {
  color: var(--rf-ink-3) !important;
}
.wavelength-scale-tick {
  background: var(--rf-ink-3) !important;
}
.wavelength-scale-label {
  font-family: var(--rf-font-mono) !important;
  color: var(--rf-ink-3) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.wavelength-meta-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: var(--rf-sp-2) !important;
}
.wavelength-meta-cards > * {
  background: var(--rf-bg-alt) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: var(--rf-sp-2) var(--rf-sp-3) !important;
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.82rem !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.wavelength-meta-bar {
  border: 1px solid var(--rf-line) !important;
  background: var(--rf-bg-alt) !important;
  padding: var(--rf-sp-2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Wavelength sector colors — keep the hint but desaturate to fit */
.wavelength-base-sector { fill: var(--rf-chip-bg) !important; }
.wavelength-near-sector { fill: #e4e2dc !important; }
.wavelength-close-sector { fill: #d0cec7 !important; }
.wavelength-bull-sector { fill: var(--rf-accent) !important; opacity: 0.55 !important; }
.wavelength-target-needle { stroke: var(--rf-accent) !important; }
.wavelength-guess-needle { stroke: var(--rf-ink) !important; }
.wavelength-center-dot { fill: var(--rf-ink) !important; }

/* --------------------------------------------------------------------------
   Taboo — card stack
   -------------------------------------------------------------------------- */
.taboo-card {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line-strong) !important;
  border-radius: 0 !important;
  color: var(--rf-ink) !important;
  box-shadow: 0 2px 0 var(--rf-line) !important;
  text-shadow: none !important;
}
.taboo-target-card {
  background: var(--rf-ink) !important;
  color: var(--rf-surface) !important;
  border-color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.taboo-banned-card {
  background: var(--rf-red-bg) !important;
  border-color: var(--rf-red) !important;
  color: var(--rf-red-ink) !important;
}

/* --------------------------------------------------------------------------
   Timeline Toss — tiles, track, markers
   -------------------------------------------------------------------------- */
.timeline-toss-controls {
  gap: var(--rf-sp-2) !important;
}
.timeline-toss-controls select {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  color: var(--rf-ink) !important;
  border-radius: 0 !important;
}
.timeline-toss-stat {
  background: var(--rf-bg-alt) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: var(--rf-sp-2) var(--rf-sp-3) !important;
  font-family: var(--rf-font-mono) !important;
  color: var(--rf-ink) !important;
  box-shadow: none !important;
}
.timeline-toss-stat strong {
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
}
.timeline-toss-category-tile {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: var(--rf-sp-2) var(--rf-sp-3) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
}
.timeline-toss-category-tile:hover {
  background: var(--rf-bg-alt) !important;
}
.timeline-toss-category-tile.active {
  background: var(--rf-ink) !important;
  color: var(--rf-surface) !important;
  border-color: var(--rf-ink) !important;
}
.timeline-toss-event-card {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line-strong) !important;
  border-radius: 0 !important;
  color: var(--rf-ink) !important;
  box-shadow: 0 2px 0 var(--rf-line) !important;
  text-shadow: none !important;
}
.timeline-toss-event-label {
  font-family: var(--rf-font-body) !important;
  color: var(--rf-ink) !important;
}
.timeline-toss-event-year {
  font-family: var(--rf-font-mono) !important;
  color: var(--rf-ink-3) !important;
  letter-spacing: 0.05em !important;
}
.timeline-toss-track {
  background: var(--rf-bg-alt) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: var(--rf-sp-3) !important;
  box-shadow: none !important;
}
.timeline-toss-track-line {
  background: var(--rf-ink) !important;
}
.timeline-toss-grid.drag-over {
  outline: 2px dashed var(--rf-ink) !important;
  outline-offset: -2px !important;
}
.timeline-toss-actual-line {
  background: var(--rf-accent) !important;
}
.timeline-toss-track-year {
  font-family: var(--rf-font-mono) !important;
  color: var(--rf-ink-3) !important;
  font-size: 0.7rem !important;
}
.timeline-toss-marker {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line-strong) !important;
  border-radius: 0 !important;
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
}
.timeline-toss-marker.actual {
  background: var(--rf-accent) !important;
  color: var(--rf-accent-ink) !important;
  border-color: var(--rf-accent) !important;
}
.timeline-toss-marker.team-red {
  background: var(--rf-red-bg) !important;
  border-color: var(--rf-red) !important;
  color: var(--rf-red-ink) !important;
}
.timeline-toss-marker.team-blue {
  background: var(--rf-blue-bg) !important;
  border-color: var(--rf-blue) !important;
  color: var(--rf-blue-ink) !important;
}

/* --------------------------------------------------------------------------
   Count the Boxes — shell + team answers
   -------------------------------------------------------------------------- */
.box-count-shell {
  background: var(--rf-bg-alt) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: var(--rf-sp-4) !important;
}
.box-count-controls {
  gap: var(--rf-sp-2) !important;
}
.box-count-team-answer-red,
.box-count-team-answer-blue {
  background: var(--rf-bg-alt) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: var(--rf-sp-2) var(--rf-sp-3) !important;
  font-family: var(--rf-font-mono) !important;
  color: var(--rf-ink) !important;
  box-shadow: none !important;
}
.box-count-team-answer-red {
  background: var(--rf-red-bg) !important;
  border-color: var(--rf-red) !important;
  color: var(--rf-red-ink) !important;
}
.box-count-team-answer-blue {
  background: var(--rf-blue-bg) !important;
  border-color: var(--rf-blue) !important;
  color: var(--rf-blue-ink) !important;
}

/* --------------------------------------------------------------------------
   Sync / Mine — host UI, special cards, discard stage
   -------------------------------------------------------------------------- */
.mine-host-info-wrap,
.mine-host-toolbar {
  background: var(--rf-bg-alt) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.mine-info-title {
  font-family: var(--rf-font-mono) !important;
  color: var(--rf-ink) !important;
  text-shadow: none !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.mine-host-actions button,
.mine-host-controls button {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line-strong) !important;
  border-radius: 0 !important;
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
.mine-host-actions button:hover,
.mine-host-controls button:hover {
  background: var(--rf-ink) !important;
  color: var(--rf-surface) !important;
}
.mine-host-meta > div {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  padding: var(--rf-sp-2) !important;
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
}
.mine-host-meta #mineLives {
  color: var(--rf-red) !important;
}
.mine-host-qr {
  background: var(--rf-surface) !important;
  padding: var(--rf-sp-2) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
}
.mine-discard-stage {
  background: var(--rf-bg-alt) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
}
.mine-special-card {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  color: var(--rf-ink) !important;
  box-shadow: none !important;
}
.mine-special-card.selected {
  border-color: var(--rf-ink) !important;
  box-shadow: 0 0 0 2px var(--rf-ink) inset !important;
}
.mine-special-card.locked,
.mine-special-card.used {
  opacity: 0.45 !important;
}
.mine-special-card span {
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
}
.mine-special-selectors label {
  color: var(--rf-ink-2) !important;
  font-family: var(--rf-font-mono) !important;
}
.mine-special-selectors select {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  color: var(--rf-ink) !important;
  border-radius: 0 !important;
}
.mine-discard-pile,
.mine-discard-card,
.mine-discard-unlocked,
.mine-discard-unlocked-card {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  color: var(--rf-ink) !important;
  box-shadow: none !important;
}
.mine-discard-phase-tag {
  background: var(--rf-ink) !important;
  color: var(--rf-surface) !important;
  font-family: var(--rf-font-mono) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}
.mine-discard-unlocked-label,
.mine-discard-modal-item span {
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
}
.mine-discard-modal-list {
  gap: var(--rf-sp-2) !important;
}
.mine-discard-modal-item {
  background: var(--rf-bg-alt) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   Friendship Award — title card
   -------------------------------------------------------------------------- */
.friendship-award-title {
  background: var(--rf-ink) !important;
  color: var(--rf-surface) !important;
  border: 1px solid var(--rf-ink) !important;
  border-radius: 0 !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: var(--rf-sp-3) var(--rf-sp-4) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Unhinged — prompt box + hand cards
   -------------------------------------------------------------------------- */
.unhinged-prompt-box {
  background: var(--rf-ink) !important;
  color: var(--rf-surface) !important;
  border: 1px solid var(--rf-ink) !important;
  border-radius: 0 !important;
  padding: var(--rf-sp-4) !important;
  font-family: var(--rf-font-mono) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.unhinged-prompt-box strong#unhingedPromptText {
  color: var(--rf-surface) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
.unhinged-card {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line-strong) !important;
  border-radius: 0 !important;
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-body) !important;
  box-shadow: 0 2px 0 var(--rf-line) !important;
  text-shadow: none !important;
}
.unhinged-card:hover {
  background: var(--rf-bg-alt) !important;
  border-color: var(--rf-ink) !important;
}
.unhinged-card.selected {
  background: var(--rf-ink) !important;
  color: var(--rf-surface) !important;
  border-color: var(--rf-ink) !important;
}

/* --------------------------------------------------------------------------
   How's Yours — category wall / pills
   -------------------------------------------------------------------------- */
.hows-yours-word {
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
  text-shadow: none !important;
}
.hows-yours-category-wall {
  gap: var(--rf-sp-2) !important;
}
.hows-yours-category-pill {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 0.35rem 0.6rem !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.hows-yours-category-pill:hover {
  background: var(--rf-bg-alt) !important;
}
.hows-yours-category-pill.active {
  background: var(--rf-ink) !important;
  color: var(--rf-surface) !important;
  border-color: var(--rf-ink) !important;
}

/* --------------------------------------------------------------------------
   Agree to Disagree — round reveal
   -------------------------------------------------------------------------- */
.agree-round-reveal {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line-strong) !important;
  border-radius: 0 !important;
  color: var(--rf-ink) !important;
  padding: var(--rf-sp-4) !important;
  box-shadow: 0 2px 0 var(--rf-line) !important;
  text-shadow: none !important;
}
.agree-round-reveal.blurred {
  filter: blur(8px) !important;
}
.agree-vote-stamp-col,
.agree-vote-stamp-list {
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-mono) !important;
}

/* --------------------------------------------------------------------------
   Rebus — image container
   -------------------------------------------------------------------------- */
.rebus-image {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   Werewolf embed frame — neutralize the neon frame
   -------------------------------------------------------------------------- */
.werewolf-embed-wrap {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-top: var(--rf-sp-3) !important;
}

/* --------------------------------------------------------------------------
   Dark / plain theme overrides: force the refresh to stay light no matter
   what data-theme is set on <body>. These mirror the panel overrides at the
   top of this file and keep the game screens consistent.
   -------------------------------------------------------------------------- */
body[data-theme="plain"] .game-panel,
body[data-theme="dark"] .game-panel,
body[data-theme="plain"] .word-hunt,
body[data-theme="dark"] .word-hunt,
body[data-theme="plain"] .word-hunt-online,
body[data-theme="dark"] .word-hunt-online,
body[data-theme="plain"] .player-banner,
body[data-theme="dark"] .player-banner {
  background: var(--rf-surface) !important;
  color: var(--rf-ink) !important;
  border-color: var(--rf-line) !important;
}

/* --------------------------------------------------------------------------
   Final safety — kill stray neon text-shadows and glowing box-shadows
   that may still leak through on deeply nested elements.
   -------------------------------------------------------------------------- */
.game-panel *,
.winner-modal *,
.mine-special-modal * {
  text-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Override per-game h2 titles (base stylesheet assigns each game a neon
   color with !important, so we have to match their ID specificity).
   -------------------------------------------------------------------------- */
#codeNameGame h2,
#wordHuntGame h2,
#wordTrainGame h2,
#scrambleGame h2,
#rebusGame h2,
#tabooGame h2,
#wavelengthGame h2,
#scatterGame h2,
#timelineTossGame h2,
#boxCountGame h2,
#werewolfGame h2,
#howsYoursGame h2,
#unhingedGame h2,
#agreeGame h2,
#friendshipGame h2,
#mineGame h2 {
  color: var(--rf-ink) !important;
  text-shadow: none !important;
  font-family: var(--rf-font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* --------------------------------------------------------------------------
   Wavelength — kill the red/blue turn halo and the dial filter
   -------------------------------------------------------------------------- */
#wavelengthGame .wavelength-dial-wrap,
#wavelengthGame.turn-red .wavelength-dial-wrap,
#wavelengthGame.turn-blue .wavelength-dial-wrap,
body[data-theme="plain"] #wavelengthGame.turn-red .wavelength-dial-wrap,
body[data-theme="plain"] #wavelengthGame.turn-blue .wavelength-dial-wrap,
body[data-theme="dark"] #wavelengthGame.turn-red .wavelength-dial-wrap,
body[data-theme="dark"] #wavelengthGame.turn-blue .wavelength-dial-wrap {
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}
/* Re-introduce a subtle team-tint using an inset outline when a turn is set. */
/* Match the full specificity stack from the base (body[data-theme] + #id.class). */
#wavelengthGame.turn-red .wavelength-dial-wrap,
body[data-theme="plain"] #wavelengthGame.turn-red .wavelength-dial-wrap,
body[data-theme="dark"] #wavelengthGame.turn-red .wavelength-dial-wrap {
  box-shadow: 0 0 0 2px var(--rf-red) inset !important;
  filter: none !important;
}
#wavelengthGame.turn-blue .wavelength-dial-wrap,
body[data-theme="plain"] #wavelengthGame.turn-blue .wavelength-dial-wrap,
body[data-theme="dark"] #wavelengthGame.turn-blue .wavelength-dial-wrap {
  box-shadow: 0 0 0 2px var(--rf-blue) inset !important;
  filter: none !important;
}

/* Kill the glow-ring path inside the SVG (usually hidden, belt-and-braces). */
.wavelength-glow-ring { display: none !important; }

/* Dial numbers (SVG <text>): strip the arcade outline ("stroke") treatment
   so they render as clean monospace black on the cream sectors. */
#wavelengthGame .wavelength-scale-label,
body[data-theme="plain"] #wavelengthGame .wavelength-scale-label,
body[data-theme="dark"] #wavelengthGame .wavelength-scale-label,
.wavelength-scale-label {
  fill: var(--rf-ink) !important;
  color: var(--rf-ink) !important;
  stroke: none !important;
  stroke-width: 0 !important;
  paint-order: fill !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Tick marks on the dial — neutral gray line, no neon */
#wavelengthGame .wavelength-scale-tick,
body[data-theme="plain"] #wavelengthGame .wavelength-scale-tick,
body[data-theme="dark"] #wavelengthGame .wavelength-scale-tick,
.wavelength-scale-tick {
  stroke: var(--rf-ink-3) !important;
  stroke-width: 1.2 !important;
}

/* --------------------------------------------------------------------------
   Timeline Toss — defeat the dark track + cyan glows from base stylesheet
   -------------------------------------------------------------------------- */
#timelineTossGame .timeline-toss-track,
.timeline-toss-track {
  background: var(--rf-bg-alt) !important;
  border: 1px solid var(--rf-line) !important;
  box-shadow: none !important;
  min-height: 180px !important;
}

#timelineTossGame .timeline-toss-track-line,
.timeline-toss-track-line {
  background: transparent !important;
}

/* Neutralize the cyan gradient line drawn via ::before in base */
#timelineTossGame .timeline-toss-grid::before,
.timeline-toss-grid::before,
#timelineTossGame .timeline-toss-track-line::before,
.timeline-toss-track-line::before {
  background: var(--rf-ink) !important;
  box-shadow: none !important;
  height: 2px !important;
  border-radius: 0 !important;
}

#timelineTossGame .timeline-toss-track-year,
.timeline-toss-track-year {
  color: var(--rf-ink) !important;
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line) !important;
  box-shadow: none !important;
  font-family: var(--rf-font-mono) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em !important;
  padding: 0.1rem 0.3rem !important;
}
#timelineTossGame .timeline-toss-track-year::after,
.timeline-toss-track-year::after {
  background: var(--rf-line-strong) !important;
}

/* Markers — re-assert with higher specificity */
#timelineTossGame .timeline-toss-marker,
.timeline-toss-marker {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line-strong) !important;
  color: var(--rf-ink) !important;
  box-shadow: none !important;
  font-family: var(--rf-font-mono) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
}
#timelineTossGame .timeline-toss-marker::after,
.timeline-toss-marker::after {
  background: var(--rf-line-strong) !important;
}
#timelineTossGame .timeline-toss-marker.actual,
.timeline-toss-marker.actual {
  background: var(--rf-accent) !important;
  color: var(--rf-accent-ink) !important;
  border-color: var(--rf-accent) !important;
}
#timelineTossGame .timeline-toss-marker.actual::after,
.timeline-toss-marker.actual::after {
  background: var(--rf-accent) !important;
}
#timelineTossGame .timeline-toss-marker.team-red,
.timeline-toss-marker.team-red {
  background: var(--rf-red-bg) !important;
  border-color: var(--rf-red) !important;
  color: var(--rf-red-ink) !important;
}
#timelineTossGame .timeline-toss-marker.team-blue,
.timeline-toss-marker.team-blue {
  background: var(--rf-blue-bg) !important;
  border-color: var(--rf-blue) !important;
  color: var(--rf-blue-ink) !important;
}