*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#09121b;color:#f5e8c9;font-family:Arial,Helvetica,sans-serif;touch-action:none}body{display:grid;place-items:center}#stage{position:relative;width:min(100vw,133.333333vh);height:min(75vw,100vh);aspect-ratio:4/3;overflow:hidden;background:#152833;box-shadow:0 0 90px #000}canvas{width:100%;height:100%;display:block}button{font:700 12px Arial;letter-spacing:.06em;border:1px solid #c0ba9d75;background:#142633;color:#f9eed5;cursor:pointer;padding:11px 16px;border-radius:3px}button:hover,button:focus-visible{background:#b74d31;outline:2px solid #f5ca77;outline-offset:2px}button:disabled{opacity:.4;cursor:default}#topbar{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:center;gap:10px;pointer-events:none}.brand{font-size:20px;font-weight:900;letter-spacing:-1px;color:#ffc980;text-shadow:0 2px 4px #07141c,1px 0 #07141c}.brand b{font-size:10px;letter-spacing:2px;margin-left:8px}#topbar button{pointer-events:auto;padding:8px 10px;font-size:10px}#topbar>div{display:flex;gap:8px}.panel{position:absolute;inset:64px 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:24px 7%;background:linear-gradient(90deg,#101e2af5 0%,#101e2aed 45%,#101e2a00 100%)}.panel.hidden{display:none}.eyebrow{font-size:11px;font-weight:800;letter-spacing:4px;color:#e99c61;margin:0 0 12px}h1{font-size:clamp(30px,6.7vw,72px);line-height:.92;letter-spacing:-3px;margin:0 0 12px;text-transform:uppercase;font-weight:950;text-shadow:3px 3px #8f3d2b}h2{font-size:clamp(25px,4.5vw,44px);margin:0 0 12px;text-transform:uppercase;letter-spacing:-1px}.panel p{max-width:460px;font-size:14px;line-height:1.5;margin:5px 0 14px;color:#c9d1cf}.choices,.buttons{display:flex;gap:9px;margin:8px 0;flex-wrap:wrap}.choice{padding:10px 14px;text-align:left;min-width:155px}.choice small{display:block;font-size:10px;font-weight:400;letter-spacing:.03em;margin-top:5px;color:#ced4cf}.choice.selected{background:#b04e34;border-color:#ffc27c}.primary{background:#eab56d;color:#132530;border-color:#eab56d;font-size:13px;padding:13px 25px}.hint{font-size:11px!important;color:#aab7b7!important;max-width:510px!important}.progress{font-size:10px;letter-spacing:1px;color:#e4ba7a;margin:5px 0}#touch{position:absolute;inset:auto 20px max(10px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;pointer-events:none;opacity:.82}#touch button{pointer-events:auto;touch-action:none;padding:0;background:#0d2338bd;border:1px solid #a4c6c681;user-select:none;-webkit-user-select:none;font-size:10px}#touch button.held{background:#d18c46;color:#10212e}.dpad{display:grid;grid-template-columns:repeat(3,43px);grid-template-rows:repeat(2,35px);gap:3px}.up{grid-area:1/2}.left{grid-area:2/1}.down{grid-area:2/2}.right{grid-area:2/3}.actions{display:flex;gap:7px;align-items:flex-end}.actions button{height:51px;width:57px;border-radius:50%!important}.actions .punch{background:#a04832c9!important;width:68px;height:62px}.actions .rally{height:37px;width:47px;font-size:8px!important}body.menu #touch{display:none}@media (orientation:portrait) and (max-width:600px){.panel{padding:8px 6%;inset:42px 0 0}.panel p{font-size:10px;margin:3px 0}.panel h1{font-size:34px}.panel h2{font-size:25px}.eyebrow{font-size:8px;margin-bottom:5px}.choice{min-width:120px;padding:6px}.buttons button{padding:7px;font-size:10px}}@media(max-height:500px){#topbar{top:7px}.panel{inset:40px 0 0;padding:10px 7%}.panel p{font-size:12px;margin:3px 0 7px}.panel h1{font-size:46px}.choice{padding:8px}.hint{font-size:10px!important}.eyebrow{margin-bottom:7px}.buttons{margin:4px 0}.dpad{grid-template-columns:repeat(3,38px);grid-template-rows:repeat(2,31px)}.actions button{height:45px;width:50px}.actions .punch{height:53px;width:58px}#touch{bottom:7px}}
.panel label{display:flex;align-items:center;gap:20px;margin:14px 0;font-size:14px}.actions .block{height:37px;width:47px;font-size:8px}
/* UI uses the same 800x600 logical presentation as the 2x canvas. */
#ui{position:absolute;left:0;top:0;width:800px;height:600px;transform-origin:0 0;pointer-events:none}
#ui .panel{pointer-events:auto}
#ui #topbar{top:12px;left:18px;right:18px}
#ui .panel{inset:58px 0 0;padding:22px 6%;overflow-y:auto;justify-content:flex-start}
#ui .panel h1{font-size:56px}#ui .panel h2{font-size:34px}
#ui .panel p{font-size:14px;margin:5px 0 12px;max-width:455px}
#ui .eyebrow{font-size:11px;margin-bottom:10px}
#ui .choices{gap:9px}#ui .choice{min-width:155px;padding:10px 14px}
#ui .buttons button{padding:11px 16px;font-size:12px}
#ui #touch{left:18px;right:18px;bottom:8px;opacity:1}
#ui .dpad{grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,39px);gap:4px}
#ui .actions{gap:8px}
#ui .actions button{height:74px;width:74px}#ui .actions .punch{height:80px;width:82px}
#ui .actions .block,#ui .actions .rally{height:66px;width:64px;font-size:12px!important}
#ui #touch button{font-size:13px;font-weight:800}
#ui .panel label{margin:10px 0}#ui .panel .hint{font-size:11px!important}
/* Keyboard hints fit in the reserved control band, outside the gameplay view. */
#touch button span,#touch button small{display:block}
#touch button small{margin-top:5px;font-size:12px;line-height:14px;color:#ffd99a;letter-spacing:0;font-weight:800}
#touch .dpad button small{margin-top:1px}
.level-list{width:100%;max-width:680px;margin:0 0 14px;padding:0;list-style:none}
.level-list li{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid #69838b50;font-size:12px}
.level-list b{min-width:180px;color:#f3dfb8}.level-list span{color:#b7c7c7}
.level-section{margin:14px 0 4px;font-size:16px;color:#ffc980}
.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}