:root{color:#f7fbff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--bg-deep:#05080f;--bg:#10131a;--surface:#171b24;--surface-2:#202633;--border:#343c4d;--border-glow:#8ff8ff33;--text:#f7fbff;--muted:#9ba7b8;--accent:#50e3c2;--accent-bright:#8ff8ff;--accent-violet:#a78bfa;--danger:#fb7185;--ready:#8adf70;--panel-bg:#0f1a2eeb;--panel-stroke:#1f3a5fe6;--chip-bg:#152841d9;--chip-stroke:#2a4a73e6;background:#05080f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body,#app{width:100%;height:100%;margin:0;padding:0;overflow:hidden}button,input,select{font:inherit}button{color:#071110;cursor:pointer;letter-spacing:.04em;background:linear-gradient(#6af4d8 0%,#3fd4b2 100%);border:1px solid #59f0cf;border-radius:8px;min-height:42px;font-size:.9rem;font-weight:800;transition:transform .14s cubic-bezier(.34,1.56,.64,1),filter .12s,opacity .12s,box-shadow .15s;box-shadow:0 0 #50e3c200}button:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 0 18px #50e3c266,0 4px 12px #00000059}button:active:not(:disabled){filter:brightness(.95);transform:translateY(0)}button:disabled{cursor:not-allowed;opacity:.38}input,select{border:1px solid var(--border);width:100%;min-height:42px;color:var(--text);background:#05080fd9;border-radius:6px;padding:0 12px;transition:border-color .18s}input:focus,select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px #50e3c226}select{cursor:pointer}input[type=color]{padding:4px}.app-shell{background:var(--bg-deep);width:100vw;height:100vh;position:relative;overflow:hidden}.game-root{background:#05080f;width:100%;height:100%;overflow:hidden}.game-root canvas{width:100%;height:100%;display:block}.splash-screen{z-index:50;-webkit-backdrop-filter:blur(8px);background:radial-gradient(at 50% 15%,#8ff8ff1a 0%,#0000 55%),radial-gradient(at 20% 85%,#a78bfa12 0%,#0000 45%),radial-gradient(at 80% 60%,#50e3c20f 0%,#0000 40%),linear-gradient(#05080ff5 0%,#05080f 100%);place-items:center;padding:28px;display:grid;position:fixed;inset:0}.splash-stage{background:linear-gradient(145deg,#101520f0 0%,#0a0e16f7 100%);border:1px solid #8ff8ff3d;border-radius:16px;gap:22px;width:min(760px,100%);padding:44px;display:grid;box-shadow:0 40px 100px #0009,0 0 1px #8ff8ff52,0 0 60px #50e3c20a,inset 0 1px #8ff8ff1a}.splash-kicker{color:var(--accent-bright);letter-spacing:.18em;text-transform:uppercase;text-shadow:0 0 12px #8ff8ff80;font-size:.75rem;font-weight:900}.splash-stage h1{letter-spacing:-.02em;background:linear-gradient(140deg, #f7fbff 25%, var(--accent-bright) 70%, var(--accent-violet) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:clamp(3.2rem,10vw,7rem);line-height:.88}.splash-copy{color:var(--muted);font-size:1rem;line-height:1.55}.splash-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:8px;display:grid}.options-panel{border:1px solid var(--border);background:#0d1016eb;border-radius:8px;gap:14px;margin-top:8px;padding:16px;display:grid}.options-panel label{color:var(--muted);gap:8px;font-size:.82rem;font-weight:800;display:grid}.option-check{grid-template-columns:18px minmax(0,1fr);align-items:center}.option-check input{width:16px;min-height:16px;padding:0}.lobby-panel{z-index:30;border:1px solid var(--border-glow);width:min(420px,100vw - 32px);max-height:calc(100vh - 48px);color:var(--text);-webkit-backdrop-filter:blur(20px)saturate(1.3);opacity:1;pointer-events:auto;background:linear-gradient(160deg,#10131ae0 0%,#0a0e16eb 50%,#05080ff0 100%);border-radius:14px;flex-direction:column;gap:20px;padding:28px 24px;transition:opacity .28s cubic-bezier(.4,0,.2,1),transform .28s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:50%;left:50%;overflow:hidden auto;transform:translate(-50%,-50%);box-shadow:0 32px 80px #0009,0 0 1px #8ff8ff66,0 0 40px #50e3c20f,inset 0 1px #8ff8ff1a}.lobby-panel::-webkit-scrollbar{width:6px}.lobby-panel::-webkit-scrollbar-track{background:0 0}.lobby-panel::-webkit-scrollbar-thumb{background:#8ff8ff26;border-radius:3px}.lobby-panel::-webkit-scrollbar-thumb:hover{background:#8ff8ff4d}.lobby-panel--hidden{opacity:0;pointer-events:none;transform:translate(-50%,-46%)scale(.97)}.brand-row{justify-content:space-between;align-items:flex-start;gap:18px;display:flex}h1,h2,p{margin:0}h1{color:var(--text);letter-spacing:-.01em;font-size:1.7rem;line-height:1}h2{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:.74rem;font-weight:900}.status-line{color:var(--muted);margin-top:8px;font-size:.9rem;line-height:1.45}.build-tag{border:1px solid var(--border-glow);width:44px;height:32px;color:var(--accent-bright);letter-spacing:.06em;text-shadow:0 0 8px #8ff8ff66;background:#05080fb3;border-radius:6px;place-items:center;font-size:.75rem;font-weight:900;display:grid}.player-form,.room-actions,.active-room,.role-box,.server-panel,.player-connect,.chaos-box,.players-box{gap:12px;display:grid}.player-form label,.server-panel label,.chaos-box label{color:var(--muted);gap:8px;font-size:.82rem;font-weight:700;display:grid}.role-box{border:1px solid var(--border);background:#171b2499;border-radius:8px;grid-template-columns:repeat(2,minmax(0,1fr));padding:14px}.role-box h2{grid-column:1/-1}.role-box label{min-height:32px;color:var(--text);align-items:center;gap:8px;font-size:.85rem;font-weight:800;display:flex}.role-box input{width:16px;min-height:16px;padding:0}.server-panel,.player-connect{border:1px solid var(--border);background:#171b2499;border-radius:8px;padding:14px}.join-address{grid-template-columns:minmax(0,1fr) 92px;gap:10px;display:grid}.server-panel input[readonly]{color:var(--accent-bright);font-weight:900}.chaos-box{border:1px solid var(--border);background:#171b2499;border-radius:8px;grid-template-columns:repeat(2,minmax(0,1fr));padding:14px}.chaos-box h2{grid-column:1/-1}.chaos-box label{grid-template-columns:16px minmax(0,1fr);align-items:center;gap:8px;min-height:26px;font-size:.76rem}.chaos-box input{width:16px;min-height:16px;padding:0}.join-row{grid-template-columns:minmax(0,1fr) 92px;gap:10px;display:grid}.active-room{border:1px solid var(--border);background:#171b2499;border-radius:8px;padding:14px}.active-room button[data-ready-toggle][data-ready=false]{color:var(--accent-bright);background:0 0!important;border:1px solid #8ff8ff73!important}.active-room button[data-ready-toggle][data-ready=false]:hover:not(:disabled){background:#8ff8ff14!important}.active-room button[data-ready-toggle][data-ready=true]{box-shadow:0 0 14px #8ff8ff40;color:#f7fbff!important;background:linear-gradient(160deg,#2a8d7c,#156b5e)!important;border:1px solid #8ff8ff99!important}button.btn-ghost{min-height:36px;font-size:.8rem;font-weight:700;border:1px solid var(--border)!important;color:var(--muted)!important;background:0 0!important}button.btn-ghost:hover:not(:disabled){box-shadow:none;border-color:var(--accent)!important;color:var(--text)!important}button.btn-danger{font-size:.85rem;font-weight:700;color:var(--danger)!important;background:0 0!important;border:1px solid #fb718566!important}button.btn-danger:hover:not(:disabled){box-shadow:none;background:#fb718514!important}.room-code-row{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;background:#8ff8ff0d;border:1px solid #8ff8ff1f;border-radius:8px;justify-content:space-between;align-items:center;padding:8px 10px;font-size:.8rem;display:flex}.room-code-row strong{color:var(--accent-bright);letter-spacing:.18em;font-variant-numeric:tabular-nums;text-shadow:0 0 8px #8ff8ff73,0 0 24px #8ff8ff2e;font-size:1.5rem}.players-box{border-top:1px solid #8ff8ff14;min-height:120px;padding-top:18px}.players-box ul{gap:8px;margin:0;padding:0;list-style:none;display:grid}.player-row{border:1px solid var(--border);background:#20263380;border-radius:6px;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:38px;padding:8px 10px;display:grid}.player-swatch{border:1px solid #ffffff8c;border-radius:50%;width:14px;height:14px;box-shadow:0 0 6px #8ff8ff33}.player-name{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;font-weight:750;overflow:hidden}.player-state{color:var(--muted);text-transform:uppercase;font-size:.76rem;font-weight:800}.player-state.ready{color:var(--ready);text-shadow:0 0 6px #8adf7066}@media (width<=480px){.lobby-panel{border-radius:10px;width:calc(100vw - 16px);max-height:calc(100vh - 24px);padding:20px 16px}.splash-stage{padding:24px}.splash-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}