*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:#020b0f;overflow:hidden;color:#eee4c8;font-family:Georgia,serif;overscroll-behavior:none}body{display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}button{font:inherit;color:inherit;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #90f6d1;outline-offset:3px}#frame{position:relative;width:min(100%,133.333333dvh);height:auto;max-height:100%;aspect-ratio:4/3;overflow:hidden;background:#0a252b;container-type:inline-size;user-select:none}canvas{display:block;width:100%;height:100%;touch-action:none}#hud{position:absolute;left:2%;right:2%;top:2%;height:10%;display:flex;align-items:center;gap:2%;font-family:system-ui,sans-serif;background:linear-gradient(90deg,#081b22ee,#081b22b0);border-bottom:1px solid #b7945366;padding:0 1%}.brand{font-size:2.6cqw;color:#e7b767;letter-spacing:.2cqw;line-height:.8}.brand span{display:block;font-size:.7cqw;margin-top:.6cqw}.meter{width:17%}.meter label{font-size:1cqw;letter-spacing:.12cqw;display:flex;justify-content:space-between}.meter b{color:#e9e1cd}i{height:.55cqw;background:#ffffff16;display:block;margin-top:.4cqw}em{height:100%;width:100%;display:block;background:#da9267;transition:width .15s}.air em{background:#66c8b1}.power em{background:#e6c56e}#stock{margin-left:auto;font-size:1.8cqw;color:#e8c988;white-space:nowrap}#stock small{display:block;font: .7cqw system-ui;letter-spacing:.1cqw;color:#9eb9b9}#hud button{border:1px solid #698581;background:#15343b;width:3.5cqw;height:3.5cqw;font:1.8cqw system-ui;padding:0}#objective{position:absolute;top:14%;left:3%;font:1.1cqw system-ui;letter-spacing:.12cqw;color:#c6d6ce;text-shadow:0 2px 3px #000}#toast{position:absolute;bottom:20%;left:25%;width:50%;text-align:center;font:1.25cqw system-ui;line-height:1.5;background:#05171fec;border:1px solid #b68d48aa;padding:.8cqw 1.5cqw;border-radius:2px;opacity:0;transition:opacity .15s;pointer-events:none}#toast.show{opacity:1}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#030d16b0;backdrop-filter:blur(2px)}#overlay:empty{display:none}.panel{width:64%;max-height:94%;padding:3.4cqw;border:1px solid #94794c;background:linear-gradient(130deg,#0b242eee,#06191ff5);box-shadow:0 0 0 6px #07191eb0,0 25px 100px #0008;text-align:left;overflow:auto}.panel.menu{width:69%;margin-right:18%;background:linear-gradient(115deg,#061a22f7,#092a31ed)}.eyebrow{font:1cqw system-ui;letter-spacing:.35cqw;text-transform:uppercase;color:#7dbaa9}.panel h1{font-size:6.3cqw;font-weight:normal;line-height:.9;margin:2cqw 0 1cqw;letter-spacing:-.2cqw;color:#f3deb2}.subtitle{font:1.45cqw system-ui;letter-spacing:.65cqw;color:#d5aa61;margin-bottom:2cqw}.panel h2{font-size:3.1cqw;font-weight:normal;margin:1cqw 0 1.4cqw;color:#efd6a5}.panel p{font:1.35cqw/1.7 system-ui;color:#acc6c4;margin:1cqw 0 1.7cqw}.panel strong{color:#eed096;font-weight:500}.row{display:flex;flex-wrap:wrap;gap:.8cqw;margin-top:1.1cqw}.panel button{padding:1cqw 1.5cqw;border:1px solid #987d4d;background:#183a40;font:1.25cqw system-ui;letter-spacing:.08cqw}.panel button.primary{background:#dfb76d;color:#11252c;border-color:#e6c48c;font-weight:650}.panel button:hover{filter:brightness(1.25)}.panel .foot{font:.95cqw/1.7 system-ui;color:#789b9d;margin-top:1.8cqw}.chapterList{display:grid;grid-template-columns:1fr 1fr;gap:.7cqw}.chapterList button{text-align:left}.panel button:disabled{opacity:.35;cursor:default}.keys{display:grid;grid-template-columns:1fr 1fr;gap:.8cqw;font:1.15cqw/1.7 system-ui;color:#acc6c4}.keys b{color:#ead19a}#touch{position:absolute;inset:0;pointer-events:none;display:none}body.touch #touch{display:block}#touch .move,#touch .actions{position:absolute;bottom:3%;display:flex;gap:1cqw;align-items:flex-end}.move{left:3%}.actions{right:3%}#touch button{pointer-events:auto;width:7.4cqw;height:7.4cqw;border-radius:50%;border:1px solid #a4d3cc77;background:#0a2839a8;color:#eed5a1;font:3.2cqw system-ui;box-shadow:inset 0 0 15px #a4d3cc11}#touch button.small{width:5.7cqw;height:5.7cqw;font-size:2.2cqw}#touch button.fire{background:#6a502cb8;border-color:#d6b576}#touch button.held{background:#9b986b99;transform:scale(.94)}#rotate{display:none;position:absolute;inset:0;background:#071c21f5;align-items:center;justify-content:center;flex-direction:column;gap:20px;text-align:center;padding:20px;font:18px system-ui}#rotate button{background:#254949;border:1px solid #b4a26f;padding:12px}@media(orientation:portrait) and (pointer:coarse){#rotate{display:flex}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#toast{top:24%;bottom:auto;}body.touch .meter label{font-size:1.3cqw}body.touch #stock small{font-size:1cqw}body.touch #objective{font-size:1.3cqw}

