:root{color-scheme:light;--ink:#103e58;--soft:#47798b;--blue:#078acb;--orange:#ff6c2e;--orange-dark:#da4c19;--panel:rgba(248,253,255,.94);--top:env(safe-area-inset-top,0px);--bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:#8ed4ef;color:var(--ink);font-family:"Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;user-select:none;-webkit-user-select:none;overscroll-behavior:none}button,a{font:inherit;touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{opacity:.65;cursor:default}button:focus-visible,a:focus-visible{outline:4px solid #ffb52db3;outline-offset:3px}.hidden{display:none!important}#game{position:relative;width:100%;height:100%;height:100dvh;min-height:280px;overflow:hidden;isolation:isolate}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.tools{position:absolute;z-index:10;right:max(14px,env(safe-area-inset-right));top:calc(14px + var(--top));display:flex;gap:7px}.icon-button{width:44px;height:44px;border:2px solid #ffffffaa;border-radius:50%;background:#f8fdffeb;box-shadow:0 6px 20px #1655731f;display:grid;place-items:center}.icon-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-button.muted{opacity:.6}.icon-button.muted:after{content:"";position:absolute;width:23px;height:2px;background:var(--ink);transform:rotate(-45deg)}
.screen{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;padding:max(22px,var(--top)) max(16px,env(safe-area-inset-right)) max(22px,var(--bottom)) max(16px,env(safe-area-inset-left));background:linear-gradient(#76c8ed1a,#effafe52)}.panel{width:min(92vw,460px);max-height:100%;overflow:auto;touch-action:pan-y;overscroll-behavior:contain;padding:clamp(24px,6vw,40px) clamp(20px,6vw,38px) clamp(21px,5vw,32px);border:2px solid #fffffff5;border-radius:30px;background:var(--panel);box-shadow:0 20px 60px #1c5c7a38,inset 0 1px 0 #fff;text-align:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.eyebrow{margin:0 0 8px;color:var(--orange);font-size:.76rem;font-weight:1000;letter-spacing:.2em;text-transform:uppercase}h1,h2{margin:0;font-weight:1000;line-height:.84;letter-spacing:-.072em;text-shadow:0 3px 0 #fff;text-transform:uppercase}h1{font-size:clamp(2.55rem,11vw,4.8rem)}h2{font-size:clamp(2.5rem,10vw,4rem)}h1 span,h2 span{display:block;margin-top:11px;color:var(--blue);font-size:.47em;letter-spacing:.075em}.tagline{max-width:330px;margin:18px auto;color:var(--soft);font-size:clamp(.9rem,3.4vw,1.02rem);font-weight:700;line-height:1.4}.how-to{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:15px}.how-to>div{padding:10px 5px 9px;border-radius:13px;background:#103e580f;color:var(--soft);font-size:.64rem;font-weight:900;line-height:1.25}.how-to b{display:grid;place-items:center;width:25px;height:25px;margin:0 auto 6px;border-radius:50%;background:white;color:var(--blue);font-size:.8rem;box-shadow:0 2px 0 #103e581a}.help{color:var(--soft);font-size:.67rem;font-weight:800;line-height:1.5;margin:12px 0 18px}.actions{display:grid;gap:11px}.button{display:flex;align-items:center;justify-content:center;min-height:55px;padding:13px 24px;border:0;border-radius:16px;text-decoration:none;font-size:1rem;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;transition:transform .12s,box-shadow .12s,background .12s}.primary{color:#fff;background:var(--orange);box-shadow:0 6px 0 var(--orange-dark),0 12px 24px #da4c1938}.primary:hover{background:#ff7b40}.primary:active{transform:translateY(3px) scale(.99);box-shadow:0 2px 0 var(--orange-dark)}.secondary{min-height:47px;color:var(--soft);background:#103e5812}.secondary:hover{background:#103e581c}.best{color:var(--soft);font-size:.63rem;font-weight:900;line-height:1.5;letter-spacing:.05em;margin:17px 0 0}.best b{color:var(--ink);margin-left:5px}.result{margin:17px 0 9px}.result>span{font-size:.7rem;font-weight:900;color:var(--soft);letter-spacing:.12em}.result>strong{display:block;color:var(--blue);font-size:clamp(3rem,15vw,5.1rem);font-weight:1000;letter-spacing:-.07em;line-height:1.1}.stats{display:flex;justify-content:center;gap:15px;color:var(--soft);font-size:.62rem;font-weight:900}.stats b{color:var(--ink)}#record{margin:14px 0 20px}
#hud{position:absolute;inset:0;pointer-events:none}.score-row{position:absolute;top:calc(14px + var(--top));left:max(14px,env(safe-area-inset-left));display:flex;gap:7px}.chip{border:2px solid #103e581a;background:#f8fdffdc;box-shadow:0 6px 20px #1655731f;border-radius:999px;padding:11px 14px;text-align:center;backdrop-filter:blur(7px)}.chip strong{font-size:1.3rem;font-weight:1000;line-height:1;letter-spacing:-.04em}.chip span{margin-left:4px;font-size:.6rem;color:var(--soft);font-weight:1000;letter-spacing:.07em;text-transform:uppercase}.pace{position:absolute;top:calc(17px + var(--top));left:50%;transform:translateX(-50%);width:190px;border:2px solid #103e581a;border-radius:16px;background:#f8fdffdc;padding:9px 13px;box-shadow:0 6px 20px #1655731f}.pace>div:first-child{display:flex;justify-content:space-between;align-items:center;font-size:.59rem;letter-spacing:.08em;color:var(--soft)}.pace b{color:var(--ink)}.track{height:6px;overflow:hidden;border-radius:99px;background:#103e581a;margin-top:6px}.track i{display:block;width:100%;height:100%;transform-origin:left;border-radius:inherit;background:linear-gradient(90deg,#16a9df,#ffb424,#ff642a)}.hint{position:absolute;top:calc(78px + var(--top));left:50%;transform:translateX(-50%);font-size:.64rem;font-weight:900;color:var(--soft);white-space:nowrap;padding:8px 13px;background:#f8fdffd9;border:1px solid #fff9;border-radius:99px}.controls{position:absolute;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(20px,var(--bottom));display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.steer{display:flex;gap:9px;pointer-events:auto}.steer button{display:grid;place-items:center;width:64px;height:61px;border:2px solid #ffffffa6;border-radius:17px;color:white;background:var(--blue);box-shadow:0 5px 0 #05638c,0 9px 18px #103e5826;font-size:3rem;font-weight:900;line-height:.8;touch-action:none}.steer button:active,.steer button.active{background:#20a3da;transform:translateY(2px);box-shadow:0 2px 0 #05638c}.jump-button{min-width:156px;min-height:65px;flex-direction:column;gap:4px;pointer-events:auto;touch-action:none}.jump-button b{font-size:.95rem}.jump-button span{font-size:.51rem;letter-spacing:.06em}.jump-button.airborne{background:var(--blue);box-shadow:0 5px 0 #05638c}.callout{position:absolute;z-index:4;top:21%;left:50%;max-width:95%;width:max-content;transform:translateX(-50%);opacity:0;transition:opacity .15s;color:#fff;font-size:clamp(1.1rem,4vw,2rem);font-weight:1000;text-shadow:0 3px 0 #0a456240,0 8px 20px #0a456233;text-align:center;text-transform:uppercase;pointer-events:none}.callout.show{opacity:1}.load-error{position:absolute;bottom:12px;left:12px;right:12px;z-index:20;background:white;padding:13px;border-radius:12px;font-size:12px}.load-error button{border:0;background:none;text-decoration:underline}
@media(max-width:700px){.score-row{gap:6px}.chip{padding:11px 10px}.chip strong{font-size:1.1rem}.chip span{font-size:.48rem}.pace{left:14px;top:calc(73px + var(--top));transform:none;width:153px;padding:8px 10px}.pace>div:first-child{font-size:.51rem}.hint{left:auto;right:14px;top:calc(78px + var(--top));transform:none;font-size:.48rem;padding:7px 9px}.steer button{width:54px;height:56px;font-size:2.6rem}.jump-button{min-width:135px;min-height:60px;padding:11px 18px}.jump-button b{font-size:.87rem}.jump-button span{font-size:.45rem}.callout{top:21%;font-size:1.2rem}.stats{gap:12px;font-size:.59rem}}
@media(max-height:650px){.panel{padding:20px 25px}.tagline{margin:12px auto;font-size:.84rem}.help{margin:10px 0 15px;font-size:.62rem}.best{margin-top:13px}.how-to{margin-bottom:12px}.button{min-height:48px;padding:10px 18px}}
@media(max-height:610px){.panel{width:min(90vw,560px);padding:17px 24px}h1{font-size:clamp(2.25rem,12vh,3.5rem)}h2{font-size:2.5rem}.tagline{margin:9px auto 11px;font-size:.8rem}.actions{grid-template-columns:1.35fr 1fr}.button{min-height:46px;padding:9px 17px}.result>strong{font-size:2.8rem}.result{margin:12px 0}.best{font-size:.59rem}}
@media(max-height:500px) and (orientation:landscape){.screen{padding-top:max(12px,var(--top));padding-bottom:max(12px,var(--bottom))}.panel{width:min(80vw,650px);padding:16px 25px}h1{font-size:2.7rem}h2{font-size:2.25rem}.tagline{max-width:450px;font-size:.75rem}.how-to{display:none}.help{font-size:.58rem;margin:10px 0 14px}.best{margin-top:12px;font-size:.54rem}.hint{top:calc(76px + var(--top))}.controls{bottom:max(13px,var(--bottom))}.steer button{width:52px;height:45px;border-radius:14px;font-size:2.4rem}.jump-button{min-height:47px;min-width:130px;padding:9px 16px}.jump-button b{font-size:.78rem}.jump-button span{font-size:.43rem}.callout{top:31%;font-size:1.15rem}.stats{font-size:.59rem}#record{margin:10px 0 15px}}
@media(max-width:350px){.panel{padding-left:18px;padding-right:18px}.how-to>div{font-size:.58rem}.chip{padding:11px 8px}.chip span{font-size:.43rem}.tools{gap:5px}.pace{width:135px}.hint{font-size:.42rem;padding:7px}.steer button{width:48px;height:53px}.jump-button{min-width:120px;min-height:57px}.controls{left:14px;right:14px}.stats{font-size:.53rem;gap:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}