:root{
  --ink:#1c2230; --paper:rgba(12,16,26,.72); --accent:#ffb02e; --accent2:#ff5d5d;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#f7b267;font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;color:#fff}
#app,#app canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#speedo{position:absolute;right:22px;bottom:20px;background:var(--paper);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:10px 18px 12px;text-align:right;min-width:150px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
#speedo span{font-size:52px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 3px 0 rgba(0,0,0,.25)}
#speedo small{font-size:13px;opacity:.7;margin-left:6px;letter-spacing:.12em}
#carname{font-size:12px;letter-spacing:.18em;opacity:.85;margin-top:4px;color:var(--accent);font-weight:700}
#damageWrap{position:absolute;left:22px;bottom:20px;background:var(--paper);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:10px 14px;width:230px}
#damageWrap label{font-size:11px;letter-spacing:.2em;opacity:.75}
#damageBar{height:12px;background:rgba(255,255,255,.15);border-radius:99px;margin-top:6px;overflow:hidden}
#damageFill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#7bff9e,#ffb02e,#ff5d5d);transition:width .2s}
#prompt{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);background:#fff;color:var(--ink);border-radius:99px;padding:10px 20px;font-size:17px;box-shadow:0 8px 24px rgba(0,0,0,.35);animation:bob 1s infinite ease-in-out alternate}
#prompt b{display:inline-block;background:var(--ink);color:#fff;border-radius:8px;padding:1px 9px;margin-right:8px;font-size:15px}
@keyframes bob{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-5px)}}
#toast{position:absolute;left:50%;top:86px;transform:translateX(-50%);background:var(--paper);border:1px solid rgba(255,255,255,.2);padding:10px 22px;border-radius:99px;font-weight:600;font-size:15px;letter-spacing:.02em}
#wreckBanner{position:absolute;left:50%;top:32%;transform:translateX(-50%) rotate(-3deg);background:var(--accent2);font-weight:900;font-size:30px;letter-spacing:.04em;padding:12px 30px;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.4);border:4px solid #fff}
#drift{position:absolute;right:30px;top:40%;font-weight:900;font-style:italic;font-size:34px;color:var(--accent);text-shadow:0 3px 0 rgba(0,0,0,.4);transform:rotate(6deg)}

/* minimap */
#minimap{position:fixed;top:16px;right:16px;z-index:6;border-radius:50%;border:4px solid rgba(255,255,255,.85);box-shadow:0 10px 30px rgba(0,0,0,.35);background:#223;opacity:.95}

/* controls + buttons */
#controls{position:fixed;left:16px;top:16px;z-index:6;background:var(--paper);border:1px solid rgba(255,255,255,.16);font-size:12.5px;padding:9px 14px;border-radius:12px;letter-spacing:.02em;backdrop-filter:blur(8px)}
#controls b{background:rgba(255,255,255,.2);border-radius:6px;padding:0 7px;margin:0 1px}
#soundBtn{position:fixed;left:16px;top:58px;z-index:6;width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:var(--paper);font-size:18px;cursor:pointer;color:#fff}

/* title */
#title{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 100% at 50% 10%,rgba(20,30,60,.05) 40%,rgba(20,16,40,.55) 100%);transition:opacity .5s}
#title.gone{opacity:0;pointer-events:none}
.card{background:rgba(14,18,30,.82);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.2);border-radius:26px;padding:38px 46px;text-align:center;max-width:560px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.kicker{font-size:12px;letter-spacing:.32em;color:var(--accent);font-weight:800}
h1{font-size:64px;font-weight:900;letter-spacing:.02em;line-height:1;margin:8px 0 4px;text-shadow:0 5px 0 rgba(0,0,0,.3)}
h1 span{color:var(--accent)}
.sub{opacity:.85;font-size:16px;line-height:1.5;margin:6px 0 18px}
.rules{display:grid;gap:8px;background:rgba(255,255,255,.07);border-radius:14px;padding:14px 16px;font-size:14px;text-align:left;margin-bottom:20px}
#playBtn{font-size:19px;font-weight:800;letter-spacing:.06em;color:#1c2230;background:linear-gradient(180deg,#ffd166,#ffb02e);border:0;border-radius:99px;padding:14px 44px;cursor:pointer;box-shadow:0 10px 0 #a05f00,0 18px 30px rgba(0,0,0,.4);transition:transform .08s}
#playBtn:hover{transform:translateY(-2px) scale(1.02)}
#playBtn:active{transform:translateY(4px);box-shadow:0 4px 0 #a05f00}
.foot{margin-top:14px;font-size:12px;opacity:.6;letter-spacing:.04em}
#loading{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;background:rgba(0,0,0,.6);padding:12px 26px;border-radius:99px;font-size:14px;letter-spacing:.15em}