*{box-sizing:border-box}
:root{font-family:ui-rounded,"Arial Rounded MT Bold",ui-sans-serif,system-ui,sans-serif;color:#fff1c9;font-synthesis:none}
body{margin:0;display:grid;min-height:100svh;place-items:center;background:#dfc1aa}
main{width:min(100%,460px,calc(100svh * 9 / 16))}
#stage{width:100%;aspect-ratio:9/16;position:relative;overflow:hidden;background:#bbaad7;touch-action:none;isolation:isolate}
#scene{display:block;width:100%;height:100%}
button{cursor:pointer;border:0;font:inherit;touch-action:manipulation;transition:transform .12s}
button:active{transform:scale(.95)}button:focus-visible{outline:3px solid #fff6d8;outline-offset:3px}button:disabled{cursor:default}
.hud{position:absolute;inset:0;z-index:3;pointer-events:none}
.hud button{pointer-events:auto}
.score{position:absolute;left:2.8%;top:1.6%;width:18.1%;height:4.5%;display:flex;align-items:center;justify-content:center;gap:8%;background:linear-gradient(color-mix(in srgb,var(--hud-red) 90%,white),var(--hud-red));border:1px solid #f86053;border-radius:10px;box-shadow:inset 0 1px 0 #ff887166,0 2px 1px #84244955}
.score small{display:none}.score output{display:block;color:#ffebad;font-size:clamp(15px,4.3vw,20px);line-height:1;font-weight:850;font-variant-numeric:tabular-nums}
.hud-candy{width:24%;height:75%;position:relative;transform:rotate(25deg)}.hud-candy img{width:100%;display:block}.hud-candy::after{content:'';position:absolute;left:47%;top:60%;width:12%;height:39%;border-radius:2px;background:#fff1d6;z-index:-1}
#fuel-panel{position:absolute;left:3%;top:6.7%;width:17.6%;height:3.2%;padding:0 5px;background:var(--hud-cream);border:1px solid #fff5d5;border-radius:7px;box-shadow:0 2px 1px #79524a33}
.fuel-label{height:100%;display:flex;align-items:center;justify-content:space-between;gap:3px}.fuel-label svg{fill:#d93b26;width:22%;height:82%;flex-shrink:0}.fuel-label output{color:#634552;font-size:clamp(12px,3.3vw,16px);font-weight:850;font-variant-numeric:tabular-nums}
#fuel-meter,.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#fuel-panel.low{background:#ffcca9}
#distance-panel{position:absolute;left:50%;top:1.6%;transform:translateX(-50%);min-width:29%;height:4.5%;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:7px;background:var(--hud-cream);color:#634552;border:1px solid #fff5d5;border-radius:10px;box-shadow:0 2px 1px #79524a33;white-space:nowrap}
#distance-panel small{font-size:10px;font-weight:750}#distance-value{font-size:clamp(13px,3.7vw,18px);font-weight:850;font-variant-numeric:tabular-nums}
#result .result-distance{margin:8px 0 16px;font-size:14px;color:#634552}#result-distance{font-variant-numeric:tabular-nums}
#pause,#sound{position:absolute;right:2.1%;top:1.4%;width:9%;height:4.8%;border-radius:10px;background:linear-gradient(color-mix(in srgb,var(--hud-red) 90%,white),var(--hud-red));color:#ffd635;border:1px solid #f86053;box-shadow:inset 0 1px 0 #ff887166,0 2px 1px #84244955;font-size:24px;line-height:1;font-weight:900;padding:0}
.pedal{position:absolute;z-index:3;bottom:max(2.5%,env(safe-area-inset-bottom));width:19%;min-height:86px;padding:2px 3px 4px;border:0;background:transparent;color:#fff3d4;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.pedal img{display:block;width:100%;height:70px;object-fit:contain;pointer-events:none;transition:transform .12s,filter .12s}
.pedal span{display:inline-block;padding:3px 10px;background:#503b60dc;border:1px solid #eacaab77;border-radius:10px;font-size:11px;font-weight:850;line-height:1.4}
.pedal.is-held img{transform:translateY(4px) scale(.94);filter:brightness(1.15)}.pedal.is-held span{background:#973c51}.pedal:disabled{opacity:.5}
#brake{left:2%}#gas{right:2%}#gas.is-held span{background:#916120}
#sound{top:7%;height:4.8%;padding:7px}#sound svg{width:100%;height:100%;fill:#ffd635}#sound svg path:not(:first-child),#sound .sound-waves path{fill:none;stroke:#ffd635;stroke-width:2;stroke-linecap:round}#sound .sound-off{display:none}#sound[aria-pressed="true"] .sound-off{display:block}#sound[aria-pressed="true"] .sound-waves{display:none}
#pause::after,#sound::after{content:'';position:absolute;inset:-6px}
#notice{position:absolute;z-index:3;top:11%;left:10%;right:10%;text-align:center;color:#fff0c9;font-size:11px;font-weight:750;text-shadow:0 1px 4px #563344;pointer-events:none}
#mission,#result{position:absolute;z-index:4;top:18%;left:22px;right:22px;padding:25px 23px 22px;background:linear-gradient(145deg,#fff7e9f7,#ffeedbf5);border:1px solid #fff4db;border-radius:23px;box-shadow:0 18px 45px #18263338;color:#273d4d}
[hidden]{display:none!important}.mission-label{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#b0643a;font-weight:800}
#mission h1,#result h2{font-size:32px;line-height:1.02;letter-spacing:-1.25px;margin:12px 0 13px;font-weight:850}
#mission p,#result p{font-size:13px;line-height:1.5;margin:0 0 17px;color:#6d6863}
.mission-rules{display:flex;gap:10px;margin:17px 0}.mission-rules span{flex:1;background:#e9dfd050;border:1px solid #e0d5c5;border-radius:12px;padding:10px;font-size:10px;color:#696866}.mission-rules b{font-size:19px;display:block;color:#bd2944;margin-bottom:3px}.mission-rules span+span b{color:#298574}
#mission .mission-tip{font-size:11px;line-height:1.4;margin-bottom:17px}
#mission button,#result button{display:flex;justify-content:space-between;align-items:center;width:100%;background:#cb2444;color:#fff6de;border-radius:13px;padding:14px 17px;font-size:14px;font-weight:800;box-shadow:0 3px 0 #9d233b}#mission button span,#result button span{font-size:20px}
#result{top:22%}.result-score{display:flex;align-items:center;gap:14px;margin:20px 0 25px}.result-score output{font-size:48px;line-height:1;letter-spacing:-2px;font-weight:850;color:#c42744}.result-score span{font-size:11px;max-width:95px;line-height:1.4;color:#756657}
#pickup-feedback{position:absolute;z-index:2;top:49%;left:0;right:0;text-align:center;font-size:26px;font-weight:900;letter-spacing:-.6px;color:#ffe691;text-shadow:0 2px 4px #34495b;pointer-events:none;opacity:0}#pickup-feedback.fuel{color:#ffd2b5}#pickup-feedback.pop{animation:pickup-pop .55s ease-out both}@keyframes pickup-pop{0%{opacity:0;transform:translateY(15px) scale(.75)}20%{opacity:1;transform:translateY(0) scale(1.08)}70%{opacity:1}100%{opacity:0;transform:translateY(-22px) scale(1)}}

@media(max-width:375px){#mission{top:17%;left:18px;right:18px;padding:20px}#mission h1{font-size:28px}.mission-rules{margin:12px 0}#mission p{font-size:12px;margin-bottom:12px}.mission-rules span{padding:8px}}
@media(prefers-reduced-motion:reduce){button{transition:none}#pickup-feedback.pop{animation-duration:.1s}}

#notice[data-signal]:not([data-signal=""]){left:17%;right:17%;padding:7px 10px;border-radius:12px;background:#513657d9;font-size:12px}
#notice[data-signal="red"]{color:#fff0ce}
#notice[data-signal="green"]{color:#d5f2c0}

.is-loading .hud,.is-loading #mission,.is-loading .pedal,.is-ready .hud{visibility:hidden}
#loading{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;justify-content:space-between;background:#ba9aca;color:#fff1ce;text-align:center;isolation:isolate}
.loading-art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
#loading::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#73598b33,transparent 35%,transparent 65%,#342449b8)}
.loading-heading{padding:6% 8% 0;display:flex;flex-direction:column;align-items:center;text-shadow:0 2px 8px #4a2b6144}
.loading-heading img{width:22%;max-height:95px;margin-bottom:3%;filter:drop-shadow(0 3px 0 #9c334455)}
.loading-heading span{font-size:clamp(20px,6vw,29px);font-weight:800;line-height:1.1}
.loading-heading strong{font-size:clamp(42px,13vw,63px);font-weight:950;line-height:1.05;letter-spacing:.03em;color:#ffdc69}
.loading-status{padding:0 12% 11%}.loading-status p{font-size:14px;font-weight:750;line-height:1.4;margin:0 0 14px}
.loading-status progress{display:block;appearance:none;width:100%;height:7px;border:0;border-radius:8px;overflow:hidden;background:#ffedce44}
.loading-status progress::-webkit-progress-bar{background:#ffedce44;border-radius:8px}
.loading-status progress:indeterminate{background:linear-gradient(90deg,transparent,#ffe2a1,transparent) 0/40% 100% no-repeat,#ffedce44;animation:loading-travel 1.4s ease-in-out infinite}
#loading-retry{padding:11px 18px;background:#c92745;border:1px solid #f49278;border-radius:12px;color:#fff1ce;font-weight:800}
@keyframes loading-travel{0%{background-position:-70% 0}100%{background-position:170% 0}}
#mission{top:8%;max-height:84%;overflow:auto;overscroll-behavior:contain;padding:22px}
#mission h1{font-size:29px}#mission p{margin-bottom:12px}.mission-rules{margin:12px 0}
#settings{margin:0 0 16px;border-top:1px solid #ddc8b7;border-bottom:1px solid #ddc8b7}
#settings summary{display:flex;justify-content:space-between;cursor:pointer;padding:12px 0;font-size:13px;font-weight:800;list-style:none;color:#694760}#settings summary::-webkit-details-marker{display:none}
#settings[open] summary span{transform:rotate(180deg)}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;font-size:12px;color:#65565e}
.setting-row input{accent-color:#c92745}.setting-row input[type=checkbox]{width:20px;height:20px;margin:0}.setting-row input[type=range]{width:52%;min-width:0}.setting-row select{max-width:60%;padding:7px 8px;border:1px solid #d8bfaa;border-radius:8px;background:#fff6e9;color:#694760;font:inherit}
@media(max-width:375px){#mission{top:5%;max-height:87%;padding:18px}#mission h1{font-size:26px}.pedal img{height:60px}.pedal{min-height:78px}}
@media(prefers-reduced-motion:reduce){.loading-status progress:indeterminate{animation:none;background-position:50% 0}.pedal img{transition:none}}