:root {
    /* Editorial palette (primary). The country-club var names below are
       retained as aliases so existing rules continue to work without a
       file-wide find/replace. New code should prefer the editorial names. */
    --ink:        #0F1B33;
    --ink-muted:  #475569;
    --ink-faint:  #94A3B8;
    --paper:      #FAF7F2;
    --paper-alt:  #F2EDE4;
    --paper-card: #FFFFFF;
    --hairline:   #E5DED1;
    --amber:      #D97706;
    --amber-ink:  #B45309;
    --red:        #B91C1C;

    /* RGB triplets for rgba() use in tinted surfaces + animations. Keep
       these in sync with --amber, --ink, and --red above. */
    --amber-rgb:  217, 119, 6;
    --red-rgb:    185, 28, 28;
    --ink-rgb:    15, 27, 51;

    /* Medal accents — own the silver/bronze hand-tuned values as tokens
       rather than burying them as hex literals at the call site. */
    --silver:     #9a9a8a;
    --bronze:     #a06a3a;

    /* Legacy aliases — bone/moss/gold/claret now resolve to editorial values. */
    --bone:       var(--paper);
    --bone-2:     var(--paper-alt);
    --ink-soft:   var(--ink-muted);
    --moss:       var(--ink);
    --moss-deep:  #1E293B;
    --gold:       var(--amber);
    --gold-light: #F59E0B;
    --claret:     var(--red);
    --rule:       var(--hairline);
    --rule-soft:  rgba(var(--ink-rgb), 0.06);
    --shadow:     0 1px 2px rgba(var(--ink-rgb), 0.04), 0 8px 24px rgba(var(--ink-rgb), 0.08);
    --banner-bg:  #FEF3E2;

    /* Font tokens. Editorial defaults — non-editorial themes override
       these in their [data-theme="…"] blocks below. */
    --font-display:   'Playfair Display', Georgia, serif;
    --font-sans:      'Barlow', sans-serif;
    --font-condensed: 'Barlow Condensed', sans-serif;
    --font-mono:      'JetBrains Mono', monospace;

    /* Card radius. Editorial is sharp; other themes adjust to suit. */
    --card-radius:    0;

    /* Ambient body wash (body::before background-image). Editorial gets
       a warm amber radial; themes below can swap for scanlines, halos,
       or `none`. */
    --ambient-bg:     radial-gradient(circle at 25% 20%, rgba(var(--amber-rgb), 0.02), transparent 55%);

    /* Display weight for masthead and hero h1s. Playfair sits well at
       800; Inter wants 700; VT323 has a single weight (400). */
    --display-weight: 800;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    background: var(--bone); color: var(--ink);
    font-family: var(--font-sans); font-weight: 400; line-height: 1.55;
    -webkit-font-smoothing: antialiased; min-height: 100%;
  }
  /* Single ultra-subtle warm radial — replaces former noise + dual-gradient
     stack. Keeps the page from feeling flat without competing with content. */
  body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none;
    background-image: var(--ambient-bg);
    z-index: 0;
  }
  .container {
    position: relative; z-index: 1; max-width: 1200px; margin: 0 auto;
    padding:
      max(40px, env(safe-area-inset-top))
      max(28px, env(safe-area-inset-right))
      max(120px, env(safe-area-inset-bottom))
      max(28px, env(safe-area-inset-left));
  }

  /* MASTHEAD */
  .masthead { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 26px 0 22px; text-align: center; margin-bottom: 36px; }
  .masthead-kicker { font-size: 10px; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 12px; }
  .masthead h1 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(38px, 7vw, 72px); line-height: 0.95; letter-spacing: -0.02em; }
  .masthead h1 em { font-style: italic; font-weight: 400; color: var(--amber); }
  .masthead-sub { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-soft); display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
  /* Decorative diamond stripped for minimalist register — flex gap separates items. */

  /* PIN BIG DISPLAY */
  .pin-display { text-align: center; margin: 24px 0 32px; padding: 28px 20px; background: var(--paper-alt); border: 1px solid var(--rule); }
  .pin-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss); margin-bottom: 8px; }
  .pin-value { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(44px, 10vw, 72px); letter-spacing: 0.2em; line-height: 1; color: var(--ink); }
  .pin-share { margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
  .pin-share-link { font-family: var(--font-mono); font-size: 12px; word-break: break-all; color: var(--moss); display: inline-block; margin-top: 6px; padding: 6px 10px; background: var(--bone); border: 1px solid var(--rule); cursor: pointer; transition: all 0.15s; }
  .pin-share-link:hover { background: var(--moss); color: var(--bone); border-color: var(--moss); }

  /* TABS */
  .tabs { display: flex; gap: 2px; margin-bottom: 32px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 14px 20px; background: none; border: none; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; position: relative; white-space: nowrap; }
  .tab:hover { color: var(--ink); }
  .tab.active { color: var(--moss); }
  .tab.active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: var(--gold); }
  .tab-count { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: var(--rule-soft); font-size: 10px; font-family: var(--font-mono); }
  .entry-you-badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 10px; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle; }
  /* Commissioner-only tabs no longer carry a decorative diamond prefix; the
     tab still inherits .commissioner-only for the JS show/hide gate. */

  /* PANELS */
  .panel { display: none; animation: fadeIn 0.3s ease; }
  .panel.active { display: block; }
  .pool-panel { display: none; animation: fadeIn 0.3s ease; }
  .pool-panel.active { display: block; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

  /* SECTIONS */
  .section { background: var(--bone); border: 1px solid var(--rule); margin-bottom: 24px; }
  .section-header { padding: 18px 22px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
  .section-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
  .section-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss); }
  .section-body { padding: 22px; }

  /* FORM */
  label.field { display: block; margin-bottom: 16px; }
  .field-label { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--moss); margin-bottom: 6px; }
  input[type="text"], input[type="number"], input[type="email"], select, textarea { width: 100%; padding: 10px 12px; background: var(--paper-alt); border: 1px solid var(--rule); border-radius: var(--card-radius); font-family: var(--font-sans); font-size: 16px; color: var(--ink); transition: border-color 0.15s, background 0.15s; }
  input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); background: var(--paper-card); }
  textarea { resize: vertical; min-height: 140px; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; }
  .help { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-soft); font-style: italic; }

  /* BUTTONS */
  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; background: var(--moss); color: var(--bone); border: none; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: all 0.2s; }
  .btn:hover:not(:disabled) { background: var(--moss-deep); }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn-secondary { background: transparent; color: var(--moss); border: 1px solid var(--moss); }
  .btn-secondary:hover:not(:disabled) { background: var(--moss); color: var(--bone); }
  .btn-gold { background: var(--gold); color: var(--bone); }
  .btn-gold:hover:not(:disabled) { background: var(--gold-light); color: var(--ink); }
  .btn-danger { background: transparent; color: var(--claret); border: 1px solid var(--claret); }
  .btn-danger:hover:not(:disabled) { background: var(--claret); color: var(--bone); }
  .btn-small { padding: 11px 14px; font-size: 11px; letter-spacing: 0.12em; min-height: 44px; }
  .btn-big { padding: 16px 32px; font-size: 12px; }

  /* FOCUS RINGS — keyboard accessibility */
  .btn:focus-visible,
  .tab:focus-visible,
  .hub-row:focus-visible,
  .hub-signin-link:focus-visible,
  .hub-profile-chip:focus-visible,
  .hub-profile-menu-item:focus-visible,
  .pin-share-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
  }

  /* TIER PICKER */
  .tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 14px 0 22px; }
  .tier-card { background: var(--paper-alt); border: 1px solid var(--rule); padding: 14px; }
  .tier-label { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--moss); margin-bottom: 6px; }
  .tier-range { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--ink-soft); margin-bottom: 10px; }

  /* LEADERBOARD */
  .leaderboard-table { width: 100%; border-collapse: collapse; }
  .leaderboard-table thead th { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--moss); text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--ink); }
  .leaderboard-table tbody td { padding: 14px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .leaderboard-table tbody tr:hover { background: rgba(var(--amber-rgb), 0.05); }
  .pos { font-family: var(--font-display); font-size: 24px; font-weight: 600; width: 48px; }
  .pos-1 { color: var(--gold); } .pos-2 { color: var(--silver); } .pos-3 { color: var(--bronze); }
  .lb-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
  .lb-picks { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); margin-top: 4px; line-height: 1.7; }
  .lb-picks .dropped { opacity: 0.35; text-decoration: line-through; }
  .lb-picks .cut { color: var(--claret); }
  .lb-score { font-family: var(--font-display); font-size: 28px; font-weight: 600; text-align: right; white-space: nowrap; }
  .lb-score.red { color: var(--claret); }
  .lb-raw { font-family: var(--font-mono); font-size: 10px; color: var(--ink-soft); text-align: right; letter-spacing: 0.1em; }

  /* EXPANDABLE LEADERBOARD ROWS */
  .lb-expander {
    display: inline-block; width: 14px; height: 14px; margin-right: 8px;
    vertical-align: middle; transition: transform 0.2s ease;
    color: var(--moss); font-size: 10px; user-select: none;
  }
  .leaderboard-table tr.lb-main { cursor: pointer; }
  .leaderboard-table tr.lb-main:hover td { background: rgba(var(--ink-rgb), 0.04); }
  .leaderboard-table tr.lb-main.expanded .lb-expander { transform: rotate(90deg); }
  .lb-detail-row { display: none; }
  .lb-detail-row.show { display: table-row; }
  .lb-detail-row td { background: var(--paper-alt); padding: 16px 22px !important; border-top: 1px dashed var(--rule); }
  .round-grid {
    width: 100%; border-collapse: collapse;
    font-family: var(--font-mono); font-size: 12px;
  }
  .round-grid th, .round-grid td {
    padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--rule-soft);
  }
  .round-grid th {
    font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--moss); font-weight: 600;
  }
  .round-grid td.gname { text-align: left; font-family: var(--font-sans); font-size: 13px; }
  .round-grid td.gname.dropped { opacity: 0.4; text-decoration: line-through; }
  .round-grid td.gname.cut { color: var(--claret); }
  .round-grid td.total { font-weight: 600; }
  .round-grid .round-cell.birdie { color: var(--moss); font-weight: 600; }
  .round-grid .round-cell.red { color: var(--claret); font-weight: 600; }
  .round-grid .round-cell.empty { color: var(--ink-soft); opacity: 0.4; }
  .round-grid tr.team-total td {
    font-weight: 600; background: rgba(var(--ink-rgb), 0.06);
    border-top: 2px solid var(--moss);
  }

  /* OWNERSHIP SECTION */
  .ownership-grid {
    display: grid; grid-template-columns: 1fr; gap: 2px;
    font-family: var(--font-mono); font-size: 12px;
  }
  .ownership-row {
    display: grid; grid-template-columns: 40px 1fr 60px 50px;
    gap: 10px; align-items: center; padding: 6px 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .ownership-row.header {
    font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--moss); font-weight: 600; border-bottom: 1px solid var(--rule);
    padding-bottom: 8px;
  }
  .ownership-rank { text-align: right; color: var(--ink-soft); }
  .ownership-name { font-family: var(--font-sans); font-size: 13px; }
  .ownership-bar-wrap {
    background: var(--rule-soft); height: 6px; width: 100%; position: relative; overflow: hidden;
  }
  .ownership-bar { background: var(--moss); height: 100%; transition: width 0.3s ease; }
  .ownership-bar.high { background: var(--gold); }
  .ownership-count { text-align: right; color: var(--ink-soft); font-size: 11px; }

  /* STATUS TAG */
  .status-tag { display: inline-block; padding: 2px 8px; font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
  .status-made { background: rgba(var(--ink-rgb), 0.1); color: var(--moss); }
  .status-cut { background: rgba(var(--red-rgb), 0.1); color: var(--claret); }
  .status-active { background: rgba(var(--amber-rgb), 0.15); color: var(--amber-ink); }

  /* SCORECARD */
  .golfer-entry-row { display: grid; grid-template-columns: 1fr 80px 80px 80px 80px 110px 40px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
  .golfer-entry-row.header { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--moss); font-weight: 600; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
  .golfer-entry-row .g-name { font-family: var(--font-display); font-weight: 500; font-size: 15px; }
  .golfer-entry-row input { padding: 6px 8px; font-size: 13px; text-align: center; }
  .g-match-warn { display: inline-block; width: 16px; height: 16px; background: var(--claret); color: var(--bone); border-radius: 50%; text-align: center; line-height: 16px; font-size: 11px; margin-left: 6px; cursor: help; }

  /* RULES */
  .rules-list ul { list-style: none; padding: 0; margin: 0; }
  .rules-list li { padding: 10px 0 10px 28px; border-bottom: 1px solid var(--rule-soft); position: relative; }
  .rules-list li::before { content: "§"; position: absolute; left: 0; font-family: var(--font-display); color: var(--gold); font-weight: 600; }
  .rules-list h3 { font-family: var(--font-display); font-size: 18px; color: var(--moss); margin-top: 18px; margin-bottom: 4px; }
  .rules-list h3:first-child { margin-top: 0; }

  /* EMPTY STATES */
  .empty { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
  .empty-mark { font-family: var(--font-display); font-style: italic; font-size: 72px; color: var(--rule); margin-bottom: 12px; }
  .empty-text { font-family: var(--font-display); font-style: italic; font-size: 20px; }

  /* LANDING */
  .landing { text-align: center; padding: 40px 20px 20px; }
  .landing-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
  .landing-divider { display: flex; align-items: center; gap: 16px; margin: 36px auto; max-width: 400px; color: var(--ink-soft); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
  .landing-divider::before, .landing-divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
  .landing-section-heading { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin: 0 0 8px; color: var(--ink); }
  .landing-signin-section { margin-top: 28px; padding: 24px 20px 0; background: rgba(var(--amber-rgb), 0.07); }
  .join-form { max-width: 360px; margin: 0 auto; }
  .join-form input { text-align: center; font-family: var(--font-display); font-size: 28px; letter-spacing: 0.2em; padding: 14px; }

  /* TOAST + MODAL */
  .modal-bg { position: fixed; inset: 0; background: rgba(var(--ink-rgb), 0.55); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
  .modal-bg.active { display: flex; animation: fadeIn 0.2s; }
  .modal { background: var(--bone); border: 1px solid var(--ink); max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 28px; border-radius: var(--card-radius); }
  .modal h3 { font-family: var(--font-display); font-size: 24px; margin-bottom: 14px; }
  .toast {
    position: fixed;
    bottom: max(24px, env(safe-area-inset-bottom));
    right: max(24px, env(safe-area-inset-right));
    padding: 12px 20px; background: var(--ink); color: var(--paper);
    font-size: 13px; transform: translateY(100px); opacity: 0;
    transition: all 0.3s; z-index: 200; max-width: 360px;
    display: flex; align-items: center; gap: 12px;
  }
  .toast.show { transform: translateY(0); opacity: 1; }
  .toast.error { background: var(--red); }
  .toast-msg { flex: 1; min-width: 0; }
  .toast-close {
    background: none; border: none;
    color: var(--paper); opacity: 0.7;
    font-size: 20px; line-height: 1; cursor: pointer;
    padding: 0; flex-shrink: 0;
    transition: opacity 0.15s;
  }
  .toast-close:hover { opacity: 1; }
  .toast-close:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; opacity: 1; }

  /* BANNER */
  .banner { padding: 14px 22px; border: 1px solid; margin-bottom: 20px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
  /* Muted-pastel banners — info/warn derive from --amber and --red so they
     follow the palette if those accents ever shift. ok is the quietest of
     the three: warm --paper-alt surface with a standard hairline, since
     "green = success" would import a hue that lives nowhere else in the
     palette (the editorial register reads confirmation as absence of
     warning rather than a positive color). Result: warn (loud) → info
     (soft) → ok (silent). */
  .banner-info { background: rgba(var(--amber-rgb), 0.10); border-color: rgba(var(--amber-rgb), 0.28); color: var(--ink); }
  .banner-warn { background: rgba(var(--red-rgb),   0.10); border-color: rgba(var(--red-rgb),   0.28); color: var(--ink); }
  .banner-ok   { background: var(--paper-alt);             border-color: var(--hairline);            color: var(--ink); }

  .loading { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--rule); border-top-color: var(--moss); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -2px; margin-right: 8px; will-change: transform; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
  .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
  .hidden { display: none !important; }
  .muted { color: var(--ink-soft); font-size: 13px; }
  .center { text-align: center; }

  /* ============================================================
     BETTOR MODE — /pin/:pin/bet
     Mirror of the commish-visible pattern but CSS-only (no JS toggle).
     body.bettor-mode is set in boot() before any render decision so the
     first paint is correct.
     .bettor-hidden : visible by default, hidden in bettor mode.
     .bettor-only   : hidden by default, visible in bettor mode.
     The .panel-side-bets rule below depends on phase 5.2a wrapping the
     Side Bets tab content in .panel-side-bets — if that class doesn't
     ship in the final merge, the rule is a graceful no-op.
     ============================================================ */
  body.bettor-mode .bettor-hidden { display: none !important; }
  .bettor-only { display: none; }
  body.bettor-mode .bettor-only { display: block; }
  body.bettor-mode .panel-side-bets { display: block !important; }

  /* Bettor header subtitle — small typographic hint below pin/locked banners */
  .bettor-header-sub {
    font-family: var(--font-condensed);
    font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-muted);
    padding: 10px 0;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 12px;
  }

  /* Bettor pre-tournament card */
  .bettor-pre-tournament[hidden] { display: none !important; }
  .bettor-pre-card {
    background: var(--paper-alt, #FAF7F1);
    border: 1px solid var(--hairline);
    padding: 18px 20px;
    margin: 14px 0 18px;
  }
  .bettor-pre-kicker {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--amber-ink, var(--amber, #b58400));
    margin-bottom: 8px;
  }
  .bettor-pre-title {
    font-family: var(--font-display);
    font-size: 22px; line-height: 1.2; color: var(--ink);
    margin-bottom: 6px;
  }
  .bettor-pre-msg {
    font-size: 14px; color: var(--ink-soft);
  }

  /* Picks-by-entrant collapsible */
  .picks-by-entrant {
    margin: 20px 0 28px;
    border-top: 1px solid var(--hairline);
    padding-top: 18px;
  }
  .picks-by-entrant-summary {
    font-family: var(--font-condensed);
    font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink); cursor: pointer;
    padding: 6px 0;
    list-style: none;
  }
  .picks-by-entrant-summary::-webkit-details-marker { display: none; }
  .picks-by-entrant-summary::before {
    content: '▸'; display: inline-block; margin-right: 8px;
    transition: transform 0.15s ease;
  }
  .picks-by-entrant[open] .picks-by-entrant-summary::before { transform: rotate(90deg); }
  .picks-by-entrant-body { padding-top: 10px; }
  .picks-by-entrant-entry {
    border-bottom: 1px solid var(--hairline);
    padding: 10px 0;
  }
  .picks-by-entrant-entry-summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; cursor: pointer; list-style: none;
    padding: 4px 0;
  }
  .picks-by-entrant-entry-summary::-webkit-details-marker { display: none; }
  .picks-by-entrant-entry-name {
    font-family: var(--font-display);
    font-size: 16px; color: var(--ink);
  }
  .picks-by-entrant-entry-score {
    font-size: 14px; font-weight: 600;
  }
  .picks-by-entrant-picks {
    list-style: none; margin: 8px 0 4px; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px 14px;
  }
  .picks-by-entrant-pick {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--ink-soft);
  }
  .picks-by-entrant-name { color: var(--ink); }
  .picks-by-entrant-rank {
    font-family: var(--font-mono);
    font-size: 11px; color: var(--ink-muted);
  }

  /* Bettor footer link */
  .bettor-footer-link {
    text-align: center;
    padding: 24px 16px 40px;
    border-top: 1px solid var(--hairline);
    margin-top: 32px;
  }
  .bettor-footer-link a {
    font-family: var(--font-condensed);
    font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-muted); text-decoration: none;
  }
  .bettor-footer-link a:hover { color: var(--ink); }

  /* LIVE PROGRESS INDICATORS */
  .lb-holes-left {
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.08em;
    color: var(--amber-ink); text-align: right;
    margin-top: 4px; text-transform: uppercase;
  }
  .lb-holes-left::before {
    content: '●'; display: inline-block; margin-right: 5px;
    color: var(--red); font-size: 8px; vertical-align: middle;
    animation: pulse-live 1.6s ease-in-out infinite;
    will-change: opacity;
  }
  @keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
  /* Monochrome ink-on-paper-alt: the amber dot already carries the "live"
     semantic; the tag is the textual reinforcement and doesn't need a
     second amber surface. */
  .live-tag {
    display: inline-block; padding: 1px 6px; margin-left: 4px;
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--paper-alt); color: var(--ink-muted);
    border: 1px solid var(--hairline);
    border-radius: 2px; font-family: var(--font-mono);
  }
  .round-cell.in-progress {
    background: rgba(var(--amber-rgb), 0.06);
    position: relative;
  }
  .round-cell.in-progress::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 2px; background: var(--gold); opacity: 0.7;
  }
  .round-prog {
    display: block; font-size: 9px; color: var(--ink-soft);
    letter-spacing: 0.05em; margin-top: 2px;
    font-family: var(--font-mono);
  }

  @media (max-width: 720px) {
    .container { padding: 20px 12px 80px; }
    .tier-grid { grid-template-columns: 1fr; }
    .golfer-entry-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
    .golfer-entry-row.header { display: none; }
    .golfer-entry-row input { width: 100%; padding: 10px 12px; font-size: 16px; }
    .golfer-entry-row select { padding: 10px 12px; font-size: 16px; }
    .toast {
      left: max(14px, env(safe-area-inset-left));
      right: max(14px, env(safe-area-inset-right));
      bottom: max(14px, env(safe-area-inset-bottom));
      max-width: none;
    }

    /* Tighter masthead */
    h1 { font-size: 48px !important; line-height: 1; }
    .masthead-kicker { font-size: 9px; }
    .masthead-sub { font-size: 11px; }

    /* COMPACT MOBILE LEADERBOARD */
    .leaderboard-table { font-size: 13px; }
    .leaderboard-table thead th { padding: 10px 6px; font-size: 9px; }
    .leaderboard-table tbody td { padding: 12px 6px; }
    .pos { width: 32px; font-size: 20px; }
    .lb-name { font-size: 16px; line-height: 1.15; }
    .lb-picks { font-size: 10px; line-height: 1.55; }
    .lb-score { font-size: 30px; }
    .lb-raw { font-size: 9px; letter-spacing: 0.05em; }
    .lb-holes-left { font-size: 9px; letter-spacing: 0.04em; }
    .lb-expander { width: 10px; height: 10px; margin-right: 4px; font-size: 9px; }

    /* Round detail grid: keep readable but tight */
    .lb-detail-row td { padding: 12px 8px !important; }
    .round-grid { font-size: 11px; }
    .round-grid th, .round-grid td { padding: 6px 3px; }
    .round-grid td.gname { font-size: 12px; }
    .round-prog { font-size: 8px; }
    .live-tag { font-size: 8px; padding: 1px 4px; }
  }

  /* COMPACT NAMES — abbreviate first names of picks at narrow widths */
  @media (max-width: 480px) {
    .lb-picks .full-name { display: none; }
    .lb-picks .short-name { display: inline; }
  }
  @media (min-width: 481px) {
    .lb-picks .full-name { display: inline; }
    .lb-picks .short-name { display: none; }
  }

