/* ══════════════════════════════════════════════════════════════════
   BTC Arcade — Design Tokens
   ──────────────────────────────────────────────────────────────────
   Single source of truth. Change a value here — it flows through
   every page automatically. UX feedback → edit this file only.
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Press+Start+2P&display=swap');

:root {

  /* ── BRAND LAYER (swappable) — corporate light + BTC Blue, pure blue ──
     Swap this block to re-skin the whole app. Pure blue, no orange.     */
  --brand:            #2330DA;   /* BTC Blue Primary — the one brand colour */
  --brand-hover:      #0D2845;   /* Space Blue — primary hover              */
  --brand-active:     #0069D9;   /* primary-darker — pressed                */
  --brand-on:         #FFFFFF;   /* text/icon ON the brand colour           */
  --brand-soft:       #E5F2FF;   /* primary-lighter — tinted bg / subtle    */

  /* legacy primary names → now point at the brand (old page code flips)   */
  --primary:          var(--brand);
  --primary-hover:    var(--brand-hover);
  --primary-dim:      var(--brand-soft);
  --primary-glow:     rgba(35, 48, 218, 0.30);
  --font-sans:        'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-pixel:       'Press Start 2P', ui-monospace, monospace; /* arcade wordmark */

  /* ── SURFACES — light (default theme) ────────────────────────────
     Elevation via shadow, not colour.                                */
  --bg:               #F6F9FC;   /* page root (grey-100)                  */
  --surface-1:        #FFFFFF;   /* cards, panels, inputs                 */
  --surface-2:        #FFFFFF;   /* elevated cards, open panels           */
  --surface-3:        #EEF3F8;   /* subtle hover                          */

  /* ── TEXT — dark on light ──────────────────────────────────────── */
  --text:             #19202A;   /* grey-700 — headings / primary copy    */
  --text-2:           #37404D;   /* grey-600 — body                       */
  --muted:            #627185;   /* grey-500 — captions/placeholder (≥4.5:1 on white) */

  /* ── BORDERS — light ──────────────────────────────────────────── */
  --border:           #E7EEF4;   /* grey-200 — card edges                 */
  --border-strong:    #D0DBE5;   /* grey-300 — interactive elements       */

  /* ── STATUS ────────────────────────────────────────────────────  */
  --success:              #538D4E;               /* Wordle-style muted green (game tiles) */
  --success-bright:       #22C55E;               /* UI success: save confirmations        */
  --success-bright-dim:   rgba(34, 197, 94, 0.12); /* subtle tint (done-state backgrounds) */
  --success-bright-glow:  rgba(34, 197, 94, 0.25); /* border/glow (played card borders)    */
  --warning:              #B59F3B;               /* present / yellow (Wordle tiles)       */
  --error:                #EF4444;
  --info:                 #60A5FA;

  /* ── GAME CATEGORY COLOURS (Connections) ─────────────────────── */
  --cat-green:        #538D4E;
  --cat-yellow:       #B59F3B;
  --cat-blue:         #2563EB;
  --cat-orange:       #D47A2B;
  --cat-purple:       #7B4F9E;

  /* ── SHARED GAME PALETTE (blue-harmonised, warm-gold) — Phase 2+ ──
     One palette reused across all games. Wordle states + Connections
     categories. Not part of the swappable brand layer.               */
  --g-correct:        #16A672;   /* Wordle correct                        */
  --g-present:        #C79A1F;   /* Wordle present (gold)                 */
  --g-absent:         #92A8BA;   /* Wordle absent (grey)                  */
  --cat-1:            #C79A1F;   /* gold   */
  --cat-2:            #16A672;   /* green  */
  --cat-3:            #4F86E0;   /* blue   */
  --cat-4:            #7B5BD0;   /* purple */

  /* ── LEADERBOARD ────────────────────────────────────────────────  */
  --gold:             #FFD700;
  --silver:           #C0C0C0;
  --bronze:           #CD7F32;

  /* ── RADIUS ─────────────────────────────────────────────────────
     Three meaningful steps. Pick the one that matches the element
     type — not the pixel size that "looks about right".             */
  --radius-sm:        6px;    /* game tiles, keyboard keys, chips         */
  --radius-md:        10px;   /* connections grid cells                   */
  --radius-lg:        12px;   /* cards, buttons, inputs, panels, modals   */
  --radius-pill:      999px;  /* badges, fully-rounded tags               */

  /* ── SPACING ─────────────────────────────────────────────────── */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-8:          32px;
  --space-10:         40px;

  /* ── TYPOGRAPHY ──────────────────────────────────────────────── */
  --text-xs:          11px;
  --text-sm:          12px;
  --text-base:        14px;
  --text-md:          16px;
  --text-lg:          18px;
  --text-xl:          24px;
  --text-2xl:         32px;
  --leading-tight:    1.3;
  --leading-base:     1.5;
  --leading-relaxed:  1.7;

  /* ── SHADOWS ─────────────────────────────────────────────────── */
  --shadow-sm:        0 2px 4px 0 rgba(9, 10, 12, 0.04);
  --shadow-md:        0 4px 28px 0 rgba(9, 10, 12, 0.09);
  --shadow-lg:        0 4px 32px 0 rgba(9, 10, 12, 0.12);
  --shadow-glow:      0 0 0 3px var(--brand-soft);

  /* ── TRANSITIONS ─────────────────────────────────────────────── */
  --t-fast:           0.15s ease;
  --t-base:           0.25s ease;
  --t-slow:           0.4s  ease;

  /* ── OVERLAY ─────────────────────────────────────────────────── */
  --overlay:          rgba(13, 40, 69, 0.55);
  --overlay-blur:     blur(4px);

  /* ── TOPBAR ──────────────────────────────────────────────────── */
  --topbar-h:         52px;
  --topbar-bg:        rgba(255, 255, 255, 0.92);  /* sticky header/sub-nav bg */

  /* ── INTERACTIVE ELEMENTS ────────────────────────────────────
     Semi-transparent white borders/icons look wrong in light mode.
     Use these tokens so they flip automatically.                 */
  --btn-border:       rgba(0, 0, 0, 0.15);
  --icon-color:       rgba(13, 40, 69, 0.55);

  /* ── BACKWARD-COMPAT ALIASES ─────────────────────────────────
     Legacy names still used in individual page stylesheets.
     They point at canonical tokens, so a rename here is enough.
     Do not add new code that uses these alias names.                */
  --orange:           var(--primary);
  --orange-dim:       var(--primary-dim);
  --orange-glow:      var(--primary-glow);
  --accent:           var(--primary);
  --sel-border:       var(--primary);
  --card:             var(--surface-1);
  --card-hover:       var(--surface-2);
  --surface:          var(--surface-1);
  --bg2:              var(--surface-1);
  --bg3:              var(--surface-2);
  --text-dim:         var(--muted);
  --green:            var(--success);      /* pages needing bright green override locally */
  --yellow:           var(--warning);
  --red:              var(--error);
  --absent:           var(--border-strong);
  --grey:             var(--border-strong);
  --c-green:          var(--cat-green);
  --c-yellow:         var(--cat-yellow);
  --c-blue:           var(--cat-blue);
  --c-orange:         var(--cat-orange);
  --c-purple:         var(--cat-purple);
  --gap:              var(--space-2);
  --radius:           var(--radius-lg);    /* pages needing tighter tiles override locally */
}

