:root{--bg:#07090c;--panel:#0c1016db;--panel-border:#ffffff1f;--text:#f1ece4;--muted:#9aa3ad;--p1:#ff5a36;--p2:#36c8ff;--danger:#f35;--gold:#ffd166;--ok:#7ae582;--mono:ui-monospace, "Cascadia Mono", "Consolas", "SF Mono", "Menlo", monospace;--sans:system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--sans);margin:0;overflow:hidden}#app{position:fixed;inset:0}button,input,select{font:inherit;color:inherit}.btn{border:1px solid var(--panel-border);cursor:pointer;letter-spacing:.02em;background:#ffffff0f;border-radius:8px;padding:.6rem 1.1rem;font-weight:600}.btn:hover{background:#ffffff1f}.btn:focus-visible,.landing-input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.btn-primary{background:var(--p1);border-color:var(--p1);color:#1a0904}.btn-primary:hover{background:#ff7552}.landing{text-align:center;background:radial-gradient(ellipse at 50% 120%, #ff5a3640, transparent 60%), radial-gradient(ellipse at 50% -20%, #36c8ff26, transparent 55%), var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:1.2rem;padding:1rem;display:flex;position:absolute;inset:0}.title{letter-spacing:.04em;text-shadow:0 0 24px #ff5a368c,0 4px #3a0f06;flex-direction:column;margin:0;font-size:clamp(2.4rem,8vw,5.5rem);font-weight:900;line-height:.95;display:flex}.title span:last-child{color:var(--p1)}.tagline{color:var(--muted);margin:0;font-size:1.1rem}.landing-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:.8rem;display:flex}.landing-join{gap:.5rem;display:flex}.landing-input{border:1px solid var(--panel-border);min-width:min(18rem,60vw);font-family:var(--mono);background:#ffffff0f;border-radius:8px;padding:.6rem .8rem}.landing-error{min-height:1.2em;color:var(--danger);margin:0}.landing-help{max-width:34rem;color:var(--muted);margin:0}.game-root{background:radial-gradient(ellipse at 50% 100%, #1b1410, var(--bg) 70%);position:absolute;inset:0;overflow:hidden}.stage-placeholder{color:var(--muted);place-items:center;font-size:1.4rem;display:grid;position:absolute;inset:0}.btn-small{padding:.3rem .7rem;font-size:.85rem}.lobby{text-align:center;z-index:20;background:radial-gradient(at 50% 40%,#07090c8c,#07090ceb);flex-direction:column;justify-content:center;align-items:center;gap:1.1rem;padding:1rem;display:flex;position:absolute;inset:0}.lobby[hidden]{display:none}.lobby-header{flex-direction:column;align-items:center;gap:.6rem;display:flex}.lobby-title{letter-spacing:.05em;text-shadow:0 0 18px #ff5a3680;margin:0;font-size:clamp(1.6rem,5vw,3rem);font-weight:900}.lobby-room{color:var(--muted);align-items:center;gap:.6rem;display:flex}.lobby-room code{font-family:var(--mono);color:var(--gold);background:#ffffff0d;border-radius:6px;padding:.25rem .6rem;font-size:1.05rem}.seats{grid-template-columns:repeat(2,minmax(9rem,15rem));gap:1rem;display:grid}.seat{border:2px dashed var(--panel-border);background:var(--panel);border-radius:12px;flex-direction:column;align-items:center;gap:.25rem;padding:1rem .8rem;display:flex}.seat.taken{border-style:solid}.seat-p1.taken{border-color:var(--p1);box-shadow:0 0 24px #ff5a3640}.seat-p2.taken{border-color:var(--p2);box-shadow:0 0 24px #36c8ff40}.seat.you{outline:2px solid var(--gold);outline-offset:3px}.seat-label{font-size:1.3rem;font-weight:900}.seat-p1 .seat-label{color:var(--p1)}.seat-p2 .seat-label{color:var(--p2)}.seat-name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:1.05rem;font-weight:600;overflow:hidden}.seat-open{color:var(--muted);font-weight:400}.seat-status{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.8rem}.lobby-spectators{color:var(--muted);margin:0;font-size:.9rem}.lobby-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:.8rem;display:flex}.lobby-input,.lobby-select{border:1px solid var(--panel-border);background:#ffffff0f;border-radius:8px;padding:.5rem .7rem}.lobby-input{width:13rem}.lobby-select option{background:#11161d}.lobby-diff{color:var(--muted)}.lobby-prompt{letter-spacing:.04em;margin:0;font-size:1.2rem;font-weight:700;animation:1.6s ease-in-out infinite pulse}.lobby-countdown{color:var(--gold);text-shadow:0 0 30px #ffd16699;font-size:clamp(4rem,14vw,9rem);font-weight:900;line-height:1}.lobby-countdown[hidden]{display:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}@media (prefers-reduced-motion:reduce){.lobby-prompt{animation:none}}@media (max-width:520px){.seats{grid-template-columns:1fr 1fr;gap:.6rem}}.conn-status{color:#fff;z-index:40;background:#ff3355d9;border-radius:999px;padding:.4rem .9rem;font-weight:600;position:absolute;bottom:1rem;left:50%;transform:translate(-50%)}.conn-status:empty{display:none}.toast{background:var(--panel);border:1px solid var(--panel-border);opacity:0;visibility:hidden;z-index:40;border-radius:10px;padding:.6rem 1rem;transition:transform .25s,opacity .25s,visibility .25s;position:absolute;top:1rem;left:50%;transform:translate(-50%,-150%)}.toast.show{opacity:1;visibility:visible;transform:translate(-50%)}.stage,.stage-canvas,.stage-labels{position:absolute;inset:0}.stage-canvas{display:block}.stage-labels,.tag-anchor{pointer-events:none}.tag{border:2px solid var(--aggro,#ffffff59);font:700 clamp(15px, 1.7vw, 22px) / 1.1 var(--mono);color:#f4efe6;letter-spacing:.02em;white-space:pre;text-shadow:0 1px #000;background:#06080cd6;border-radius:7px;align-items:center;gap:.35em;padding:.18em .55em .24em;transition:transform 80ms,opacity .2s;display:flex;position:relative;transform:translateY(-50%);box-shadow:0 2px 10px #00000080}.tag-done{color:var(--mine);text-shadow:0 0 8px var(--mine)}.tag-badge{color:var(--aggro);font-size:.65em}.tag-badge:empty{display:none}.tag-bar{height:4px;width:calc((100% - 12px) * var(--frac,0));background:var(--other);box-shadow:0 0 6px var(--other);border-radius:2px;position:absolute;bottom:-5px;left:6px}.tag.locked{border-color:var(--mine);box-shadow:0 0 16px var(--mine);transform:translateY(-50%)scale(1.16)}.tag.partner{border-style:dashed}.tag.danger{border-color:var(--danger);animation:.12s linear infinite tag-shake}.tag-projectile{background:#280a00e0;border-color:#ffb000;border-radius:50%;justify-content:center;min-width:2em;height:2em;padding:0;font-size:clamp(18px,2vw,26px)}.tag-item{border-color:var(--gold)}.tag.dying{opacity:0}@keyframes tag-shake{0%,to{translate:0}25%{translate:-2px 1px}75%{translate:2px -1px}}.popup{font:900 22px var(--sans);white-space:nowrap;text-shadow:0 2px #000;transform:translateY(-50%)}.popup-p1{color:var(--p1)}.popup-p2{color:var(--p2)}.popup-gold{color:var(--gold)}.popup-bad{color:var(--danger)}.civ-bubble{font:800 16px var(--sans);color:#111;background:#fff;border-radius:999px;padding:.2em .7em;transform:translateY(-50%)}.civ-bubble[data-state=danger]{background:#ffe066;animation:.5s ease-in-out infinite pulse}.civ-bubble[data-state=saved]{background:var(--ok)}.civ-bubble:empty{display:none}.crosshair{pointer-events:none;z-index:6;will-change:transform;width:44px;height:44px;position:absolute;top:0;left:0}.crosshair[hidden]{display:none}.crosshair i{border:3px solid var(--c);box-shadow:0 0 10px var(--c);opacity:.5;border-radius:50%;position:absolute;inset:0}.crosshair:before,.crosshair:after{content:"";background:var(--c);opacity:.8;position:absolute}.crosshair:before{width:3px;top:-7px;bottom:-7px;left:50%;transform:translate(-50%)}.crosshair:after{height:3px;top:50%;left:-7px;right:-7px;transform:translateY(-50%)}.crosshair.locked i{opacity:1}.crosshair-p1{--c:var(--p1)}.crosshair-p2{--c:var(--p2)}.vignette{pointer-events:none;z-index:7;opacity:0;background:radial-gradient(#0000 45%,#ff1428bf);position:absolute;inset:0}.vignette.hit{animation:.6s ease-out vignette-hit}@keyframes vignette-hit{0%{opacity:1}to{opacity:0}}.hud{pointer-events:none;z-index:10;position:absolute;inset:0}.hud[hidden],.hud [hidden]{display:none}.hud-card{background:var(--panel);border:2px solid;border-radius:12px;gap:.2rem;min-width:13rem;padding:.5rem .75rem;font-weight:700;display:grid;position:absolute;top:12px}.hud-p1{border-color:var(--p1);left:12px}.hud-p2{border-color:var(--p2);right:12px}.hud-card.empty{opacity:.65;border-style:dashed}.hud-card.you{box-shadow:0 0 0 2px var(--gold)}.hud-card.down{filter:grayscale(.7)}.hud-card.hurt{animation:.45s ease-out card-hurt}@keyframes card-hurt{0%{background:#ff3355bf;translate:-4px}30%{translate:4px}to{background:var(--panel);translate:0}}.hud-row{justify-content:space-between;align-items:baseline;gap:.6rem;display:flex}.hud-p2 .hud-row{flex-direction:row-reverse}.hud-slot{font-weight:900}.hud-p1 .hud-slot{color:var(--p1)}.hud-p2 .hud-slot{color:var(--p2)}.heart{color:#3a3f47;font-style:normal}.heart.full{color:var(--danger);text-shadow:0 0 6px #f359}.hud-score{font:800 1.15rem var(--mono);font-variant-numeric:tabular-nums}.hud-combo{color:var(--gold);font-size:.85rem}.hud-status{color:var(--danger);font-size:.85rem}.hud-encounter{background:var(--panel);font:800 1.05rem var(--mono);white-space:pre;border-radius:999px;padding:.35rem .9rem;position:absolute;top:14px;left:50%;transform:translate(-50%)}.hud-banner{text-align:center;text-shadow:0 4px #0009;width:92vw;position:absolute;top:27%;left:50%;transform:translate(-50%,-50%)}.hud-banner-text{letter-spacing:.06em;font-size:clamp(2rem,6vw,4.2rem);font-weight:900}.hud-banner-sub{color:#d8d2c8;font-size:clamp(1rem,2.2vw,1.4rem);font-weight:700}.hud-banner[data-tone=good] .hud-banner-text{color:var(--ok)}.hud-banner[data-tone=bad] .hud-banner-text{color:var(--danger)}.hud-banner[data-tone=boss] .hud-banner-text{color:var(--gold)}.hud-banner.in{animation:.35s cubic-bezier(.2,1.4,.4,1) banner-in}@keyframes banner-in{0%{opacity:0;scale:.7}to{opacity:1;scale:1}}.hud-focus{border:2px solid var(--focus);font:800 clamp(1.4rem, 3.4vw, 2.4rem) var(--mono);white-space:pre;background:#06080cc7;border-radius:14px;padding:.5rem 1.2rem;position:absolute;bottom:7%;left:50%;transform:translate(-50%)}.hud-focus[data-slot="0"]{--focus:var(--p1)}.hud-focus[data-slot="1"]{--focus:var(--p2)}.focus-done{color:var(--focus)}.focus-next{text-underline-offset:6px;text-decoration:underline}.hud-overlay{text-align:center;background:#06080cd1;border-radius:16px;padding:1rem 1.8rem;position:absolute;top:52%;left:50%;transform:translate(-50%,-50%)}.overlay-title{color:var(--gold);font-size:clamp(2rem,6vw,3.6rem);font-weight:900}.overlay-sub{color:var(--muted);font-weight:700}.hud-badge{background:var(--panel);letter-spacing:.06em;border-radius:999px;padding:.35rem .8rem;font-size:.85rem;font-weight:800;position:absolute;bottom:14px;left:14px}@media (max-width:640px){.hud-card{min-width:0;font-size:.8rem}}.results{z-index:25;background:#06080ce0;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:1rem;display:flex;position:absolute;inset:0;overflow:auto}.results[hidden]{display:none}.results-title{letter-spacing:.05em;margin:0;font-size:clamp(2rem,6vw,4rem);font-weight:900}.results-cleared{color:var(--ok)}.results-gameover{color:var(--danger)}.results-sub{color:var(--muted);margin:0}.results-grid{grid-template-columns:repeat(2,minmax(12rem,18rem));gap:1rem;display:grid}.results-player{background:var(--panel);border:2px solid;border-radius:14px;gap:.3rem;padding:1rem;display:grid}.results-p1{border-color:var(--p1)}.results-p2{border-color:var(--p2)}.results-player.empty{opacity:.4;border-style:dashed}.results-name{font-weight:800}.results-grade{text-align:center;font-size:4.5rem;font-weight:900;line-height:1}.grade-S{color:var(--gold);text-shadow:0 0 24px #ffd166b3}.grade-A{color:var(--ok)}.grade-B{color:var(--p2)}.grade-C{color:#f0a050}.grade-D{color:var(--danger)}.results-score{text-align:center;font:800 1.4rem var(--mono)}.results-row{color:var(--muted);justify-content:space-between;display:flex}.results-row b{color:var(--text)}.results-empty{text-align:center;color:var(--muted);font-size:3rem}@media (max-width:560px){.results-grid{grid-template-columns:1fr}}.lobby [hidden],.results [hidden]{display:none}.lobby{justify-content:safe center;overflow-y:auto}.lobby-settings{border:1px solid var(--panel-border);background:var(--panel);text-align:left;border-radius:12px;gap:.6rem;width:min(34rem,100%);padding:.8rem 1rem;display:grid}.settings-head{justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.settings-head h2{letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:1rem}.settings-host{color:var(--gold);font-size:.85rem;font-weight:700}.setting{align-items:flex-start;gap:.7rem;display:flex}.setting[hidden]{display:none}.setting-text{flex:1;gap:.15rem;display:grid}.setting-text small{color:var(--muted);line-height:1.35}.setting-toggle{width:1.1rem;height:1.1rem;accent-color:var(--p1);margin-top:.2rem}.setting-watch{flex-wrap:wrap}.watch-link-row{align-items:center;gap:.5rem;width:100%;display:flex}.watch-link{font-family:var(--mono);white-space:nowrap;background:#ffffff0f;border-radius:6px;flex:1;padding:.3rem .5rem;font-size:.8rem;overflow-x:auto}.settings-hint{color:var(--muted);margin:0;font-size:.8rem}.lobby-settings.readonly .setting-toggle,.lobby-settings.readonly select{opacity:.6}.watch-badge{letter-spacing:.1em;color:var(--p2);font-weight:900}.muted{color:var(--muted)}.results-note{color:var(--gold);margin:0;font-weight:800}.quarters{z-index:26;border:1px solid var(--panel-border);pointer-events:none;background:linear-gradient(#0a0c1099,#0a0c10f0);border-bottom:none;border-radius:14px 14px 0 0;align-items:flex-end;gap:.7rem;max-width:calc(100vw - 2rem);padding:.35rem 1.1rem .45rem;display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -2px 12px #00000080}.quarters[hidden]{display:none}.quarters-label{letter-spacing:.14em;color:var(--gold);align-self:center;font-size:.7rem;font-weight:900}.quarters-more{color:var(--muted);align-self:center;font-size:.85rem;font-weight:800}.quarter-slot{justify-items:center;gap:2px;display:grid}.quarter-slot.away{opacity:.45}.quarter-arrow{min-height:14px;font:900 11px / 14px var(--sans);letter-spacing:.08em;color:var(--gold);white-space:nowrap}.quarter{width:36px;height:36px;font:800 10px / 1 var(--sans);color:#565b63;text-shadow:0 1px #ffffffb3;background:radial-gradient(circle at 34% 30%,#fff 0%,#e3e6ea 26%,#b4b9c0 60%,#858b93 100%);border:3px dotted #7d838b;border-radius:50%;place-items:center;display:grid;box-shadow:inset 0 0 0 2px #ffffff73,inset 0 -3px 6px #00000059,0 3px 6px #0009}.quarter-slot.mine .quarter{box-shadow:inset 0 0 0 2px #ffffff73, inset 0 -3px 6px #00000059, 0 0 0 2px var(--gold), 0 0 14px #ffd166bf}.quarter-slot.mine .quarter-arrow{animation:.9s ease-in-out infinite arrow-bob}.quarter-slot.new .quarter{animation:.5s cubic-bezier(.3,1.5,.5,1) coin-drop}.quarter-name{color:#d8d2c8;text-overflow:ellipsis;white-space:nowrap;max-width:64px;font-size:.7rem;font-weight:700;overflow:hidden}@keyframes coin-drop{0%{opacity:0;transform:translateY(-40px)rotate(-90deg)}60%{opacity:1}to{transform:none}}@keyframes arrow-bob{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}@media (prefers-reduced-motion:reduce){.quarter-slot.new .quarter,.quarter-slot.mine .quarter-arrow{animation:none}}.lobby{gap:.75rem}.lobby-title{font-size:clamp(1.4rem,4vw,2.6rem)}.seat{padding:.65rem .8rem}.lobby-settings{gap:.45rem;padding:.65rem .9rem}.game-root.has-quarters .hud-focus{bottom:calc(7% + 76px)}.game-root.has-quarters .lobby,.game-root.has-quarters .results{padding-bottom:92px}.hud-banner-detail{letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:.4rem;font-size:clamp(.85rem,1.7vw,1.1rem);font-weight:800}.civ-bubble{white-space:nowrap}