*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#090d16;color:#edf5ef;font-family:Arial,Helvetica,sans-serif;overscroll-behavior:none}button{font:inherit;cursor:pointer;touch-action:manipulation}#game{height:100dvh;max-width:480px;margin:auto;display:flex;flex-direction:column;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));background:#0c111b}header{height:54px;flex-shrink:0;display:flex;align-items:center;gap:16px;padding:0 23px}.brand{font-size:19px;font-weight:900;letter-spacing:3px}.brand span{display:inline-block;color:#81918d;font-size:10px;letter-spacing:1px;margin-left:7px}.record{margin-left:auto;color:#84968e;font-size:11px;letter-spacing:1px;white-space:nowrap}.record b{display:block;color:#e0e8e4;font-size:15px;letter-spacing:0;margin-top:4px}#sound{border:1px solid #334039;border-radius:50%;width:36px;height:36px;background:transparent;color:#caff78;font-size:22px}#arena{position:relative;flex:1;min-height:150px;margin:7px 14px 0;overflow:hidden;border-left:1px solid #75343f;border-right:1px solid #75343f;background:#060913}canvas{width:100%;height:100%;display:block}.score{position:absolute;top:17px;left:0;right:0;text-align:center;pointer-events:none}.score strong{font-size:43px;line-height:1;font-weight:500;letter-spacing:-2px}.score span{display:block;font-size:10px;letter-spacing:3px;margin-top:6px;color:#9baaa8}#hint{position:absolute;top:41%;width:100%;text-align:center;font-size:13px;font-weight:bold;letter-spacing:2px;color:#cbff73;pointer-events:none;text-shadow:0 2px 12px #000;transition:opacity .25s}footer{height:192px;flex-shrink:0;display:flex;align-items:center;flex-direction:column;padding-top:16px}.control-label{font-size:10px;letter-spacing:2px;color:#b0beb8}.control-label span{color:#cbff73;padding:0 7px}:is(#joystick,#tutorial-joystick){margin:10px 0 8px;width:124px;height:124px;border-radius:50%;position:relative;border:1px solid #35433f;background:radial-gradient(circle,#182821 0%,#101c1b 65%,#0d161c 66%);touch-action:none;user-select:none}:is(#knob,#tutorial-knob){width:52px;height:52px;position:absolute;left:35px;top:35px;border-radius:50%;border:1px solid #caff78;background:#24392c;box-shadow:inset 0 0 18px #caff7810,0 0 18px #b5ff6110;pointer-events:none}:is(#knob,#tutorial-knob):after{content:'';position:absolute;inset:21px;border-radius:50%;background:#cbff73}.cross{position:absolute;background:#617264;opacity:.3}.horizontal{height:1px;left:15px;right:15px;top:61px}.vertical{width:1px;top:15px;bottom:15px;left:61px}.footnote{font-size:11px;color:#91a39a}#overlay,#paused{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#090e17b8;backdrop-filter:blur(5px)}[hidden]{display:none!important}.overcard{width:85%;max-width:320px;text-align:center}.overcard p{font-size:11px;letter-spacing:2px;color:#ff8b94}.overcard h1{font-size:38px;font-weight:500;letter-spacing:-2px;margin:16px 0 28px}.results{display:flex;justify-content:center;gap:45px;color:#9aaea3;font-size:11px;letter-spacing:2px}.results strong{display:block;font-size:28px;color:#f3f8ef;margin:9px 0 28px;letter-spacing:-1px}#retry,#resume{background:#cbff73;color:#152012;border:0;border-radius:4px;font-weight:800;font-size:15px;letter-spacing:2px;padding:18px 24px;width:100%}#retry span{float:right}#resume{width:75%}#debug{position:absolute;left:12px;top:100px;background:#000b;padding:10px;font:12px monospace;color:#caff78;pointer-events:none}@media(max-height:660px){footer{height:159px;padding-top:10px}:is(#joystick,#tutorial-joystick){width:108px;height:108px;margin:6px}:is(#knob,#tutorial-knob){left:27px;top:27px}.horizontal{top:53px}.vertical{left:53px}.footnote{font-size:10px}header{height:44px}.score strong{font-size:34px}}@media(min-width:600px){#game{border-left:1px solid #26322e;border-right:1px solid #26322e}}
/* V0.4 · neon arcade cabinet */
html,body{background:#070314;color:#eff7ff;font-family:'Courier New',monospace;font-weight:700}
#game{background:linear-gradient(180deg,#140c2b,#0b0720 70%);border-left:1px solid #312056;border-right:1px solid #312056}
header{padding:0 18px;gap:12px;border-bottom:2px solid #3c2262}
.brand{color:#76ffef;font-size:21px;font-weight:900;letter-spacing:2px;text-shadow:2px 2px 0 #b329ba,0 0 12px #29f9db66}
.brand span{color:#ab83d5;font-size:10px;text-shadow:none;letter-spacing:0;margin-left:5px}
.record{color:#e58aff;font-size:11px}.record b{color:#ffed92;font-size:15px}
#sound{color:#7affef;border:2px solid #6b41a7;border-radius:0;background:#20113d;box-shadow:2px 2px 0 #080214;font-size:22px;flex-shrink:0}
#arena{border-left:2px solid #ff378d;border-right:2px solid #ff378d;box-shadow:0 0 12px #ff218c22;background:#09051c}
canvas{image-rendering:pixelated}
#arena:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#00000012 0px,#00000012 1px,transparent 1px,transparent 4px);z-index:1}
.score{z-index:2;top:14px}.score strong{font-size:44px;font-weight:900;letter-spacing:2px;color:#f9f6ff;text-shadow:3px 3px 0 #7430ad,0 0 14px #a550f466}
.score span{color:#64e9f3;font-size:11px;letter-spacing:3px;text-shadow:1px 1px #09051c}
#hint{z-index:2;color:#ffed79;font-size:12px;letter-spacing:1px;text-shadow:2px 2px 0 #5e237e,0 0 8px #000}
footer{border-top:2px solid #392057;background:linear-gradient(#170c30,#100821)}
.control-label{color:#be99e8;font-size:11px;letter-spacing:1px}.control-label span{color:#ff48c4}
:is(#joystick,#tutorial-joystick){border:2px solid #ad43ea;background:radial-gradient(circle,#32154c 0%,#190e33 65%,#382051 66%,#100820 70%);box-shadow:0 0 14px #b42ef229,inset 0 0 14px #9f26de22}
:is(#knob,#tutorial-knob){border-radius:8px;border:3px solid #6ffff0;background:#245464;box-shadow:3px 3px 0 #071e37,inset -4px -4px 0 #16344e,0 0 12px #51ffd355}
:is(#knob,#tutorial-knob):after{border-radius:0;inset:19px;background:#edffb2;box-shadow:0 0 8px #8effd5}
.cross{background:#c570ff;opacity:.4}.footnote{color:#aa8ec7;font-size:11px}
#overlay,#paused{z-index:3;background:#100624e8;backdrop-filter:none}
.overcard{padding:20px 12px;border:2px solid #a454e0;box-shadow:4px 4px 0 #4f236f,-4px -4px 0 #25133d;background:#160c2c}
.overcard p{color:#ff68a5;font-size:11px;letter-spacing:1px}.overcard h1{color:#8affed;font-size:29px;font-weight:900;letter-spacing:0;text-transform:uppercase;text-shadow:3px 3px 0 #a92bb3;margin:18px 0 24px}
.results{color:#c7a2e5;gap:30px;font-size:11px}.results strong{color:#ffe38a;font-size:26px;letter-spacing:0;margin:9px 0 22px}
#retry,#resume{border-radius:0;background:#67ffdf;color:#10112c;border:2px solid #dbfff7;box-shadow:4px 4px 0 #22647a;font-size:16px;font-weight:900;padding:15px 18px;letter-spacing:2px}
#retry:active,#resume:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #22647a}
#debug{z-index:2;color:#7affef;background:#120726e8}
@media(max-height:660px){.score strong{font-size:34px}.overcard{padding:12px}.overcard h1{font-size:26px;margin:12px 0 18px}.results strong{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){#hint{transition:none}}
/* Three campaign palettes; round thumb cap in every stage. */
#game{--edge:#ff39c6;--accent:#43f6ed;--panel:#160c2c;--muted:#c199db;--gold:#ffdf87}
#game[data-level="2"]{--edge:#42c7ff;--accent:#8ef6ff;--panel:#071c38;--muted:#90c9ec;--gold:#e8fcff;background:#041329}
#game[data-level="3"]{--edge:#83ff28;--accent:#10ebd5;--panel:#061f1c;--muted:#a6d891;--gold:#efff8f;background:#041210}
#arena{border-color:var(--edge);box-shadow:0 0 15px color-mix(in srgb,var(--edge) 25%,transparent)}
header,footer{border-color:var(--edge)}footer{background:var(--panel)}
.brand{color:var(--accent);text-shadow:2px 2px 0 var(--edge)}.record,.control-label,.footnote{color:var(--muted)}.record b{color:var(--gold)}
#sound{border-color:var(--edge);color:var(--accent);background:var(--panel)}
:is(#joystick,#tutorial-joystick){border-color:var(--edge);background:radial-gradient(circle,var(--panel) 0%,#06151e 65%,var(--edge) 66%,#08101b 68%);box-shadow:0 0 14px color-mix(in srgb,var(--edge) 35%,transparent)}
:is(#knob,#tutorial-knob){border-radius:50%;border-color:var(--accent);background:var(--panel);box-shadow:inset -3px -3px 0 #0005,0 0 12px color-mix(in srgb,var(--accent) 40%,transparent)}:is(#knob,#tutorial-knob):after{border-radius:50%;background:var(--gold)}
.cross{background:var(--accent)}.score strong{color:var(--gold);text-shadow:2px 2px 0 var(--panel),0 0 12px var(--edge)}.score span{color:var(--accent)}
#level{position:absolute;top:10px;left:0;right:0;text-align:center;z-index:2;font-size:11px;letter-spacing:1px;color:var(--accent);pointer-events:none}
.score{top:34px}#level-notice{position:absolute;top:30%;left:0;right:0;text-align:center;z-index:2;color:var(--gold);font-size:16px;letter-spacing:1px;padding:14px 4px;background:#060812c9;border-block:2px solid var(--edge);pointer-events:none}
.overcard{border-color:var(--edge);background:var(--panel)}.overcard h1{color:var(--accent);text-shadow:2px 2px 0 var(--edge)}#retry,#resume{background:var(--accent)}
#game[data-level="3"] #arena{box-shadow:0 0 22px #83ff2838}#game[data-level="3"] .score strong{text-shadow:2px 2px 0 #9a1aac,0 0 12px #83ff2870}
#game[data-level="4"]{--edge:#ff9024;--accent:#ffdf52;--panel:#2b0c0b;--muted:#efb078;--gold:#fff3aa;background:#1b0808}
#game[data-level="5"]{--edge:#ae79ff;--accent:#65ffd5;--panel:#101333;--muted:#bb9cea;--gold:#edcaff;background:#090b25}
#next-level{display:block;font-size:10px;letter-spacing:.5px;color:var(--muted);margin-top:9px;text-shadow:1px 1px #000}
#test-open{position:absolute;right:10px;bottom:14px;z-index:4;font-size:10px;font-weight:bold;padding:9px;color:var(--accent);background:var(--panel);border:1px solid var(--edge)}
#test-panel{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#09091bf5;padding:12px;color:var(--accent)}
#test-panel h2{font-size:20px;margin:0 0 8px}#test-panel p{font-size:11px;text-align:center;margin:0 0 12px;color:var(--muted)}
.test-levels{display:grid;gap:7px;width:90%;max-width:300px}.test-levels button,#test-close{font:inherit;font-size:12px;padding:11px;border:1px solid var(--edge);background:var(--panel);color:var(--accent)}#test-close{margin-top:12px;width:90%;max-width:300px;color:var(--gold)}
@media(max-height:660px){.test-levels{gap:4px}.test-levels button,#test-close{padding:7px}#test-panel h2{font-size:16px}#test-panel p{margin-bottom:7px}#next-level{font-size:9px;margin-top:6px}}
/* Stage details belong to the header, outside the canvas. */
header{height:auto;min-height:88px;flex-wrap:wrap;padding:8px 18px;row-gap:8px;align-content:center}
.stage-hud{flex:0 0 100%;display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:7px;border-top:1px solid #ffffff20}
.stage-hud #level{position:static;text-align:left;font-size:10px;letter-spacing:.4px;white-space:nowrap}
.stage-hud #next-level{margin:0;font-size:9px;letter-spacing:0;text-align:right}
.score{top:18px}#level-notice{white-space:pre-line;background:none;border:0;text-shadow:2px 2px 0 #000,0 0 8px var(--edge);font-size:18px;line-height:1.7;padding:8px}
#game[data-level="6"]{--edge:#ff243e;--accent:#ff7959;--panel:#31070f;--muted:#ff9293;--gold:#ffe3a0;background:#210308}
#game[data-level="6"] #arena{box-shadow:0 0 25px #ff173e66;border-color:#ff243e}
#test-panel{overflow-y:auto}.test-levels{gap:5px}.test-levels button{padding:9px}
@media(max-height:660px){header{min-height:78px;padding:6px 14px;row-gap:5px}.stage-hud{padding-top:5px}.test-levels{gap:3px}.test-levels button{padding:6px}#test-panel h2{margin-bottom:4px}#test-panel p{font-size:10px;margin-bottom:5px}#test-close{margin-top:5px;padding:6px}}
@font-face{font-family:'Panic Pixel';src:url('fonts/panic-pixel.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
html,body,button{font-family:'Panic Pixel','Courier New',monospace;font-weight:800}
.brand{font-size:22px;letter-spacing:1px;line-height:1.2;color:var(--accent);text-shadow:2px 0 #080315,-2px 0 #080315,0 -2px #080315,0 2px #080315,3px 4px 0 var(--edge)}
.brand span{font-family:'Courier New',monospace;font-size:10px;margin-left:6px}
.record{font-size:9px}.record b{font-size:13px}.stage-hud{justify-content:center}.stage-hud #level{text-align:center;font-size:10px;letter-spacing:0}
.score{top:16px}.score #next-level{display:block;text-align:center;font-size:10px;line-height:1.5;letter-spacing:.2px;margin:0 0 12px;color:var(--accent);text-shadow:1px 1px 0 #03020c}
.score strong{display:block;font-family:'Panic Pixel',monospace;font-weight:800;font-size:48px;line-height:1.1;letter-spacing:1px;color:var(--gold);text-shadow:2px 0 #160829,-2px 0 #160829,0 -2px #160829,0 2px #160829,3px 4px 0 var(--edge)}
.score span{font-size:10px;margin-top:10px;letter-spacing:2px}
.overcard h1{font-size:24px;line-height:1.4;letter-spacing:0}.results{font-size:10px;gap:26px}.results strong{font-size:24px;line-height:1.4}
#retry,#resume{font-size:14px}#level-notice{font-size:17px;line-height:1.7;font-weight:800}#hint{font-size:12px;letter-spacing:0}
.control-label{font-size:9px;letter-spacing:0}.footnote{font-size:9px;line-height:1.5}#test-open{font-size:9px}.test-levels button,#test-close{font-size:10px}.test-levels button{line-height:1.5}#test-panel p{font-size:9px;line-height:1.6}
@media(max-height:660px){.score strong{font-size:38px}.score #next-level{font-size:9px;margin-bottom:9px}.score span{margin-top:7px}.overcard h1{font-size:22px}.test-levels button{padding:6px}}
/* Compact distance readout, leaving more space for the flight path. */
.score strong{font-size:34px;line-height:1.1}.score span{font-size:9px;margin-top:7px}
@media(max-height:660px){.score strong{font-size:28px}}
#game[data-level="7"]{--edge:#ed35ff;--accent:#77a2ff;--panel:#230d38;--muted:#dca1f4;--gold:#e9caff;background:#130321}
#game[data-level="8"]{--edge:#ff2158;--accent:#ffa56b;--panel:#330716;--muted:#ff9fb0;--gold:#ffe4ad;background:#200309}
#game[data-level="9"]{--edge:#8d59ff;--accent:#29ffeb;--panel:#160d37;--muted:#b3a5ff;--gold:#c6fffa;background:#06041b}
#game[data-level="10"]{--edge:#ff6b20;--accent:#fff079;--panel:#361009;--muted:#ffb386;--gold:#fff7c5;background:#230707}
#game[data-level="7"] #arena,#game[data-level="8"] #arena,#game[data-level="9"] #arena,#game[data-level="10"] #arena{box-shadow:0 0 22px color-mix(in srgb,var(--edge) 40%,transparent)}
#test-panel{justify-content:flex-start;padding-top:16px}.test-levels{grid-template-columns:1fr 1fr;width:100%;max-width:380px}.test-levels button{font-size:9px;min-height:40px;padding:8px 4px}
@media(max-height:660px){#test-panel{padding-top:10px}.test-levels button{min-height:32px;font-size:8px;padding:6px 3px}}

#game[data-level="11"]{--edge:#9b8dbb;--accent:#c8d4e9;--panel:#100e18;--muted:#a9a0bc;--gold:#eee5ff;background:#030307}
/* V0.12 · start cabinet and progression */
#game{position:relative}#menu{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;padding:max(24px,env(safe-area-inset-top)) 22px max(18px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at top,#301342,#080516 65%);color:#eaeaff;overflow:auto}
.menu-brand{text-align:center;color:#55ffe7;font-size:32px;letter-spacing:2px;text-shadow:3px 3px #e82dbc;padding:16px 0 28px}.menu-brand small{display:block;font:10px/1.5 'Panic Pixel',monospace;letter-spacing:1px;color:#bea3d4;text-shadow:none;margin-top:12px}
.menu-page{display:flex;flex-direction:column;gap:12px;min-height:0;flex:1}.menu-page h1{font-size:17px;line-height:1.6;color:#68ffe1;margin:0 0 4px}.menu-choice,.secondary{border:1px solid #a751c3;background:#170e2c;color:#e8daff;padding:17px 14px;font-size:13px;line-height:1.5;text-align:left}.menu-choice small{display:block;font:14px/1.5 Arial,sans-serif;margin-top:8px;color:#bcb1d5}.menu-choice.primary{background:#53efcf;color:#061722;border:2px solid #bbfff0;box-shadow:4px 4px #176c78}.primary small{color:#133d49}.menu-best{font-size:10px;color:#b8a2cc;text-align:center;margin-bottom:8px}.menu-best b{display:block;color:#ffe38a;font-size:23px;margin-top:10px}.menu-copy{font:14px/1.6 Arial,sans-serif;color:#bcb1d5;margin:0}.legal-links{display:flex;justify-content:center;gap:20px;margin-top:auto;padding-top:12px}.legal-links a,.settings-scroll a{font:14px/1.6 Arial,sans-serif;color:#71f0e7}.secondary{text-align:center;padding:12px;min-height:44px}.secondary:disabled{opacity:.5}.menu-page button:focus-visible,.menu-page a:focus-visible{outline:2px solid #fff;outline-offset:3px}
#level-list{overflow-y:auto;display:flex;flex-direction:column;gap:10px;flex:1;min-height:90px;padding:2px 5px 6px 1px}.level-row{display:flex;align-items:center;gap:15px;text-align:left;border:1px solid var(--tile-edge);background:#110c20;color:#eee8ff;padding:12px;width:100%;min-height:86px;flex-shrink:0}.level-tile{width:50px;height:50px;display:grid;place-items:center;flex-shrink:0;font-size:21px;color:var(--tile-accent);border:2px solid var(--tile-edge);background:var(--tile-bg);box-shadow:3px 3px color-mix(in srgb,var(--tile-edge) 35%,#080510)}.level-row b{font-size:12px;line-height:1.6}.level-row small{display:block;font:12px/1.6 Arial,sans-serif;color:#b6aec9;margin-top:5px}.level-row.locked{filter:grayscale(1);opacity:.55;cursor:default}
#board-list{overflow:auto;list-style:none;flex:1;min-height:60px;margin:0;padding:0}#board-list li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #442b59;padding:16px 0;font:14px/1.5 monospace}#board-list b{color:#ffe38a;white-space:nowrap}.settings-scroll{overflow:auto;display:flex;flex-direction:column;gap:18px;flex:1;min-height:100px;padding-right:6px}.settings-scroll label{display:flex;align-items:center;justify-content:space-between;gap:12px;font:16px/1.5 Arial,sans-serif}.settings-scroll input[type=range]{width:45%;accent-color:#63ffe2}.settings-scroll input[type=checkbox]{width:24px;height:24px;accent-color:#63ffe2}.danger{border-color:#e57089;color:#ffacbc}.stage-hud{position:relative;min-height:26px}.stage-hud #level{margin-left:48px}.stage-hud #game-home{position:absolute;left:0;background:none;color:var(--accent);border:1px solid var(--edge);font-size:8px;padding:7px 5px}#over-home{margin-top:12px;width:100%;font-size:11px}#save-status{font:12px/1.5 Arial,sans-serif;letter-spacing:0;color:var(--muted);margin-bottom:0}#menu-status:empty{display:none}#menu-status{margin-top:12px;color:#ffdc93}#hint{transition:none}
@media(max-height:680px){#menu{padding:14px 18px}.menu-brand{font-size:27px;padding:8px 0 16px}.menu-brand small{margin-top:8px}.menu-page{gap:8px}.menu-choice{padding:12px}.menu-best{margin-bottom:2px}.menu-best b{font-size:20px;margin-top:6px}.menu-copy{font-size:13px}.legal-links{padding-top:6px}}

/* PANIC ALTITUDE: a single local pixel family on every game surface. */
html,body,button,input,select,textarea,.brand span,.menu-brand small,.menu-choice small,.menu-copy,.legal-links a,.settings-scroll a,.level-row small,#board-list li,.settings-scroll label,#save-status,#debug{font-family:'Panic Pixel',monospace;font-weight:800}
.brand{font-size:18px;line-height:1.12;letter-spacing:1px;flex-shrink:0}.brand b{display:block}.brand b:first-child{color:var(--accent)}.brand b:last-child{color:var(--gold)}
.menu-brand{font-size:36px;line-height:1.15;padding:4px 0 22px;letter-spacing:2px}.menu-brand>span{display:block}.menu-brand>span:last-of-type{color:#ffdc8b;text-shadow:3px 3px #dd258e}.menu-brand small{font-size:9px;line-height:1.8;margin-top:12px}
.menu-choice small,.menu-copy{font-size:12px;line-height:1.8}.legal-links a,.settings-scroll a{font-size:12px;line-height:1.8}.settings-scroll label{font-size:12px;line-height:1.8}.settings-scroll input{flex-shrink:0}.level-row small{font-size:10px;line-height:1.8}.level-row b{overflow-wrap:anywhere}#board-list li{font-size:11px;line-height:1.8}#save-status{font-size:10px;line-height:1.8}.menu-best{font-size:10px}.menu-copy,.settings-scroll a{overflow-wrap:anywhere}
@media(max-height:680px){.menu-brand{font-size:28px;padding:0 0 12px}.menu-brand small{margin-top:6px;font-size:8px}.menu-choice small,.menu-copy{font-size:11px;line-height:1.65}.menu-choice{padding:10px 12px}.menu-page{gap:7px}.brand{font-size:16px}}

#pilot-form{display:flex;flex-direction:column;gap:10px;border-bottom:1px solid #754287;padding-bottom:18px}#pilot-name{width:100%;min-width:0;min-height:48px;padding:12px;background:#090516;color:#65ffe2;border:2px solid #a751c3;font:800 16px/1.5 'Panic Pixel',monospace;text-transform:uppercase}#pilot-name:focus{outline:2px solid #65ffe2;outline-offset:2px}#choose-pilot{font-size:11px;overflow-wrap:anywhere}#board-list li span{min-width:0;overflow-wrap:anywhere}#pilot-status{color:#ffe38a}

#game-mode{font-size:11px;line-height:1.5;color:var(--muted);margin-bottom:7px;letter-spacing:1px}#retry:disabled{opacity:.6}

header #game-mode{flex:1;min-width:38px;text-align:center;font-size:9px;line-height:1.65;letter-spacing:0;margin:0;color:var(--muted)}header .record{margin-left:0}@media(max-width:360px){header{column-gap:8px}header #game-mode{font-size:8px}}

/* Reference composition: 1024 × 1536; artwork scales without stretching. */
#game{container-type:inline-size}
#menu{container-type:inline-size;background:#05051a url('images/menu-cosmos.png') center top/cover no-repeat;padding:max(20px,env(safe-area-inset-top)) 22px max(20px,env(safe-area-inset-bottom));isolation:isolate}
#menu .asset-logo{width:min(76%,330px);height:auto;min-height:0;margin:0 auto 18px;padding:0;filter:none;flex-shrink:0}
.asset-logo img{display:block;width:100%;height:auto;pointer-events:none}
#menu[data-page="home"]{padding:max(6.5cqw,env(safe-area-inset-top)) 0 max(20px,env(safe-area-inset-bottom))}
#menu[data-page="home"] .asset-logo{width:62%;max-width:none;margin:0 auto -2.9cqw}
#menu-home{width:100%;max-width:none;margin:0;gap:0;flex:0 0 auto;align-items:center;padding:0 0 12px}
#menu-home .menu-best{width:33%;height:13.5cqw;min-height:0;align-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8cqw;margin:0;padding:1cqw;border:2px solid #e35dff;background:#07051dec;box-shadow:0 0 10px #ca39ff8a,inset 0 0 12px #6432a64d;color:#e5fcff;font-size:2.25cqw;line-height:1.4}
.best-value{display:flex;align-items:center;justify-content:center;gap:1.6cqw;max-width:100%}
#menu-home .menu-best b{font-size:5.5cqw;line-height:1.2;white-space:nowrap;color:#ffe15d;text-shadow:1px 2px #aa5419;margin:0;letter-spacing:0}
.best-trophy{font-family:system-ui,sans-serif;font-size:5.4cqw;line-height:1}
.menu-actions{display:flex;flex-direction:column;align-items:stretch;width:64%;margin:2.5cqw auto 0;gap:.9cqw}
#menu-home .illustrated-choice,#paused .illustrated-choice{position:relative;display:block;width:100%;aspect-ratio:952/268;min-height:0;flex-shrink:0;padding:0;border:0;background:none;box-shadow:none;clip-path:none;overflow:hidden;transition:filter .1s,transform .1s}
.asset-button{position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none}
.asset-button img{position:absolute;width:var(--art-width,100%);height:auto;max-width:none;left:var(--art-left,0);top:var(--art-top,0);pointer-events:none}
.illustrated-choice .button-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#menu-home .illustrated-choice:active,#paused .illustrated-choice:active{transform:translateY(2px);filter:brightness(1.15)}
#menu-home .illustrated-choice:focus-visible,#paused .illustrated-choice:focus-visible{outline:3px solid #fff;outline-offset:2px;filter:brightness(1.15)}
#paused .illustrated-choice{width:82%;max-width:380px}
#menu-home #choose-pilot{width:64%;min-height:28px;margin:1.4cqw auto 0;padding:7px 4px;background:#070a22c9;border:0;color:#d7ecff;font-size:9px;line-height:1.5;text-shadow:1px 2px #050519}
#menu-home .legal-links{width:80%;padding-top:5px;gap:20px;margin:0 auto;text-shadow:2px 2px #020412}
#menu-home .legal-links a{color:#f4f4ff;font-size:10px;text-decoration:none;border-bottom:1px solid #818ee6;padding:9px 0}
#menu .menu-page:not(#menu-home){background:#08091eea;padding:18px;border:2px solid #7942ab;box-shadow:0 0 24px #030213;min-height:260px}
#menu-status:not(:empty){margin:12px 16px 0;padding:10px;background:#08091eef}
@media(prefers-reduced-motion:reduce){.illustrated-choice{transition:none}}

/* Equal sprite viewports retain all five button silhouettes. */
.illustrated-choice{--art-width:107.56302521%;--art-left:-3.78151261%}
.illustrated-choice[data-art="story"]{--art-top:-29.104477612%}
.illustrated-choice[data-art="levels"]{--art-top:-130.223880597%}
.illustrated-choice[data-art="leaderboard"]{--art-top:-230.970149254%}
.illustrated-choice[data-art="settings"]{--art-top:-332.089552239%}
.illustrated-choice[data-art="resume"]{--art-top:-434.701492537%}

/* Motion is driven by the game's frame loop, just like the idle meteor. */
#game button[data-float]{transition-property:filter,background-color,border-color;animation:none}

/* A single unbroken box defines every lethal edge. */
#arena{border:3px solid var(--edge);margin:7px 14px;box-shadow:0 0 15px color-mix(in srgb,var(--edge) 25%,transparent)}
header{border-bottom:0}footer{border-top:0}
#overlay{overflow-y:auto;padding:14px 0}
.overcard{flex-shrink:0;margin:auto;max-width:340px;padding:18px 12px}
#overlay .death-choice{position:relative;display:block;width:100%;aspect-ratio:1408/368;min-height:0;margin:10px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:hidden;letter-spacing:0}
#overlay .death-choice .asset-button{float:none}
#overlay .death-choice:active{filter:brightness(1.15)}
#overlay .death-choice:focus-visible{outline:3px solid white;outline-offset:2px}
@media(max-height:680px){.overcard{padding:10px}.overcard h1{margin:8px 0 12px}.results strong{margin-bottom:12px}#overlay .death-choice{margin-top:8px}}

.death-choice{--art-width:109.09090909%;--art-left:-4.54545455%}
.death-choice[data-art="retry"]{--art-top:-43.47826087%}
.death-choice[data-art="over-home"]{--art-top:-150.54347826%}

/* Compact in-flight HUD leaves the meteor's flight path clear. */
.score{top:8px}
.score #next-level{font-size:9px;line-height:1.25;letter-spacing:0;margin:0 0 4px}
.score strong{font-size:24px;line-height:1.05;letter-spacing:0;text-shadow:1px 0 #160829,-1px 0 #160829,0 -1px #160829,0 1px #160829,2px 2px 0 var(--edge)}
.score span{font-size:8px;line-height:1.2;letter-spacing:1px;margin-top:3px}
#hint{top:72px;font-size:10px;line-height:1.4;padding:0 8px}
#level-notice{top:69px;font-size:12px;line-height:1.5;padding:3px 8px;letter-spacing:0}
@media(max-height:660px){.score strong{font-size:20px}.score #next-level{font-size:8px;margin-bottom:3px}.score span{margin-top:2px}#hint{top:63px;font-size:9px}#level-notice{top:62px;font-size:11px}}

/* Game over uses the arena's existing frame and fits its available height. */
#overlay{overflow:hidden;padding:0;container-type:size;background:var(--panel)}
#overlay .overcard{width:min(90%,340px,105cqh);max-width:none;margin:auto;padding:0;border:0;box-shadow:none;background:none;flex-shrink:1}
#overlay .overcard h1{font-size:clamp(16px,7cqh,26px);line-height:1.2;margin:0 0 3cqh}
#overlay .results{font-size:clamp(8px,2.8cqh,10px);line-height:1.2;gap:28px}
#overlay .results strong{font-size:clamp(16px,6cqh,25px);line-height:1.2;margin:1.5cqh 0 2cqh}
/* Match the main menu: 64% of the 480px-max game width. Keep artwork proportions. */
#overlay .death-choice{width:min(100%,64vw,307.2px);margin:2cqh auto 0}
#overlay #save-status{font-size:clamp(8px,2.6cqh,10px);line-height:1.4;margin:2.5cqh 0 0;letter-spacing:0;overflow-wrap:anywhere}
#overlay #save-status:empty{display:none}

/* Reuse the start screen artwork in every gameplay header. */
header .brand{width:clamp(100px,30vw,140px);flex:0 0 auto;line-height:0;letter-spacing:0;text-shadow:none}
header .brand img{display:block;width:100%;height:auto;object-fit:contain;pointer-events:none}

/* The tutorial reuses the live joystick and meteor art, but owns its clock. */
#tutorial{position:fixed;inset:0;margin:auto;width:min(100%,480px);height:100dvh;max-width:100%;max-height:100dvh;border:0;padding:max(12px,env(safe-area-inset-top)) 20px max(12px,env(safe-area-inset-bottom));background:#100724;color:#55ffe7;overflow:hidden;--edge:#f52bc4;--accent:#55ffe7;--gold:#ffe181;--panel:#130a28}
#tutorial::backdrop{background:#030312ed}
.tutorial-panel{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px}
#tutorial-label{font-family:'Panic Pixel',monospace;font-weight:800;font-size:clamp(12px,3.5vw,17px);line-height:1.5;text-align:center;margin:0;color:#ffe181;text-shadow:2px 2px #aa288d;flex-shrink:0}
#tutorial-canvas{width:100%;height:auto;max-height:40dvh;aspect-ratio:400/280;object-fit:contain;border:2px solid #ed32c2;background:#08051c;image-rendering:pixelated}
#tutorial-control{position:relative;flex-shrink:0;isolation:isolate}
#tutorial-joystick{margin:8px 0!important;pointer-events:none}
#tutorial-hand{position:absolute;width:100px;height:100px;left:calc(50% - 15.47px);top:calc(50% - 7.18px);image-rendering:pixelated;pointer-events:none;z-index:2;opacity:0}
#close-tutorial{display:block;width:min(100%,340px);padding:0;margin:0;background:none;border:0;flex-shrink:0;line-height:0}
#close-tutorial img{display:block;width:100%;height:auto;max-height:100px;object-fit:contain}
#close-tutorial:focus-visible{outline:2px solid #55ffe7;outline-offset:3px}
#close-tutorial:active{filter:brightness(1.2)}
@media(max-height:600px){.tutorial-panel{gap:7px}#tutorial-canvas{max-height:32dvh}#close-tutorial{width:min(90%,300px)}}

/* Filter only the backdrop, preserving the title and button colours. */
#menu{background:#05051a}
#menu::before{content:"";position:absolute;inset:0;z-index:-1;background:url('images/menu-cosmos.png') center top/cover no-repeat;filter:contrast(.7);pointer-events:none}
#final-next{font-size:9px!important;line-height:1.4;letter-spacing:0!important;margin:1cqh 0;color:var(--accent)!important}
.near-level{animation:near-level-pulse .8s ease-in-out infinite}
@keyframes near-level-pulse{50%{opacity:.55;text-shadow:0 0 6px var(--accent)}}
.reduce-motion .near-level{animation:none;color:var(--gold)}

#resume-countdown{position:absolute;inset:0;display:grid;place-items:center;z-index:8;background:#08051a66;color:var(--gold);font-size:54px;text-shadow:3px 3px var(--edge);pointer-events:none}
#joystick::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--accent);box-shadow:0 0 var(--push-glow,0px) var(--accent),inset 0 0 var(--push-glow,0px) var(--accent);opacity:var(--push-alpha,.12);pointer-events:none}
#new-unlock{display:flex;align-items:center;justify-content:center;gap:8px;margin:1cqh 0;font-size:7px;line-height:1.5;color:var(--accent)}
#unlock-number{display:grid;place-items:center;width:28px;height:28px;border:2px solid;flex-shrink:0;font-size:13px}
#unlock-name{color:var(--gold)}
#practise-unlock{font:inherit;padding:8px 5px;border:1px solid var(--edge);color:var(--accent);background:var(--panel)}
#overlay .overcard:has(#new-unlock:not([hidden])) .death-choice{margin-top:1cqh}

/* One scale for meteor, flame, obstacles and collision geometry. */
#arena-slot{flex:1;min-height:0;margin:7px 14px;display:flex;align-items:center;justify-content:center;overflow:hidden}
#arena{flex:none;min-height:0;margin:0;box-sizing:border-box}
#canvas{width:100%;height:100%}