/* ── Hub auth UI (sign-in link, profile chip, dropdown) ── */
.hub-signin-link {
  background: none; border: none; padding: 0;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); cursor: pointer; transition: color 0.15s;
  text-decoration: underline; text-underline-offset: 3px;
}
.hub-signin-link:hover { color: var(--moss); }

.back-to-hub {
  display: inline-block;
  margin: 16px 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s;
}
.back-to-hub:hover { color: var(--moss); }

.hub-profile-wrap { position: relative; }
.hub-profile-chip {
  background: none; cursor: pointer; transition: all 0.15s;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--ink-soft);
  border: 1px solid var(--rule); padding: 10px 12px;
  min-height: 36px;
}
.hub-profile-chip:hover { border-color: var(--moss); color: var(--moss); }

.hub-profile-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 200px; background: var(--bone);
  border: 1px solid var(--ink); z-index: 20;
  box-shadow: var(--shadow);
}
.hub-profile-menu.hidden { display: none; }
.hub-profile-menu-email {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft); padding: 12px 14px;
  border-bottom: 1px solid var(--rule); word-break: break-all;
}
.hub-profile-menu-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px;
  color: var(--ink); padding: 10px 14px; transition: background 0.15s;
}
.hub-profile-menu-item:hover { background: rgba(var(--ink-rgb), 0.06); }

/* ── Hub view ── */
.hub-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 22px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer; transition: background 0.15s;
}
.hub-row:last-child { border-bottom: none; }
.hub-row:hover { background: rgba(var(--ink-rgb), 0.04); }
.hub-row-main { flex: 1; min-width: 0; }
.hub-row-name {
  font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.2;
}
.hub-row-pin {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft); margin-top: 3px; letter-spacing: 0.08em;
}
.hub-row-role-badge {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(var(--amber-rgb), 0.15); color: var(--amber-ink);
  vertical-align: middle;
}
.hub-row-meta {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft); letter-spacing: 0.06em;
  white-space: nowrap; flex-shrink: 0;
}
@media (max-width: 480px) {
  .hub-row { flex-wrap: wrap; gap: 4px; }
  .hub-row-meta { flex-basis: 100%; font-size: 10px; }
}

/* ── Hub leagues block (phase 5 — Branch C) ──
   Mirrors .hub-row so the Leagues section feels like a sibling list of the
   Pools section, but uses an <a> tag so the row is right-clickable / open-in-
   new-tab-able (the link points at /league/{code}, which Branch E will route).
   Invite code is mono-spaced and copy-paste-friendly per the brief. */
.hub-league-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 22px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer; transition: background 0.15s;
  text-decoration: none; color: inherit;
}
.hub-league-row:last-child { border-bottom: none; }
.hub-league-row:hover { background: rgba(var(--ink-rgb), 0.04); }
.hub-league-row:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: -2px;
}
.hub-league-row-main { flex: 1; min-width: 0; }
.hub-league-row-name {
  font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.2;
}
.hub-league-row-code {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft); margin-top: 3px; letter-spacing: 0.12em;
  user-select: all;
}
.hub-league-row-meta {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft); letter-spacing: 0.06em;
  white-space: nowrap; flex-shrink: 0;
}
.hub-league-badge {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(var(--amber-rgb), 0.15); color: var(--amber-ink);
  vertical-align: middle;
  user-select: none;
}
.hub-league-actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}

/* ── League view (season-long rollup) ── */
.league-code-wrap {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.league-code-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.league-code-value {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  letter-spacing: 0.18em; color: var(--ink);
  padding: 6px 10px; border: 1px solid var(--rule); background: var(--paper);
}
.league-section-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--moss);
  margin: 0 0 10px;
}
.league-section-label-spaced { margin-top: 28px; }

.league-empty {
  padding: 28px 4px; font-family: var(--font-sans); color: var(--ink);
}
.league-empty p { margin: 0; line-height: 1.55; }
.league-empty-inset { padding: 18px 4px 22px; }

.league-standings-wrap { overflow-x: auto; }
.league-standings {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-sans);
}
.league-standings th,
.league-standings td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  font-size: 14px;
}
.league-standings th {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500;
}
.league-standings td.league-rank,
.league-standings th.league-rank { width: 38px; color: var(--ink-soft); }
.league-standings td.league-num,
.league-standings th.league-num { text-align: right; width: 88px; }
.league-standings td.league-name {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
}
.league-name-id {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin-left: 6px;
  vertical-align: 2px;
}
.league-claim-btn {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 3px 8px;
  margin-left: 10px;
  border-radius: var(--card-radius);
  cursor: pointer;
  vertical-align: 2px;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.league-claim-btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.league-claim-btn:focus-visible {
  outline: 2px solid var(--accent, var(--ink));
  outline-offset: 2px;
}
.league-standings td.league-total { font-weight: 600; }
.league-standings td.league-points,
.league-standings th.league-points { text-align: right; width: 88px; font-weight: 700; }
.league-standings td.league-points {
  font-family: var(--font-display); font-size: 15px;
}
.league-standings tbody tr:last-child td { border-bottom: none; }

.league-pool-list { display: flex; flex-direction: column; }
.league-pool-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 4px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  transition: background 0.15s;
}
.league-pool-row:last-child { border-bottom: none; }
.league-pool-row:hover { background: rgba(var(--ink-rgb), 0.04); }
.league-pool-main { flex: 1; min-width: 0; }
.league-pool-name {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  line-height: 1.2;
}
.league-pool-meta {
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft); letter-spacing: 0.06em;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.league-pool-pin { letter-spacing: 0.12em; font-weight: 600; color: var(--ink); }
.league-pool-sep { opacity: 0.5; }
.league-pool-state.is-settled { color: var(--moss); }
.league-footnote { margin-top: 20px; font-size: 12px; line-height: 1.5; }

.league-danger-label { color: var(--red); }
.league-danger-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 4px;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}
.league-danger-copy {
  flex: 1; min-width: 220px;
  font-family: var(--font-sans); font-size: 13px; line-height: 1.55;
  color: var(--ink-soft);
}

@media (max-width: 480px) {
  .hub-league-row { flex-wrap: wrap; gap: 4px; }
  .hub-league-row-meta { flex-basis: 100%; font-size: 10px; }
  .league-code-wrap { gap: 6px; }
  .league-code-value { font-size: 13px; padding: 5px 8px; }
  .league-standings th,
  .league-standings td { padding: 10px 6px; font-size: 13px; }
  .league-standings td.league-num,
  .league-standings th.league-num { width: auto; }
  .league-standings td.league-name { font-size: 14px; }
  .league-pool-row { flex-wrap: wrap; padding: 12px 2px; }
  .league-danger-row { padding: 12px 2px; }
}

/* ── Mascot ── */
.masthead-mascot { display: block; margin: 10px auto 2px; }
.mascot-empty    { display: block; margin: 0 auto 16px; }
.mascot-fetching { text-align: center; padding: 28px 0; color: var(--ink-soft); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

/* Mascot is rendered static in the minimalist register — drink, ember puff,
   and cloud billow animations are intentionally not applied. The SVG groups
   remain in markup so a future register can re-enable motion by re-adding
   `animation:` declarations targeting these classes. The pre-existing
   prefers-reduced-motion override remains a safety net for assistive tech. */
.mascot-beer-mug,
.mascot-ember-group {
  transform-box: fill-box;
}
.mascot-puff-cloud {
  /* Hide the cloud burst entirely — it has no static-frame value (mid-puff
     pose looks broken when frozen). */
  display: none;
}

/* ===== UAUX PHASE 2/3 — mobile/touch baseline ===== */

/* Pressed states (Phase 3.2) */
.btn:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.95);
}
.btn-secondary:active:not(:disabled) {
  background: var(--moss-deep);
  color: var(--bone);
}
.tab:active { background: rgba(var(--ink-rgb), 0.06); }

/* Eliminate 300ms tap delay and double-tap zoom on tappables (Phase 3.3) */
button, .tab, .hub-row, .lb-main { touch-action: manipulation; }

/* Respect prefers-reduced-motion (Phase 2.4) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .mascot-beer-mug,
  .mascot-ember-group,
  .mascot-puff-cloud,
  .lb-holes-left::before {
    animation: none !important;
  }
}

/* ============================================================
   Editorial helper classes (font utilities, chips, score colors,
   pick flags). Palette tokens now live in :root, so `.editorial`
   is purely a descendant-selector marker for the editorial
   typography overrides defined further down. The class is left in
   place because existing markup wraps panel contents with it; the
   descendant rules apply within those subtrees.
   ============================================================ */

.font-display   { font-family: var(--font-condensed); letter-spacing: -0.01em; }
.font-editorial { font-family: var(--font-display); font-style: italic; }
.tabular        { font-variant-numeric: tabular-nums; }
.big-num        { font-family: var(--font-condensed); font-weight: 600; font-size: clamp(28px, 4vw, 44px); line-height: 1; letter-spacing: -0.02em; }

.editorial .ink-muted { color: var(--ink-muted); }
.editorial .ink-faint { color: var(--ink-faint); }
.editorial .hairline  { border-color: var(--hairline); }