/* ── LIGHT MODE ───────────────────────────────────────────────────
   Add class="light" (or html.light via JS) to <html> to activate.
   Only tokens that differ from the dark defaults are listed here.  */
html.light {
  --bg:             #F5F5F7;
  --surface-1:      #FFFFFF;
  --surface-2:      #EEEEF2;
  --surface-3:      #E0E0EC;
  --text:           #0A0A0F;
  --text-2:         #444455;
  --muted:          #4D4D8A;   /* 6.5:1 on bg, 7.1:1 on surface-1 */
  --border:         rgba(0, 0, 0, 0.1);
  --border-strong:  #AAAABC;
  --topbar-bg:      rgba(245, 245, 247, 0.95);
  --btn-border:     rgba(0, 0, 0, 0.15);
  --icon-color:     rgba(0, 0, 0, 0.5);
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:      0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-lg:      0 8px 40px rgba(0, 0, 0, 0.18);
  --overlay:        rgba(0, 0, 0, 0.5);
}

/* ── DARK MODE ─────────────────────────────────────────────────────
   The head script adds class="light" to <html> only when the theme is
   NOT dark. So the DARK state is the *absence* of .light. These
   tokens override the light :root defaults for a cohesive BTC Direct
   "black branding" — deep navy-black surfaces, light text, a slightly
   brightened BTC Blue so brand buttons / the "ARCADE" wordmark / brand
   text read well on dark. Only tokens that differ from light are set;
   everything else inherits from :root.                              */
