:root{--bg:#1e2126;--panel:#181b20db;--panel-solid:#22262c;--line:#ffffff1f;--text:#edeae4;--muted:#a7abb2;--p0:#3d8bff;--p1:#ff8a1f;--good:#3ccf7a;--warn:#f5b942;--bad:#ff4d5e;--radius:12px;--gutter:16px;--corner:88px;--font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "SF Mono", Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font:16px/1.4 var(--font);-webkit-tap-highlight-color:transparent;margin:0;overflow:hidden}#app{position:fixed;inset:0}#scene{background:radial-gradient(ellipse at center, #2a2e35 0%, var(--bg) 70%);position:absolute;inset:0}#scene canvas{touch-action:none;width:100%;height:100%;display:block}#ui{pointer-events:none;position:absolute;inset:0}:where(#ui)>*,.screen-layer>*{pointer-events:auto}.screen-layer{pointer-events:none;position:absolute;inset:0}.screen{padding:var(--gutter);padding-top:max(var(--gutter), env(safe-area-inset-top));pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute;inset:0;overflow-y:auto}.screen>*,.screen.passthrough>.panel{pointer-events:auto}.hidden{display:none!important}.btn{border:1px solid var(--line);min-width:44px;min-height:44px;color:var(--text);font:600 16px var(--font);cursor:pointer;background:#2f343c;border-radius:10px;padding:10px 18px;transition:background .15s,transform 50ms}.btn:hover:not(:disabled){background:#3a4049}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--good);color:#0d1a12;border-color:#0000}.btn.primary:hover:not(:disabled){background:#52dd8c}.btn.icon{width:44px;padding:0;font-size:22px}:focus-visible{outline-offset:2px;outline:3px solid #ffd84d}input[type=text],select{border:1px solid var(--line);min-height:44px;color:var(--text);font:16px var(--font);background:#15181c;border-radius:10px;padding:8px 12px}input[type=checkbox]{width:24px;height:24px;accent-color:var(--good)}input[type=range]{width:160px;accent-color:var(--good)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:20px}.muted{color:var(--muted)}.p0{--pc:var(--p0)}.p1{--pc:var(--p1)}.top-right{top:max(10px, env(safe-area-inset-top));z-index:20;align-items:center;gap:10px;display:flex;position:absolute;right:10px}.conn-dot{background:var(--bad);border-radius:50%;width:14px;height:14px;box-shadow:0 0 0 3px #00000059}.conn-dot[data-state=open]{background:var(--good)}.conn-dot[data-state=slow],.conn-dot[data-state=connecting]{background:var(--warn)}.footer{left:12px;bottom:max(8px, env(safe-area-inset-bottom));font:13px var(--mono);color:var(--muted);z-index:5;pointer-events:none;position:absolute}.toasts{z-index:40;pointer-events:none;flex-direction:column;gap:8px;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%)}.toast{background:var(--panel-solid);border:1px solid var(--line);border-radius:10px;padding:10px 16px;animation:.2s ease-out toast-in;box-shadow:0 6px 24px #0006}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}}.backdrop{z-index:30;padding:var(--gutter);background:#0000008c;justify-content:center;align-items:center;display:none;position:absolute;inset:0}.backdrop.open{display:flex}.modal{background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius);width:min(420px,100%);padding:24px;box-shadow:0 16px 48px #00000080}.modal h2{margin:0 0 16px}.modal-text{margin:0 0 8px;font-size:18px}.modal-detail{color:var(--muted);margin:0 0 8px}.modal-actions{justify-content:flex-end;gap:10px;margin-top:18px;display:flex}.setting{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;min-height:48px;display:flex}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}.home,.lobby{justify-content:center}.home-panel,.lobby-panel{flex-direction:column;gap:14px;width:min(440px,100%);display:flex}.wordmark{text-align:center;letter-spacing:.06em;background:linear-gradient(90deg, var(--p0), #edeae4 50%, var(--p1));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0 0 6px;font-size:clamp(30px,8vw,44px);font-weight:900}.field{color:var(--muted);flex-direction:column;gap:6px;font-size:14px;display:flex}.field input{width:100%}.btn.big{min-height:52px;font-size:18px}.join-row{align-items:flex-end;gap:10px;display:flex}.join-row .field{flex:1}.code-input{font:600 22px var(--mono);letter-spacing:.3em;text-transform:uppercase}.inline-error{color:var(--bad);margin:0}.status{text-align:center;min-height:1.4em;margin:0}.link-btn{color:var(--muted);background:0 0;border-color:#0000;align-self:center;font-weight:500}.small{font-size:13px}.room-code{font:800 clamp(40px, 12vw, 56px) var(--mono);letter-spacing:.2em;text-align:center;-webkit-user-select:all;user-select:all}.row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.cards{grid-template-columns:1fr 1fr;gap:12px;display:grid}.player-card{border:2px solid var(--pc);border-radius:var(--radius);background:color-mix(in srgb, var(--pc) 12%, transparent);flex-direction:column;gap:6px;min-height:110px;padding:14px;display:flex}.player-card.empty{opacity:.7;border-style:dashed;animation:1.8s ease-in-out infinite pulse}.player-card.ready .pc-state{color:var(--good);font-weight:700}.pc-tag{color:var(--pc);font-size:13px;font-weight:700}.pc-name{overflow-wrap:anywhere;font-size:18px;font-weight:700}.pc-state{color:var(--muted)}@keyframes pulse{50%{opacity:.4}}.debug-hud{font:13px var(--mono);color:#7dffb0;z-index:50;pointer-events:none;background:#00000080;border-radius:6px;padding:4px 8px;position:absolute;top:12px;left:12px}.match-header{width:min(900px, 100% - 2 * (var(--corner) - var(--gutter)));background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:8px 12px;display:grid}.mh-side{flex-direction:column;gap:2px;min-width:0;display:flex}.mh-side.p1{text-align:right;align-items:flex-end}.mh-name{color:var(--pc);text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-weight:700;overflow:hidden}.mh-lives{color:var(--pc);letter-spacing:.15em;font-size:18px}.mh-centre{align-items:center;gap:10px;display:flex}.mh-round{white-space:nowrap;font-weight:700}.mh-timer{width:52px;height:52px;position:relative}.ring{transform:rotate(-90deg)}.ring-bg{fill:none;stroke:#ffffff1f;stroke-width:5px}.ring-bar{fill:none;stroke:var(--good);stroke-width:5px;stroke-linecap:round}.mh-timer.warn .ring-bar{stroke:var(--bad)}.ring-secs{font:700 18px var(--mono);place-items:center;display:grid;position:absolute;inset:0}.mh-timer.warn .ring-secs{color:var(--bad)}.opp-chip{border:1px solid var(--pc);color:var(--pc);background:#0006;border-radius:999px;padding:8px 14px;font-weight:600}.opp-chip.locked{background:color-mix(in srgb, var(--pc) 25%, transparent)}.pick,.reveal,.aim,.battle,.match-result{gap:12px}.pick-body{grid-template-columns:1fr 320px;align-items:start;gap:12px;width:min(900px,100%);display:grid}.roster-panel h2{margin:0 0 12px;font-size:18px}.roster{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.ball-card{border:2px solid var(--line);border-radius:var(--radius);min-height:44px;color:var(--text);font:inherit;cursor:pointer;background:#00000040;flex-direction:column;align-items:center;gap:4px;padding:8px;display:flex}.ball-card.selected{border-color:var(--pc);background:color-mix(in srgb, var(--pc) 18%, transparent)}.ball-card:disabled{cursor:default;opacity:.75}.thumb{aspect-ratio:1;width:100%;max-width:120px}.thumb-fallback{background:radial-gradient(circle at 35% 30%,#fff,#bbb 60%,#777);border-radius:50%;width:72px;height:72px}.bc-name{font-weight:700}.tag{color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:13px;display:inline-block}.detail h2{margin:0 0 6px}.desc{color:var(--muted)}.stats{flex-direction:column;gap:8px;margin:12px 0;display:flex}.stat{grid-template-columns:110px 1fr 70px;align-items:center;gap:8px;font-size:14px;display:grid}.stat-bar{background:#ffffff1a;border-radius:5px;height:10px;overflow:hidden}.stat-fill{background:var(--good);height:100%;display:block}.stat-value{text-align:right;font-family:var(--mono)}.pick-actions,.aim-actions{padding-bottom:env(safe-area-inset-bottom);flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:auto;display:flex}.rv-stage{align-items:center;gap:clamp(12px,4vw,48px);margin:auto 0;display:flex}.rv-card{border:3px solid var(--pc);border-radius:var(--radius);background:var(--panel);text-align:center;width:clamp(130px,28vw,220px);padding:16px;animation:none}.rv-card.from-left{animation-name:slide-left}.rv-card.from-right{animation-name:slide-right}.rv-thumb canvas{aspect-ratio:1;width:100%}.rv-ball{font-size:22px;font-weight:800}.rv-player{color:var(--pc);overflow-wrap:anywhere;font-weight:700}.rv-vs{font-size:clamp(40px,10vw,80px);font-style:italic;font-weight:900;animation:.35s cubic-bezier(.2,.9,.3,1.4) .45s both stamp}.rv-mirror{background:var(--panel);border:1px solid var(--line);border-radius:999px;margin-bottom:24px;padding:6px 14px}@keyframes slide-left{0%{opacity:0;transform:translate(-60vw)}}@keyframes slide-right{0%{opacity:0;transform:translate(60vw)}}@keyframes stamp{0%{opacity:0;transform:scale(3)}}.aim-top{pointer-events:none;justify-content:space-between;align-items:flex-start;gap:12px;width:min(900px,100%);display:flex}.aim-top>*{pointer-events:auto}.aim-info{padding:10px 16px}.aim-readout{font:800 28px var(--mono)}.aim-actions{flex-direction:column}.lock-btn{min-width:180px}.hint{text-align:center;margin:0}@media (hover:none) and (pointer:coarse){.keys-hint{display:none}}.screen>.aim-drag{pointer-events:none;opacity:0;width:100%;height:100%;transition:opacity .12s ease-out;position:absolute;inset:0;overflow:visible}.aim-drag.active{opacity:1}.aim-drag .drag-ring{fill:none;stroke:var(--drag-color);stroke-width:2px;stroke-opacity:.6}.aim-drag .drag-line{stroke:var(--drag-color);stroke-width:3px;stroke-linecap:round;stroke-dasharray:2 7;stroke-opacity:.8}.aim-drag .drag-knob{fill:var(--drag-color);fill-opacity:.85;stroke:#fff;stroke-width:2px}.battle-top{width:min(900px, 100% - 2 * (var(--corner) - var(--gutter)));background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:8px 14px;display:grid}.bh-side{grid-template-columns:auto 1fr;grid-template-areas:"name name""bar bar""lives lives";gap:3px;min-width:0;display:grid}.bh-side.p1{text-align:right}.bh-name{color:var(--pc);text-overflow:ellipsis;white-space:nowrap;grid-area:name;font-weight:700;overflow:hidden}.bh-bar{background:#ffffff1f;border-radius:6px;grid-area:bar;height:12px;overflow:hidden}.bh-side.p1 .bh-bar{transform:scaleX(-1)}.bh-fill{background:var(--pc);width:100%;height:100%;transition:width .15s linear}.bh-lives{color:var(--pc);letter-spacing:.15em;grid-area:lives}.bh-clock{font:800 28px var(--mono);text-align:center;min-width:80px}.tag-layer{pointer-events:none;position:absolute;inset:0;overflow:hidden}.ball-tag{pointer-events:auto;will-change:transform;flex-direction:column;align-items:center;gap:2px;display:flex;position:absolute;top:0;left:0}.tag-name{font:700 13px var(--font);text-shadow:0 1px 3px #000000e6;white-space:nowrap}.hp-bar{background:#0000008c;border-radius:4px;outline:1px solid #0009;width:100%;height:8px;position:relative;overflow:hidden}.hp-ghost,.hp-fill{position:absolute;top:0;bottom:0;left:0}.hp-ghost{background:#ffffffd9}.hp-num{text-align:center;font:700 13px var(--mono);color:#fff;text-shadow:0 1px 2px #000;opacity:0;position:absolute;inset:-3px 0 auto}.ball-tag:hover .hp-num,.ball-tag.show-num .hp-num{opacity:1}.countdown{font:900 clamp(64px, 18vw, 160px) var(--font);color:#fff;text-shadow:0 6px 30px #0009;pointer-events:none;place-items:center;animation:.3s ease-out pop;display:grid;position:absolute;inset:0}@keyframes pop{0%{opacity:0;transform:scale(1.4)}}.round-result{padding:var(--gutter);pointer-events:auto;background:#00000059;place-items:center;display:grid;position:absolute;inset:0}.rr-panel{text-align:center;width:min(460px,100%);animation:.25s ease-out pop}.rr-title{margin:0;font-size:28px}.rr-win .rr-title{color:var(--good)}.rr-lose .rr-title{color:var(--bad)}.rr-reason{color:var(--muted);margin:4px 0 12px}.rr-lives{justify-content:space-around;gap:12px;margin-bottom:12px;display:flex}.rr-life-row{flex-direction:column;gap:2px;display:flex}.rr-who{color:var(--pc);font-weight:700}.rr-pips{color:var(--pc);letter-spacing:.1em;font-size:22px}.pip.lost{animation:.9s ease-in .3s forwards crack;display:inline-block}@keyframes crack{30%{transform:rotate(-20deg)scale(1.2)}to{opacity:0;transform:rotate(25deg)scale(.4)translateY(10px)}}.rr-stats{border-collapse:collapse;width:100%;font-size:14px}.rr-stats th,.rr-stats td{border-bottom:1px solid var(--line);padding:4px 8px}.rr-stats thead th{color:var(--pc)}.rr-stats td{font-family:var(--mono)}.rr-next{margin:12px 0 0}.fx-layer{pointer-events:none;position:absolute;inset:0;overflow:hidden}.dmg-num{font:900 22px var(--font);color:#fff;text-shadow:0 2px 4px #000000e6,0 0 2px #000;animation:.8s ease-out forwards dmg-rise;position:absolute;transform:translate(-50%,-100%)}.dmg-num.kind-status{color:#c084fc}.dmg-num.kind-projectile{color:#ffd84d}@keyframes dmg-rise{to{opacity:0;transform:translate(-50%,calc(-100% - 40px))}}.match-result{justify-content:center}.mr-panel{text-align:center;flex-direction:column;gap:10px;width:min(560px,100%);display:flex}.mr-title{margin:0;font-size:clamp(36px,9vw,56px);font-weight:900}.match-result[data-result=win] .mr-title{color:var(--good)}.match-result[data-result=lose] .mr-title{color:var(--bad)}.mr-reason{color:var(--muted);margin:0}.mr-lives{flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;display:flex}.mr-life{color:var(--pc);align-items:baseline;gap:8px;font-weight:700;display:flex}.mr-history{border-collapse:collapse;width:100%;font-size:14px}.mr-history th,.mr-history td{border-bottom:1px solid var(--line);padding:5px 8px}.mr-history .res-W{color:var(--good);font-weight:800}.mr-history .res-L{color:var(--bad);font-weight:800}.mr-history tbody{font-variant-numeric:tabular-nums}@media (min-width:600px) and (max-width:1024px){.roster{grid-template-columns:repeat(3,1fr)}}@media (max-width:599px){:root{--gutter:10px}.match-header,.battle-top{width:calc(100% - (var(--corner) - var(--gutter)));align-self:flex-start;padding-right:10px}.match-header{grid-template-columns:1fr auto 1fr;gap:6px}.mh-round{font-size:13px}.mh-timer,.ring{width:44px;height:44px}.battle-top{gap:8px;padding:6px 10px}.bh-clock{min-width:60px;font-size:22px}.pick-body{grid-template-columns:1fr}.roster{grid-template-columns:repeat(2,1fr)}.detail{max-height:38vh;padding:12px 14px;position:sticky;bottom:0;overflow-y:auto}.detail .desc{margin:4px 0}.stat{grid-template-columns:96px 1fr 62px}.aim-top{align-self:flex-start;width:calc(100% - 52px)}.aim-readout{font-size:22px}.mr-panel{overflow-x:auto}.mr-history,.rr-stats{font-size:13px}}