.tier-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px;
  font-family: var(--font-condensed); font-weight: 700;
  font-size: 11px; letter-spacing: 0.04em; flex-shrink: 0;
}
.tier-chip.tier-A { background: #0F1B33; color: #FAF7F2; }
.tier-chip.tier-B { background: #334155; color: #FAF7F2; }
.tier-chip.tier-C { background: #64748B; color: #FAF7F2; }
.tier-chip.tier-D { background: #CBD5E1; color: #0F1B33; }
.tier-chip.tier-E { background: transparent; color: #0F1B33; border: 1px solid #94A3B8; }

/* Non-editorial themes: tier chips use theme tokens so contrast holds
   on dark/colored backgrounds. The editorial slate scale above stays
   for the default editorial palette. */
[data-theme] .tier-chip.tier-A { background: var(--ink); color: var(--paper); }
[data-theme] .tier-chip.tier-B { background: var(--ink-muted); color: var(--paper); }
[data-theme] .tier-chip.tier-C { background: var(--ink-faint); color: var(--paper); }
[data-theme] .tier-chip.tier-D { background: var(--paper-alt); color: var(--ink); }
[data-theme] .tier-chip.tier-E { background: transparent; color: var(--ink-muted); border-color: var(--ink-faint); }

/* rank-1 chip + score overrides are scoped to the row itself
   (> .lb-row / > .row-card) because the expansion panel is a sibling,
   not a child of the dark row — light-bg defaults must apply there. */
.editorial .lb-row-wrap.rank-1 > .lb-row .tier-chip.tier-A,
.editorial .lb-row-wrap.rank-1 > .row-card .tier-chip.tier-A { background: #FAF7F2; color: #0F1B33; }
.editorial .lb-row-wrap.rank-1 > .lb-row .tier-chip.tier-B,
.editorial .lb-row-wrap.rank-1 > .row-card .tier-chip.tier-B { background: #CBD5E1; color: #0F1B33; }
.editorial .lb-row-wrap.rank-1 > .lb-row .tier-chip.tier-C,
.editorial .lb-row-wrap.rank-1 > .row-card .tier-chip.tier-C { background: #64748B; color: #FAF7F2; }
.editorial .lb-row-wrap.rank-1 > .lb-row .tier-chip.tier-D,
.editorial .lb-row-wrap.rank-1 > .row-card .tier-chip.tier-D { background: #334155; color: #FAF7F2; }
.editorial .lb-row-wrap.rank-1 > .lb-row .tier-chip.tier-E,
.editorial .lb-row-wrap.rank-1 > .row-card .tier-chip.tier-E { background: transparent; color: #FAF7F2; border-color: #94A3B8; }

.editorial .score-neg { color: var(--red); font-weight: 700; }
.editorial .score-pos { color: var(--ink); }
.editorial .score-par { color: var(--ink-muted); }
/* rank-1 (dark row) score colors derived from --red / --paper so the
   palette stays a closed loop. The 55%/45% mix lifts --red into a warm
   dusty rose that reads on the ink background without grafting in a new
   coral. score-par stays on the cool-slate chip scale used elsewhere
   inside the dark row. Scoped to the row itself so the expansion panel
   (light bg) falls back to the default editorial score colors. */
.editorial .lb-row-wrap.rank-1 > .lb-row .score-neg,
.editorial .lb-row-wrap.rank-1 > .row-card .score-neg { color: color-mix(in oklch, var(--red) 55%, var(--paper)); }
.editorial .lb-row-wrap.rank-1 > .lb-row .score-pos,
.editorial .lb-row-wrap.rank-1 > .row-card .score-pos { color: var(--paper); }
.editorial .lb-row-wrap.rank-1 > .lb-row .score-par,
.editorial .lb-row-wrap.rank-1 > .row-card .score-par { color: #CBD5E1; }

.dropped { opacity: 0.45; }
.dropped .score-text { text-decoration: line-through; text-decoration-thickness: 1px; }

.pick-flag {
  display: inline-block; font-size: 9px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-left: 4px; color: var(--red);
}
.pick-flag.live { color: var(--amber-ink); }
.editorial .lb-row-wrap.rank-1 > .lb-row .pick-flag,
.editorial .lb-row-wrap.rank-1 > .row-card .pick-flag      { color: color-mix(in oklch, var(--red) 55%, var(--paper)); }
.editorial .lb-row-wrap.rank-1 > .lb-row .pick-flag.live,
.editorial .lb-row-wrap.rank-1 > .row-card .pick-flag.live { color: color-mix(in oklch, var(--amber) 50%, var(--paper)); }

.pick-status { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.round-live  { color: var(--amber-ink); font-weight: 600; }

.live-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(var(--amber-rgb), 0.4);
  animation: editorial-breathe 2.2s ease-in-out infinite;
  flex-shrink: 0; display: inline-block;
  will-change: box-shadow;
}
@keyframes editorial-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--amber-rgb), 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--amber-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot,
  #panel-leaderboard .row-card.is-live .mr-head-left::before,
  #panel-leaderboard .lb-row.is-live .dr-pos::before { animation: none; }
}

/* ============================================================
   FE_PLAN Phase 10 — pin banner + locked banner + lock toggle
   ------------------------------------------------------------
   Editorial-scoped: tokens (--ink, --paper-alt, --amber, --hairline)
   are inherited from the .editorial parent declared above.
   ============================================================ */

.editorial.pin-strip {
  position: sticky; top: 0; z-index: 30;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: 0 calc(-1 * max(28px, env(safe-area-inset-left))) 0 calc(-1 * max(28px, env(safe-area-inset-right)));
  padding: 0;
}
.editorial.pin-strip[hidden] { display: none; }
.pin-strip-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px max(28px, env(safe-area-inset-right)) 10px max(28px, env(safe-area-inset-left));
  max-width: 1200px; margin: 0 auto;
  font-family: var(--font-condensed);
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
}
.pin-strip-label { color: var(--ink-muted); font-weight: 600; }
.pin-strip-sep   { color: var(--ink-muted); font-weight: 400; padding: 0 2px; }
.pin-strip-pin   { font-weight: 700; letter-spacing: 0.22em; color: var(--ink); }
.pin-strip-copy {
  margin-left: auto;
  background: transparent; color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 10px 14px;
  min-height: 36px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
  border-radius: 0;
}
.pin-strip-copy:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pin-strip-copy.is-copied { background: var(--amber); color: var(--paper); border-color: var(--amber); }
.pin-strip-copy:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px;
}

.pin-strip-menu {
  margin-left: auto;
  position: relative;
}
.pin-strip-menu > summary {
  list-style: none;
  display: inline-flex; align-items: center;
  user-select: none;
}
.pin-strip-menu > summary::-webkit-details-marker { display: none; }
.pin-strip-menu > summary::marker { content: ""; }
.pin-strip-menu[open] > summary {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.pin-strip-menu-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  display: flex; flex-direction: column;
  min-width: 160px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.pin-strip-menu-item {
  display: block; width: 100%;
  text-align: left;
  background: transparent; color: var(--ink);
  border: none;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pin-strip-menu-item + .pin-strip-menu-item { border-top: 1px solid var(--hairline); }
.pin-strip-menu-item:hover { background: var(--ink); color: var(--paper); }
.pin-strip-menu-item:focus-visible {
  outline: 2px solid var(--amber); outline-offset: -2px;
}

.editorial.locked-strip {
  background: var(--banner-bg);
  border-bottom: 1px solid var(--hairline);
  margin: 0 calc(-1 * max(28px, env(safe-area-inset-left))) 0 calc(-1 * max(28px, env(safe-area-inset-right)));
  padding: 0;
}
.editorial.locked-strip[hidden] { display: none; }
.locked-strip-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 9px max(28px, env(safe-area-inset-right)) 9px max(28px, env(safe-area-inset-left));
  max-width: 1200px; margin: 0 auto;
  font-family: var(--font-condensed);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink);
}
.locked-strip-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--amber); flex-shrink: 0;
}
.locked-strip-label { font-weight: 700; }
.locked-strip-msg   { color: var(--ink-muted); font-weight: 500; letter-spacing: 0.06em; text-transform: none; font-size: 13px; }

.lock-toggle-row {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--paper-alt);
  border: 1px solid var(--hairline);
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.lock-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px;
  background: var(--amber); color: var(--paper);
  border: none; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.lock-toggle-btn:hover:not(:disabled) { background: var(--amber-ink); }
.lock-toggle-btn--locked { background: var(--ink); color: var(--paper); }
.lock-toggle-btn--locked:hover:not(:disabled) { background: var(--moss-deep); }
.lock-toggle-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.lock-toggle-meta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-align: right;
  margin-left: auto;
}
.lock-toggle-meta.hidden { display: none; }
@media (max-width: 640px) {
  .lock-toggle-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .lock-toggle-btn { width: 100%; }
  .lock-toggle-meta { text-align: left; margin-left: 0; }
}

/* Setup tab — one-line guidance above the numbered sections, and the
   auto-refresh callout (replaces an inline-styled side-stripe wrapper). */
#panel-setup .setup-intro {
  margin: 0 0 22px;
  max-width: 65ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.auto-refresh-row {
  margin-top: 14px;
  padding: 12px;
  background: var(--paper-alt);
  border: 1px solid var(--hairline);
}
.auto-refresh-row > label {
  display: flex; gap: 10px; align-items: flex-start;
  cursor: pointer;
}
.auto-refresh-row input[type="checkbox"] {
  margin-top: 3px;
  width: auto;
}
.auto-refresh-row > label > span { font-size: 13px; }
.auto-refresh-row .help { margin-top: 2px; }

@media (max-width: 640px) {
  .pin-strip-inner { font-size: 13px; gap: 8px; padding-top: 9px; padding-bottom: 9px; }
  .pin-strip-copy { padding: 5px 10px; }
  .locked-strip-inner { font-size: 12px; padding-top: 8px; padding-bottom: 8px; }
  #panel-setup .setup-intro { font-size: 15px; }
}

/* ============================================================
   FE_PLAN Phase 11 — Entries / Picks / Scores / Setup / Rules
   editorial refresh
   ------------------------------------------------------------
   Activates by adding class="editorial" to the inner content
   wrapper of each non-Leaderboard panel. Tokens (--ink, --paper,
   --paper-alt, --paper-card, --hairline, --amber, --ink-muted,
   --ink-faint) come from the .editorial declaration above.
   No behavior changes — class names and padding only.
   ============================================================ */

/* Section chrome inside an editorial subtree */
.editorial .section-title {
  font-family: var(--font-display);
  color: var(--ink);
}
.editorial .section-kicker {
  font-family: var(--font-condensed);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted);
}
.editorial .muted { color: var(--ink-muted); }
.editorial .help  { color: var(--ink-muted); font-style: italic; }

/* Entry rows (panel-entries) — row-card / lb-row-wrap layout.
   ID-scoped (was `.editorial`) so leaderboard markup wrapped in
   `.editorial` doesn't inherit entries-tuned typography. */
#panel-entries .row-card {
  background: var(--paper-card);
  border: 1px solid var(--hairline);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: background 0.15s, border-color 0.15s;
}
#panel-entries .row-card:hover {
  background: var(--paper-alt);
  border-color: var(--ink);
}
#panel-entries .lb-row-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}
#panel-entries .row-main { min-width: 0; }
#panel-entries .row-actions {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}
#panel-entries .row-card .entry-name {
  font-family: var(--font-display); font-style: italic;
  font-size: 20px; font-weight: 600;
  color: var(--ink); line-height: 1.2;
}
#panel-entries .row-card .entry-picks {
  font-family: var(--font-condensed);
  font-size: 14px; letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-top: 6px; line-height: 1.5;
}
#panel-entries .row-card .entry-tb {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* Form fields (panel-picks, panel-setup) */
.editorial .field-label {
  font-family: var(--font-condensed);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted);
}
.editorial input[type="text"],
.editorial input[type="number"],
.editorial input[type="email"],
.editorial input[type="file"],
.editorial select,
.editorial textarea {
  background: var(--paper-alt);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--font-sans);
  transition: border-color 0.15s, background 0.15s;
}
.editorial input:focus,
.editorial select:focus,
.editorial textarea:focus {
  background: var(--paper-card);
  border-color: var(--ink);
  outline: none;
}

/* Tier picker (panel-picks) */
.editorial .tier-card {
  background: var(--paper-card);
  border: 1px solid var(--hairline);
  padding: 16px;
}
.editorial .tier-card .tier-label {
  font-family: var(--font-display); font-style: italic;
  font-size: 17px; color: var(--ink);
}
.editorial .tier-card .tier-range {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.15em;
  color: var(--ink-muted);
}

/* Override grid (panel-scores) */
.editorial .golfer-entry-row {
  background: var(--paper-card);
  border: 1px solid var(--hairline);
  padding: 10px 12px;
  margin-bottom: 6px;
}
.editorial .golfer-entry-row.header {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-condensed);
  font-size: 11px; letter-spacing: 0.16em;
  color: var(--ink-muted);
  padding: 6px 12px 10px;
  margin-bottom: 6px;
}
.editorial .golfer-entry-row .g-name {
  font-family: var(--font-display);
  font-weight: 500; font-size: 16px;
  color: var(--ink);
}
.editorial .golfer-entry-row input,
.editorial .golfer-entry-row select {
  background: var(--paper-alt);
  border: 1px solid var(--hairline);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 8px;
}
.editorial .golfer-entry-row select { font-family: var(--font-sans); }

/* Rules (panel-rules) */
.editorial .rules-list {
  /* Cap prose at editorial measure so long rules don't run to 130+ch on desktop. */
  max-width: 65ch;
}
.editorial .rules-list li {
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}
.editorial .rules-list li::before { color: var(--amber); }
.editorial .rules-list h3 {
  font-family: var(--font-display);
  color: var(--ink);
}

/* ============================================================
   FE_PLAN Phase 4 — Leaderboard panel layout
   ------------------------------------------------------------
   ID-scoped to #panel-leaderboard (not `.editorial`) per the
   prophylactic note: `.editorial`-scoped rules collide when
   another panel later joins the `.editorial` family. The test
   page used Tailwind utilities for layout; these are the
   equivalents written by hand so we keep the no-build-step ethos.
   ============================================================ */

#panel-leaderboard .lb-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 640px) {
  #panel-leaderboard .lb-container { padding: 0 16px; }
}

/* Hero */
#panel-leaderboard .lb-hero {
  border-bottom: 1px solid var(--hairline);
}
#panel-leaderboard .lb-hero .lb-container {
  padding-top: 28px; padding-bottom: 28px;
}
@media (max-width: 640px) {
  #panel-leaderboard .lb-hero .lb-container {
    padding-top: 24px; padding-bottom: 24px;
  }
}
#panel-leaderboard .lb-hero-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
#panel-leaderboard .lb-hero-titles { min-width: 0; }
#panel-leaderboard .lb-live-label {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-bottom: 8px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-muted);
}
@media (max-width: 640px) {
  #panel-leaderboard .lb-live-label { font-size: 10px; }
}
#panel-leaderboard .lb-hero-h1 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: var(--display-weight);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
#panel-leaderboard .lb-hero-sub {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--ink-muted);
  margin: 12px 0 0;
}
#panel-leaderboard .lb-hero-sub:empty { display: none; }

/* Refresh pill */
#panel-leaderboard .refresh-btn {
  background: var(--paper-card);
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
  border-radius: 999px;
  padding: 10px 14px;
  min-height: 36px;
  font-size: 12px;
  font-family: var(--font-sans);
  transition: border-color 150ms ease, color 150ms ease;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  align-self: flex-end;
}
#panel-leaderboard .refresh-btn:hover {
  border-color: var(--ink-muted); color: var(--ink);
}
#panel-leaderboard .refresh-label {
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 10px; font-weight: 600;
}
#panel-leaderboard .refresh-time {
  font-size: 11px;
  color: var(--ink-muted);
}

/* Hero meta line — single typographic strip replacing the old KPI tile grid.
   Format ("Best 4 of 5") moved to the editor's-note paragraph below the hero. */
#panel-leaderboard .lb-hero-meta {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 2px 8px;
}
#panel-leaderboard .lb-hero-meta .tabular {
  color: var(--ink); font-weight: 700;
}
#panel-leaderboard .lb-hero-meta-sep {
  color: var(--ink-muted);
}
/* Pre-tournament empty state: hide the live-stats span, swap in an
   editorial italic caption so the hero doesn't render as a row of dashes
   before round 1 begins. */
#panel-leaderboard .lb-hero-meta-pre {
  display: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-muted);
}
#panel-leaderboard .lb-hero-meta.is-pretournament .lb-hero-meta-live { display: none; }
#panel-leaderboard .lb-hero-meta.is-pretournament .lb-hero-meta-pre  { display: inline; }
@media (max-width: 640px) {
  #panel-leaderboard .lb-hero-meta { font-size: 13px; gap: 2px 6px; }
  #panel-leaderboard .lb-hero-meta-pre { font-size: 15px; }
}

