*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#06161c;color:#eef4df;font-family:Arial,Helvetica,sans-serif}button,select{font:inherit}button{cursor:pointer;color:inherit;border:1px solid #71928766;background:#0b282b;padding:13px 18px;letter-spacing:.09em;font-size:12px;font-weight:800;border-radius:3px;transition:background .15s,transform .15s}button:hover{background:#1a4746}button:active{transform:translateY(1px)}button:focus-visible,select:focus-visible{outline:3px solid #ffee98;outline-offset:3px}[hidden]{display:none!important}#game{position:absolute;inset:0;overflow:hidden}canvas{width:100%;height:100%;display:block;object-fit:contain;background:#071e24;touch-action:none}.overlay{position:absolute;inset:0;z-index:4;background:linear-gradient(90deg,#061a20ee 0%,#061a20c9 37%,#071c2133 70%,#061a2099 100%)}.menuContent{position:absolute;left:max(7%,env(safe-area-inset-left));top:9%;width:48%}.eyebrow{font-size:11px;letter-spacing:.19em;color:#9ccdc1;font-weight:700}.eyebrow i{display:inline-block;width:7px;height:7px;background:#c8ef89;border-radius:100%;margin-right:8px;box-shadow:0 0 14px #c8ef89}h1{font-size:clamp(50px,8vw,114px);line-height:.84;letter-spacing:-.065em;margin:28px 0 18px;font-weight:900;color:#f1f0d7}h1 span{color:#c9ef91}.subtitle{font-size:14px;letter-spacing:.29em;color:#f1947b;margin:20px 0 28px}.intro{font-size:clamp(14px,1.6vw,19px);line-height:1.5;color:#b1c4b8;margin:0 0 26px}.actions{display:flex;gap:10px;flex-wrap:wrap}.primary{background:#c9ef91;color:#102d28;border:0;padding:18px 24px;min-width:210px}.primary:hover{background:#e2ffb3}.primary span{margin-left:24px;font-size:18px}.settings{display:flex;gap:18px;align-items:center;margin-top:24px;color:#a8c2b4;font-size:11px}.settings label{display:flex;gap:8px;align-items:center}.settings select{background:#102b2c;color:#e3edce;border:1px solid #497368;padding:6px;max-width:175px;font-size:11px}.settings input{accent-color:#c9ef91}.textButton{background:none;border:0;border-bottom:1px solid #6a8c7977;padding:12px 0 6px;margin:7px 20px 0 0;color:#a6c9b9;font-size:10px}.saveStatus{color:#829e90;font-size:10px;min-height:12px}.route{position:absolute;right:6%;top:28%;width:235px;letter-spacing:.08em}.route>span{font-size:10px;color:#a9c4a9}.route ol{list-style:none;padding:0;border-top:1px solid #abc28f55;margin-top:16px}.route li{font-size:13px;padding:15px 0;border-bottom:1px solid #abc28f33;position:relative}.route li b{font-size:10px;color:#c9ef91;padding-right:12px}.route li i{display:block;font-size:8px;letter-spacing:.18em;font-style:normal;color:#86a79c;margin:7px 0 0 29px}.route p{color:#a2b5a4;font-size:9px;line-height:1.8;margin-top:24px}footer{position:absolute;bottom:5%;left:7%;right:6%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.17em;color:#96ae99}.modal{background:#041418b5;display:grid;place-items:center;backdrop-filter:blur(6px)}.card{max-width:680px;max-height:92vh;overflow:auto;background:#0d292bf5;border:1px solid #74998b66;border-top:3px solid #c9ef91;padding:38px;box-shadow:0 20px 100px #0006}.card h2{font-size:38px;letter-spacing:-.04em;margin:15px 0}.card p{font-size:15px;line-height:1.7;color:#b7cfc3;white-space:pre-line}.card .actions{margin-top:25px}.card b{color:#e4edcb}#manual p{font-size:13px}#hud{position:absolute;inset:0;pointer-events:none;padding:max(22px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) 0 max(28px,env(safe-area-inset-left));z-index:2;background:linear-gradient(#061c20b0,transparent 130px)}.mission{display:flex;gap:10px;flex-direction:column}.mission small{color:#c6ef8e;font-size:10px;letter-spacing:.18em}.mission b{font-size:17px;letter-spacing:.09em}.mission span{font-size:11px;color:#b7d4c1}.health{position:absolute;left:50%;top:26px;transform:translateX(-50%);text-align:center}.health span{display:block;letter-spacing:4px;font-size:21px;color:#c9ef91}.health small{font-size:10px;letter-spacing:.15em;color:#b9d7cc;display:block;margin-top:7px}.hudButtons{position:absolute;right:max(24px,env(safe-area-inset-right));top:24px;display:flex;gap:8px;pointer-events:auto}.hudButtons button{padding:10px;font-size:10px}#bossHud{position:absolute;top:98px;left:30%;width:40%}#bossHud div{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em;color:#ffc7ab}#bossHud div span+span{color:#bd9589}#bossHud i{display:block;height:7px;background:#173230;margin-top:8px}#bossHud em{display:block;background:#f18b74;height:100%;width:100%;box-shadow:0 0 16px #f18b7455}#toast{position:absolute;left:50%;top:26%;transform:translateX(-50%);z-index:3;color:#e6f9c7;background:#092c2ce6;padding:12px 22px;font-size:12px;letter-spacing:.08em;border-left:3px solid #c9ef91;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}#touch{position:absolute;inset:0;z-index:3;pointer-events:none;touch-action:none}#touch button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;background:#123e40a8;border:1px solid #c7eed965;color:#e2f1d6;width:68px;height:68px;border-radius:50%;padding:0;font-size:12px}#touch button.held{background:#a3d58cb0}.movePad{position:absolute;bottom:max(30px,env(safe-area-inset-bottom));left:max(25px,env(safe-area-inset-left));display:flex;gap:15px}.actionPad{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));right:max(25px,env(safe-area-inset-right));display:flex;align-items:end;gap:12px}#touch .fire{width:94px;height:94px;border-color:#f5a286;background:#674537aa}#touch .fire span{display:block;font-size:8px;margin-top:5px;font-weight:400}#touch .jump{margin-bottom:20px}#touch .dash{width:52px;height:52px;font-size:9px}#rotate{display:none;position:absolute;bottom:8px;width:100%;text-align:center;font-size:9px;color:#c9ef91;z-index:8;pointer-events:none}.cyan{color:#88e7ee!important}.coral{color:#f4ab85!important}@media(max-height:600px){.menuContent{top:7%}h1{font-size:clamp(42px,7.9vw,82px);margin:18px 0 14px}.subtitle{margin:12px 0 16px;font-size:11px}.intro{font-size:13px;margin-bottom:17px}.primary{padding:13px 19px}.settings{margin-top:13px}.route{top:17%}.route li{padding:10px 0}.card{padding:22px 30px}.card h2{font-size:28px}.card p{font-size:13px}.health{top:18px}#hud{padding-top:16px}.hudButtons{top:16px}.mission{gap:6px}.mission b{font-size:13px}#bossHud{top:75px}.saveStatus{margin:6px 0}}@media(max-width:800px){.route{right:5%;width:180px}.route li{font-size:11px}.menuContent{left:5%;width:57%}.settings{gap:10px}.settings label{font-size:9px}.settings select{max-width:145px}.eyebrow{font-size:8px}footer{font-size:7px;left:5%}.health span{font-size:16px}.health small{font-size:8px}.mission span{font-size:9px}#touch button{width:58px;height:58px}#touch .fire{width:78px;height:78px}.movePad{bottom:18px}.actionPad{bottom:18px}}@media(orientation:portrait){#rotate{display:block}.route{display:none}.menuContent{width:90%;top:14%}h1{font-size:20vw}.intro{font-size:16px}.health{top:100px}.mission b{font-size:12px}.card{max-width:95%;padding:22px}#bossHud{top:155px;width:70%;left:15%}footer span{display:none}.settings{flex-wrap:wrap}}

