:root{color:#edf4ff;background:#070b13;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,#app{width:100%;min-width:320px;min-height:100%;margin:0}body{min-height:100vh;min-height:100dvh;background:radial-gradient(circle at 16% 0%,rgba(67,220,185,.14),transparent 31rem),radial-gradient(circle at 92% 14%,rgba(255,104,88,.16),transparent 30rem),linear-gradient(135deg,#070b13,#0b1220 55%,#090d15)}.shell{width:min(1440px,100%);margin:0 auto;padding:24px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;width:42px;height:42px;place-items:center;border:1px solid rgba(91,242,189,.45);border-radius:12px;background:#5bf2bd1a;color:#69f4c1;font-weight:900}.brand h1{margin:0;font-size:clamp(1rem,3vw,1.35rem);letter-spacing:.04em;text-transform:uppercase}.brand p{margin:2px 0 0;color:#8f9bad;font-size:.82rem}.status{display:inline-flex;align-items:center;gap:8px;min-width:max-content;border:1px solid #283142;border-radius:999px;padding:8px 12px;color:#a9b4c4;background:#0f141edb;font-size:.82rem}.status-dot{width:8px;height:8px;border-radius:50%;background:#f2a93b;box-shadow:0 0 10px #f2a93b8c}.status[data-state=connected] .status-dot{background:#5bf2bd;box-shadow:0 0 10px #5bf2bdb3}.status[data-state=disconnected] .status-dot{background:#f15d58;box-shadow:0 0 10px #f15d58a6}.audio-toggle{border:1px solid #3a465a;border-radius:999px;padding:8px 12px;color:#cbd7e8;background:#0f141edb;font:inherit;font-size:.78rem;cursor:pointer}.audio-toggle[aria-pressed=true]{border-color:#5bf2bd8c;color:#8cffd2}.leave-button{border-color:#f15d588c;color:#ff9b96}.match-end-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:grid;place-items:center;background:#05080ec7}.match-end-overlay[hidden]{display:none}.match-end-card{width:min(92vw,440px);border:1px solid rgba(91,242,189,.35);border-radius:18px;background:#111a27;padding:32px 40px;text-align:center}.match-end-card h2{margin:0 0 14px;color:#f3f7ff;font-size:1.6rem;letter-spacing:.04em}.match-end-top{margin:0 0 16px;padding:0;list-style:none;text-align:left}.match-end-top li{padding:6px 0;color:#dbe5f2;font-size:1rem}.match-end-stats{margin:8px 0;color:#8cffd2;font-weight:700}.match-end-countdown{margin:8px 0;color:#96a3b6}.match-end-card .test-button{margin-top:16px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px}.game-frame{position:relative;overflow:hidden;min-width:0;border:1px solid rgba(113,148,185,.32);border-radius:20px;background:#0a1019;box-shadow:0 32px 90px #00000073,inset 0 1px #ffffff0d}.mobile-fullscreen{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:3;border:1px solid rgba(126,215,255,.7);border-radius:999px;padding:10px 15px;color:#eaf7ff;background:#070a0fcc;font:inherit;font-size:.8rem;font-weight:700;letter-spacing:.04em;touch-action:manipulation}.mobile-leave{top:calc(max(14px,env(safe-area-inset-top)) + 48px);border-color:#f15d58a6;color:#ffb3ae}#game-root{width:100%;aspect-ratio:16 / 9}#game-root canvas{display:block}.panel{border:1px solid rgba(113,148,185,.28);border-radius:20px;padding:20px;background:linear-gradient(145deg,#161f2feb,#0a101be0)}.panel h2{margin:0 0 8px;font-size:.95rem}.panel p{margin:0;color:#8f9bad;font-size:.85rem;line-height:1.6}.key-grid{display:grid;grid-template-columns:repeat(3,40px);gap:6px;justify-content:center;margin:22px 0}.key{display:grid;height:40px;place-items:center;border:1px solid #3d4d65;border-bottom-width:3px;border-radius:8px;color:#dfe7f2;background:#151e2c;font-weight:700}.key:first-child{grid-column:2}.key:nth-child(2){grid-column:1}.lesson{margin-top:18px;border-top:1px solid #273142;padding-top:16px}.lesson code{color:#69f4c1}.test-panel{margin-top:18px;border-top:1px solid #273142;padding-top:16px}.test-label{display:block;margin-top:14px;color:#a9b4c4;font-size:.75rem}.test-select,.test-button{width:100%;margin-top:6px;border:1px solid #3a465a;border-radius:8px;padding:8px 10px;color:#dfe7f2;background:#171e2a;font:inherit;font-size:.78rem}.test-button{cursor:pointer;font-weight:700;letter-spacing:.02em;transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}.test-button:hover{border-color:#69f4c1;background:#1b2939;transform:translateY(-1px)}.test-button:focus-visible,.test-select:focus-visible{outline:2px solid #75f4c6;outline-offset:2px}.lobby,.room-lobby{width:min(620px,calc(100% - 32px));min-height:100vh;margin:0 auto;padding:clamp(58px,12vh,120px) 0 56px}.room-lobby h1{margin:0;color:#f5f8ff;font-size:clamp(2.2rem,7vw,3.8rem);line-height:1;letter-spacing:-.055em}.room-lobby h1 em{color:#69f4c1;font-style:normal;letter-spacing:.06em}.waiting-player-list{display:grid;gap:8px;margin:16px 0 22px;padding:0;list-style:none}.waiting-player-list li{border:1px solid rgba(113,148,185,.3);border-left:3px solid #69f4c1;border-radius:10px;padding:12px 14px;color:#dce8f7;background:#121d2cc7;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;font-weight:700;letter-spacing:.04em}.waiting-player-list li[data-kind=bot]{border-left-color:#ff806d;color:#ffd0c8}.waiting-message{min-height:1.4em;margin-top:14px;color:#9eafc5;font-size:.85rem}.lobby-rules{margin-top:38px;border-top:1px solid rgba(147,169,198,.2);padding-top:18px}.lobby-rules h2{margin:0 0 10px;color:#dbe9fa;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}.lobby-rules p{margin:7px 0;color:#9eafc5;font-size:.83rem;line-height:1.55}.lobby-rules strong{color:#e7f1ff}.start-match{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:14px 16px;font-size:.94rem}.start-match:disabled,.primary-action:disabled{cursor:not-allowed;border-color:#334255;color:#7e8b9d;background:#17202d;box-shadow:none;transform:none}.lobby:after{content:"";position:fixed;z-index:-1;right:-12vw;bottom:-24vw;width:54vw;aspect-ratio:1;border:1px solid rgba(117,244,198,.09);border-radius:50%;box-shadow:0 0 0 50px #75f4c606,0 0 0 100px #75f4c605}.lobby-brand{display:flex;align-items:center;gap:10px;color:#f3f7ff;font-weight:900;letter-spacing:.12em;font-size:.9rem}.lobby-brand .brand-mark{width:34px;height:34px;border-radius:10px;font-size:.68rem}.lobby-brand span span{color:#69f4c1}.eyebrow{margin:72px 0 14px;color:#69f4c1;font-size:.7rem;font-weight:800;letter-spacing:.16em}.lobby h1{margin:0;color:#f5f8ff;font-size:clamp(2.6rem,8vw,4.7rem);line-height:.93;letter-spacing:-.065em}.lobby h1 em{color:#ff806d;font-style:normal}.lobby-intro{max-width:470px;margin:24px 0 30px;color:#a5b2c5;font-size:1rem;line-height:1.65}.lobby-actions{display:grid;grid-template-columns:1fr;gap:10px}.primary-action{display:flex;align-items:center;justify-content:space-between;border-color:#69f4c1;padding:14px 16px;color:#072018;background:#69f4c1;font-size:.94rem}.primary-action span{font-size:1.25rem;line-height:.7}.primary-action:hover{border-color:#b2ffdc;background:#8cffd2;box-shadow:0 8px 26px #5bf2bd2e}.join-code{display:grid;grid-template-columns:1fr 112px;gap:10px}.join-code .test-select{width:100%;margin:0;padding:13px 15px;letter-spacing:.16em;font-weight:800}.join-code .test-button{margin:0;padding:13px 15px}#lobby-message{min-height:1.4em;color:#ffad9f;font-size:.82rem}.room-heading{display:flex;align-items:center;justify-content:space-between;margin-top:54px;border-bottom:1px solid rgba(147,169,198,.2);padding-bottom:12px}.room-heading h2{margin:0;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}.room-heading span{color:#69f4c1;font-size:.65rem;font-weight:800;letter-spacing:.14em}#room-list .test-button{text-align:left}.player-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem!important;letter-spacing:.035em}#copy-room-code{margin-left:4px;border:0;padding:0;color:#69f4c1;background:transparent;font:inherit;cursor:pointer}.pickup-actions{display:grid;grid-template-columns:1fr;gap:4px;margin-top:10px}.bot-dpad{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:10px}.bot-dpad .test-button:first-child{grid-column:2}.bot-dpad .test-button:nth-child(2){grid-column:1}@media (max-width: 820px){.shell{padding:14px}.layout{grid-template-columns:1fr}.panel,.brand p{display:none}body.mobile-battlefield{overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;background:#090d14}.mobile-battlefield .shell{width:100dvw;height:100dvh;padding:0}.mobile-battlefield .topbar{display:none}.mobile-battlefield .layout{display:block;height:100%}.mobile-battlefield .game-frame{width:100%;height:100%;border:0;border-radius:0;box-shadow:none}.mobile-battlefield #game-root{width:100%;height:100%;aspect-ratio:auto}.mobile-battlefield .mobile-fullscreen{display:block}.mobile-battlefield .game-frame:fullscreen{width:100dvw;height:100dvh}}