/* Editor's note */
#panel-leaderboard .lb-note {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--hairline);
}
#panel-leaderboard .lb-note-inner {
  padding-top: 12px; padding-bottom: 12px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 24px;
  font-size: 14px;
}
#panel-leaderboard .lb-note-tag {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink);
}
#panel-leaderboard .lb-note-inner strong {
  color: var(--ink); font-weight: 700;
}

/* Sticky filter */
#panel-leaderboard .lb-filter {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
/* Only the pin-strip is sticky (top:0); the locked-strip is static and
   scrolls away. So lb-filter only needs to offset for pin-strip. The
   earlier rules adding 44/84px for locked-strip's mere presence left a
   gap once locked-strip scrolled past. */
body:has(.pin-strip:not([hidden])) #panel-leaderboard .lb-filter { top: 44px; }
#panel-leaderboard .lb-filter-inner {
  padding-top: 20px; padding-bottom: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
#panel-leaderboard .lb-filter-h3 {
  font-size: clamp(18px, 2.2vw, 22px); font-weight: 700;
  color: var(--ink);
  margin: 0;
}
#panel-leaderboard .lb-filter-range { font-size: 14px; }
@media (max-width: 640px) {
  #panel-leaderboard .lb-filter-range { display: none; }
}
#panel-leaderboard .lb-filter-input-wrap { margin-left: auto; }
#panel-leaderboard .lb-filter-input-wrap input[type="text"] {
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: var(--ink);
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 16px;
  border-radius: 2px;
  outline: none;
  width: 240px;
  max-width: 100%;
  transition: border-color 100ms ease;
}
@media (max-width: 640px) {
  #panel-leaderboard .lb-filter-input-wrap input[type="text"] { width: 180px; font-size: 16px; }
}
#panel-leaderboard .lb-filter-input-wrap input[type="text"]:focus {
  border-color: var(--ink);
}

/* Desktop column header. Chained .field-desktop boosts specificity so the
   later `.field-desktop { display: block }` rule below can't flatten the
   grid back to stacked blocks. */
#panel-leaderboard .lb-col-header.field-desktop {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  padding-top: 8px; padding-bottom: 8px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-muted);
  border-top: 1px solid var(--hairline);
}
#panel-leaderboard .lb-col-pos    { grid-column: span 1; text-align: right; }
#panel-leaderboard .lb-col-entry  { grid-column: span 3; }
#panel-leaderboard .lb-col-roster { grid-column: span 5; }
#panel-leaderboard .lb-col-drop   { grid-column: span 1; text-align: right; }
#panel-leaderboard .lb-col-round  { grid-column: span 1; text-align: right; }
#panel-leaderboard .lb-col-total  { grid-column: span 1; text-align: right; }

/* Mobile / desktop field containers */
#panel-leaderboard .field-mobile  { display: block; }
#panel-leaderboard .field-desktop { display: none; }
@media (min-width: 900px) {
  #panel-leaderboard .field-mobile  { display: none; }
  #panel-leaderboard .field-desktop { display: block; }
}
#panel-leaderboard .lb-mobile-list {
  padding-top: 16px; padding-bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
#panel-leaderboard .lb-desktop-list {
  padding-top: 0; padding-bottom: 80px;
}

/* ============================================================
   FE_PLAN Phase 5 — Scoreboard row + feature card + expand chrome
   ID-scoped to #panel-leaderboard to keep the Phase 11 collision
   class of bug from recurring.
   ============================================================ */

#panel-leaderboard .lb-empty {
  text-align: center; padding: 48px 16px;
  color: var(--ink-muted); font-size: 14px;
}

/* Rank-leader sizing (top 3) — shared between mobile and desktop.
   Rank-1 also gets the dark inverted treatment further down. */
#panel-leaderboard .lb-row-wrap.rank-leader .lb-row {
  padding: 18px 8px;
}
#panel-leaderboard .lb-row-wrap.rank-leader .dr-pos { font-size: 30px; }
#panel-leaderboard .lb-row-wrap.rank-leader .dr-name { font-size: 21px; }
#panel-leaderboard .lb-row-wrap.rank-leader .dr-deck { font-size: 12px; }
#panel-leaderboard .lb-row-wrap.rank-leader .dr-roster-cell { font-size: 14px; }
#panel-leaderboard .lb-row-wrap.rank-leader .dr-total { font-size: 32px; }

#panel-leaderboard .lb-row-wrap.rank-leader .row-card {
  padding: 18px 16px;
}
#panel-leaderboard .lb-row-wrap.rank-leader .mr-pos { font-size: 26px; }
#panel-leaderboard .lb-row-wrap.rank-leader .mr-name { font-size: 22px; }
#panel-leaderboard .lb-row-wrap.rank-leader .mr-total { font-size: 28px; }
#panel-leaderboard .mr-deck {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 6px;
  font-style: italic;
  font-family: var(--font-display);
}

/* Rank-1 dark inverted treatment. */
#panel-leaderboard .lb-row-wrap.rank-1 .lb-row,
#panel-leaderboard .lb-row-wrap.rank-1 .row-card {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
#panel-leaderboard .lb-row-wrap.rank-1:hover .lb-row,
#panel-leaderboard .lb-row-wrap.rank-1 .lb-row:focus-visible,
#panel-leaderboard .lb-row-wrap.rank-1[data-open="true"] > .lb-row {
  background: var(--ink);
}
#panel-leaderboard .lb-row-wrap.rank-1 .lb-row:focus-visible {
  outline-color: var(--paper);
}
#panel-leaderboard .lb-row-wrap.rank-1 .dr-deck,
#panel-leaderboard .lb-row-wrap.rank-1 .mr-deck,
#panel-leaderboard .lb-row-wrap.rank-1 .mr-meta,
#panel-leaderboard .lb-row-wrap.rank-1 .mr-pos,
#panel-leaderboard .lb-row-wrap.rank-1 .dr-drop,
#panel-leaderboard .lb-row-wrap.rank-1 .dr-round { color: var(--ink-faint); }
#panel-leaderboard .lb-row-wrap.rank-1 .pick-line .pick-name { color: var(--paper); }
#panel-leaderboard .lb-row-wrap.rank-1 .picks-list { border-top-color: rgba(148, 163, 184, 0.28); }

/* Non-editorial themes: the dark-inverted leader-row treatment above
   reads as a jarring light bar against dark/colored themes. Swap to a
   subtle accent-tinted surface and revert text colors to defaults. */
html[data-theme] #panel-leaderboard .lb-row-wrap.rank-1 .lb-row,
html[data-theme] #panel-leaderboard .lb-row-wrap.rank-1 .row-card {
  background: rgba(var(--amber-rgb), 0.1);
  color: var(--ink);
  border-color: rgba(var(--amber-rgb), 0.3);
}
html[data-theme] #panel-leaderboard .lb-row-wrap.rank-1:hover .lb-row,
html[data-theme] #panel-leaderboard .lb-row-wrap.rank-1 .lb-row:focus-visible,
html[data-theme] #panel-leaderboard .lb-row-wrap.rank-1[data-open="true"] > .lb-row {
  background: rgba(var(--amber-rgb), 0.15);
}
html[data-theme] #panel-leaderboard .lb-row-wrap.rank-1 .dr-deck,
html[data-theme] #panel-leaderboard .lb-row-wrap.rank-1 .mr-deck,
html[data-theme] #panel-leaderboard .lb-row-wrap.rank-1 .mr-meta,
html[data-theme] #panel-leaderboard .lb-row-wrap.rank-1 .mr-pos,
html[data-theme] #panel-leaderboard .lb-row-wrap.rank-1 .dr-drop,
html[data-theme] #panel-leaderboard .lb-row-wrap.rank-1 .dr-round { color: var(--ink-muted); }
html[data-theme] #panel-leaderboard .lb-row-wrap.rank-1 .pick-line .pick-name { color: var(--ink); }
html[data-theme] #panel-leaderboard .lb-row-wrap.rank-1 .picks-list { border-top-color: var(--hairline); }
/* Reset the editorial-scoped inverted score / tier-chip rules for theme mode */
html[data-theme] .editorial .lb-row-wrap.rank-1 > .lb-row .score-neg,
html[data-theme] .editorial .lb-row-wrap.rank-1 > .row-card .score-neg { color: var(--red); }
html[data-theme] .editorial .lb-row-wrap.rank-1 > .lb-row .score-pos,
html[data-theme] .editorial .lb-row-wrap.rank-1 > .row-card .score-pos { color: var(--ink); }
html[data-theme] .editorial .lb-row-wrap.rank-1 > .lb-row .score-par,
html[data-theme] .editorial .lb-row-wrap.rank-1 > .row-card .score-par { color: var(--ink-muted); }
html[data-theme] .editorial .lb-row-wrap.rank-1 > .lb-row .pick-flag,
html[data-theme] .editorial .lb-row-wrap.rank-1 > .row-card .pick-flag { color: var(--red); }
html[data-theme] .editorial .lb-row-wrap.rank-1 > .lb-row .pick-flag.live,
html[data-theme] .editorial .lb-row-wrap.rank-1 > .row-card .pick-flag.live { color: var(--amber); }
html[data-theme] .editorial .lb-row-wrap.rank-1 > .lb-row .tier-chip.tier-A,
html[data-theme] .editorial .lb-row-wrap.rank-1 > .row-card .tier-chip.tier-A { background: var(--ink); color: var(--paper); }
html[data-theme] .editorial .lb-row-wrap.rank-1 > .lb-row .tier-chip.tier-B,
html[data-theme] .editorial .lb-row-wrap.rank-1 > .row-card .tier-chip.tier-B { background: var(--ink-muted); color: var(--paper); }
html[data-theme] .editorial .lb-row-wrap.rank-1 > .lb-row .tier-chip.tier-C,
html[data-theme] .editorial .lb-row-wrap.rank-1 > .row-card .tier-chip.tier-C { background: var(--ink-faint); color: var(--ink); }
html[data-theme] .editorial .lb-row-wrap.rank-1 > .lb-row .tier-chip.tier-D,
html[data-theme] .editorial .lb-row-wrap.rank-1 > .row-card .tier-chip.tier-D { background: var(--paper-alt); color: var(--ink); }
html[data-theme] .editorial .lb-row-wrap.rank-1 > .lb-row .tier-chip.tier-E,
html[data-theme] .editorial .lb-row-wrap.rank-1 > .row-card .tier-chip.tier-E { background: transparent; color: var(--ink-muted); border-color: var(--ink-faint); }

/* Mobile row card */
#panel-leaderboard .row-card {
  background: var(--paper-card);
  border: 1px solid var(--hairline);
  border-radius: var(--card-radius);
  padding: 12px 14px;
  cursor: pointer;
  outline-offset: -2px;
  transition: border-color 150ms ease;
}
#panel-leaderboard .row-card:focus-visible {
  outline: 2px solid var(--ink);
}
#panel-leaderboard .row-card[aria-expanded="true"] { border-color: var(--ink); }
#panel-leaderboard .row-card.is-live[aria-expanded="true"] { border-color: var(--amber); }
/* Live indicator: leading amber dot before the position number,
   reusing the live-dot motif from the leaderboard hero. */
#panel-leaderboard .row-card.is-live .mr-head-left::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(var(--amber-rgb), 0.4);
  animation: editorial-breathe 2.2s ease-in-out infinite;
  flex-shrink: 0;
  align-self: center;
  margin-right: 2px;
}
#panel-leaderboard .mr-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
#panel-leaderboard .mr-head-left {
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
}
#panel-leaderboard .mr-pos { font-size: 22px; color: var(--ink-muted); }
#panel-leaderboard .mr-name {
  font-size: 18px; font-weight: 600; line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#panel-leaderboard .mr-total { font-size: 22px; flex-shrink: 0; }
#panel-leaderboard .mr-meta {
  margin-top: 8px;
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-muted);
}

/* Picks list (mobile inside row-card) */
#panel-leaderboard .picks-list {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  padding-top: 10px; margin-top: 10px;
  border-top: 1px dashed var(--hairline);
}
#panel-leaderboard .pick-line {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; min-width: 0;
}
#panel-leaderboard .pick-line .pick-name {
  color: var(--ink); font-weight: 500;
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#panel-leaderboard .pick-line .score-text { font-weight: 600; }

/* Desktop dense row (12-col grid) */
#panel-leaderboard .lb-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  padding: 12px 8px;
  margin: 0 -8px;
  align-items: center;
  cursor: pointer;
  outline-offset: -2px;
  transition: background-color 120ms ease;
}
#panel-leaderboard .lb-row-wrap + .lb-row-wrap > .lb-row {
  border-top: 1px solid var(--hairline);
}
#panel-leaderboard .lb-row:hover {
  background: var(--paper-alt);
}
#panel-leaderboard .lb-row:focus-visible {
  outline: 2px solid var(--ink); background: var(--paper-alt);
}
#panel-leaderboard .lb-row-wrap[data-open="true"] > .lb-row {
  background: var(--paper-alt);
}
/* Live indicator: leading amber dot in the position cell, sharing the
   live-dot motif from the leaderboard hero. .dr-pos is already a
   right-justified flex container with gap, so the dot becomes the
   leftmost flex item next to the rank number. */
#panel-leaderboard .lb-row.is-live .dr-pos::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(var(--amber-rgb), 0.4);
  animation: editorial-breathe 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
#panel-leaderboard .dr-pos {
  grid-column: span 1; text-align: right;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  font-size: 22px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-condensed);
}
#panel-leaderboard .dr-entry { grid-column: span 3; min-width: 0; }
#panel-leaderboard .dr-name {
  font-size: 17px; font-weight: 600; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#panel-leaderboard .dr-deck {
  font-size: 11px; color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
}
#panel-leaderboard .dr-roster {
  grid-column: span 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
#panel-leaderboard .dr-roster-cell {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
}
#panel-leaderboard .dr-roster-cell .score-text { font-weight: 600; }
#panel-leaderboard .dr-drop {
  grid-column: span 1; text-align: right;
  font-size: 13px; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
#panel-leaderboard .dr-round {
  grid-column: span 1; text-align: right;
  font-size: 13px; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
#panel-leaderboard .dr-total {
  grid-column: span 1; text-align: right;
  font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-condensed);
}

/* Pick status (scoped) — base + is-live / is-warn variants */
#panel-leaderboard .pick-status {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-weight: 600;
  margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#panel-leaderboard .pick-status.is-live { color: var(--amber-ink); }
#panel-leaderboard .pick-status.is-warn { color: var(--red); }
#panel-leaderboard .lb-row-wrap.rank-1 > .lb-row .pick-status,
#panel-leaderboard .lb-row-wrap.rank-1 > .row-card .pick-status { color: var(--ink-faint); }
#panel-leaderboard .lb-row-wrap.rank-1 > .lb-row .pick-status.is-live,
#panel-leaderboard .lb-row-wrap.rank-1 > .row-card .pick-status.is-live { color: color-mix(in oklch, var(--amber) 50%, var(--paper)); }
#panel-leaderboard .lb-row-wrap.rank-1 > .lb-row .pick-status.is-warn,
#panel-leaderboard .lb-row-wrap.rank-1 > .row-card .pick-status.is-warn { color: color-mix(in oklch, var(--red) 55%, var(--paper)); }

/* Pick name block (shared between feature cards + expand panel) */
#panel-leaderboard .pick-name-block {
  display: flex; flex-direction: column; min-width: 0; line-height: 1.15;
}
#panel-leaderboard .pick-fullname {
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Expand panel — collapsed by default. Phase 6 lights up the
   click/keydown toggling; the data-open swap is already wired
   to the CSS here so toggling is purely a JS state change. */
#panel-leaderboard .lb-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
#panel-leaderboard .lb-expand[data-open="true"] { grid-template-rows: 1fr; }
#panel-leaderboard .lb-expand-clip { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  #panel-leaderboard .lb-expand { transition: none; }
}

#panel-leaderboard .field-desktop .lb-expand-inner {
  background: var(--paper-alt);
  border-top: 1px dashed var(--hairline);
  padding: 14px 16px 16px 18px;
}
#panel-leaderboard .field-mobile .lb-expand-inner {
  background: var(--paper-alt);
  border: 1px solid var(--hairline);
  border-top: 1px dashed var(--hairline);
  border-radius: 0 0 2px 2px;
  margin-top: -1px;
  padding: 12px 14px 14px;
}

