/* © 2026 Moirai 命運三女神. All rights reserved. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0b0f1e;color:#fff;font-family:"PingFang HK","Noto Sans CJK TC","Microsoft JhengHei",system-ui,sans-serif;-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}
#c{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block}
#hud{position:fixed;inset:0;pointer-events:none}
.chip{display:inline-block;width:11px;height:11px;border-radius:3px;margin:0 4px;vertical-align:-1px;border:1px solid rgba(255,255,255,.6)}
#sb{position:absolute;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:rgba(8,12,28,.82);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:5px 10px;font-size:14px;white-space:nowrap;display:flex;gap:6px;align-items:center;backdrop-filter:blur(6px)}
#sb b{font-size:17px;min-width:44px;text-align:center}
#sb em{font-style:normal;background:#d7ff3a;color:#111;border-radius:6px;padding:1px 6px;font-weight:700;font-size:13px;margin-left:4px}
#pts{position:absolute;top:calc(46px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);font-size:13px;background:rgba(0,0,0,.5);padding:2px 10px;border-radius:10px}
#stam{position:absolute;top:calc(48px + env(safe-area-inset-top));left:10px;width:96px;height:14px;background:rgba(0,0,0,.55);border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.25)}
#stamf{height:100%;width:100%;background:linear-gradient(90deg,#3ddc84,#d7ff3a);transition:width .1s}
#stamf.low{background:linear-gradient(90deg,#ff5a3c,#ffb03c)}
#stam span{position:absolute;inset:0;font-size:10px;line-height:13px;text-align:center;text-shadow:0 1px 2px #000}
#mm{position:absolute;top:calc(46px + env(safe-area-inset-top));right:8px;width:108px;height:72px;border-radius:6px;border:1px solid rgba(255,255,255,.25)}
#vis{position:absolute;top:calc(68px + env(safe-area-inset-top));left:10px;font-size:12px;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:8px;border-left:4px solid #3ddc84;transition:transform .2s}
#vis[data-t="1"]{border-color:#ffd34d}#vis[data-t="2"]{border-color:#ff5a3c}#vis[data-t="3"]{border-color:#ff9f1c}
#vis.flash{transform:scale(1.25);background:rgba(180,30,30,.8)}
#toast{position:absolute;top:calc(126px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:5px;align-items:center;width:92vw;max-width:520px}
.tst{background:rgba(10,14,30,.88);border:1px solid rgba(255,255,255,.18);padding:6px 12px;border-radius:10px;font-size:14px;animation:tin .25s ease-out;transition:opacity .4s}
.tst.out{opacity:0}.tst.mini{font-size:13px}.tst.warn{border-color:#ff9f1c}.tst.ar{background:rgba(120,90,0,.9);border-color:#ffd34d}
.tst.yel{background:#c9a400;color:#111;font-weight:700}.tst.red{background:#c0102a;font-weight:700}
.tst b.pos{color:#3ddc84}.tst b.neg{color:#ff6a5c}
@keyframes tin{from{transform:translateY(-8px);opacity:0}}
#big{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%) scale(.9);opacity:0;transition:all .25s;background:rgba(8,12,28,.9);border-radius:16px;padding:14px 18px;text-align:center;width:min(90vw,460px);border:2px solid rgba(255,255,255,.2)}
#big.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#big b{font-size:24px;display:block}#big small{display:block;font-size:14px;margin-top:6px;line-height:1.45;color:#dfe6ff}
#big small.law{font-size:12px;color:#aab4d8}#big small.pt{color:#d7ff3a;font-weight:700}
#big.ok{border-color:#3ddc84}#big.bad{border-color:#ff5a3c}#big.mid{border-color:#ffd34d}#big.warn{border-color:#ff9f1c}#big.goal{border-color:#d7ff3a}#big.goal b{font-size:34px}
#tip{position:absolute;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(215,255,58,.95);color:#111;padding:8px 14px;border-radius:12px;font-size:14px;opacity:0;transition:opacity .3s;width:max-content;max-width:88vw;text-align:center}
#tip.show{opacity:1}
#ticker{position:absolute;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom));text-align:center;font-size:13px;color:#fff;text-shadow:0 1px 3px #000;opacity:0}
#ticker{transition:opacity .3s}
#ticker.run{opacity:1}
@keyframes tk{0%{opacity:0;transform:translateY(6px)}10%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
#refcam{position:absolute;inset:0;opacity:0;transition:opacity .15s;box-shadow:inset 0 0 120px 40px rgba(0,0,0,.7)}
#refcam.on{opacity:1}
#refcam .bar{position:absolute;left:0;right:0;height:9vh;background:#000}#refcam .t{top:0}#refcam .b{bottom:0}
#refcam span{position:absolute;top:calc(9vh + 8px);left:12px;background:#c0102a;padding:3px 9px;border-radius:6px;font-size:13px;font-weight:700}
#fps{position:absolute;bottom:4px;right:6px;font-size:11px;color:#d7ff3a}
#joy{position:fixed;left:0;bottom:0;width:50vw;height:45vh;display:none}
#knob{position:fixed;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.35);border:2px solid rgba(255,255,255,.7);left:90px;bottom:auto;top:calc(100% - 120px);pointer-events:none;box-shadow:0 0 0 34px rgba(255,255,255,.08)}
#knob.on{background:rgba(215,255,58,.55)}
.jl{position:absolute;left:46px;bottom:calc(40px + env(safe-area-inset-bottom));font-size:11px;opacity:.6}
#sprint,#whistle{position:fixed;border:none;color:#111;font-weight:800;border-radius:50%;display:none;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-family:inherit}
#sprint small,#whistle small{font-size:11px;margin-top:2px}
#whistle{right:16px;bottom:calc(34px + env(safe-area-inset-bottom));width:96px;height:96px;font-size:38px;background:radial-gradient(circle at 35% 30%,#fff,#d7ff3a 60%,#9bc400);box-shadow:0 4px 16px rgba(0,0,0,.5)}
#whistle.glow{animation:gl .7s infinite alternate}
#whistle.pressed{transform:scale(.9)}
@keyframes gl{to{box-shadow:0 0 0 10px rgba(215,255,58,.35),0 0 30px #d7ff3a}}
#sprint{right:124px;bottom:calc(40px + env(safe-area-inset-bottom));width:66px;height:66px;font-size:24px;background:rgba(255,255,255,.8)}
#sprint.on{background:#ffb03c}
body.playing #whistle{display:flex}
body.playing.touch #sprint,body.playing.touch #joy{display:flex}
body.playing:not(.touch) #whistle{width:80px;height:80px;font-size:30px}
#dec{position:fixed;left:50%;bottom:0;transform:translate(-50%,110%);transition:transform .25s;width:min(100vw,560px);background:rgba(8,12,28,.95);border-top:2px solid #d7ff3a;border-radius:16px 16px 0 0;padding:10px 10px calc(12px + env(safe-area-inset-bottom));z-index:5}
#dec.show{transform:translate(-50%,0)}
.dh{font-weight:800;font-size:16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vt{font-size:12px;padding:2px 7px;border-radius:8px;font-weight:700}.vt.ok{background:#1f8a4c}.vt.mid{background:#a07b00}.vt.bad{background:#a8261c}
.dd{font-size:12px;opacity:.7}
.desc{font-size:14px;line-height:1.5;margin:6px 2px 8px;color:#e6ebff}
.row{display:flex;gap:6px;margin-bottom:6px}
.cols{display:flex;gap:6px}.col{flex:1;display:flex;flex-direction:column;gap:5px}
.th{text-align:center;font-weight:800;font-size:14px;border-bottom:3px solid;padding-bottom:2px}
button.ch{font-family:inherit;background:#1c2440;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:8px 4px;font-size:14px;font-weight:700;line-height:1.2;cursor:pointer}
button.ch small{font-weight:400;font-size:12px;opacity:.85}
button.ch.wide{flex:1;padding:10px 4px}
button.ch.y{background:#3d3410}button.ch.r{background:#431219}
button.ch:active,button.ch.tap{background:#d7ff3a;color:#111}
.hint{font-size:11px;opacity:.6;margin-top:6px;text-align:center}
#screen{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(8,12,28,.55),rgba(8,12,28,.9));z-index:8;padding:14px;overflow:auto}
#screen.show{display:flex}
.card{background:rgba(14,20,42,.94);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:18px;width:min(94vw,480px);max-height:92vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.kick{color:#d7ff3a;font-size:13px;font-weight:700;letter-spacing:2px}
.card h1{margin:4px 0 8px;font-size:30px}.card h1 span{font-size:18px;background:#d7ff3a;color:#111;border-radius:8px;padding:2px 8px;vertical-align:middle}
.vs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:15px;margin-bottom:8px}.vs em{font-style:normal;color:#d7ff3a;font-weight:900;margin:0 4px}
.how{padding-left:20px;margin:8px 0;font-size:14px;line-height:1.55}.how li{margin-bottom:6px}
.len{font-size:12px;opacity:.7;margin-bottom:10px}
.go{width:100%;font-family:inherit;font-size:20px;font-weight:900;padding:13px;border:none;border-radius:14px;background:#d7ff3a;color:#111;cursor:pointer}
.rep h2{margin:2px 0 8px}.gr{float:right;font-size:54px;font-weight:900;line-height:1;color:#d7ff3a}.gr.gC,.gr.gD{color:#ff6a5c}
.final{font-size:16px;margin-bottom:6px}.final b{font-size:20px;margin:0 6px}
.tot{font-size:15px;margin-bottom:8px}.tot b{font-size:26px;color:#d7ff3a}.tot small{opacity:.7;margin-left:6px}
.log{list-style:none;padding:0;margin:0 0 10px;font-size:14px}.log li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.log small{opacity:.75}.log .pos{color:#3ddc84;font-weight:700}.log .neg{color:#ff6a5c;font-weight:700}
.stats{font-size:12px;opacity:.85;margin-bottom:10px}
.asr{font-size:14px;line-height:1.6;background:rgba(215,255,58,.08);border-left:3px solid #d7ff3a;padding:8px 10px;border-radius:8px;margin-bottom:12px}
#mute{position:fixed;top:calc(124px + env(safe-area-inset-top));right:8px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:10px;font-size:20px;padding:5px 10px;z-index:9}
#camb{position:fixed;top:calc(166px + env(safe-area-inset-top));right:8px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:10px;font-size:12px;font-weight:700;padding:6px 8px;z-index:9;display:none}
body.playing #camb{display:block}
#loading{position:fixed;inset:0;z-index:20;background:#0b0f1e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;transition:opacity .4s}
#loading.done{opacity:0;pointer-events:none}
#loading .lt{font-size:20px;font-weight:900;letter-spacing:1px}
#loading .lb{width:min(70vw,320px);height:10px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
#ldbar{height:100%;width:0;background:linear-gradient(90deg,#75aadb,#d7ff3a);transition:width .2s}
#loading .ls{font-size:12px;opacity:.7}
.card .snd{margin:8px 0 2px;padding:8px 10px;border-radius:10px;background:rgba(215,255,58,.12);border:1px solid rgba(215,255,58,.45);font-size:13px;line-height:1.45}
.betaBadge{position:fixed;bottom:calc(4px + env(safe-area-inset-bottom));left:8px;background:#ff4d6d;color:#fff;font-size:11px;font-weight:800;padding:3px 8px;border-radius:8px;z-index:9;pointer-events:none}
footer{position:fixed;bottom:calc(4px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font-size:10px;opacity:.55;z-index:9;pointer-events:none;white-space:nowrap}
@media (orientation:landscape) and (max-height:500px){#big{top:45%}#dec{width:min(100vw,720px)}.desc{font-size:13px;margin:4px 2px 6px}button.ch{padding:5px 4px;font-size:13px}#tip{bottom:120px}}
body:not(.playing) #hud{display:none}
#screen{padding-bottom:30px}
#refcam span{top:calc(9vh + 10px)}
@media (max-width:420px){#sb{font-size:13px;padding:4px 8px}#sb b{font-size:16px}#big b{font-size:21px}#big small{font-size:13px}}

/* v3: quick restart / offside calls */
#call{position:fixed;left:50%;bottom:calc(140px + env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;pointer-events:none;transition:all .18s;width:min(94vw,520px);background:rgba(8,12,28,.94);border:2px solid #d7ff3a;border-radius:16px;padding:10px 12px 12px;z-index:12;text-align:center}
#call.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#call .ct{font-weight:900;font-size:17px;margin-bottom:4px}#call .cd{font-size:13px;color:#dfe6ff;margin-bottom:8px;line-height:1.4}
#call .cr{display:flex;gap:8px}#call button{flex:1;font-family:inherit;font-weight:800;font-size:16px;padding:14px 6px;border-radius:12px;border:2px solid rgba(255,255,255,.25);background:#1c2440;color:#fff;cursor:pointer}
#call button small{display:block;font-size:11px;font-weight:600;opacity:.8;margin-top:2px}
#call button.tap{background:#d7ff3a;color:#111}
#call .tb{height:5px;border-radius:3px;background:rgba(255,255,255,.15);margin-top:9px;overflow:hidden}#call .tb i{display:block;height:100%;background:#ffb03c;width:100%}
#advb{position:fixed;right:122px;bottom:calc(120px + env(safe-area-inset-bottom));width:70px;height:70px;border-radius:50%;border:none;font-size:26px;font-weight:800;display:none;flex-direction:column;align-items:center;justify-content:center;line-height:1;background:radial-gradient(circle at 35% 30%,#fff,#7fd3ff 60%,#2a8bd0);color:#111;z-index:9;box-shadow:0 4px 14px rgba(0,0,0,.4)}
#advb small{font-size:11px;margin-top:2px}
body.playing #advb.on{display:flex;animation:gl .7s infinite alternate}
body.playing:not(.touch) #advb{right:110px;bottom:calc(30px + env(safe-area-inset-bottom))}
#skipb{position:fixed;right:12px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:14;display:none;font-family:inherit;font-weight:800;font-size:15px;padding:10px 16px;border-radius:12px;border:2px solid rgba(255,255,255,.4);background:rgba(8,12,28,.8);color:#fff}
body.pre #skipb{display:block}
body.pre #whistle,body.pre #sprint,body.pre #joy,body.pre #advb{display:none!important}
#replayb{position:fixed;inset:0;z-index:11;display:none;box-shadow:inset 0 0 0 6px #ffb03c;pointer-events:auto}
#replayb.on{display:block}
#replayb span{position:absolute;top:calc(64px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:#ffb03c;color:#111;font-weight:900;padding:4px 14px;border-radius:8px;font-size:15px}
#replayb small{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font-size:12px;opacity:.8}
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .35s;z-index:13}#fade.on{opacity:1}
.rep .hl{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px}.rep .hl figure{margin:0;flex:0 0 auto;width:150px;font-size:11px;text-align:left}.rep .hl img{width:150px;height:84px;object-fit:cover;border-radius:8px;display:block;background:#222}
.rep .posg{display:flex;gap:10px;align-items:center;margin:8px 0}.rep .posg canvas{width:180px;height:116px;border-radius:8px;flex:0 0 auto}.rep .posg .pg{font-size:30px;font-weight:900;color:#d7ff3a}
body.replay #whistle,body.replay #sprint,body.replay #joy,body.replay #advb,body.replay #refcam,body.replay #tip{display:none!important}
body.rep #camb,body.rep #advb,body.rep #mute{display:none!important}
body.calling #tip{display:none}
#call{bottom:auto;top:calc(112px + env(safe-area-inset-top))}
body.calling #toast{opacity:0}
body.calling #joy .jl{display:none}

/* v3.1: reading cards (stay until OK), tips with OK, gentle call timer, bigger action buttons, version */
#big.card{pointer-events:auto;top:34%;padding:16px 18px 14px;z-index:15;max-height:70vh;overflow:auto}
#big.card small{font-size:15px}#big.card small.law{font-size:13px}#big small u{text-decoration:none;color:#d7ff3a;font-weight:800}
#big .okb{display:block;width:100%;margin-top:12px;font-family:inherit;font-size:20px;font-weight:900;padding:13px;border:none;border-radius:14px;background:#d7ff3a;color:#111;cursor:pointer;pointer-events:auto}
#big .okb:active{transform:scale(.97)}
body.carding #toast,body.carding #tip,body.carding #ticker{opacity:0!important}
body.carding #whistle,body.carding #sprint,body.carding #advb{opacity:.35;pointer-events:none}
#tip{pointer-events:none;display:flex;align-items:center;gap:10px}
#tip .tok{pointer-events:auto;font-family:inherit;font-weight:900;font-size:15px;border:none;border-radius:10px;background:#111;color:#d7ff3a;padding:8px 14px;flex:0 0 auto}
#tip:not(.show) .tok{pointer-events:none}
#call .tb{height:4px;background:rgba(255,255,255,.1)}#call .tb i{background:#7fb6ff;transition:width .2s linear}
#call .nt{font-size:12px;color:#bcd0ff;margin-top:8px}
#sprint,#whistle,#advb{-webkit-user-select:none;user-select:none;touch-action:none}
#sprint .ic,#whistle .ic,#advb .ic{display:block;pointer-events:none}
#whistle{width:104px;height:104px;right:calc(14px + env(safe-area-inset-right));bottom:calc(26px + env(safe-area-inset-bottom));border:3px solid rgba(255,255,255,.85);box-shadow:0 6px 18px rgba(0,0,0,.5),inset 0 -6px 12px rgba(0,0,0,.15)}
#whistle .ic{width:54px;height:54px}
#whistle small{font-size:14px;font-weight:900;margin-top:1px}
#sprint{width:78px;height:78px;right:calc(130px + env(safe-area-inset-right));bottom:calc(30px + env(safe-area-inset-bottom));background:radial-gradient(circle at 35% 30%,#fff,#e9edf5 60%,#b8c0d0);border:3px solid rgba(255,255,255,.8);box-shadow:0 5px 14px rgba(0,0,0,.45)}
#sprint .ic{width:38px;height:38px}#sprint small{font-size:12px;font-weight:900;margin-top:1px}
#sprint.on{background:radial-gradient(circle at 35% 30%,#fff,#ffb03c 60%,#e07800)}
#advb{width:88px;height:88px;right:calc(128px + env(safe-area-inset-right));bottom:calc(30px + env(safe-area-inset-bottom));border:3px solid rgba(255,255,255,.85)}
#advb .ic{width:44px;height:44px}#advb small{font-size:12px;font-weight:900;margin-top:1px}
body.playing:not(.touch) #whistle{width:88px;height:88px}body.playing:not(.touch) #whistle .ic{width:44px;height:44px}
body.playing:not(.touch) #advb{right:116px;bottom:calc(28px + env(safe-area-inset-bottom))}
#tip{bottom:calc(214px + env(safe-area-inset-bottom))}
@media (orientation:landscape) and (max-height:500px){#tip{bottom:110px}#big.card{top:50%}}
.ver{text-align:center;font-size:12px;opacity:.75;margin-top:10px}.ver a{color:#d7ff3a}
.chl{display:none;font-size:13px;line-height:1.5;margin-top:8px;background:rgba(255,255,255,.06);border-radius:10px;padding:8px 10px}.chl.on{display:block}.chl ul{margin:2px 0 8px;padding-left:18px}

/* v3.2 chaos events */
body.chaos #whistle,body.chaos #sprint,body.chaos #joy,body.chaos #advb,body.chaos #tip{display:none!important}
#call.chaos{border-color:#ff4d4d;background:rgba(40,6,10,.95);box-shadow:0 0 0 3px rgba(255,77,77,.25),0 10px 30px rgba(0,0,0,.6)}
#call.chaos .ct{font-size:19px;color:#ffd0d0}#call.chaos .cr{flex-direction:column;gap:7px}
#call.chaos button{padding:12px 8px;font-size:17px;text-align:left}#call.chaos button small{font-size:12px}
#call.chaos button[data-k="var"]{border-color:#7fb6ff}#call.chaos button[data-k="keep"]{border-color:#ff9f1c}#call.chaos button[data-k="sec"]{border-color:#e8ff2a}
#call.chaos .tb i{background:#ff8a8a}
.gr.gF{color:#ff3b3b}
.rep .blk{background:linear-gradient(90deg,#2a0508,#4a0a10);border:2px solid #ff3b3b;border-radius:12px;padding:10px 12px;margin:6px 0 10px;text-align:center}
.rep .blk b{display:block;font-size:24px;color:#ff6a6a;letter-spacing:2px}.rep .blk small{font-size:13px;opacity:.85}

/* v4 graphics quality toggle */
/* v4.9: 4-option calls (dissent) and penalty retake calls */
#call.grid .cr{flex-wrap:wrap}#call.grid button{flex:1 1 44%;padding:12px 6px;font-size:15px}
#call.pk{border-color:#ffb03c}

#knob.spr{background:radial-gradient(circle at 35% 30%,#fff,#ffb03c 60%,#e07800)!important;box-shadow:0 0 18px #ffb03c}

/* v6.0 TV-style team sheet before the walk-out */
#lineup{position:fixed;inset:0;z-index:16;display:none;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(4,8,22,.92),rgba(4,8,22,.97));padding:10px;overflow:auto}
#lineup.on{display:flex}
#lineup .lw{width:min(980px,100%);display:flex;flex-direction:column;gap:8px}
#lineup .lh{text-align:center;font-weight:900;font-size:20px;letter-spacing:1px}#lineup .lh small{display:block;font-size:12px;font-weight:600;color:#9fb0d8;letter-spacing:0}
#lineup .lt{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#lineup .tm{flex:1 1 300px;max-width:470px;background:rgba(255,255,255,.05);border-radius:14px;padding:8px 10px;border-top:5px solid var(--c)}
#lineup .tn{font-weight:900;font-size:18px;display:flex;justify-content:space-between;align-items:baseline}#lineup .tn small{font-size:11px;color:#9fb0d8;font-weight:600}
#lineup .pitch{position:relative;height:190px;margin:6px 0;border-radius:10px;background:repeating-linear-gradient(0deg,#1f6b34 0 19px,#22743a 19px 38px);border:2px solid rgba(255,255,255,.35);overflow:hidden}
#lineup .pitch:before{content:'';position:absolute;left:30%;right:30%;bottom:-2px;height:16%;border:2px solid rgba(255,255,255,.35);border-bottom:none}
#lineup .dot{position:absolute;transform:translate(-50%,-50%);text-align:center;font-size:10.5px;font-weight:800;line-height:1.05;white-space:nowrap;text-shadow:0 1px 2px #000}
#lineup .dot i{display:block;margin:0 auto 1px;width:24px;height:24px;border-radius:50%;font-style:normal;font-size:12px;line-height:24px;border:2px solid #fff;color:var(--n);background:var(--s)}
#lineup .dot.st i{box-shadow:0 0 0 3px #ffd34d}
#lineup .bn{font-size:11.5px;color:#cdd6f0;line-height:1.5}#lineup .bn b{color:#fff}
#lineup .go2{align-self:center;font-family:inherit;font-weight:900;font-size:19px;padding:11px 30px;border-radius:14px;border:none;background:#d7ff3a;color:#111;cursor:pointer}
@media (max-height:520px){#lineup .pitch{height:150px}#lineup .lh{font-size:16px}}
#l3{position:fixed;left:max(14px,4vw);bottom:calc(84px + env(safe-area-inset-bottom));z-index:9;display:flex;align-items:stretch;opacity:0;transform:translateX(-30px);transition:all .35s;pointer-events:none;font-weight:900}
#l3.on{opacity:1;transform:none}
#l3 .n{background:var(--c,#2a5a96);color:#fff;font-size:34px;min-width:64px;display:flex;align-items:center;justify-content:center;padding:0 12px;border-radius:10px 0 0 10px}
#l3 .t{background:rgba(6,10,26,.9);padding:6px 16px 6px 12px;border-radius:0 10px 10px 0;border-left:3px solid #ffd34d}
#l3 .t b{display:block;font-size:22px;letter-spacing:.5px}#l3 .t small{display:block;font-size:12.5px;color:#b8c4e6;font-weight:700}
@media (max-width:520px){#l3 .n{font-size:26px;min-width:48px}#l3 .t b{font-size:17px}}
#wprompt{position:fixed;right:10px;bottom:calc(140px + env(safe-area-inset-bottom));z-index:13;pointer-events:none;background:#d7ff3a;color:#111;font-weight:900;font-size:19px;padding:8px 14px;border-radius:14px;box-shadow:0 4px 18px rgba(0,0,0,.5);opacity:0;transform:translateY(10px) scale(.95);transition:all .25s;text-align:center}
#wprompt small{display:block;font-size:11.5px;font-weight:700;opacity:.75}
#wprompt.on{opacity:1;transform:none;animation:wpb 1s ease-in-out infinite alternate}
#wprompt:after{content:'';position:absolute;right:38px;bottom:-9px;border:10px solid transparent;border-bottom:none;border-top-color:#d7ff3a}
@keyframes wpb{to{transform:translateY(-4px)}}
body:not(.touch) #wprompt{bottom:calc(140px + env(safe-area-inset-bottom))}
#recb{position:fixed;top:calc(198px + env(safe-area-inset-top));right:8px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:10px;font-size:12px;font-weight:700;padding:6px 8px;z-index:9;display:none}
body.playing #recb{display:block}body.rep #recb,body.pre #recb{display:none!important}
#cap{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9;max-width:min(86vw,560px);width:max-content;box-sizing:border-box;background:rgba(6,10,26,.78);color:#fff;font-weight:800;font-size:15px;padding:5px 12px;border-radius:10px;opacity:0;transition:opacity .25s;pointer-events:none;text-align:center}
#cap.on{opacity:1}
body:not(.touch) #cap{bottom:calc(56px + env(safe-area-inset-bottom))}
/* v6.0 On-Field Review monitor */
#ofr{position:fixed;inset:0;z-index:4;display:none;pointer-events:none;box-shadow:inset 0 0 0 5px #3d7bff,inset 0 0 60px rgba(0,0,0,.6)}
#ofr.on{display:block}
#ofr .tag{position:absolute;top:calc(58px + env(safe-area-inset-top));left:12px;background:#3d7bff;color:#fff;font-weight:900;font-size:14px;padding:4px 10px;border-radius:6px;letter-spacing:.5px}#ofr .tag small{opacity:.8;margin-left:6px}
#ofr .ctl{position:absolute;left:50%;transform:translateX(-50%);top:calc(92px + env(safe-area-inset-top));display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:center;width:min(96vw,640px);pointer-events:auto;background:rgba(6,10,26,.78);padding:6px;border-radius:12px}
#ofr .ctl button{font-family:inherit;font-weight:800;font-size:13px;padding:6px 9px;border-radius:9px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
#ofr .ctl button.on{background:#3d7bff;border-color:#3d7bff}
#ofr .ctl input{flex:1 1 120px;accent-color:#3d7bff}
#dec.ofr{max-height:46vh;overflow:auto;border-top-color:#3d7bff}
#dec.ofr .desc{max-height:5.5em;overflow:auto}
.rcard{margin:8px auto 10px;padding:12px 10px;border-radius:14px;background:linear-gradient(135deg,#13204a,#0b1430 60%,#2a1d05);border:2px solid #ffd34d;text-align:center}
.rcard .rl{font-size:12px;font-weight:800;color:#ffd34d;letter-spacing:2px}
.rcard .rnum{font-size:56px;font-weight:900;line-height:1;color:#fff;text-shadow:0 0 18px rgba(255,211,77,.55)}
.rcard .rst{font-size:22px;color:#ffd34d;letter-spacing:3px}
.rcard .rbadge{display:inline-block;margin-top:4px;padding:3px 10px;border-radius:20px;background:#ffd34d;color:#111;font-weight:900;font-size:13px}
.rcard .rrow{display:flex;justify-content:space-around;gap:4px;margin-top:8px;font-size:11px;color:#b8c4e6}.rcard .rrow b{display:block;font-size:17px;color:#fff}
body.flashR:after,body.flashY:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:20;animation:cflash .7s ease-out forwards}
body.flashR:after{box-shadow:inset 0 0 140px 30px rgba(230,20,40,.75)}body.flashY:after{box-shadow:inset 0 0 140px 30px rgba(255,212,0,.6)}
@keyframes cflash{from{opacity:1}to{opacity:0}}
body.wpunch:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:19;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 55%,rgba(255,255,255,.35));animation:cflash .35s ease-out forwards}
/* v6.0 OFR: compact decision panel so the replay stays visible */
body.ofrOn #whistle,body.ofrOn #joy,body.ofrOn #tip,body.ofrOn #mute,body.ofrOn #camb,body.ofrOn #recb,body.ofrOn #advb,body.ofrOn #mm,body.ofrOn #vis,body.ofrOn #stam{display:none!important}
@media (orientation:landscape){
#dec.ofr{left:auto;right:0;top:calc(48px + env(safe-area-inset-top));bottom:0;width:min(36vw,340px);max-height:none;transform:translateX(110%);border-top:none;border-left:2px solid #3d7bff;border-radius:14px 0 0 0;padding:8px}
#dec.ofr.show{transform:none}
#dec.ofr .desc{max-height:4.2em;font-size:12px}
#dec.ofr button.ch{padding:5px 4px;font-size:12px}
body.ofrOn #ofr .ctl{left:calc((100vw - min(36vw,340px)) / 2);width:min(62vw,600px)}
}
@media (orientation:portrait){#dec.ofr{max-height:42vh}#dec.ofr .desc{max-height:3em;font-size:12px}}
/* v7.0: on a landscape phone the decision panel docks on the right (like the OFR panel) so the incident stays visible on the left */
@media (orientation:landscape) and (max-height:500px){
#dec:not(.ofr){z-index:10;left:auto;right:0;top:calc(40px + env(safe-area-inset-top));bottom:0;width:min(50vw,430px);transform:translateX(110%);border-top:none;border-left:2px solid #d7ff3a;border-radius:14px 0 0 0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));overflow:auto}
#dec.show:not(.ofr){transform:none}
#dec:not(.ofr) .desc{font-size:12px;max-height:4.4em;overflow:auto;margin:2px 2px 4px}
#dec:not(.ofr) button.ch{padding:4px 3px;font-size:12px}
}

/* v7.1: replays show only the picture — no stale toasts / banners / ticker */
body.replay #toast,body.replay #big,body.replay #ticker,body.replay #vis,body.replay #pts{visibility:hidden!important}
/* v7.1 occlusion pass: result cards never sit on top of the decision panel / camera buttons, and keep the pitch centre clear */
body.carding #dec,body.carding #call,body.carding #ofr,body.carding #camb,body.carding #recb,body.carding #mute,body.carding #wprompt{visibility:hidden!important;transition:none!important}
#big.card b{font-size:clamp(20px,6.2vw,30px);line-height:1.2}#big.card.goal b{font-size:clamp(22px,6.6vw,32px)}
@media (orientation:portrait){#big.card{top:auto;bottom:calc(14px + env(safe-area-inset-bottom));transform:translate(-50%,20px);max-height:52vh}#big.card.show{transform:translate(-50%,0)}}
@media (orientation:landscape) and (max-height:500px){#big.card{left:auto;right:6px;top:calc(44px + env(safe-area-inset-top));transform:translateX(20px);width:min(46vw,420px);max-height:calc(100vh - 52px - env(safe-area-inset-top));padding:12px 14px 10px}#big.card.show{transform:none}#big.card small{font-size:13px}#big .okb{padding:10px;font-size:18px;margin-top:8px}}
body:has(#big.show:not(.card)) #toast{opacity:0!important}
@media (orientation:landscape) and (max-height:500px){#big:not(.card){top:31%;padding:10px 16px}#big:not(.card) b{font-size:22px}}
.tst.out{display:none}
@media (orientation:portrait){#toast{top:calc(162px + env(safe-area-inset-top));max-width:calc(100vw - 24px)}}
/* v7.2 4th-official stoppage board */
#board{position:absolute;left:10px;top:calc(98px + env(safe-area-inset-top));z-index:6;display:flex;flex-direction:column;align-items:center;padding:4px 10px 3px;border-radius:9px;background:#0b0d12;border:2px solid #3a4152;box-shadow:0 4px 14px rgba(0,0,0,.5),inset 0 0 0 2px #1d2330;opacity:0;transform:translateX(-24px);transition:all .3s;pointer-events:none}
#board.on{opacity:1;transform:none}
#board i{font-style:normal;font-size:10px;color:#b9c3d8;letter-spacing:.5px}
#board b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:30px;line-height:1;color:#ff3b30;text-shadow:0 0 8px rgba(255,59,48,.85),0 0 2px #ff9;letter-spacing:2px}
body.replay #board,body.carding #board{visibility:hidden}
/* v7.1 occlusion pass 2 */
body.carding #whistle,body.carding #joy,body.carding #sprint,body.carding #advb,body.carding #cap{visibility:hidden!important}
body:has(#screen.show) #cap,body:has(#screen.show) #l3{visibility:hidden!important}
@media (orientation:landscape) and (max-height:500px){#big:not(.card){top:calc(66px + env(safe-area-inset-top));transform:translate(-50%,-8px) scale(.95);padding:6px 16px;width:auto;min-width:220px;max-width:62vw}#big.show:not(.card){transform:translate(-50%,0)}#big:not(.card) b{font-size:20px}#big:not(.card) small{font-size:12px;margin-top:3px}#big.goal:not(.card) b{font-size:24px}
 #l3{bottom:auto;top:calc(100px + env(safe-area-inset-top));left:10px}#l3 .n{font-size:22px;min-width:40px}#l3 .t{padding:4px 12px 4px 10px}#l3 .t b{font-size:15px}#l3 .t small{font-size:11px}}
@media (orientation:portrait){#l3{bottom:calc(204px + env(safe-area-inset-bottom));left:10px}}
body:has(#board.on) #l3{opacity:0!important}
/* v7.1 occlusion pass 3 */
#big.card{transition:opacity .2s}
body:has(#cap.on) #ticker{opacity:0!important}
@media (orientation:landscape) and (max-height:500px){#cap{bottom:calc(24px + env(safe-area-inset-bottom));max-width:50vw;font-size:13px;padding:5px 10px}}
@media (orientation:portrait){#ticker{bottom:calc(166px + env(safe-area-inset-bottom));left:10vw;right:10vw}#cap{bottom:calc(160px + env(safe-area-inset-bottom))}#l3{bottom:calc(222px + env(safe-area-inset-bottom))}}
/* v7.1 occlusion pass 4 */
body:has(#dec.show) #cap,body:has(#call.show) #cap,body:has(#dec.show) #l3,body:has(#dec.show) #ticker{visibility:hidden!important}
#ticker.run{transition-delay:.3s}
@media (orientation:portrait){#big:not(.card){left:10px;width:calc(100vw - 118px);transform:translate(0,-50%) scale(.95)}#big.show:not(.card){transform:translate(0,-50%)}#big:not(.card) b{font-size:24px}
 #l3{bottom:auto;top:calc(98px + env(safe-area-inset-top))}}
body:has(#cap.on) #ticker{transition:none!important}
/* v7.3 occlusion pass: VAR monitor in portrait — smaller decision drawer so the replayed contact (screen centre) stays visible; no OFR banner over the monitor; badge/footer hidden under drawers */
@media (orientation:portrait){#dec.ofr{max-height:33vh}#dec.ofr .desc{max-height:2.8em}}
body:has(#ofr.on) #big:not(.card){opacity:0!important;transition:none}
body:has(#dec.show) .betaBadge,body:has(#dec.show) footer{visibility:hidden}
body:has(#call.show) #big:not(.card){opacity:0!important;transition:none}
@media (orientation:landscape) and (max-height:500px){body.pkset #cap{left:10px;transform:none;bottom:auto;top:calc(150px + env(safe-area-inset-top));max-width:34vw}}
#big.card:not(.show){transition:none!important;opacity:0!important}body:has(#big.card.show) #toast{visibility:hidden}
@media (orientation:landscape) and (max-height:500px){body.pkset #ticker{left:10px;right:auto;transform:none;bottom:auto;top:calc(150px + env(safe-area-inset-top));max-width:34vw;text-align:left}}
/* v7.6: the title card scrolls (credits panel) -> keep the fixed 🔊 button from sitting over its text */
body:has(#screen.show .intro) #mute{visibility:hidden}
/* v7.6: decision panel can open at the top (penalty set-up) -> keep the camera/mute buttons from showing through it */
body:has(#dec.show) #mute,body:has(#dec.show) #camb,body:has(#dec.show) #recb{visibility:hidden}

/* v7.8: pause button (always reachable during the match, above every overlay) + pause menu */
#pauseb{position:fixed;top:calc(6px + env(safe-area-inset-top));left:calc(6px + env(safe-area-inset-left));z-index:21;width:40px;height:34px;padding:0;border-radius:10px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:16px;line-height:32px;display:none;font-family:inherit;touch-action:manipulation}
body.playing #pauseb{display:block}
body:has(#screen.show) #pauseb{display:none}
body.paused #pauseb{background:#d7ff3a;color:#111}
#pausem{position:fixed;inset:0;z-index:22;display:flex;align-items:center;justify-content:center;background:rgba(4,8,22,.74);padding:14px}
#pausem[hidden]{display:none}
.pbox{width:min(88vw,340px);max-height:92vh;overflow:auto;background:rgba(8,12,28,.97);border:2px solid #d7ff3a;border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;text-align:center}
.pbox .pt{font-size:20px;font-weight:900}
#pwhy{font-size:13px;color:#ffd34d;min-height:0}
#pwhy:empty{display:none}
.pbox .go{margin:0}
.prow{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700}
.prow button{flex:1;font-family:inherit;font-weight:800;font-size:15px;padding:9px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff}
.pvl input{flex:1;accent-color:#d7ff3a}
#pvv{min-width:36px;text-align:right}
.pnote{font-size:11px;opacity:.7}

/* v7.9 commentary language selector */
.cmsel{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;margin:6px 0}
.cmsel .seg{display:inline-flex;border:1px solid rgba(255,255,255,.3);border-radius:10px;overflow:hidden}
.cmsel .seg button{font-family:inherit;font-weight:800;font-size:14px;padding:6px 12px;border:none;background:rgba(255,255,255,.06);color:#fff;flex:none}
.cmsel .seg button+button{border-left:1px solid rgba(255,255,255,.2)}
.cmsel .seg button.on{background:#d7ff3a;color:#111}
@media (orientation:landscape) and (max-height:500px){body:has(#refcam.on) #toast{top:calc(70px + env(safe-area-inset-top))}} /* v8.0: during the slow-mo referee view the points toast sits above the players, not over the shirt-pull / elbow */

@media (orientation:landscape) and (max-height:500px){body.incwin #toast{top:calc(70px + env(safe-area-inset-top))}} /* v8.3: also outside the slow-mo view — the 站位 toast was landing on the diver */