/* Bolt League — tokens (§10.1), global UI rules (§9.1), components and screens. Phone-first (375×812) up to desktop. */
:root{
  --ink:#1B1F3B; --ink-2:#2B3160; --paper:#FFF8EC; --league:#FF7A1A; --bolt:#FFD23F; --grass:#5BBF4A; --sky:#9ED8FF;
  --danger:#E5484D; --ok:#2FB36B; --muted:#7A7F99; --line:#E6DCC8;
  --muted-ink:#565B78;           /* muted text that keeps 4.5:1 on paper */
  --danger-d:#C22F37; --ok-d:#1E8A50; --paper-2:#F4EAD6; --shield:#7DE3FF;
  --font:ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --r:14px; --b:3px; --sh:0 4px 0 var(--ink); --gap:12px;
  --safe-t:env(safe-area-inset-top, 0px); --safe-b:env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; }
body{ font:600 16px/1.4 var(--font); color:var(--ink); overflow:hidden; overscroll-behavior:none;
  background:linear-gradient(180deg, var(--sky) 0%, #CDEBFF 55%, #BFE3A8 56%, var(--grass) 100%); }
h1,h2,h3{ margin:0; font-weight:800; letter-spacing:.01em; line-height:1.15; }
h1{ font-size:28px; } h2{ font-size:22px; } h3{ font-size:18px; }
p{ margin:0; }
small{ font-size:15px; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
button:disabled{ cursor:not-allowed; }
:focus-visible{ outline:3px solid var(--league); outline-offset:3px; }
.sr-only{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.noscript{ padding:24px; }
.hidden,[hidden]{ display:none !important; }

/* ---- layers ---- */
#stage{ position:fixed; inset:0; z-index:0; }
#stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#ui{ position:fixed; inset:0; z-index:1; overflow:hidden; }
#overlay{ position:fixed; inset:0; z-index:5; pointer-events:none; }
#overlay > *{ pointer-events:auto; }
#toasts{ position:fixed; left:0; right:0; bottom:calc(20px + var(--safe-b)); display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; z-index:9; }

/* ---- screens ---- */
.screen{ position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; }
.screen.enter{ animation:scrIn 220ms ease-out both; }
.screen.enter-back{ animation:scrBack 220ms ease-out both; }
.screen.leave{ animation:scrOut 200ms ease-in both; pointer-events:none; }
@keyframes scrIn{ from{ transform:translateX(18%); opacity:0; } }
@keyframes scrBack{ from{ transform:translateX(-18%); opacity:0; } }
@keyframes scrOut{ to{ opacity:0; } }
.slip{ background:var(--paper); background-image:radial-gradient(rgba(27,31,59,.05) 1.2px, transparent 1.3px); background-size:18px 18px; }
.see-through{ background:transparent; }
body.nostage .see-through{ background:linear-gradient(180deg, var(--sky) 0%, #CDEBFF 48%, #BFE3A8 49%, var(--grass) 100%); }
.scroll{ overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.grow{ flex:1 1 auto; min-width:0; }
.wrap{ width:100%; max-width:560px; margin:0 auto; padding:14px 16px calc(20px + var(--safe-b)); }
.wrap.wide{ max-width:1100px; }
.col{ display:flex; flex-direction:column; gap:var(--gap); }
.col.tight{ gap:4px; } .col.center{ align-items:center; text-align:center; } .col.left{ align-items:flex-start; text-align:left; } .col.right{ align-items:flex-end; }
.row{ display:flex; align-items:center; gap:10px; }
.row.tight{ gap:6px; } .row.spread{ justify-content:space-between; } .row.wrap{ flex-wrap:wrap; } .row.center{ justify-content:center; }
.center{ text-align:center; } .block{ display:block; }
.muted{ color:var(--muted-ink); }
.err{ color:var(--danger-d); font-weight:800; font-size:15px; min-height:0; }
.ok{ color:var(--ok-d); font-weight:800; }
.big{ font-size:22px; font-weight:800; }
.mono{ font-family:ui-monospace, Menlo, monospace; font-size:13px; white-space:pre-wrap; word-break:break-all; background:var(--paper-2); padding:10px; border-radius:10px; }
.bigtitle{ font-size:clamp(26px, 7.5vw, 40px); text-align:center; text-transform:uppercase; letter-spacing:.03em; }
.bigtitle.rumble{ color:var(--league); text-shadow:0 3px 0 var(--ink); -webkit-text-stroke:1px var(--ink); }

/* ---- panels (§9.1: paper, 3 px ink outline, 14 px radius, hard 0 4px 0 shadow) ---- */
.card{ background:var(--paper); border:var(--b) solid var(--ink); border-radius:var(--r); box-shadow:var(--sh); padding:14px; }
.banner{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:var(--ink); color:var(--paper); border-radius:var(--r); font-weight:800; border:0; text-align:left; }
.banner small{ display:block; font-weight:600; opacity:.9; }
.banner.warn{ background:var(--bolt); color:var(--ink); border:var(--b) solid var(--ink); }
.banner.soft{ background:var(--paper-2); color:var(--ink); justify-content:center; }
.banner.pit{ background:var(--ink-2); flex-direction:column; align-items:flex-start; }
.banner.lbs{ background:var(--bolt); color:var(--ink); border:var(--b) solid var(--ink); box-shadow:var(--sh); justify-content:center; font-size:22px; letter-spacing:.04em; }
.banner.resume{ margin:0 16px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; min-height:30px; border-radius:999px; background:var(--ink); color:var(--paper); font-weight:800; font-size:15px; white-space:nowrap; }
.chip.small{ min-height:26px; font-size:14px; padding:2px 9px; }
.chip.bolt{ background:var(--bolt); color:var(--ink); border:2px solid var(--ink); }
.chip.ok{ background:var(--ok-d); }
.chip.rank{ background:var(--ink-2); }
.tag{ display:inline-flex; align-items:center; gap:4px; padding:1px 8px; border-radius:8px; background:var(--paper-2); border:2px solid var(--ink); font-size:13px; font-weight:800; white-space:nowrap; }
.tag.tag-ghost{ border-style:dashed; color:#4A4F57; }
.tag.ko{ background:var(--league); } .tag.salv{ background:var(--bolt); } .tag.last{ background:var(--sky); }
.tag.teaser{ background:#EFE7FF; border-color:#7C5CFF; }
.tag.ai{ background:#E7ECFF; }

/* ---- buttons (≥ 44 px targets) ---- */
.btn{ --bg:var(--paper); --fg:var(--ink); display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; min-width:48px; padding:10px 18px;
  background:var(--bg); color:var(--fg); border:var(--b) solid var(--ink); border-radius:var(--r); box-shadow:var(--sh);
  font-weight:800; font-size:18px; line-height:1.15; text-align:center; user-select:none; -webkit-user-select:none; transition:transform 80ms, box-shadow 80ms, filter 120ms; }
.btn:active:not(:disabled){ transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }
.btn:disabled{ filter:grayscale(.8) opacity(.55); box-shadow:0 2px 0 var(--ink); }
.btn.primary{ --bg:var(--league); --fg:var(--ink); }
.btn.secondary{ --bg:var(--ink-2); --fg:var(--paper); }
.btn.bolt{ --bg:var(--bolt); --fg:var(--ink); }
.btn.paper{ --bg:var(--paper); }
.btn.ghost{ --bg:transparent; box-shadow:none; }
.btn.dark{ --bg:var(--ink); --fg:var(--paper); }
.btn.danger{ --bg:var(--danger-d); --fg:#FFFFFF; }
.btn.big{ min-height:60px; font-size:21px; padding:12px 22px; }
.btn.small{ min-height:44px; font-size:16px; padding:6px 12px; }
.btn.wide{ width:100%; }
.btn svg{ flex:none; }
.bt-main{ display:inline-flex; align-items:center; gap:8px; }
.bt-sub{ display:block; font-size:14px; font-weight:600; opacity:.9; }
.btn:has(.bt-sub){ flex-direction:column; gap:2px; }
.iconbtn{ min-width:44px; min-height:44px; display:inline-grid; place-items:center; border:0; background:transparent; border-radius:12px; padding:0; }
.iconbtn:disabled{ opacity:.35; }
.iconbtn.small{ min-width:44px; min-height:44px; }
.iconbtn.paperbtn, .backbtn{ background:var(--paper); border:var(--b) solid var(--ink); box-shadow:0 3px 0 var(--ink); }
.iconbtn:active:not(:disabled){ transform:translateY(2px); }
.linkbtn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:6px 10px; border:0; background:transparent; font-weight:800; color:var(--ink); text-decoration:underline; text-underline-offset:3px; border-radius:10px; }
.linkbtn.center{ align-self:center; }

/* ---- top bars ---- */
.topbar{ display:flex; align-items:center; gap:10px; padding:calc(8px + var(--safe-t)) 12px 8px; min-height:60px; background:var(--paper); border-bottom:var(--b) solid var(--ink); z-index:2; flex:none; }
.topbar h2{ font-size:20px; }
.topbar.game{ gap:8px; }
.tb-pips{ flex:none; }
.tb-phase{ font-weight:800; font-size:16px; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-extra:empty{ display:none; }
.roundpips{ display:flex; gap:1px; }
.rpip{ display:inline-grid; }
.rpip path{ fill:var(--paper); }
.rpip.past path{ fill:var(--muted); } .rpip.now path{ fill:var(--league); }
@media (max-width:380px){ .rpip svg{ width:14px; height:14px; } }
.countdown{ position:relative; width:44px; height:44px; flex:none; display:grid; place-items:center; }
.countdown svg{ position:absolute; inset:0; width:100%; height:100%; }
.countdown .cd-num{ position:relative; font-weight:800; font-size:16px; }
.countdown.red .arc{ stroke:var(--danger); } .countdown.red .cd-num{ color:var(--danger-d); }
.footer{ padding:10px 16px calc(12px + var(--safe-b)); background:var(--paper); border-top:var(--b) solid var(--ink); display:flex; flex-direction:column; gap:10px; flex:none; }
.footer .row{ width:100%; }

/* ---- forms ---- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field.tight{ gap:2px; }
.flabel, .field > span:first-child{ font-weight:800; font-size:15px; }
.input{ min-height:48px; padding:0 12px; border:var(--b) solid var(--ink); background:#FFFFFF; border-radius:12px; font-weight:800; font-size:18px; width:100%; min-width:0; }
.input.bad{ border-color:var(--danger); background:#FFF0EF; }
.input.code{ text-transform:uppercase; letter-spacing:.35em; font-size:26px; text-align:center; }
select.input{ font-size:16px; padding:0 8px; }
.seg{ display:flex; background:var(--ink); padding:3px; border-radius:12px; gap:3px; }
.seg.wrapseg{ flex-wrap:wrap; }
.seg button{ flex:1 1 auto; min-height:44px; min-width:44px; border:0; background:transparent; color:var(--paper); font-weight:800; border-radius:9px; padding:4px 8px; font-size:15px; }
.seg button[aria-checked="true"]{ background:var(--bolt); color:var(--ink); }
.switch{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; }
.switch input{ width:56px; height:32px; appearance:none; -webkit-appearance:none; background:#D8CCB6; border-radius:99px; position:relative; border:var(--b) solid var(--ink); cursor:pointer; flex:none; margin:6px 0; }
.switch input::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--ink); transition:left 140ms; }
.switch input:checked{ background:var(--ok); } .switch input:checked::after{ left:27px; background:#FFFFFF; }
.switch input:disabled{ opacity:.45; }
.bar{ height:16px; border:var(--b) solid var(--ink); border-radius:99px; background:var(--paper-2); overflow:hidden; }
.bar > i{ display:block; height:100%; background:var(--bolt); border-right:var(--b) solid var(--ink); }
.bar > i.grow-in{ animation:barIn 900ms ease-out both; }
@keyframes barIn{ from{ width:0; } }

/* ---- toasts & sheets ---- */
.toast{ max-width:min(92vw, 440px); padding:12px 18px; border-radius:var(--r); background:var(--ink); color:var(--paper); font-weight:800; box-shadow:0 4px 0 rgba(0,0,0,.25); animation:toastIn 180ms ease-out both; text-align:center; }
.toast.t-ok{ background:var(--ok-d); } .toast.t-warn{ background:var(--bolt); color:var(--ink); border:var(--b) solid var(--ink); } .toast.t-bad{ background:var(--danger-d); }
.toast.out{ animation:toastOut 180ms ease-in both; }
@keyframes toastIn{ from{ transform:translateY(16px); opacity:0; } } @keyframes toastOut{ to{ transform:translateY(8px); opacity:0; } }
.sheet-back{ position:fixed; inset:0; background:rgba(27,31,59,.55); display:flex; align-items:flex-end; justify-content:center; z-index:8; opacity:0; transition:opacity 160ms; }
.sheet-back.in{ opacity:1; } .sheet-back.out{ opacity:0; }
.sheet{ position:relative; width:100%; max-width:560px; max-height:calc(100% - 40px - var(--safe-t)); overflow-y:auto; border-radius:22px 22px 0 0; padding:18px 16px calc(18px + var(--safe-b));
  border-bottom:0; transform:translateY(24px); transition:transform 180ms ease-out; display:flex; flex-direction:column; gap:12px; }
.sheet-back.in .sheet{ transform:none; }
.sheet.tall{ height:calc(100% - 40px - var(--safe-t)); }
.sheet-x{ position:absolute; top:8px; right:8px; }
.sheet-title{ padding-right:44px; }
.sheet-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.sheet-actions .btn{ flex:1 1 140px; }
.sheet-actions .btn .col{ gap:2px; }
.sheet.unlock{ text-align:center; }
@media (min-width:700px){ .sheet-back{ align-items:center; } .sheet{ border-radius:22px; border-bottom:var(--b) solid var(--ink); } }

/* ---- seats, families, gems, pips ---- */
.seatchip{ display:inline-flex; align-items:center; gap:7px; min-width:0; font-weight:800; }
.seatchip .sc-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seatchip.loser{ opacity:.75; }
.seatdot{ display:inline-grid; place-items:center; flex:none; border-radius:50%; border:2.5px solid var(--ink); }
.seatdot.ghostdot{ border-style:dashed; }
.autopilot{ display:inline-grid; place-items:center; }
.famchip{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 3px; border-radius:999px; background:var(--paper); border:2px solid var(--ink); font-weight:800; font-size:14px; white-space:nowrap; }
.famchip.small{ font-size:13px; }
.fc-glyph{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; border:2px solid var(--ink); flex:none; }
.famchip.small .fc-glyph{ width:20px; height:20px; }
.gemwrap{ display:inline-grid; place-items:center; }
.stars{ display:inline-flex; gap:1px; }
.stars .pip{ color:#CFC4AE; display:inline-grid; }
.stars .pip.on{ color:var(--bolt); filter:drop-shadow(0 0 0 var(--ink)); }
.stars .pip.on svg{ stroke:var(--ink); stroke-width:1.6px; }
.stars .pip.next{ color:#FFE9A0; }
.bolts{ display:inline-flex; gap:2px; }
.bolts .bolt{ color:#CFC4AE; display:inline-grid; }
.bolts .bolt.on{ color:var(--league); }
.bolts .bolt.pop{ color:var(--league); animation:boltPop 900ms 500ms ease-in forwards; }
@keyframes boltPop{ 40%{ transform:translateY(-10px) rotate(-20deg) scale(1.2); } 100%{ transform:translateY(18px) rotate(40deg); opacity:0; } }
.trophies, .washer{ display:inline-flex; align-items:center; gap:3px; font-weight:800; }
.washer b{ font-size:1.05em; } .washer.bad b{ color:var(--danger-d); }
.tacchip{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 5px; border-radius:999px; border:2px solid var(--ink); background:var(--paper); font-weight:800; font-size:14px; }
.tacchip.none, .tacchip.hidden-chip{ padding:3px 10px; }
.tac-charge{ --tac:#FF7A1A; } .tac-circle{ --tac:#3D7BF7; } .tac-turtle{ --tac:#2FB36B; } .tac-bait{ --tac:#9B5DE5; }
.tacchip[class*="tac-"] > span:first-child{ color:var(--tac); }

/* ---- shop cards ---- */
.cardrow{ display:flex; gap:10px; overflow-x:auto; padding:6px 16px 14px; scroll-snap-type:x mandatory; scroll-padding:16px; flex:none; }
.cardrow > div{ scroll-snap-align:start; flex:none; }
.pcard{ --fam:#A9ADB5; width:168px; display:flex; flex-direction:column; background:var(--paper); border:var(--b) solid var(--ink); border-radius:var(--r); box-shadow:var(--sh); overflow:hidden; position:relative; }
.pcard.locked{ outline:4px solid var(--bolt); outline-offset:-1px; }
.pcard.poor .pc-body{ opacity:.55; }
.pcard.maxed .pc-body{ opacity:.6; }
.pcard.sold{ min-height:220px; display:grid; place-items:center; color:var(--muted-ink); border-style:dashed; box-shadow:none; }
.pc-body{ border:0; background:transparent; padding:0 0 6px; text-align:left; display:flex; flex-direction:column; gap:4px; flex:1; }
.pc-band{ display:flex; align-items:center; gap:6px; padding:5px 8px; font-weight:800; font-size:13px; border-bottom:var(--b) solid var(--ink); }
.pc-band .pc-fam{ flex:1; }
.pc-name{ font-weight:800; font-size:17px; padding:0 8px; line-height:1.15; min-height:40px; }
.pc-meta{ display:flex; align-items:center; gap:5px; padding:0 8px; font-size:14px; flex-wrap:wrap; }
.mergebadge{ background:var(--bolt); border:2px solid var(--ink); border-radius:8px; padding:0 6px; font-weight:800; }
.maxbadge{ background:var(--ink); color:var(--paper); border-radius:8px; padding:0 6px; font-weight:800; }
.pc-text{ font-size:14px; line-height:1.3; padding:0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pc-note{ font-size:13px; font-weight:800; padding:0 8px; color:var(--ink-2); }
.pc-foot{ display:flex; align-items:center; gap:6px; padding:6px; border-top:2px solid var(--line); }
.pc-foot .buy{ flex:1; min-height:44px; font-size:16px; padding:4px 8px; --bg:var(--league); }
.pc-foot .buy.off{ --bg:var(--paper-2); }
.lockbtn{ border:var(--b) solid var(--ink); background:var(--paper); }
.lockbtn.on{ background:var(--bolt); }
.votebar{ position:relative; height:22px; background:var(--paper-2); border-bottom:2px solid var(--ink); font-size:13px; font-weight:800; }
.votebar i{ position:absolute; left:0; top:0; bottom:0; background:var(--sky); }
.votebar span{ position:relative; padding-left:6px; line-height:20px; }
@media (min-width:900px){ .cardrow{ justify-content:center; overflow:visible; flex-wrap:wrap; } .pcard{ width:180px; } }

/* ---- slot strip / set chips / sketches ---- */
.slotstrip{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.slotchip{ --fam:#E9E3D6; position:relative; min-width:48px; min-height:48px; border:var(--b) solid var(--ink); border-radius:12px; background:var(--fam); display:inline-flex; flex-direction:column; align-items:center; justify-content:center; padding:2px 4px; color:var(--ink); }
.slotchip small{ font-size:13px; font-weight:800; line-height:1; }
.slotchip.empty{ background:var(--paper); border-style:dashed; color:var(--muted-ink); }
.qbadge{ position:absolute; top:-8px; right:-8px; width:20px; height:20px; border-radius:50%; background:var(--bolt); border:2px solid var(--ink); font-size:13px; font-weight:800; display:grid; place-items:center; }
.setchips{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.sketch, .sketchwrap{ display:grid; place-items:center; }
.sketch svg, .sketchwrap svg{ width:min(56vw, 220px); height:auto; }
.sketchwrap.small svg{ width:120px; }
.sketch [data-slot]{ cursor:pointer; }
.sketchbtn{ border:0; background:transparent; padding:0; min-height:44px; }
.stagehole{ min-height:200px; }

/* ---- title ---- */
.title-screen{ align-items:center; overflow-y:auto; }
.title-top{ position:absolute; top:calc(10px + var(--safe-t)); right:12px; z-index:2; }
.levelchip{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:4px 12px; border-radius:999px; border:var(--b) solid var(--ink); background:var(--paper); font-weight:800; box-shadow:0 3px 0 var(--ink); }
.logo{ margin:calc(40px + var(--safe-t)) auto 6px; display:grid; place-items:center; filter:drop-shadow(0 5px 0 rgba(27,31,59,.35)); }
.logo svg{ width:min(78vw, 320px); height:auto; }
.stagegap{ flex:1 1 40px; min-height:20px; }
.title-menu{ width:min(92vw, 420px); display:flex; flex-direction:column; gap:10px; padding-bottom:calc(16px + var(--safe-b)); }
.title-row{ display:flex; gap:10px; }
.title-row .btn{ flex:1; min-width:0; padding:10px 8px; }
.title-links{ display:flex; justify-content:space-around; gap:4px; background:rgba(255,248,236,.92); border:var(--b) solid var(--ink); border-radius:var(--r); }
.title-links .linkbtn{ flex:1; text-decoration:none; font-size:15px; }
.title-screen > .banner, .title-screen > .card, .title-screen > .offline-badge{ width:min(92vw, 420px); margin-top:8px; }
.firstrun{ display:flex; flex-direction:column; gap:8px; }
.offline-badge, .needsnet{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--ink); color:var(--paper); border-radius:12px; font-weight:800; font-size:15px; }
.needsnet{ background:var(--paper-2); color:var(--ink); border:2px dashed var(--ink); justify-content:center; }

/* ---- garage ---- */
.turntable{ min-height:230px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.lookbadges{ display:flex; gap:8px; }
.garage-head{ display:flex; flex-direction:column; gap:12px; }
.garage-head .row .input{ flex:1; }
.levelbar{ display:flex; flex-direction:column; gap:6px; }
.ribbon{ align-self:center; padding:6px 16px; background:var(--bolt); border:var(--b) solid var(--ink); border-radius:999px; font-weight:800; }
.tabs{ display:flex; gap:6px; }
.tab{ flex:1; min-height:48px; border:var(--b) solid var(--ink); border-radius:12px 12px 0 0; background:var(--paper-2); font-weight:800; }
.tab[aria-selected="true"]{ background:var(--paper); border-bottom-color:var(--paper); }
.tabpanel{ background:var(--paper); border:var(--b) solid var(--ink); border-top:0; border-radius:0 0 var(--r) var(--r); margin-top:calc(-1 * var(--gap) - 3px); padding:14px; display:flex; flex-direction:column; gap:10px; }
.lookgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px; }
.lookitem{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; min-height:112px; border:var(--b) solid var(--ink); border-radius:12px; background:#FFFFFF; font-weight:800; font-size:14px; }
.lookitem.on{ background:#FFF3C4; box-shadow:0 0 0 3px var(--bolt); }
.lookitem.lockd .li-art{ filter:grayscale(1) opacity(.5); }
.li-name{ text-align:center; line-height:1.1; }
.li-tag{ display:inline-flex; align-items:center; gap:3px; font-size:13px; color:var(--muted-ink); }
.li-tag.on{ position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:var(--ok); color:#fff; display:grid; place-items:center; }
.hofgrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.hofcell{ display:flex; flex-direction:column; align-items:center; gap:2px; min-height:120px; padding:6px; border:var(--b) solid var(--ink); border-radius:12px; background:#FFFFFF; font-size:14px; text-align:center; }
.hofcell.empty{ border-style:dashed; background:transparent; color:var(--muted-ink); justify-content:center; font-weight:800; }
.hc-art svg{ width:72px; height:auto; } .hc-art.big svg{ width:130px; }
.hof-detail{ display:flex; gap:12px; align-items:center; }
.unlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.unrow{ display:flex; align-items:center; gap:10px; padding:6px; border-radius:12px; background:var(--paper-2); }
.unrow.got{ background:#E4F6EA; }
.unlvl{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:10px; background:var(--ink); color:var(--paper); font-weight:800; }
.unitems{ flex:1; display:flex; flex-wrap:wrap; gap:6px; }
.unitem{ min-height:44px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:2px 10px; border:2px solid var(--ink); border-radius:10px; background:#FFFFFF; text-align:left; }
.unitem small{ font-size:13px; color:var(--muted-ink); }
.unstate{ flex:none; width:32px; display:grid; place-items:center; }
.unl-art{ display:grid; place-items:center; }
.unl-art.fam{ width:120px; height:120px; border-radius:50%; border:var(--b) solid var(--ink); box-shadow:var(--sh); }
.arenamap{ position:relative; display:inline-block; }
.arenamap svg{ display:block; max-width:100%; height:auto; }

/* ---- modes ---- */
.modecard{ display:flex; align-items:center; gap:12px; }
.modecard p{ font-size:15px; }
.mc-icon{ width:56px; height:56px; flex:none; display:grid; place-items:center; border-radius:14px; background:var(--bolt); border:var(--b) solid var(--ink); }

/* ---- seat entry ---- */
.seatlist{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.seatrow{ --seat:#999; display:flex; align-items:center; gap:6px; padding:6px; background:#FFFFFF; border:var(--b) solid var(--ink); border-left:10px solid var(--seat); border-radius:12px; }
.seatrow.dragging{ box-shadow:0 8px 0 var(--ink); transform:scale(1.02); }
.seatrow .input{ border-width:2px; min-height:44px; font-size:17px; }
.draghandle{ touch-action:none; cursor:grab; }
.seat-ord{ display:flex; }
@media (pointer:coarse){ .seat-ord{ display:none; } }

/* ---- lobby ---- */
.codecard{ display:flex; align-items:center; justify-content:space-around; gap:12px; flex-wrap:wrap; }
.bigcode{ font-size:56px; letter-spacing:.14em; line-height:1; }
.qr{ width:160px; background:#FFFFFF; border:var(--b) solid var(--ink); border-radius:12px; padding:6px; }
.qr svg{ display:block; width:100%; height:auto; }
.lobbyseats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.lseat{ display:flex; align-items:center; gap:8px; padding:4px 8px; background:#FFFFFF; border:2px solid var(--ink); border-radius:12px; min-height:52px; }
.conn{ width:12px; height:12px; border-radius:50%; background:var(--danger); border:2px solid var(--ink); flex:none; }
.conn.on{ background:var(--ok); }

/* ---- round intro ---- */
.pairing{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px; position:relative; padding-top:22px; }
.pairing.mine{ background:#FFF3C4; }
.pairing.rumble{ display:block; padding-top:14px; }
.pnum{ position:absolute; top:4px; left:12px; font-size:13px; color:var(--muted-ink); font-weight:800; }
.side{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.side .seatchip{ max-width:100%; flex-wrap:wrap; row-gap:2px; }
.pairing .side:last-child{ align-items:flex-end; }
.vs{ font-size:18px; text-transform:uppercase; }
.rgrid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
.oppcard{ display:flex; flex-direction:column; align-items:center; gap:8px; }

/* ---- shop ---- */
.shop{ display:flex; flex-direction:column; }
.shopbar{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--paper); border-bottom:var(--b) solid var(--ink); flex:none; }
.scrapbig .washer{ font-size:24px; }
.scrapbig .washer svg{ color:#8E97A8; }
.binwarn{ margin:6px 12px 0; padding:4px 10px; background:var(--bolt); border:2px solid var(--ink); border-radius:10px; font-weight:800; font-size:14px; line-height:1.25; }
.shop-mid{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 12px; }
.bothost{ position:relative; width:100%; min-height:150px; display:grid; place-items:center; }
.shop .sketch svg{ width:min(44vw, 170px); }
.inspbtn{ position:absolute; right:0; bottom:0; }
.opprow{ display:flex; justify-content:center; }
.waitnote{ text-align:center; padding:8px; font-weight:800; background:var(--paper); }
.hidebar{ padding:8px 16px calc(8px + var(--safe-b)); background:var(--paper); }
.coach{ position:absolute; left:16px; right:16px; bottom:calc(290px + var(--safe-b)); z-index:4; background:var(--ink); color:var(--paper); padding:12px 14px; border-radius:var(--r); display:flex; align-items:center; gap:10px; font-weight:800; box-shadow:0 4px 0 rgba(0,0,0,.3); }
.coach p{ flex:1; font-size:15px; }
.coach.c2{ bottom:auto; top:calc(120px + var(--safe-t)); }
.coach::after{ content:""; position:absolute; left:40px; bottom:-10px; border:10px solid transparent; border-bottom:0; border-top-color:var(--ink); }
.coach.c2::after{ bottom:auto; top:-10px; right:40px; left:auto; border-top:0; border-bottom:10px solid var(--ink); }

/* ---- inspector ---- */
.inspector{ display:flex; flex-direction:column; gap:12px; }
.insp-ro{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.insp-summary{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.sum{ background:var(--ink); color:var(--paper); border-radius:10px; padding:6px 8px; display:flex; flex-direction:column; }
.sum small{ font-size:13px; opacity:.85; } .sum b{ font-size:19px; }
.insp-rows{ display:flex; flex-direction:column; gap:8px; }
.insp-row{ --fam:#E9E3D6; border:var(--b) solid var(--ink); border-left:10px solid var(--fam); border-radius:12px; padding:8px 10px; background:#FFFFFF; display:flex; flex-direction:column; gap:4px; }
.insp-row.empty{ border-style:dashed; border-left-width:3px; background:transparent; }
.insp-row.focus{ box-shadow:0 0 0 4px var(--bolt); }
.ir-head{ display:flex; align-items:center; gap:8px; }
.ir-title{ flex:1; display:flex; flex-direction:column; line-height:1.15; }
.ir-title small{ font-size:13px; color:var(--muted-ink); font-weight:800; }
.ir-fam{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:800; }
.ir-stats{ display:flex; flex-wrap:wrap; gap:4px; }
.stat{ background:var(--paper-2); border-radius:8px; padding:1px 7px; font-size:14px; font-weight:800; }
.ir-text{ font-size:15px; }
.ir-actions{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ir-sell{ font-weight:800; font-size:14px; }
.ir-swap{ display:flex; justify-content:center; padding-top:4px; }
.insp-sets ul{ margin:4px 0 0; padding-left:18px; font-size:15px; }
.insp-sets li.next{ color:var(--muted-ink); }
.setgroup{ border-left:6px solid var(--fam); padding-left:8px; margin-top:8px; }
.sg-head{ display:flex; align-items:center; gap:6px; font-weight:800; }

/* ---- handoff ---- */
.handoff{ align-items:center; justify-content:center; text-align:center; padding:24px; gap:10px; }
.ho-glyph{ filter:drop-shadow(0 4px 0 rgba(0,0,0,.25)); }
.ho-sub{ font-weight:800; opacity:.95; }
.ho-name{ display:flex; flex-direction:column; font-size:clamp(34px, 11vw, 56px); line-height:1.05; }
.ho-name small{ font-size:20px; }
.hold{ position:relative; width:176px; height:176px; margin:18px auto 8px; border:4px solid currentColor; border-radius:50%; background:rgba(255,255,255,.14); color:inherit; font-weight:800; font-size:19px;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.hold:disabled{ opacity:.55; }
.hold.armed{ background:rgba(255,255,255,.28); }
.hold-ring{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hold-label{ position:relative; }
.ho-only{ max-width:320px; font-weight:600; }
.napping{ align-items:center; justify-content:center; text-align:center; gap:14px; background:var(--ink); color:var(--paper); padding:24px; }
.napping .btn .seatdot{ width:28px; height:28px; }

/* ---- tactic ---- */
.oppline{ gap:8px; }
.chipgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bigchip{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 8px; min-height:170px; background:var(--paper); border:var(--b) solid var(--ink); border-radius:18px; box-shadow:var(--sh); text-align:center; }
.bigchip b{ font-size:20px; }
.bigchip .how{ font-size:14px; line-height:1.25; }
.bigchip.on{ background:var(--tac); color:var(--ink); transform:translateY(-2px); box-shadow:0 6px 0 var(--ink); }
.bigchip.on .bc-icon{ color:var(--ink); }
.bc-icon{ width:62px; height:62px; display:grid; place-items:center; color:var(--tac); background:#FFFFFF; border:var(--b) solid var(--ink); border-radius:50%; }
.bc-line{ display:flex; flex-direction:column; font-size:13px; font-weight:800; }
.bc-line .beats{ color:var(--ok-d); } .bc-line .weak{ color:var(--danger-d); }
.bigchip.on .bc-line .beats, .bigchip.on .bc-line .weak{ color:var(--ink); }
.bigchip .tag.last{ position:absolute; top:6px; right:6px; }

/* ---- pit ---- */
.fightlist{ display:flex; flex-wrap:wrap; gap:8px; }
.fightpick{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:56px; padding:6px 10px; border:var(--b) solid var(--ink); border-radius:12px; background:#FFFFFF; }
.fightpick.on{ background:#FFF3C4; box-shadow:0 0 0 3px var(--bolt); }
.fightpick:disabled{ opacity:.6; }
.sidepick{ display:flex; flex-wrap:wrap; gap:8px; }
.sidebtn{ --seat:#999; min-height:52px; padding:4px 12px 4px 4px; border:var(--b) solid var(--ink); border-left:8px solid var(--seat); border-radius:12px; background:#FFFFFF; display:inline-flex; align-items:center; gap:6px; }
.sidebtn.on{ background:#FFF3C4; box-shadow:0 0 0 3px var(--bolt); }
.hazgrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.hazbtn{ display:flex; flex-direction:column; align-items:center; gap:2px; min-height:76px; padding:6px 4px; border:var(--b) solid var(--ink); border-radius:12px; background:#FFFFFF; font-weight:800; text-align:center; }
.hazbtn small{ font-size:13px; line-height:1.1; }
.hazbtn.on{ background:#FFE3CF; box-shadow:0 0 0 3px var(--league); }
.lanes{ position:absolute; inset:0; }
.lane{ position:absolute; top:0; bottom:0; width:28%; border:3px dashed rgba(27,31,59,.55); border-radius:10px; background:rgba(255,255,255,.12); display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px; font-weight:800; font-size:14px; min-height:44px; }
.lane span{ background:var(--paper); border-radius:8px; padding:0 6px; }
.lane.on{ border:3px solid var(--league); background:rgba(255,122,26,.3); }

/* ---- salvage ---- */
.bothost.salv{ min-height:180px; }
.salvlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.salvrow{ --fam:#E9E3D6; width:100%; display:flex; align-items:center; gap:10px; min-height:60px; padding:6px 10px; border:var(--b) solid var(--ink); border-left:10px solid var(--fam); border-radius:12px; background:#FFFFFF; text-align:left; }
.salvrow.on{ background:#FFF3C4; box-shadow:0 0 0 3px var(--bolt); }
.salvrow.off{ opacity:.55; }

/* ---- results ---- */
.resfight{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; position:relative; padding-top:22px; }
.resfight.rumble{ display:block; padding-top:14px; }
.places{ margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; }
.places li{ display:flex; align-items:center; gap:8px; }
.reslist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.resrow{ position:relative; display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:8px; background:#FFFFFF; border:2px solid var(--ink); border-radius:12px; overflow:hidden; }
.resrow.me{ background:#FFF3C4; }
.resrow.pit{ background:var(--paper-2); }
.stamp{ position:absolute; right:10px; top:50%; transform:translateY(-50%) rotate(-10deg); border:4px solid var(--danger-d); color:var(--danger-d); padding:2px 10px; font-weight:800; font-size:20px; letter-spacing:.08em; background:rgba(255,248,236,.9); animation:stamp 380ms 300ms cubic-bezier(.3,1.6,.5,1) both; }
@keyframes stamp{ from{ transform:translateY(-50%) rotate(-10deg) scale(2.4); opacity:0; } }
.betline{ font-weight:800; text-align:center; }

/* ---- podium ---- */
.podiumhost{ min-height:210px; display:grid; place-items:end center; padding-top:calc(8px + var(--safe-t)); flex:none; }
.podium2d{ display:flex; align-items:flex-end; gap:6px; }
.step{ display:flex; flex-direction:column; align-items:center; gap:4px; width:110px; }
.step .block{ width:100%; background:var(--league); border:var(--b) solid var(--ink); border-radius:10px 10px 0 0; display:grid; place-items:center; font-size:28px; font-weight:800; }
.step.p1 .block{ height:90px; background:var(--bolt); } .step.p2 .block{ height:64px; } .step.p3 .block{ height:44px; background:#E7B98A; }
.pd-bot svg{ width:88px; height:auto; }
.step.empty{ visibility:hidden; }
.champline{ display:flex; align-items:center; justify-content:center; gap:8px; }
.awardgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.award{ display:flex; gap:8px; align-items:flex-start; padding:10px; }
.aw-icon{ width:44px; height:44px; flex:none; display:grid; place-items:center; background:var(--bolt); border:var(--b) solid var(--ink); border-radius:50%; }
.xplist, .toplist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.xplist li, .toplist li{ display:flex; justify-content:space-between; gap:8px; padding:2px 0; border-bottom:1px dashed var(--line); }
ol.toplist{ counter-reset:tl; } ol.toplist li::before{ counter-increment:tl; content:counter(tl) "."; font-weight:800; width:26px; }
ol.toplist li span{ flex:1; }

/* ---- audience ---- */
.audhead{ display:flex; gap:8px; justify-content:center; }
.audfight{ display:flex; flex-direction:column; gap:4px; padding:6px 0; border-top:1px dashed var(--line); }
.minicards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px; }
.minicard{ --fam:#999; position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:110px; padding:30px 8px 14px; border:var(--b) solid var(--ink); border-radius:12px; background:#FFFFFF; text-align:left; overflow:hidden; font-size:14px; }
.mc-band{ position:absolute; left:0; right:0; top:0; height:24px; border-bottom:2px solid var(--ink); font-weight:800; padding-left:8px; color:var(--ink); }
.vbar{ position:absolute; left:0; right:0; bottom:0; height:8px; background:var(--paper-2); }
.vbar i{ display:block; height:100%; background:var(--league); }
.standings{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.standings li{ display:flex; align-items:center; gap:6px; min-height:36px; }
.standings li.pit{ opacity:.7; }
.watchhost{ min-height:240px; border:var(--b) solid var(--ink); border-radius:var(--r); background:var(--ink-2); }
.hazgrid.three{ grid-template-columns:repeat(3, 1fr); }

/* ---- stream view (1920×1080 scaled) ---- */
.streamview{ background:var(--ink); color:var(--paper); }
.sv-frame{ position:absolute; left:50%; top:50%; width:1920px; height:1080px; transform-origin:center; display:grid; grid-template-columns:1560px 360px; grid-template-rows:100px 980px; font-size:26px; }
.sv-top{ grid-column:1 / 3; display:flex; align-items:center; gap:24px; padding:0 30px; background:var(--ink-2); border-bottom:4px solid var(--league); }
.sv-top .rpip svg{ width:34px; height:34px; }
.sv-phase{ font-size:36px; }
.sv-top .countdown{ width:64px; height:64px; } .sv-top .cd-num{ color:var(--ink); font-size:24px; }
.sv-main{ position:relative; overflow:hidden; }
.sv-center, .sv-lobby{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; }
.sv-center h1, .sv-lobby h1{ font-size:64px; }
.sv-bigcode{ font-size:180px; font-weight:800; letter-spacing:.14em; color:var(--bolt); }
.sv-seats{ display:flex; flex-wrap:wrap; gap:24px; justify-content:center; max-width:1300px; font-size:32px; }
.sv-workshop{ padding:24px 30px; display:flex; flex-direction:column; gap:20px; height:100%; }
.sv-bots{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.sv-bot{ background:var(--paper); color:var(--ink); border-radius:18px; border:4px solid var(--ink); padding:10px; display:flex; flex-direction:column; align-items:center; }
.sv-sketch svg{ width:220px; height:auto; }
.sv-shop{ display:flex; gap:16px; }
.sv-card{ --fam:#999; position:relative; flex:1; min-height:160px; background:var(--paper); color:var(--ink); border:4px solid var(--ink); border-radius:18px; padding:34px 12px 22px; display:flex; flex-direction:column; gap:4px; overflow:hidden; }
.sv-card .mc-band{ height:30px; font-size:22px; }
.sv-card .vbar{ height:14px; }
.sv-stagehole{ height:100%; }
.sv-side{ background:var(--paper); color:var(--ink); padding:20px; display:flex; flex-direction:column; gap:22px; overflow:hidden; border-left:4px solid var(--ink); }
.sv-side h3{ font-size:28px; }
.sv-side .standings li{ font-size:22px; min-height:48px; }
.sv-bets, .sv-feed{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:20px; }
.sv-bets li{ display:flex; justify-content:space-between; }
.sv-qr{ position:absolute; left:24px; bottom:24px; display:flex; align-items:flex-end; gap:16px; background:var(--paper); color:var(--ink); border:4px solid var(--ink); border-radius:18px; padding:12px; }
.sv-qr .qr{ width:170px; border:0; padding:0; }
.sv-code{ font-size:64px; letter-spacing:.12em; line-height:1; }
.sv-top10{ color:var(--ink); min-width:600px; font-size:30px; }
.sv-logo svg{ display:block; }

/* ---- how to play ---- */
.howtrack{ flex:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.howtrack::-webkit-scrollbar{ display:none; }
.howcard{ flex:0 0 calc(100% - 32px); margin:16px; scroll-snap-align:center; display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center; overflow-y:auto; }
.howart{ min-height:190px; display:grid; place-items:center; }
.howart svg{ max-width:100%; height:auto; }
.howcard p{ font-size:17px; max-width:440px; }
.dots{ display:flex; gap:6px; }
.dots i{ width:10px; height:10px; border-radius:50%; background:var(--line); border:2px solid var(--ink); }
.dots i.on{ background:var(--league); }
.footer.row{ flex-direction:row; }

/* ---- scorebug / fight HUD ---- */
.scorebug{ position:absolute; left:0; right:0; top:0; bottom:0; pointer-events:none; display:flex; flex-direction:column; justify-content:space-between; padding:calc(6px + var(--safe-t)) 8px calc(10px + var(--safe-b)); }
.bug-top{ display:grid; grid-template-columns:1fr auto 1fr; gap:6px; align-items:start; }
.bug-top.rumble{ grid-template-columns:1fr; justify-items:center; }
.bug-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:4px; width:100%; }
.bug-mid{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.plate{ display:flex; align-items:center; gap:6px; background:var(--ink-2); color:var(--paper); border:var(--b) solid var(--ink); border-radius:12px; padding:4px 6px; min-width:0; }
.plate.pl-b{ flex-direction:row-reverse; text-align:right; }
.plate.out{ opacity:.45; }
.pl-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pl-head{ display:flex; align-items:center; gap:4px; min-width:0; }
.plate.pl-b .pl-head{ flex-direction:row-reverse; }
.pl-name{ flex:1; min-width:0; font-weight:800; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-tac .tacchip{ color:var(--tac); padding:1px; background:var(--paper); }
.pl-tac .tacchip svg{ width:16px; height:16px; }
.fightstage{ position:relative; flex:1; min-height:0; }
.hpbar{ position:relative; height:12px; background:#0E1127; border-radius:6px; overflow:hidden; border:2px solid var(--ink); }
.hpbar i{ position:absolute; top:0; bottom:0; left:0; }
.hp-trail{ background:#FFFFFF; transition:width 450ms ease-out; }
.hp-fill{ transition:width 120ms linear; }
.hp-shield{ background:repeating-linear-gradient(45deg, var(--shield) 0 4px, rgba(125,227,255,.6) 4px 8px); opacity:.9; }
.plate.pl-b .hpbar i{ left:auto; right:0; }
.plate.low .hp-fill{ background:var(--danger) !important; }
.pl-status{ display:flex; gap:3px; flex-wrap:wrap; min-height:16px; }
.plate.pl-b .pl-status{ justify-content:flex-end; }
.st{ display:inline-flex; align-items:center; gap:1px; font-size:13px; font-weight:800; }
.st .meter{ display:inline-block; width:22px; height:6px; background:#0E1127; border-radius:3px; overflow:hidden; }
.st .meter i{ display:block; height:100%; background:var(--bolt); }
.st-burn{ color:#FF8A4C; } .st-jolt{ color:var(--bolt); } .st-rust{ color:#D38A52; } .st-slow{ color:#B9C3D3; } .st-mag{ color:#A792FF; } .st-stun{ color:#FFF3A0; } .st-wind{ color:#E7C95A; } .st-soak{ color:var(--sky); }
.pl-auto{ display:inline-grid; }
.fclock{ background:var(--ink); color:var(--paper); border:var(--b) solid var(--paper); border-radius:10px; padding:2px 10px; font-weight:800; font-size:20px; font-variant-numeric:tabular-nums; }
.fclock.red{ color:#FF8C8F; border-color:var(--danger); }
.boo{ background:var(--danger-d); color:#FFFFFF; font-weight:800; border-radius:8px; padding:0 8px; }
.ticker{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.tk{ background:var(--bolt); color:var(--ink); border:var(--b) solid var(--ink); border-radius:10px; padding:2px 12px; font-weight:800; font-size:18px; animation:tkIn 180ms ease-out both; }
@keyframes tkIn{ from{ transform:scale(1.4); opacity:0; } }
.fighttabs{ display:flex; gap:6px; overflow-x:auto; padding:4px 8px; pointer-events:auto; }
.ftab{ flex:none; min-height:48px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 8px; border:var(--b) solid var(--ink); border-radius:12px; background:var(--paper); }
.ftab[aria-selected="true"]{ background:var(--bolt); }
.ft-dots{ display:flex; gap:2px; } .ft-bars{ display:flex; gap:3px; }
.mini{ display:block; width:28px; height:5px; background:#0E1127; border-radius:3px; overflow:hidden; } .mini i{ display:block; height:100%; width:100%; }

/* ---- sim check / sandbox ---- */
.simbadge{ align-self:center; font-size:64px; font-weight:800; padding:6px 30px; border:4px solid var(--ink); border-radius:18px; box-shadow:var(--sh); }
.simbadge.pass{ background:var(--ok); color:#FFFFFF; } .simbadge.fail{ background:var(--danger-d); color:#FFFFFF; }
.sandcols{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:760px){ .sandcols{ grid-template-columns:1fr 1fr; } }
.sandcols .row .field{ flex:1; }
.sandcols .row .field:last-child{ flex:0 0 76px; }

/* ---- desktop ---- */
@media (min-width:900px){
  .shop-mid{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .bothost{ max-width:420px; }
  .chipgrid{ grid-template-columns:repeat(4, 1fr); }
}

/* ---- reduced motion (Settings override or system; class set by the app) ---- */
.rm *, .rm *::before, .rm *::after{ animation-duration:1ms !important; animation-delay:0ms !important; transition-duration:1ms !important; scroll-behavior:auto !important; }
.rm .bolts .bolt.pop{ opacity:.25; animation:none !important; }
.rm .stamp{ animation:none !important; }

/* ---- wave 2: fight, waiting, network ---- */
.fight{ display:flex; flex-direction:column; }
.tabsbox{ flex:none; }
.tabsbox .fighttabs{ background:rgba(27,31,59,.55); }
.fightstage{ position:relative; flex:1; min-height:0; }
.fighthost{ position:absolute; inset:0; }
.fighthost canvas.td{ width:100%; height:100%; display:block; }
.bugbox{ position:absolute; inset:0; pointer-events:none; }
.bugbox .scorebug{ padding-top:6px; }
.skiprow{ position:absolute; right:12px; bottom:calc(14px + var(--safe-b)); z-index:3; }
.rumbleintro{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; background:rgba(27,31,59,.55); color:var(--paper); }
.streamfight .bugbox{ transform-origin:top center; }
.netbanner{ position:fixed; top:calc(6px + var(--safe-t)); left:50%; transform:translateX(-50%); background:var(--bolt); color:var(--ink); border:var(--b) solid var(--ink); border-radius:999px; padding:4px 14px; font-weight:800; z-index:9; }
.donelist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.donelist li{ display:flex; align-items:center; gap:8px; padding:6px 10px; background:#FFFFFF; border:2px solid var(--ink); border-radius:12px; min-height:48px; }
.watchhost canvas.td{ width:100%; height:260px; display:block; border-radius:12px; }
body.nostage .fight.see-through{ background:linear-gradient(#D9A86C, #C8955A); }
body:not(.nostage) .podiumhost{ min-height:44vh; }
body:not(.nostage) .shop .binwarn{ font-size:13px; }
.opprow .row{ flex-wrap:nowrap; }
.opprow small{ white-space:nowrap; font-weight:800; }
.sv-mini{ position:absolute; right:10px; top:120px; width:min(34vw, 300px); background:rgba(255,248,236,.94); border:var(--b) solid var(--ink); border-radius:var(--r); padding:10px; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.sv-mini .standings li{ min-height:30px; font-size:14px; }
.sv-miniqr{ display:flex; align-items:center; gap:8px; }
.sv-miniqr .qr{ width:90px; padding:3px; }
.sv-miniqr b{ font-size:26px; letter-spacing:.1em; }
@media (max-width:700px){ .sv-mini{ display:none; } }

/* ---- grid tiles: compact scorebugs (One Phone / Stream View grid) ---- */
.tilelayer{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.tile{ position:absolute; display:flex; flex-direction:column; align-items:stretch; padding:6px; box-sizing:border-box; }
.tiletap{ position:absolute; inset:0; background:transparent; border:0; padding:0; pointer-events:auto; cursor:pointer; }
.tiletap:disabled{ pointer-events:none; }
.tiletap:focus-visible{ outline:3px solid var(--bolt); outline-offset:-3px; }
.minibug{ position:relative; display:flex; justify-content:space-between; gap:6px; pointer-events:none; }
.mb-plate{ display:flex; align-items:center; gap:4px; min-width:0; flex:0 1 48%; background:var(--ink-2); border:2px solid var(--ink); border-radius:10px; padding:2px 5px 2px 2px; }
.mb-plate.mb-b{ flex-direction:row-reverse; padding:2px 2px 2px 5px; }
.mb-plate.out{ opacity:.45; }
.mb-hp{ position:relative; flex:1; min-width:24px; height:8px; background:#0E1127; border-radius:4px; overflow:hidden; }
.mb-hp i{ position:absolute; top:0; bottom:0; left:0; transition:width 120ms linear; }
.mb-b .mb-hp i{ left:auto; right:0; }
.mb-hp .mb-shield{ background:repeating-linear-gradient(45deg, var(--shield) 0 3px, rgba(125,227,255,.6) 3px 6px); }
.mb-plate.low .mb-hp i:first-child{ background:var(--danger) !important; }
.mb-auto{ display:inline-grid; }
.scorebug.tickeronly .bug-top{ visibility:hidden; }
.gridbtn{ position:absolute; left:10px; bottom:calc(14px + var(--safe-b)); z-index:3; }
.hofrow{ min-height:48px; }
.hofseats .btn.small{ min-height:44px; }
/* Stream View sidebar extras (bet ticker, audience top, hazard feed) */
.sv-feed li{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.sv-mini .sv-bets, .sv-mini .sv-feed{ font-size:14px; gap:4px; }
.sv-mini .toplist{ font-size:14px; }
.sv-mini section{ display:flex; flex-direction:column; gap:4px; }
.sv-mini h3{ font-size:15px; margin:0; }
.sv-side .sv-aud{ font-size:20px; }
.sv-podium .champline{ font-size:40px; }
.sv-mini{ top:56px; max-height:calc(100% - 66px); overflow:hidden; }
.sv-top10 ol.toplist li::before{ width:1.9em; flex:none; }

/* ---- tip jar (DEV/tip-jar.md): small, never a big button ---- */
.tiplink{ font-size:14px; }
.tipline{ display:flex; align-items:center; justify-content:center; gap:2px; margin-top:6px; }
.tipline .linkbtn{ font-size:14px; font-weight:700; color:var(--muted-ink); text-decoration-color:var(--line); }
.tipx{ min-width:44px; min-height:44px; border:0; background:transparent; color:var(--muted-ink); font:800 20px/1 var(--font); border-radius:10px; }
.support p{ margin:0; }