#panel-leaderboard .lb-expand-head,
#panel-leaderboard .lb-expand-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, 48px) 56px;
  align-items: center;
  gap: 4px 10px;
  padding: 6px 0;
}
#panel-leaderboard .lb-expand-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 5px;
  padding-top: 0;
}
#panel-leaderboard .lb-expand-head .lb-c-r,
#panel-leaderboard .lb-expand-head .lb-c-sum { text-align: right; }
#panel-leaderboard .lb-expand-row { font-size: 13px; }
#panel-leaderboard .lb-expand-row + .lb-expand-row {
  border-top: 1px dashed var(--hairline);
}
#panel-leaderboard .lb-expand-row .lb-c-name {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
#panel-leaderboard .lb-expand-row .lb-c-r {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#panel-leaderboard .lb-expand-row .lb-c-sum {
  text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-condensed);
  font-size: 16px;
}
#panel-leaderboard .lb-expand-row.dropped { opacity: 0.55; }
#panel-leaderboard .lb-expand-row.dropped .pick-fullname,
#panel-leaderboard .lb-expand-row.dropped .lb-c-sum {
  text-decoration: line-through; text-decoration-thickness: 1px;
}
#panel-leaderboard .lb-expand-row.dropped .pick-status { text-decoration: none; }
#panel-leaderboard .lb-live-cell {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  line-height: 1.1; gap: 1px;
}
#panel-leaderboard .lb-live-thru {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--amber-ink); font-weight: 700; white-space: nowrap;
}
#panel-leaderboard .lb-expand-rollup {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
#panel-leaderboard .rollup-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-muted); font-weight: 600;
}
#panel-leaderboard .rollup-math {
  font-size: 12px; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
#panel-leaderboard .rollup-total {
  font-family: var(--font-condensed);
  font-size: 28px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  #panel-leaderboard .lb-expand-head,
  #panel-leaderboard .lb-expand-row {
    grid-template-columns: minmax(0, 1fr) repeat(4, 36px) 46px;
    gap: 3px 6px;
    font-size: 12px;
  }
  #panel-leaderboard .lb-expand-row .lb-c-sum { font-size: 15px; }
  #panel-leaderboard .lb-live-thru { font-size: 8px; }
}

/* ============================================================
   FE_PLAN Phase 7 — Override hint + lock-aware panel
   ------------------------------------------------------------
   Override hint: dotted underline on the round cell. Pure
   text-decoration so the cell's box dimensions don't change and
   the panel doesn't shift when scrolled into view. `title` attr
   on the cell exposes "Manually overridden by commissioner" to
   screen readers + native tooltip.
   Lock-gate: rule below hides any future `.edit-pick-btn` inside
   a locked panel. The panel renders no edit affordances today —
   this is preventative scaffolding so a future contributor adding
   a pick-level edit shortcut can't bypass the pool lock.
   ============================================================ */
#panel-leaderboard .lb-expand-row .lb-c-r.is-override {
  text-decoration: underline dotted;
  text-decoration-color: var(--ink-faint);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: help;
}
#panel-leaderboard .lb-expand[data-locked="true"] .edit-pick-btn { display: none; }

/* ============================================================
   SIDE BETS (phase 5.2a baseline; phase 5.3 reshape)
   Place-a-bet form, Bets-on-the-Board card list, backer badge on
   leaderboard rows. Visual hooks (.panel-side-bets, .panel-place-
   bet, .panel-bets-board, .place-bet-form, .backer-badge) are
   referenced by phase 5.2b's bettor-mode CSS — do not rename.
   ============================================================ */
.panel-side-bets .section { margin-bottom: 20px; }
.panel-place-bet .field { display: block; margin-bottom: 14px; }
.panel-place-bet select,
.panel-place-bet input[type="text"] {
  width: 100%;
}

#bet-locked-banner { margin-bottom: 14px; }

/* Odds input — text field paired with a 3-way American / Fractional / %
   format toggle. The toggle is a passive hint of what format the user is
   typing; parseOddsInput auto-detects regardless. */
.odds-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}
.odds-input-row input[type="text"] {
  flex: 1 1 140px;
  min-width: 0;
}
.odds-format-toggle {
  display: inline-flex;
  border: 1px solid var(--hairline);
  background: var(--paper);
  border-radius: 6px;
  overflow: hidden;
  align-self: stretch;
}
.odds-format-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.odds-format-btn + .odds-format-btn { border-left: 1px solid var(--hairline); }
.odds-format-btn:hover { background: var(--paper-alt); color: var(--ink); }
.odds-format-btn.is-active {
  background: var(--ink);
  color: var(--paper);
}
.odds-format-btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}
#bet-odds-preview code {
  background: var(--paper-alt);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.92em;
}
#bet-odds-preview.is-valid { color: var(--moss-deep); }
#bet-odds-preview.is-invalid { color: var(--red); }

/* Board toolbar — odds-display toggle that flips every card's odds at once. */
.bets-board-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.bets-board-toolbar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

#bets-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* One bet = one card. data-entry-id is present only when the bettor tagged
   a pool entry — the backer-badge scrollIntoView uses that as its anchor. */
.bet-card {
  border: 1px solid var(--hairline);
  background: var(--paper);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: var(--card-radius);
}
.bet-card.is-matched { background: var(--paper-alt); }
.bet-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bet-card-bettor {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink);
  margin-right: auto;
}
.bet-odds-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.bet-odds-pill:hover { background: var(--moss-deep, var(--ink)); }
.bet-odds-pill:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.bet-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink-soft);
}
.bet-status-pill.is-open    { border-color: var(--moss-deep, var(--ink)); color: var(--moss-deep, var(--ink)); }
.bet-status-pill.is-matched { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bet-card-wager {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
}
.bet-card-meta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-muted);
}
.bet-card-meta-row .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 6px;
}
.bet-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.bet-card-actions .bet-take-btn { margin-right: auto; }
.bet-card-taker {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 14px;
}
.bet-card-taker .arrow { margin-right: 6px; color: var(--ink-soft); }

.backer-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s, color 0.15s;
}
.backer-badge:hover {
  background: var(--ink);
  color: var(--paper);
}
.backer-badge:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.win-pct-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  vertical-align: middle;
}

/* =========================================================================
   THEMES
   Each [data-theme="…"] block overrides main's tokens. The default page
   (no attribute) keeps the editorial look defined in :root. Theme blocks
   below are derived from omarchy palettes; see the picker JS for the
   full list and groupings.
   ========================================================================= */

[data-theme="editorial"] {
  /* explicit no-op for the picker's default entry */
}

/* All non-editorial themes share a single overridable token set for
   surfaces that were specific to the editorial palette (e.g. the warm
   cream locked-strip banner). Per-theme blocks below can override
   these — selector specificity here MUST equal a single [data-theme="x"]
   so source order decides, not specificity. */
[data-theme] {
  --banner-bg: rgba(var(--amber-rgb), 0.12);
  /* Most themes lean modern-minimal — Inter for both display and body,
     keep JetBrains Mono for tabular numerals. Individual blocks below
     override --font-display when they want a serif (Newsreader) or
     terminal aesthetic (VT323). */
  --font-display:   'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:      'Inter', system-ui, -apple-system, sans-serif;
  --font-condensed: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --card-radius:    4px;
  /* Clear the editorial amber wash by default; signature themes below
     can paint their own ambient layer. */
  --ambient-bg:     none;
  --display-weight: 700;
}

/* Signature ambient layers — keep these subtle enough to not compete
   with content. Each gives its theme a sense of place. */
[data-theme="hackerman"] {
  --ambient-bg: repeating-linear-gradient(transparent 0, transparent 3px, rgba(var(--amber-rgb), 0.05) 3px, rgba(var(--amber-rgb), 0.05) 4px);
  --display-weight: 400;
}
[data-theme="retro-82"] {
  --ambient-bg: repeating-linear-gradient(transparent 0, transparent 4px, rgba(var(--amber-rgb), 0.04) 4px, rgba(var(--amber-rgb), 0.04) 5px);
  --display-weight: 400;
}
[data-theme="tokyo"],
[data-theme="tokyo-night"] {
  --ambient-bg: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--amber-rgb), 0.1), transparent 70%);
}
[data-theme="ethereal"] {
  --ambient-bg: radial-gradient(ellipse 60% 60% at 20% 30%, rgba(var(--amber-rgb), 0.1), transparent 70%),
                radial-gradient(ellipse 60% 60% at 80% 70%, rgba(var(--red-rgb), 0.05), transparent 70%);
}
[data-theme="lumon"] {
  --ambient-bg: radial-gradient(ellipse 100% 60% at 50% -20%, rgba(var(--amber-rgb), 0.08), transparent 80%);
}
/* Chinese: warm xuan-paper wash + a faint vermillion seal-stamp in the
   bottom-right corner. Subtle enough not to compete with content but
   gives the page a sense of place — like reading on rice paper next to
   a chop mark. */
[data-theme="chinese"] {
  --ambient-bg: radial-gradient(ellipse 60% 50% at 50% -10%, rgba(201, 162, 39, 0.18), transparent 70%),
                radial-gradient(circle 240px at 92% 96%, rgba(200, 16, 46, 0.10), transparent 70%),
                repeating-linear-gradient(135deg, transparent 0 22px, rgba(72, 36, 8, 0.018) 22px 23px);
  --display-weight: 700;
}

/* Terminal / VT323 themes: tighten the wide editorial label tracking,
   monospace already has plenty of letterform width. */
:is([data-theme="hackerman"], [data-theme="retro-82"])
  :is(.masthead-kicker, .masthead-sub, .pin-kicker, .tab,
      .section-kicker, .field-label, .btn, .lb-live-label) {
  letter-spacing: 0.05em;
}

/* Vantablack / Lumon: corporate severance vibe — extra-wide labels. */
:is([data-theme="vantablack"], [data-theme="lumon"])
  :is(.masthead-kicker, .masthead-sub, .lb-live-label) {
  letter-spacing: 0.28em;
}

/* ::selection — paint text-selection with the theme's accent so the
   highlight always feels native. */
::selection {
  background: var(--amber);
  color: var(--paper);
}
[data-theme="hackerman"] ::selection,
[data-theme="vantablack"] ::selection {
  background: var(--amber);
  color: var(--paper);
}

/* VT323 has no italic glyph — browser fake-slanting reads as broken,
   not stylized. Normalize the masthead "Major" emphasis in terminal
   themes and let color carry the distinction instead. */
[data-theme="hackerman"] .masthead h1 em,
[data-theme="retro-82"] .masthead h1 em {
  font-style: normal;
}

/* Atmospheric themes: leader-row spotlight. The accent-tinted bg from
   the html[data-theme] rank-1 block gets a soft outer glow so the
   leader reads as luminous. Editorial keeps its inverted dark row. */
:is([data-theme="hackerman"], [data-theme="tokyo"], [data-theme="tokyo-night"], [data-theme="ethereal"], [data-theme="retro-82"], [data-theme="osaka-jade"], [data-theme="chinese"], [data-theme="us-open"], [data-theme="the-open"])
  #panel-leaderboard .lb-row-wrap.rank-1 .lb-row,
:is([data-theme="hackerman"], [data-theme="tokyo"], [data-theme="tokyo-night"], [data-theme="ethereal"], [data-theme="retro-82"], [data-theme="osaka-jade"], [data-theme="chinese"], [data-theme="us-open"], [data-theme="the-open"])
  #panel-leaderboard .lb-row-wrap.rank-1 .row-card {
  box-shadow: 0 0 0 1px rgba(var(--amber-rgb), 0.25),
              0 4px 24px rgba(var(--amber-rgb), 0.18);
}

/* Brutalist themes: thicker active-tab indicator for harsher
   declaration. Atmospheric themes: thinner but glowing. */
:is([data-theme="vantablack"], [data-theme="matte-black"], [data-theme="white"])
  .tab.active::after {
  height: 4px;
}
:is([data-theme="hackerman"], [data-theme="tokyo-night"], [data-theme="tokyo"], [data-theme="ethereal"], [data-theme="chinese"], [data-theme="us-open"], [data-theme="the-open"])
  .tab.active::after {
  height: 2px;
  box-shadow: 0 0 8px rgba(var(--amber-rgb), 0.7);
}

/* Refresh "just-now" pill: in atmospheric themes the live dot reads
   as a signal, not a flat indicator. Adds a soft amber glow ring. */
:is([data-theme="hackerman"], [data-theme="tokyo-night"], [data-theme="tokyo"], [data-theme="ethereal"], [data-theme="retro-82"], [data-theme="chinese"], [data-theme="us-open"], [data-theme="the-open"])
  #panel-leaderboard .refresh-btn {
  box-shadow: 0 0 0 1px rgba(var(--amber-rgb), 0.2),
              0 0 16px rgba(var(--amber-rgb), 0.15);
}

/* Picker pill: subtle accent glow on hover in atmospheric themes so
   the pill reads as a "live" UI element, not a static button. */
:is([data-theme="hackerman"], [data-theme="tokyo-night"], [data-theme="tokyo"], [data-theme="ethereal"], [data-theme="retro-82"], [data-theme="chinese"], [data-theme="us-open"], [data-theme="the-open"])
  .theme-toggle:hover {
  box-shadow: var(--shadow), 0 0 12px rgba(var(--amber-rgb), 0.22);
  border-color: var(--amber);
}

/* Color the page scrollbar to match the theme so dark pages don't
   show a bright system scrollbar (Chrome / WebKit). */
:is([data-theme]) {
  scrollbar-color: var(--ink-faint) var(--paper);
}
:is([data-theme]) ::-webkit-scrollbar {
  width: 12px; height: 12px;
}
:is([data-theme]) ::-webkit-scrollbar-track {
  background: var(--paper);
}
:is([data-theme]) ::-webkit-scrollbar-thumb {
  background: var(--paper-alt);
  border: 3px solid var(--paper);
  border-radius: 6px;
}
:is([data-theme]) ::-webkit-scrollbar-thumb:hover {
  background: var(--ink-faint);
}

/* Picker dropdown menu: dark-themed border-color when the surface is
   already a raised card surface — keeps the menu boundary visible
   without harsh contrast. */
:is([data-theme]) .theme-menu {
  border-color: rgba(var(--ink-rgb), 0.18);
}

/* Live indicator dot (.lb-live-label / status circle) — add a soft
   accent halo in atmospheric themes so it reads as a glowing signal. */
:is([data-theme="hackerman"], [data-theme="tokyo-night"], [data-theme="tokyo"], [data-theme="ethereal"], [data-theme="retro-82"], [data-theme="chinese"], [data-theme="us-open"], [data-theme="the-open"])
  .lb-live-label::before,
:is([data-theme="hackerman"], [data-theme="tokyo-night"], [data-theme="tokyo"], [data-theme="ethereal"], [data-theme="retro-82"], [data-theme="chinese"], [data-theme="us-open"], [data-theme="the-open"])
  .pin-kicker::before {
  box-shadow: 0 0 8px var(--amber);
}

/* Mascot harmonization. The SVG has dozens of hand-tuned hex fills
   (cream golf-ball, amber beer mug, ash-cigar) that would be a
   nightmare to retheme. Instead, treat the mascot as a watermark in
   non-editorial themes — opacity + slight desaturation pulls it
   into the page rather than letting it scream cream-on-dark.
   Editorial keeps it fully saturated. */
:is([data-theme]) :is(.masthead-mascot, .mascot-empty),
:is([data-theme]) .mascot-fetching svg {
  opacity: 0.55;
  filter: saturate(0.7);
}
/* Very dark / pure-black themes need an even quieter mascot. */
:is([data-theme="vantablack"], [data-theme="matte-black"], [data-theme="hackerman"], [data-theme="retro-82"], [data-theme="ethereal"])
  :is(.masthead-mascot, .mascot-empty),
:is([data-theme="vantablack"], [data-theme="matte-black"], [data-theme="hackerman"], [data-theme="retro-82"], [data-theme="ethereal"])
  .mascot-fetching svg {
  opacity: 0.35;
  filter: saturate(0.4);
}
/* Lighter omarchy themes can hold a more visible mascot. */
:is([data-theme="catppuccin-latte"], [data-theme="flexoki-light"], [data-theme="rose-pine"], [data-theme="white"], [data-theme="chinese"], [data-theme="us-open"], [data-theme="the-open"])
  :is(.masthead-mascot, .mascot-empty),