html:not(.light) {

  /* ── Brand on dark — brighten BTC Blue for contrast on dark bg ── */
  --brand:            #5566F2;   /* brightened BTC Blue (reads on dark)   */
  --brand-hover:      #6B7AF6;   /* lighter on hover (dark inverts dir.)  */
  --brand-active:     #4453E6;   /* pressed                               */
  --brand-on:         #FFFFFF;   /* text/icon ON the brand colour         */
  --brand-soft:       rgba(85, 102, 242, 0.16);  /* dark-friendly tint    */
  --primary-glow:     rgba(85, 102, 242, 0.35);

  /* ── Surfaces — deep navy-black, elevation via lighter steps ──── */
  --bg:               #0A0E1A;   /* page root                             */
  --surface-1:        #121A2B;   /* cards, panels, inputs                 */
  --surface-2:        #1A2336;   /* elevated cards, open panels           */
  --surface-3:        #232E45;   /* subtle hover                          */

  /* ── Text — light on dark (≈WCAG AA) ─────────────────────────── */
  --text:             #F2F5FA;   /* headings / primary copy               */
  --text-2:           #C4CEDE;   /* body (≥7:1 on bg)                     */
  --muted:            #93A0B8;   /* captions/placeholder (≥4.5:1 on bg)   */

  /* ── Borders — hairline white on dark ────────────────────────── */
  --border:           rgba(255, 255, 255, 0.10);
  --border-strong:    rgba(255, 255, 255, 0.20);

  /* ── Topbar / interactive ─────────────────────────────────────── */
  --topbar-bg:        rgba(10, 14, 26, 0.92);
  --btn-border:       rgba(255, 255, 255, 0.18);
  --icon-color:       rgba(242, 245, 250, 0.65);

  /* ── Game palette — brightened for contrast on dark surfaces ──── */
  --g-correct:        #2BC48C;   /* Wordle correct (brighter green)       */
  --g-present:        #E0B43A;   /* Wordle present (brighter gold)        */
  --g-absent:         #4A5A70;   /* Wordle absent (dark slate, not white) */
  --cat-1:            #E0B43A;   /* gold   */
  --cat-2:            #2BC48C;   /* green  */
  --cat-3:            #6B97F0;   /* blue   */
  --cat-4:            #9B7BE6;   /* purple */
  --success:          #2BC48C;   /* game tiles green (brighter on dark)   */
  --warning:          #E0B43A;   /* present / yellow                      */

  /* ── Shadows — deeper/softer on dark ──────────────────────────── */
  --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md:        0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg:        0 8px 40px rgba(0, 0, 0, 0.55);

  /* ── Overlay — darker scrim on dark ───────────────────────────── */
  --overlay:          rgba(0, 0, 0, 0.65);
}

