/* ===== تحطيم — Car Crash Arena · tokens ===== */
:root{
  --bg:#0F172A;
  --bg-deep:#070B14;
  --panel:rgba(17,24,39,.72);
  --panel-solid:#131A2A;
  --fg:#FFFFFF;
  --muted:#94A3B8;
  --primary:#DC2626;
  --primary-2:#F87171;
  --secondary:#2563EB;
  --accent:#22C55E;
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.22);
  --glow-red:0 0 24px rgba(220,38,38,.55);
  --glow-blue:0 0 22px rgba(37,99,235,.5);
  --glow-green:0 0 20px rgba(34,197,94,.5);
  --r:14px;
  --font-ar:'Cairo',system-ui,'Segoe UI',sans-serif;
  --font-num:'Orbitron','Cairo',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 15% -10%,rgba(37,99,235,.20),transparent 60%),
    radial-gradient(900px 600px at 95% 110%,rgba(220,38,38,.18),transparent 60%),
    var(--bg-deep);
  color:var(--fg);
  font-family:var(--font-ar);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
}
.stage{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  isolation:isolate;
}
#game{
  display:block;
  width:100%;
  height:100%;
  background:var(--bg);
  cursor:crosshair;
}
/* chamfered arcade frame */
.stage::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 120px rgba(0,0,0,.75);
  border:1px solid rgba(255,255,255,.05);
}