:is([data-theme="catppuccin-latte"], [data-theme="flexoki-light"], [data-theme="rose-pine"], [data-theme="white"], [data-theme="chinese"], [data-theme="us-open"], [data-theme="the-open"])
  .mascot-fetching svg {
  opacity: 0.85;
  filter: none;
}

/* Hub row hover: atmospheric themes get a subtle accent-tinted hover
   instead of the flat ink-tint default — the leader-card pattern,
   carried into the hub. */
:is([data-theme="hackerman"], [data-theme="tokyo"], [data-theme="tokyo-night"], [data-theme="ethereal"], [data-theme="retro-82"], [data-theme="chinese"], [data-theme="us-open"], [data-theme="the-open"])
  .hub-row:hover {
  background: rgba(var(--amber-rgb), 0.08);
}

/* Bet cards: atmospheric themes lift bet cards with a subtle accent
   border + soft shadow on hover so the bet feels "live" — matches
   the rank-1 leader treatment in the same themes. */
:is([data-theme="hackerman"], [data-theme="tokyo"], [data-theme="tokyo-night"], [data-theme="ethereal"], [data-theme="retro-82"], [data-theme="chinese"], [data-theme="us-open"], [data-theme="the-open"])
  .bet-card {
  box-shadow: 0 1px 0 rgba(var(--ink-rgb), 0.04);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
:is([data-theme="hackerman"], [data-theme="tokyo"], [data-theme="tokyo-night"], [data-theme="ethereal"], [data-theme="retro-82"], [data-theme="chinese"], [data-theme="us-open"], [data-theme="the-open"])
  .bet-card:hover {
  border-color: rgba(var(--amber-rgb), 0.35);
  box-shadow: 0 0 0 1px rgba(var(--amber-rgb), 0.15),
              0 4px 16px rgba(var(--amber-rgb), 0.08);
}

/* Pin-display: themed accent tint on the pin block. Editorial keeps
   its warm paper-alt; non-editorial themes get an accent-tinted
   panel matching the leader / banner pattern. */
:is([data-theme]) .pin-display {
  background: rgba(var(--amber-rgb), 0.08);
  border-color: rgba(var(--amber-rgb), 0.2);
}

/* Toast notifications: pick up theme accent for the success variant
   and use --card-radius so the toast feels native to the theme. */
.toast { border-radius: var(--card-radius); }
:is([data-theme="hackerman"], [data-theme="tokyo-night"], [data-theme="ethereal"]) .toast {
  box-shadow: 0 0 0 1px rgba(var(--amber-rgb), 0.25),
              0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Editorial-leaning themes: Newsreader display + Inter body. */
[data-theme="ethereal"],
[data-theme="flexoki-light"],
[data-theme="kanagawa"],
[data-theme="osaka-jade"],
[data-theme="ristretto"],
[data-theme="rose-pine"] {
  --font-display: 'Newsreader', Georgia, serif;
}

/* Chinese: Noto Serif SC carries both CJK glyphs and a stately Western
   serif. Body stays Noto Sans SC for legibility at small sizes; mono
   stays JetBrains for tabular numerals (scores, leaderboard). The
   brush-calligraphy face (Ma Shan Zheng) is reserved for the masthead
   em and bilingual accent text via `.zh-brush`. */
[data-theme="chinese"] {
  --font-display:   'Noto Serif SC', 'Playfair Display', Georgia, serif;
  --font-sans:      'Noto Sans SC', 'Inter', system-ui, sans-serif;
  --font-condensed: 'Noto Sans SC', 'Barlow Condensed', 'Inter', sans-serif;
  --card-radius:    2px;
}
[data-theme="chinese"] .masthead h1 em {
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
  font-style: normal;
  color: var(--red);
}

/* Terminal / retro themes: VT323 display + monospace body. */
[data-theme="hackerman"],
[data-theme="retro-82"] {
  --font-display:   'VT323', 'JetBrains Mono', monospace;
  --font-sans:      'JetBrains Mono', monospace;
  --font-condensed: 'JetBrains Mono', monospace;
  --card-radius:    0;
}

/* Stark / brutal themes: zero radius. */
[data-theme="vantablack"],
[data-theme="matte-black"] {
  --card-radius: 0;
}

/* Soft / pastel themes: more generous rounding. */
[data-theme="catppuccin"],
[data-theme="catppuccin-latte"],
[data-theme="rose-pine"],
[data-theme="ethereal"],
[data-theme="flexoki-light"],
[data-theme="ristretto"],
[data-theme="tokyo-night"] {
  --card-radius: 8px;
}

[data-theme="dark"] {
  --paper:      #111110;
  --paper-alt:  #1A1A19;
  --paper-card: #232322;
  --hairline:   #2A2A28;
  --ink:        #E4E2DC;
  --ink-muted:  #9A9892;
  --ink-faint:  #65645F;
  --amber:      #10B981;
  --amber-ink:  #34D399;
  --amber-rgb:  16, 185, 129;
  --red:        #F87171;
  --red-rgb:    248, 113, 113;
  --ink-rgb:    228, 226, 220;
  --silver:     #A1A1AA;
  --bronze:     #B45309;
  --moss-deep:  #FFFFFF;
  --shadow:     0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --gold-light: #34D399;
}

[data-theme="tokyo"] {
  --paper:      #1A1B26;
  --paper-alt:  #24283B;
  --paper-card: #2A2E45;
  --hairline:   #292E42;
  --ink:        #C0CAF5;
  --ink-muted:  #9AA5CE;
  --ink-faint:  #565F89;
  --amber:      #BB9AF7;
  --amber-ink:  #C5A8FF;
  --amber-rgb:  187, 154, 247;
  --red:        #F7768E;
  --red-rgb:    247, 118, 142;
  --ink-rgb:    192, 202, 245;
  --silver:     #9AA5CE;
  --bronze:     #E0AF68;
  --moss-deep:  #C0CAF5;
  --shadow:     0 1px 2px rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.55);
  --gold-light: #C5A8FF;
}

[data-theme="catppuccin"] {
  --paper:      #1e1e2e;
  --paper-alt:  #2b2b3a;
  --paper-card: #3d3d4b;
  --hairline:   #343442;
  --ink:        #cdd6f4;
  --ink-muted:  #8f95ae;
  --ink-faint:  #64677d;
  --amber:      #89b4fa;
  --amber-ink:  #9abffa;
  --amber-rgb:  137, 180, 250;
  --red:        #f38ba8;
  --red-rgb:    243, 139, 168;
  --ink-rgb:    205, 214, 244;
  --silver:     #8f95ae;
  --bronze:     #f9e2af;
  --moss-deep:  #cdd6f4;
  --shadow:     0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --gold-light: #9abffa;
}

[data-theme="catppuccin-latte"] {
  --paper:      #eff1f5;
  --paper-alt:  #e0e2e6;
  --paper-card: #ffffff;
  --hairline:   #d7d8dc;
  --ink:        #4c4f69;
  --ink-muted:  #85879a;
  --ink-faint:  #adb0bd;
  --amber:      #1e66f5;
  --amber-ink:  #1956d0;
  --amber-rgb:  30, 102, 245;
  --red:        #d20f39;
  --red-rgb:    210, 15, 57;
  --ink-rgb:    76, 79, 105;
  --silver:     #85879a;
  --bronze:     #df8e1d;
  --moss-deep:  #4c4f69;
  --shadow:     0 1px 2px rgba(10,10,10,0.04), 0 6px 16px rgba(10,10,10,0.06);
  --gold-light: #1956d0;
}

[data-theme="ethereal"] {
  --paper:      #060b1e;
  --paper-alt:  #14192b;
  --paper-card: #282d3d;
  --hairline:   #1e2334;
  --ink:        #ffcead;
  --ink-muted:  #a7897a;
  --ink-faint:  #695957;
  --amber:      #7d82d9;
  --amber-ink:  #9094de;
  --amber-rgb:  125, 130, 217;
  --red:        #ed5b5a;
  --red-rgb:    237, 91, 90;
  --ink-rgb:    255, 206, 173;
  --silver:     #a7897a;
  --bronze:     #e9bb4f;
  --moss-deep:  #ffcead;
  --shadow:     0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --gold-light: #9094de;
}

[data-theme="everforest"] {
  --paper:      #2d353b;
  --paper-alt:  #394146;
  --paper-card: #4a5156;
  --hairline:   #42494e;
  --ink:        #d3c6aa;
  --ink-muted:  #989383;
  --ink-faint:  #6f6f67;
  --amber:      #7fbbb3;
  --amber-ink:  #92c5be;
  --amber-rgb:  127, 187, 179;
  --red:        #e67e80;
  --red-rgb:    230, 126, 128;
  --ink-rgb:    211, 198, 170;
  --silver:     #989383;
  --bronze:     #dbbc7f;
  --moss-deep:  #d3c6aa;
  --shadow:     0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --gold-light: #92c5be;
}

[data-theme="flexoki-light"] {
  --paper:      #fffcf0;
  --paper-alt:  #efece1;
  --paper-card: #ffffff;
  --hairline:   #e5e2d8;
  --ink:        #100f0f;
  --ink-muted:  #63615d;
  --ink-faint:  #9f9d96;
  --amber:      #205ea6;
  --amber-ink:  #1b4f8d;
  --amber-rgb:  32, 94, 166;
  --red:        #d14d41;
  --red-rgb:    209, 77, 65;
  --ink-rgb:    16, 15, 15;
  --silver:     #63615d;
  --bronze:     #d0a215;
  --moss-deep:  #100f0f;
  --shadow:     0 1px 2px rgba(10,10,10,0.04), 0 6px 16px rgba(10,10,10,0.06);
  --gold-light: #1b4f8d;
}

[data-theme="gruvbox"] {
  --paper:      #282828;
  --paper-alt:  #343434;
  --paper-card: #464646;
  --hairline:   #3d3d3d;
  --ink:        #d4be98;
  --ink-muted:  #978970;
  --ink-faint:  #6c6454;
  --amber:      #7daea3;
  --amber-ink:  #90bab0;
  --amber-rgb:  125, 174, 163;
  --red:        #ea6962;
  --red-rgb:    234, 105, 98;
  --ink-rgb:    212, 190, 152;
  --silver:     #978970;
  --bronze:     #d8a657;
  --moss-deep:  #d4be98;
  --shadow:     0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --gold-light: #90bab0;
}

[data-theme="hackerman"] {
  --paper:      #0b0c16;
  --paper-alt:  #191a23;
  --paper-card: #2d2e36;
  --hairline:   #23242d;
  --ink:        #ddf7ff;
  --ink-muted:  #93a4ad;
  --ink-faint:  #5f6a73;
  --amber:      #82fb9c;
  --amber-ink:  #94fbaa;
  --amber-rgb:  130, 251, 156;
  --red:        #50f872;
  --red-rgb:    80, 248, 114;
  --ink-rgb:    221, 247, 255;
  --silver:     #93a4ad;
  --bronze:     #50f7d4;
  --moss-deep:  #ddf7ff;
  --shadow:     0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --gold-light: #94fbaa;
}

[data-theme="kanagawa"] {
  --paper:      #1f1f28;
  --paper-alt:  #2a2a37;
  --paper-card: #363646;
  --hairline:   #2a2a37;
  --ink:        #dcd7ba;
  --ink-muted:  #a9a48c;
  --ink-faint:  #727169;
  --amber:      #7e9cd8;
  --amber-ink:  #8ca8e0;
  --amber-rgb:  126, 156, 216;
  --red:        #e46876;
  --red-rgb:    228, 104, 118;
  --ink-rgb:    220, 215, 186;
  --silver:     #a9a48c;
  --bronze:     #c0a36e;
  --moss-deep:  #dcd7ba;
  --shadow:     0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --gold-light: #8ca8e0;
}

[data-theme="lumon"] {
  --paper:      #16242d;
  --paper-alt:  #1f3340;
  --paper-card: #294353;
  --hairline:   #20303b;
  --ink:        #d6e2ee;
  --ink-muted:  #92a6b9;
  --ink-faint:  #5a7081;
  --amber:      #8bc9eb;
  --amber-ink:  #9ed1ef;
  --amber-rgb:  139, 201, 235;
  --red:        #e07b8b;
  --red-rgb:    224, 123, 139;
  --ink-rgb:    214, 226, 238;
  --silver:     #92a6b9;
  --bronze:     #e6c47a;
  --moss-deep:  #d6e2ee;
  --shadow:     0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --gold-light: #9ed1ef;
}

[data-theme="matte-black"] {
  --paper:      #121212;
  --paper-alt:  #1c1c1c;
  --paper-card: #262626;
  --hairline:   #2a2a2a;
  --ink:        #bebebe;
  --ink-muted:  #8a8a8a;
  --ink-faint:  #5a5a5a;
  --amber:      #e68e0d;
  --amber-ink:  #f59e0b;
  --amber-rgb:  230, 142, 13;
  --red:        #d44848;
  --red-rgb:    212, 72, 72;
  --ink-rgb:    190, 190, 190;
  --silver:     #8a8a8a;
  --bronze:     #e68e0d;
  --moss-deep:  #bebebe;
  --shadow:     0 1px 2px rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.55);
  --gold-light: #f59e0b;
}

[data-theme="miasma"] {
  --paper:      #222222;
  --paper-alt:  #2c2c2c;
  --paper-card: #383838;
  --hairline:   #303030;
  --ink:        #c2c2b0;
  --ink-muted:  #92927e;
  --ink-faint:  #5e5e4f;
  --amber:      #78824b;
  --amber-ink:  #8b975a;
  --amber-rgb:  120, 130, 75;
  --red:        #b86b5e;
  --red-rgb:    184, 107, 94;
  --ink-rgb:    194, 194, 176;
  --silver:     #92927e;
  --bronze:     #b89d5a;
  --moss-deep:  #c2c2b0;
  --shadow:     0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --gold-light: #8b975a;
}

[data-theme="nord"] {
  --paper:      #2e3440;
  --paper-alt:  #3b4252;
  --paper-card: #434c5e;
  --hairline:   #3b4252;
  --ink:        #d8dee9;
  --ink-muted:  #a3adbc;
  --ink-faint:  #6f7787;
  --amber:      #81a1c1;
  --amber-ink:  #8fb0ce;
  --amber-rgb:  129, 161, 193;
  --red:        #bf616a;
  --red-rgb:    191, 97, 106;
  --ink-rgb:    216, 222, 233;
  --silver:     #a3adbc;
  --bronze:     #ebcb8b;
  --moss-deep:  #d8dee9;
  --shadow:     0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --gold-light: #8fb0ce;
}

[data-theme="osaka-jade"] {
  --paper:      #111c18;
  --paper-alt:  #1a2a24;
  --paper-card: #233830;
  --hairline:   #1f2f29;
  --ink:        #c1c497;
  --ink-muted:  #8d9070;
  --ink-faint:  #5b5e48;
  --amber:      #509475;
  --amber-ink:  #5fa685;
  --amber-rgb:  80, 148, 117;
  --red:        #c46c5e;
  --red-rgb:    196, 108, 94;
  --ink-rgb:    193, 196, 151;
  --silver:     #8d9070;
  --bronze:     #c19f5c;
  --moss-deep:  #c1c497;
  --shadow:     0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --gold-light: #5fa685;
}

[data-theme="retro-82"] {
  --paper:      #05182e;
  --paper-alt:  #0b2540;
  --paper-card: #143456;
  --hairline:   #0e2949;
  --ink:        #f6dcac;
  --ink-muted:  #b39e7c;
  --ink-faint:  #6d624c;
  --amber:      #faa968;
  --amber-ink:  #ffba7d;
  --amber-rgb:  250, 169, 104;
  --red:        #ef6c6c;
  --red-rgb:    239, 108, 108;
  --ink-rgb:    246, 220, 172;
  --silver:     #b39e7c;
  --bronze:     #ffba7d;
  --moss-deep:  #f6dcac;
  --shadow:     0 1px 2px rgba(0,0,0,0.45), 0 10px 30px rgba(0,0,0,0.55);
  --gold-light: #ffba7d;
}

[data-theme="ristretto"] {
  --paper:      #2c2525;
  --paper-alt:  #382f2f;
  --paper-card: #463a3a;
  --hairline:   #3a3030;
  --ink:        #e6d9db;
  --ink-muted:  #a89a9c;
  --ink-faint:  #6b6062;
  --amber:      #f38d70;
  --amber-ink:  #f59c81;
  --amber-rgb:  243, 141, 112;
  --red:        #e06b5e;
  --red-rgb:    224, 107, 94;
  --ink-rgb:    230, 217, 219;
  --silver:     #a89a9c;
  --bronze:     #d7a784;
  --moss-deep:  #e6d9db;
  --shadow:     0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --gold-light: #f59c81;
}

