/* Propy Market — propy/web/tv.css (plan P7.8, the spectator TV: /tv).
   Dark only. The Propy tokens under their --v2-* names (the welcome page's values); the type scale rides the viewport
   HEIGHT (a 16:9 screen: 1920×1080 first, 1280×720, a phone in landscape) with clamp() floors, so nothing is tiny at
   5 metres. No light theme, no media query for colour: a bar wall is dark. */
:root{
  --v2-bg0:#0b0e13;--v2-bg1:#1c1f27;--v2-bg2:#272b34;--v2-bg3:#323640;
  --v2-text:#e9e7e2;--v2-muted:#8e8c86;--v2-faint:#5c5a55;--tv-label:#a7a49d;--tv-silver:#f2f3f5;
  --v2-gold:#d4af37;--v2-gold-hi:#e8c55a;--v2-gold-dim:rgba(212,175,55,.12);
  --v2-blue:#2f9df2;--v2-blue-dim:rgba(47,157,242,.14);
  --v2-gain:#2fbf71;--v2-gain-dim:rgba(47,191,113,.12);--v2-loss:#e5484d;--v2-loss-dim:rgba(229,72,77,.14);
  --v2-line:rgba(233,231,226,.07);--v2-line-strong:rgba(233,231,226,.14);
  --v2-serif:'IBM Plex Serif',Georgia,serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--v2-bg0);color:var(--v2-text);font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.gold{color:var(--v2-gold)}.blue{color:var(--v2-blue)}.gain{color:var(--v2-gain)}.loss{color:var(--v2-loss)}.muted{color:var(--v2-muted)}
[hidden]{display:none!important}

