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

    :root {
      --bg:       #FFF1E0;
      --surface:  #FFFFFF;
      --surface2: #F6ECE1;
      --border:   #E6D9CE;
      --border2:  #D4C4B0;
      --text:     #1A1614;
      --muted:    #6B5D54;
      --dim:      #A69E97;
      --accent:   #9E2F50;
      --accent2:  #7D1D3F;
      --green:    #0D7680;
      --green-bg: rgba(13,118,128,.08);
      --red:      #CC0000;
      --red-bg:   rgba(204,0,0,.06);
      --amber:    #C77B10;
      --amber-bg: rgba(199,123,16,.07);
      --radius:   6px;
      --mono:     'SF Mono','Fira Code','Consolas',monospace;
      --heading:  'DM Serif Display', Georgia, serif;
    }

    html { scroll-behavior:smooth; }

    /* overflow-anchor:none disables Chrome's scroll-anchoring on the body.
       The masthead changes height when it toggles .scrolled, and scroll
       anchoring tries to "preserve" viewport position by shifting the scroll
       offset — which re-triggers the intersection observer and flickers
       between collapsed/expanded states. Belt-and-braces alongside the
       sentinel approach in setupMasthead(). */
    body { background:var(--bg); color:var(--text); font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; min-height:100vh; line-height:1.5; overflow-anchor:none; }

    ::-webkit-scrollbar { width:6px; height:6px; }
    ::-webkit-scrollbar-track { background:transparent; }
    ::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
    ::-webkit-scrollbar-thumb:hover { background:var(--muted); }

    .hidden { display:none !important; }
    .green  { color:var(--green); }
    .red    { color:var(--red); }
    .amber  { color:var(--amber); }
    .muted  { color:var(--muted); }
    .divider { height:1px; background:var(--border); margin:22px 0; }

    /* Buttons */
    .btn { padding:8px 16px; border-radius:var(--radius); font-size:11px; font-weight:700; cursor:pointer; border:1px solid transparent; transition:background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; display:inline-flex; align-items:center; justify-content:center; gap:6px; letter-spacing:.04em; text-transform:uppercase; font-family:'Inter', sans-serif; }
    .btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
    .btn:disabled { opacity:.35; cursor:not-allowed; }
    .btn-primary  { background:var(--accent); color:#fff; border-color:var(--accent); }
    .btn-primary:not(:disabled):hover { background:var(--accent2); border-color:var(--accent2); }
    .btn-secondary { background:transparent; color:var(--muted); border:1px solid var(--border2); }
    .btn-secondary:not(:disabled):hover { color:var(--accent); border-color:var(--accent); }
    .btn:active:not(:disabled) { transform:scale(.97); }
    .btn-danger { background:rgba(204,0,0,.06); color:#CC0000; border:1px solid rgba(204,0,0,.2); }
    .btn-danger:hover { background:rgba(204,0,0,.12); }
    .btn-full { width:100%; padding:13px; font-size:12px; }

    /* Forms */
    .form-label { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:6px; font-family:'Inter', sans-serif; }
    .form-input { width:100%; background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius); padding:10px 12px; color:var(--text); font-size:14px; outline:none; transition:border-color .15s; }
    .form-input:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(158,47,80,.12); }
    .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .error-box { background:rgba(204,0,0,.05); border:1px solid rgba(204,0,0,.15); border-radius:var(--radius); padding:11px 14px; font-size:12px; color:#CC0000; margin-bottom:14px; font-family:'Inter', sans-serif; }

    /* ── SETUP ── */
    #setup-screen { padding:32px 16px 60px; display:flex; flex-direction:column; align-items:center; }
    .setup-card { background:var(--surface); border:1px solid var(--border2); border-radius:4px; width:100%; max-width:600px; overflow:hidden; }
    .setup-hero { background:var(--accent); padding:36px 32px 28px; text-align:center; border-bottom:none; position:relative; }
    .setup-hero::before { content:'SMB 2.0'; position:absolute; top:14px; left:18px; font-family:var(--heading); font-size:9px; font-weight:700; color:rgba(255,255,255,.6); letter-spacing:.15em; opacity:.8; }
    .setup-hero .icon { font-size:38px; display:block; margin-bottom:10px; }
    .setup-hero h1 { font-size:21px; font-weight:800; color:#fff; margin-bottom:6px; font-family:var(--heading); letter-spacing:0; text-transform:none; }
    .setup-hero p  { color:rgba(255,255,255,.75); font-size:13px; line-height:1.6; }
    .setup-body { padding:26px 28px 30px; }
    .setup-section-title { font-size:10px; font-weight:700; color:var(--accent); text-transform:none; letter-spacing:0; font-family:var(--heading); display:flex; align-items:center; gap:8px; }
    .setup-section-title::before { content:''; display:inline-block; width:2px; height:10px; background:var(--accent); flex-shrink:0; border-radius:1px; }
    .player-count-badge { font-size:11px; font-weight:700; padding:3px 10px; border-radius:2px; background:var(--surface2); border:1px solid var(--border2); color:var(--muted); font-family:var(--mono); }
    .player-count-badge.has { background:rgba(158,47,80,.08); border-color:rgba(158,47,80,.2); color:var(--accent); }

    /* Ticker inputs */
    .picks-container { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
    .pick-field { display:flex; flex-direction:column; }
    .pick-input-row { position:relative; }
    .ticker-input { width:100%; background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius); padding:10px 36px 10px 12px; color:var(--text); font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; outline:none; transition:border-color .2s,background .2s; }
    .ticker-input::placeholder { font-family:'Inter', sans-serif; font-weight:400; letter-spacing:0; text-transform:none; color:var(--dim); font-size:13px; }
    .ticker-input:focus   { border-color:var(--accent); box-shadow:0 0 0 2px rgba(158,47,80,.12); }
    .ticker-input.valid   { border-color:var(--green); background:var(--green-bg); }
    .ticker-input.invalid { border-color:var(--red);   background:var(--red-bg); }
    .ticker-input.duplicate { border-color:var(--amber); background:var(--amber-bg); }
    .ticker-input.checking  { border-color:rgba(158,47,80,.3); }
    .ticker-input.unknown   { border-color:var(--dim); }
    .pick-icon { position:absolute; right:11px; top:50%; transform:translateY(-50%); font-size:15px; pointer-events:none; transition:opacity .2s; }
    @keyframes icon-spin { to { transform:translateY(-50%) rotate(360deg); } }
    .pick-icon.spinning { animation:icon-spin .7s linear infinite; }
    .pick-msg { font-size:11px; min-height:17px; margin-top:4px; padding-left:3px; color:var(--dim); transition:color .2s; font-family:var(--mono); }
    .pick-msg.valid    { color:var(--green); }
    .pick-msg.invalid  { color:var(--red); }
    .pick-msg.duplicate { color:var(--amber); }
    .add-btn-hint { font-size:11px; color:var(--muted); text-align:center; margin-top:8px; min-height:16px; font-family:'Inter', sans-serif; }

    /* Autocomplete dropdown */
    .ac-dropdown { position:absolute; top:calc(100% + 3px); left:0; right:0; background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius); z-index:200; max-height:280px; overflow-y:auto; box-shadow:0 8px 28px rgba(0,0,0,.12); display:none; }
    .ac-dropdown.open { display:block; }
    .ac-item { display:flex; align-items:center; gap:10px; padding:9px 13px; cursor:pointer; border-bottom:1px solid var(--border); transition:background .1s; }
    .ac-item:last-child { border-bottom:none; }
    .ac-item:hover, .ac-item.ac-active { background:var(--surface2); }
    .ac-sym  { font-family:var(--mono); font-size:12px; font-weight:800; color:var(--accent); min-width:56px; letter-spacing:.05em; }
    .ac-cname { font-size:13px; color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ac-ex   { font-size:10px; color:var(--muted); flex-shrink:0; background:var(--surface2); border:1px solid var(--border2); border-radius:2px; padding:1px 6px; font-family:var(--mono); }
    .ac-empty { padding:13px 16px; color:var(--muted); font-size:12px; font-family:var(--mono); }

    /* Submitted players list */
    .submitted-list { display:flex; flex-direction:column; gap:5px; }
    .submitted-player { display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); transition:border-color .15s; }
    .submitted-player:hover { border-color:var(--accent); }
    .sp-index { font-size:10px; font-weight:700; color:var(--dim); min-width:18px; font-family:var(--mono); }
    .sp-name  { font-size:13px; font-weight:700; min-width:90px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .sp-picks { display:flex; gap:5px; flex:1; flex-wrap:wrap; }
    .sp-pick  { font-size:10px; font-weight:700; font-family:var(--mono); letter-spacing:.04em; padding:2px 7px; background:var(--surface); border:1px solid var(--border2); border-radius:2px; color:var(--accent); }
    .sp-remove { background:none; border:none; color:var(--dim); cursor:pointer; font-size:17px; padding:2px 5px; border-radius:2px; margin-left:auto; flex-shrink:0; transition:color .15s; }
    .sp-remove:hover { color:var(--red); }

    /* ── DASHBOARD ── */
    #dashboard-screen { min-height:auto; }
    .topbar { background:rgba(255,255,255,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:2px solid var(--accent); border-top:none; padding:6px 22px; display:flex; align-items:center; justify-content:space-between; min-height:52px; position:sticky; top:0; z-index:10; gap:8px; flex-wrap:wrap; }
    .topbar-left  { display:flex; align-items:center; gap:14px; min-width:0; overflow:hidden; }
    .topbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
    .topbar-ident { font-family:var(--heading); font-size:12px; font-weight:700; background:var(--accent); color:#fff; padding:3px 8px; border-radius:3px; letter-spacing:.02em; flex-shrink:0; }
    .topbar-title { font-size:15px; font-weight:700; letter-spacing:0; text-transform:none; font-family:var(--heading); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .topbar-dates { font-size:10px; color:var(--muted); font-family:'Inter', sans-serif; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .live-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; flex-shrink:0; }
    .live-dot.stale { background:var(--amber); animation:none; }
    .live-dot.error { background:var(--red);   animation:none; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
    .last-updated { font-size:10px; color:var(--muted); font-family:var(--mono); }

    .main { max-width:1140px; margin:0 auto; padding:22px 18px; }

    /* Demo notice */
    .demo-banner { background:rgba(158,47,80,.06); border:1px solid rgba(158,47,80,.15); border-radius:var(--radius); padding:9px 16px; font-size:11px; color:var(--accent); margin-bottom:20px; text-align:center; font-family:'Inter', sans-serif; letter-spacing:.03em; }

    /* Progress */
    .progress-section { margin-bottom:22px; }
    .progress-header  { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
    .progress-label   { font-size:13px; font-weight:700; text-transform:none; letter-spacing:0; color:var(--muted); font-family:var(--heading); }
    .progress-days    { font-size:10px; color:var(--muted); font-family:'Inter', sans-serif; }
    .progress-track   { height:3px; background:var(--surface2); border-radius:0; overflow:hidden; }
    .progress-fill    { height:100%; background:linear-gradient(90deg,var(--accent),#C84B6B); border-radius:0; transition:width .5s ease; }

    /* Dashboard tabs — sticky & styled */
    .dash-tabs { display:flex; gap:2px; margin-bottom:24px; width:100%; border-bottom:1px solid var(--border2); position:sticky; top:52px; z-index:9; background:var(--bg); padding-top:8px; }
    .dash-tab  { padding:7px 18px; border-radius:0; font-size:13px; font-weight:700; cursor:pointer; color:var(--muted); border:none; background:transparent; transition:color .15s, background-color .15s, border-color .15s; letter-spacing:.02em; text-transform:none; font-family:var(--heading); border-bottom:2px solid transparent; margin-bottom:-1px; }
    .dash-tab:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
    .dash-tab.active { color:var(--accent); border-bottom-color:var(--accent); background:rgba(158,47,80,.04); }
    .dash-tab:not(.active):hover { color:var(--text); background:rgba(0,0,0,.03); }

    /* Section title */
    .section-title { font-size:15px; font-weight:700; text-transform:none; letter-spacing:0; color:var(--accent); margin-bottom:13px; font-family:var(--heading); display:flex; align-items:center; gap:8px; }
    .section-title::before { content:''; display:inline-block; width:2px; height:14px; background:var(--accent); flex-shrink:0; border-radius:1px; }

    /* Leaderboard */
    .lb-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:24px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
    .lb-row  { display:grid; grid-template-columns:52px 1fr 72px auto; align-items:center; padding:10px 16px; border-bottom:1px solid var(--border); transition:background .1s; gap:12px; cursor:pointer; animation:slideUp 0.3s ease both; }
    .lb-row:last-child { border-bottom:none; }
    .lb-row:hover { background:var(--surface2); }
    .lb-row.top-1 { border-left:2px solid var(--accent); }
    .lb-row.top-2 { border-left:2px solid var(--muted); }
    .lb-row.top-3 { border-left:2px solid var(--amber); }
    .lb-row.positive { background:rgba(13,118,128,.03); }
    .lb-row.negative { background:rgba(204,0,0,.02); }
    .lb-row.highlighted { background:rgba(158,47,80,.06); border-left:3px solid var(--accent); }
    .lb-rank  { font-size:20px; text-align:center; min-width:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; line-height:1.2; }
    .lb-name  { font-size:15px; font-weight:700; font-family:var(--heading); }
    /* Streak badge — sits inline next to the player name. Only renders when
       a player has 2+ consecutive same-direction trading days. */
    .lb-streak { display:inline-block; font-size:10px; font-weight:700; font-family:var(--mono); padding:1px 6px; border-radius:10px; vertical-align:middle; margin-left:4px; letter-spacing:.02em; }
    .lb-streak.up   { background:rgba(13,118,128,.10); color:var(--green, #0D7680); }
    .lb-streak.down { background:var(--red-bg);   color:var(--red); }
    @media (max-width:700px) { .lb-streak { font-size:9px; padding:1px 5px; } }
    .lb-picks { font-size:11px; color:var(--muted); margin-top:2px; font-family:var(--mono); letter-spacing:.03em; }
    .lb-gain-wrap { text-align:right; }
    .lb-gain  { font-size:20px; font-weight:800; font-family:var(--mono); font-variant-numeric:tabular-nums; }
    .lb-value { font-size:11px; color:var(--muted); margin-top:1px; font-family:var(--mono); }
    .lb-gain.waiting { font-size:14px; color:var(--dim); }
    .lb-row.expanded { background:var(--surface2); border-bottom-color:transparent; }
    .lb-expand { max-height:0; overflow:hidden; transition:max-height 0.3s ease; padding:0 16px; background:var(--surface2); }
    .lb-expand.open { max-height:600px; padding:0 16px 14px; border-bottom:1px solid var(--border); }
    .lb-expand .asset-row { border-color:var(--border); }

    /* Sparklines */
    .sparkline-desktop { display:block; }
    .sparkline-expand  { display:none; }
    .expand-spark-header { display:none; margin-bottom:6px; padding-bottom:8px; border-bottom:1px solid var(--border); }

    /* Leaderboard animations */
    @keyframes slideUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

    /* Portfolio cards */
    .player-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 1px 3px rgba(0,0,0,.06); }
    .player-card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.08); }
    .card-head { display:flex; justify-content:space-between; align-items:center; padding:11px 15px; background:var(--surface2); border-bottom:1px solid var(--border); }
    .card-name { font-size:14px; font-weight:700; font-family:var(--heading); }
    .card-gain { font-size:15px; font-weight:800; font-family:var(--mono); font-variant-numeric:tabular-nums; }
    .card-rank-medal { font-size:18px; line-height:1; flex-shrink:0; }
    .card-rank-num { font-size:10px; font-weight:800; color:var(--dim); background:var(--surface2); border:1px solid var(--border); border-radius:2px; padding:2px 7px; flex-shrink:0; min-width:26px; text-align:center; font-family:var(--mono); }
    .card-body { padding:0 15px; }
    .asset-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); gap:10px; }
    .asset-row:last-child { border-bottom:none; }
    .asset-ticker     { font-size:10px; font-weight:700; letter-spacing:.06em; font-family:var(--mono); color:var(--muted); margin-top:2px; }
    .asset-name-label { font-size:12px; font-weight:600; color:var(--text); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .asset-right      { text-align:right; flex-shrink:0; }
    .asset-gain  { font-size:13px; font-weight:700; font-family:var(--mono); font-variant-numeric:tabular-nums; }
    .asset-price { font-size:10px; color:var(--muted); margin-top:2px; font-family:var(--mono); }

    /* ── STOCK LEADERBOARD ── */
    .slb-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.06); }
    .slb-head { display:grid; grid-template-columns:36px 32px 60px 1fr 72px 72px 120px; gap:10px; padding:9px 18px; border-bottom:1px solid var(--border); background:var(--surface2); }
    .slb-head span { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-family:var(--mono); }
    .slb-row  { display:grid; grid-template-columns:36px 32px 60px 1fr 72px 72px 120px; gap:10px; align-items:center; padding:10px 18px; border-bottom:1px solid var(--border); transition:background .1s; }
    .slb-row:last-child { border-bottom:none; }
    .slb-row:hover { background:var(--surface2); }
    .slb-rank   { font-size:11px; font-weight:700; color:var(--dim); font-family:var(--mono); }
    /* Day-over-day rank-movement marker. Empty cell when there's no prior
       snapshot or rank is unchanged — the slot still occupies a column so
       the rest of the row stays aligned. */
    .slb-move-cell { font-size:10px; font-weight:700; font-family:var(--mono); text-align:left; }
    .slb-move      { display:inline-block; line-height:1; }
    .slb-move.up   { color:var(--green); }
    .slb-move.down { color:var(--red); }
    .slb-ticker { font-family:var(--mono); font-size:12px; font-weight:800; letter-spacing:.05em; color:var(--accent); }
    .slb-name   { font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--heading); font-weight:600; }
    .slb-bar-wrap { display:none; }
    .slb-bar-mid  { display:none; }
    .slb-bar      { display:none; }
    .slb-bar.pos  { display:none; }
    .slb-bar.neg  { display:none; }
    .slb-pct    { font-size:12px; font-weight:700; text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
    .slb-player { font-size:11px; color:var(--muted); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* ── CHART ── */
    .chart-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px 18px 14px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
    .chart-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-family:var(--heading); }
    .chart-wrap { position:relative; height:440px; }
    .chart-legend-custom { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
    .chart-group-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
    .legend-item { display:flex; align-items:center; gap:7px; font-size:11px; cursor:pointer; opacity:1; transition:opacity .2s; font-family:var(--mono); }
    .legend-item.faded { opacity:.3; }
    .legend-dot { width:8px; height:8px; border-radius:0; flex-shrink:0; }

    /* Loading */
    .loading-state { text-align:center; padding:70px 20px; }
    .spinner { width:28px; height:28px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 14px; }
    @keyframes spin { to{transform:rotate(360deg)} }
    .loading-text { color:var(--muted); font-size:12px; font-family:'Inter', sans-serif; }

    /* Modal */
    .overlay { position:fixed; inset:0; background:rgba(51,48,46,.5); z-index:50; display:flex; align-items:center; justify-content:center; padding:20px; }
    .modal { background:var(--surface); border:1px solid var(--border2); border-top:2px solid var(--accent); border-radius:var(--radius); width:100%; max-width:430px; max-height:calc(100vh - 40px); display:flex; flex-direction:column; box-shadow:0 8px 40px rgba(0,0,0,.12); }
    .modal-head { display:flex; justify-content:space-between; align-items:center; padding:15px 20px; border-bottom:1px solid var(--border); }
    .modal-title { font-size:14px; font-weight:700; text-transform:none; letter-spacing:0; font-family:var(--heading); }
    .modal-body  { padding:20px; overflow-y:auto; flex:1; min-height:0; }
    .modal-section { margin-bottom:20px; }
    .modal-section-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:8px; font-family:var(--mono); }
    .modal-desc { font-size:13px; color:var(--muted); margin-bottom:10px; line-height:1.5; font-family:'Inter', sans-serif; }

    /* Chart tooltip */
    #chart-tooltip { position:absolute; pointer-events:none; background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius); padding:10px 13px; min-width:175px; display:none; z-index:10; font-family:var(--mono); box-shadow:0 4px 20px rgba(0,0,0,.1); }

    /* Toast */
    #toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(70px); background:var(--surface); border:1px solid var(--accent); border-radius:var(--radius); padding:10px 18px; font-size:12px; font-weight:700; color:var(--text); z-index:200; transition:transform .25s ease; pointer-events:none; white-space:nowrap; font-family:var(--mono); letter-spacing:.03em; box-shadow:0 4px 20px rgba(0,0,0,.1); }
    #toast.show { transform:translateX(-50%) translateY(0); }

    /* ── WINNER BANNER ── */
    .winner-banner { background:linear-gradient(135deg,rgba(13,118,128,.06),rgba(199,123,16,.04)); border:1px solid rgba(13,118,128,.2); border-left:3px solid var(--green); border-radius:var(--radius); padding:22px 24px; margin-bottom:20px; display:flex; align-items:center; gap:20px; }
    .winner-trophy { font-size:44px; line-height:1; flex-shrink:0; filter:drop-shadow(0 0 14px rgba(246,201,14,.6)); }
    .winner-body   { flex:1; min-width:0; }
    .winner-label  { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--green); margin-bottom:4px; font-family:var(--heading); }
    .winner-name   { font-size:24px; font-weight:800; color:var(--text); line-height:1.15; font-family:var(--heading); }
    .winner-gain   { font-size:17px; font-weight:700; color:var(--amber); margin-top:2px; font-family:var(--mono); }
    .winner-sub    { font-size:11px; color:var(--muted); margin-top:6px; font-family:var(--mono); }
    .game-over-note { background:rgba(13,118,128,.05); border:1px solid rgba(13,118,128,.2); border-radius:var(--radius); padding:10px 16px; font-size:12px; color:var(--green); margin-bottom:20px; text-align:center; font-family:var(--mono); letter-spacing:.02em; }

    /* ── COUNTDOWN ── */
    .countdown-section { background:var(--surface); border:1px solid var(--border2); border-top:2px solid var(--accent); border-radius:var(--radius); padding:18px 22px; margin-bottom:16px; text-align:center; }
    .countdown-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); font-family:var(--heading); margin-bottom:10px; }
    .countdown-digits { display:flex; justify-content:center; gap:10px; align-items:flex-end; }
    .countdown-unit { display:flex; flex-direction:column; align-items:center; min-width:52px; }
    .countdown-num { font-size:38px; font-weight:800; font-family:var(--heading); color:var(--accent); line-height:1; text-shadow:none; }
    .countdown-sub { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-top:3px; font-family:'Inter', sans-serif; }
    .countdown-sep { font-size:28px; font-weight:700; color:var(--border2); padding-bottom:6px; font-family:var(--mono); }

    /* ── INLINE JOIN PANEL ── */
    .join-panel { background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius); padding:18px 20px; margin-bottom:18px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
    .join-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
    .join-panel-title { font-size:14px; font-weight:700; text-transform:none; letter-spacing:0; color:var(--text); font-family:var(--heading); }
    .join-panel-sub { font-size:12px; color:var(--muted); font-family:'Inter', sans-serif; }
    .join-panel-fields { display:grid; grid-template-columns:1fr 1fr 1fr 1fr auto; gap:10px; align-items:start; }
    /* ── PLAYER CARDS (pre-game) ── */
    .ij-players-section { margin-top:18px; border-top:1px solid var(--border); padding-top:14px; }
    .ij-players-header  { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
    .ij-players-label   { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); font-family:var(--heading); }
    .ij-players-count   { font-size:11px; color:var(--muted); font-family:var(--mono); }
    .ij-cards-grid      { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
    .ij-card            { background:var(--surface2); border:1px solid var(--border2); border-left:3px solid var(--accent); border-radius:var(--radius); padding:14px; position:relative; transition:transform .15s ease, box-shadow .15s ease; }
    .ij-card:hover { transform:translateY(-1px); box-shadow:0 3px 12px rgba(0,0,0,.06); }
    .ij-card-head       { display:flex; justify-content:space-between; align-items:center; margin-bottom:11px; }
    .ij-card-name       { font-size:14px; font-weight:700; color:var(--text); font-family:var(--heading); }
    .ij-card-menu-btn   { background:none; border:none; color:var(--dim); cursor:pointer; font-size:16px; padding:2px 6px; line-height:1; border-radius:var(--radius); transition:color .15s,background .15s; }
    .ij-card-menu-btn:hover { color:var(--text); background:var(--border2); }
    .ij-card-picks      { display:flex; flex-direction:column; gap:6px; }
    .ij-card-pick       { display:flex; align-items:baseline; gap:8px; }
    .ij-card-ticker     { font-size:12px; font-weight:700; color:var(--accent); font-family:var(--mono); min-width:46px; flex-shrink:0; }
    .ij-card-fullname   { font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ij-card-menu       { position:absolute; top:36px; right:10px; background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius); z-index:20; min-width:160px; box-shadow:0 8px 28px rgba(0,0,0,.12); }
    .ij-card-menu-item  { padding:10px 14px; font-size:12px; cursor:pointer; display:flex; align-items:center; gap:9px; color:var(--text); font-family:var(--mono); transition:background .12s; }
    .ij-card-menu-item:hover { background:var(--surface2); }
    .ij-card-menu-item.danger { color:var(--red); }
    @media (max-width:860px) {
      .join-panel-fields { grid-template-columns:1fr 1fr; }
    }
    @media (max-width:560px) {
      .join-panel-fields { grid-template-columns:1fr; }
    }

    /* Responsive */
    @media (max-width:700px) {
      .slb-head, .slb-row { grid-template-columns:24px 26px 44px minmax(0,1fr) 50px 50px minmax(0,72px); gap:5px; padding:8px 10px; }
      .slb-name { min-width:0; }
      .slb-player { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    }

    @media (max-width:480px) {
      .slb-head span:nth-child(4) { display:none; }
      .slb-row .slb-name { display:none; }
      .slb-head, .slb-row { grid-template-columns:24px 26px 44px 50px 50px minmax(0,72px); }
    }

    /* ── Day gain badge ── */
    .day-gain { font-size:10px; font-family:var(--mono); font-weight:600; padding:2px 5px; border-radius:4px; }
    .day-gain.green { color:var(--green); background:rgba(13,118,128,.1); }
    .day-gain.red   { color:var(--red); background:rgba(204,0,0,.08); }
    .day-gain.muted { color:var(--muted); }


    /* ── Weekly Digests archive (tab content) ── */
    .digests-intro { margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--border); }
    .digests-list  { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
    .digest-card {
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:18px 20px 20px;
      transition:border-color .15s, transform .15s, box-shadow .15s;
      cursor:pointer;
      display:flex; flex-direction:column;
      text-decoration:none; color:inherit;
    }
    .digest-card:hover {
      border-color:var(--accent);
      transform:translateY(-2px);
      box-shadow:0 4px 14px rgba(158,47,80,.10);
    }
    .digest-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
    .digest-meta {
      display:flex; justify-content:space-between; align-items:baseline;
      font-family:var(--mono); font-size:10px; font-weight:700;
      letter-spacing:.10em; text-transform:uppercase;
      color:var(--muted);
      margin-bottom:10px;
    }
    .digest-meta .digest-issue { color:var(--accent); }
    .digest-headline {
      font-family:var(--heading);
      font-weight:700;
      font-size:17px;
      line-height:1.25;
      color:var(--text);
      margin:0 0 8px;
    }
    .digest-kicker {
      font-family:var(--heading);
      font-style:italic;
      font-size:12.5px;
      line-height:1.5;
      color:var(--muted);
      margin:0 0 14px;
      flex:1;
    }
    .digest-cta {
      display:inline-flex; align-items:center; gap:6px;
      font-size:11px; font-weight:700;
      letter-spacing:.06em; text-transform:uppercase;
      color:var(--accent);
      margin-top:auto;
      padding-top:8px;
      border-top:1px solid var(--border);
    }
    .digest-cta::after { content:"→"; font-size:13px; }
    .digests-empty {
      grid-column: 1 / -1;
      text-align:center;
      padding:48px 20px;
      color:var(--muted);
      font-size:13px;
    }
    .digests-empty .icon { font-size:32px; margin-bottom:8px; }
    @media (max-width:700px) {
      .digests-list  { grid-template-columns:1fr; gap:12px; }
      .digest-card   { padding:16px 18px 18px; }
      .digest-headline { font-size:16px; }
    }


    /* ── "YOU" pill, expand chevron, re-render animation suppression ── */
    .lb-you { display:inline-block; font-family:var(--mono); font-size:8.5px; font-weight:800; letter-spacing:.1em; color:#fff; background:var(--accent); border-radius:2px; padding:1.5px 5px; vertical-align:2px; margin-left:2px; }
    .lb-chev { font-size:12px; color:var(--dim); margin-left:6px; flex-shrink:0; transition:transform .15s ease; align-self:center; }
    .lb-row.expanded .lb-chev { transform:rotate(90deg); color:var(--accent); }
    .lb-row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
    /* After the first paint, re-renders patch silently — no cascade replay */
    .lb-card.no-anim .lb-row { animation:none !important; }

    /* ── Masthead feed-health label (mirrors the legacy status row) ── */
    .mh-feed { font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; color:var(--muted); margin-left:8px; }
    .mh-feed.error { color:var(--red); font-weight:700; }

    /* ── "In this week's Weekly" teaser strip ── */
    .weekly-teaser {
      display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
      margin:0 0 18px; padding:10px 14px;
      background:var(--surface); border:1px solid var(--border);
      border-left:3px solid var(--accent); border-radius:var(--radius);
    }
    .wt-eyebrow { font-family:var(--mono); font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
    .wt-headline { font-family:var(--heading); font-size:14px; font-weight:700; color:var(--text); text-decoration:none; flex:1; min-width:200px; }
    .wt-headline:hover { color:var(--accent); }
    .wt-cta { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); text-decoration:none; white-space:nowrap; }
    .wt-cta:hover { text-decoration:underline; }
    @media (max-width:580px) { .weekly-teaser { padding:9px 12px; } .wt-headline { font-size:13px; min-width:100%; order:3; } }


    /* ── Boot splash + colophon ── */
    #boot-splash {
      position:fixed; inset:0; z-index:50;
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
      background:var(--bg);
    }
    #boot-splash.hidden { display:none; }
    .boot-wordmark { font-family:var(--heading); font-size:30px; font-weight:700; color:var(--text); letter-spacing:-.01em; }
    .boot-sub { font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }

    .colophon {
      margin-top:44px; padding:14px 2px 6px;
      border-top:2px solid var(--text);
      display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
      font-family:var(--mono); font-size:9.5px; font-weight:600;
      letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
    }


    /* ── Grand-finale blackout ──────────────────────────────────────
       When body.blackout is set (non-admin, past the cut-off, not yet
       revealed) we hide every masthead element that would leak current
       performance, and the two score tabs. The Front Page tab shows the
       sealed panel instead; Weekly Digests stays reachable. */
    body.blackout #tape-wrap,
    body.blackout #dt-btn-stocks,
    body.blackout #dt-btn-history { display:none !important; }

    #blackout-screen {
      background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius);
      box-shadow:0 1px 3px rgba(0,0,0,.06);
      padding:64px 28px; margin-top:8px; text-align:center;
    }
    .blackout-inner { max-width:440px; margin:0 auto; }
    .blackout-lock { font-size:46px; line-height:1; margin-bottom:18px; }
    .blackout-title { font-family:var(--heading); font-size:30px; font-weight:700; color:var(--text); margin-bottom:14px; letter-spacing:-.01em; }
    .blackout-sub { font-size:14px; line-height:1.65; color:var(--muted); margin-bottom:22px; }
    .blackout-meta {
      font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em;
      text-transform:uppercase; color:var(--accent);
      padding:12px 16px; background:var(--accent-bg,rgba(158,47,80,.06));
      border:1px solid rgba(158,47,80,.18); border-radius:var(--radius);
      display:inline-block; margin-bottom:22px;
    }
    .blackout-archive { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--accent); text-decoration:none; }
    .blackout-archive:hover { text-decoration:underline; }
    @media (max-width:580px) {
      #blackout-screen { padding:44px 18px; }
      .blackout-title { font-size:24px; }
    }

    /* ── Stock Browser ── */
    #stock-browser-overlay { position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:300;display:flex;align-items:stretch;justify-content:center;padding:20px; }
    .sb-modal { background:var(--surface);border:1px solid var(--border2);border-radius:6px;display:flex;flex-direction:column;width:100%;max-width:860px;max-height:calc(100vh - 40px);overflow:hidden; }
    .sb-header { display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border2);flex-shrink:0; }
    .sb-title  { font-size:14px;font-weight:800;color:var(--text);font-family:var(--heading);text-transform:none;letter-spacing:0;flex:1 }
    .sb-slot-indicator { font-size:11px;color:var(--accent);font-family:var(--mono);background:rgba(158,47,80,.12);border:1px solid rgba(158,47,80,.25);padding:3px 10px;border-radius:20px;white-space:nowrap; }
    .sb-body   { display:flex;flex:1;overflow:hidden; }
    .sb-nav    { width:200px;flex-shrink:0;overflow-y:auto;border-right:1px solid var(--border2);padding:8px 0; }
    .sb-nav-group  { font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:12px 14px 4px;font-family:var(--mono); }
    .sb-nav-item   { display:block;width:100%;background:none;border:none;color:var(--dim);font-size:12px;text-align:left;padding:6px 14px;cursor:pointer;border-radius:0;transition:background .1s,color .1s; }
    .sb-nav-item:hover { background:var(--surface2);color:var(--text); }
    .sb-nav-item.active { background:rgba(158,47,80,.08);color:var(--accent);font-weight:700; }
    .sb-content { flex:1;overflow-y:auto;padding:16px; }
    .sb-content-title { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-family:var(--mono);margin-bottom:12px; }
    .sb-grid   { display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px; }
    .sb-card   { background:var(--surface2);border:1px solid var(--border2);border-radius:4px;padding:11px 12px;cursor:pointer;transition:border-color .15s,background .15s;position:relative; }
    .sb-card:hover { border-color:var(--accent);background:var(--surface2); }
    .sb-card.selected { border-color:var(--green);background:rgba(13,118,128,.06); }
    .sb-card.disabled { opacity:.4;cursor:not-allowed; }
    .sb-card-ticker { font-size:13px;font-weight:800;font-family:var(--mono);color:var(--text);margin-bottom:2px; }
    .sb-card-name   { font-size:10px;color:var(--muted);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .sb-card-check  { position:absolute;top:7px;right:8px;color:var(--green);font-size:12px;font-weight:700; }
    @media(max-width:600px){
      #stock-browser-overlay { padding:0; }
      .sb-modal { border-radius:0; max-height:100vh; height:100vh; }
      .sb-nav { width:140px; font-size:11px; }
      .sb-nav-group { padding:10px 10px 3px; font-size:8px; }
      .sb-nav-item { padding:7px 10px; font-size:11px; }
      .sb-grid { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:6px; }
      .sb-card { padding:9px 10px; }
      .sb-header { padding:12px 14px; }
    }

    /* ── Season archive card ── */
    .season-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px; margin-bottom:12px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
    .season-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
    .season-card-title { font-weight:700; font-size:14px; }
    .season-card-dates { font-size:11px; color:var(--muted); font-family:var(--mono); }
    .season-standings-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--border2); font-size:12px; }
    .season-standings-row:last-child { border-bottom:none; }

    /* ── Search loading indicator ── */
    .ac-loading { display:flex; align-items:center; gap:8px; padding:10px 14px; color:var(--muted); font-size:13px; }
    .ac-category-label { font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); font-weight:700; padding:6px 14px 2px; }

    @media (max-width:580px) {
      .setup-body { padding:20px 18px 24px; }
      .setup-hero { padding:26px 18px 22px; }
      .topbar   { padding:6px 12px; }
      .topbar-ident { display:none; }
      .topbar-right .btn { padding:4px 8px; font-size:10px; }
      .main     { padding:14px 10px; }
      .lb-row   { padding:10px 12px; grid-template-columns:42px 1fr auto; }
      .lb-gain  { font-size:18px; }
      .sparkline-desktop { display:none !important; }
      .sparkline-expand  { display:block !important; }
      .expand-spark-header { display:block; }
        .grid-2   { grid-template-columns:1fr; }
      .dash-tabs { width:100%; }
      .dash-tab  { flex:1; padding:8px 12px; font-size:12px; }
      .join-panel { padding:14px 12px; }
      .countdown-num { font-size:24px; }
      .countdown-unit { min-width:40px; }
      .alloc-grid-3 { grid-template-columns:1fr; }
      .btn { min-height:40px; }
      .form-input { padding:12px; font-size:15px; }
      .ticker-input { padding:12px 36px 12px 12px; font-size:14px; }
      .alloc-btn { width:34px; height:34px; font-size:20px; }
    }

    @media (max-width:380px) {
      .topbar { padding:6px 8px; }
      .topbar-left { gap:8px; }
      .topbar-title { font-size:11px; }
      .topbar-dates { font-size:9px; }
      .last-updated { display:none; }
      .sb-nav { width:120px; }
      .sb-grid { grid-template-columns:1fr; }
    }

    /* ── Reduced motion ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .live-dot, .live-dot.stale, .spinner, .pick-icon.spinning, .lb-row { animation: none !important; }
      .spinner { border-top-color: var(--accent); }
    }

    /* ── Live dot tooltip wrapper ── */
    .live-status { display:flex; align-items:center; gap:6px; cursor:default; position:relative; }
    .live-status-label { font-size:10px; color:var(--muted); font-family:var(--mono); }

    /* ── User menu item ── */
    #user-menu { background:var(--surface) !important; border-color:var(--border) !important; box-shadow:0 4px 20px rgba(0,0,0,.1) !important; }
    .user-menu-item { width:100%; background:none; border:none; color:var(--text); font-size:13px; cursor:pointer; text-align:left; padding:7px 10px; border-radius:4px; transition:background .12s; display:block; }
    .user-menu-item:hover { background:var(--surface2); }

    /* ── Confetti canvas ── */
    #confetti-canvas { position:fixed; inset:0; pointer-events:none; z-index:999; }

    /* ── Empty state ── */
    .empty-state { text-align:center; padding:60px 20px; color:var(--muted); font-size:12px; font-family:var(--mono); }
    .empty-state .icon { font-size:32px; margin-bottom:12px; }

    /* ── Allocation stepper ── */
    .alloc-section { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
    .alloc-section-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:4px; font-family:var(--mono); }
    .alloc-section-hint  { font-size:11px; color:var(--dim); margin-bottom:12px; font-family:'Inter', sans-serif; }
    .alloc-row { display:flex; align-items:center; gap:10px; padding:5px 0; }
    .alloc-ticker-lbl { font-size:12px; font-weight:700; color:var(--accent); font-family:var(--mono); min-width:58px; flex-shrink:0; }
    .alloc-name-lbl { font-size:11px; color:var(--muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .alloc-stepper { display:flex; align-items:center; gap:7px; flex-shrink:0; }
    .alloc-btn { width:26px; height:26px; border-radius:var(--radius); background:var(--surface2); border:1px solid var(--border2); color:var(--text); font-size:17px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background-color .15s, border-color .15s, color .15s; line-height:1; padding:0; font-family:var(--mono); }
    .alloc-btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
    .alloc-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
    .alloc-btn:disabled { opacity:.28; cursor:not-allowed; }
    .alloc-amount { font-size:13px; font-weight:700; font-family:var(--mono); min-width:44px; text-align:center; font-variant-numeric:tabular-nums; }
    .alloc-total-row { display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:8px; border-top:1px solid var(--border); font-size:12px; font-family:var(--mono); }
    .alloc-total-lbl { color:var(--muted); }
    .alloc-total-val { font-weight:800; }
    .alloc-total-val.valid   { color:var(--green); }
    .alloc-total-val.invalid { color:var(--amber); }
    .alloc-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }

    /* ── Pick + Allocation unified card ── */
    .pick-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:8px; }
    .pick-card-alloc { display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
    .pick-card-alloc-label { font-size:11px; color:var(--muted); font-family:var(--mono); flex-shrink:0; }
    .pick-card-num { font-size:12px; font-weight:700; color:var(--accent); font-family:var(--heading); letter-spacing:0; margin-bottom:6px; text-transform:none; }

    /* ═══════════════════════════════════════════════════════════
       V3 MASTHEAD / TAPE / TABS / FRONT-PAGE STRIPS
       Applies only inside #game-content when body.game-live is set.
       Pre-game state (countdown/FAQ/inline-join) is unaffected.
       ═══════════════════════════════════════════════════════════ */

    /* When the masthead is active, hide the old .topbar + progress bar.
       (Their roles are taken over by the masthead + ticker tape.) */
    body.game-live .topbar { display:none !important; }
    body.game-live .progress-section { display:none !important; }
    /* Let the masthead run edge-to-edge by zeroing .main's side padding */
    body.game-live .main { padding-left:0; padding-right:0; padding-top:0; max-width:none; }
    /* Inner game-content children (except the masthead/winner) re-gain normal page padding */
    body.game-live #game-content > :not(.masthead):not(#winner-banner) {
      max-width:1140px; margin-left:auto; margin-right:auto; padding-left:18px; padding-right:18px;
    }
    body.game-live #winner-banner:not(.hidden) {
      max-width:1140px; margin:16px auto; padding:0 18px;
    }

    /* Masthead — sticky container, collapses on scroll */
    .masthead {
      position:sticky; top:0; z-index:50;
      background:var(--bg);
      border-bottom:3px double var(--border);
      margin-bottom:18px;
    }

    /* Game-progress strip — sits between the ticker tape and tab nav.
       Two-line layout: meta row (Day X / Y · Z days remaining) above a
       chunky 6px progress track. */
    .mh-progress-row {
      padding:8px 20px 10px;
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      background:var(--bg);
    }
    .mh-progress-meta {
      display:flex; justify-content:space-between; align-items:baseline;
      font-family:var(--mono);
      font-size:10px; font-weight:700;
      letter-spacing:.10em; text-transform:uppercase;
      color:var(--muted);
      margin-bottom:5px;
    }
    .mh-progress-day  { color:var(--accent); }
    .mh-progress-left { color:var(--muted); }
    .mh-progress-track {
      height:6px;
      background:var(--surface2);
      border-radius:3px;
      overflow:hidden;
      box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
    }
    .mh-progress-fill {
      height:100%;
      background:linear-gradient(90deg, var(--accent), #C84B6B);
      width:0%;
      border-radius:3px;
      transition:width .8s ease;
    }
    .mh-progress-fill.complete {
      background:linear-gradient(90deg, var(--green, #0D7680), var(--green, #0D7680));
    }
    /* When the masthead is collapsed, hide the progress strip — keeps the
       sticky header compact. The numbers are still discoverable by
       scrolling back up. */
    .masthead.scrolled .mh-progress-row { display:none; }
    @media (max-width:700px) {
      .mh-progress-row { padding:7px 14px 8px; }
      .mh-progress-meta { font-size:9px; }
    }

    .masthead .dateline {
      display:flex; justify-content:space-between; align-items:center;
      padding:9px 20px 7px;
      border-bottom:1px solid var(--border);
      font-family:var(--mono); font-size:11px; letter-spacing:1.2px;
      color:var(--muted); text-transform:uppercase;
      max-width:1140px; margin:0 auto;
    }
    .masthead .dateline-left { display:flex; align-items:center; gap:18px; min-width:0; overflow:hidden; white-space:nowrap; }
    .masthead .dateline-live { display:flex; align-items:center; gap:6px; }
    .masthead .mh-live-dot { width:8px; height:8px; }
    .masthead .dateline-controls { display:flex; align-items:center; gap:6px; flex-shrink:0; }
    /* Tighten controls when they appear in the dateline */
    .masthead .dateline-controls .btn { padding:4px 10px; font-size:10px; }
    .masthead .dateline-controls .live-status,
    .masthead .dateline-controls .last-updated { display:none; } /* masthead has its own clock */

    /* Two-layer wordmark — cross-fade on collapse (GPU-friendly) */
    .wordmark-wrap {
      position:relative;
      height:clamp(52px, 11vw, 96px);
      transition:height .35s cubic-bezier(.22,1,.36,1);
      overflow:hidden;
    }
    .wordmark {
      position:absolute; inset:0;
      display:flex; align-items:center; justify-content:center;
      font-family:var(--heading); color:var(--text); line-height:1;
      white-space:nowrap; padding:0 16px;
      transition:opacity .25s ease;
    }
    .wordmark-big   { font-size:clamp(30px, 9vw, 76px); letter-spacing:1.5px; text-transform:uppercase; opacity:1; }
    .wordmark-small { font-size:22px; letter-spacing:.3px; opacity:0; }

    .masthead .tagline {
      display:flex; align-items:center; justify-content:center; gap:14px;
      padding:10px 24px 14px;
      max-height:46px; opacity:1; overflow:hidden;
      transition:max-height .3s cubic-bezier(.22,1,.36,1), opacity .2s ease, padding .3s cubic-bezier(.22,1,.36,1);
    }
    .masthead .tagline .rule { width:36px; height:1px; background:var(--border2); }
    .masthead .tagline .text { font-family:var(--heading); font-style:italic; font-size:14px; color:var(--muted); letter-spacing:.5px; }

    /* Collapsed state */
    .masthead.scrolled .wordmark-wrap { height:40px; }
    .masthead.scrolled .wordmark-big   { opacity:0; }
    .masthead.scrolled .wordmark-small { opacity:1; }
    .masthead.scrolled .tagline { max-height:0; opacity:0; padding:0 24px; }

    /* Ticker tape — slightly warmer/lighter than the tabs bar (#1A1614)
       so the two dark strips read as distinct rows. A claret hairline
       underneath seals the separation. */
    .masthead .tape {
      background:#2A211D; color:var(--bg);
      overflow:hidden;
      border-top:1px solid rgba(255,241,224,.08);
      border-bottom:2px solid var(--accent);
      transition:padding .3s cubic-bezier(.22,1,.36,1), border-bottom-width .2s ease;
    }
    /* Compact (but visible) when scrolled — smaller text, tighter padding.
       The claret hairline shrinks to 1px so it reads as a seam not a rule. */
    .masthead.scrolled .tape { border-bottom-width:1px; }
    .masthead.scrolled .tape-track {
      padding:5px 0;
      animation-duration:240s;
    }
    .masthead.scrolled .tape-item { font-size:11px; letter-spacing:.4px; gap:6px; }
    .masthead .tape-track {
      display:flex; gap:32px; padding:10px 0;
      white-space:nowrap;
      animation:mh-marquee 180s linear infinite;
      width:max-content;
      transition:padding .3s cubic-bezier(.22,1,.36,1);
    }
    .masthead .tape:hover .tape-track { animation-play-state:paused; }
    @keyframes mh-marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
    .masthead .tape-item {
      font-family:var(--mono); font-size:13px; font-weight:600;
      letter-spacing:.6px;
      display:inline-flex; align-items:center; gap:8px;
    }
    .masthead .tape-item .t-sym { color:var(--bg); }
    .masthead .tape-item .t-pct { font-weight:700; font-variant-numeric:tabular-nums; }
    .masthead .tape-item .up   { color:#5EC5C9; }
    .masthead .tape-item .down { color:#E88AA4; }
    .masthead .tape-item .flat { color:var(--dim); }

    /* New tab bar — overrides .dash-tabs styling when inside the masthead */
    .masthead .dash-tabs {
      background:#1A1614;
      display:flex; gap:0;
      margin:0; padding:0;
      border-bottom:none;
      position:static;
      top:auto;
    }
    .masthead .dash-tab {
      flex:1;
      background:none; border:none; cursor:pointer;
      padding:11px 16px;
      font-family:var(--heading); font-size:17px;
      color:rgba(255,241,224,.45);
      letter-spacing:.3px;
      position:relative;
      transition:color .15s, padding .3s cubic-bezier(.22,1,.36,1), font-size .3s cubic-bezier(.22,1,.36,1);
      border-right:1px solid rgba(255,241,224,.08);
      margin-bottom:0;
      text-transform:none;
    }
    .masthead .dash-tab:last-child { border-right:none; }
    .masthead .dash-tab.active {
      color:var(--bg);
      background:transparent;
      border-bottom:none;
    }
    .masthead .dash-tab.active::after {
      content:''; position:absolute; bottom:0; left:50%;
      transform:translateX(-50%);
      width:44px; height:2px; background:var(--accent);
      transition:width .3s cubic-bezier(.22,1,.36,1), height .3s cubic-bezier(.22,1,.36,1);
    }
    .masthead .dash-tab:not(.active):hover {
      color:rgba(255,241,224,.7);
      background:transparent;
    }
    /* Compact further when the masthead is in its scrolled state */
    .masthead.scrolled .dash-tab {
      padding:7px 16px;
      font-size:14px;
    }
    .masthead.scrolled .dash-tab.active::after {
      width:32px; height:2px;
    }

    /* Your Position strip (signed-in only) */
    .your-position {
      padding:18px 20px;
      border:1px solid var(--border);
      background:var(--surface2);
      border-radius:var(--radius);
      margin-bottom:16px;
    }
    .yp-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
    .yp-left .eyebrow { font-family:var(--mono); font-size:10px; letter-spacing:1.6px; color:var(--accent); text-transform:uppercase; margin-bottom:6px; font-weight:700; }
    .yp-left .rank { font-family:var(--heading); font-size:40px; line-height:1; display:flex; align-items:baseline; gap:8px; }
    .yp-left .rank .of { font-size:18px; color:var(--muted); font-family:'Inter',sans-serif; font-weight:400; }
    .yp-right { text-align:right; }
    .yp-right .pct { font-family:var(--heading); font-size:40px; line-height:1; font-variant-numeric:tabular-nums; }
    .yp-right .pct.pos { color:var(--green); }
    .yp-right .pct.neg { color:var(--accent); }
    .yp-right .val { font-family:var(--mono); font-size:13px; color:var(--muted); margin-top:4px; }
    .yp-btn {
      display:inline-block;
      background:var(--accent); color:#fff;
      border:none; padding:12px 18px; margin-top:14px;
      font-family:var(--mono); font-size:11px;
      letter-spacing:1.4px; text-transform:uppercase; font-weight:700;
      cursor:pointer; border-radius:2px;
    }
    .yp-btn:hover { background:var(--accent2); }

    /* Moments strip (rank swap + big mover) */
    .moments {
      display:grid; grid-template-columns:1fr 1fr;
      border:1px solid var(--border); border-radius:var(--radius);
      overflow:hidden;
      margin-bottom:22px;
    }
    .moment { padding:16px 18px; background:var(--surface); }
    .moment + .moment { border-left:1px solid var(--border); }
    .moment .eyebrow {
      font-family:var(--mono); font-size:10px; letter-spacing:1.6px;
      color:var(--accent); text-transform:uppercase; font-weight:700;
      margin-bottom:8px;
      display:flex; align-items:center; gap:6px;
    }
    .moment .headline {
      font-family:var(--heading); font-size:22px; line-height:1.15;
      color:var(--text); letter-spacing:-.2px;
      margin-bottom:8px;
      text-wrap:balance;
    }
    .moment .pct {
      font-family:var(--heading); font-size:26px; line-height:1;
      font-variant-numeric:tabular-nums;
    }
    .moment .pct.pos { color:var(--green); }
    .moment .pct.neg { color:var(--accent); }

    /* Mobile tweaks */
    @media (max-width:540px) {
      .masthead .dateline { padding:8px 14px 5px; font-size:10px; letter-spacing:1px; }
      .masthead .dateline-left { gap:10px; }
      .masthead .dash-tab { font-size:15px; padding:10px 8px; }
      .masthead .dash-tab.active::after { width:32px; }
      .masthead.scrolled .dash-tab { font-size:13px; padding:6px 8px; }
      .masthead.scrolled .dash-tab.active::after { width:26px; }
      .wordmark-wrap { height:clamp(48px, 13vw, 80px); }
      .wordmark-small { font-size:19px; }
      .masthead .tagline { padding:8px 20px 12px; }
      .masthead .tagline .text { font-size:12px; }
      .yp-left .rank { font-size:32px; }
      .yp-right .pct { font-size:30px; }
      .moment .headline { font-size:17px; }
      .moment .pct { font-size:22px; }
      body.game-live #game-content > :not(.masthead):not(#winner-banner) {
        padding-left:14px; padding-right:14px;
      }
    }