:root{
  --ink:#0b0e13;--chrome:#141922;--chrome-2:#1d2430;
  --blue:#2150e8;--blue-deep:#142f8c;
  --red:#e0372f;--red-deep:#962019;
  --go:#16b26a;--hold:#ffd23f;--gold:#ffc83d;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--ink);overflow:hidden;overscroll-behavior:none}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#fff;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:3px solid #fff;outline-offset:2px}

.arena{height:100%;height:100dvh;display:grid;grid-template-rows:1fr 10px 1fr;
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.divider{position:relative}
.divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:40px;height:40px;border-radius:50%;
  background:var(--ink);border:2px solid rgba(255,255,255,.2);display:grid;place-items:center;font-size:.72rem;font-weight:800;letter-spacing:.04em}

.side{display:flex;flex-direction:column;gap:10px;min-height:0;padding:12px;border-radius:26px;background:var(--bg)}
.side.top{transform:rotate(180deg)}
.blue{--bg:var(--blue);--deep:var(--blue-deep)}
.red{--bg:var(--red);--deep:var(--red-deep)}

.bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.score{display:flex;align-items:baseline;gap:8px;min-width:0}
.score .nm{font-size:.95rem;font-weight:600;opacity:.85}
.score .n{font-size:2.5rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.score .tg{font-size:.95rem;font-weight:600;opacity:.7}
.tools{display:flex;gap:6px}
.ico{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;padding:0}
.ico:active{background:rgba(255,255,255,.32)}
.ico:disabled{opacity:.35;cursor:default}
.ico svg{width:20px;height:20px}

.scr{flex:0 1 auto;max-height:48%;min-height:0;display:flex;flex-direction:column;gap:6px;background:var(--deep);border-radius:16px;padding:10px 12px}
.scr-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lab{font-size:.8rem;font-weight:600;opacity:.75}
.chip{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.16);border-radius:999px;padding:5px 8px 5px 12px;font-size:.82rem;font-weight:700}
.chip svg{width:14px;height:14px}
.chip:disabled{opacity:.5;cursor:default}
.mv{flex:1 1 auto;min-height:0;overflow:auto;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-weight:600;line-height:1.35;
  white-space:pre-line;word-spacing:.25em;overflow-wrap:anywhere;font-size:20px;touch-action:pan-y}

.pad{position:relative;overflow:hidden;flex:1 1 0;min-height:96px;border-radius:20px;background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  container-type:size;touch-action:none;transition:background-color .15s,border-color .15s,color .15s}
.pad>*{position:relative;z-index:1}
.pad::after{content:"";position:absolute;inset:0;background:var(--go);transform:scaleX(0);transform-origin:left;z-index:0}
.pad.both::after{animation:fill .3s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.t{font-size:clamp(2.6rem,18vmin,8.5rem);font-size:clamp(2.6rem,min(40cqh,24cqw),9rem);font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tb{font-size:.58em;opacity:.8;letter-spacing:-.02em}
.m{font-size:1.05rem;font-weight:700;padding:0 12px}
.s{font-size:.82rem;font-weight:500;opacity:.85;white-space:pre-line;padding:0 12px}
.m:empty,.s:empty{display:none}
.pad.hold{background:var(--hold);border-color:#fff;color:#14171c}
.pad.ready{background:var(--go);border-color:#fff}
.pad.run{background:rgba(8,10,15,.45);border-color:rgba(255,255,255,.25)}
.pad.win{background:var(--go);border-color:#fff}
.pad.lose{background:rgba(8,10,15,.5);border-color:rgba(255,255,255,.2)}
.pad.gold{background:var(--gold);border-color:#fff;color:#14171c}

.sheet{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(5,7,10,.74)}
.sheet[hidden]{display:none}
.sheet-card{width:min(100%,440px);max-height:100%;overflow:auto;background:var(--chrome);border-radius:26px;padding:18px 18px 20px;border-top:6px solid var(--acc,#fff);touch-action:pan-y}
.sheet-card.by0{--acc:var(--blue);transform:rotate(180deg)}
.sheet-card.by1{--acc:var(--red)}
.sheet-h{display:flex;align-items:center;justify-content:space-between}
.sheet-h h2{margin:0;font-size:1.2rem}
.done{background:#fff;color:var(--ink);border-radius:999px;padding:9px 18px;font-weight:700}
h3{margin:18px 0 8px;font-size:.85rem;font-weight:600;opacity:.7}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{height:52px;border-radius:14px;background:var(--chrome-2);font-weight:700;font-size:.95rem;border:2px solid transparent;padding:0 4px}
.tile[aria-pressed="true"]{background:#fff;color:var(--ink)}
.segs{display:flex;gap:8px}
.seg{flex:1;height:44px;border-radius:14px;background:var(--chrome-2);font-weight:700}
.seg[aria-pressed="true"]{background:#fff;color:var(--ink)}
.wide{width:100%;height:46px;border-radius:14px;background:var(--chrome-2);font-weight:700}
.wide.armed{background:#fff;color:var(--ink)}
.extras{display:grid;gap:8px;margin-top:8px}
.extras .soft{background:transparent;border:2px solid var(--chrome-2)}
.note{margin:14px 0 0;font-size:.8rem;line-height:1.45;opacity:.6}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}