:root{--ink:#23324a;--accent:#ffb020;--good:#3ccf6e;--bad:#ff5a5a;--panel:#fffffff0;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}*{box-sizing:border-box}html,body{width:100%;height:100%;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:none;background:#8fd3ff;margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif;overflow:hidden}#app{position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}#game-canvas{touch-action:none;outline:none;width:100%;height:100%;display:block;position:absolute;top:0;bottom:0;left:0;right:0}#hud{pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}#hud .tap{pointer-events:auto}#loading{z-index:50;background:linear-gradient(#8fd3ff,#d9f2ff);flex-direction:column;justify-content:center;align-items:center;gap:14px;transition:opacity .25s;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}#loading.hidden{opacity:0;pointer-events:none}.loading-box{background:#c98a4b;border:4px solid #a8692f;border-radius:6px;width:46px;height:46px;animation:.8s ease-in-out infinite alternate bob}.loading-text{letter-spacing:3px;opacity:.7;font-size:14px;font-weight:800}@keyframes bob{0%{transform:translateY(0)rotate(-6deg)}to{transform:translateY(-12px)rotate(6deg)}}.hud-top{top:calc(10px + var(--sat));left:calc(12px + var(--sal));right:calc(12px + var(--sar));justify-content:space-between;align-items:flex-start;gap:8px;display:flex;position:absolute}.pill{background:var(--panel);white-space:nowrap;border-radius:999px;padding:8px 14px;font-size:16px;font-weight:800;box-shadow:0 3px #0000001f}.cargo-pill{align-items:center;gap:8px;display:flex}.cargo-pill .need{opacity:.6;font-size:11px;font-weight:700}.box-icon{background:#d6974f;border:2px solid #9b6127;border-radius:3px;width:16px;height:16px;display:inline-block}.cargo-pill.danger{background:#ffe1e1;animation:.35s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.top-right{align-items:center;gap:8px;display:flex}.icon-btn{background:var(--panel);width:48px;height:48px;color:var(--ink);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:22px;font-weight:900;display:flex;box-shadow:0 3px #00000026}.icon-btn:active{transform:translateY(2px);box-shadow:0 1px #00000026}.hint{text-align:center;transition:opacity .3s;position:absolute;top:31%;left:50%;transform:translate(-50%)}.hint.hidden{opacity:0}.hint .hint-text{color:#fff;letter-spacing:1px;white-space:nowrap;background:#23324ad1;border-radius:14px;padding:10px 18px;font-size:clamp(14px,4.2vw,22px);font-weight:900}.hint .finger{background:#ffffff59;border:4px solid #fff;border-radius:50%;width:44px;height:44px;margin:12px auto 0;animation:1.1s ease-in-out infinite press}@keyframes press{0%,to{transform:scale(1)}50%{background:#ffb020b3;transform:scale(.75)}}.level-title{text-align:center;color:#fff;text-shadow:0 3px #00000040;white-space:nowrap;font-weight:900;transition:opacity .4s;position:absolute;top:15%;left:50%;transform:translate(-50%)}.level-title .lt-small{letter-spacing:3px;opacity:.9;font-size:clamp(14px,3.5vw,18px)}.level-title .lt-big{font-size:clamp(28px,8vw,46px)}.level-title.hidden{opacity:0}.speed{left:50%;bottom:calc(18px + var(--sab));background:#fff9;border-radius:8px;width:min(220px,50vw);height:12px;position:absolute;overflow:hidden;transform:translate(-50%);box-shadow:0 2px #0000001f}.speed .fill{background:linear-gradient(90deg, var(--good), var(--accent) 70%, var(--bad));border-radius:8px;width:0%;height:100%}.speed.throttle{outline:3px solid #ffb020e6}.progress{left:50%;top:calc(66px + var(--sat));background:#ffffff80;border-radius:4px;width:min(260px,60vw);height:6px;position:absolute;transform:translate(-50%)}.progress .fill{background:#fff;border-radius:4px;width:0%;height:100%}.progress .flag{background:repeating-conic-gradient(#222 0 25%, #fff 0 50%) 50% / 7px 7px;border-radius:3px;width:14px;height:14px;position:absolute;top:-5px;right:-6px}.result{opacity:0;pointer-events:none;padding:calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));background:#141e3259;justify-content:center;align-items:center;transition:opacity .25s;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.result.show{opacity:1;pointer-events:auto}.result .card{background:var(--panel);text-align:center;border-radius:22px;min-width:min(300px,86vw);padding:22px 26px;transition:transform .25s cubic-bezier(.3,1.6,.6,1);transform:scale(.9);box-shadow:0 8px #00000026}.result.show .card{transform:scale(1)}.result h1{margin:0 0 6px;font-size:clamp(28px,8vw,40px);font-weight:900}.result h1.win{color:var(--good)}.result h1.lose{color:var(--bad)}.result .sub{opacity:.75;margin-bottom:16px;font-size:16px;font-weight:700}.result .boxes{justify-content:center;gap:6px;margin-bottom:18px;display:flex}.result .boxes .box-icon{width:26px;height:26px}.result .boxes .box-icon.lost{opacity:.2}.btn{letter-spacing:1px;color:#fff;cursor:pointer;border:none;border-radius:16px;min-width:160px;min-height:56px;padding:0 22px;font-size:22px;font-weight:900;box-shadow:0 5px #0003}.btn:active{transform:translateY(3px);box-shadow:0 2px #0003}.btn.next{background:var(--good)}.btn.retry{background:var(--accent)}.btn-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.btn.secondary{background:#8a97ab;min-width:120px;font-size:18px}.btn.repack{background:#4f8ef7;min-width:120px;font-size:18px}.btn:disabled{opacity:.45;box-shadow:none}.paused{color:#fff;letter-spacing:3px;background:#141e3266;justify-content:center;align-items:center;font-size:28px;font-weight:900;display:none;position:absolute;top:0;bottom:0;left:0;right:0}.paused.show{pointer-events:auto;z-index:100;display:flex}#hud{--ctl:clamp(64px, 17vw, 84px);--ctl-brake:clamp(84px, 24vw, 116px)}#hud .steer-wrap{left:calc(12px + var(--sal));bottom:calc(16px + var(--sab));gap:10px;display:flex;position:absolute}#hud .brake-wrap{right:calc(12px + var(--sar));bottom:calc(16px + var(--sab));display:flex;position:absolute}#hud .steer-wrap.hidden,#hud .brake-wrap.hidden{display:none}#hud .ctl{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--ink);background:var(--panel);border:none;justify-content:center;align-items:center;font-weight:900;transition:transform 60ms ease-out,background 60ms,box-shadow 60ms;display:flex;box-shadow:0 5px #0000002e}#hud .ctl:focus{outline:none}#hud .ctl.pressed{transform:translateY(4px)scale(.97);box-shadow:0 1px #0000002e}#hud .steer{width:var(--ctl);height:var(--ctl);font-size:calc(var(--ctl) * .44);border-radius:22px;line-height:1}#hud .steer.pressed{background:#ffe6b8}#hud .brake{width:var(--ctl-brake);height:var(--ctl);letter-spacing:1px;color:#fff;background:#ff5a5a;border-radius:20px;font-size:15px;box-shadow:0 5px #c33a3a}#hud .brake.pressed{background:#e84646;box-shadow:0 1px #c33a3a}@media (orientation:portrait){#hud.controls-on .speed{bottom:calc(var(--ctl) + 30px + var(--sab))}}#hud.phase-loading .speed,#hud.phase-loading .progress,#hud.phase-loading .hint{display:none}#hud .stop-cue{left:50%;top:calc(84px + var(--sat));background:var(--panel);opacity:0;pointer-events:none;border-radius:999px;align-items:center;gap:8px;padding:6px 12px 6px 9px;transition:opacity .18s,transform .18s cubic-bezier(.3,1.6,.6,1);display:flex;position:absolute;transform:translate(-50%)scale(.82);box-shadow:0 3px #0000001f}#hud .stop-cue.show{opacity:1;transform:translate(-50%)scale(1)}#hud .stop-cue .lamp{background:#23324a24;border-radius:50%;width:12px;height:12px}#hud .stop-cue .lamp.on[data-c=green]{background:var(--good);box-shadow:0 0 8px #3ccf6ed9}#hud .stop-cue .lamp.on[data-c=yellow]{background:var(--accent);box-shadow:0 0 8px #ffb020d9}#hud .stop-cue .lamp.on[data-c=red]{background:var(--bad);box-shadow:0 0 8px #ff5a5ad9}#hud .stop-cue .dist{opacity:.65;font-variant-numeric:tabular-nums;min-width:34px;font-size:13px;font-weight:800}#hud .toast{left:50%;top:calc(118px + var(--sat));text-align:center;color:#fff;letter-spacing:.5px;opacity:0;pointer-events:none;background:#23324aeb;border-radius:14px;max-width:min(78vw,360px);padding:10px 16px;font-size:15px;font-weight:900;transition:opacity .16s,transform .16s cubic-bezier(.3,1.6,.6,1);position:absolute;transform:translate(-50%,-8px);box-shadow:0 4px #00000029}#hud .toast.show{opacity:1;transform:translate(-50%)}#hud .toast.warn{background:#d63a3af2}#hud .result .stars{justify-content:center;gap:4px;margin:0 0 10px;display:flex}#hud .result .star{color:#23324a26;font-size:34px;line-height:1}#hud .result .star.on{color:var(--accent);text-shadow:0 2px #0000001f;animation:.38s cubic-bezier(.3,1.7,.5,1) both starPop}@keyframes starPop{0%{opacity:0;transform:scale(.2)rotate(-25deg)}60%{opacity:1;transform:scale(1.25)rotate(6deg)}to{opacity:1;transform:scale(1)rotate(0)}}#hud .result .boxes .box-icon.broken{background:#ff7b6b;border-color:#b8342a;position:relative;overflow:hidden}#hud .result .boxes .box-icon.broken:after{content:"";background:#7a1b14;width:3px;height:140%;position:absolute;top:-3px;left:45%;transform:rotate(18deg)}