.live-root{
  --paper:#f4efe2; --card:#fffdf7; --ink:#1b1913; --ink2:#5b5545;
  --line:#d9d1b8; --faint:#ece4cd;
  --accent:#c2401f; --court:#175e6e;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
}
.live-root * {box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
.live-root .num {font-variant-numeric:tabular-nums;}
.live-root header.top {position:sticky;top:0;z-index:10;background:var(--paper);
  border-bottom:2px solid var(--ink);padding:12px 16px 10px;}
.live-root .brand {display:flex;align-items:center;gap:10px;}
.live-root .brand h1 {margin:0;font-size:17px;letter-spacing:.2em;font-weight:800;}
.live-root .live-dot {width:9px;height:9px;border-radius:50%;background:var(--accent);
  animation:pulse 1.6s ease-in-out infinite;flex:0 0 auto;}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.72);}}
.live-root .proto {font:700 9px var(--mono);letter-spacing:.1em;color:var(--accent);
  border:1px solid var(--accent);border-radius:3px;padding:2px 6px;}
.live-root .tagline {margin:6px 0 0;font-size:12px;color:var(--ink2);}
.live-root .daynav {display:flex;align-items:center;gap:8px;padding:12px 16px 0;}
.live-root .daybtn {border:2px solid var(--ink);background:var(--card);border-radius:6px;cursor:pointer;
  font-size:16px;line-height:1;padding:5px 11px 7px;min-height:32px;transition:transform .15s ease,background .15s ease;}
.live-root .daybtn:active {transform:scale(.94);}
.live-root .daybtn.today {font-size:11px;font-weight:700;letter-spacing:.04em;padding:6px 10px;}
.live-root .daylbl {font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.05em;}
.live-root #games {display:flex;gap:8px;overflow-x:auto;padding:8px 16px 4px;scrollbar-width:none;}
.live-root #games::-webkit-scrollbar {display:none;}
.live-root .gbtn {flex:0 0 auto;border:2px solid var(--ink);background:var(--card);border-radius:6px;
  padding:8px 12px;font-size:13px;cursor:pointer;text-align:left;min-width:136px;
  transition:transform .15s ease,background .15s ease;}
.live-root .gbtn:active {transform:scale(.96);}
.live-root .gbtn .ms {font-weight:800;letter-spacing:.03em;}
.live-root .gbtn .sc {font-family:var(--mono);font-size:12px;font-weight:700;margin-top:2px;}
.live-root .gbtn .st {font-family:var(--mono);font-size:10px;color:var(--ink2);margin-top:3px;}
.live-root .gbtn.live {border-color:var(--accent);}
.live-root .gbtn.live .st {color:var(--accent);font-weight:700;}
.live-root .gbtn.sel {background:var(--ink);color:var(--paper);}
.live-root .gbtn.sel .st {color:var(--paper);opacity:.7;}
.live-root main {padding:2px 0 28px;max-width:672px;margin:0 auto;}
.live-root main>* {animation:rise .55s cubic-bezier(.2,.7,.2,1) both;}
.live-root main>*:nth-child(2) {animation-delay:.06s}
.live-root main>*:nth-child(3) {animation-delay:.12s}
.live-root main>*:nth-child(4) {animation-delay:.18s}
.live-root main>*:nth-child(5) {animation-delay:.24s}
.live-root main>*:nth-child(6) {animation-delay:.3s}
.live-root main>*:nth-child(7) {animation-delay:.36s}
.live-root main>*:nth-child(8) {animation-delay:.42s}
.live-root main>*:nth-child(9) {animation-delay:.48s}
.live-root main>*:nth-child(10) {animation-delay:.54s}
.live-root main>*:nth-child(11) {animation-delay:.6s}

@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.live-root .scorebug {background:var(--card);border:2px solid var(--ink);border-radius:6px;
  padding:16px 14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  margin:12px 14px 0;position:relative;}
