:root{--c0: #f2f6ff;--c1: #17171f;--g0: #a9dcff;--g1: #ff3d64;--ink: #e9edf7;--muted: #9aa3b8;--panel: rgba(8, 10, 20, .82);--line: rgba(255, 255, 255, .14);--accent: #ffd27a;--danger: #ff5a6e;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);font-family:Segoe UI,system-ui,-apple-system,Roboto,sans-serif;color:var(--ink);background:#05060c}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}body{-webkit-user-select:none;user-select:none;touch-action:none}canvas#game{position:fixed;inset:0;width:100vw;height:100dvh;display:block}.hidden{display:none!important}#screen-flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:5}#ui{position:fixed;inset:0;pointer-events:none;z-index:10}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:max(16px,var(--safe-top)) 16px max(16px,var(--safe-bottom));pointer-events:auto;background:radial-gradient(ellipse at center,#05060c59,#05060cbf);overflow-y:auto}.panel{width:min(460px,100%);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px 28px 22px;box-shadow:0 30px 80px #0000008c,inset 0 1px #ffffff0f;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin:auto}h1,h2{margin:0 0 12px;letter-spacing:.04em}h2{font-size:1.5rem}.logo{font-size:clamp(2.8rem,9vw,4.2rem);font-weight:900;letter-spacing:.12em;line-height:1;margin-bottom:6px;font-style:italic}.logo .l{color:var(--c0);text-shadow:0 0 22px var(--g0)}.logo .d{color:#0b0b10;-webkit-text-stroke:2px var(--g1);text-shadow:0 0 22px var(--g1)}.tagline{color:var(--muted);margin:0 0 20px}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field>span{font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}input{font:inherit;color:var(--ink);background:#ffffff0f;border:1px solid var(--line);border-radius:10px;padding:11px 12px;outline:none;width:100%;user-select:text;-webkit-user-select:text}input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #ffd27a2e}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{font:inherit;font-size:.85rem;color:var(--ink);background:#ffffff0d;border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.chip .sw{width:10px;height:10px;border-radius:50%;display:inline-block}.chip[aria-checked=true]{border-color:var(--accent);background:#ffd27a24}.btn{font:inherit;font-weight:650;color:var(--ink);background:#ffffff14;border:1px solid var(--line);border-radius:12px;padding:12px 18px;cursor:pointer;transition:transform .08s,background .15s,border-color .15s}.btn:hover:not(:disabled){background:#ffffff24;border-color:#ffffff4d}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:linear-gradient(180deg,#ffe3a3,#ffc35c);color:#1b1404;border-color:transparent}.btn.primary:hover:not(:disabled){background:linear-gradient(180deg,#fff0c8,#ffd27a)}.btn.danger{border-color:#ff5a6e99;color:#ffd0d6}.btn.small{padding:8px 12px;font-size:.85rem}.menu-actions{display:flex;flex-direction:column;gap:10px;margin-top:8px}.menu-actions.row{flex-direction:row;flex-wrap:wrap}.menu-actions.row .btn{flex:1 1 auto}.join-row{display:flex;gap:8px}.join-row input{text-transform:uppercase;letter-spacing:.2em;font-weight:700}.error{color:var(--danger);min-height:1.2em;margin:10px 0 0}.menu-foot{display:flex;gap:16px;justify-content:center;margin-top:10px;flex-wrap:wrap}.link{font:inherit;font-size:.85rem;color:var(--muted);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.link:hover{color:var(--ink)}.rules{padding-left:18px;line-height:1.5;color:#d5dbea}.rules li{margin-bottom:6px}.keys{width:100%;border-collapse:collapse;margin:10px 0 18px;font-size:.88rem}.keys th{text-align:left;color:var(--accent);font-weight:600;padding:5px 10px 5px 0;white-space:nowrap;vertical-align:top}.keys td{color:#cfd5e4;padding:5px 0}.help-panel{width:min(560px,100%)}.code-box{display:flex;flex-direction:column;align-items:center;margin:8px 0 14px}.code-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}.code{font-size:clamp(2.2rem,10vw,3rem);font-weight:900;letter-spacing:.25em;color:var(--accent);text-shadow:0 0 24px rgba(255,210,122,.45);padding-left:.25em;user-select:text;-webkit-user-select:text}.invite-row{display:flex;gap:8px;margin-bottom:14px}.invite-row input{font-size:.85rem}.players{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-direction:column;gap:8px}.players li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#ffffff0d;border:1px solid var(--line)}.players .tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-left:auto}.dot{width:10px;height:10px;border-radius:50%;background:#555;flex:none}.dot.on{background:#4dff9a;box-shadow:0 0 10px #4dff9a}.dot.wait{background:#ffd27a;animation:pulse 1s infinite alternate}@keyframes pulse{0%{opacity:.35}to{opacity:1}}.status{color:var(--muted);min-height:1.3em}#hud{position:fixed;inset:0;pointer-events:none;z-index:6;font-variant-numeric:tabular-nums}.hud-player{position:absolute;top:calc(10px + var(--safe-top));left:12px;display:flex;flex-direction:column;gap:5px;min-width:150px;text-shadow:0 1px 3px #000}.hud-player.right{left:auto;right:12px;align-items:flex-end;text-align:right}.hud-name{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.hud-score{font-size:1.45rem;font-weight:800;letter-spacing:.04em}.hud-row{display:flex;align-items:center;gap:8px}.hud-player.right .hud-row{flex-direction:row-reverse}.lives{display:flex;gap:3px}.life{width:12px;height:14px;background:var(--ink);clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%)}.pol-chip{font-size:.68rem;font-weight:800;letter-spacing:.14em;padding:2px 8px;border-radius:999px;border:1px solid}.energy{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;width:150px}.cell{height:7px;border-radius:2px;background:#ffffff1a;position:relative;overflow:hidden}.cell i{position:absolute;inset:0;transform-origin:left}.chain{font-size:.8rem;font-weight:700;letter-spacing:.08em;display:flex;align-items:center;gap:4px}.chain .pip{width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.4)}#hud-center{position:absolute;top:calc(10px + var(--safe-top));left:50%;transform:translate(-50%);width:min(380px,44vw);text-align:center}#hud-chapter{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}#boss-bar{margin-top:6px;height:10px;border-radius:5px;background:#ffffff1f;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.25)}#boss-fill{position:absolute;inset:0;transform-origin:left;background:linear-gradient(90deg,#ff5a6e,#ffd27a)}#boss-time{position:absolute;right:4px;top:-1px;font-size:.6rem;font-weight:800}#banner{position:absolute;top:38%;left:0;right:0;text-align:center;font-size:clamp(1.4rem,5vw,2.6rem);font-weight:900;letter-spacing:.3em;text-shadow:0 0 30px rgba(0,0,0,.9);padding:18px 0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.55),transparent)}#banner small{display:block;font-size:.42em;letter-spacing:.3em;color:var(--muted);margin-top:6px;font-weight:600}#banner.warn{color:#ff5a6e;animation:blink .5s steps(2) infinite}@keyframes blink{50%{opacity:.3}}#popups{position:absolute;inset:0;overflow:hidden}.popup{position:absolute;font-weight:900;font-size:.95rem;color:var(--accent);text-shadow:0 0 8px #000;transform:translate(-50%,-50%);animation:rise 1s ease-out forwards;white-space:nowrap}@keyframes rise{to{transform:translate(-50%,-180%);opacity:0}}#net-badge{position:absolute;bottom:calc(10px + var(--safe-bottom));left:12px;font-size:.72rem;color:var(--muted)}#pause-btn{position:absolute;bottom:calc(12px + var(--safe-bottom));right:12px;pointer-events:auto}.icon-btn{font:inherit;font-size:.8rem;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#00000073;color:var(--ink);cursor:pointer}#touch-pad{position:absolute;right:12px;bottom:calc(64px + var(--safe-bottom));display:flex;flex-direction:column;gap:14px;pointer-events:auto}.touch-btn{font:inherit;font-weight:800;font-size:.75rem;letter-spacing:.1em;width:84px;height:84px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:#00000073;color:var(--ink);touch-action:none}.touch-btn.swap{background:linear-gradient(135deg,var(--c0) 50%,var(--c1) 50%);color:transparent;border-color:var(--g1)}.overlay-panel{text-align:center}.overlay-panel .big{font-size:2rem;font-weight:900;color:var(--accent);margin:4px 0 10px}.stats{display:grid;grid-template-columns:1fr auto;gap:4px 14px;text-align:left;margin:12px auto 16px;max-width:300px}.stats dt{color:var(--muted)}.stats dd{margin:0;font-weight:700;text-align:right}@media(max-width:640px){.panel{padding:22px 18px 18px;border-radius:16px}.hud-player{min-width:0}.hud-score{font-size:1.1rem}.energy{width:110px}#hud-center{top:calc(64px + var(--safe-top));width:70vw}}