/* ══ Road Rush 3D — cartoon UI ══ */
:root{
  --ink:#101826; --ink-2:#33445f; --paper:#fffdf7;
  --accent:#ff5a3c; --accent-2:#ffd23f; --accent-3:#3ddc97;
  --sky:#7ec8ff; --ok:#22c55e; --danger:#ef4444;
  --hard:0 5px 0 rgba(16,24,38,.92);
  --lift:0 5px 0 rgba(16,24,38,.92), 0 18px 34px rgba(16,24,38,.28);
  --radius:24px; --radius-sm:15px;
  --font:'Baloo Bhaijaan 2','Cairo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%}
body{
  font-family:var(--font); color:var(--ink); background:#0d1420;
  overflow:hidden; -webkit-font-smoothing:antialiased; overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
}
#gl{position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none}
#fx-vignette{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(ellipse at 50% 46%, transparent 52%, rgba(8,14,26,.45) 100%);
}
#fx-flash{
  position:fixed; inset:0; pointer-events:none; z-index:3; opacity:0;
  transition:opacity .1s linear;
  background:radial-gradient(ellipse at 50% 58%, rgba(255,110,70,.9), rgba(255,210,63,.35) 46%, transparent 74%);
}
#fx-flash.on{opacity:1}
.hidden{display:none !important}
.rtl-flip{transform:scaleX(-1)}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font);font-weight:800;font-size:1rem;
  padding:.72rem 1.5rem;border-radius:999px;cursor:pointer;
  border:3px solid var(--ink);background:var(--paper);color:var(--ink);
  box-shadow:var(--hard);
  transition:transform .12s ease, box-shadow .12s ease, filter .15s ease;
}
.btn svg{width:20px;height:20px;stroke-width:2.4}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 rgba(16,24,38,.92),0 20px 34px rgba(16,24,38,.3)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(16,24,38,.92)}
.btn:focus-visible{outline:3px dashed var(--accent);outline-offset:3px}
.btn-primary{background:linear-gradient(180deg,#ff8163,var(--accent));color:#fff;text-shadow:0 2px 0 rgba(16,24,38,.3)}
.btn-ghost{background:rgba(255,253,247,.92)}
.btn-sm{font-size:.85rem;padding:.45rem 1rem;border-width:2.5px}
.btn-sm svg{width:16px;height:16px}
.btn-lg{font-size:1.15rem;padding:.9rem 2rem}
.btn-block{width:100%;margin-top:.6rem}

/* ── HUD ── */
#hud{position:fixed;inset:0;z-index:6;pointer-events:none;padding:max(14px,env(safe-area-inset-top)) 14px 14px}
.hud-bar{
  display:flex;gap:.6rem;justify-content:center;align-items:stretch;flex-wrap:wrap;
  max-width:760px;margin:0 auto;
}
.stat{
  pointer-events:none;background:rgba(255,253,247,.94);border:3px solid var(--ink);
  border-radius:var(--radius-sm);box-shadow:var(--hard);padding:.35rem .9rem .45rem;
  display:flex;flex-direction:column;align-items:center;min-width:104px;
}
.stat-label{font-size:.68rem;font-weight:700;letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase}
.stat-value{display:flex;align-items:baseline;gap:.2rem;font-variant-numeric:tabular-nums}
.stat-value b{font-size:1.5rem;font-weight:800;line-height:1}
.unit{font-size:.7rem;font-style:normal;font-weight:700;color:var(--ink-2)}
.stat-speed{min-width:150px}
.speed-track{display:block;width:100%;height:7px;margin-top:.3rem;background:rgba(16,24,38,.16);border-radius:99px;overflow:hidden}
.speed-track i{display:block;height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#3ddc97,#ffd23f 55%,#ff5a3c);transition:width .12s linear}
.stat-best{min-width:104px}

/* ── HUD actions / icon buttons ── */
.hud-actions{position:absolute;top:max(14px,env(safe-area-inset-top));inset-inline-end:14px;display:flex;gap:.5rem;pointer-events:auto}
.icon-btn{
  width:46px;height:46px;border-radius:14px;border:3px solid var(--ink);
  background:rgba(255,253,247,.94);box-shadow:var(--hard);cursor:pointer;
  display:grid;place-items:center;color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.icon-btn svg{width:20px;height:20px;stroke-width:2.4}
.icon-btn:hover{transform:translateY(-2px)}
.icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(16,24,38,.92)}
.icon-btn.off{background:rgba(255,253,247,.6);color:var(--ink-2)}

/* ── Touch controls ── */
#touch{
  position:fixed;inset-inline:0;bottom:0;z-index:7;pointer-events:none;
  padding:0 20px calc(20px + env(safe-area-inset-bottom));
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
}
.touch-btn{
  pointer-events:auto;width:86px;height:86px;border-radius:50%;
  border:4px solid var(--ink);background:rgba(255,253,247,.92);box-shadow:var(--hard);
  display:grid;place-items:center;color:var(--ink);cursor:pointer;
  transition:transform .1s ease, background .1s ease;
}
.touch-btn svg{width:34px;height:34px;stroke-width:2.6}
.touch-btn:active,.touch-btn.held{transform:translateY(5px) scale(.95);background:var(--accent-2)}
.touch-brake{width:72px;height:72px;background:rgba(255,90,60,.94);color:#fff}

/* ── Screens / panels ── */
.screen{
  position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:18px;overflow-y:auto;
  background:radial-gradient(ellipse at 50% 26%, rgba(126,200,255,.3), rgba(9,15,27,.74) 72%);
}
.panel{
  width:100%;max-width:570px;text-align:center;
  background:var(--paper);border:4px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--lift);padding:1.9rem 1.5rem;margin:auto;
  background-image:radial-gradient(circle at 12% 8%, rgba(255,210,63,.22), transparent 42%);
  animation:pop .34s cubic-bezier(.2,1.5,.5,1) both;
}
.panel-sm{max-width:430px}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.93)}to{opacity:1;transform:none}}