.audioSettings{display:flex;gap:20px;margin:14px 0;color:#a6c3b8;font:12px Arial}.audioSettings label{display:flex;align-items:center;gap:8px}.audioSettings input{width:90px;accent-color:#c9ef91}

/* v3.1: one 800x600 UI stage, proportionally fitted to every window. */
#game{inset:auto;left:50%;top:50%;width:800px;height:600px;transform:translate(-50%,-50%) scale(var(--fit,1));transform-origin:center}#screen{width:800px;height:600px;object-fit:contain}#rotate{display:none}
.menuContent{left:36px;top:32px;width:490px}.eyebrow{font-size:10px}h1{font-size:72px;margin:20px 0 14px}.subtitle{font-size:12px;margin:14px 0 18px}.intro{font-size:15px;margin:0 0 18px}.primary{min-width:195px;padding:14px 18px}.actions{gap:8px}.settings{margin-top:15px;gap:14px;flex-wrap:wrap}.settings label{font-size:11px}.settings select{max-width:175px}.audioSettings{margin:10px 0;gap:20px}.renderSettings{margin-top:12px;color:#a8c2b4;font-size:11px}.renderSettings select{margin-left:8px;background:#102b2c;color:#e3edce;border:1px solid #497368;padding:4px;font-size:11px}.saveStatus{margin:8px 0}.route{display:block;right:24px;top:164px;width:206px}.route li{font-size:12px;padding:12px 0}.route p{font-size:9px}footer{bottom:18px;left:36px;right:24px;font-size:8px}footer span{display:block}
#hud{padding:16px 18px}.mission{max-width:240px;gap:6px}.mission small{font-size:9px}.mission b{font-size:13px;line-height:1.25}.mission span{font-size:10px}.health{left:51%;top:15px;width:265px}.health span{font-size:18px;letter-spacing:3px}.health small{font-size:9px;letter-spacing:.04em;line-height:1.4}.hudButtons{top:16px;right:18px;gap:5px}.hudButtons button{padding:9px;font-size:10px}#bossHud{top:96px;left:29%;width:46%}#toast{top:23%;max-width:650px;white-space:normal;text-align:center;font-size:12px}.card{max-width:700px;max-height:540px;padding:26px 30px}.card h2{font-size:30px}.card p{font-size:14px}.card .actions{margin-top:18px}
#touch button{width:64px;height:64px;font-size:12px}#touch .fire{width:84px;height:84px}#touch .dash{width:52px;height:52px}.movePad{left:18px;bottom:18px;gap:12px}.actionPad{right:18px;bottom:18px;gap:12px}#touch .jump{margin-bottom:16px}

/* Small-window controls retain useful physical target sizes inside the 4:3 stage. */
.compact #menu{overflow-y:auto}.compact .menuContent{position:relative;left:28px;top:22px;width:744px;padding-bottom:52px}.compact .route,.compact footer{display:none}.compact .eyebrow,.compact .subtitle,.compact .intro,.compact .settings label,.compact .settings select,.compact .renderSettings,.compact .renderSettings select,.compact .audioSettings,.compact .saveStatus{font-size:var(--ui-font)}.compact .settings{gap:18px}.compact .settings select{max-width:260px}.compact button{min-height:var(--tap);font-size:var(--ui-font)}.compact .textButton{padding:10px}.compact .audioSettings input{width:160px}.compact .card{max-height:550px}.compact .card p,.compact #manual p{font-size:var(--ui-font)}
.compact .mission{max-width:370px}.compact .mission b,.compact .mission small,.compact .mission span{font-size:var(--ui-font);letter-spacing:0}.compact .hudButtons button{min-width:var(--tap);padding:8px}.compact .health{left:18px;top:116px;width:764px;transform:none;text-align:left}.compact .health span{display:inline-block;font-size:26px}.compact .health small{display:inline-block;margin:0 0 0 16px;font-size:var(--ui-font);max-width:420px}.compact #bossHud{left:18px;width:764px;top:192px}.compact #bossHud div{font-size:var(--ui-font)}.compact #toast{top:38%;font-size:var(--ui-font)}.compact #touch button{width:var(--tap);height:var(--tap);font-size:var(--ui-font)}.compact #touch .fire{width:var(--fire);height:var(--fire)}.compact #touch .dash{width:var(--dash);height:var(--dash);min-height:var(--dash)}

/* Bottom dock: six simultaneous pointer controls, below the player's normal ground framing. */
#touch .movePad{left:18px;bottom:12px;width:244px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#touch .actionPad{right:18px;bottom:12px;width:512px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:stretch}
#touch button,#touch .fire,#touch .dash{width:100%;height:64px;min-width:0;min-height:64px;margin-bottom:0;border-radius:9px;background:#092c34e8;border:1px solid #c7eed987;font-size:12px;letter-spacing:.05em}
#touch button span,#touch .fire span{display:block;font-size:10px;margin-top:5px;font-weight:400;letter-spacing:0;color:#b7d7cf}
#touch .fire{background:#633b2ce8;border-color:#f5a286}#touch button.held{background:#59845ce8;box-shadow:inset 0 0 0 2px #c9ef91}
.compact #touch button,.compact #touch .fire,.compact #touch .dash{width:100%;height:var(--tap);min-height:var(--tap);font-size:var(--ui-font)}
.compact #touch button span,.compact #touch .fire span{font-size:calc(var(--ui-font)*.8)}

.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}
