*{box-sizing:border-box}html,body{margin:0;background:#080a20;color:#eef5ff;font-family:system-ui,-apple-system,sans-serif}button{font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation;color:inherit}button:focus-visible{outline:3px solid #ffe991;outline-offset:4px}header{height:62px;display:flex;align-items:center;justify-content:space-between;padding:8px 20px;background:#100d2d;border-bottom:1px solid #5e4c85;gap:12px}header>span{font-size:12px;letter-spacing:3px;color:#bbaedd}header button{border:1px solid #786ba0;border-radius:30px;padding:9px 17px;background:#221c45}header>div{display:flex;gap:10px}button:disabled{opacity:.5;cursor:default}#game{position:relative;width:min(100%,1600px);aspect-ratio:16/9;max-height:calc(100svh - 100px);margin:auto;overflow:hidden;background:#090d28;isolation:isolate;touch-action:none}canvas{display:block;width:100%;height:100%;object-fit:contain}#hud{position:absolute;inset:18px 24px auto;pointer-events:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;text-shadow:0 2px 10px #000}#hud[hidden],#controls[hidden]{display:none}.brand{font-size:clamp(18px,2.5vw,38px);font-weight:1000;font-style:italic;line-height:1;color:#e9b7ff;filter:drop-shadow(0 3px #442780)}.brand small{display:block;color:#65e5ff;font-size:.48em;margin-top:6px;letter-spacing:2px}.level,.score{background:#10152dd9;border:1px solid #b0a4ec;border-radius:18px;padding:10px 18px;font-size:clamp(11px,1.2vw,18px)}#segments{display:flex;gap:4px;margin-top:7px}#segments i{width:19px;height:8px;background:#333c65;border-radius:3px}#segments i.on{background:#da7bff;box-shadow:0 0 9px #e887ff}.score b{margin-left:12px;color:#ffe07e}#shields{display:block;color:#6be6ff;font-size:23px;letter-spacing:6px;margin-top:4px}#power{position:absolute;top:80px;left:50%;transform:translateX(-50%);min-width:210px;background:#171133d9;border:1px solid #b680ed;border-radius:20px;padding:8px 15px;font-size:12px;display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between}#power i{width:100%;height:5px;border-radius:6px;background:#32304d;overflow:hidden}#power em{display:block;height:100%;width:100%;background:#6be6ff}#overlay{position:absolute;inset:0;display:flex;align-items:center;padding:5%;background:linear-gradient(90deg,#090c25e8,#0a0c2540);z-index:6}#overlay[hidden]{display:none}.intro{position:relative;z-index:2;width:52%}.eyebrow{font-size:11px;letter-spacing:3px;color:#c6bbef}h1{font-size:clamp(32px,6vw,90px);font-weight:1000;font-style:italic;line-height:.95;margin:20px 0;color:#e8b7ff;text-shadow:0 5px #482a72}h1 em{font-size:.65em;color:#7ee9ff;font-style:normal}p{line-height:1.6;color:#d4dcf2}.intro>p{font-size:clamp(13px,1.5vw,22px)}#start{background:linear-gradient(#fff3a4,#ffc654);color:#17162e;border:2px solid #fff5c1;border-radius:40px;padding:16px 42px;box-shadow:0 0 35px #ffa84044;font-size:20px;min-width:220px}.instructions{font-size:12px!important;color:#a7b4d7}.pills{display:flex;gap:10px;flex-wrap:wrap}.pills span{border:1px solid #615883;border-radius:16px;padding:7px 12px;font-size:10px;letter-spacing:1px}.hero-ship{position:absolute;right:-2%;width:57%;top:22%;filter:drop-shadow(0 0 28px #6f7dce66);animation:hoverShip 5s ease-in-out infinite}@keyframes hoverShip{50%{transform:translateY(-15px)}}#notice{position:absolute;top:42%;left:20%;right:20%;text-align:center;color:#fff0a8;font-size:clamp(18px,3vw,44px);font-weight:900;pointer-events:none;opacity:0;transition:opacity .3s;text-shadow:0 3px 12px #100326;z-index:4}#notice.show{opacity:1}#controls{position:absolute;inset:auto 22px 20px;display:flex;align-items:end;justify-content:space-between;pointer-events:none}.pad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,45px);gap:5px;pointer-events:auto}.pad button{background:#292552b8;border:1px solid #b1a9ec;border-radius:14px;font-size:22px;touch-action:none}.pad button[data-dir=up]{grid-column:2}.pad button[data-dir=left]{grid-row:2;grid-column:1}.pad button[data-dir=down]{grid-row:2;grid-column:2}.pad button[data-dir=right]{grid-row:2;grid-column:3}.pad button.active,#fire.active{filter:brightness(1.7);transform:scale(.95)}#fire{pointer-events:auto;width:95px;height:95px;border:3px solid #ffe5a0;border-radius:50%;background:radial-gradient(#b77d29d9,#593a19cc);box-shadow:0 0 25px #ffae3466,inset 0 0 13px #ffd96c;font-size:23px;touch-action:none}#fire small{display:block;font-size:8px;margin-top:5px}footer{text-align:center;color:#9babc9;font-size:11px;padding:10px}footer span{margin-left:20px}body:has(#hud:not([hidden])) #game{cursor:crosshair}.result{margin:auto;text-align:center;width:80%;max-width:650px;background:#0d1226e8;border:1px solid #9383c8;border-radius:25px;padding:30px}.result h1{font-size:clamp(28px,5vw,65px)}.result button{margin:8px;padding:13px 25px;border:1px solid #fff1b5;border-radius:30px;background:#ffd66b;color:#17172f}.result .secondary{background:#292043;color:#eee2ff;border-color:#8e7faa}@media(max-width:700px){header{height:48px;padding:5px 10px}header>span{display:none}header button{padding:7px 10px;font-size:11px}#game{max-height:none;aspect-ratio:16/10}#hud{inset:8px 10px;gap:6px}.level,.score{padding:5px 8px;border-radius:10px}.brand{font-size:16px}#segments{gap:2px}#segments i{width:9px;height:4px}#shields{font-size:13px;margin-top:2px}#power{top:49px;min-width:140px;font-size:9px;padding:5px 10px;gap:4px}.intro{width:60%}h1{font-size:32px;margin:10px 0}.intro>p{font-size:11px;margin:8px 0}#start{font-size:14px;padding:9px 22px;min-width:140px}.eyebrow{font-size:7px;letter-spacing:1px}.instructions{font-size:8px!important}.pills{display:none}.hero-ship{width:52%;top:28%}#controls{inset:auto 10px 8px}.pad{grid-template-columns:repeat(3,35px);grid-template-rows:repeat(2,33px);gap:3px}.pad button{font-size:15px;border-radius:9px}#fire{width:65px;height:65px;font-size:17px}#fire small{font-size:6px}footer{font-size:10px}.result{padding:16px}.result p{font-size:12px}}@media(prefers-reduced-motion:reduce){.hero-ship{animation:none}}