/* interact.css (2026-10-19): interactivity pass from Research's UI-TASTE guide + Bencho (MIT, © 2026 Lorenzo Cabra) patterns,
   re-implemented in vanilla CSS/JS (no Bencho code copied). Tokens adapted to Broadcast Pro dark; Gamecast keeps its own accent. */
:root{/* Slate logo green: the ONE accent (public/slate-logo.svg lit-dot colour) */--slate-green:#3dff7a;--slate-green-rgb:61,255,122;--slate-green-ink:#04130a;--slate-green-hi:color-mix(in srgb,var(--slate-green) 78%,#fff);--slate-green-lo:color-mix(in srgb,var(--slate-green) 82%,#000);--gc-s1:4px;--gc-s2:8px;--gc-s3:12px;--gc-s4:16px;--gc-s5:24px;
 --gc-r-sm:6px;--gc-r-md:10px;--gc-r-pill:999px;
 --gc-t-2xs:11px;--gc-t-xs:12px;--gc-t-sm:13px;--gc-t-md:14px;
 --gc-bg:#0b0e13;--gc-surface:#161b22;--gc-surface-2:#1c222b;--gc-surface-3:#232a35;
 --gc-ink:#e6edf3;--gc-ink-2:#b4bcc6;--gc-ink-3:#9aa5b4;--gc-ink-4:#8b96a5;
 --gc-hair:rgba(255,255,255,.08);--gc-accent:var(--slate-green);--gc-pos:#34d17a;--gc-neg:#f87171;--gc-warn:#f5c542;--gc-live:#ef4444;
 --gc-elev-0:0 0 0 1px var(--gc-hair);--gc-elev-2:0 0 0 1px var(--gc-hair),0 10px 28px rgba(0,0,0,.5);
 --gc-focus:0 0 0 2px var(--gc-bg),0 0 0 4px var(--gc-accent);
 --gc-fast:160ms;--gc-base:220ms;--gc-ease:cubic-bezier(.22,1,.36,1)}
