/* ===========================================================
   أسطورة الشوارع — desert sunset racer
   Palette: sand #EBC79B · asphalt #4A4340 · clay #C4674A
            lilac #B9A7DA · peach #F7CBA6 · mint #9EDCC3
            card ivory #FAF3EA · ink #2E2A44
   =========================================================== */

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  overscroll-behavior:none;
}

body{
  font-family:'Tajawal','Segoe UI',system-ui,-apple-system,sans-serif;
  background:#F0D2B4;
  color:#2E2A44;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
}

#game-root{
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}

.hidden{ display:none !important; }

/* ---------------- HUD ---------------- */
.hud{
  flex:0 0 auto;
  position:relative;
  z-index:30;
  background:rgba(250,243,234,.94);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(46,42,68,.10);
  padding:6px 10px 0;
}

.hud-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:40px;
}

.stat{ display:flex; flex-direction:column; line-height:1; min-width:0; }
.stat-label{
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.02em;
  color:#82786F;
  margin-bottom:2px;
}
.stat-value{
  font-size:19px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  color:#2E2A44;
  white-space:nowrap;
}
.stat-value.small{ font-size:15px; }

.mult{
  margin-inline-start:2px;
  padding:4px 9px;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  background:#EFE4D2;
  color:#6E6459;
  transition:background .18s ease, color .18s ease, transform .18s ease;
  white-space:nowrap;
}
.mult.hot{
  background:#9EDCC3;
  color:#14412F;
  transform:scale(1.06);
  box-shadow:0 0 0 3px rgba(158,220,195,.35);
}

.stat-speed{ margin-inline-start:auto; }

.lives{ display:flex; gap:3px; }
.heart{ width:17px; height:17px; display:block; color:#C4674A; transition:opacity .2s ease, color .2s ease; }
.heart svg{ width:100%; height:100%; fill:currentColor; display:block; }
.heart.lost{ color:#C9BFB2; opacity:.55; }

.icon-btn{
  width:36px; height:36px;
  flex:0 0 auto;
  display:grid; place-items:center;
  border:none; border-radius:12px;
  background:#EFE4D2; color:#4A4340;
  cursor:pointer;
  transition:transform .12s ease, background .16s ease;
}
.icon-btn svg{ width:18px; height:18px; fill:currentColor; }
.icon-btn:active{ transform:scale(.94); background:#E2D4BE; }

.timebar{
  height:6px;
  border-radius:999px;
  background:#E6D9C6;
  overflow:hidden;
  margin:6px 0 6px;
}
.timefill{
  height:100%;
  width:100%;
  background:#9EDCC3;
  border-radius:999px;
  transform-origin:right center;
  transition:background .25s linear;
}

/* ---------------- STAGE ---------------- */
.stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:#B9A7DA;
}
.stage canvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
}

/* ---------------- OVERLAYS ---------------- */
/* Scroll-safe overlay: justify-content:center clipped the top of a tall menu
   on short viewports (the Start button ended up above the scroll origin and
   could not be reached). Start-align, and let `safe center` centre it only
   when it actually fits. */
.overlay{
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  justify-content:safe center;
  padding:12px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg, rgba(46,42,68,.10), rgba(46,42,68,.30));
}

.panel{
  width:100%;
  max-width:430px;
  margin:auto;
  background:#FAF3EA;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 18px 44px rgba(46,42,68,.30);
  padding:16px;
}

.menu-panel{ display:flex; flex-direction:column; gap:10px; }

.brand{ text-align:center; padding-top:2px; }
.brand-kicker{
  margin:0 0 2px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  color:#9A8F84;
}
.brand h1{
  margin:0;
  font-size:27px;
  font-weight:900;
  line-height:1.15;
  color:#2E2A44;
}

.best-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#F1E5D2;
  border-radius:14px;
  padding:9px 13px;
  font-size:13px;
  font-weight:700;
  color:#6E6459;
}
.best-row strong{
  font-size:17px;
  font-weight:900;
  color:#2E2A44;
  font-variant-numeric:tabular-nums;
}

.sec-title{
  margin:2px 0 -2px;
  font-size:12px;
  font-weight:800;
  color:#8A7F74;
  letter-spacing:.02em;
}

