*{box-sizing:border-box}html,body{margin:0;background:#0c1b20;color:#fff5d5;width:100%;height:100%;overflow:hidden;font-family:Trebuchet MS,Arial,sans-serif}body{display:flex;align-items:center;justify-content:center;touch-action:none}button{font:inherit;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}#stage{position:relative;width:min(100vw,133.3333dvh);height:min(100dvh,75vw);aspect-ratio:4/3;container-type:size;overflow:hidden;background:#e8b56e;box-shadow:0 0 100px #0008}canvas{width:100%;height:100%;display:block}.panel{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:linear-gradient(90deg,#10272bed,#10272b9e 57%,#10272b10);padding:5%;z-index:5}.panel[hidden],#hud[hidden],#touch[hidden]{display:none}.card{width:100%;max-width:850px}.eyebrow{color:#7de0c0;letter-spacing:.25em;font-weight:900;font-size:clamp(9px,1.25vw,14px)}h1{font-size:clamp(35px,7.3vw,82px);font-style:italic;line-height:.9;letter-spacing:-.045em;margin:16px 0 10px;text-shadow:4px 5px #092128;color:#ffd36b}h1 span{display:block;font-size:.33em;letter-spacing:.16em;color:#fff5d5;margin:15px 0 20px}h2{font-size:clamp(24px,4vw,46px);margin:12px 0;color:#ffd36b;line-height:1.05}p{max-width:540px;line-height:1.55;font-size:clamp(11px,1.65vw,17px);margin:12px 0}.choices,.buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.choices button{background:#213f42;color:#c9d5c7;border:1px solid #567064;padding:10px 18px;text-align:left;border-radius:3px}.choices button.selected{border:2px solid #80dfbb;background:#29594d}.choices small{display:block;font-size:10px;letter-spacing:.05em;margin-top:3px}.buttons button{padding:13px 25px;border:0;border-radius:3px;background:#ffd36b;color:#183239;font-weight:900;box-shadow:0 4px #b7823b}.buttons button.secondary{background:#24464a;color:#e5edd9;box-shadow:0 4px #132d33}.hint{font-size:clamp(9px,1.15vw,12px);color:#b8ccbf;margin-top:18px;max-width:620px}.chapter-list{display:flex;gap:7px;margin:20px 0}.chapter-list span{padding:8px 12px;border:1px solid #567064;color:#a6bfb0;font-size:12px}.chapter-list .done{color:#89e2b8;border-color:#89e2b8}#hud{position:absolute;left:2.5%;right:2.5%;top:max(3%,env(safe-area-inset-top));display:flex;justify-content:space-between;gap:8px;pointer-events:none;z-index:2;text-shadow:1px 2px #182e30}.identity{width:28%;max-width:270px}.identity>b{font-size:clamp(13px,2.2vw,23px);letter-spacing:.12em}.identity>span{font-size:10px;margin-left:10px;color:#cde5cb}.health{height:12px;border:2px solid #203a37;background:#482e33;margin:5px 0;transform:skew(-10deg)}.health i{display:block;background:#77ddab;height:100%;width:100%;transition:width .1s}.identity small,.mission small{display:block;font-size:clamp(9px,1.2vw,12px);color:#ffdfa0}.mission{text-align:center;background:#163438c9;padding:8px 14px;border-bottom:2px solid #e9bf67;height:fit-content;min-width:28%}.mission b{font-size:clamp(10px,1.4vw,15px)}.utility{display:flex;gap:5px;pointer-events:auto}.utility button{height:35px;min-width:39px;background:#163438db;border:1px solid #769886;color:#ffdfa0;border-radius:4px;font-size:12px}#toast{position:absolute;left:50%;top:23%;transform:translateX(-50%);font-weight:900;background:#153437de;color:#ffdb78;padding:8px 16px;border-radius:3px;opacity:0;transition:opacity .2s;white-space:nowrap;pointer-events:none;z-index:4;font-size:clamp(10px,1.8vw,19px)}#footer{position:absolute;bottom:3%;left:5%;right:5%;color:#b9c5a2;font-size:9px;letter-spacing:.18em;z-index:6;pointer-events:none}#footer span{float:right;color:#f0d598}#touch{position:absolute;inset:auto max(2%,env(safe-area-inset-right)) max(3%,env(safe-area-inset-bottom)) max(2%,env(safe-area-inset-left));height:22%;z-index:3;pointer-events:none;display:flex;align-items:flex-end;justify-content:space-between}.dpad{width:145px;height:107px;position:relative}.dpad button{position:absolute;width:48px;height:45px}.dpad button:nth-child(1){left:48px;top:0}.dpad button:nth-child(2){left:0;top:47px}.dpad button:nth-child(3){left:48px;top:47px}.dpad button:nth-child(4){left:96px;top:47px}.actions{display:flex;gap:7px;align-items:flex-end}#touch button{pointer-events:auto;border:2px solid #e5d8ac78;background:#183e42a8;border-radius:12px;color:#fff0ba;font-weight:bold;user-select:none}#touch button.active{background:#b08238d9}.actions button{width:57px;height:53px;font-size:11px}.actions small{display:block;opacity:.6;font-size:8px;margin-top:5px}.actions .punch{width:70px;height:70px;background:#a86529d9!important;font-size:15px}#rotate{display:none;position:absolute;bottom:5px;left:0;right:0;text-align:center;background:#132e33;color:#ffdb86;font-size:11px;z-index:7}@media(pointer:coarse){#touch:not([hidden]){display:flex}.hint{font-size:10px}#hud{top:3%}}@media(max-height:450px){.panel{padding:3% 5%}h1{font-size:55px;margin:10px 0}h1 span{margin:10px 0}p{margin:8px 0}.choices,.buttons{margin-top:12px}.choices button{padding:7px 14px}.buttons button{padding:10px 18px}.hint{margin-top:12px}.dpad{transform:scale(.8);transform-origin:left bottom}.actions{transform:scale(.85);transform-origin:right bottom}#footer{font-size:7px;bottom:2%}}@media(orientation:portrait){#rotate{display:block}.panel{padding:3%}h1{font-size:32px}h1 span{margin:5px 0}p{font-size:10px;line-height:1.3}.choices,.buttons{margin-top:7px;gap:6px}.choices button{padding:5px 9px;font-size:10px}.buttons button{padding:7px 10px;font-size:10px}.hint{font-size:8px;margin-top:7px}#footer{display:none}.dpad,.actions{transform:scale(.55);transform-origin:left bottom}.actions{transform-origin:right bottom}}

/* 4:3 presentation: proportional fit; typography follows the game panel, not a wide window. */
.panel{padding:4%;overflow-y:auto}.card{max-height:100%;overflow-y:auto;padding:4px 0 16px}h1{font-size:clamp(30px,9cqw,72px)}h2{font-size:clamp(23px,5.5cqw,44px)}p{font-size:clamp(11px,2.1cqw,17px)}.hint{font-size:clamp(9px,1.5cqw,12px)}.eyebrow{font-size:clamp(9px,1.7cqw,14px)}
.identity{width:28%;flex-shrink:0}.mission{min-width:0;max-width:46%;padding:6px 8px}.mission b{font-size:clamp(10px,1.65cqw,14px)}.mission small,.identity small{font-size:clamp(9px,1.4cqw,11px)}.identity>b{font-size:clamp(13px,2.8cqw,23px)}.utility{flex-shrink:0}
#toast{white-space:normal;text-align:center;max-width:88%;width:max-content;font-size:clamp(10px,2.2cqw,17px)}.buttons label{display:flex;gap:6px;align-items:center;font-size:13px}.buttons input{width:100px}
@container(max-width:560px){.dpad{transform:scale(.8);transform-origin:left bottom}.actions{transform:scale(.8);transform-origin:right bottom}.choices,.buttons{gap:6px;margin-top:10px}.choices button,.buttons button{padding:8px 12px}.utility button{height:30px;min-width:31px;font-size:10px}.identity>span{display:block;margin:0}.health{height:9px}.mission{max-width:43%}.hint{line-height:1.25}#footer{display:none}}
@container(max-width:420px){.dpad,.actions{transform:scale(.63)}.identity small,.mission small{font-size:8px}.mission{padding:4px}.actions{transform-origin:right bottom}#touch{bottom:5%}#rotate{font-size:9px}}

/* Readable keyboard labels and larger manual controls at every panel size. */
#touch{--direction-size:clamp(42px,8cqw,68px);--control-gap:clamp(4px,.75cqw,7px);bottom:max(4%,calc(env(safe-area-inset-bottom) + 26px));height:auto;gap:8px}
.dpad,.actions{transform:none}
.dpad{width:calc(3 * var(--direction-size) + 2 * var(--control-gap));height:calc(2 * var(--direction-size) + var(--control-gap));flex-shrink:0}
.dpad button{width:var(--direction-size);height:var(--direction-size);padding:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.dpad button:nth-child(1){left:calc(var(--direction-size) + var(--control-gap));top:0}
.dpad button:nth-child(2){left:0;top:calc(var(--direction-size) + var(--control-gap))}
.dpad button:nth-child(3){left:calc(var(--direction-size) + var(--control-gap));top:calc(var(--direction-size) + var(--control-gap))}
.dpad button:nth-child(4){left:calc(2 * (var(--direction-size) + var(--control-gap)));top:calc(var(--direction-size) + var(--control-gap))}
#touch button{background:#15383de6;border-color:#dbe8b3b3;text-shadow:0 1px 2px #061419;border-radius:10px;line-height:1.1}
.dpad span{font-size:clamp(14px,2.2cqw,19px)}
#touch kbd{display:block;font:900 clamp(18px,2.75cqw,24px)/1.1 Trebuchet MS,Arial,sans-serif;color:#fff5ca;white-space:nowrap}
.actions{gap:var(--control-gap);flex-shrink:0}
.actions button,.actions .punch{width:clamp(46px,8.75cqw,80px);height:clamp(58px,8.75cqw,80px);padding:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.actions button span{font-size:clamp(11px,1.7cqw,15px)}
.actions button[data-action="jump"] kbd{font-size:clamp(12px,1.85cqw,16px)}
.actions .punch{width:clamp(50px,9.75cqw,88px);height:clamp(64px,9.75cqw,88px)}
@container(max-width:400px){#touch{--direction-size:40px;--control-gap:4px}.actions{display:grid;grid-template-columns:repeat(2,50px);gap:4px}.actions button,.actions .punch{width:50px;height:48px;gap:3px}.dpad span{font-size:14px}#touch kbd{font-size:17px}.actions button[data-action="jump"] kbd{font-size:12px}}

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