/* ---------- tabular numbers everywhere a live number lives ---------- */
.big,.gc .sc,.bookt td,.oddst td,.krow b,.wpbig,.ls td,.sbar .lab,.pyds,#fstatus,.gcwp,.gcscrub{font-variant-numeric:tabular-nums}
/* ---------- hover + focus states ---------- */
body.paper :is(button,a,[tabindex],input):focus-visible{outline:none;box-shadow:var(--gc-focus);border-radius:var(--gc-r-sm)}
body.paper #fshell .gc{transition:transform var(--gc-fast) var(--gc-ease),background-color var(--gc-fast) var(--gc-ease),box-shadow var(--gc-fast) var(--gc-ease)}
body.paper #fshell .gc:hover{transform:translateY(-1px);background-color:var(--gc-surface-2)}
body.paper #fshell .gc:focus-visible{box-shadow:var(--gc-focus)}
body.paper :is(.fi,.dseg,.chip,.rzctl button,.gcctl button,.rtools button,.seg button,.tb-lg button){transition:background-color var(--gc-fast) var(--gc-ease),color var(--gc-fast) var(--gc-ease),border-color var(--gc-fast) var(--gc-ease),filter var(--gc-fast) var(--gc-ease)}
body.paper .fi:hover{background:var(--gc-surface-2)}body.paper .dseg:hover{filter:brightness(1.18)}
body.paper :is(.rzctl,.gcctl) button:hover{color:var(--gc-ink);border-color:#3a4554}
body.paper .bookt tbody tr:hover td{background:rgba(255,255,255,.03)}
/* ---------- value-change flashes: colour only the delta ---------- */
.gcd{display:inline-block;margin-left:3px;font:700 11px/1 Inter,system-ui,sans-serif;padding:2px 4px;border-radius:var(--gc-r-pill);vertical-align:1px;white-space:nowrap;animation:gcdin var(--gc-base) var(--gc-ease) both}
.gcd.up{color:var(--gc-pos);background:rgba(52,209,122,.12)}.gcd.dn{color:var(--gc-neg);background:rgba(248,113,113,.12)}
.gcflash-up{animation:gcfu 1.4s var(--gc-ease) 1}.gcflash-dn{animation:gcfd 1.4s var(--gc-ease) 1}
@keyframes gcfu{0%{background-color:rgba(52,209,122,.32)}100%{background-color:transparent}}
@keyframes gcfd{0%{background-color:rgba(248,113,113,.32)}100%{background-color:transparent}}
@keyframes gcdin{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.big{position:relative}.big .gcd{position:absolute;top:-4px;right:-26px;font-size:12px}
/* ---------- persistent win-probability bar (width animates from the old value) ---------- */
.gcwp{margin:2px 0 10px}.gcwp .tr{display:flex;height:8px;border-radius:var(--gc-r-pill);overflow:hidden;background:var(--gc-surface-3);box-shadow:var(--gc-elev-0)}
.gcwp .tr i{display:block;height:100%;transition:flex-grow var(--gc-base) var(--gc-ease)}
.gcwp .lb{display:flex;justify-content:space-between;align-items:center;margin-top:5px;font:600 var(--gc-t-xs) Inter,system-ui,sans-serif;color:var(--gc-ink-3)}
.gcwp .lb b{color:var(--gc-ink);font-weight:700}.gcwp .src{font-size:var(--gc-t-2xs);color:var(--gc-ink-4)}
/* ---------- rolling digits ---------- */
.gcroll{display:inline-flex}.gcroll .col{display:inline-block;height:1.2em;overflow:hidden;position:relative;line-height:1.2em;
 -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.gcroll .strip{display:flex;flex-direction:column;transition:transform var(--gc-base) var(--gc-ease)}.gcroll .strip span{height:1.2em;text-align:center}
.gcroll .sep{display:inline-block;padding:0 1px}
/* ---------- dynamic-island live pill ---------- */
#gcisland{position:fixed;top:44px;left:50%;transform:translateX(-50%);z-index:60;pointer-events:none}
#gcisland .pill{pointer-events:auto;position:relative;background:#000;color:#fff;border:0;border-radius:var(--gc-r-pill);box-shadow:0 0 0 1px rgba(255,255,255,.10),0 10px 30px rgba(0,0,0,.55);
 overflow:hidden;cursor:pointer;width:var(--w,180px);height:var(--h,26px);transition:width var(--gc-base) var(--gc-ease),height var(--gc-base) var(--gc-ease),border-radius var(--gc-base) var(--gc-ease);font:500 var(--gc-t-xs) Inter,system-ui,sans-serif;padding:0;text-align:left}
#gcisland .pill[hidden]{display:none}
#gcisland .cmp,#gcisland .opn{position:absolute;inset:0;transition:opacity var(--gc-fast) var(--gc-ease)}
#gcisland .cmp{display:flex;align-items:center;gap:8px;padding:0 12px;white-space:nowrap}
#gcisland .opn{opacity:0;pointer-events:none;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
#gcisland.open .cmp{opacity:0;pointer-events:none}#gcisland.open .opn{opacity:1;pointer-events:auto}#gcisland.open .pill{border-radius:var(--gc-r-md);cursor:default}
#gcisland .dot{width:7px;height:7px;border-radius:50%;background:var(--c,#ef4444);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c,#ef4444) 30%,transparent)}
#gcisland .lab{font-weight:700;letter-spacing:var(--gc-track-label,.06em);color:var(--c,#ef4444);font-size:var(--gc-t-2xs)}
#gcisland .gm{color:#fff;overflow:hidden;text-overflow:ellipsis;font-weight:600}#gcisland .sc{color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums;margin-left:auto}
#gcisland .more{color:rgba(255,255,255,.5);font-size:var(--gc-t-2xs)}
#gcisland .hd{display:flex;align-items:center;justify-content:space-between;font-size:var(--gc-t-2xs);color:rgba(255,255,255,.5);letter-spacing:var(--gc-track-label,.06em)}
#gcisland .hd button{background:none;border:0;color:rgba(255,255,255,.6);font-size:14px;cursor:pointer;padding:0 4px;border-radius:var(--gc-r-sm)}
#gcisland .it{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--gc-r-md);background:rgba(255,255,255,.05)}
#gcisland .it .tx{flex:1;min-width:0}#gcisland .it .tx div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gcisland .it .ex{color:rgba(255,255,255,.55);font-size:var(--gc-t-2xs)}
#gcisland .it .big2{font:700 18px "Barlow Condensed",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:var(--gc-track-label,.06em)}
#gcisland .it button{background:var(--gc-accent);color:var(--slate-green-ink);border:0;border-radius:var(--gc-r-pill);padding:4px 10px;font:600 var(--gc-t-2xs) Inter,sans-serif;cursor:pointer;flex:none}
#gcisland .it button:hover{filter:brightness(1.12)}
#gcisland .ft{font-size:11px;color:rgba(255,255,255,.4)}
#gcisland.bloom .pill{box-shadow:0 0 0 1px var(--c,#ef4444),0 0 22px color-mix(in srgb,var(--c,#ef4444) 45%,transparent),0 10px 30px rgba(0,0,0,.55)}
body.compact #gcisland{top:auto;bottom:10px}
body.compact #rzbanner{bottom:46px}
#gcisland,#gctoasts,#gchelp{user-select:none;-webkit-user-select:none}
.gcscrub .row{flex-wrap:wrap}
/* ---------- toast stack (tucked; spreads into a list on hover/focus) ---------- */
#gctoasts{position:fixed;right:16px;bottom:16px;width:320px;z-index:58;pointer-events:none}
#gctoasts .t{position:absolute;right:0;bottom:0;width:100%;box-sizing:border-box;pointer-events:auto;background:var(--gc-surface-2);color:var(--gc-ink);border-radius:var(--gc-r-md);box-shadow:var(--gc-elev-2);
 padding:10px 12px 10px 14px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;transition:transform var(--gc-base) var(--gc-ease),opacity var(--gc-base) var(--gc-ease);transform-origin:50% 100%;border-left:3px solid var(--c,var(--gc-accent))}
#gctoasts .t.in{opacity:0;transform:translateY(16px) scale(.98)}#gctoasts .t.out{opacity:0;transform:translateX(24px)!important}
#gctoasts .tt{font:700 var(--gc-t-xs) Inter,system-ui,sans-serif;letter-spacing:var(--gc-track-label,.06em);color:var(--c,var(--gc-accent));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gctoasts .tb{grid-column:1;font:500 var(--gc-t-sm) Inter,system-ui,sans-serif;color:var(--gc-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gctoasts .ts{grid-column:1;font:400 var(--gc-t-2xs) Inter,system-ui,sans-serif;color:var(--gc-ink-4)}
#gctoasts .ta{grid-row:1/4;grid-column:2;display:flex;flex-direction:column;gap:6px;align-items:flex-end;justify-content:center}
#gctoasts .ta button{background:var(--gc-surface-3);color:var(--gc-ink);border:0;border-radius:var(--gc-r-pill);padding:4px 10px;font:600 var(--gc-t-2xs) Inter,sans-serif;cursor:pointer}
#gctoasts .ta button.x{background:none;color:var(--gc-ink-4);padding:2px 6px;font-size:13px}#gctoasts .ta button:hover{color:var(--slate-green-ink);background:var(--gc-accent)}#gctoasts .ta button.x:hover{background:var(--gc-surface-3)}
body.compact #gctoasts{right:8px;left:8px;width:auto;bottom:84px}
/* ---------- play scrubber ---------- */
.gcscrub{margin-top:10px;padding:10px 12px;border-radius:var(--gc-r-md);background:var(--gc-surface);box-shadow:var(--gc-elev-0);user-select:none;-webkit-user-select:none}
.gcscrub .row{display:flex;align-items:center;gap:8px}
.gcscrub .ttl{font:700 var(--gc-t-2xs) "Barlow Condensed",sans-serif;letter-spacing:var(--gc-track-label,.06em);text-transform:uppercase;color:var(--gc-ink-4)}
.gcscrub .ttl b{color:var(--gc-warn);font-weight:700}
.gcscrub .rd{margin-left:auto;font:700 16px "Barlow Condensed",sans-serif;color:var(--gc-ink);letter-spacing:var(--gc-track-label,.06em);display:flex;gap:6px;align-items:baseline}
.gcscrub .rd small{font:500 var(--gc-t-2xs) Inter,sans-serif;color:var(--gc-ink-4)}
.gcscrub .trk{position:relative;height:30px;margin:8px 0 6px;cursor:grab;touch-action:none;border-radius:var(--gc-r-sm)}
.gcscrub .trk:active{cursor:grabbing}
.gcscrub .trk::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--gc-hair);transform:translateY(-50%)}
.gcscrub .tk{position:absolute;top:8px;width:2px;height:14px;margin-left:-1px;border-radius:6px;background:var(--c,#555);opacity:.45;transition:opacity var(--gc-fast),transform var(--gc-fast) var(--gc-ease)}
.gcscrub .tk.sc{height:22px;top:4px;opacity:.9;background:var(--gc-warn)}.gcscrub .tk.to{height:22px;top:4px;opacity:.9;background:var(--gc-neg)}
.gcscrub .tk.near{opacity:1;transform:scaleY(1.25)}
.gcscrub .hd{position:absolute;top:0;width:2px;height:30px;margin-left:-1px;background:#fff;border-radius:6px;box-shadow:0 0 0 2px rgba(0,0,0,.5);pointer-events:none;transition:left var(--gc-base) var(--gc-ease)}
.gcscrub .hd.drag{transition:none}
.gcscrub .tip{position:absolute;bottom:34px;transform:translateX(-50%);max-width:340px;background:#000;color:#fff;border-radius:var(--gc-r-sm);padding:6px 9px;font:500 var(--gc-t-2xs)/1.35 Inter,sans-serif;box-shadow:var(--gc-elev-2);pointer-events:none;opacity:0;transition:opacity var(--gc-fast);white-space:normal;width:max-content;z-index:6}
.gcscrub .tip.on{opacity:1}.gcscrub .tip b{color:var(--gc-warn)}
.gcscrub .btns{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.gcscrub .btns button{background:var(--gc-surface-3);color:var(--gc-ink-2);border:0;border-radius:var(--gc-r-pill);padding:5px 11px;font:600 var(--gc-t-2xs) Inter,sans-serif;cursor:pointer;min-height:26px}
.gcscrub .btns button:hover{color:#fff;background:#2c3542}.gcscrub .btns button.pri{background:var(--gc-accent);color:var(--slate-green-ink)}
.gcscrub .btns .note{text-transform:none;letter-spacing:0;margin-left:auto;font:400 11px Inter,sans-serif;color:var(--gc-ink-4)}
.gcscrub .trk:focus-visible{box-shadow:var(--gc-focus)}
/* ---------- top-bar extras + shortcut sheet ---------- */
.gcctl{display:flex;gap:4px;margin-left:0}.gcctl button{background:#161b22;border:1px solid #2b3442;color:#94a3b8;border-radius:6px;padding:4px 8px;font:700 11px Inter,system-ui;cursor:pointer}
.gcctl button.on{color:#fff;border-color:var(--gc-accent);background:#0f2547}
#gchelp{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity var(--gc-fast) var(--gc-ease)}
#gchelp.on{opacity:1;pointer-events:auto}
#gchelp .bx{background:var(--gc-surface);color:var(--gc-ink);border-radius:10px;box-shadow:var(--gc-elev-2);padding:20px 24px;min-width:360px;transform:translateY(6px) scale(.98);transition:transform var(--gc-base) var(--gc-ease)}
#gchelp.on .bx{transform:none}#gchelp h3{margin:0 0 12px;font:700 18px "Barlow Condensed",sans-serif;letter-spacing:var(--gc-track-label,.06em)}
#gchelp dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font:400 var(--gc-t-sm) Inter,sans-serif}
#gchelp dt{display:flex;gap:4px}#gchelp kbd{font:600 var(--gc-t-2xs) ui-monospace,Menlo,monospace;background:var(--gc-surface-3);border-radius:var(--gc-r-sm);padding:2px 7px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);color:var(--gc-ink)}
#gchelp dd{margin:0;color:var(--gc-ink-2)}#gchelp .ft{margin-top:14px;font-size:var(--gc-t-2xs);color:var(--gc-ink-4)}
/* ---------- reduced motion: OS setting or in-app toggle. Movement becomes a short fade or nothing. ---------- */
@media (prefers-reduced-motion:reduce){.gcd,.gcflash-up,.gcflash-dn{animation:none}}
html.gc-rm *,html.gc-rm *::before,html.gc-rm *::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
html.gc-rm #gcisland .cmp,html.gc-rm #gcisland .opn,html.gc-rm #gctoasts .t{transition:opacity 120ms linear!important}
html.gc-rm body.paper #fshell .gc:hover{transform:none}

/* header fit: tagline must not crush when RedZone + gcctl join the bar (~1440px).
   Prefer ellipsis / hide in the mid-desktop band; controls never shrink. */
.tbar .sub{margin-left:auto;flex:0 1 14rem;min-width:0;max-width:14rem;line-height:1.3;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbar .rzctl,.tbar .gcctl{flex-shrink:0}
@media (max-width:1500px) and (min-width:761px){
  /* crowded band: drop provenance line — chips on cards still label sources */
  .tbar .sub{display:none}
}

/* ===== UI-TASTE §9 "Broadcast Pro" tighten (2026-10-19) =====
   one display font + one body font · radii 6 / 10 / pill · text >= 11px · one label tracking ·
   team colours only as tints/bar fills (never text) · LIVE = red dot + text · finals in ink-3 */
:root{--gc-disp:"Barlow Condensed","Roboto Condensed","Arial Narrow",sans-serif;--gc-body:Inter,system-ui,-apple-system,sans-serif;--gc-track-label:.06em;--gc-track-disp:.02em}
body.paper{--disp:var(--gc-disp);--body:var(--gc-body)}
/* one provenance chip style: outline, 11px, uppercase */
body.paper :is(.tag,.rbadge b,.bsrc){font:600 11px var(--gc-body)!important;letter-spacing:var(--gc-track-label)!important;text-transform:uppercase;background:transparent!important;border:1px solid currentColor!important;border-radius:var(--gc-r-pill)!important;padding:1px 7px!important}
body.paper .tag{color:var(--gc-warn)!important}body.paper .bsrc.ok{color:#86efac!important}body.paper .bsrc.off{color:var(--gc-ink-4)!important}
body.paper .rbadge b{border:0!important;padding:0!important}
/* team marker: neutral ink text + team-colour chip */
.tmk{display:inline-flex;align-items:center;gap:5px;color:var(--gc-ink)}.tmk i{width:8px;height:8px;border-radius:50%;display:inline-block}
/* LIVE = red dot + "LIVE" text; finals muted */
#fshell .gc .st .lvt{color:var(--gc-live);font-weight:700;letter-spacing:var(--gc-track-label);margin-right:4px}
#fshell .gc:not(.live) .gc-top .st{color:var(--gc-ink-3)}
/* event chips: text 11px, no colour-only meaning (label text is always present) */
.rzchip{font-size:11px!important;letter-spacing:var(--gc-track-label)!important;border-radius:var(--gc-r-sm)!important}

#gchelp .sub{margin:0 0 10px;font:400 12px Inter,sans-serif;color:var(--gc-ink-3)}
@media (prefers-reduced-motion: reduce){
  #gchelp,#gchelp .bx{transition:none!important;transform:none!important}
  #gchelp.on .bx{transform:none!important}
}
#gchelp.rm,#gchelp.rm .bx{transition:none!important;transform:none!important}
/* rail score-change chips never take the press (their 6 s timer removes them; a pressed element that is removed swallows the click) */
#fshell .gc .gcd{pointer-events:none}