.car-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
}
.car-card{
  display:flex;
  flex-direction:column;
  gap:1px;
  align-items:flex-start;
  text-align:start;
  font-family:inherit;
  padding:9px 11px;
  min-height:54px;
  border-radius:14px;
  border:2px solid transparent;
  background:#F1E5D2;
  color:#2E2A44;
  cursor:pointer;
  transition:transform .12s ease, border-color .16s ease, background .16s ease;
}
.car-card:active{ transform:scale(.975); }
.car-card.active{
  background:#FFFFFF;
  border-color:#2E2A44;
  box-shadow:0 4px 0 rgba(46,42,68,.12);
}
.car-name{ font-size:14px; font-weight:900; }
.car-tag{ font-size:10.5px; font-weight:500; color:#8A7F74; }

.paint-row{ display:flex; gap:8px; flex-wrap:wrap; }
.swatch{
  width:38px; height:38px;
  border-radius:12px;
  border:2px solid rgba(46,42,68,.14);
  cursor:pointer;
  padding:0;
  transition:transform .12s ease, box-shadow .16s ease;
}
.swatch:active{ transform:scale(.92); }
.swatch.active{
  box-shadow:0 0 0 3px #FAF3EA, 0 0 0 5px #2E2A44;
}

.seg{
  display:flex;
  gap:6px;
  background:#F1E5D2;
  padding:4px;
  border-radius:14px;
}
.seg-btn{
  flex:1 1 0;
  min-height:42px;
  border:none;
  border-radius:11px;
  background:transparent;
  color:#7A6F64;
  font-family:inherit;
  font-size:13.5px;
  font-weight:800;
  cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.seg-btn.active{
  background:#FFFFFF;
  color:#2E2A44;
  box-shadow:0 2px 6px rgba(46,42,68,.14);
}

.btn{
  font-family:inherit;
  font-weight:900;
  font-size:16px;
  border:none;
  border-radius:16px;
  min-height:52px;
  padding:12px 20px;
  cursor:pointer;
  transition:transform .1s ease, box-shadow .16s ease, background .16s ease;
  display:block;
  width:100%;
}
.btn:active{ transform:translateY(3px); }
.btn:focus-visible,
.icon-btn:focus-visible,
.ctl:focus-visible,
.car-card:focus-visible,
.swatch:focus-visible,
.seg-btn:focus-visible{
  outline:3px solid #7F6CC0;
  outline-offset:2px;
}
.btn-block{ margin-top:2px; }
.btn-primary{
  background:#7FD3B4;
  color:#12382B;
  box-shadow:0 5px 0 #5CB995;
}
.btn-primary:active{ box-shadow:0 2px 0 #5CB995; }
.btn-ghost{
  background:#EFE4D2;
  color:#3A3352;
  box-shadow:0 5px 0 #D9C9AF;
}
.btn-ghost:active{ box-shadow:0 2px 0 #D9C9AF; }

.hint{
  margin:0;
  font-size:12px;
  line-height:1.55;
  color:#8A7F74;
  text-align:center;
}

/* ---------- game over ---------- */
.over-panel{
  display:flex;
  flex-direction:column;
  gap:9px;
  text-align:center;
  padding:18px 16px;
}
.over-kicker{
  margin:0;
  font-size:12.5px;
  font-weight:800;
  color:#9A8F84;
  letter-spacing:.03em;
}
.over-score{
  font-size:52px;
  font-weight:900;
  line-height:1;
  color:#2E2A44;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.over-label{
  margin:-6px 0 0;
  font-size:12px;
  font-weight:700;
  color:#A2968A;
}
.over-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:2px;
}
.over-stats > div{
  background:#F1E5D2;
  border-radius:14px;
  padding:9px 8px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.over-stats span{ font-size:10.5px; font-weight:700; color:#8A7F74; }
.over-stats strong{ font-size:15px; font-weight:900; color:#2E2A44; font-variant-numeric:tabular-nums; }

.newbest{
  background:#9EDCC3;
  color:#12382B;
  font-weight:900;
  font-size:13px;
  padding:8px;
  border-radius:12px;
}

.lb{
  background:#F1E5D2;
  border-radius:14px;
  padding:9px 11px;
  text-align:start;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.lb-title{ margin:0 0 2px; font-size:11.5px; font-weight:900; color:#8A7F74; }
.lb-row{ display:flex; justify-content:space-between; gap:8px; font-size:12.5px; font-weight:700; color:#3A3352; }
.lb-row.me{ color:#14412F; }
.lb-row .rk{ color:#A2968A; font-weight:900; min-width:16px; }
.lb-row .sc{ font-variant-numeric:tabular-nums; }
.lb-note{ margin:2px 0 0; font-size:10px; color:#A2968A; }

.pause-panel{ display:flex; flex-direction:column; gap:10px; text-align:center; }
.pause-panel h2{ margin:0; font-size:20px; font-weight:900; }

/* ---------------- CONTROLS ---------------- */
.controls{
  flex:0 0 auto;
  position:relative;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 14px;
  background:#FAF3EA;
  border-top:1px solid rgba(46,42,68,.10);
}
.cluster{ display:flex; align-items:center; gap:10px; }

.ctl{
  border:none;
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  color:#2E2A44;
  transition:transform .07s ease, background .12s ease, box-shadow .12s ease;
  touch-action:none;
}
.ctl svg{ width:56%; height:56%; }

.ctl-steer{
  width:64px; height:64px;
  background:#EFE4D2;
  box-shadow:0 4px 0 #D6C5A9, inset 0 1px 0 rgba(255,255,255,.7);
}
.ctl-steer:active,
.ctl-steer.pressed{
  transform:translateY(3px);
  background:#E2D4BE;
  box-shadow:0 1px 0 #D6C5A9;
}

.ctl-brake{
  width:56px; height:56px;
  background:#F3DDD3;
  color:#8C4433;
  box-shadow:0 4px 0 #DCC0B2, inset 0 1px 0 rgba(255,255,255,.7);
}
.ctl-brake:active,
.ctl-brake.pressed{
  transform:translateY(3px);
  background:#EBCFC2;
  box-shadow:0 1px 0 #DCC0B2;
}

.ctl-gas{
  width:72px; height:72px;
  background:#7FD3B4;
  color:#12382B;
  box-shadow:0 5px 0 #5CB995, inset 0 1px 0 rgba(255,255,255,.55);
}
.ctl-gas:active,
.ctl-gas.pressed{
  transform:translateY(4px);
  background:#6EC7A6;
  box-shadow:0 1px 0 #5CB995;
}

/* ---------------- responsive ---------------- */
@media (max-height:520px){
  .hud{ padding:4px 8px 0; }
  .hud-row{ min-height:32px; gap:6px; }
  .stat-value{ font-size:15px; }
  .stat-value.small{ font-size:13px; }
  .stat-label{ font-size:8px; }
  .heart{ width:14px; height:14px; }
  .icon-btn{ width:30px; height:30px; border-radius:10px; }
  .mult{ font-size:12px; padding:3px 7px; }
  .timebar{ height:5px; margin:4px 0 4px; }

  .controls{ padding:6px 10px; gap:8px; }
  .ctl-steer{ width:54px; height:54px; }
  .ctl-brake{ width:48px; height:48px; }
  .ctl-gas{ width:58px; height:58px; }

  .panel{ padding:12px; border-radius:18px; }
  .brand h1{ font-size:22px; }
  .over-score{ font-size:40px; }
  .btn{ min-height:46px; font-size:14.5px; }
  .seg-btn{ min-height:38px; }
}

@media (min-width:720px){
  .panel{ max-width:480px; }
  .brand h1{ font-size:32px; }
  .car-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ===========================================================
   المدرّب الصوتي + تخصيص الأنوار والشكل
   =========================================================== */

/* ---------- coach card (menu) ---------- */
.coach{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:linear-gradient(135deg,#FBEEDC,#F2E0C6);
  border:1px solid rgba(196,103,74,.22);
  border-radius:18px;
  padding:10px 10px 10px 12px;
}
.coach-avatar{
  position:relative;
  flex:0 0 auto;
  width:56px; height:56px;
  border-radius:50%;
  overflow:hidden;
  background:radial-gradient(circle at 50% 28%, #F7CBA6, #C4674A);
  box-shadow:0 0 0 3px #FAF3EA, 0 0 0 5px rgba(196,103,74,.30);
  transition:transform .18s ease;
}
.coach-avatar img{ width:100%; height:100%; object-fit:cover; object-position:50% 16%; display:block; }
.coach-avatar.noimg::after{
  content:'ر';
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:25px; font-weight:900; color:#FAF3EA;
}
.coach-body{ flex:1 1 auto; min-width:0; }
.coach-name{
  font-size:13px; font-weight:900; color:#2E2A44;
  display:flex; align-items:center; gap:6px;
}
.coach-name span{ font-size:9.5px; font-weight:700; color:#9A8F84; }
.coach-line{ margin:3px 0 0; font-size:12.5px; line-height:1.55; color:#5B5147; }
.coach.pop .coach-line{ animation:coachPop .34s ease both; }
@keyframes coachPop{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.coach.talking .coach-avatar{ animation:coachTalk .6s ease-in-out infinite; }
@keyframes coachTalk{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }

.voice-btn{
  flex:0 0 auto;
  width:36px; height:36px;
  border:none; border-radius:12px;
  background:#FFFFFF; color:#2E2A44;
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow:0 2px 0 rgba(46,42,68,.14);
  transition:background .16s ease, color .16s ease, transform .1s ease;
}
.voice-btn svg{ width:19px; height:19px; fill:currentColor; }
.voice-btn .ico-off{ display:none; }
.voice-btn.muted{ background:#EFE4D2; color:#9A8F84; }
.voice-btn.muted .ico-on{ display:none; }
.voice-btn.muted .ico-off{ display:block; }
.voice-btn:active{ transform:scale(.94); }

/* ---------- coach chip during the race ---------- */
.coach-live{
  position:absolute;
  inset-inline-start:10px;
  bottom:10px;
  z-index:12;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:min(80%,330px);
  padding:6px 11px 6px 6px;
  border-radius:16px;
  background:rgba(250,243,234,.93);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(46,42,68,.22);
  pointer-events:none;
}
.coach-live-avatar{
  position:relative;
  flex:0 0 auto;
  width:32px; height:32px;
  border-radius:50%;
  overflow:hidden;
  background:radial-gradient(circle at 50% 26%, #F7CBA6, #C4674A);
}
.coach-live-avatar img{ width:100%; height:100%; object-fit:cover; object-position:50% 16%; display:block; }
.coach-live-avatar.noimg::after{
  content:'ر';
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:15px; font-weight:900; color:#FAF3EA;
}
.coach-live p{ margin:0; font-size:11.5px; line-height:1.45; font-weight:700; color:#3A3352; }

.over-coach{
  margin:0;
  font-size:12.5px;
  line-height:1.5;
  font-weight:700;
  color:#6E6459;
  background:#F6EBD8;
  border-radius:12px;
  padding:8px 10px;
}

/* ---------- headlights ---------- */
.light-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.head-row{ flex:1 1 130px; }
.lights-toggle{
  display:flex; align-items:center; gap:7px;
  min-height:42px; padding:8px 12px;
  border:2px solid transparent; border-radius:14px;
  background:#FFF6DC; color:#5B4A1E;
  font-family:inherit; font-size:12.5px; font-weight:900;
  cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease, transform .1s ease;
}
.lights-toggle:active{ transform:scale(.97); }
.lights-dot{
  width:10px; height:10px; border-radius:50%;
  background:#F2C14E;
  box-shadow:0 0 10px 2px rgba(242,193,78,.85);
}
.lights-toggle.off{ background:#EFE4D2; color:#8A7F74; border-color:rgba(46,42,68,.12); }
.lights-toggle.off .lights-dot{ background:#B6A99A; box-shadow:none; }

.slider-row{
  display:flex; align-items:center; gap:10px;
  background:#F1E5D2; border-radius:14px;
  padding:8px 12px;
  font-size:12px; font-weight:800; color:#6E6459;
}
.slider-row span{ flex:0 0 auto; }
.slider-row input[type=range]{
  flex:1 1 auto; min-width:0; height:24px;
  direction:ltr;
  -webkit-appearance:none; appearance:none;
  background:transparent; cursor:pointer;
}
.slider-row input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#C4674A,#F2C14E,#FFF3D0);
}
.slider-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; margin-top:-7px;
  border-radius:50%; background:#FAF3EA; border:3px solid #2E2A44;
}
.slider-row input[type=range]::-moz-range-track{
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#C4674A,#F2C14E,#FFF3D0);
}
.slider-row input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:#FAF3EA; border:3px solid #2E2A44;
}

/* ---------- body kits + rims ---------- */
.kit-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.kit-card{
  display:flex; flex-direction:column; gap:1px;
  align-items:flex-start; text-align:start;
  font-family:inherit;
  padding:8px 9px; min-height:52px;
  border-radius:14px;
  border:2px solid transparent;
  background:#F1E5D2; color:#2E2A44;
  cursor:pointer;
  transition:transform .12s ease, border-color .16s ease, background .16s ease;
}
.kit-card:active{ transform:scale(.97); }
.kit-card.active{
  background:#FFFFFF; border-color:#2E2A44;
  box-shadow:0 4px 0 rgba(46,42,68,.12);
}
.kit-name{ font-size:12.5px; font-weight:900; }
.kit-tag{ font-size:9.5px; font-weight:500; color:#8A7F74; }

.rim-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.rim-swatch{
  width:44px; height:44px;
  border-radius:50%;
  border:2px solid rgba(46,42,68,.14);
  cursor:pointer; padding:0;
  transition:transform .12s ease, box-shadow .16s ease;
}
.rim-swatch:active{ transform:scale(.93); }
.rim-swatch.active{ box-shadow:0 0 0 3px #FAF3EA, 0 0 0 5px #2E2A44; }

.swatch{
  width:38px; height:38px;
}
.kit-card:focus-visible,
.rim-swatch:focus-visible,
.lights-toggle:focus-visible,
.slider-row input[type=range]:focus-visible,
.voice-btn:focus-visible{
  outline:3px solid #7F6CC0;
  outline-offset:2px;
}

@media (max-height:520px){
  .coach{ padding:8px; gap:8px; border-radius:14px; }
  .coach-avatar{ width:44px; height:44px; }
  .coach-line{ font-size:11.5px; }
  .coach-name{ font-size:12px; }
  .coach-live{ padding:4px 8px 4px 4px; max-width:70%; }
  .coach-live-avatar{ width:26px; height:26px; }
  .coach-live p{ font-size:10.5px; }
  .rim-swatch{ width:38px; height:38px; }
  .kit-card{ min-height:46px; padding:6px 7px; }
  .kit-name{ font-size:11.5px; }
  .slider-row{ padding:6px 10px; }
}

/* ---------- short viewports (landscape phones, 390×220 editor preview):
   squeeze the menu header so «انطلق» sits inside the very first screen ---------- */
@media (max-height:620px){
  .overlay{ padding:10px; }
  .panel{ padding:12px; border-radius:18px; }
  .menu-panel{ gap:7px; }
  .brand{ padding-top:0; }
  .brand h1{ font-size:21px; }
}
@media (max-height:520px){
  .overlay{ padding:8px; }
  .panel{ padding:10px 12px; border-radius:16px; }
  .menu-panel{ gap:6px; }
  .brand-kicker{ display:none; }
  .brand h1{ font-size:18px; }
  .menu-panel .coach{ display:none; }
  .menu-panel .hint{ display:none; }
  .best-row{ padding:5px 10px; font-size:12px; border-radius:10px; }
  .best-row strong{ font-size:15px; }
  .menu-panel .btn-primary{ min-height:44px; font-size:15px; border-radius:13px; }
  .sec-title{ font-size:11px; margin-top:0; }
  .car-card{ min-height:48px; padding:7px 9px; }
  .swatch{ width:34px; height:34px; }
  .rim-swatch{ width:34px; height:34px; }
  .seg-btn{ min-height:38px; font-size:12.5px; }
}
@media (max-height:360px){
  .brand{ display:none; }
  .menu-panel{ gap:5px; }
  .btn{ min-height:42px; }
}