@font-face{font-family:Oswald;src:url('/assets/oswald.ttf') format('truetype');font-weight:200 700;font-display:swap}
:root{--navy:#071b2e;--ink:#071d31;--ice:#faf7ef;--lime:#d7ff52;--red:#f33039;--blue:#6385ff;--muted:#a7b6c6;--display:Oswald,Impact,'Arial Narrow',sans-serif;--body:'Segoe UI',Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:#040e19;color:var(--ice);font:15px/1.45 var(--body)}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}button{transition:background-color .15s,color .15s,transform .15s}button:active:not(:disabled){transform:translateY(1px)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--lime);outline-offset:4px}[hidden]{display:none!important}h1,h2,h3,p{margin:0}button{border:0}a{color:inherit}.game-shell{max-width:560px;min-height:100svh;margin:0 auto;background:var(--navy);position:relative;overflow:hidden;box-shadow:0 0 80px #0006}.topbar{height:65px;padding:12px 25px;display:flex;justify-content:space-between;align-items:center;gap:12px}.brand{font:italic 700 27px/.95 var(--display);text-decoration:none;letter-spacing:-1px}.brand span{display:block;font:500 7px/1.5 var(--body);letter-spacing:2.4px;margin-top:5px}.identity{text-align:right;font-size:12px;min-width:0}.identity>#player-name{display:block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.connection{font-size:10px;color:#a4b4c3;display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:4px}.connection i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime)}.connection.offline i{background:#f48a71}.tabs{display:flex;gap:3px;padding:4px;max-width:410px;margin:0 24px;background:#021322;border:1px solid #b6cce022;border-radius:50px}.tabs button{flex:1;background:transparent;color:#b9c6d3;border-radius:50px;height:37px;font-weight:700;font-size:15px}.tabs button[aria-selected=true]{background:var(--ice);color:var(--ink)}.role-header{text-align:center;padding:18px 16px 8px;position:relative;z-index:1}.role-intro{font:italic 700 27px/1.1 var(--display)}.role-header h1{font:italic 700 clamp(36px,9.7vw,53px)/1.14 var(--display);letter-spacing:-1.2px;color:var(--red);margin-top:3px}.role-header.keeper h1{color:var(--blue)}.clock{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:5px}.clock strong{font:italic 700 64px/1.15 var(--display);font-variant-numeric:tabular-nums}.clock>span{font-size:12px;max-width:80px;color:#a8b6c5;line-height:1.3;text-align:left}.clock.urgent strong{color:var(--lime)}
.arena{position:relative;width:100%;height:clamp(300px,43svh,435px);isolation:isolate;overflow:hidden;background:#dce9f0}.arena canvas{width:100%;height:100%;display:block}.scoreboard{position:absolute;left:35%;top:8%;width:30%;height:8%;display:flex;align-items:center;justify-content:center;gap:5px;color:#edf4ff;font:700 9px/1.15 var(--display);text-align:center;pointer-events:none}.scoreboard span{max-width:43%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scoreboard b{font-size:14px;color:#7e9ab5}.arena[data-role=keeper] .scoreboard{top:18%;left:39%;width:22%;font-size:7px}.arena-targets{position:absolute;display:flex;align-items:stretch;gap:5px;z-index:3}.arena-targets button{width:33.33%;min-height:40px;border:2px solid #fff;background:#f4fbff55;border-radius:11px;display:grid;place-items:center;box-shadow:0 1px 4px #08233d24}.arena-targets button span{width:12px;height:12px;border:2px solid white;border-radius:50%}.arena-targets button[aria-pressed=true]{background:#d7ff52de;box-shadow:0 0 14px #d7ff5266}.arena-targets button[aria-pressed=true] span{background:var(--ink);border-color:var(--ink)}.arena-targets button:disabled{cursor:default}.load-note{position:absolute;inset:0;display:grid;place-items:center;color:var(--ice);background:var(--navy);font:600 22px var(--display);z-index:6}.scene-fallback{position:absolute;inset:0;background:var(--navy);display:grid;place-content:center;text-align:center;padding:40px;z-index:2}.result{position:absolute;inset:16% 12px 12%;z-index:5;background:#071b2eed;text-align:center;padding:25px 15px 20px;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 5px 40px #061b2e35}.result>span{font-size:10px;font-weight:700;letter-spacing:1.8px;color:#b7c7d5}.result h2{font:italic 700 clamp(68px,19vw,105px)/1.2 var(--display);color:var(--lime)}.result[data-kind=save] h2{color:#90aaff}.result[data-kind=cancelled] h2{font-size:46px;color:var(--ice)}.result strong{font:600 26px/1.3 var(--display);max-width:100%;overflow-wrap:anywhere}.result p{font-size:13px;max-width:310px;margin-top:10px;color:#c0cddb}.intro-count{position:absolute;z-index:5;inset:10% 20%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--ice);background:#061c2ed9}.intro-count strong{font:italic 700 92px/1.2 var(--display)}.intro-count span{font-size:11px;font-weight:700;letter-spacing:3px}
.lobby,.match-controls{background:var(--ice);color:var(--ink);padding:18px 22px max(16px,env(safe-area-inset-bottom));position:relative}.lobby::before,.match-controls::before{content:'';position:absolute;top:-16px;left:0;right:0;height:17px;background:var(--ice);opacity:.97;clip-path:polygon(0 80%,9% 30%,25% 70%,38% 20%,54% 65%,74% 0,88% 55%,100% 20%,100% 100%,0 100%)}.how-to{font-size:13px;line-height:1.5;margin-bottom:16px;color:#53647a}.how-to strong{font-size:16px;color:var(--ink)}label{display:block;font-size:10px;font-weight:800;letter-spacing:1.4px;margin:10px 0 7px}input{color-scheme:light;width:100%;min-width:0;min-height:47px;border:1px solid #c7d0d8;background:white;color:var(--ink);border-radius:9px;padding:10px 12px;font-size:16px}.primary{background:var(--ink);color:var(--ice);min-height:47px;border-radius:8px;width:100%;padding:11px 17px;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:15px}.primary:hover:not(:disabled){background:#173c58}.primary:disabled{opacity:.45}.primary>span{font-size:23px;line-height:1}.lobby .primary{margin-top:10px;background:var(--lime);color:var(--ink)}.lobby .primary:hover:not(:disabled){background:#c8f436}.secondary{background:#e4e9eb;color:var(--ink);border:1px solid #d2dbe0;padding:10px 12px;min-height:43px;border-radius:7px;font-size:12px;font-weight:700}.secondary-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}.secondary-actions .secondary{flex:1}.text-button{padding:8px 3px;min-height:40px;background:transparent;color:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px}.join-row{display:flex;gap:8px}.join-row input{text-transform:uppercase;letter-spacing:3px;flex:1}.join-row .primary{width:auto;margin:0}.local-note{margin-top:16px;font-size:10px;color:#718196;text-align:center;letter-spacing:.5px}.zone-controls{display:flex;gap:9px}.zone-controls button{flex:1;min-width:0;height:104px;border-radius:15px;border:2px solid #cdd6df;box-shadow:inset 0 0 0 2px #fff;background:#e9ebed;color:#5b6e86;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;font:600 14px/1.15 var(--display);padding:8px 4px}.zone-controls button[aria-pressed=true]{background:var(--lime);color:var(--ink);border-color:#fff;box-shadow:0 0 0 2px #d7f69c}.zone-dot{width:22px;height:22px;border:2px solid currentColor;border-radius:50%;display:block}.zone-controls button[aria-pressed=true] .zone-dot{background:var(--ink);border-color:var(--ink)}.zone-controls button:disabled{opacity:.65}.zone-controls button[aria-pressed=true]:disabled{opacity:1}.selection-note{text-align:center;color:#6f8196;font-size:12px;min-height:18px;margin:12px 0 0}.selection-note.pending{color:#8b6100}.match-footer{display:flex;align-items:center;justify-content:space-between;margin-top:5px;color:#6b7e91;font-size:9px;font-weight:700;letter-spacing:1px}.match-footer .text-button{font-size:11px;font-weight:400;letter-spacing:0}.waiting{text-align:center}.waiting p{font-size:13px;color:#556b81;margin:10px 0 14px}.invite-code{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:5px}.invite-code strong{font:600 33px var(--display);letter-spacing:3px}.invite-code button{font-size:11px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:#8197ac}.after-match{margin-top:13px}.after-match p{font-size:11px;text-align:center;color:#7c8ea2;margin-top:8px}.after-match .primary{background:var(--ink)}.network-note,.error-note{margin:10px 20px;padding:10px 12px;background:#34271d;color:#ffdebd;font-size:12px;border:1px solid #a07446;border-radius:7px}.error-note{background:#481c27;color:#ffe2e2;border-color:#c46978}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);max-width:90%;padding:12px 20px;background:var(--ink);border:1px solid #8ba4bd;border-radius:8px;box-shadow:0 3px 18px #0005;z-index:10;font-size:13px}
.bracket-panel{padding:32px 24px 40px;min-height:680px}.bracket-panel h2{font:italic 700 45px/1.1 var(--display);margin:10px 0}.bracket-intro{color:#9cacc0;font-size:13px;margin-bottom:30px}.bracket-card{border:1px solid #55718d;background:#0c263d;border-radius:12px;overflow:hidden;margin-bottom:24px}.bracket-label{font-size:10px;font-weight:700;letter-spacing:1.4px;padding:12px 16px;color:#a7bacd;background:#061a2c}.bracket-player{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 16px;border-top:1px solid #244057;font-size:16px}.bracket-player span{min-width:0;overflow-wrap:anywhere}.bracket-player small{font-size:10px;color:#9dacc2;white-space:nowrap}.bracket-player.winner{background:var(--lime);color:var(--ink);font-weight:700}.bracket-player.winner small{color:var(--ink)}.bracket-empty{padding:27px 20px;text-align:center;color:#a5b7c8;border:1px solid #38536b;border-radius:12px;margin-bottom:25px}.bracket-result{padding:12px 16px;font-size:12px;color:#a9bed2;border-top:1px solid #244057}.bracket-panel h3{font:600 16px var(--display);letter-spacing:1px;margin:28px 0 12px}.history-row{padding:12px 0;border-bottom:1px solid #294057;display:flex;justify-content:space-between;gap:14px;font-size:12px}.history-row span{color:#a0b3c6}.bracket-panel>.primary{margin-top:26px;background:var(--lime);color:var(--ink)}
body[data-view=lobby] .role-header{padding-top:22px}body[data-view=lobby] .arena{height:clamp(200px,28svh,295px)}body[data-view=lobby] .role-header h1{color:var(--ice)}body[data-view=lobby] .clock strong{font-size:45px}body[data-view=lobby] .clock{margin-top:8px}body[data-view=lobby] .role-intro{color:var(--red);font-size:30px}body[data-view=lobby] .scoreboard{display:none}body[data-phase=waiting] .arena{height:clamp(240px,35svh,350px)}
@media(min-width:700px){.game-shell{margin:20px auto;min-height:calc(100svh - 40px);border:1px solid #22384d;border-radius:16px}.tabs{margin-inline:auto;width:calc(100% - 60px)}.arena{height:420px}.role-header h1{font-size:50px}.topbar{padding-inline:30px}.lobby,.match-controls{padding-inline:30px}.lobby{padding-bottom:24px}}
@media(max-height:760px) and (max-width:600px){.topbar{height:55px}.role-header{padding-top:12px}.role-header h1{font-size:35px}.role-intro{font-size:23px}.clock strong{font-size:51px}.arena{height:clamp(240px,38svh,310px)}.zone-controls button{height:89px}.match-controls{padding-top:13px}.tabs button{height:34px}.selection-note{margin-top:9px}.match-footer{margin-top:0}}
@media(prefers-reduced-motion:reduce){button{transition:none}*{scroll-behavior:auto!important}}
/* Keep the choosing screen and its persistent controls inside a real phone viewport. */
.arena[data-role=keeper] .scoreboard{top:10%}
.arena[data-role=attacker] .scoreboard{left:48%}
@media(max-height:760px) and (max-width:600px){.arena[data-role=attacker] .scoreboard{top:0}}
body[data-view=match] .game-shell{background:#d7edfb}
body[data-view=match] .role-header{padding-top:12px;padding-bottom:3px}
body[data-view=match] .role-intro{font-size:26px}
body[data-view=match] .clock strong{font-size:58px;line-height:1.1}
body[data-phase=waiting] .scoreboard{display:none}
@media(max-height:760px) and (max-width:600px){body[data-view=match] .clock strong{font-size:48px}body[data-view=match] .role-header{padding-top:8px}}
 body[data-view=match] .game-shell{height:100svh;min-height:0;display:flex;flex-direction:column}
 body[data-view=match] .topbar,body[data-view=match] .tabs{flex-shrink:0}
 body[data-view=match] #game-panel{flex:1;min-height:0;display:flex;flex-direction:column}
 body[data-view=match] .role-header,body[data-view=match] .match-controls{flex-shrink:0}
 body[data-view=match] .arena{height:auto;min-height:130px;flex:1}
 body[data-view=match] .bracket-panel{min-height:0;overflow:auto;flex:1}
@media(min-width:700px){body[data-view=match] .game-shell{height:calc(100svh - 40px);min-height:580px}}