/* ── Menu pieces ── */
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  background:rgba(255,90,60,.12);border:2px solid rgba(255,90,60,.38);
  padding:.28rem .8rem;border-radius:99px;margin-bottom:.9rem}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.title{font-size:clamp(2rem,7.5vw,3.05rem);font-weight:800;line-height:1.05;letter-spacing:-.02em}
.wordmark{font-size:.86rem;font-weight:800;letter-spacing:.32em;color:var(--ink-2);margin:.3rem 0 1.05rem}
.wordmark b{color:var(--accent)}
.lead{color:var(--ink-2);font-size:.98rem;line-height:1.75;margin-bottom:1.3rem}
.howto{display:grid;gap:.5rem;margin:1.25rem 0 .3rem;text-align:start}
.howto-item{display:flex;align-items:center;gap:.7rem;background:rgba(16,24,38,.05);
  border:2px dashed rgba(16,24,38,.2);border-radius:14px;padding:.5rem .8rem;
  font-size:.86rem;font-weight:600;color:var(--ink-2)}
.howto-item svg{width:19px;height:19px;flex:0 0 auto;color:var(--accent);stroke-width:2.4}
.menu-foot{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.1rem}

/* ── Game over ── */
.crash-badge{display:inline-flex;align-items:center;gap:.45rem;font-weight:800;font-size:.92rem;
  color:#fff;background:var(--danger);border:3px solid var(--ink);border-radius:99px;
  padding:.32rem 1rem;box-shadow:var(--hard);margin-bottom:.75rem}
.crash-badge svg{width:18px;height:18px;stroke-width:2.6}
.p-title{font-size:1.7rem;font-weight:800;line-height:1.15}
.p-sub{color:var(--ink-2);font-size:.94rem;margin:.35rem 0 1.05rem}
.scores{display:flex;gap:.8rem;justify-content:center;margin-bottom:1rem}
.score-box{flex:1;max-width:170px;background:rgba(16,24,38,.06);border:3px solid var(--ink);
  border-radius:var(--radius-sm);padding:.55rem .4rem;display:flex;flex-direction:column;align-items:center;gap:.1rem}
.score-box span{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.score-box b{font-size:1.65rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.score-box .unit{font-size:.64rem}
.score-box.accent{background:rgba(255,210,63,.3)}
.new-best{font-weight:800;color:#0f8a4d;margin-bottom:.7rem;animation:pulse 1.05s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ── Countdown ── */
#count{position:fixed;inset:0;z-index:15;display:grid;place-items:center;pointer-events:none;text-align:center}
#count-num{font-size:clamp(5rem,22vw,10rem);font-weight:800;color:#fff;line-height:1;
  text-shadow:0 8px 0 var(--ink),0 16px 44px rgba(16,24,38,.6);
  animation:tick .85s cubic-bezier(.2,1.4,.4,1) infinite}
.count-lbl{display:block;margin-top:.3rem;font-size:1.05rem;font-weight:800;color:#fff;text-shadow:0 4px 0 var(--ink)}
@keyframes tick{0%{opacity:0;transform:scale(.5)}35%{opacity:1;transform:scale(1.06)}70%{transform:scale(1)}100%{opacity:.92;transform:scale(1)}}

@media (max-width:640px){
  .panel{padding:1.4rem 1.05rem}
  .hud-actions{top:auto;bottom:calc(118px + env(safe-area-inset-bottom));inset-inline-end:14px}
  .stat{padding:.3rem .7rem .36rem;min-width:86px}
  .stat-value b{font-size:1.2rem}
  .stat-speed{min-width:118px}
  .howto-item{font-size:.79rem}
  .touch-btn{width:78px;height:78px}
}
@media (max-height:560px){.howto{display:none}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ── graceful fallback when the icon CDN is unavailable ── */
.no-icons .icon-btn{display:none}
.no-icons .howto-item i,
.no-icons .eyebrow i{display:none}
.no-icons .touch-btn::after{font-size:2.4rem;font-weight:800;line-height:1;color:inherit}
.no-icons #t-left::after{content:'\2039'}
.no-icons #t-right::after{content:'\203A'}
.no-icons #t-brake::after{content:'\275A'}
.no-icons #t-brake::after{font-size:1.9rem}