.chapterList{grid-template-columns:repeat(4,1fr)}.chapterList button{font-size:1.05cqw;padding:.8cqw}.panel:has(.chapterList){width:87%}.panel.menu{background:linear-gradient(115deg,#061a22ef,#092a31e0)}
body.touch .panel button{min-height:38px;font-size:clamp(10px,1.35cqw,16px)}

.mix{display:flex;gap:24px;justify-content:center;margin:16px 0}.mix label{display:flex;gap:10px;align-items:center;font-size:13px}.mix input{width:110px;accent-color:#bcb282}

/* 4:3 presentation; logical UI stays identical at 1x and 2x raster detail. */
#frame{max-width:calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*4/3)}
.panel{width:88%;padding:clamp(14px,3cqw,24px)}.panel.menu{width:84%;margin-right:0}.panel h1{font-size:clamp(32px,7cqw,56px)}.panel h2{font-size:clamp(22px,4cqw,32px)}
.panel p{font-size:clamp(12px,1.8cqw,15px);line-height:1.55}.panel button,.keys{font-size:clamp(12px,1.7cqw,14px)}.eyebrow,.panel .foot{font-size:clamp(10px,1.5cqw,12px)}.subtitle{font-size:clamp(12px,2cqw,16px)}
.chapterList{grid-template-columns:repeat(2,1fr)}.chapterList button{font-size:clamp(11px,1.6cqw,13px);min-height:34px}.panel:has(.chapterList){width:92%}
#hud{gap:1.5%;height:9%}.meter label,body.touch .meter label{font-size:clamp(10px,1.5cqw,12px)}#stock{font-size:clamp(12px,2cqw,16px)}#stock small{font-size:clamp(8px,1.1cqw,10px)}#hud button{min-width:30px;min-height:30px;font-size:18px}
#objective,body.touch #objective{top:12%;right:3%;font-size:clamp(10px,1.5cqw,12px);line-height:1.35}#toast{top:24%;left:12%;width:76%;font-size:clamp(12px,1.7cqw,14px)}
#touch .move,#touch .actions{gap:clamp(3px,.8cqw,7px)}#touch button{width:clamp(44px,7cqw,58px);height:clamp(44px,7cqw,58px);font-size:25px}#touch button.small{width:clamp(36px,5.7cqw,46px);height:clamp(36px,5.7cqw,46px);font-size:20px}
body.touch #frame:has(#overlay:not(:empty)) #touch{display:none}.mix{flex-wrap:wrap;gap:12px}.resolution{margin-top:14px;font:13px system-ui}.resolution select{font:inherit;color:#eee4c8;background:#183a40;border:1px solid #987d4d;padding:6px;margin-left:8px}
@container(max-width:600px){.brand{display:none}#stock small{display:none}.meter{width:20%}#hud{gap:1%}.keys{grid-template-columns:1fr}.panel.menu{width:92%}}

/* Requested full-screen view, with a dedicated control dock below the playfield. */
:root{--controls-height:82px}
html,body{width:100%;height:100dvh;padding:0}
#frame{width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto}
#frame:fullscreen{width:100vw;height:100dvh}
canvas{width:100%;height:calc(100% - var(--controls-height) - env(safe-area-inset-bottom));object-fit:fill}
#overlay{bottom:calc(var(--controls-height) + env(safe-area-inset-bottom))}
#hud{top:max(8px,env(safe-area-inset-top));left:12px;right:12px;height:56px;gap:12px;padding:0 10px}
.brand{font-size:20px;letter-spacing:1.5px}.brand span{font-size:8px;letter-spacing:2px;margin-top:6px}
#objective,body.touch #objective{top:74px;left:18px;right:18px;font-size:12px}
#toast{top:110px;max-width:640px;left:50%;transform:translateX(-50%)}
#touch,body.touch #frame:has(#overlay:not(:empty)) #touch{display:flex;position:absolute;inset:auto 0 0;height:calc(var(--controls-height) + env(safe-area-inset-bottom));padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));align-items:center;justify-content:space-between;gap:16px;pointer-events:auto;background:linear-gradient(#13363b,#071c23);border-top:1px solid #b99a6177;box-shadow:0 -3px 18px #020b0f66;font-family:system-ui,sans-serif}
#touch .move,#touch .actions{position:static;display:flex;align-items:center;gap:8px}
#touch button{width:clamp(46px,7vw,74px);height:58px;min-width:0;border-radius:10px;font-size:23px;line-height:1.1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#183e46;border:1px solid #729e9b88;box-shadow:inset 0 1px 0 #ffffff12}
#touch button span{font:10px system-ui;white-space:nowrap;color:#c8dcd5}
#touch button.fire{background:#705731;border-color:#c6aa70}
#touch button.held{background:#8b956799;transform:translateY(1px)}
#frame:has(#overlay:not(:empty)) #touch [data-key]{opacity:.45;pointer-events:none}
#rotate{display:none!important}
@media(max-width:560px){:root{--controls-height:128px}#touch{gap:10px;padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}#touch .move{gap:6px}#touch .actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;width:calc(100% - 98px)}#touch button{width:44px;height:49px;font-size:20px}#touch .actions button{width:100%}#touch button span{font-size:9px}#hud{left:5px;right:5px;gap:6px;height:50px;padding:0 6px}.brand{display:none}.meter{flex:1;width:auto;min-width:0}#stock{font-size:12px}#hud button{min-width:28px;min-height:28px}#objective,body.touch #objective{top:65px;left:8px;right:8px;font-size:10px}.mix input{width:85px}}

/* GameMonetize menu actions. */
.more-games{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border:1px solid currentColor;text-decoration:none;color:inherit;font:inherit;font-weight:bold;cursor:pointer}.more-games:hover{filter:brightness(1.2)}#gm-ad-status{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:120;background:#101820;color:white;padding:10px 18px;border-radius:5px;pointer-events:none}.gm-ad-active{cursor:wait}
