:root{--bg:#0b2a1a;--yellow:#f2c94c;--red:#e8322b;--text:#f4f8f0;--glow:0 0 20px rgba(242,201,76,.5)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#scene3d{position:fixed;inset:0;width:100%;height:100%;display:block}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:radial-gradient(ellipse at 50% 30%,rgba(30,90,60,.35),rgba(6,20,12,.88) 70%);z-index:5}
.screen[hidden]{display:none}
.dim{background:rgba(6,20,12,.75);backdrop-filter:blur(6px)}
.logo{display:flex;flex-direction:column;align-items:center}
.logo h1{margin:0;font-size:clamp(46px,13vw,92px);line-height:.9;letter-spacing:.06em;font-weight:900;background:linear-gradient(180deg,#fff7d6,#f2c94c 55%,#e8722b);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(242,201,76,.5))}
.brand{font-size:22px;font-weight:800;letter-spacing:.2em;color:#5fd3ff;text-shadow:0 0 12px rgba(95,211,255,.7);align-self:flex-end}
.subtitle{margin:0 0 8px;opacity:.85;letter-spacing:.1em;font-size:14px}
h2{margin:0 0 6px;letter-spacing:.2em;font-size:26px;text-shadow:var(--glow)}
button{font:inherit;color:inherit;cursor:pointer}
.big{min-width:220px;padding:16px 28px;font-size:22px;font-weight:800;letter-spacing:.18em;border:2px solid var(--yellow);border-radius:16px;background:linear-gradient(180deg,rgba(242,201,76,.3),rgba(232,114,43,.15));box-shadow:var(--glow)}
.small{min-width:200px;padding:10px 20px;font-size:14px;letter-spacing:.14em;border:1px solid rgba(242,201,76,.5);border-radius:12px;background:rgba(10,30,18,.6)}
.link{text-decoration:none;color:var(--text);display:inline-block}
.howto{max-width:430px;font-size:12.5px;opacity:.75;line-height:1.5}
.info{margin:0;opacity:.85;font-size:14px}
.result{font-size:52px;font-weight:900;margin:0;color:var(--yellow);text-shadow:var(--glow)}
#hud{position:fixed;inset:0;pointer-events:none;z-index:3}
#hud[hidden]{display:none}
.top{position:absolute;top:calc(env(safe-area-inset-top) + 8px);left:10px;right:10px;display:flex;align-items:center;gap:10px}
.icon{pointer-events:auto;width:40px;height:40px;border-radius:12px;border:1px solid rgba(242,201,76,.5);background:rgba(10,30,18,.6);font-size:16px}
.tag{font-size:12px;letter-spacing:.14em;padding:6px 10px;border-radius:10px;background:rgba(10,30,18,.6);border:1px solid rgba(242,201,76,.3)}
.lives{color:var(--yellow);font-size:15px;letter-spacing:2px}
.points{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:900;font-size:24px;color:var(--yellow);text-shadow:0 0 10px rgba(0,0,0,.8)}
.message{position:absolute;top:34%;left:0;right:0;text-align:center;font-size:clamp(26px,8vw,48px);font-weight:900;letter-spacing:.12em;text-shadow:0 0 18px rgba(0,0,0,.8),var(--glow);opacity:0;transition:opacity .25s}
.message.shown{opacity:1}
.fuel{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 132px);width:min(60vw,240px);height:26px;border-radius:6px;border:2px solid #f4f8f0;background:linear-gradient(90deg,rgba(232,50,43,.5),rgba(10,30,18,.6) 25%);display:flex;justify-content:space-between;align-items:center;padding:0 8px;font-weight:900;font-size:13px}
.fuel i{position:absolute;top:-4px;bottom:-4px;width:4px;margin-left:-2px;background:var(--yellow);box-shadow:0 0 8px var(--yellow);border-radius:2px}
.fuel.low{animation:blink .5s steps(2) infinite;border-color:var(--red)}
@keyframes blink{50%{opacity:.4}}
.speed{position:absolute;right:16px;bottom:calc(env(safe-area-inset-bottom) + 140px);font-size:18px;color:var(--yellow)}
.bottom{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 14px);display:flex;justify-content:space-between;align-items:flex-end;padding:0 14px}
.pad{pointer-events:auto;position:relative;width:130px;height:110px;border-radius:24px;border:2px solid rgba(244,248,240,.35);background:rgba(10,30,18,.35);touch-action:none;display:flex;align-items:center;justify-content:center}
.pad small{position:absolute;bottom:6px;font-size:10px;letter-spacing:.2em;opacity:.7}
.knob{width:46px;height:46px;border-radius:50%;background:rgba(242,201,76,.55);border:2px solid var(--yellow);box-shadow:var(--glow);pointer-events:none}
.fire{pointer-events:auto;width:104px;height:104px;border-radius:50%;border:3px solid var(--red);background:radial-gradient(circle,rgba(232,50,43,.55),rgba(232,50,43,.18));font-weight:900;letter-spacing:.12em;font-size:15px;touch-action:none}
.fire.pressed{transform:scale(.94);background:radial-gradient(circle,rgba(255,120,80,.8),rgba(232,50,43,.3))}