:root{--bg-0:#05070f;--bg-1:#0b1122;--panel:#0e1529a8;--panel-solid:#0d1428;--line:#60d6ff29;--line-strong:#60d6ff61;--neon:#3fe0ff;--neon-dim:#3fe0ff24;--neon-glow:#3fe0ff73;--magenta:#ff4ecd;--p1:#38a0ff;--p2:#ffd84a;--ink:#eef4ff;--ink-dim:#8fa3c4;--danger:#ff5d7a;--font-display:"Orbitron", Inter, ui-sans-serif, system-ui, sans-serif;color:var(--ink);background:var(--bg-0);font-synthesis:none;text-rendering:optimizelegibility;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{background:radial-gradient(circle at 15% 8%, #3fe0ff17, transparent 30rem), radial-gradient(circle at 85% 92%, #ff4ecd12, transparent 30rem), repeating-linear-gradient(0deg, transparent 0 47px, #3fe0ff07 47px 48px), repeating-linear-gradient(90deg, transparent 0 47px, #3fe0ff07 47px 48px), linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-0) 100%);min-width:320px;min-height:100vh;margin:0}button{font:inherit}.app-shell{width:min(100vw,1120px);min-height:100vh;margin:0 auto;padding:clamp(12px,2.4vw,28px)}.app-shell>section:not([hidden]){animation:.26s ease-out screen-in}@keyframes screen-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.app-shell>section:not([hidden]){animation:none}}.home-screen{place-items:center;min-height:calc(100vh - clamp(24px,4.8vw,56px));display:grid}.home-panel{gap:22px;width:min(100%,560px);display:grid}.eyebrow{color:var(--neon);font-family:var(--font-display);letter-spacing:.32em;text-transform:uppercase;margin:0;font-size:.78rem;font-weight:700;line-height:1}.home-panel h1{color:#fff;font-family:var(--font-display);letter-spacing:.06em;text-shadow:0 0 18px var(--neon-glow), 0 0 52px #3fe0ff38;margin:0;font-size:clamp(2.1rem,7vw,3.6rem);font-weight:900;line-height:1.08}.mode-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.mode-button,.text-button,.primary-button,.secondary-button{border:1px solid var(--line);color:var(--ink);background:var(--panel);cursor:pointer;border-radius:10px;transition:border-color .14s,background .14s,box-shadow .14s,transform 90ms}.mode-button{text-align:left;align-content:center;gap:10px;min-height:136px;padding:18px;display:grid}.mode-button span{color:#051018;background:var(--p1);width:44px;height:44px;font-family:var(--font-display);border-radius:50%;place-items:center;font-weight:800;display:grid;box-shadow:0 0 16px #38a0ff8c}#two-player-button span{background:var(--p2);box-shadow:0 0 16px #ffd84a80}.mode-button strong{font-size:1.25rem;line-height:1.2}.mode-button:hover,.text-button:hover,.primary-button:hover:not(:disabled),.secondary-button:hover:not(:disabled),.icon-button:hover{border-color:var(--line-strong);background:var(--neon-dim);box-shadow:0 0 18px #3fe0ff2e}.mode-button:hover{transform:translateY(-2px)}.mode-button:active,.primary-button:active:not(:disabled),.secondary-button:active:not(:disabled),.control-button:active{transform:translateY(1px)scale(.99)}.mode-button:focus-visible,.text-button:focus-visible,.primary-button:focus-visible,.secondary-button:focus-visible{outline:3px solid var(--neon);outline-offset:3px}.game-shell{grid-template-rows:auto auto 1fr;align-items:center;gap:12px;min-height:calc(100vh - clamp(24px,4.8vw,56px));display:grid}.screen-header{width:min(100%,960px);margin:0 auto;display:flex}.text-button{min-height:36px;padding:0 12px;font-size:.9rem}.primary-button{color:#04121a;background:linear-gradient(180deg, #6ae8ff 0%, var(--neon) 100%);border-color:#0000;min-height:44px;padding:0 16px;font-weight:800;box-shadow:0 0 22px #3fe0ff59}.primary-button:hover:not(:disabled){color:#04121a;background:linear-gradient(#8df0ff 0%,#55e5ff 100%);box-shadow:0 0 30px #3fe0ff80}.secondary-button{min-height:44px;padding:0 16px;font-weight:800}.credits-link{width:fit-content;min-height:32px;color:var(--ink-dim);cursor:pointer;font:inherit;text-underline-offset:4px;background:0 0;border:0;padding:0;font-size:.9rem;text-decoration:underline}.credits-link:hover,.credits-link:focus-visible{color:var(--neon)}.primary-button:disabled{color:#5d6b84;box-shadow:none;cursor:not-allowed;background:#ffffff14}.secondary-button:disabled{color:#5d6b84;cursor:not-allowed}.wide{width:min(100%,760px)}.rooms-screen{place-items:center;min-height:calc(100vh - clamp(24px,4.8vw,56px));display:grid}.rooms-panel,.mapping-panel{gap:16px;width:min(100%,760px);display:grid}.home-secondary-button{width:100%}.rooms-heading{justify-content:space-between;align-items:end;gap:16px;display:flex}.rooms-heading h1,.room-detail h1,.mapping-heading h1{color:#fff;font-family:var(--font-display);letter-spacing:.05em;text-shadow:0 0 16px #3fe0ff4d;margin:6px 0 0;font-size:clamp(1.7rem,5vw,2.7rem);font-weight:900;line-height:1.08}.mapping-screen{place-items:center;min-height:calc(100vh - clamp(24px,4.8vw,56px));display:grid}.mapping-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.mapping-group{border:1px solid var(--line);background:var(--panel);border-radius:10px;align-content:start;gap:10px;padding:16px;display:grid}.mapping-group h2{color:#fff;margin:0 0 4px;font-size:1rem;line-height:1.2}.mapping-row{grid-template-columns:minmax(0,1fr) 132px;align-items:center;gap:10px;min-height:44px;display:grid}.mapping-row span{color:#c2cfe6;font-size:.95rem}.key-bind-button{min-height:38px;color:var(--ink);cursor:pointer;font-family:var(--font-display);background:linear-gradient(#3fe0ff1a 0%,#0e152999 100%);border:1px solid #a0dcff57;border-bottom-width:3px;border-radius:8px;padding:0 10px;font-size:.85rem;font-weight:700}.key-bind-button:hover,.key-bind-button:focus-visible{border-color:var(--neon);background:var(--neon-dim);box-shadow:0 0 14px #3fe0ff40}.key-bind-button.is-capturing{color:#051018;background:var(--p2);border-color:var(--p2);box-shadow:0 0 18px #ffd84a80}.mapping-footer{justify-content:space-between;align-items:center;gap:12px;min-height:44px;display:flex}.mapping-footer-buttons{flex-wrap:wrap;gap:8px;display:flex}.setting-select{min-height:38px;color:var(--ink);background:var(--panel-solid);cursor:pointer;border:1px solid #a0dcff57;border-radius:8px;padding:0 10px;font-weight:700}.setting-select:hover,.setting-select:focus-visible{border-color:var(--neon)}.setting-toggle{color:var(--ink);cursor:pointer;justify-content:flex-end;align-items:center;gap:8px;font-size:.9rem;display:flex}.setting-toggle input{width:18px;height:18px;accent-color:var(--neon);cursor:pointer}.setting-range{width:100%;accent-color:var(--neon)}.setting-range:disabled{opacity:.35}.setting-value{color:var(--neon);margin-left:6px;font-weight:700}.setting-note{color:var(--ink-dim);margin:4px 0 0;font-size:.8rem}.mapping-status{min-height:1.2em;color:var(--ink-dim);margin:0;font-size:.9rem}.room-list{gap:10px;display:grid}.room-row{border:1px solid var(--line);border-left:3px solid var(--neon);background:var(--panel);border-radius:10px;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;min-height:72px;padding:12px;display:grid}.room-name{color:#fff;font-family:var(--font-display);letter-spacing:.04em;font-size:1rem;font-weight:700}.room-meta,.room-status{color:var(--ink-dim);font-size:.9rem}.room-status{margin:10px 0 0}.room-detail{border:1px solid var(--line);background:var(--panel);border-radius:10px;gap:16px;padding:20px;display:grid}.player-list{gap:8px;display:grid}.player-row{border-bottom:1px solid #60d6ff24;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:0 12px;display:flex}.player-row span:first-child{color:#fff;font-weight:700}.empty-state{color:var(--ink-dim);border:1px dashed #60d6ff4d;border-radius:10px;padding:18px}.error-state{color:#ffd1da;background:#ff5d7a14;border-color:#ff5d7a8c}.credits-dialog{border:1px solid var(--line-strong);width:min(100vw - 32px,520px);color:var(--ink);background:var(--panel-solid);border-radius:10px;padding:0;box-shadow:0 0 42px #3fe0ff29,0 24px 72px #0000008c}.credits-dialog::backdrop{background:#03060cc2}.credits-panel{gap:16px;padding:18px;display:grid}.credits-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.credits-header h2{color:#fff;margin:0;font-size:1.35rem;line-height:1.2}.credits-body{gap:14px;display:grid}.credits-body h3{color:var(--neon);letter-spacing:.18em;text-transform:uppercase;margin:0 0 8px;font-size:.82rem;line-height:1}.credits-body ul{gap:6px;margin:0;padding-left:18px;display:grid}.credits-body a{color:#fff}.scorebar{grid-template-columns:minmax(0,1fr) minmax(172px,220px) minmax(0,1fr);align-items:center;gap:10px;width:min(100%,960px);margin:0 auto;display:grid}.scorebar>div{border-bottom:1px solid var(--line);align-content:center;gap:2px;min-height:52px;display:grid}.scorebar>div:first-child{border-bottom-color:#ffd84a66}.scorebar>div:last-child{text-align:right;border-bottom-color:#38a0ff73}.label{color:var(--ink-dim);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;line-height:1}.scorebar strong{color:#fff;font-family:var(--font-display);font-size:clamp(1.15rem,3vw,1.7rem);font-weight:700;line-height:1.15}.scorebar>div:first-child strong{color:var(--p2);text-shadow:0 0 12px #ffd84a66}.scorebar>div:last-child strong{color:var(--p1);text-shadow:0 0 12px #38a0ff73}.player-side-label{width:min(100%,960px);color:var(--ink-dim);text-align:center;margin:-4px auto 0;font-size:.9rem}.match-message{color:#fff;text-align:center;background:#ffd84a1a;border:1px solid #ffd84a6b;border-radius:10px;align-content:center;gap:2px;width:min(100%,960px);min-height:52px;margin:0 auto;padding:10px 12px;display:grid}.match-message span{color:#c2cfe6;font-size:.9rem}.rematch-panel{justify-content:center;align-items:center;gap:12px;width:min(100%,960px);min-height:52px;margin:0 auto;display:flex}.rematch-panel span{color:#c2cfe6;font-size:.9rem}.icon-button{border:1px solid var(--line);width:44px;height:44px;color:var(--ink);background:var(--panel);cursor:pointer;border-radius:10px;place-items:center;display:grid}.icon-button:focus-visible{outline:3px solid var(--neon);outline-offset:3px}.icon-button[aria-pressed=false]{color:var(--ink-dim)}.audio-controls{grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px;min-height:52px;display:grid}.volume-control{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px;min-width:0;display:grid}.volume-control .label{grid-column:1/2}.volume-control input{width:100%;accent-color:var(--neon);grid-column:1/-1}.volume-value{color:#fff;font-variant-numeric:tabular-nums;font-size:.75rem;line-height:1}.canvas-frame{aspect-ratio:3/2;place-items:center;width:min(100%,960px);margin:0 auto;display:grid}.touch-controls{grid-template-columns:minmax(0,1fr) minmax(112px,.72fr) minmax(0,1fr);gap:10px;width:min(100%,960px);margin:0 auto;display:grid}.touch-controls.item-touch-controls{grid-template-columns:1fr 1fr}.item-control{font-size:.95rem}.control-button{border:1px solid var(--line-strong);min-height:56px;color:var(--ink);background:var(--panel);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:10px;font-size:1.45rem;font-weight:800;transition:border-color .12s,background .12s,box-shadow .12s,transform 80ms}.control-button:hover,.control-button:active{border-color:var(--neon);background:var(--neon-dim);box-shadow:0 0 16px #3fe0ff38}.control-button:focus-visible{outline:3px solid var(--neon);outline-offset:3px}.start-control{color:#04121a;background:linear-gradient(180deg, #6ae8ff 0%, var(--neon) 100%);font-family:var(--font-display);letter-spacing:.12em;border-color:#0000;font-size:.9rem;font-weight:700;box-shadow:0 0 20px #3fe0ff52}canvas{border:1px solid var(--line-strong);background:var(--bg-0);touch-action:none;border-radius:10px;width:100%;height:100%;display:block;box-shadow:0 0 34px #3fe0ff24,0 18px 48px #00000073}@media (width<=560px){.game-shell{grid-template-rows:none;align-content:center;align-items:start;gap:8px}.scorebar>div{min-height:44px}.mode-actions,.rooms-heading,.room-row,.mapping-groups{grid-template-columns:1fr}.rooms-heading{align-items:stretch}.scorebar{grid-template-columns:minmax(0,1fr) minmax(128px,164px) minmax(0,1fr)}.icon-button{width:40px;height:40px}.audio-controls{grid-template-columns:40px minmax(0,1fr)}.touch-controls{grid-template-columns:minmax(0,1fr) minmax(92px,.68fr) minmax(0,1fr);gap:8px}.control-button{min-height:52px}.mapping-footer{flex-direction:column;align-items:stretch}}