*{box-sizing:border-box;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101d2b;color:#e9f0ec;font-family:ui-monospace,SFMono-Regular,monospace}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}#stage{position:relative;width:100%;height:100%;overflow:hidden;touch-action:none}canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}header{position:absolute;z-index:3;top:max(18px,env(safe-area-inset-top));left:24px;right:24px;display:flex;align-items:center;gap:20px;text-shadow:0 2px 6px #000}.brand{font-size:15px;font-weight:900;letter-spacing:2px}.brand small{display:block;font-size:8px;letter-spacing:1px;color:#b0d2cc;margin-top:6px}#hud{flex:1;text-align:right;font-size:12px;letter-spacing:1px;color:#a8f0cd}#pause{border:1px solid #a3b8b355;background:#08101b99;width:48px;height:48px;flex-shrink:0}#overlay{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(90deg,#050b17e8,#08101d9c,#050b17c0);text-align:center;padding:24px}#overlay.hidden{display:none}.eyebrow{font-size:10px;letter-spacing:3px;color:#8ce3d2}h1{font-size:clamp(30px,7vw,80px);letter-spacing:.07em;margin:18px 0 0;text-shadow:3px 3px #ec704746}#message{max-width:580px;color:#c3d5d7;font-size:14px;line-height:1.7;margin:18px 0 26px}#start{padding:17px 24px;background:#ec9063;border:0;color:#171923;font-weight:bold;letter-spacing:1px;min-width:250px;min-height:54px}.instructions{font-size:10px;line-height:2.2;color:#8ca3ab;margin-top:24px}.instructions b{color:#d2dfdc;font-weight:400}footer{position:absolute;bottom:18px;left:26px;right:26px;font-size:8px;letter-spacing:2px;color:#8ba7ad;pointer-events:none}footer span{float:right}#notice{position:absolute;z-index:3;top:88px;left:16px;right:16px;text-align:center;color:#ffe2ac;font-size:11px;line-height:1.7;text-shadow:0 2px 5px #000;pointer-events:none}#touch{display:none;position:absolute;inset:0;z-index:4;pointer-events:none;touch-action:none}#stick{position:absolute;bottom:max(42px,env(safe-area-inset-bottom));left:24px;width:108px;height:108px;border:1px solid #ccebe355;border-radius:50%;background:#09121b88;pointer-events:auto;touch-action:none}#knob{position:absolute;left:33px;top:33px;width:40px;height:40px;border-radius:50%;border:1px solid #a6e4dd88;background:#6dbab055}#stick span{position:absolute;bottom:-20px;left:39px;font-size:8px;color:#abc5bf}.actions{position:absolute;right:24px;bottom:max(32px,env(safe-area-inset-bottom));display:grid;grid-template-columns:60px 60px;gap:9px}.actions button{pointer-events:auto;touch-action:none;border:1px solid #baded180;border-radius:50%;width:60px;height:60px;background:#102132d9;font-size:23px}.actions button:last-child{background:#955737cc;border-color:#eaad80}.actions small{display:block;font-size:7px;letter-spacing:.3px;margin-top:3px}@media(pointer:coarse){#touch{display:block}header{left:16px;right:16px;gap:10px}.brand{font-size:12px}#hud{font-size:10px}.instructions{font-size:9px}footer{display:none}}@media(max-width:550px){header{left:14px;right:14px;gap:7px}.brand{font-size:11px;letter-spacing:1px}.brand small{max-width:170px;line-height:1.5}#hud{font-size:9px;letter-spacing:0}#notice{top:88px;font-size:10px}.actions{right:16px;grid-template-columns:54px 54px;gap:8px}.actions button{width:54px;height:54px}#stick{left:20px;width:96px;height:96px}#knob{left:27px;top:27px}.instructions{font-size:8px;line-height:2}#message{font-size:13px}h1{font-size:32px}}@media(max-height:500px){header{top:10px}#notice{top:65px}.instructions{margin-top:12px}h1{margin-top:8px;font-size:30px}#message{margin:10px 0 14px;font-size:12px}.eyebrow{font-size:8px}.actions{bottom:14px}#stick{bottom:22px}}

#move-zone{position:absolute;left:0;bottom:0;width:50%;height:55%;min-height:180px;max-height:calc(100% - 85px);pointer-events:auto;touch-action:none}#stick{aspect-ratio:1 / 1;flex-shrink:0;pointer-events:none}#stick.active{border-color:#b3eadb88;background:#10212b99}#knob{aspect-ratio:1 / 1;flex-shrink:0}

.actions{display:block;right:12px;bottom:max(26px,env(safe-area-inset-bottom));width:156px;height:160px}.actions button{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0!important}.actions [data-action="jab"]{right:0;bottom:0;width:76px;height:76px;background:#955737e6;border:2px solid #eaad80}.actions [data-action="jump"]{right:58px;bottom:80px;width:72px;height:72px;background:#183c48e6;border:2px solid #b4dcd4}.actions [data-action="dodge"]{left:0;bottom:8px;width:48px;height:48px;background:#101c2bd9;border-color:#92a5a580}.actions svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.actions [data-action="dodge"] svg{width:20px;height:20px}.actions small{margin-top:4px;font-size:8px}.actions [data-action="dodge"] small{font-size:6px}.actions button.pressed{filter:brightness(1.35);transform:scale(.96)}@media(max-height:500px){.actions{bottom:14px;height:146px}.actions [data-action="jump"]{bottom:74px}}

#rotate-hint.hidden{display:none}@media(orientation:landscape) and (pointer:coarse){header{top:max(8px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}.brand{font-size:11px}#notice{top:62px;font-size:9px}.actions{right:max(22px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}#stick{left:max(30px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom))}#surface-settings{top:88px!important}#rotate-hint{display:none}}

@media(orientation:portrait){#game{top:50%;bottom:auto;width:100%;height:auto;aspect-ratio:16 / 9;transform:translateY(-50%)}#stage{background:#080a11}}

@media(orientation:portrait){#stage>canvas:not(#game){transform:translateY(-50%)}}