/* ---- the frame: a header row and one screen */
.tv{display:grid;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);width:100vw;max-width:100%;height:100vh;height:100dvh;padding:1.6vh 2.4vw 2vh;gap:1.6vh;overflow:hidden}
.tv-top{display:flex;align-items:center;gap:1.6vw;min-height:12vh;min-width:0;overflow:hidden}
.tv-brand{display:flex;align-items:center;gap:.8vw;font-size:clamp(16px,3.2vh,44px);font-weight:700;letter-spacing:.06em;color:var(--tv-silver);white-space:nowrap}
.tv-dot{width:1.6vh;height:1.6vh;min-width:8px;min-height:8px;border-radius:50%;background:var(--v2-faint);display:inline-block}
.tv-dot.on{background:var(--v2-gain);box-shadow:0 0 1.2vh rgba(47,191,113,.7)}
.tv-round{font-size:clamp(14px,2.8vh,38px);font-weight:600;color:var(--v2-muted);letter-spacing:.04em;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tv-round b{color:var(--v2-text);font-weight:600}
.tv-chip{display:inline-flex;align-items:center;padding:.6vh 1vw;border-radius:999px;background:var(--v2-bg2);font:600 clamp(11px,2vh,26px) 'IBM Plex Mono',monospace;color:var(--v2-text);letter-spacing:.06em;white-space:nowrap}
.tv-chip.gold{background:var(--v2-gold-dim);color:var(--v2-gold)}
.tv-chip.warn{background:var(--v2-loss-dim);color:var(--v2-loss)}
.tv-chip.gain{background:var(--v2-gain-dim);color:var(--v2-gain)}
.tv-sponsor{display:flex;align-items:center;gap:1.2vw;padding:1.2vh 1.4vw;border-radius:1.6vh;border:1px solid rgba(212,175,55,.35);background:var(--v2-gold-dim);font-size:clamp(14px,3.2vh,42px);font-weight:600;color:var(--v2-text);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;align-self:flex-start;max-width:100%;flex-shrink:0}
.tv-sponsor .k{font-size:.55em;font-weight:700;letter-spacing:.16em;color:var(--tv-label)}
.tv-sponsor img{height:5vh;max-width:16vw;object-fit:contain;display:block}
.tv-sponsor b{color:var(--v2-gold);font-weight:600}
.tv-center .tv-sponsor{align-self:center}
.tv-spk{margin-left:auto;font:600 clamp(11px,2vh,26px) 'IBM Plex Sans',system-ui,sans-serif;color:var(--v2-muted);background:transparent;border:1px solid var(--v2-line-strong);border-radius:999px;padding:.6vh 1vw;cursor:pointer;white-space:nowrap}
.tv-spk.on{color:var(--v2-text);border-color:rgba(212,175,55,.5)}
.tv-spk[hidden]+.tv-qr,.tv-offline[hidden]~.tv-qr{margin-left:auto}
.tv-qr{margin-left:auto;display:flex;align-items:center;gap:1vw}
.tv-spk:not([hidden])~.tv-qr{margin-left:0}
.tv-qr-box{width:11vh;height:11vh;min-width:56px;min-height:56px;border-radius:1vh;background:#fff;overflow:hidden;display:flex}
.tv-qr-box svg{width:100%;height:100%;display:block}
.tv-qr-u{font-size:clamp(12px,2.4vh,32px);color:var(--v2-muted);white-space:nowrap}

/* ---- the screens: one is shown, by the frame's data-screen */
.tv-screen{display:none;min-height:0}
.tv[data-screen="live"] #tv-live{display:grid}
.tv[data-screen="settled"] #tv-settled,.tv[data-screen="next"] #tv-next,.tv[data-screen="waiting"] #tv-wait{display:flex}
.tv-center{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2.4vh}

/* ---- live: the ticker, the bell, the money on the left; the board on the right */
.tv-live{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:2.4vw;min-height:0}
.tv-left{display:flex;flex-direction:column;gap:1.2vh;min-height:0;min-width:0;overflow:hidden}
.tv-sym{display:flex;align-items:baseline;gap:1.6vw;flex-wrap:wrap;min-width:0}
.tv-symbol{font-size:clamp(26px,7.6vh,104px);font-weight:700;letter-spacing:-.01em;line-height:1}
.tv-price{font-size:clamp(26px,7.6vh,104px);font-weight:600;line-height:1;white-space:nowrap}
.tv-price.stale{color:var(--v2-muted)}
.tv-move{font-size:clamp(16px,4vh,54px);font-weight:600;color:var(--v2-muted);line-height:1.1}
.tv-k{font-size:clamp(11px,2vh,26px);font-weight:700;letter-spacing:.16em;color:var(--tv-label)}
.tv-sub{font-size:clamp(12px,2.3vh,30px);color:var(--v2-muted);line-height:1.3}
.tv-bell{display:flex;flex-direction:column;gap:.4vh;margin-top:.4vh}
.tv-count{font-size:clamp(52px,18vh,250px);line-height:.95;font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.tv-count.bell{color:var(--v2-gold)}
.tv-cells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.2vh 1vw}
.tv-cell{background:var(--v2-bg1);border:1px solid var(--v2-line);border-radius:1.6vh;padding:1.2vh 1.1vw;min-width:0;grid-column:span 2}
.tv-cell.gold{grid-column:span 4}
.tv-cell .k{font-size:clamp(10px,1.8vh,24px);font-weight:700;letter-spacing:.14em;color:var(--tv-label)}
.tv-cell .v{font-size:clamp(18px,3.9vh,52px);font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-cell.gold{background:var(--v2-gold-dim);border-color:rgba(212,175,55,.4)}
.tv-cell.gold .v{color:var(--v2-gold);font-size:clamp(22px,5vh,68px);line-height:1.02}
.tv-gauge-wrap{display:flex;flex-direction:column;gap:.8vh;margin-top:auto;flex-shrink:0}
.tv-gauge-labels{display:flex;justify-content:space-between;align-items:baseline;gap:1vw;font-size:clamp(14px,3vh,40px);font-weight:600}
.tv-gauge{display:flex;height:2.4vh;min-height:8px;border-radius:1.2vh;overflow:hidden;background:var(--v2-bg3)}
.tv-gauge .l{background:var(--v2-gold);width:0}
.tv-gauge .s{background:var(--v2-blue);width:0}
.tv-right{background:var(--v2-bg1);border:1px solid var(--v2-line);border-radius:2vh;padding:1.8vh 1.4vw;display:flex;flex-direction:column;gap:.8vh;min-height:0;min-width:0}
.tv-board-head{display:flex;justify-content:space-between;align-items:baseline;gap:1vw;padding-bottom:.6vh;border-bottom:1px solid var(--v2-line)}
.tv-board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}
.tv-brow{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto auto;align-items:center;gap:1vw;font-size:clamp(14px,3.5vh,46px);font-weight:600;padding:.55vh 0;border-bottom:1px solid var(--v2-line);line-height:1.25}
.tv-brow:last-child{border-bottom:0}
.tv-brow .rk{color:var(--v2-muted);font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.tv-brow .u{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-brow .u .lb{color:var(--v2-muted);font-weight:500;font-size:.72em;margin-left:.4em}
.tv-brow .ret{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.tv-brow .pz{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--v2-gold);text-align:right;min-width:4.6em;font-size:.78em;white-space:nowrap}
.tv-brow .pz:empty{min-width:4.6em}
.tv-brow.lead{color:var(--v2-gold)}
.tv-brow.lead .rk{color:var(--v2-gold)}
.tv-brow.bot{color:var(--v2-muted)}
.tv-brow.bot .ret{color:var(--v2-muted)}
.tv-brow.out{opacity:.5}
.tv-empty{font-size:clamp(14px,3vh,40px);color:var(--v2-muted);padding:2vh 0}

/* ---- settled: the podium */
.tv-settled-title{font-size:clamp(28px,8vh,110px);font-weight:700;letter-spacing:-.01em;line-height:1}
.tv-settled-line{font-size:clamp(14px,3.4vh,46px);color:var(--v2-text)}
.tv-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6vw;width:min(92vw,170vh);align-items:end;margin-top:1vh}
.tv-pod{background:var(--v2-bg1);border:1px solid var(--v2-line);border-radius:2vh;padding:2.4vh 1.6vw;display:flex;flex-direction:column;gap:.8vh;min-width:0}
.tv-pod .rk{font-size:clamp(12px,2.2vh,30px);font-weight:700;letter-spacing:.16em;color:var(--tv-label)}
.tv-pod .u{font-size:clamp(20px,5vh,66px);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-pod .ret{font-size:clamp(18px,4.2vh,56px);font-weight:600}
.tv-pod .pz{font-size:clamp(22px,6vh,80px);font-weight:600;color:var(--v2-gold)}
.tv-pod.first{background:var(--v2-gold-dim);border-color:rgba(212,175,55,.5);padding-top:4vh;padding-bottom:4vh}
.tv-pod.first .u{color:var(--v2-gold)}
.tv-pod.bot{opacity:.6}
.tv-settled-foot{margin-top:1vh}

/* ---- between rounds */
.tv-next-count{font-size:clamp(64px,24vh,330px)}
.tv-next-title{font-size:clamp(20px,5vh,66px);font-weight:700}
.tv-wait-title{font-size:clamp(24px,6vh,80px);font-weight:700;color:var(--v2-muted)}

/* ---- the season: the month's top ten (alternates with NEXT ROUND between rounds; ?screen=season pins it).
   The tier pills carry the app's own .pc-tier colours. */
.tv[data-screen="season"] #tv-season{display:flex}
.tv-season{flex-direction:column;align-items:center;gap:1.2vh;min-height:0;width:min(96vw,200vh);margin:0 auto;text-align:center}
.tv-season-head{display:flex;flex-direction:column;align-items:center;gap:.6vh;flex-shrink:0}
.tv-season-title{font-size:clamp(24px,5.6vh,80px);font-weight:700;letter-spacing:-.01em;line-height:1}
.tv-season-line{font-size:clamp(14px,3.2vh,42px);color:var(--v2-text)}
.tv-season-pool{font-size:clamp(14px,3vh,40px);font-weight:600;color:var(--v2-gold)}
.tv-season-board{list-style:none;margin:0;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;width:100%;overflow:hidden;background:var(--v2-bg1);border:1px solid var(--v2-line);border-radius:2vh;padding:1vh 1.6vw}
.tv-srow{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto auto auto auto;align-items:center;gap:1.4vw;font-size:clamp(14px,3.1vh,42px);font-weight:600;padding:.4vh 0;border-bottom:1px solid var(--v2-line);line-height:1.25;text-align:left}
.tv-srow:last-child{border-bottom:0}
.tv-srow .rk{color:var(--v2-muted);font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.tv-srow .u{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-srow .pts{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;min-width:5.2em}
.tv-srow .tv-tier{min-width:6em;text-align:center}
.tv-season.empty{justify-content:center}
.tv-season.empty .tv-season-board{display:none}
.tv-srow .wp{color:var(--v2-muted);font-weight:500;font-size:.72em;white-space:nowrap;text-align:right;min-width:9em}
.tv-srow .pz{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--v2-gold);text-align:right;min-width:4.6em;font-size:.78em;white-space:nowrap}
.tv-srow.lead{color:var(--v2-gold)}
.tv-srow.lead .rk{color:var(--v2-gold)}
.tv-tier{display:inline-block;padding:.2vh .8em;border-radius:999px;font:600 .55em/1.6 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(200,206,218,.3);color:var(--v2-text);justify-self:start}
.tv-tier.bronze{color:#cd7f32;border-color:rgba(205,127,50,.5)}
.tv-tier.silver{color:#c8ced8;border-color:rgba(200,206,218,.55)}
.tv-tier.gold{color:#d4af37;border-color:rgba(212,175,55,.6)}
.tv-tier.diamond{color:#8fd3ff;border-color:rgba(143,211,255,.6)}
.tv-season-rule{display:flex;gap:2.4vw;flex-wrap:wrap;justify-content:center;flex-shrink:0}
.tv-season-foot{flex-shrink:0}

/* ---- the sound gate: a small card in the corner, never over the floor */
.tv-gate{position:fixed;right:2.4vw;bottom:2.4vh;z-index:50;display:flex;flex-direction:column;gap:1.2vh;padding:2vh 1.6vw;border-radius:2vh;background:rgba(28,31,39,.96);border:1px solid var(--v2-line-strong);box-shadow:0 2vh 5vh rgba(0,0,0,.5);max-width:min(92vw,60vh)}
.tv-gate p{margin:0;font-size:clamp(13px,2.4vh,32px);color:var(--v2-text)}
.tv-gate-btns{display:flex;gap:1vw;flex-wrap:wrap;align-items:center}
.tv-gate button{font:600 clamp(13px,2.4vh,32px) 'IBM Plex Sans',system-ui,sans-serif;color:#15130c;background:var(--v2-gold);border:0;border-radius:999px;padding:.8vh 1.6vw;cursor:pointer}
.tv-gate button.skip{background:transparent;color:var(--v2-muted);text-decoration:underline;font-weight:500}
.tv-gate button:focus-visible,.tv-spk:focus-visible{outline:2px solid var(--v2-gold);outline-offset:2px}

/* ---- narrow / phone in landscape: one column, the board under the money */
@media (max-aspect-ratio: 4/3){
  .tv-live{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);overflow:auto}
  .tv-count{font-size:clamp(44px,14vh,200px)}
  .tv-cells{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tv-srow{grid-template-columns:2.2em minmax(0,1fr) auto auto auto}
  .tv-srow .wp{display:none}
}
@media (max-height: 460px){
  .tv{padding:1.2vh 2vw 1.4vh;gap:1vh}
  .tv-top{min-height:0}
  .tv-qr-box{width:9vh;height:9vh}
  .tv-brow{padding:.3vh 0}
  .tv-srow{padding:.2vh 0}
  .tv-season-rule{display:none}
  .tv-podium{gap:1vw}
  .tv-count{font-size:clamp(40px,17vh,200px)}
  .tv-cells{grid-template-columns:1.5fr 1fr 1fr 1fr .9fr}
  .tv-cell,.tv-cell.gold{grid-column:auto}
  .tv-cell.gold .v{font-size:clamp(18px,4.2vh,52px)}
}