/* ── COMPLIANCE MODAL ─────────────────────────────────────────────
   Replaces the inline styles that were previously hardcoded in
   compliance.js. Sourced entirely from tokens above.               */
.arcade-terms-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--overlay);
  backdrop-filter: var(--overlay-blur);
  overflow-y: auto;
  padding: var(--space-5);
  box-sizing: border-box;
}
.arcade-terms-inner {
  max-width: 540px;
  margin: auto;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  color: var(--text-2);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.arcade-terms-inner h2 {
  color: var(--primary);
  font-size: var(--text-lg);
  margin: 0 0 4px;
}
.arcade-terms-inner .arcade-terms-sub {
  color: var(--muted);
  font-size: var(--text-xs);
  margin: 0 0 var(--space-4);
}
.arcade-terms-inner h3 {
  color: var(--text);
  font-size: var(--text-base);
  margin: var(--space-3) 0 4px;
}
.arcade-terms-inner ul {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-4);
}
.arcade-terms-inner a { color: var(--primary); }
.arcade-terms-inner .arcade-terms-footer {
  color: var(--muted);
  font-size: var(--text-xs);
  margin: var(--space-4) 0 0;
}
.arcade-terms-close {
  margin-top: var(--space-4);
  width: 100%;
  padding: var(--space-3);
  background: var(--primary);
  border: none;
  border-radius: var(--radius-lg);
  color: var(--brand-on);
  font-weight: 700;
  font-size: var(--text-base);
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.arcade-terms-close:hover { opacity: 0.85; }

/* ══════════════════════════════════════════════════════════════════
   THEME TOGGLE — sun ↔ moon spring animation
   ══════════════════════════════════════════════════════════════════ */

/* ── Page-wide colour sweep ───────────────────────────────────────
   Added transiently by applyTheme(); removed after transition ends. */
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition:
    background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-color     0.35s cubic-bezier(0.4, 0, 0.2, 1),
    color            0.30s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow       0.35s cubic-bezier(0.4, 0, 0.2, 1),
    fill             0.30s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── Toggle shell — clean iOS-style switch, brand-tokenised ───────
   Sun (light) ⇄ Moon (dark). The orb slides; the icon fades on it. */
.tt-toggle {
  --_w:      52px;
  --_h:      28px;
  --_orb:    22px;
  --_pad:    3px;
  --_travel: 24px;   /* _w - _orb - _pad*2 */

  position: relative;
  display: inline-flex;
  width:  var(--_w);
  height: var(--_h);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.tt-toggle:focus-visible .tt-track {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* ── Track ─────────────────────────────────────────────────────── */
.tt-track {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--_h) / 2);
  /* Dark mode = brand blue track (switch is "on"). */
  background: var(--brand);
  transition: background 0.25s ease;
}

/* Light mode = neutral/off track. */
html.light .tt-track {
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* ── Orb ──────────────────────────────────────────────────────── */
.tt-orb {
  position: absolute;
  top:  var(--_pad);
  left: var(--_pad);
  width:  var(--_orb);
  height: var(--_orb);
  box-sizing: border-box;   /* keep the orb's footprint fixed when a border is added */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-on);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  will-change: transform;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light mode: the orb is white on a near-white track, so a hairline border +
   a touch more shadow give it a clearly defined edge (the knob is visible). */
html.light .tt-orb {
  border: 1px solid var(--border-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 1px rgba(0, 0, 0, 0.10);
}

/* Dark mode: orb slides to the right (white-on-blue already reads clearly). */
html:not(.light) .tt-orb { transform: translateX(var(--_travel)); }

/* ── Icons (one fades in per mode, both centred on the orb) ─────── */
.tt-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.tt-icon svg { width: 13px; height: 13px; }

.tt-sun  { color: var(--brand); }
.tt-moon { color: var(--brand); }

/* Show sun in light, moon in dark. */
html.light      .tt-sun  { opacity: 1; }
html.light      .tt-moon { opacity: 0; }
html:not(.light) .tt-sun  { opacity: 0; }
html:not(.light) .tt-moon { opacity: 1; }

/* ── Small variant (hub header) ───────────────────────────────── */
.tt-toggle--sm {
  --_w:      46px;
  --_h:      25px;
  --_orb:    19px;
  --_travel: 21px;
}
.tt-toggle--sm .tt-icon svg { width: 11px; height: 11px; }

/* ── Unified end-screen (.es-*) — shared by wordle/connections/crossword ───── */
.es-screen { max-width: 560px; margin: 0 auto; padding: 16px 16px 64px;
  display: flex; flex-direction: column; gap: 14px; }

/* Topbar — 3-col grid keeps the title dead-centre */
.es-topbar { position: sticky; top: 0; z-index: 20; display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center;
  background: var(--bg); border-bottom: 1px solid var(--border); padding: 10px 14px; }
.es-topbar .es-back { justify-self: start; color: var(--orange); font-size: 13px;
  font-weight: 700; text-decoration: none; white-space: nowrap; }
.es-topbar .es-title { justify-self: center; color: var(--orange); font-weight: 900;
  letter-spacing: 2px; font-size: 14px; }
.es-topbar .es-tools { justify-self: end; display: flex; gap: 10px; color: var(--muted); }
.es-back .es-back-long { display: inline; }
.es-back .es-back-short { display: none; }
@media (max-width: 420px) {
  .es-back .es-back-long { display: none; }
  .es-back .es-back-short { display: inline; }
}

/* Day-nav */
.es-daynav { display: flex; justify-content: center; align-items: center; gap: 12px;
  color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.es-daynav .nav-arrow { width: 26px; height: 26px; border: 1px solid var(--border);
  border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }

/* Result bar */
.es-resultbar { display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 12px 16px; }
.es-resultbar .es-rb-label { color: var(--orange); font-weight: 800; font-size: 13px; }
.es-resultbar .es-rb-mid { color: var(--orange); font-weight: 900; font-size: 13px; }
.es-resultbar .es-rb-score { color: var(--muted); font-size: 12px; }
.es-resultbar.lost .es-rb-label { color: #ff6b6b; }

/* Stats block */
.es-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 14px 16px; }
.es-stats.full { grid-template-columns: 1fr; }
.es-stats .es-block-lbl { font-size: 9px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 10px; }
.es-stat-nums { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }
.es-stat-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.es-stat-val { font-size: 22px; font-weight: 900; color: var(--orange); line-height: 1;
  font-variant-numeric: tabular-nums; }
.es-stat-lbl { font-size: 8px; color: var(--muted); text-transform: uppercase; }

/* Chart rows (shared by guesses / first-group / time buckets).
   The key column auto-sizes: short numeric/bucket keys (wordle "1–6", crossword
   "<1m") sit at the 30px min; long spelled-out keys (connections "Yellow (medium)")
   widen up to a cap and never wrap. This makes the connections-specific
   `.es-cr-key { width:auto; min-width:96px; white-space:nowrap; font-weight:700 }`
   override unnecessary, so Phase 2 can delete it without any visual regression. */
.es-chart-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.es-chart-row .es-cr-key { color: var(--muted); font-size: 10px; font-weight: 700;
  width: auto; min-width: 30px; white-space: nowrap; }
.es-chart-row .es-cr-bar { height: 9px; border-radius: 3px; background: var(--success, #3a7d44); }
.es-chart-row .es-cr-bar.hot { background: var(--orange); }
.es-chart-row .es-cr-count { color: var(--text-2); font-size: 9px; }

/* Status line */
.es-status { text-align: center; color: var(--orange); font-size: 13px; font-weight: 800; width: 100%;
  background: linear-gradient(135deg, rgba(35,48,218,0.10), rgba(35,48,218,0.04));
  border: 1px solid rgba(35,48,218,0.25); border-radius: 10px; padding: 10px 14px; }
/* Never paint the status pill as an empty box (no rank to show → nothing there). */
.es-status:empty { display: none; }

/* Buttons */
.es-share { width: 100%; background: var(--orange); color: var(--brand-on);
  border: none; border-radius: 10px; padding: 11px;
  font-size: 13px; font-weight: 700; cursor: pointer; display: flex; gap: 6px;
  align-items: center; justify-content: center; }
.es-save-cta { width: 100%; background: var(--orange); color: var(--brand-on); border: none;
  border-radius: 10px; padding: 13px; font-size: 14px; font-weight: 800; cursor: pointer; }

/* Save form (progressive) */
.es-saveform { display: none; flex-direction: column; gap: 9px; }
.es-saveform.open { display: flex; }
.es-saveform .es-row2 { display: flex; gap: 8px; }
.es-saveform .es-row2 > * { flex: 1; }
.es-input { background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: 8px; color: var(--text); padding: 10px 13px; font-size: 13px; width: 100%; }
.es-share svg { color: var(--brand-on) !important; }
.es-input.req { border-color: rgba(35,48,218,0.35); }
.es-divider { display: flex; align-items: center; gap: 10px; color: var(--muted);
  font-size: 11px; text-transform: uppercase; }
.es-divider::before, .es-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.es-btc-toggle { width: 100%; background: transparent; color: var(--orange);
  border: 1px solid rgba(35,48,218,0.35); border-radius: 10px; padding: 11px;
  font-size: 13px; font-weight: 700; cursor: pointer; }
.es-alias-prompt { color: var(--orange); font-size: 12px; font-weight: 800; margin-bottom: 4px; }
.es-saved { display: flex; align-items: center; justify-content: space-between;
  background: var(--success-bright-dim); border: 1px solid var(--success-bright-glow);
  border-radius: 10px; padding: 11px 14px; font-size: 13px; color: var(--text-2);
  width: 100%; box-sizing: border-box; }
.es-saved .es-share { width: auto; padding: 10px 18px; font-size: 15px; flex-shrink: 0; }

/* Play-today / history suggestions */
.es-playtoday { display: flex; gap: 8px; width: 100%; }
.es-game-card { flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 14px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-1); text-decoration: none; color: var(--text); text-align: center; }
.es-game-card .es-gc-name { font-size: 12px; font-weight: 700; }
.es-game-card .es-gc-pill { background: var(--orange); color: var(--brand-on); border-radius: 12px;
  font-size: 9px; font-weight: 800; padding: 2px 8px; }
.es-allplayed { border: 1px solid rgba(34,197,94,0.35); background: rgba(34,197,94,0.08);
  border-radius: 10px; padding: 14px; text-align: center; }
.es-allplayed .es-ap-title { color: #22c55e; font-weight: 800; font-size: 14px; }
.es-allplayed .es-ap-sub { color: var(--muted); font-size: 12px; margin: 4px 0 10px; }
.es-suggest { display: flex; flex-direction: column; gap: 7px; }
.es-suggest a { display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; text-decoration: none; }
.es-suggest .es-sg-name { color: var(--text); font-size: 12px; font-weight: 700; }
.es-suggest .es-sg-date { color: var(--orange); font-size: 10px; font-weight: 700; }

.es-backhub { text-align: center; color: var(--muted); font-size: 12px;
  text-decoration: underline; text-underline-offset: 3px; }

/* ── Theme toggle re-enabled (dark-mode phase) ─────────────────────
   The light-only phase hid the toggle (and its "Dark mode" label) via
   display:none rules here. Dark mode now exists, so the toggle is live
   again wherever the #dark-mode-toggle button is rendered (hub + the
   three games). No rule needed — the .tt-* component styles above
   already animate sun↔moon against html.light / html:not(.light).   */