:root{color-scheme:dark;font-family:"Courier New",monospace;color:#fff4d8;background:#152d32;--cream:#fff4d8;--pink:#ed82a9;--ink:#193d40}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
button{font:inherit;cursor:pointer;touch-action:none}
button:focus-visible{outline:3px solid var(--pink);outline-offset:4px}
#game{position:fixed;inset:0;width:100%;height:100%;height:100dvh;overflow:hidden;isolation:isolate;background:#9ed3e4}
canvas{width:100%;height:100%;display:block;image-rendering:pixelated;touch-action:none;outline:none}
.hud{position:absolute;inset:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:calc(20px + env(safe-area-inset-top)) max(27px,env(safe-area-inset-right)) 32px max(27px,env(safe-area-inset-left));pointer-events:none;background:linear-gradient(#14383a88,transparent);text-shadow:2px 2px #17333880}
.identity{display:flex;gap:9px;align-items:center}.identity img{image-rendering:pixelated;filter:drop-shadow(2px 3px #153a3b55)}.identity strong{font-size:22px;letter-spacing:1px;line-height:1}.identity strong>span{font-size:8px;vertical-align:super;margin-left:2px}.stage-label{display:flex;gap:9px;font-size:8px;letter-spacing:1.3px;margin-top:8px;color:#e8f1d4}.divider{opacity:.5}
.collectibles{display:flex;align-items:center;gap:8px;margin:8px 60px 0 0;font-size:17px;font-weight:bold}.honey-icon{color:#ffe39a;font-size:23px;text-shadow:2px 2px #b77c36}.run-meter{display:block;margin-left:15px;width:72px;height:5px;background:#1b4a4755;border-radius:2px;overflow:hidden}.run-meter>span{display:block;background:#fff1b5;width:0;height:100%;transition:width .08s linear}
.timing{text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;min-width:145px}.timer-label{display:flex;align-items:center;justify-content:flex-end;gap:11px;font-size:8px;letter-spacing:2px;margin-bottom:2px}.timer-label button{pointer-events:auto;border:0;background:transparent;color:var(--cream);font-size:20px;line-height:1;width:28px;height:28px;padding:0;text-shadow:inherit}.timing>output{display:block;font-size:31px;font-weight:700;letter-spacing:-1px;line-height:1}.timing>span{display:block;font-size:7px;letter-spacing:1px;margin-top:8px;opacity:.8}
.course-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#163d3a40;pointer-events:none}.course-progress>span{display:block;background:var(--pink);width:0;height:100%;box-shadow:0 0 12px #ed82a999}
.keyboard-hint{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:max(26px,env(safe-area-inset-left));display:flex;gap:24px;pointer-events:none;color:#fff6de;opacity:.85;font-size:8px;letter-spacing:1px;transition:opacity .6s;text-shadow:1px 1px #173c38}.keyboard-hint>span{display:flex;align-items:center;gap:5px}kbd{font:8px "Courier New",monospace;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;padding:3px 5px;border:1px solid #fff3d56b;border-radius:3px;background:#193e3f55}
.keyboard-hint.faded{opacity:0}.touch-controls{display:none;position:absolute;bottom:max(23px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));align-items:flex-end;justify-content:space-between;pointer-events:none;user-select:none;-webkit-user-select:none}
.direction-controls,.action-controls{display:flex;align-items:flex-end;gap:12px;pointer-events:auto}.touch-controls button{width:61px;height:61px;border:2px solid #fff3d586;border-radius:18px;background:#143d3e77;color:#fff4d8;font-size:21px;box-shadow:0 4px #17373866;user-select:none;-webkit-user-select:none}.touch-controls button.held{background:#ed82a9cc;transform:translateY(3px);box-shadow:0 1px #17373866}.touch-controls .run-button{width:52px;height:52px;margin-bottom:0;border-radius:50%;font-size:18px}.touch-controls .jump-button{width:71px;height:71px;margin-bottom:13px;border-radius:50%;background:#f0c487b3;color:#254044;border-color:#ffe5b8}.touch-controls button>span{display:block;font-size:6px;font-weight:bold;letter-spacing:1px;margin-top:2px}
.level-toast{position:absolute;top:32%;left:50%;transform:translate(-50%,8px);text-align:center;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;text-shadow:3px 3px #173d3f;white-space:nowrap}.level-toast.show{opacity:1;transform:translate(-50%,0)}.level-toast>span{display:block;font-size:9px;letter-spacing:2px;margin-bottom:10px}.level-toast>strong{display:block;font-size:clamp(24px,4vw,43px);letter-spacing:-1px}.level-toast>span:last-child{font-size:12px;letter-spacing:0;margin-top:10px;color:#ffe5a1}
.finish-card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 36px));max-height:calc(100% - 150px);overflow:auto;border:2px solid #d2b47e;background:#173e3ef5;box-shadow:8px 8px #11322e66;padding:30px;text-align:center;border-radius:5px}.finish-card[hidden],.pause-note[hidden]{display:none}.finish-eyebrow{font-size:7px;letter-spacing:1px;color:#edcb98}.finish-card h1{font:700 35px Arial,sans-serif;letter-spacing:-1px;margin:14px 0}.finish-card>output{font-size:46px;letter-spacing:-2px;font-weight:bold;color:#f1d499}.finish-card p{font-size:10px;line-height:1.6;color:#c4d8cb}.finish-card button{border:0;border-radius:3px;background:#edc486;color:#254044;min-height:45px;padding:10px 22px;margin-top:20px;font-size:11px;font-weight:bold;letter-spacing:1px}.finish-shortcut{display:block;font-size:8px;opacity:.6;margin-top:12px}#finish-splits{display:flex;gap:15px;justify-content:center;margin-top:23px}#finish-splits span{font-size:8px;line-height:1.9;color:#c4d8cb}#finish-splits b{display:block;font-size:13px;color:#f1d499}
.pause-note{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);padding:23px 27px;background:#173e3eed;border:1px solid #f5d89c;color:#f5d89c;font-size:12px;letter-spacing:1px;text-align:center;pointer-events:none;max-width:calc(100% - 30px)}.pause-note>span{display:block;font-size:9px;line-height:1.7;color:#d4e0cc;margin-top:10px;letter-spacing:0}.screen-reader{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(pointer:coarse),(hover:none){.touch-controls{display:flex}.keyboard-hint{display:none}}
@media(max-width:600px){.hud{padding:calc(15px + env(safe-area-inset-top)) 16px 30px;gap:8px}.identity{gap:6px}.identity img{width:27px;height:33px}.identity strong{font-size:16px}.stage-label{font-size:6px;letter-spacing:.5px;gap:5px;margin-top:7px}.collectibles{font-size:13px;margin:5px 0 0;gap:4px}.honey-icon{font-size:17px}.run-meter{display:none}.timing{min-width:100px}.timing>output{font-size:24px}.timer-label{font-size:6px;letter-spacing:1.2px;gap:5px}.timer-label button{font-size:20px;width:24px;height:22px}.timing>span{font-size:5px;letter-spacing:.3px;margin-top:6px}.touch-controls{left:max(13px,env(safe-area-inset-left));right:max(13px,env(safe-area-inset-right));bottom:max(23px,env(safe-area-inset-bottom))}.direction-controls,.action-controls{gap:9px}.touch-controls button{width:50px;height:56px;border-radius:15px}.touch-controls .jump-button{width:63px;height:63px}.touch-controls .run-button{width:45px;height:45px}.finish-card{padding:25px 15px}.finish-card>output{font-size:39px}.finish-card h1{font-size:31px}}
@media(max-height:480px){.hud{padding-top:max(9px,env(safe-area-inset-top))}.identity strong{font-size:16px}.identity img{width:25px;height:30px}.stage-label{font-size:6px;margin-top:5px}.timing>output{font-size:25px}.timer-label{font-size:6px}.timing>span{font-size:5px}.touch-controls{bottom:max(14px,env(safe-area-inset-bottom))}.touch-controls button{width:46px;height:46px}.touch-controls .jump-button{width:57px;height:57px;margin-bottom:0}.touch-controls .run-button{width:44px;height:44px}.finish-card{padding:15px;max-height:calc(100% - 35px)}.finish-card h1{margin:7px 0;font-size:25px}.finish-card>output{font-size:32px}.finish-card p{margin:5px 0}#finish-splits{margin-top:9px}.finish-card button{margin-top:10px;min-height:35px}.finish-shortcut{margin-top:6px}.keyboard-hint{bottom:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
