:root{--navy:#03111F;--deep:#061B33;--cyan:#00E5FF;--sonar:#40C4FF;--cream:#EAF7FF;--warn:#FF1744;--gold:#FFD54F;--green:#76FF03;--orange:#FF7043;--glass:rgba(3,17,31,.72)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#0b2a49 0%,var(--navy) 62%,#010b14 100%);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--cream);touch-action:none}#gameWrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}canvas{position:absolute;inset:0;width:100vw;height:100vh;display:block}#ui{position:fixed;inset:0;pointer-events:none}.screen,.modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:calc(24px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));pointer-events:auto}.screen.active,.modal.active{display:flex}.panel{width:min(92vw,560px);max-height:90vh;overflow:auto;border:1px solid rgba(64,196,255,.45);border-radius:28px;background:linear-gradient(160deg,rgba(6,27,51,.88),rgba(3,17,31,.74));box-shadow:0 22px 70px rgba(0,10,24,.62),inset 0 0 28px rgba(0,229,255,.08);padding:24px}.title{font-size:clamp(34px,9vw,60px);letter-spacing:.08em;line-height:.92;margin:0 0 10px;text-shadow:0 0 22px rgba(0,229,255,.45)}.tag{color:#9feeff;margin:0 0 22px;font-weight:700}.btn{appearance:none;border:1px solid rgba(0,229,255,.55);background:linear-gradient(180deg,rgba(0,229,255,.18),rgba(6,27,51,.62));color:var(--cream);border-radius:18px;padding:15px 18px;margin:8px 0;min-height:54px;font-weight:900;letter-spacing:.04em;box-shadow:0 8px 18px rgba(0,0,0,.25);transition:transform .08s,filter .15s,background .2s;width:100%}.btn:active{transform:scale(.97);filter:brightness(1.28)}.btn.small{width:auto;min-width:86px;padding:10px 13px}.row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.levelCard{border:1px solid rgba(64,196,255,.32);background:rgba(6,27,51,.55);border-radius:18px;padding:12px}.levelCard.locked{opacity:.45}.muted{color:#9cb8c8;font-size:13px}.hud{position:absolute;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));height:min(130px,14vh);display:none;gap:8px;align-items:flex-start;pointer-events:none}.hud.active{display:flex}.hudPanel{pointer-events:auto;background:linear-gradient(180deg,rgba(3,17,31,.78),rgba(6,27,51,.58));border:1px solid rgba(64,196,255,.3);box-shadow:0 8px 24px rgba(0,10,24,.36);border-radius:16px;padding:8px;min-width:130px}.barLabel{font-size:11px;font-weight:900;color:#bcefff}.bar{height:13px;background:rgba(120,160,180,.18);border-radius:999px;overflow:hidden;margin:3px 0 7px}.fill{height:100%;width:100%;border-radius:999px;transition:width .22s,background .22s;box-shadow:0 0 12px currentColor}.energyFill{background:linear-gradient(90deg,#40C4FF,#00E5FF);color:#00E5FF}.hullFill{background:linear-gradient(90deg,#76FF03,#EAF7FF);color:#76FF03}.objective{flex:1;min-width:0;font-size:12px;line-height:1.2;max-height:88px;overflow:hidden}.pauseTop{width:70px;height:70px;min-width:70px;border-radius:20px;margin:0;font-size:22px;pointer-events:auto}.warning{position:absolute;left:50%;top:calc(138px + env(safe-area-inset-top));transform:translateX(-50%);padding:10px 18px;border-radius:999px;background:rgba(255,23,68,.18);border:1px solid rgba(255,23,68,.65);box-shadow:0 0 24px rgba(255,23,68,.2);font-weight:1000;letter-spacing:.08em;color:#ffd7df;opacity:0;transition:opacity .2s;pointer-events:none}.warning.on{opacity:1;animation:pulseWarn .8s infinite alternate}.warning.crit{font-size:18px;background:rgba(255,23,68,.34);border-color:#FF1744;color:#fff;text-shadow:0 0 12px rgba(255,23,68,.9);animation:pulseWarn .4s infinite alternate}@keyframes pulseWarn{from{filter:brightness(.9)}to{filter:brightness(1.5)}}.interactPrompt{position:absolute;left:50%;bottom:calc(31vh + 12px);transform:translateX(-50%);background:rgba(3,17,31,.78);border:1px solid rgba(0,229,255,.5);border-radius:999px;padding:9px 14px;font-size:12px;font-weight:900;display:none;pointer-events:none}.interactPrompt.on{display:block}.controls{position:absolute;left:0;right:0;bottom:0;height:30vh;min-height:210px;display:none;pointer-events:none}.controls.active{display:block}.stick{position:absolute;left:calc(32px + env(safe-area-inset-left));bottom:calc(42px + env(safe-area-inset-bottom));width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(64,196,255,.14),rgba(3,17,31,.45));border:1px solid rgba(64,196,255,.38);pointer-events:auto}.knob{position:absolute;left:37px;top:37px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle,#bff8ff,#00E5FF 55%,#087990);box-shadow:0 0 18px rgba(0,229,255,.55)}.actionBtns{position:absolute;right:calc(24px + env(safe-area-inset-right));bottom:calc(26px + env(safe-area-inset-bottom));display:grid;grid-template-columns:82px 82px;grid-template-areas:". shield" "sonar boost";gap:24px;pointer-events:auto}#sonarBtn{grid-area:sonar}#boostBtn{grid-area:boost}#shieldBtn{grid-area:shield}.act{width:82px;height:82px;border-radius:23px;border:1px solid rgba(0,229,255,.55);background:linear-gradient(180deg,rgba(0,229,255,.20),rgba(3,17,31,.70));color:var(--cream);font-size:12px;font-weight:1000;box-shadow:0 12px 24px rgba(0,0,0,.3);transition:transform .08s}.act:active{transform:scale(.94);background:linear-gradient(180deg,rgba(0,229,255,.38),rgba(6,27,51,.72))}.cool{filter:saturate(.35);opacity:.65}.cdNum{display:block;font-size:11px;font-weight:800;color:#ffd7df;min-height:13px;margin-top:3px;line-height:1}.modal{background:rgba(3,17,31,.42);backdrop-filter:blur(3px)}.stat{font-size:13px;background:rgba(0,229,255,.07);padding:8px;border-radius:12px;margin:6px 0}.countdown{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:25vw;font-weight:1000;text-shadow:0 0 42px rgba(0,229,255,.75);pointer-events:none}.countdown.on{display:flex}.objToast{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);max-width:84vw;text-align:center;padding:15px 22px;border-radius:18px;background:rgba(6,40,30,.85);border:1px solid rgba(118,255,3,.7);box-shadow:0 0 32px rgba(118,255,3,.4);color:#eaffea;font-weight:1000;font-size:clamp(15px,4.4vw,23px);letter-spacing:.04em;line-height:1.25;opacity:0;transition:opacity .3s;pointer-events:none}.objToast.show{opacity:1;animation:pulseWarn .9s 3 alternate}.touchOnly{display:none}@media(pointer:coarse){.touchOnly{display:block}}@media(max-width:520px){.panel{padding:19px;border-radius:24px}.hudPanel{padding:7px;min-width:112px}.objective{font-size:11px}.grid{grid-template-columns:1fr 1fr}.stick{left:22px}.actionBtns{right:18px;gap:18px}.act{width:82px;height:82px}}