: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;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}.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:14px;right:14px;z-index:3;border:1px solid rgba(126,215,255,.7);border-radius:999px;padding:8px 12px;color:#eaf7ff;background:#070a0fcc;font:inherit;font-size:.75rem;font-weight:700;letter-spacing:.04em}#game-root{width:100%;aspect-ratio:16 / 9}#game-root canvas{display:block}.stage-label{position:absolute;top:14px;left:14px;z-index:2;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 9px;background:#070a0fb3;color:#abb6c8;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.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{width:min(620px,calc(100% - 32px));min-height:100vh;margin:0 auto;padding:clamp(58px,12vh,120px) 0 56px}.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;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 .stage-label{display:none}.mobile-battlefield .mobile-fullscreen{display:block}.mobile-battlefield .game-frame:fullscreen{width:100dvw;height:100dvh}}