:root{color-scheme:dark;--bg:#171c18;--cream:#edeedb;--muted:#abb69b;--orange:#f5aa73;--mono:"Courier New",monospace;--blue:#69c9fa;--red:#ff7777;--gray:#a6aaa5}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--cream);font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--orange);outline-offset:4px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page{max-width:1184px;padding:0 40px;margin:auto}.site-header{height:76px;display:flex;align-items:center}.brand{font:700 20px var(--mono)}.game-frame{border:1px solid #48503e;background:#172318;box-shadow:0 15px 60px #0002}.stage{position:relative;width:100%;min-width:0;aspect-ratio:16/9;overflow:hidden;background:#26362c;isolation:isolate}#game{display:block;position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;outline-offset:-3px}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px #07130c44;z-index:1}.screen{position:absolute;inset:0;z-index:3}.start-screen{background:linear-gradient(90deg,#14221cf5,#17261ded 27%,#18291da0 48%,transparent 78%);display:flex;align-items:center;padding:3% 6%}.start-content{width:45%;max-width:345px}.game-title{margin:0;line-height:0}#title-art{display:block;width:255px;max-width:100%;height:auto;image-rendering:pixelated}.game-description{font-size:12px;letter-spacing:.5px;line-height:1.5;color:#d9ddc7;margin:12px 0 16px}
.start-scores{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;padding-block:12px;border-block:1px solid #b9c59c38;font:11px var(--mono)}.start-scores>span{display:flex;align-items:center;gap:8px;white-space:nowrap}.start-scores i{display:block;width:calc(5px * var(--size,1));height:calc(5px * var(--size,1));flex-shrink:0;background:var(--candy-color)}.start-scores strong{margin-left:auto;font-weight:400;color:var(--candy-color)}.blue{--candy-color:var(--blue)}.orange{--candy-color:#ffad50;--size:2}.red{--candy-color:var(--red);--size:3}.gray{--candy-color:var(--gray);--size:3}.personal-best{display:flex;align-items:baseline;gap:7px;margin:15px 0;color:var(--muted);font:10px var(--mono)}.personal-best>span:first-child{letter-spacing:1px;margin-right:auto}.personal-best strong{font-size:22px;font-weight:400;color:var(--cream)}
.button{border:0;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:43px;padding:0 17px;font:700 12px var(--mono);letter-spacing:1px;transition:background .15s,transform .15s}.button:hover{transform:translateY(-2px)}.button:active{transform:translateY(1px)}.button-primary{background:var(--orange);color:#272c20;box-shadow:3px 3px 0 #764c33}.button-primary:hover{background:#ffc18d}.button>span:last-child{font-size:19px;font-weight:400}.start-content>.button{width:100%}.start-hint{font:9px var(--mono);margin:12px 0 16px;color:var(--muted)}.keyboard-guide{display:flex;flex-wrap:wrap;align-items:center;gap:7px 15px;font:9px var(--mono);color:#c0c9af}.keyboard-guide>span{display:flex;align-items:center;gap:3px}kbd{display:inline-flex;justify-content:center;align-items:center;min-width:16px;height:18px;padding:0 3px;border:1px solid #6b785c;border-bottom-width:2px;border-radius:2px;font:9px var(--mono);color:#d5ddc3}.sound-button{position:absolute;top:19px;right:66px;z-index:6;border:0;background:#172a1c88;padding:5px 7px;display:flex;gap:5px;align-items:center;font:9px var(--mono);letter-spacing:.4px;color:#d6ddc4}.sound-button:hover{color:var(--orange)}
.hud{position:absolute;inset:0 0 auto;padding:19px 23px;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;background:linear-gradient(#102018ba,transparent)}.hud-score,.hud-time{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);text-shadow:2px 2px #14231a}.hud-score>span,.hud-time>span{font-size:9px;letter-spacing:2px;color:#e1e5cb}.hud strong{font-size:30px;letter-spacing:2px;line-height:1.1}.hud-time{align-items:center;position:absolute;left:50%;transform:translateX(-50%)}.hud-time strong span{font-size:20px}.time-track{height:3px;width:90px;background:#ecedcb30;margin-top:4px}.time-track i{display:block;height:100%;width:100%;background:var(--orange);transform-origin:left}.hud-time.urgent strong{color:#ff7777}.icon-button{border:1px solid #d0d8b945;background:#1b3023b0;padding:5px 8px;color:#e7ead4;font:18px var(--mono);pointer-events:auto}.centered{display:flex;align-items:center;justify-content:center;flex-direction:column}.countdown{background:#15291f55;backdrop-filter:blur(1px)}.countdown strong{font:700 clamp(65px,12vw,120px) var(--mono);color:var(--orange);text-shadow:5px 5px #243724;margin:0}.go-label{position:absolute;z-index:2;top:35%;left:50%;transform:translateX(-50%);font:700 65px var(--mono);letter-spacing:4px;color:var(--orange);text-shadow:4px 4px #243724;pointer-events:none;animation:go .65s both}@keyframes go{0%{opacity:0;scale:.8}25%{opacity:1;scale:1.1}80%{opacity:1}100%{opacity:0;translate:0 -15px}}.pause-screen{background:#13251de8;backdrop-filter:blur(3px);gap:25px}.pause-screen h2{font:700 27px var(--mono);letter-spacing:4px;margin:0}.pause-screen>.button{width:190px}
.result-screen{background:#101e16ba;backdrop-filter:blur(3px)}.result-panel{width:410px;max-width:92%;max-height:calc(100% - 20px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#657353 transparent;text-align:center;padding:23px;background:#1b2a20ee;border:1px solid #576247;box-shadow:7px 7px #101b16aa}.result-panel h2{font:700 17px var(--mono);letter-spacing:3px;margin:0}.result-score{font-family:var(--mono);margin:10px 0 0;display:flex;justify-content:center;align-items:baseline;gap:8px}.result-score strong{font-size:60px;letter-spacing:-2px;line-height:1.1;font-weight:400;color:var(--orange)}.result-score>span{font-size:14px;color:#a6b296}.record-badge{font:10px var(--mono);letter-spacing:1px;color:#d5dfbc;margin:9px 0 16px}.result-breakdown{display:flex;justify-content:center;gap:18px;padding:12px 0;border-block:1px solid #4a553d;font:11px var(--mono);color:#cad3bb}.result-breakdown>span{display:flex;align-items:center;gap:6px}.result-breakdown i{display:inline-block;width:5px;height:5px;background:var(--candy-color)}.result-actions{display:flex;gap:10px;margin-top:18px}.result-actions>.button{flex:1;padding:0 12px;font-size:11px;min-height:40px;letter-spacing:.5px;gap:7px}.button-secondary{background:transparent;border:1px solid #657353;color:#e3e8cf}.button-secondary:hover{background:#34432c}.share-links{display:flex;align-items:center;justify-content:center;gap:11px;color:#7e8c71;margin-top:17px}.share-links button{padding:0;background:none;border:0;color:#b9c6a4;font:10px var(--mono)}.share-links button:hover{color:var(--orange)}#share-status{font-size:10px;color:var(--orange);margin:10px 0 0;min-height:12px}#share-fallback{width:100%;margin-top:8px;padding:8px;background:var(--bg);border:1px solid #576247;font-size:11px;color:var(--cream);resize:none}
.touch-controls{display:none;position:absolute;z-index:2;bottom:0;left:0;right:0;justify-content:space-between;align-items:center;gap:10px;height:62px;padding:8px 10px;background:#17271de8;user-select:none;-webkit-user-select:none;touch-action:none}.touch-controls>div{display:flex;gap:8px}.touch-controls button{width:58px;height:44px;background:#263024;border:1px solid #536044;border-bottom:3px solid #536044;font:24px var(--mono);touch-action:none;user-select:none}.touch-controls button.pressed{background:#465b38;translate:0 2px;border-bottom-width:1px}.touch-controls .touch-jump{width:104px;font-size:12px;color:var(--orange);display:flex;justify-content:space-around;align-items:center;letter-spacing:1px}.touch-jump span{font-size:24px}footer{padding:20px 0 26px;text-align:center;color:#9aa68d;font:11px var(--mono)}
@media(min-width:1400px){.page{max-width:1264px}.site-header{height:82px}.start-content{max-width:365px}#title-art{width:280px}.game-description{margin-block:16px 19px}.personal-best{margin-block:20px}.start-scores{gap:12px 20px;padding-block:15px}}
@media(max-width:950px){.page{padding:0 24px}.site-header{height:66px}.start-screen{padding:3% 5%}.start-content{width:46%}#title-art{width:190px}.game-description{font-size:10px;margin:8px 0 10px}.start-scores{font-size:9px;gap:8px 10px;padding-block:9px}.personal-best{margin-block:10px;font-size:8px}.personal-best strong{font-size:18px}.button{min-height:36px;font-size:11px}.start-hint{font-size:8px;margin-block:10px}.keyboard-guide{font-size:8px;gap:5px 9px}kbd{height:16px;font-size:8px;min-width:14px}.result-panel{padding:17px}.result-score strong{font-size:48px}}
@media(pointer:coarse),(max-width:640px){.touch-controls{display:flex}.stage.game-active{aspect-ratio:16/9;box-sizing:content-box;padding-bottom:62px}.stage.game-active #game{height:calc(100% - 62px)}}
@media(max-width:640px){.page{padding:0 14px}.site-header{height:58px}.brand{font-size:17px}.stage{aspect-ratio:auto;height:470px}.stage #game{object-fit:cover}.stage.game-active{height:auto;aspect-ratio:16/9}.stage.game-active #game{object-fit:fill}.start-screen{padding:24px;align-items:center;background:linear-gradient(90deg,#14221cf5,#17261de6 50%,#18291d65)}.start-content{width:100%;max-width:300px}#title-art{width:210px}.game-description{font-size:11px;margin:14px 0}.start-scores{font-size:11px;gap:11px 16px;padding-block:13px}.personal-best{font-size:10px;margin-block:16px}.personal-best strong{font-size:22px}.start-content>.button{min-height:41px}.start-hint{font-size:9px;margin-block:13px}.keyboard-guide{font-size:9px;gap:7px 12px}kbd{height:18px;font-size:9px;min-width:16px}.sound-button{top:12px;right:48px;font-size:7px;padding:4px;gap:3px}.sound-button svg{width:12px;height:12px}.hud{padding:10px 12px}.hud strong{font-size:22px}.hud-score>span,.hud-time>span{font-size:7px;letter-spacing:1px}.hud-time strong span{font-size:15px}.time-track{width:65px;margin-top:1px}.icon-button{padding:3px 5px;font-size:16px}.go-label{font-size:40px;top:22%}.pause-screen{gap:15px}.pause-screen h2{font-size:22px}.pause-screen>.button{width:160px;min-height:36px}.countdown strong{font-size:70px}.result-panel{width:320px;padding:17px}.result-panel h2{font-size:15px}.result-score strong{font-size:49px}.record-badge{font-size:9px}.result-breakdown{gap:13px;font-size:10px}.result-actions{gap:8px;margin-top:16px}.result-actions>.button{font-size:10px;min-height:38px;padding-inline:10px}.share-links{gap:9px}.share-links button{font-size:9px}footer{padding-block:16px 22px;font-size:10px}}
@media(max-width:360px){.page{padding:0 10px}.start-screen{padding:20px}#title-art{width:195px}.start-scores{font-size:10px;gap:10px 13px}.stage{height:460px}.sound-button{font-size:6px}.touch-controls{padding-inline:8px}.touch-controls button{width:51px}.touch-controls .touch-jump{width:95px}.result-panel{padding:14px}.result-actions>.button{font-size:9px}.share-links{gap:7px}.share-links button{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.result-message{font:700 16px/1.4 var(--mono);color:var(--red);letter-spacing:.5px;margin:12px 0}.contact-failure .result-score strong{color:var(--red)}
@media(max-width:640px){.stage.game-active #sound-label{display:none}}