:root{font-family:Arial,Helvetica,sans-serif;color:#173f35;background:#bde4e4;font-synthesis:none;--ink:#173f35;--lime:#d6ff70;--cream:#fffdf1;--orange:#ff7849}
.level-picker{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:10px}.level-picker>label:first-child{font-size:8px;font-weight:800;letter-spacing:1px}.level-picker select{min-width:0;flex:1;border:1px solid #173f3533;border-radius:9px;padding:10px 7px;background:#fffdf1;color:#173f35;font:inherit;touch-action:manipulation}.file-button{position:relative;background:#173f35;color:#d6ff70;padding:11px 9px;border-radius:9px;white-space:nowrap;cursor:pointer}.file-button input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}#level-status{font-size:11px;line-height:1.4;color:#824d24;margin:0 0 9px;max-height:60px;overflow:auto}#level-status:empty{display:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:3px solid #f77c40;outline-offset:4px}button:disabled{opacity:.6;cursor:wait}button,canvas{-webkit-user-select:none;user-select:none}button{border:0} [hidden]{display:none!important}
#game{position:fixed;inset:0;height:100%;height:100dvh;overflow:hidden}#view{display:block;width:100%;height:100%;touch-action:none;outline:0}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#93c9cf22,transparent 55%,#143e351b)}
#brand{position:absolute;left:max(28px,env(safe-area-inset-left));top:max(24px,env(safe-area-inset-top));font-weight:900;font-size:22px;letter-spacing:-1px;line-height:1;pointer-events:none}#brand>span:not(.brand-icon){font-weight:400}#brand small{display:block;font-size:8px;letter-spacing:2.3px;margin-top:9px;margin-left:31px;font-weight:700}.brand-icon{display:inline-block;color:var(--ink);font-size:30px;margin-right:7px}#top-actions{position:absolute;top:max(20px,env(safe-area-inset-top));right:max(22px,env(safe-area-inset-right));z-index:7}.icon-button{width:46px;height:46px;border-radius:50%;background:var(--cream);color:var(--ink);font-size:24px;box-shadow:0 3px 0 #153e3518}
.screen{position:absolute;inset:0;display:flex;align-items:center;padding:100px 7vw 65px;pointer-events:none}.home-card{width:380px;pointer-events:auto}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;display:flex;align-items:center;gap:8px}.eyebrow i,.course-tag i{display:block;width:7px;height:7px;border-radius:50%;background:#287359}h1{font-size:clamp(56px,6.2vw,92px);line-height:.94;letter-spacing:-5px;margin:22px 0}h1 em{font-family:Georgia,serif;font-weight:400;color:#287359}p{font-size:15px;line-height:1.6}.intro{margin:20px 0 25px;color:#3c6257}.stage-card{display:flex;align-items:center;gap:14px;border-top:1px solid #17403326;border-bottom:1px solid #17403326;padding:16px 0;margin-bottom:20px}.stage-icon{width:43px;height:43px;display:grid;place-items:center;background:var(--ink);color:var(--lime);border-radius:12px;font-weight:800}.stage-card b{display:block;font-size:14px}.stage-card div>span{display:block;font-size:11px;opacity:.65;margin-top:5px}.stage-arrow{margin-left:auto;font-size:25px}.mode-picker{display:flex;background:#fcfff678;border:1px solid #fff8;padding:4px;border-radius:14px;gap:4px}.mode-picker button{flex:1;background:transparent;border-radius:10px;padding:12px 8px;font-size:13px;color:var(--ink);font-weight:700}.mode-picker .selected{background:var(--ink);color:white;box-shadow:0 3px 6px #143e3522}.control-hint{font-size:12px;min-height:35px;margin:10px 2px 14px;line-height:1.45;opacity:.8}.primary{background:var(--ink);color:var(--lime);width:100%;padding:19px 22px;border-radius:14px;display:flex;justify-content:space-between;align-items:center;text-align:left;font-weight:700;font-size:17px;box-shadow:0 5px 0 #0a291f26;transition:transform .15s}.primary:hover{background:#245b49;transform:translateY(-2px)}.primary:active{transform:translateY(2px)}.primary>span:last-child{font-size:22px}.home-meta{display:flex;align-items:center;justify-content:space-between;margin-top:20px;font-size:8px;letter-spacing:1px}.home-meta b{font-size:11px;letter-spacing:0;margin-left:5px}.home-meta button{background:none;color:var(--ink);font-size:10px;text-decoration:underline;text-underline-offset:4px;padding:8px 0}.course-tag{position:absolute;right:32px;bottom:28px;display:flex;gap:10px;align-items:center;font-size:8px;letter-spacing:2px}.course-tag b{display:block;margin-top:6px;font-size:10px;letter-spacing:1px}
#hud{position:absolute;inset:0;pointer-events:none;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}#hud button{pointer-events:auto}.race-top{display:flex;justify-content:space-between;align-items:start}.timer-box{background:var(--cream);border-radius:18px;padding:14px 20px;box-shadow:0 5px 20px #173f3510;min-width:165px}.timer-box>span{font-size:9px;letter-spacing:2px;font-weight:800;display:block}.timer-box b{font-size:30px;letter-spacing:-1px;display:block;font-variant-numeric:tabular-nums;margin-top:3px}.timer-box small{font-size:11px;color:#c0592f}.progress-card{position:absolute;top:max(24px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:240px}.progress-card>div:first-child{display:flex;justify-content:space-between;font-size:9px;font-weight:800;letter-spacing:1px;padding-bottom:9px}.progress-track{height:5px;background:#173f3526;border-radius:9px;overflow:hidden}.progress-track i{display:block;background:var(--ink);height:100%;width:0;transition:width .15s}.race-bottom{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));display:flex;justify-content:space-between;gap:15px}.secondary{background:var(--cream);color:var(--ink);border:1px solid #173f3515;border-radius:14px;padding:14px 18px;font-size:14px;font-weight:700;min-height:48px}.secondary small{font-size:10px;margin-left:8px;opacity:.6}#mode-toggle span{margin-left:16px;font-size:20px}.race-bottom button{box-shadow:0 4px 12px #143e3515}#gesture-hint{position:absolute;bottom:95px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#143e35dd;color:white;padding:10px 17px;border-radius:25px;font-size:11px}#speed{position:absolute;right:25px;top:105px;font-size:22px;font-weight:700;text-align:right}#speed small{font-size:8px;letter-spacing:1px}#speed i{width:5px;height:5px;border-radius:50%;background:var(--orange);display:inline-block;margin:0 7px 4px 0}
#ball-target{position:absolute;pointer-events:none;width:76px;height:76px;border:1.5px solid #fff9;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 5px #ffffff12}#ball-target span{position:absolute;left:50%;top:100%;height:7px;width:2px;background:white}#countdown{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);font-size:100px;font-weight:900;color:var(--cream);text-shadow:0 5px 0 #173f3555;pointer-events:none;letter-spacing:-5px}#toast{position:absolute;left:50%;top:23%;transform:translateX(-50%) translateY(-10px);padding:11px 19px;background:var(--cream);box-shadow:0 5px 25px #173f3522;border-radius:25px;white-space:nowrap;font-size:12px;font-weight:700;opacity:0;transition:.2s;pointer-events:none}#toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}.modal{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:#163b3544;backdrop-filter:blur(8px);padding:24px;overflow:auto}.dialog{background:var(--cream);border-radius:26px;box-shadow:0 18px 70px #163b3533;padding:32px;max-width:390px;width:100%;max-height:100%;overflow:auto}.dialog h2{font-size:35px;line-height:1.05;letter-spacing:-1.5px;margin:20px 0}.dialog p{font-size:13px;color:#567166}.dialog>.secondary{width:100%;margin-top:13px}.text-button{display:block;margin:15px auto 0;padding:10px;background:transparent;color:var(--ink);font-size:12px;text-decoration:underline;text-underline-offset:4px}.muted{opacity:.7}.finish-flag{font-size:55px;color:#ea7646;margin-top:20px}#finish-time{font-size:50px;font-weight:800;letter-spacing:-2px;font-variant-numeric:tabular-nums}.results{display:flex;justify-content:space-between;border-top:1px solid #173f3522;padding:20px 0;margin-top:15px;font-size:11px}.results b{display:block;margin-top:6px;font-size:17px}body.racing #brand,body.racing #top-actions{display:none}
@media(max-width:600px){#brand{top:max(20px,env(safe-area-inset-top));left:22px;font-size:19px}.screen{align-items:flex-end;padding:0 22px max(25px,env(safe-area-inset-bottom));background:linear-gradient(0deg,#d9ebe6 0%,#d9ebe6e8 35%,#d9ebe600 78%)}.home-card{width:100%;max-width:400px;margin:0 auto}h1{font-size:57px;letter-spacing:-3px;line-height:.92;margin:15px 0 12px}h1 br{display:none}h1 em{white-space:nowrap}.intro{font-size:13px;margin:10px 0 15px}.intro br{display:none}.stage-card{padding:11px 0;margin-bottom:13px}.stage-icon{width:35px;height:35px;border-radius:9px}.home-meta{margin-top:12px}.control-hint{min-height:30px;margin:9px 2px 10px}.primary{padding:16px 20px}.course-tag{display:none}.eyebrow{font-size:8px;letter-spacing:1.5px}.timer-box{min-width:142px;padding:12px 15px}.timer-box b{font-size:26px}.progress-card{top:125px;width:calc(100% - 48px)}#speed{top:86px;font-size:18px}.race-bottom{bottom:max(25px,env(safe-area-inset-bottom))}.dialog{padding:27px}.dialog h2{font-size:32px}}
@media(max-height:650px) and (max-width:600px){h1{font-size:42px;margin:9px 0}.intro{display:none}.screen{padding-bottom:15px}.stage-card{margin-bottom:9px}.home-meta{margin-top:6px}.control-hint{min-height:0}.home-card .eyebrow{display:none}}
@media(max-height:600px) and (min-width:601px){.screen{padding:75px 6vw 15px}.home-card{width:320px}h1{font-size:46px;letter-spacing:-2px;margin:10px 0}h1 br{display:none}.intro{display:none}.stage-card{padding:10px 0;margin-bottom:10px}.control-hint{min-height:0;margin:8px 0}.primary{padding:13px 20px}.home-meta{margin-top:9px}.dialog{padding:22px}.dialog h2{font-size:28px;margin:12px 0}}
@media(orientation:landscape) and (max-height:500px){.screen{align-items:center;padding:80px max(28px,env(safe-area-inset-right)) 16px max(28px,env(safe-area-inset-left));background:linear-gradient(90deg,#d9ebe6ee,#d9ebe688);overflow-y:auto;pointer-events:auto}.home-card{width:100%;max-width:850px;display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:8px}.home-card>.eyebrow{grid-column:1;grid-row:1;align-self:end}.home-card h1{grid-column:1;grid-row:2/4;font-size:46px;align-self:center;margin:0}.home-card .intro{display:none}.stage-card{grid-column:1;grid-row:4;margin:0;padding:8px 0}.mode-picker{grid-column:2;grid-row:1/3;align-self:end}.control-hint{grid-column:2;grid-row:3;margin:0;min-height:28px}.home-card>.primary{grid-column:2;grid-row:4;align-self:center}.home-meta{grid-column:1/-1;grid-row:5;margin:0}.course-tag{display:none}.progress-card{width:210px;top:24px}.timer-box b{font-size:24px}#gesture-hint{bottom:80px}.race-bottom{bottom:max(16px,env(safe-area-inset-bottom))}#speed{top:80px}}
@media(orientation:landscape) and (max-height:500px){.home-card .level-picker{grid-column:1;grid-row:5;margin:0}.home-card #level-status{grid-column:1;grid-row:6;margin:0}.home-card .home-meta{grid-column:2;grid-row:5/7;align-self:start}.screen{align-items:flex-start;padding-top:max(75px,env(safe-area-inset-top))}}
@media(max-width:600px) and (min-height:651px){h1{font-size:48px}.stage-card{margin-bottom:10px}.level-picker{margin-bottom:10px}}
