*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}button{padding:0 17px;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #ffe0a3;outline-offset:4px}[hidden]{display:none!important}.overlay{position:absolute;inset:0;overflow:auto}#stage{height:100vh;height:100dvh}
:root{color-scheme:dark;--accent:#e7bb70}body{font-family:Arial,Helvetica,sans-serif;background:#12242e;color:#f1f1e4}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}#stage{position:fixed;inset:0;overflow:hidden;background:#12242e}#view{width:100%;height:100%;display:block;touch-action:none}header{position:absolute;top:max(18px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;z-index:3}.brand{display:grid;gap:5px}.brand>span{font-size:9px;letter-spacing:3px;color:#a6bbc1}.brand>b{font-size:16px;letter-spacing:1.5px}#health{display:flex;gap:4px;margin-top:4px}#health i{width:17px;height:9px;background:#ee8798;border:1px solid #ffd2d6;transform:skew(-10deg)}#health i.empty{opacity:.22}.distance{text-align:center;position:absolute;left:50%;transform:translateX(-50%);display:grid;gap:3px}.distance strong{font-size:35px;font-variant-numeric:tabular-nums;line-height:1}.distance>span{font-size:8px;letter-spacing:3px;color:#d2dee0}.distance small{font-size:10px;margin-top:3px;color:#f2c37f}.tools{display:flex;gap:8px;pointer-events:auto}.tools button{min-width:44px;min-height:44px;border-radius:14px;background:#142c36b8;border:1px solid #8fadb247;color:#e5edeb;font-size:11px}.tools #pause{font-size:21px}#sector{position:absolute;left:50%;top:max(99px,calc(env(safe-area-inset-top) + 85px));transform:translateX(-50%);text-align:center;display:grid;gap:8px;z-index:3;pointer-events:none}#district{font-size:9px;letter-spacing:2px;color:#b6c8cf}#streak{font-size:11px;letter-spacing:1px;color:#ffd293}#power{font-size:10px;color:#8ce2e1}#announcement{position:absolute;top:25%;left:10%;width:80%;text-align:center;font-size:18px;font-weight:800;letter-spacing:2px;pointer-events:none;z-index:4;text-shadow:0 3px 10px #10141c}#flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 30%,#bc315a);opacity:0;z-index:3}
#controls{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));display:flex;justify-content:space-between;gap:18px;z-index:5;pointer-events:none}.lanes,.actions{display:flex;gap:10px;pointer-events:auto}#controls button{width:72px;height:70px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid #a9c9cf50;background:linear-gradient(#183642ce,#13232dc9);color:#e5efec;border-radius:22px;touch-action:none;user-select:none}#controls .lanes button{font-size:42px;line-height:1}#controls button span{font-size:26px;line-height:1.2}#controls button b{font-size:9px;letter-spacing:1px}#controls button.jump{border-color:#e7bd7a85;background:#554533d9;color:#ffdc9b}#controls button.pressed{transform:translateY(2px);background:#658889bd;border-color:#dcefe8}.overlay{z-index:8;background:linear-gradient(90deg,#10212cee,#10212c8c 54%,#10212c22);backdrop-filter:blur(1px);display:flex;align-items:center;justify-content:flex-start;padding:clamp(25px,7vw,105px)}.overlay[hidden]{display:none}.intro-card{width:min(470px,90%)}.eyebrow{color:#edc184;font-size:10px;letter-spacing:2.6px;font-weight:800}h1{font-size:clamp(54px,6.9vw,100px);line-height:.89;letter-spacing:-5px;margin:22px 0}h1 em{font-style:normal;color:#ebbf7d}.lede{font-size:17px;line-height:1.5;color:#d5e1e2}.instructions{font-size:11px;line-height:1.8;color:#d9e8e8;margin:24px 0 12px}.tip{font-size:11px;line-height:1.6;color:#93aeb9;margin-bottom:25px}.primary{background:#e7bd7d;color:#16262b;border:0;border-radius:13px;min-height:52px;font-weight:900;letter-spacing:1.5px;width:100%;font-size:13px}.primary:disabled{opacity:.6}.links{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.links button,.modal>button:not(.primary){border:1px solid #95b2bb4b;background:#142d3788;border-radius:10px;color:#d7e7e5;min-height:42px;padding:10px 20px}a{color:#bdcecf;font-size:11px;text-decoration:none}.fine{font-size:10px;line-height:1.6;color:#9ab5ba;margin-top:16px}.mobile{display:none}.modal{width:min(440px,100%);padding:34px;border:1px solid #90b3bd4d;border-radius:24px;background:#122c37ed;box-shadow:0 20px 90px #050a1477;display:grid;gap:15px;text-align:center;margin:auto}.modal h2{font-size:33px;line-height:1.1;margin:4px 0}.modal p{margin:0;line-height:1.5;font-size:12px}.modal a{padding:10px}.modal #result-distance{font-size:49px;color:#efc581;letter-spacing:-2px}.modal #result-score{color:#d0e9e8;font-size:14px}#result,#pause-menu,#context-message{justify-content:center;background:#10202bb8;backdrop-filter:blur(8px)}body:not(.playing) #controls{opacity:0;pointer-events:none}body:not(.playing) #controls button{pointer-events:none}
@media (pointer:fine){#controls{opacity:.5}#controls button{width:55px;height:48px;border-radius:12px}#controls .lanes button{font-size:30px}#controls button span{font-size:18px}}
@media (pointer:coarse){.desktop{display:none}.mobile{display:inline}}
@media(max-width:650px){header{top:max(15px,env(safe-area-inset-top));left:max(15px,env(safe-area-inset-left));right:max(15px,env(safe-area-inset-right))}.brand>b{font-size:11px}.brand>span{font-size:7px;letter-spacing:2px}.distance strong{font-size:29px}.distance{top:55px}.tools{gap:6px}.tools button{min-width:42px;min-height:42px}.overlay{padding:28px;align-items:center;background:linear-gradient(90deg,#10212cf2,#10212cbd 60%,#10212c70)}.intro-card{width:100%;max-width:390px}h1{font-size:62px;letter-spacing:-3px;margin:18px 0}.lede{font-size:15px}.instructions{margin-top:17px}.tip{font-size:10px}.eyebrow{font-size:8px;letter-spacing:1.7px}#sector{top:max(143px,calc(env(safe-area-inset-top) + 129px));width:90%}#controls{left:12px;right:12px;bottom:max(19px,env(safe-area-inset-bottom));gap:10px}.lanes,.actions{gap:7px}#controls button{width:calc((100vw - 55px)/4);max-width:84px;height:76px;border-radius:22px}.modal{padding:26px}.modal h2{font-size:29px}}
@media(max-height:500px){header{top:max(9px,env(safe-area-inset-top))}.distance{top:0}.distance strong{font-size:26px}#sector{top:73px}#controls{bottom:max(9px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}#controls button{width:62px;height:55px;border-radius:17px}.overlay{padding:20px 36px}.intro-card{display:grid;grid-template-columns:1fr 1fr;column-gap:38px;width:100%;max-width:760px}.intro-card>.eyebrow{grid-column:1;margin:0}h1{grid-column:1;grid-row:2 / 5;font-size:59px;margin:14px 0}.lede{grid-column:1;grid-row:5;font-size:12px;margin:0}.instructions{grid-column:2;grid-row:1 / 3;margin:0;align-self:end}.tip{grid-column:2;grid-row:3;font-size:10px;margin:10px 0}.primary{min-height:44px}.intro-card>.primary{grid-column:2;grid-row:4}.links{grid-column:2;grid-row:5;margin-top:8px}.intro-card>.fine{grid-column:1 / 3;margin:10px 0 0;font-size:8px}.modal{padding:20px 28px;gap:9px;max-width:540px}.modal h2{font-size:27px}.modal>button{min-height:37px;padding:7px}.modal #result-distance{font-size:32px}.modal .fine{font-size:9px}.modal a{padding:4px}}
@media(prefers-reduced-motion:reduce){button{transition:none!important}}
.distance #score{font-size:10px;font-weight:400;letter-spacing:1px}.overlay .primary:hover{background:#f4d297}.mobile{line-height:1.8}#announcement{right:auto}
.mobile-setting{display:none}.instructions>.control-mode{margin-top:8px;min-height:44px;padding:10px 15px;border:1px solid #95b2bb4b;border-radius:10px;background:#142d3788;color:#d7e7e5;font-size:11px}
@media(pointer:coarse){.mobile-setting{display:block}body[data-touch-controls="swipe"] #controls{display:none}}