:root{--ink:#102a38;--cyan:#36d7e8;--pink:#f62a7d;--cream:#fff9e8;--glass:rgba(8,29,43,.88)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:Arial,Helvetica,sans-serif;background:#70cedf;color:white;touch-action:none}canvas{display:block;width:100%;height:100%}.panel-wrap{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 40%,rgba(76,217,232,.2),transparent 45%),rgba(5,17,29,.64);backdrop-filter:blur(7px);z-index:20}.panel{width:min(520px,100%);padding:38px;border:1px solid rgba(255,255,255,.2);border-radius:28px;background:linear-gradient(145deg,rgba(10,37,52,.96),rgba(6,19,33,.96));box-shadow:0 30px 80px #03111ca8, inset 0 1px #ffffff18}.eyebrow{font-size:11px;letter-spacing:.24em;color:var(--cyan);font-weight:800}.panel h1{font-size:clamp(48px,10vw,76px);line-height:.86;letter-spacing:-.07em;margin:22px 0 18px}.panel h1 span,.brand span{color:var(--pink)}.tagline{color:#c3d5dc;font-size:17px;line-height:1.5;margin-bottom:28px}.panel label{display:grid;gap:8px;font-size:11px;letter-spacing:.18em;color:#b6c8d0;font-weight:700}.panel input{width:100%;padding:16px 18px;border:1px solid #ffffff26;border-radius:13px;background:#061725;color:white;font:700 17px inherit;outline:none;margin-bottom:16px}.panel input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #36d7e825}button{font:800 13px inherit;letter-spacing:.07em;cursor:pointer}.panel button{width:100%;border-radius:13px;padding:16px;margin-top:10px}.primary{border:0;background:linear-gradient(90deg,var(--cyan),#61ecc3);color:#092331;box-shadow:0 8px 25px #28cbd638}.ghost{border:1px solid #ffffff2c;background:#ffffff08;color:white}.future-note{text-align:center;color:#6f8b97;font-size:11px;letter-spacing:.1em;margin:22px 0 0}.hidden{display:none!important}.help-card h2,.compact h2,.result-card h2{font-size:34px;margin:14px 0 24px}.manual-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.manual-grid div{padding:16px;border:1px solid #ffffff19;border-radius:14px;background:#ffffff07}.manual-grid b{display:block;color:var(--pink);font-size:12px;letter-spacing:.12em;margin-bottom:6px}.manual-grid span{color:#c7d6dd;font-size:13px;line-height:1.4}#hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;padding:clamp(14px,3vw,30px);pointer-events:none;text-shadow:0 2px 8px #06213099}.brand{font-size:clamp(20px,3vw,34px);font-weight:1000;letter-spacing:-.06em}.readouts{display:flex;gap:clamp(14px,3vw,42px);padding:10px 18px;border-radius:18px;background:#072536b0;border:1px solid #ffffff25;backdrop-filter:blur(8px)}.readouts div{display:grid;text-align:center}.readouts small,.result-grid small{font-size:9px;letter-spacing:.16em;color:#a8c3cd}.readouts strong{font-size:18px;font-variant-numeric:tabular-nums}#pause{pointer-events:auto;width:45px;height:45px;border-radius:50%;border:1px solid #ffffff40;background:#072536c9;color:white;font-size:17px}#status{position:absolute;top:98px;left:clamp(14px,3vw,30px);display:grid;gap:9px}.lives{display:flex;gap:7px}.life{width:23px;height:10px;border-radius:10px 3px 3px 10px;background:var(--pink);box-shadow:0 0 12px #f62a7d88}.shield-meter{position:relative;width:135px;height:8px;background:#06233266;border:1px solid #fff3;border-radius:9px}.shield-meter span{display:block;width:0;height:100%;background:var(--cyan);box-shadow:0 0 13px var(--cyan);transition:width .1s}.shield-meter b{position:absolute;top:12px;font-size:8px;letter-spacing:.15em;color:#d1edf2}.direction{margin-top:13px;font-size:9px;letter-spacing:.15em;color:#e7f7fa}.message{position:absolute;top:24%;left:50%;translate:-50% -50%;padding:12px 22px;border-radius:30px;background:#071c2dd9;border:1px solid #ffffff31;font-weight:900;letter-spacing:.12em;font-size:12px;animation:pop .25s ease}.message.good{color:#6fffd6}.message.bad{color:#ff8eab}@keyframes pop{from{opacity:0;transform:scale(.8)}}.compact{max-width:390px;text-align:center}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.result-grid div{display:grid;gap:5px;padding:15px 7px;background:#ffffff09;border:1px solid #ffffff1c;border-radius:14px}.result-grid strong{font-size:23px}.touch-controls{position:absolute;left:18px;right:18px;bottom:max(18px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.touch-controls button{pointer-events:auto;width:64px;height:64px;border-radius:50%;border:1px solid #fff6;background:#072536b8;color:white;font-size:22px;backdrop-filter:blur(6px)}.touch-controls button:nth-child(2){margin-right:auto;margin-left:10px}.touch-controls .lift{width:82px;height:82px;background:#f62a7dc9;font-size:13px;box-shadow:0 0 28px #f62a7d55}.flight-modes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 12px}.panel .flight-modes button{display:grid;gap:4px;margin:0;padding:13px 10px;border:1px solid #ffffff1e;background:#ffffff07;color:#9eb4bd}.flight-modes button.selected{border-color:var(--cyan);background:#36d7e817;color:white;box-shadow:inset 0 0 0 1px #36d7e833}.flight-modes small{font-size:9px;font-weight:500;letter-spacing:0;opacity:.72}.lobby-error{margin:2px 0 8px;padding:10px 12px;border:1px solid #ff6d9340;border-radius:11px;background:#ff2d6d14;color:#ff9ab5;font-size:12px;line-height:1.35}.network-status{font-size:8px;letter-spacing:.14em;color:#6fffd6;padding:7px 10px;border:1px solid #6fffd638;border-radius:15px;background:#08293dcc;width:max-content}@media(pointer:coarse){.touch-controls:not(.hidden){display:flex!important}}@media(max-width:700px){.readouts{position:absolute;left:14px;right:14px;top:62px;justify-content:space-around;gap:7px}.readouts strong{font-size:14px}.readouts small{font-size:7px}#status{top:125px}.manual-grid{grid-template-columns:1fr}.panel{padding:27px}.panel h1{font-size:52px}.brand{font-size:24px}.flight-modes{grid-template-columns:1fr}}