:root{color:#f7f3e8;background:#00080f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{overflow:hidden}button,input{font:inherit}button{border:0;cursor:pointer}button:disabled{cursor:wait;opacity:.62}button:focus-visible,input:focus-visible{outline:3px solid #66ffcc;outline-offset:2px}.game-shell{position:relative;width:100vw;height:100vh;min-height:540px;background:#00080f}#gameCanvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}.topbar{position:absolute;right:16px;bottom:16px;z-index:5;display:block;pointer-events:none}.topbar>*{pointer-events:auto}.brand-lockup,.connection-pill,.menu-panel,.lobby-panel,.score-panel{border:1px solid rgba(247,243,232,.16);border-radius:8px;background:#00080fd6;box-shadow:0 12px 34px #00000047;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.brand-lockup{display:flex;min-width:0;gap:12px;align-items:center;padding:10px 12px}.brand-copy{display:grid;min-width:0;gap:2px}.brand-copy strong{overflow:hidden;color:#fff;font-size:1rem;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.brand-copy span{overflow:hidden;color:#cfeeff;font-size:.78rem;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.alias-field{display:grid;gap:6px;min-width:0}.alias-field span{color:#cfeeff;font-size:.68rem;font-weight:700;line-height:1;text-transform:uppercase}.alias-field input{width:100%;min-width:0;height:38px;border:1px solid rgba(247,243,232,.2);border-radius:6px;padding:0 10px;color:#fff;background:#cfeeff14}.connection-pill{display:inline-flex;min-width:0;max-width:180px;gap:6px;align-items:center;justify-content:center;padding:9px 10px;color:#f7f3e8;font-size:.76rem;font-weight:750;line-height:1}.status-dot{width:8px;height:8px;flex:0 0 auto;border-radius:999px;background:#8f9485}#statusText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.connection-pill[data-state=connecting] .status-dot{background:gold}.connection-pill[data-state=online] .status-dot{background:#6fc}.connection-pill[data-state=error] .status-dot{background:#ef476f}.menu-overlay,.lobby-overlay,.score-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:24px 16px;pointer-events:none}.menu-overlay[hidden],.lobby-overlay[hidden],.score-overlay[hidden]{display:none}.menu-panel,.lobby-panel,.score-panel{width:min(860px,100%);padding:18px;pointer-events:auto}.menu-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}.menu-queen,.menu-manatee{display:block;flex:0 0 auto;image-rendering:pixelated}.menu-queen{width:220px;height:118px;max-width:min(52vw,220px);animation:menu-queen-hover 2.1s ease-in-out infinite}.menu-manatee{width:150px;height:82px;animation:menu-manatee-bob 1.8s ease-in-out infinite}@keyframes menu-queen-hover{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}@keyframes menu-manatee-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.menu-heading h1,.lobby-header h2,.score-panel h2{margin:0;color:#fff;line-height:1.1}.menu-heading p,.lobby-header p,.score-panel p{margin:4px 0 0;color:#cfeeff;line-height:1.35}.menu-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.how-to-button,.practice-button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;border-radius:7px;padding:0 14px;color:#001015;font-weight:850}.how-to-button{border:1px solid rgba(102,255,204,.35);background:#6fc}.how-to-button[aria-expanded=true]{background:gold}.practice-button{border:1px solid rgba(255,215,0,.34);background:gold}.how-to-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}.how-to-panel[hidden]{display:none}.how-to-card{display:grid;gap:6px;align-items:end;justify-items:center;min-width:0;border:1px solid rgba(207,238,255,.16);border-radius:8px;padding:10px 8px 11px;background:#cfeeff12}.how-to-card canvas{display:block;width:min(100%,196px);height:auto;aspect-ratio:196 / 92;image-rendering:pixelated}.how-to-card span{overflow-wrap:anywhere;color:#f7fbff;font-size:.76rem;font-weight:850;line-height:1.15;text-align:center}.lobby-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.lobby-card{display:grid;min-height:124px;gap:8px;align-content:start;border:1px solid rgba(207,238,255,.16);border-radius:8px;padding:13px;color:#f7fbff;text-align:left;background:#cfeeff12}.lobby-card:not(:disabled):hover{border-color:#66ffccb8;background:#66ffcc1f}.lobby-card:disabled{cursor:not-allowed}.lobby-card strong{font-size:1.08rem}.lobby-card span{color:#cfeeff;font-size:.78rem;font-weight:800;text-transform:uppercase}.lobby-header{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:16px}.player-count{display:inline-block;margin-bottom:4px;color:#6fc;font-size:.8rem;font-weight:900}.lobby-actions{display:flex;gap:8px}.ghost-button,.ready-button,.team-slots button{border-radius:7px;font-weight:850}.ghost-button,.ready-button{min-width:92px;height:40px;padding:0 14px}.ghost-button{color:#f7fbff;background:#cfeeff1a}.ready-button{color:#001015;background:#6fc}.ready-button.is-ready{color:#001015;background:gold}.slot-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.team-slots{display:grid;gap:8px;border:1px solid rgba(207,238,255,.13);border-radius:8px;padding:12px;background:#00080f61}.team-slots h3{margin:0 0 3px;color:#fff;font-size:.92rem;text-transform:uppercase}.team-blue h3{color:#00a8ff}.team-red h3{color:#ff4757}.team-slots button{display:grid;grid-template-columns:76px minmax(0,1fr) 72px;gap:8px;align-items:center;min-height:46px;border:1px solid rgba(247,243,232,.11);border-radius:7px;padding:8px 9px;color:#f7f3e8;background:#cfeeff0f;text-align:left}.team-slots button.is-open{color:#8fa8b4;background:#cfeeff09}.team-slots button.is-local{border-color:#ffffffa6}.team-slots button.team-blue{box-shadow:inset 3px 0 #00a8ff}.team-slots button.team-red{box-shadow:inset 3px 0 #ff4757}.team-slots button:not(:disabled):hover{border-color:#66ffcca6;background:#66ffcc1a}.slot-role{color:#cfeeff;font-size:.76rem;font-weight:900;text-transform:uppercase}.slot-name{overflow:hidden;min-width:0;font-weight:720;text-overflow:ellipsis;white-space:nowrap}.slot-state{overflow:hidden;color:#cfeeff;font-size:.7rem;font-weight:800;text-align:right;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.slot-state.is-ready{color:#6fc}.score-overlay{background:#00080f4d}.score-panel{width:min(520px,100%);text-align:center}.score-panel h2{font-size:2rem}.score-panel strong{display:block;margin-top:12px;color:#6fc;font-size:1rem}.practice-overlay{position:absolute;top:16px;left:16px;z-index:6;max-width:min(360px,calc(100vw - 32px));pointer-events:none}.practice-overlay[hidden]{display:none}.practice-panel{display:grid;gap:7px;border:1px solid rgba(247,243,232,.16);border-radius:8px;padding:12px;color:#f7f3e8;background:#00080fd6;box-shadow:0 12px 34px #00000047;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto}.practice-panel span{color:#6fc;font-size:.68rem;font-weight:850;line-height:1;text-transform:uppercase}.practice-panel strong{color:#fff;font-size:1.12rem;line-height:1.1}.practice-panel p{margin:0;color:#cfeeff;font-size:.78rem;line-height:1.3}.practice-actions{display:flex;gap:8px;margin-top:3px}.touch-controls{position:absolute;right:16px;bottom:18px;left:16px;display:none;grid-template-columns:76px 76px minmax(112px,152px) 76px;gap:10px;justify-content:center;pointer-events:none}.touch-controls button{height:58px;border:1px solid rgba(247,243,232,.18);border-radius:8px;color:#fff;font-size:1.05rem;font-weight:900;background:#00080fd6;box-shadow:0 12px 28px #00000042;pointer-events:auto;touch-action:none}.touch-controls button[data-control=jump]{color:#001015;background:#6fc}@media(hover:none),(pointer:coarse){body[data-phase=playing] .touch-controls{display:grid}body[data-phase=playing] .topbar{bottom:90px}}@media(max-width:980px){.lobby-cards,.how-to-panel{grid-template-columns:1fr}}@media(max-width:640px){.game-shell{min-height:620px}.topbar{right:10px;bottom:12px}.brand-lockup,.connection-pill,.menu-panel,.lobby-panel,.score-panel{border-radius:7px}.connection-pill{max-width:154px;padding:8px 9px}.menu-overlay,.lobby-overlay,.score-overlay{padding:28px 10px 86px}.menu-heading{gap:10px}.menu-queen{width:170px}.menu-manatee{width:118px;height:65px}.lobby-header,.slot-board{grid-template-columns:1fr}.lobby-header{align-items:stretch}.lobby-actions{width:100%}.ghost-button,.ready-button{flex:1}.practice-overlay{top:10px;left:10px;max-width:calc(100vw - 20px)}.touch-controls{right:10px;bottom:12px;left:10px;grid-template-columns:54px 54px minmax(86px,116px) 54px}.touch-controls button{height:54px}}