:root{--night:#0d0221;--panel:#201038;--cyan:#2de2e6;--pink:#ff3864;--magenta:#f6019d;--gold:#ffd319;--text:#f3edff;--muted:#c7b8e2;font-family:'Nunito',system-ui,sans-serif;color:var(--text);background:var(--night);color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select,summary{font:inherit;font-weight:800;min-height:44px;border-radius:12px;cursor:pointer}button{color:var(--text);border:1px solid #79578f;background:#322046;padding:8px 14px;transition:transform .12s,border-color .12s}button:hover{border-color:var(--cyan);transform:translateY(-1px)}button:active{transform:scale(.96)}button:focus-visible,summary:focus-visible,select:focus-visible,#joystick:focus-visible{outline:3px solid var(--gold);outline-offset:2px}button:disabled{opacity:.5;cursor:default}.primary{background:var(--cyan);color:var(--night);border-color:var(--cyan)}[hidden]{display:none!important}#app{max-width:1440px;height:100dvh;margin:auto;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:7px}header{display:flex;align-items:center;justify-content:space-between;gap:8px}.brand{display:grid}.brand small{font-size:10px;letter-spacing:2px;color:var(--cyan)}.brand strong{font-size:16px}nav{display:flex;gap:5px}nav button{font-size:12px;padding:6px 10px}#hud{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}#waveHud{color:var(--gold)}.heat{display:flex;gap:6px;align-items:center}.heat span{font-size:11px}meter{width:70px;height:12px;accent-color:var(--pink)}#court{position:relative;flex:1;min-height:0;display:flex;justify-content:center;align-items:center}canvas{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;border-radius:20px;touch-action:none;background:var(--night);outline:0}#tip,#flash{pointer-events:none;position:absolute;text-align:center;max-width:80%;left:50%;transform:translateX(-50%);background:#0d0221dd;border-radius:12px;padding:6px 12px;font-size:12px}#tip{bottom:10px;color:var(--muted)}#flash{top:10px;color:var(--gold)}#flash:empty{display:none}#touch{display:flex;justify-content:space-between;gap:12px;padding:0 max(2px,env(safe-area-inset-right))}#touch button{height:56px;min-width:56px;touch-action:none;user-select:none}.rotation,.actions{display:flex;gap:7px;align-items:center}#left,#right{font-size:30px;width:60px;color:var(--cyan)}#thrust{border-color:var(--cyan);color:var(--cyan)}#fire{background:var(--pink);border-color:var(--pink);color:var(--night)}#joystick{width:96px;height:56px;border:1px solid var(--cyan);background:#2de2e617;border-radius:28px;position:relative;touch-action:none;cursor:grab}#joystick i{position:absolute;width:32px;height:32px;border-radius:50%;background:var(--cyan);top:11px;left:31px;pointer-events:none}#notice{font-size:12px;color:var(--gold);margin:0;text-align:center}#notice:empty{display:none}dialog{width:min(540px,calc(100vw - 20px));max-height:calc(100dvh - 24px);padding:22px;border:1px solid #79578f;border-radius:24px;color:var(--text);background:var(--panel);overflow:auto;overscroll-behavior:contain}dialog::backdrop{background:#080115bd;backdrop-filter:blur(4px)}dialog p{line-height:1.5;font-size:14px;color:var(--muted)}dialog h2{margin:6px 0 16px;font-size:27px}dialog>button{display:block;width:100%;margin:8px 0}dialog small{letter-spacing:2px;color:var(--cyan);font-size:11px}.hero{position:relative;margin:-22px -22px 12px;height:210px;overflow:hidden}.hero img{width:100%;height:100%;object-fit:cover}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#130622a8,transparent)}.hero>div{position:absolute;z-index:1;top:25px;left:22px}.hero h1{font-size:34px;line-height:1.04;margin:10px 0}.hero small{text-shadow:0 2px 4px #000}#hulls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}#hulls button{display:grid;justify-items:center;font-size:12px;padding:7px 4px}#hulls img{width:72px;height:72px;object-fit:contain}#hulls [aria-pressed=true]{border-color:var(--cyan);background:#2de2e624}#hullStats{min-height:42px;font-size:12px}#progress,#mission,#streak{font-size:12px;margin:6px 0}summary{padding:10px 0;color:var(--cyan)}details{border-top:1px solid #624476;margin-top:10px}.settings{display:grid;gap:12px;padding:10px 0}.settings label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}.settings input{width:22px;height:22px;accent-color:var(--cyan)}select{max-width:60%;padding:6px;background:#322046;border:1px solid #79578f;color:var(--text)}.medal{width:80px;display:block;margin:auto}#result{text-align:center}#upgrades{display:grid;gap:8px}#upgrades button{display:flex;text-align:left;align-items:center;gap:12px;padding:12px}#upgrades img{width:52px;height:52px;object-fit:contain}#upgrades strong{display:block;color:var(--cyan)}#upgrades small{display:block;letter-spacing:0;color:var(--muted);line-height:1.4;font-size:12px}
@media(min-width:900px) and (pointer:fine){#touch{display:none}.brand strong{font-size:22px}header{padding:0 18px}#hud{gap:24px}#court{margin:0 auto;width:min(100%,calc((100dvh - 106px)*1.5))}}
@media(max-width:520px){.brand small{letter-spacing:1px;font-size:8px}.brand strong{font-size:12px}nav button{font-size:11px;padding:5px 7px}#hud{gap:6px 12px;font-size:11px}.heat{gap:4px}dialog{padding:16px}.hero{margin:-16px -16px 10px;height:170px}.hero h1{font-size:28px}.hero>div{left:16px;top:20px}#touch{gap:6px}#thrust,#fire{font-size:12px;padding:7px 10px;max-width:98px}#left,#right{width:52px;min-width:52px}#tip{font-size:10px;padding:5px 8px;bottom:2px}dialog p{font-size:13px}#hulls img{width:55px;height:55px}}
@media(orientation:landscape) and (max-height:520px){#app{gap:4px}header{height:44px}.brand strong{font-size:13px}.brand small{display:none}#hud{position:absolute;z-index:1;top:58px;left:50%;transform:translateX(-50%);width:90%;font-size:11px;gap:12px}#court{margin-top:26px}#touch{position:absolute;bottom:10px;left:14px;right:14px;pointer-events:none}#touch>*{pointer-events:auto}#touch button{height:50px}#tip{bottom:5px;max-width:48%}dialog{max-height:calc(100dvh - 16px)}.hero{height:150px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}