*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080a13;color:#f5f0e8;font-family:Arial,Helvetica,sans-serif;touch-action:none;user-select:none}body{display:flex;align-items:center;justify-content:center}#game{position:relative;width:min(100vw,133.333333vh);height:min(100vh,75vw);container-type:inline-size;overflow:hidden;background:#101222}canvas{width:100%;height:100%;display:block}button{font:700 12px Arial;letter-spacing:1.4px;color:#eee9e3;border:1px solid #8a7a9b;background:#181724;cursor:pointer;padding:13px 20px;transition:background .15s,transform .15s}button:hover,button:focus-visible{background:#4d385d;outline:2px solid #f8bb72;outline-offset:3px}button:active{transform:translateY(2px)}button.primary{background:#f8bc78;color:#201622;border-color:#f8bc78}button.primary:hover{background:#ffe0b5}#top{position:absolute;top:max(3%,env(safe-area-inset-top));right:max(2.5%,env(safe-area-inset-right));display:flex;gap:8px;z-index:5}#top button{padding:10px 13px;font-size:10px;background:#161522ce}#overlay{position:absolute;inset:0;display:flex;align-items:center;padding:5% 7%;background:linear-gradient(90deg,#0d0d1cf2 0%,#0f1023eb 38%,#10102240 78%);z-index:3}#overlay.hidden{display:none}.panel{width:60%;max-height:100%;overflow:auto;scrollbar-width:thin;padding:4px}.eyebrow{font-size:11px;letter-spacing:4px;color:#f6b673;font-weight:bold;margin:0 0 15px}h1{font-size:clamp(30px,5.6vw,76px);letter-spacing:-3px;line-height:.93;margin:0 0 16px;font-weight:900}h1 em{font-style:normal;color:#c3a4ff}h2{font-size:clamp(24px,3.5vw,46px);letter-spacing:-1px;line-height:1.05;margin:0 0 18px}.subtitle{font-size:clamp(13px,1.65vw,21px);letter-spacing:5px;margin:0 0 26px;color:#ebad79}.body{font-size:clamp(12px,1.35vw,17px);color:#bab7cf;line-height:1.65;max-width:480px;margin:10px 0 22px}.row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.small{font-size:11px;line-height:1.7;color:#a2a0bb;letter-spacing:.5px}.choice{padding:13px 17px;text-align:left;border-color:#4c4666}.choice.active{border-color:#bc9ff7;background:#302740}.choice span{display:block;font-size:9px;color:#b9b0c9;letter-spacing:.5px;margin-top:6px}.chapter-list{display:flex;gap:8px;margin:18px 0}.chapter-list button{padding:10px 14px}.chapter-list button:disabled{opacity:.3;cursor:default}.tutorial{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:12px;color:#bbb5d0;margin:22px 0}.tutorial b{display:block;color:#f4c290;margin-bottom:5px}.stat{font-size:35px;color:#f9c68c;margin:12px 0}.tag{color:#c0a1f5}.confirm{color:#f3b97e}#touch{display:none;position:absolute;inset:0;pointer-events:none;z-index:2}#touch.visible{display:block}#stick{pointer-events:auto;position:absolute;left:max(4%,env(safe-area-inset-left));bottom:max(6%,env(safe-area-inset-bottom));width:110px;height:110px;border-radius:50%;border:1px solid #c7acf367;background:#17152780}#stick:before,#stick:after{content:'';position:absolute;background:#bea3d624}#stick:before{width:1px;height:100%;left:50%}#stick:after{height:1px;width:100%;top:50%}#stick span{position:absolute;left:35px;top:35px;width:40px;height:40px;border-radius:50%;background:#c9b1ed6e;border:1px solid #dbc6ff}#actions{position:absolute;right:max(3%,env(safe-area-inset-right));bottom:max(5%,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,59px);gap:8px;align-items:end}#actions button{pointer-events:auto;width:59px;height:52px;border-radius:16px;background:#211a37b9;border-color:#ad95c878;padding:0;font-size:9px;letter-spacing:.7px}#actions button[data-action=punch]{grid-column:3;background:#f5b779c9;color:#261723;height:63px}#actions button[data-action=kick]{grid-column:2}#rotate{display:none;position:absolute;bottom:5%;left:10%;right:10%;text-align:center;font-size:12px;color:#e6c6ff;pointer-events:none;z-index:6}@media(pointer:coarse){#top button{padding:8px;font-size:9px}}@media(max-height:500px){#overlay{padding:4% 6%}.eyebrow{margin-bottom:8px;font-size:9px}h1{font-size:44px}.subtitle{margin-bottom:12px;font-size:12px}.body{margin:8px 0 12px;line-height:1.4;font-size:12px}button{padding:10px 13px;font-size:10px}.row{margin:8px 0}.small{font-size:9px}.tutorial{margin:10px 0;gap:8px;font-size:10px}#stick{width:92px;height:92px}#stick span{left:26px;top:26px}#actions{grid-template-columns:repeat(3,49px);gap:5px}#actions button{width:49px;height:42px}#actions button[data-action=punch]{height:49px}}@media(orientation:portrait){#rotate{display:block}.panel{width:80%}#overlay{padding:4%}h1{font-size:28px}.body{font-size:10px;margin:6px 0}.row{margin:5px 0}button{font-size:8px;padding:6px}.eyebrow,.small{font-size:8px}.subtitle{font-size:10px;margin:8px 0}.choice span{font-size:7px}#top button{font-size:7px;padding:5px}}

.audio-controls{display:flex;gap:24px;margin-top:16px;color:#c6b8d9;font-size:12px}.audio-controls label{display:flex;flex-direction:column;gap:8px}.audio-controls input{width:160px;accent-color:#edb578}

/* Size controls and menu to the letterboxed 4:3 game, including narrow screens. */
.panel{width:69%}.chapter-list{gap:5px;flex-wrap:wrap}.chapter-list button{padding:8px 10px}.audio-controls{flex-wrap:wrap;gap:12px}.audio-controls input{width:min(160px,36cqw)}
#stick{width:clamp(72px,14cqw,110px);height:clamp(72px,14cqw,110px);bottom:max(9%,env(safe-area-inset-bottom))}#stick span{left:calc(50% - 20px);top:calc(50% - 20px)}#actions{grid-template-columns:repeat(3,clamp(40px,7.4cqw,59px));gap:clamp(4px,1cqw,8px);bottom:max(9%,env(safe-area-inset-bottom))}#actions button{width:clamp(40px,7.4cqw,59px);height:clamp(40px,6.5cqw,52px)}#actions button[data-action=punch]{height:clamp(45px,7.9cqw,63px)}
@container(max-width:560px){#overlay{padding:4%}.panel{width:78%}h1{font-size:32px}h2{font-size:24px}.eyebrow{letter-spacing:2px;font-size:8px}.subtitle{margin:8px 0;font-size:10px}.body{font-size:11px;line-height:1.4;margin:8px 0}.small{font-size:9px}.row{gap:5px;margin:6px 0}button{font-size:9px;padding:8px}.choice span{font-size:7px}.chapter-list{margin:8px 0}.chapter-list button{padding:6px}.tutorial{font-size:10px;gap:8px;margin:10px 0}#top button{font-size:8px;padding:6px}#rotate{font-size:9px;bottom:1%}}

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