[data-theme="rose-pine"] {
  --paper:      #faf4ed;
  --paper-alt:  #f2e9de;
  --paper-card: #ffffff;
  --hairline:   #e8dfd1;
  --ink:        #575279;
  --ink-muted:  #797593;
  --ink-faint:  #9893a5;
  --amber:      #56949f;
  --amber-ink:  #4a8590;
  --amber-rgb:  86, 148, 159;
  --red:        #b4637a;
  --red-rgb:    180, 99, 122;
  --ink-rgb:    87, 82, 121;
  --silver:     #797593;
  --bronze:     #d7827e;
  --moss-deep:  #575279;
  --shadow:     0 1px 2px rgba(10,10,10,0.04), 0 6px 16px rgba(10,10,10,0.06);
  --gold-light: #4a8590;
}

[data-theme="tokyo-night"] {
  --paper:      #1a1b26;
  --paper-alt:  #24283b;
  --paper-card: #2a2e45;
  --hairline:   #292e42;
  --ink:        #a9b1d6;
  --ink-muted:  #7e88a8;
  --ink-faint:  #565f89;
  --amber:      #7aa2f7;
  --amber-ink:  #8fb3fa;
  --amber-rgb:  122, 162, 247;
  --red:        #f7768e;
  --red-rgb:    247, 118, 142;
  --ink-rgb:    169, 177, 214;
  --silver:     #7e88a8;
  --bronze:     #e0af68;
  --moss-deep:  #a9b1d6;
  --shadow:     0 1px 2px rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.55);
  --gold-light: #8fb3fa;
}

[data-theme="vantablack"] {
  --paper:      #000000;
  --paper-alt:  #0a0a0a;
  --paper-card: #141414;
  --hairline:   #1c1c1c;
  --ink:        #ffffff;
  --ink-muted:  #b0b0b0;
  --ink-faint:  #6a6a6a;
  --amber:      #8d8d8d;
  --amber-ink:  #a8a8a8;
  --amber-rgb:  141, 141, 141;
  --red:        #cf4848;
  --red-rgb:    207, 72, 72;
  --ink-rgb:    255, 255, 255;
  --silver:     #b0b0b0;
  --bronze:     #cccccc;
  --moss-deep:  #ffffff;
  --shadow:     0 1px 2px rgba(0,0,0,0.6), 0 12px 36px rgba(0,0,0,0.65);
  --gold-light: #a8a8a8;
}

[data-theme="white"] {
  --paper:      #ffffff;
  --paper-alt:  #f5f5f5;
  --paper-card: #ffffff;
  --hairline:   #e5e5e5;
  --ink:        #000000;
  --ink-muted:  #555555;
  --ink-faint:  #999999;
  --amber:      #6e6e6e;
  --amber-ink:  #444444;
  --amber-rgb:  110, 110, 110;
  --red:        #c43030;
  --red-rgb:    196, 48, 48;
  --ink-rgb:    0, 0, 0;
  --silver:     #888888;
  --bronze:     #888888;
  --moss-deep:  #000000;
  --shadow:     0 1px 2px rgba(0,0,0,0.05), 0 6px 16px rgba(0,0,0,0.08);
  --gold-light: #444444;
}

/* Chinese (中式) — warm rice-paper bg (宣纸), sumi-ink black, imperial
   gold accent (黄), vermillion red (赤) for under-par scores. Red as the
   "good" score color is a happy accident: 红 is the lucky/celebratory
   color in Chinese culture, so a red under-par chip reads as auspicious.
   Display in Noto Serif SC; brush-calligraphy accents via Ma Shan Zheng
   on the masthead em and select bilingual labels. */
[data-theme="chinese"] {
  --paper:      #f3e3c4;
  --paper-alt:  #ead4ad;
  --paper-card: #fbf2dc;
  --hairline:   #c8b084;
  --ink:        #1a1410;
  --ink-muted:  #5e4f3d;
  --ink-faint:  #8e7b62;
  --amber:      #c8102e;
  --amber-ink:  #a80d27;
  --amber-rgb:  200, 16, 46;
  --red:        #c8102e;
  --red-rgb:    200, 16, 46;
  --ink-rgb:    26, 20, 16;
  --silver:     #5e4f3d;
  --bronze:     #c9a227;
  --moss-deep:  #1a1410;
  --shadow:     0 1px 2px rgba(72, 36, 8, 0.08), 0 6px 18px rgba(72, 36, 8, 0.12);
  --gold-light: #d4af37;
}

/* Chinese bilingual annotations. Small Noto Serif SC characters appended
   after key English labels so the page reads bilingually without ever
   replacing the English. Annotations are dim by default and brighten on
   active/hover so they feel like quiet stamps, not duplicated copy. The
   tab count badges sit between the label and the annotation — that's
   fine, the badge is a chip and the annotation reads as a kicker. */
[data-theme="chinese"] .tab::after {
  font-family: 'Noto Serif SC', 'Ma Shan Zheng', serif;
  font-size: 11px;
  font-weight: 500;
  margin-left: 7px;
  padding-left: 7px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.18);
  color: var(--ink-muted);
  letter-spacing: 0.05em;
  vertical-align: 1px;
  transition: color 0.15s, border-color 0.15s;
}
[data-theme="chinese"] .tab.active::after {
  color: var(--red);
  border-left-color: rgba(var(--red-rgb), 0.35);
}
[data-theme="chinese"] .tab:hover::after { color: var(--ink); }
[data-theme="chinese"] #tab-leaderboard::after { content: "排行"; }
[data-theme="chinese"] #tab-entries::after     { content: "参赛"; }
[data-theme="chinese"] #tab-picks::after       { content: "我选"; }
[data-theme="chinese"] #tab-side-bets::after   { content: "押注"; }
[data-theme="chinese"] #tab-scores::after      { content: "计分"; }
[data-theme="chinese"] #tab-setup::after       { content: "设置"; }
[data-theme="chinese"] #tab-rules::after       { content: "家规"; }

/* Masthead bilingual tagline + Chinese characters under the h1.
   The kicker ("Est. for the Gentleman's Wager") gains "君子之赌" (the
   gentleman's wager) as a brush-calligraphy postscript. The h1 (Major
   Pool) gains "大满贯" (grand slam / major) underneath as a small
   subtitle in Ma Shan Zheng. */
[data-theme="chinese"] .masthead-kicker::after {
  content: " · 君子之赌";
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--red);
  margin-left: 4px;
}
[data-theme="chinese"] .masthead h1::after {
  content: "大满贯";
  display: block;
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
  font-size: 0.36em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.4em;
  color: var(--ink-muted);
  margin-top: 6px;
}

/* Section kickers, leaderboard live label, refresh pill, and the locked
   banner: small Chinese annotations so the dressing carries across the
   page, not just the tabs. */
[data-theme="chinese"] .lb-live-label::after {
  content: " · 直播";
  font-family: 'Noto Serif SC', serif;
  font-weight: 500;
  letter-spacing: 0.1em;
}
[data-theme="chinese"] #panel-leaderboard .refresh-btn::after {
  content: " 刷新";
  font-family: 'Noto Serif SC', serif;
  font-size: 10px;
  font-weight: 500;
  margin-left: 4px;
  opacity: 0.7;
}
[data-theme="chinese"] .lock-toggle-btn::after {
  content: " 封盘";
  font-family: 'Noto Serif SC', serif;
  font-size: 10px;
  font-weight: 600;
  margin-left: 6px;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
[data-theme="chinese"] .lock-toggle-btn--locked::after { content: " 已封"; }

/* Theme picker label gets the Chinese annotation too so the dressing is
   visible even before opening the menu. */
[data-theme="chinese"] #theme-toggle-label::after {
  content: " · 主题";
  font-family: 'Noto Serif SC', serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--red);
}

/* Page-wide watermark: huge traditional 賭 (gamble) character sitting
   fixed mid-right behind everything, very faded so it reads as a stamp
   on rice paper, not competing with content. body::after is otherwise
   unused; container has z-index:1 so this stays behind text. */
[data-theme="chinese"] body::after {
  content: "賭";
  position: fixed;
  right: -6vw;
  bottom: -8vh;
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
  font-size: 62vh;
  line-height: 1;
  color: rgba(200, 16, 46, 0.055);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* Vermillion seal stamp (印章) — a fixed corner chop mark with the
   characters 大局 ("big game / the stakes"). Square red panel with a
   thin inner rule and white characters, sitting bottom-left where it
   doesn't fight the theme picker. The slight rotation + irregular box-
   shadow simulates a pressed-ink stamp. Click-through. */
[data-theme="chinese"] .container::after {
  content: "大局";
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: var(--paper);
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  padding: 6px 0;
  border: 2px solid var(--red);
  outline: 1px solid var(--paper);
  outline-offset: -6px;
  transform: rotate(-3deg);
  box-shadow: 1px 1px 0 rgba(120, 8, 24, 0.4),
              -1px 0 0 rgba(220, 40, 60, 0.6),
              0 6px 18px rgba(72, 36, 8, 0.18);
  pointer-events: none;
  z-index: 2;
  user-select: none;
  opacity: 0.88;
}
@media (max-width: 720px) {
  [data-theme="chinese"] .container::after {
    width: 60px; height: 60px; font-size: 26px;
    left: 14px; bottom: 14px;
  }
}

/* Brush-calligraphy on the landing welcome ("Welcome to the
   clubhouse"). The h2 already uses italic Playfair — Chinese theme
   swaps it for Ma Shan Zheng in vermillion, then drops a bilingual
   subtitle underneath via ::after. */
[data-theme="chinese"] #view-landing .landing h2 {
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
  font-style: normal;
  color: var(--red);
  letter-spacing: 0.02em;
}
[data-theme="chinese"] #view-landing .landing h2::after {
  content: "欢迎光临";
  display: block;
  font-family: 'Noto Serif SC', serif;
  font-size: 0.42em;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0.5em;
  margin-top: 4px;
  padding-left: 0.5em;
}

/* Section-titles — the large headline on each section. Apply Noto
   Serif SC at a slightly heavier weight. Section-kickers get a
   generic small Chinese tail; they share consistent styling so a
   blanket ::after with attr() driven by data-zh would be ideal, but
   we instead key off the most common kicker texts via :has() so we
   don't need any HTML edits. */
[data-theme="chinese"] .section-title {
  font-family: 'Noto Serif SC', 'Playfair Display', serif;
  font-weight: 600;
}
[data-theme="chinese"] .section-header.editorial {
  border-image: linear-gradient(to right, var(--red) 0, var(--red) 60%, transparent 60%) 1;
  border-bottom: 2px solid var(--red);
  padding-bottom: 6px;
}

/* Landing-section headings ("Already played?", "First time here?")
   become calligraphic vermillion + Chinese subtitle. */
[data-theme="chinese"] .landing-section-heading {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  color: var(--ink);
}

/* Landing buttons + hub buttons: a small Chinese annotation alongside
   the English label. Keyed off the button id (stable). */
[data-theme="chinese"] :is(.btn, .btn-secondary, .btn-big, .btn-small)::after {
  font-family: 'Noto Serif SC', serif;
  font-size: 0.78em;
  font-weight: 500;
  margin-left: 6px;
  opacity: 0.78;
  letter-spacing: 0.05em;
}
[data-theme="chinese"] #landing-signin-btn::after     { content: " · 登入"; }
[data-theme="chinese"] #start-pool-btn::after         { content: " · 开局"; }
[data-theme="chinese"] #join-pool-btn::after          { content: " · 加入"; }
[data-theme="chinese"] #hub-join-league-btn::after    { content: " · 加入"; }
[data-theme="chinese"] #hub-create-league-btn::after  { content: " · 创建"; }
[data-theme="chinese"] #hub-add-pool-btn::after       { content: " · 添加"; }
[data-theme="chinese"] #hub-new-pool-btn::after       { content: " · 开局"; }
[data-theme="chinese"] #save-entry-btn::after         { content: " · 提交"; }
[data-theme="chinese"] #save-bet-btn::after           { content: " · 押注"; }
[data-theme="chinese"] #fetch-scores-btn::after       { content: " · 拉取"; }
[data-theme="chinese"] #save-tournament-btn::after    { content: " · 保存"; }

/* Stronger paper texture: bump the diagonal grain a touch and stack a
   second perpendicular line + dot pattern so the rice-paper feel comes
   through more clearly. Overrides the earlier subtle pattern. */
[data-theme="chinese"] {
  --ambient-bg:
    radial-gradient(ellipse 70% 50% at 50% -8%, rgba(201, 162, 39, 0.22), transparent 70%),
    radial-gradient(circle 320px at 92% 96%, rgba(200, 16, 46, 0.14), transparent 70%),
    radial-gradient(circle 220px at 8% 12%, rgba(200, 16, 46, 0.08), transparent 70%),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(72, 36, 8, 0.035) 22px 23px),
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(72, 36, 8, 0.022) 22px 23px);
}

/* Ornamental corner brackets「」on the masthead-sub status line so the
   loading/connecting text reads more like a Chinese caption. Applied
   only when sub has content. */
[data-theme="chinese"] .masthead-sub > span::before { content: "「"; margin-right: 2px; color: var(--red); font-family: 'Noto Serif SC', serif; }
[data-theme="chinese"] .masthead-sub > span::after  { content: "」"; margin-left: 2px; color: var(--red); font-family: 'Noto Serif SC', serif; }

/* Tournament name translations rendered into the DOM by renderMasthead
   and showHub. Hidden by default; revealed only under the Chinese
   theme. Inline span in the masthead, block subtitle in hub rows. */
.zh-name { display: none; }
[data-theme="chinese"] .zh-name {
  display: inline;
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
  color: var(--red);
  letter-spacing: 0.06em;
  font-weight: 400;
}
[data-theme="chinese"] .hub-row-name .zh-name {
  display: block;
  margin-top: 2px;
  font-size: 0.78em;
  letter-spacing: 0.1em;
}
/* Big tournament title (#lb-tournament-title) — under non-Chinese
   themes show English big and hide the Chinese span; under the
   Chinese theme flip it: Chinese big in Ma Shan Zheng brush, English
   small underneath. The span wrappers are always emitted by the JS
   so the swap is pure CSS. */
#lb-tournament-title .zh-primary { display: none; }
#lb-tournament-title .en-name { display: inline; }
[data-theme="chinese"] #lb-tournament-title .zh-primary {
  display: block;
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
  color: var(--red);
  letter-spacing: 0.06em;
  line-height: 1.05;
}
[data-theme="chinese"] #lb-tournament-title .en-name {
  display: block;
  margin-top: 8px;
  font-family: 'Noto Serif SC', 'Playfair Display', serif;
  font-size: 0.42em;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  line-height: 1;
}

/* Pin-display gets a double-rule vermillion border — newspaper masthead
   feel — and the PIN itself in larger calligraphic weight. */
[data-theme="chinese"] .pin-display {
  border: 1px solid var(--red);
  outline: 1px solid var(--red);
  outline-offset: -5px;
  background:
    linear-gradient(rgba(var(--amber-rgb), 0.06), rgba(var(--amber-rgb), 0.06)),
    var(--paper-card);
}

/* =========================================================================
   U.S. OPEN — USGA navy on cream, vermillion red accent, Trajan-style
   Cinzel display. The visual lineage is the USGA program cover: muted
   warm cream paper, chiseled navy headlines, a single red dot for the
   live indicator. Faded "U.S. OPEN" wordmark behind the page acts as
   the watermark; a small navy roundel in the corner stands in for the
   USGA shield.
   ========================================================================= */
