:root{--bg:#03040c;--ink:#e8f0ff;--dim:#8b98bd;--cyan:#6fe6ff;--gun:#6fe6ff;--ship:#ffb35a;--danger:#ff5a6e}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{background:var(--bg);height:100%;color:var(--ink);overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:none;margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}.game{position:fixed;inset:0;overflow:hidden}canvas{display:block}.btn{font:inherit;color:var(--ink);cursor:pointer;background:#1e2850d9;border:1px solid #78a0ff66;border-radius:12px;min-height:44px;padding:10px 22px;font-weight:700}.btn.primary{color:#031026;background:linear-gradient(#3fd8ff,#1a7fd6);border:none}.btn.big{padding:12px 40px;font-size:1.2rem}.thumb{pointer-events:none;background:#78a0ff0d;border:1.5px solid #a0c8ff38;border-radius:50%;width:40px;height:40px;margin:-20px 0 0 -20px;display:none;position:absolute;top:0;left:0}.thumb.charge{background:#6fe6ff1f;border-color:#6fe6ff99}.podbtn{pointer-events:none;letter-spacing:.05em;color:#ffd9a8;background:radial-gradient(circle,#ffb35a4d,#ff782814);border:2px solid #ffb35acc;border-radius:50%;justify-content:center;align-items:center;font-size:10px;font-weight:800;display:flex;position:absolute}.podbtn.out,.podbtn.return{color:#ffc6e8;background:radial-gradient(circle,#ff8cd24d,#ff50a014);border-color:#ff8cd2e6}.hud{top:max(6px, env(safe-area-inset-top));left:max(10px, env(safe-area-inset-left));right:max(10px, env(safe-area-inset-right));pointer-events:none;text-shadow:0 1px 3px #000;align-items:center;gap:14px;font-weight:700;display:flex;position:absolute}.hull{align-items:center;gap:6px;font-size:13px;display:flex}.hull .bar{background:#ffffff1f;border-radius:5px;width:120px;height:9px;overflow:hidden}.hull .fill{background:linear-gradient(90deg,#3fd8ff,#9ff3ff);height:100%}.hull .fill.low{background:linear-gradient(90deg,#f35,#ff8a5a)}.gun{letter-spacing:.04em;align-items:center;gap:6px;font-size:13px;display:flex}.gun .pips i.on{background:currentColor}.stage{text-align:center;color:var(--dim);flex:1;font-size:13px}.bossbar{top:calc(max(6px, env(safe-area-inset-top)) + 34px);pointer-events:none;text-align:center;letter-spacing:.1em;text-transform:uppercase;color:#ffb0a0;text-shadow:0 1px 3px #000;width:min(380px,50vw);font-size:11px;font-weight:800;position:absolute;left:50%;transform:translate(-50%)}.bossbar .bar{background:#ffffff1f;border-radius:3px;height:6px;margin-top:2px;overflow:hidden}.bossbar .fill{background:linear-gradient(90deg,#f35,#ffb070);height:100%}.beam{bottom:max(8px, env(safe-area-inset-bottom));pointer-events:none;letter-spacing:.12em;color:#9ff3ff;opacity:.85;align-items:center;gap:6px;font-size:10px;font-weight:800;display:flex;position:absolute;left:50%;transform:translate(-50%)}.beam .bar{background:#ffffff1f;border-radius:3px;width:140px;height:6px;overflow:hidden}.beam .fill{background:linear-gradient(90deg,#1a7fd6,#9ff3ff);height:100%}.beam.full .fill{background:#fff;box-shadow:0 0 8px #9ff3ff}.banner.warning b{color:#ff4a6a;animation:.4s steps(2,end) infinite blink}@keyframes blink{50%{opacity:.3}}.sub{color:var(--dim);margin:0}.score{font-variant-numeric:tabular-nums;font-size:14px}.pause{pointer-events:auto;width:40px;height:36px;color:var(--ink);background:#0a102899;border:1px solid #a0c8ff4d;border-radius:10px;font-size:13px}.banner{text-align:center;pointer-events:none;text-shadow:0 2px 8px #000;position:absolute;top:26%;left:0;right:0}.banner b{letter-spacing:.12em;text-transform:uppercase;font-size:34px;display:block}.banner span{color:var(--cyan);font-weight:700}.overlay{padding:max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));background:#03040cb8;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;inset:0}.overlay h2{letter-spacing:.08em;margin:0}.grav{color:var(--cyan);text-align:center;margin:0;font-size:13px}.cards{gap:12px;margin-top:6px;display:flex}.card{font:inherit;text-align:left;width:190px;min-height:150px;color:var(--ink);border:2px solid var(--gun);cursor:pointer;background:linear-gradient(#142850f2,#080e22f2);border-radius:14px;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;display:flex}.card.ship{border-color:var(--ship);background:linear-gradient(#462814f2,#1a0e08f2)}.card b{font-size:17px}.card .what{color:#cfd8f0;font-size:14px}.pips{gap:4px;display:flex}.pips i{background:#ffffff26;border-radius:3px;width:14px;height:5px}.pips i.on{color:var(--gun);background:currentColor}.card.ship .pips i.on{color:var(--ship)}.screen{text-align:center;padding:max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));background:radial-gradient(at 50% 60%,#1a1440 0%,#03040c 70%);flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;position:fixed;inset:0}.title h1{letter-spacing:.25em;background:linear-gradient(#fff,#6fe6ff 60%,#1a7fd6);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;padding-left:.25em;font-size:clamp(48px,14vh,96px);font-weight:900}.tag{color:#ffb35a;margin:0;font-weight:700}.how{color:#c6d0ea;max-width:560px;margin:6px 0 0;padding:0;font-size:13px;line-height:1.5;list-style:none}.how b{color:var(--cyan)}.foot{color:var(--dim);margin:0;font-size:12px}.dead h2{margin:0}.big-score{margin:0;font-size:44px;font-weight:900}.big-score em{color:#ffb35a;font-size:16px}.dead p{margin:0}.ups{color:var(--dim);font-size:13px}.row{gap:12px;margin-top:6px;display:flex}.update{right:max(10px, env(safe-area-inset-right));bottom:max(10px, env(safe-area-inset-bottom));z-index:10;background:#0a1028f2;border:1px solid #78a0ff66;border-radius:12px;align-items:center;gap:10px;padding:8px 10px;font-size:12px;display:flex;position:fixed}.rotate{display:none}@media (orientation:portrait) and (pointer:coarse){.rotate{z-index:20;text-align:center;background:#03040c;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:30px;display:flex;position:fixed;inset:0}.rotate b{font-size:22px}.rotate span{color:var(--dim)}}@media (height<=420px){.card{width:170px;min-height:130px;padding:10px}.how{font-size:12px}}