.live-root .scorebug::before, .live-root .scorebug::after {content:'';position:absolute;width:10px;height:10px;pointer-events:none;}
.live-root .scorebug::before {top:5px;left:5px;border-top:2px solid var(--accent);border-left:2px solid var(--accent);}
.live-root .scorebug::after {bottom:5px;right:5px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);}
.live-root .team {text-align:center;}
.live-root .team .abbr {font-size:24px;font-weight:800;letter-spacing:.05em;}
.live-root .team .rec {font-family:var(--mono);font-size:10px;color:var(--ink2);margin-top:3px;}
.live-root .mid {text-align:center;}
.live-root .mid .score {font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.live-root .mid .clock {font-family:var(--mono);font-size:11px;margin-top:5px;font-weight:700;color:var(--accent);letter-spacing:.06em;}
.live-root .mid .upd {font-family:var(--mono);font-size:9px;color:var(--ink2);margin-top:3px;}
.live-root .card {background:var(--card);border:2px solid var(--ink);border-radius:6px;
  padding:14px 14px 16px;margin:12px 14px 0;position:relative;}
.live-root .plate {display:flex;align-items:center;gap:9px;margin:0 0 10px;}
.live-root .plate .pno {font:700 9px var(--mono);color:var(--card);background:var(--ink);
  border-radius:3px;padding:3px 7px;letter-spacing:.1em;flex:0 0 auto;}
.live-root .plate h2 {margin:0;font-size:12px;letter-spacing:.18em;font-weight:800;white-space:nowrap;}
.live-root .plate .prule {flex:1;border-top:1px dashed var(--line);min-width:12px;}
.live-root .plate .pmeta {font:600 9px var(--mono);color:var(--ink2);letter-spacing:.04em;white-space:nowrap;}
.live-root .wpnum {display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px;}
.live-root .wpnum .big {font-size:36px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.live-root .wpnum .lbl {font-family:var(--mono);font-size:10px;color:var(--ink2);}
.live-root canvas.chart {width:100%;display:block;}
.live-root .legend {display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:var(--ink2);margin-top:6px;letter-spacing:.04em;}
.live-root .chips {display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.live-root .chip {font-size:12px;border:1.5px solid var(--ink);border-radius:20px;padding:5px 12px;
  background:var(--paper);font-weight:700;}
.live-root .chip.hot {border-color:var(--accent);color:var(--accent);animation:chipin .45s cubic-bezier(.2,.9,.3,1.2) both;}

@keyframes chipin{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:scale(1);}}
.live-root #plays {list-style:none;margin:8px 0 0;padding:0;max-height:320px;overflow-y:auto;}
.live-root #plays li {padding:8px 2px;border-top:1px dashed var(--line);font-size:13px;display:flex;gap:10px;}
.live-root #plays li .pc {flex:0 0 62px;font-family:var(--mono);font-size:11px;color:var(--ink2);}
.live-root #plays li.score b {color:var(--ink);}
.live-root #plays li .sc {margin-left:auto;font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink2);white-space:nowrap;}
.live-root #plays li.fresh {animation:slidein .45s ease both;}

@keyframes slidein{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:none;}}

@keyframes pop{from{opacity:0;}to{opacity:1;}}
.live-root .leaders {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;}
.live-root .lcol h3 {margin:0 0 4px;font-size:13px;letter-spacing:.06em;}
.live-root .lcol .pl {font-size:12px;padding:6px 0;border-top:1px dashed var(--line);display:flex;justify-content:space-between;gap:6px;}
.live-root .lcol .pl span:last-child {font-variant-numeric:tabular-nums;color:var(--ink2);font-family:var(--mono);font-size:11px;white-space:nowrap;}
.live-root .note {font-size:11px;color:var(--ink2);margin:14px 16px 0;line-height:1.6;}
.live-root .err {background:#fdeceb;border:2px solid var(--accent);color:var(--accent);
  border-radius:6px;padding:12px;margin:12px 14px 0;font-size:13px;display:none;}
.live-root button.refresh {margin:14px 14px 0;width:calc(100% - 28px);padding:13px;font-size:14px;font-weight:800;letter-spacing:.06em;
  background:var(--ink);color:var(--paper);border:none;border-radius:6px;cursor:pointer;
  transition:transform .12s ease;}
.live-root button.refresh:active {transform:scale(.98);}
.live-root .ghost {border-top:1px dashed var(--line);padding:11px 2px;}
.live-root .ghost:first-child {border-top:none;}
.live-root .ghost .g-top {font-size:13px;}
.live-root .ghost .g-top .live {font-variant-numeric:tabular-nums;color:var(--ink2);font-weight:400;font-family:var(--mono);font-size:11px;}
.live-root .ghost .g-mid {font-size:13px;margin-top:3px;}
.live-root .ghost .g-mid .when {color:var(--ink2);font-size:12px;}
.live-root .ghost .g-pace {font-size:12px;margin-top:5px;color:var(--ink2);}
.live-root .ghost .g-pace b.up {color:var(--accent);}
.live-root .ghost .tier {border:1px solid var(--line);border-radius:10px;padding:1px 8px;font-size:10px;margin-left:6px;font-family:var(--mono);}
.live-root .race {margin-top:9px;}
.live-root .race .rrow {display:flex;align-items:center;gap:8px;margin-top:5px;}
.live-root .race .rrow .who {flex:0 0 78px;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.live-root .race .rrow .bar {flex:1;height:11px;background:var(--faint);border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.live-root .race .rrow .fill {height:100%;border-radius:5px;transition:width .8s cubic-bezier(.2,.7,.2,1);}
.live-root .race .rrow .val {flex:0 0 56px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink2);font-family:var(--mono);font-size:10px;}
.live-root .ms-item {border-top:1px dashed var(--line);padding:9px 2px;font-size:13px;display:flex;gap:10px;}
.live-root .ms-item:first-child {border-top:none;}
.live-root .ms-item .mc {flex:0 0 60px;font-family:var(--mono);font-size:10px;color:var(--ink2);}
.live-root .ms-item .mt b {color:var(--accent);}
.live-root .ms-item.fresh {animation:slidein .45s ease both;}
.live-root .mile {border-top:1px dashed var(--line);padding:10px 2px;font-size:13px;}
.live-root .mile:first-child {border-top:none;}
.live-root .mile .mline b {color:var(--accent);}
.live-root .mile .msub {font-size:11px;color:var(--ink2);margin-top:3px;}
.live-root .qbars {display:flex;gap:8px;margin-top:10px;align-items:flex-end;}
.live-root .qbar {flex:1;text-align:center;}
.live-root .qbar .qbwrap {display:flex;gap:3px;align-items:flex-end;justify-content:center;height:64px;}
.live-root .qbar .qb {width:16px;border-radius:3px 3px 0 0;transition:height .7s cubic-bezier(.2,.7,.2,1);min-height:3px;}
.live-root .qbar .ql {font-family:var(--mono);font-size:9px;color:var(--ink2);margin-top:4px;}
.live-root .qbar .qv {font-family:var(--mono);font-size:9px;color:var(--ink2);}
.live-root .shot-toggle {display:flex;gap:8px;margin-bottom:10px;}
.live-root .shot-toggle button {flex:1;padding:9px;font-size:12px;font-weight:800;border:2px solid var(--ink);
  background:var(--card);border-radius:6px;cursor:pointer;letter-spacing:.04em;transition:all .15s ease;}
.live-root .shot-toggle button.picked {background:var(--ink);color:var(--paper);}
.live-root svg.shot {width:100%;height:auto;display:block;background:#fbf7ec;border:1px solid var(--line);border-radius:4px;}
.live-root .zone-stats {display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px;}
.live-root .zone {background:var(--paper);border:1.5px solid var(--ink);border-radius:6px;padding:8px;text-align:center;}
.live-root .zone .zl {font:700 9px var(--mono);letter-spacing:.1em;color:var(--ink2);}
.live-root .zone .zv {font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px;}
.live-root .zone .zs {font-family:var(--mono);font-size:9px;color:var(--ink2);margin-top:2px;}
.live-root .annot {font-family:var(--mono);font-size:9px;fill:var(--ink2);}
.live-root .stickybar {position:sticky;top:0;z-index:20;background:var(--paper);padding:2px 0 6px;}
.live-root #tlbar {margin:8px 14px 0;border:2px solid var(--ink);border-radius:6px;background:var(--card);padding:8px 12px 6px;}
.live-root.final .live-dot {animation:none;background:#8a8574;}
.live-root #tlbar .tlrow {display:flex;align-items:center;gap:10px;}
.live-root #scrub {flex:1;-webkit-appearance:none;appearance:none;height:26px;background:transparent;cursor:pointer;margin:0;}
.live-root #scrub::-webkit-slider-runnable-track {height:4px;background:var(--ink);border-radius:2px;}
.live-root #scrub::-webkit-slider-thumb {-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;background:var(--accent);border:2px solid var(--ink);border-radius:3px;}
.live-root #scrub::-moz-range-track {height:4px;background:var(--ink);border-radius:2px;}
.live-root #scrub::-moz-range-thumb {width:14px;height:14px;background:var(--accent);border:2px solid var(--ink);border-radius:3px;}
.live-root #tlticks {position:relative;height:15px;display:block;}
.live-root #tlticks span {position:absolute;transform:translateX(-50%);font:600 9px var(--mono);color:var(--ink2);}
.live-root #tlclock {font:700 11px var(--mono);letter-spacing:.06em;min-width:88px;text-align:right;white-space:nowrap;}
.live-root .livebtn {display:none;align-items:center;gap:8px;background:var(--accent);color:#fff;border:2px solid var(--ink);
  border-radius:24px;padding:10px 18px;font:800 11px var(--mono);letter-spacing:.1em;cursor:pointer;
  position:fixed;bottom:24px;right:16px;z-index:50;box-shadow:3px 3px 0 var(--ink);}
.live-root .livebtn.show {display:flex;animation:chipin .3s ease both;}
.live-root .livebtn .dot {width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.2s infinite;}
.live-root.rewound .liveonly {opacity:.45;}
.live-root .liveonly {position:relative;transition:opacity .3s ease;}
.live-root.rewound .liveonly::after {content:'LIVE ONLY';position:absolute;top:10px;right:12px;font:700 8px var(--mono);
  letter-spacing:.12em;color:var(--accent);border:1.5px solid var(--accent);border-radius:3px;padding:2px 6px;background:var(--card);}
.live-root #atlasSvg {width:100%;height:auto;display:block;}
.live-root .twinrow {display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center;}
.live-root .twinrow .tlabel {font:700 10px var(--mono);color:var(--ink2);letter-spacing:.06em;}
.live-root .twin {font-size:11px;border:1.5px solid var(--ink);border-radius:14px;padding:4px 10px;background:var(--paper);font-weight:700;cursor:pointer;}
.live-root .twin.selp {background:var(--ink);color:var(--paper);}
.live-root .atlas-player {cursor:pointer;}
.live-root .pulse-dot {animation:atlasPulse 1.8s ease-in-out infinite;}

@keyframes atlasPulse{0%,100%{opacity:.95;}50%{opacity:.3;}}
.live-root .atlas-lbl {font-family:ui-monospace,monospace;}
@media (prefers-reduced-motion:reduce){.live-root * {animation:none!important;transition:none!important;}}
/* page chrome + arcade extras */
.live-root .mode-tabs{display:flex;gap:8px;margin-top:12px;}
.live-root .mode-tabs button{font:800 11px ui-monospace,monospace;letter-spacing:.1em;padding:9px 18px;border:2px solid var(--ink);border-radius:20px;background:var(--paper);color:var(--ink2);cursor:pointer;}
.live-root .mode-tabs button.picked{background:var(--ink);color:var(--paper);}
.live-root .atlas-wrap{position:relative;}
.live-root #liveAtlas,.live-root #snapCanvas,.live-root #trailCanvas,.live-root #eraCanvas{width:100%;display:block;}
.live-root .atlas-hint{position:absolute;top:10px;left:12px;font:700 10px ui-monospace,monospace;color:var(--ink2);letter-spacing:.06em;}
.live-root .gamedesc{font-size:13px;color:var(--ink2);margin:0 0 10px;}
.live-root .scoreline{font-size:13px;min-height:22px;margin-top:10px;font-family:ui-monospace,monospace;}
.live-root .twin.nope{background:#5b5545;border-color:#5b5545;color:#fff;}

.live-root .twin.sharebtn{background:var(--coin-2);border-color:var(--coin-2);color:var(--coin-ink);margin-left:8px;}  /* coin gold + ink = 9.76:1; var(--gold) is marker-black in the light theme (was 1.00:1) */
.live-root .copied{font-size:11px;color:var(--ink2);}
.live-root #snapDaily{margin-left:8px;font-size:10px;padding:6px 12px;}
.live-root .card .plate{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

.live-root #tabJam:not(.picked){opacity:.45;}