[data-theme="us-open"] {
  --paper:      #f3f6fc;
  --paper-alt:  #e2eaf6;
  --paper-card: #ffffff;
  --hairline:   #b8c6dc;
  --ink:        #0a2a5e;
  --ink-muted:  #44557a;
  --ink-faint:  #7c8cab;
  --amber:      #bf0a30;
  --amber-ink:  #a0091f;
  --amber-rgb:  191, 10, 48;
  --red:        #bf0a30;
  --red-rgb:    191, 10, 48;
  --ink-rgb:    10, 42, 94;
  --silver:     #6b7a96;
  --bronze:     #b8954c;
  --moss-deep:  #0a2a5e;
  --shadow:     0 1px 2px rgba(10, 42, 94, 0.10), 0 6px 18px rgba(10, 42, 94, 0.16);
  --gold-light: #c8a44e;
  --font-display:   'Cinzel', 'Playfair Display', Georgia, serif;
  --font-sans:      'Inter', system-ui, -apple-system, sans-serif;
  --font-condensed: 'Inter', system-ui, sans-serif;
  --card-radius:    2px;
  --display-weight: 700;
  /* USGA program cover: cool white paper, deep navy wash up top, a single
     red ribbon at bottom-right, and faint navy horizontal rules every
     18px for a chiseled "leaderboard paper" texture. Vertical red ticks
     every 240px hint at flag bunting without going kitsch. */
  --ambient-bg:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(10, 42, 94, 0.18), transparent 75%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(191, 10, 48, 0.10), transparent 70%),
    radial-gradient(circle 280px at 8% 18%, rgba(10, 42, 94, 0.10), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(10, 42, 94, 0.035) 18px 19px),
    repeating-linear-gradient(90deg, transparent 0 240px, rgba(191, 10, 48, 0.04) 240px 241px);
}
[data-theme="us-open"] .masthead h1 em {
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-style: normal;
  color: var(--red);
  letter-spacing: 0.04em;
}

/* =========================================================================
   THE OPEN — claret-jug burgundy on warm cream, Open-yellow accent for
   the live indicator + leader row. IM Fell English carries the
   letterpress, weathered British feel; Newsreader provides body text in
   the same lineage. Faded "OPEN" wordmark behind, claret R&A roundel
   with a yellow inner ring in the corner.
   ========================================================================= */
[data-theme="the-open"] {
  --paper:      #f3ead6;
  --paper-alt:  #e9dec0;
  --paper-card: #fbf3dd;
  --hairline:   #cab787;
  --ink:        #3b1820;
  --ink-muted:  #6b4047;
  --ink-faint:  #9a7178;
  --amber:      #722f37;
  --amber-ink:  #5e2129;
  --amber-rgb:  114, 47, 55;
  --red:        #722f37;
  --red-rgb:    114, 47, 55;
  --ink-rgb:    59, 24, 32;
  --silver:     #a08a7a;
  --bronze:     #e8c547;
  --moss-deep:  #3b1820;
  --shadow:     0 1px 2px rgba(59, 24, 32, 0.08), 0 6px 18px rgba(59, 24, 32, 0.12);
  --gold-light: #f1d646;
  --font-display:   'IM Fell English', 'Newsreader', Georgia, serif;
  --font-sans:      'Newsreader', Georgia, serif;
  --font-condensed: 'Inter', system-ui, sans-serif;
  --card-radius:    2px;
  --display-weight: 700;
  --ambient-bg:
    radial-gradient(ellipse 70% 50% at 50% -8%, rgba(241, 214, 70, 0.20), transparent 70%),
    radial-gradient(circle 320px at 92% 96%, rgba(114, 47, 55, 0.10), transparent 70%),
    radial-gradient(circle 220px at 8% 12%, rgba(241, 214, 70, 0.10), transparent 70%),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(59, 24, 32, 0.025) 22px 23px);
}
[data-theme="the-open"] .masthead h1 em {
  font-family: 'IM Fell English', 'Newsreader', serif;
  font-style: italic;
  color: var(--amber);
}

/* Showcase themes (chinese, us-open, the-open) share the open-yellow /
   vermillion live accent, sharper card radii, and pull from the same
   atmospheric scaffolding above. The blocks below add per-theme
   thematic flourishes — tab annotations, watermark, corner emblem,
   masthead subtitle — parallel to the chinese theme treatment. */

/* ---------- U.S. OPEN: tab annotations + flourishes ---------- */
[data-theme="us-open"] .tab::after {
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-size: 10px;
  font-weight: 500;
  margin-left: 7px;
  padding-left: 7px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.18);
  color: var(--ink-muted);
  letter-spacing: 0.12em;
  vertical-align: 1px;
  text-transform: uppercase;
  transition: color 0.15s, border-color 0.15s;
}
[data-theme="us-open"] .tab.active::after {
  color: var(--red);
  border-left-color: rgba(var(--red-rgb), 0.35);
}
[data-theme="us-open"] .tab:hover::after { color: var(--ink); }
[data-theme="us-open"] #tab-leaderboard::after { content: "Field"; }
[data-theme="us-open"] #tab-entries::after     { content: "Roster"; }
[data-theme="us-open"] #tab-picks::after       { content: "Card"; }
[data-theme="us-open"] #tab-side-bets::after   { content: "Wagers"; }
[data-theme="us-open"] #tab-scores::after      { content: "Round"; }
[data-theme="us-open"] #tab-setup::after       { content: "Office"; }
[data-theme="us-open"] #tab-rules::after       { content: "Rules"; }

/* Masthead postscript + subtitle. The kicker gains "USGA Sanctioned"
   in red small caps; the h1 gains "U.S. OPEN" centered underneath in
   Cinzel small caps as the secondary mark. */
[data-theme="us-open"] .masthead-kicker::after {
  content: " · USGA Sanctioned";
  font-family: 'Cinzel', serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--red);
  margin-left: 4px;
  text-transform: uppercase;
}
[data-theme="us-open"] .masthead h1::after {
  content: "U.S. Open";
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 0.32em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.42em;
  color: var(--ink-muted);
  margin-top: 8px;
  text-transform: uppercase;
}

/* Live-label, refresh-pill, lock-button, picker label — small caps
   annotations matching the chinese-theme pattern, in vermillion red. */
[data-theme="us-open"] .lb-live-label::after {
  content: " · Live";
  font-family: 'Cinzel', serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
[data-theme="us-open"] #panel-leaderboard .refresh-btn::after {
  content: " Refresh";
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  margin-left: 4px;
  opacity: 0.7;
  text-transform: uppercase;
}
[data-theme="us-open"] .lock-toggle-btn::after {
  content: " · Field Open";
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  margin-left: 6px;
  letter-spacing: 0.18em;
  opacity: 0.85;
  text-transform: uppercase;
}
[data-theme="us-open"] .lock-toggle-btn--locked::after { content: " · Field Closed"; }
[data-theme="us-open"] #theme-toggle-label::after {
  content: " · Cup";
  font-family: 'Cinzel', serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--red);
  text-transform: uppercase;
}

/* Page-wide watermark: huge faded "OPEN" wordmark sitting bottom-right
   behind everything (z-index 0). Reads like a chiseled inscription on
   the back wall of the clubhouse — never competes with content. */
[data-theme="us-open"] body::after {
  content: "OPEN";
  position: fixed;
  right: -2vw;
  bottom: -6vh;
  font-family: 'Cinzel', serif;
  font-size: 48vh;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(10, 42, 94, 0.055);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* Corner emblem — small navy roundel with "USGA" in cream, ringed by
   a thin red band. Parallel structure to the chinese seal stamp. */
[data-theme="us-open"] .container::after {
  content: "USGA";
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.18em;
  border: 2px solid var(--red);
  outline: 1px solid var(--paper);
  outline-offset: -6px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.24),
              inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 2;
  user-select: none;
  opacity: 0.92;
}
@media (max-width: 720px) {
  [data-theme="us-open"] .container::after {
    width: 56px; height: 56px; font-size: 11px;
    left: 14px; bottom: 14px;
  }
}

/* Landing welcome heading: navy Cinzel small caps + a "U.S. OPEN"
   subtitle in red — same template as the chinese landing flourish. */
[data-theme="us-open"] #view-landing .landing h2 {
  font-family: 'Cinzel', serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-theme="us-open"] #view-landing .landing h2::after {
  content: "U.S. Open · 1895";
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 0.32em;
  font-weight: 500;
  color: var(--red);
  letter-spacing: 0.4em;
  margin-top: 6px;
  padding-left: 0.5em;
  text-transform: uppercase;
}
[data-theme="us-open"] .section-title {
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-theme="us-open"] .section-header.editorial {
  border-image: linear-gradient(to right, var(--red) 0, var(--red) 60%, transparent 60%) 1;
  border-bottom: 2px solid var(--red);
  padding-bottom: 6px;
}
[data-theme="us-open"] :is(.btn, .btn-secondary, .btn-big, .btn-small)::after {
  font-family: 'Cinzel', serif;
  font-size: 0.72em;
  font-weight: 500;
  margin-left: 6px;
  opacity: 0.78;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
[data-theme="us-open"] #landing-signin-btn::after     { content: " · Enter"; }
[data-theme="us-open"] #start-pool-btn::after         { content: " · Tee Off"; }
[data-theme="us-open"] #join-pool-btn::after          { content: " · Join"; }
[data-theme="us-open"] #hub-join-league-btn::after    { content: " · Join"; }
[data-theme="us-open"] #hub-create-league-btn::after  { content: " · Create"; }
[data-theme="us-open"] #hub-add-pool-btn::after       { content: " · Add"; }
[data-theme="us-open"] #hub-new-pool-btn::after       { content: " · Tee Off"; }
[data-theme="us-open"] #save-entry-btn::after         { content: " · Card In"; }
[data-theme="us-open"] #save-bet-btn::after           { content: " · Stake"; }
[data-theme="us-open"] #fetch-scores-btn::after       { content: " · Pull"; }
[data-theme="us-open"] #save-tournament-btn::after    { content: " · Post"; }
[data-theme="us-open"] .pin-display {
  border: 1px solid var(--ink);
  outline: 1px solid var(--red);
  outline-offset: -5px;
  background:
    linear-gradient(rgba(var(--amber-rgb), 0.05), rgba(var(--amber-rgb), 0.05)),
    var(--paper-card);
}

/* ---------- THE OPEN: tab annotations + flourishes ---------- */
[data-theme="the-open"] .tab::after {
  font-family: 'IM Fell English', 'Newsreader', serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  margin-left: 7px;
  padding-left: 7px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.18);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  vertical-align: 1px;
  transition: color 0.15s, border-color 0.15s;
}
[data-theme="the-open"] .tab.active::after {
  color: var(--amber);
  border-left-color: rgba(var(--amber-rgb), 0.35);
}
[data-theme="the-open"] .tab:hover::after { color: var(--ink); }
[data-theme="the-open"] #tab-leaderboard::after { content: "Board"; }
[data-theme="the-open"] #tab-entries::after     { content: "Draw"; }
[data-theme="the-open"] #tab-picks::after       { content: "Card"; }
[data-theme="the-open"] #tab-side-bets::after   { content: "Stakes"; }
[data-theme="the-open"] #tab-scores::after      { content: "Marker"; }
[data-theme="the-open"] #tab-setup::after       { content: "Steward"; }
[data-theme="the-open"] #tab-rules::after       { content: "Etiquette"; }

[data-theme="the-open"] .masthead-kicker::after {
  content: " · Open to All";
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--amber);
  margin-left: 4px;
}
[data-theme="the-open"] .masthead h1::after {
  content: "The Open";
  display: block;
  font-family: 'IM Fell English', serif;
  font-size: 0.4em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  margin-top: 4px;
}

[data-theme="the-open"] .lb-live-label::after {
  content: " · Live";
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.06em;
}
[data-theme="the-open"] #panel-leaderboard .refresh-btn::after {
  content: " Refresh";
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-left: 4px;
  opacity: 0.7;
}
[data-theme="the-open"] .lock-toggle-btn::after {
  content: " · Draw Open";
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 12px;
  font-weight: 400;
  margin-left: 6px;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
[data-theme="the-open"] .lock-toggle-btn--locked::after { content: " · Draw Closed"; }
[data-theme="the-open"] #theme-toggle-label::after {
  content: " · Claret";
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--amber);
}

/* Page-wide watermark: faded "OPEN" wordmark in IM Fell italic, sitting
   mid-right, recalling old printed program covers. Subtle enough to
   read as paper grain. */
[data-theme="the-open"] body::after {
  content: "Open";
  position: fixed;
  right: -3vw;
  bottom: -8vh;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 56vh;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(114, 47, 55, 0.055);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* Corner emblem — claret roundel with "R&A" in cream, ringed by an
   Open-yellow band. The yellow ring is the load-bearing visual cue:
   it's the R&A scoreboard yellow, instantly recognizable. */
[data-theme="the-open"] .container::after {
  content: "R&A";
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  background: var(--amber);
  color: var(--paper);
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.04em;
  border: 2px solid var(--gold-light);
  outline: 1px solid var(--amber);
  outline-offset: -6px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(59, 24, 32, 0.24),
              inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 2;
  user-select: none;
  opacity: 0.94;
}
@media (max-width: 720px) {
  [data-theme="the-open"] .container::after {
    width: 56px; height: 56px; font-size: 16px;
    left: 14px; bottom: 14px;
  }
}

[data-theme="the-open"] #view-landing .landing h2 {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--amber);
  letter-spacing: 0.02em;
}
[data-theme="the-open"] #view-landing .landing h2::after {
  content: "Since 1860";
  display: block;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 0.42em;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0.32em;
  margin-top: 4px;
  padding-left: 0.5em;
}
[data-theme="the-open"] .section-title {
  font-family: 'IM Fell English', 'Newsreader', serif;
  font-weight: 400;
}
[data-theme="the-open"] .section-header.editorial {
  border-image: linear-gradient(to right, var(--amber) 0, var(--amber) 50%, var(--gold-light) 50%, var(--gold-light) 100%) 1;
  border-bottom: 2px solid var(--amber);
  padding-bottom: 6px;
}
[data-theme="the-open"] :is(.btn, .btn-secondary, .btn-big, .btn-small)::after {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 0.82em;
  font-weight: 400;
  margin-left: 6px;
  opacity: 0.78;
  letter-spacing: 0.04em;
}
[data-theme="the-open"] #landing-signin-btn::after     { content: " · Enter"; }
[data-theme="the-open"] #start-pool-btn::after         { content: " · Tee Off"; }
[data-theme="the-open"] #join-pool-btn::after          { content: " · Join"; }
[data-theme="the-open"] #hub-join-league-btn::after    { content: " · Join"; }
[data-theme="the-open"] #hub-create-league-btn::after  { content: " · Open"; }
[data-theme="the-open"] #hub-add-pool-btn::after       { content: " · Add"; }
[data-theme="the-open"] #hub-new-pool-btn::after       { content: " · Tee Off"; }
[data-theme="the-open"] #save-entry-btn::after         { content: " · Card In"; }
[data-theme="the-open"] #save-bet-btn::after           { content: " · Stake"; }
[data-theme="the-open"] #fetch-scores-btn::after       { content: " · Pull"; }
[data-theme="the-open"] #save-tournament-btn::after    { content: " · Post"; }
[data-theme="the-open"] .pin-display {
  border: 1px solid var(--amber);
  outline: 1px solid var(--gold-light);
  outline-offset: -5px;
  background:
    linear-gradient(rgba(var(--amber-rgb), 0.06), rgba(var(--amber-rgb), 0.06)),
    var(--paper-card);
}

/* The Open: live-dot uses iconic R&A yellow, not the claret accent. The
   yellow scoreboard dot reads as the unmistakable Open-Championship
   signal. Override the generic atmospheric --amber halo and the
   .live-dot fill + breathe pulse so the dot itself paints yellow on
   claret. */
[data-theme="the-open"] .lb-live-label::before,
[data-theme="the-open"] .pin-kicker::before {
  background: var(--gold-light);
  box-shadow: 0 0 8px var(--gold-light);
}
[data-theme="the-open"] .live-dot {
  background: var(--gold-light);
  animation: the-open-breathe 2.2s ease-in-out infinite;
}
@keyframes the-open-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(241, 214, 70, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(241, 214, 70, 0); }
}

/* Theme picker UI — fixed pill in the top-right opens a listbox menu. */
.theme-wrap {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 50;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--paper-card);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.theme-toggle:hover { border-color: var(--ink-muted); }
.theme-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.theme-toggle-label { letter-spacing: 0.1em; }
.theme-toggle-caret { opacity: 0.6; }
.theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--paper-card);
  border: 1px solid var(--hairline);
  border-radius: max(var(--card-radius), 8px);
  box-shadow: var(--shadow);
}
.theme-menu.hidden { display: none; }
.theme-menu-group {
  padding: 8px 10px 4px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.theme-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.theme-menu-item:hover { background: rgba(var(--ink-rgb), 0.06); }
.theme-menu-item.is-active { background: rgba(var(--amber-rgb), 0.12); color: var(--amber-ink); }
.theme-swatch {
  display: inline-flex;
  width: 36px;
  height: 16px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  flex-shrink: 0;
}
.theme-swatch-bg, .theme-swatch-text, .theme-swatch-accent { flex: 1; }