/* ===== HUD ===== */
.hud{
  position:absolute;
  inset-inline:0;
  top:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px clamp(12px,2.5vw,26px);
  pointer-events:none;
  z-index:5;
  flex-wrap:wrap;
}
.hud-card{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:92px;
  padding:9px 14px;
  background:var(--panel);
  backdrop-filter:blur(12px);
  border:1px solid var(--border);
  border-radius:var(--r);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.hud-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--muted);
}
.hud-value{
  font-family:var(--font-num);
  font-weight:900;
  font-size:clamp(18px,2.4vw,26px);
  line-height:1.05;
  color:#fff;
  text-shadow:var(--glow-red);
}
.hud-hp{ min-width:clamp(150px,26vw,240px); flex:1 1 150px; }
.hp-top{ display:flex; justify-content:space-between; align-items:baseline; }
.hp-pct{ font-family:var(--font-num); font-size:13px; font-weight:700; color:var(--accent); }
.hp-track{
  height:10px;
  margin-top:6px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1px solid var(--border);
  overflow:hidden;
}
.hp-fill{
  height:100%;
  width:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),#86EFAC);
  box-shadow:var(--glow-green);
  transition:width .18s var(--ease),background .3s linear;
}
.hp-fill.mid{ background:linear-gradient(90deg,#F59E0B,#FCD34D); box-shadow:0 0 20px rgba(245,158,11,.5); }
.hp-fill.low{ background:linear-gradient(90deg,var(--primary),var(--primary-2)); box-shadow:var(--glow-red); }
.hud-actions{ display:flex; gap:8px; margin-inline-start:auto; pointer-events:auto; }
.icon-btn{
  width:44px; height:44px;
  display:grid; place-items:center;
  color:#E2E8F0;
  background:var(--panel);
  backdrop-filter:blur(12px);
  border:1px solid var(--border);
  border-radius:12px;
  cursor:pointer;
  transition:transform .18s var(--ease),border-color .18s,color .18s,box-shadow .18s;
}
.icon-btn:hover{ transform:translateY(-2px); border-color:var(--border-strong); color:#fff; box-shadow:var(--glow-blue); }
.icon-btn:focus-visible{ outline:2px solid var(--secondary); outline-offset:2px; }
.icon-btn svg{ width:20px; height:20px; }
.icon-btn.off{ color:#64748B; }
.best-badge{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  z-index:5;
  padding:7px 16px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  color:#CBD5E1;
  background:var(--panel);
  backdrop-filter:blur(12px);
  border:1px solid var(--border);
  border-radius:999px;
  pointer-events:none;
}
.best-badge span{ font-family:var(--font-num); color:var(--accent); }

/* ===== Overlays & panels ===== */
.overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  background:radial-gradient(60% 60% at 50% 40%,rgba(7,11,20,.82),rgba(7,11,20,.96));
  backdrop-filter:blur(6px);
  z-index:10;
  opacity:0;
  visibility:hidden;
  transition:opacity .28s var(--ease),visibility .28s;
}
.overlay.show{ opacity:1; visibility:visible; }
.panel{
  width:min(620px,94vw);
  padding:clamp(22px,4vw,38px);
  text-align:center;
  background:linear-gradient(180deg,rgba(19,26,42,.92),rgba(11,16,28,.94));
  border:1px solid var(--border-strong);
  border-radius:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  animation:fadeUp .5s var(--ease) both;
}
.panel.small{ width:min(400px,92vw); }
.kicker{
  margin:0 0 6px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--primary-2);
}
.panel h1{
  margin:0 0 12px;
  font-family:var(--font-num);
  font-weight:900;
  font-size:clamp(40px,9vw,74px);
  letter-spacing:.06em;
  line-height:1;
  background:linear-gradient(180deg,#fff,#94A3B8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 40px rgba(220,38,38,.35);
}
.panel h2{
  margin:0 0 12px;
  font-family:var(--font-ar);
  font-weight:900;
  font-size:clamp(22px,4.6vw,32px);
}
.lead{
  margin:0 auto 20px;
  max-width:46ch;
  font-size:clamp(14px,2.2vw,16px);
  line-height:1.85;
  color:#CBD5E1;
}
.hint{ margin:14px 0 0; font-size:12.5px; color:var(--muted); }

/* ===== Buttons & keys ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 30px;
  font-family:var(--font-ar);
  font-size:16px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(180deg,var(--primary),#B91C1C);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  cursor:pointer;
  box-shadow:var(--glow-red),0 12px 30px rgba(0,0,0,.45);
  transition:transform .18s var(--ease),filter .18s,box-shadow .18s;
}
.btn:hover{ transform:translateY(-3px); filter:brightness(1.08); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.btn svg{ width:20px; height:20px; }
.btn.ghost{
  background:rgba(255,255,255,.06);
  border-color:var(--border-strong);
  box-shadow:none;
  color:#E2E8F0;
}
.btn.ghost:hover{ box-shadow:var(--glow-blue); }
.panel-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:22px;
}
.keys{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:0 0 26px;
  padding:0;
  list-style:none;
}
.keys li{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 13px;
  font-size:13px;
  font-weight:700;
  color:#CBD5E1;
  background:rgba(255,255,255,.045);
  border:1px solid var(--border);
  border-radius:10px;
}
kbd{
  font-family:var(--font-num);
  font-size:12px;
  padding:3px 8px;
  color:#fff;
  background:#0B1120;
  border:1px solid var(--border-strong);
  border-bottom-width:3px;
  border-radius:7px;
}
.result-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:22px 0 6px;
}
.result-box{
  padding:14px 8px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--border);
  border-radius:14px;
}
.result-label{ display:block; font-size:11.5px; font-weight:700; color:var(--muted); }
.result-box strong{
  display:block;
  margin-top:4px;
  font-family:var(--font-num);
  font-size:clamp(20px,4vw,28px);
  color:#fff;
}
.rank{ margin:14px 0 0; font-size:14px; font-weight:700; color:var(--accent); min-height:20px; }

/* ===== Touch controls ===== */
.touch{
  position:absolute;
  inset-inline:0;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  display:none;
  justify-content:space-between;
  align-items:flex-end;
  padding:0 clamp(12px,4vw,30px);
  z-index:6;
  pointer-events:none;
}
.stage.touch-on .touch{ display:flex; }
.pad{ display:flex; gap:10px; pointer-events:auto; }
.tbtn{
  width:clamp(62px,17vw,78px);
  height:clamp(62px,17vw,78px);
  display:grid;
  place-items:center;
  color:#E2E8F0;
  background:rgba(19,26,42,.72);
  backdrop-filter:blur(10px);
  border:1px solid var(--border-strong);
  border-radius:18px;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  transition:transform .12s var(--ease),background .12s,box-shadow .12s;
}
.tbtn svg{ width:26px; height:26px; }
.tbtn.go{ color:#fff; background:rgba(220,38,38,.72); box-shadow:var(--glow-red); }
.tbtn.on{ transform:scale(.92); background:rgba(37,99,235,.8); box-shadow:var(--glow-blue); }
.stage.touch-on .best-badge{ display:none; }

/* ===== Motion ===== */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px) scale(.98); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
@media (max-width:640px){
  .hud{ gap:8px; padding:10px 12px; }
  .hud-card{ min-width:74px; padding:7px 11px; }
  .hud-label{ font-size:11px; }
  .hud-hp{ order:9; flex-basis:100%; }
  .hud-actions{ gap:6px; }
  .icon-btn{ width:40px; height:40px; }
  .panel{ border-radius:18px; }
  .keys li{ padding:6px 10px; font-size:12px; }
  .btn{ padding:13px 22px; font-size:15px; }
}