:root{
  --bg:#0F172A;
  --bg-deep:#070B14;
  --panel:rgba(16,25,45,.72);
  --line:rgba(255,255,255,.09);
  --red:#DC2626;
  --red-soft:#FF5C5C;
  --blue:#2563EB;
  --blue-soft:#60A5FA;
  --green:#22C55E;
  --text:#F8FAFC;
  --muted:#93A4C3;
  --font-ar:"Tajawal",system-ui,sans-serif;
  --font-num:"Orbitron",ui-monospace,monospace;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(37,99,235,.28), transparent 60%),
    radial-gradient(800px 600px at 90% 110%, rgba(220,38,38,.24), transparent 60%),
    var(--bg-deep);
  color:var(--text);
  font-family:var(--font-ar);
  display:flex;align-items:center;justify-content:center;
  padding:18px 14px 26px;
  overscroll-behavior:none;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(96,165,250,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(96,165,250,.06) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 40%,#000 20%,transparent 78%);
}
.stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px}
.frame{
  position:relative;
  width:min(460px, 94vw, 52.8vh);
  aspect-ratio:540/900;
  border-radius:26px;
  overflow:hidden;
  background:#050810;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 30px 80px -20px rgba(0,0,0,.9),
             0 0 60px -12px rgba(37,99,235,.45);
  touch-action:none;
}
canvas{display:block;width:100%;height:100%}
.credit{margin:0;font-size:12px;color:var(--muted);letter-spacing:.2px}
/* ---------- HUD ---------- */
.hud{
  position:absolute;inset:0 0 auto 0;z-index:3;padding:12px 14px 0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(5,8,16,.86),rgba(5,8,16,.35) 70%,transparent);
}
.hud-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.stat{display:flex;flex-direction:column;gap:2px;min-width:76px}
.stat--center{align-items:center}
.stat--end{align-items:flex-end}
.stat-label{font-size:10px;letter-spacing:1.4px;color:var(--muted);text-transform:uppercase}
.stat-value{
  font-family:var(--font-num);font-weight:900;font-size:22px;line-height:1.05;
  color:#fff;text-shadow:0 0 14px rgba(96,165,250,.55);
  font-variant-numeric:tabular-nums;direction:ltr;
}
.unit{font-family:var(--font-ar);font-size:10px;font-weight:700;color:var(--muted);margin-inline-start:3px}
.lives{display:flex;gap:4px;direction:ltr;padding-top:3px}
.heart{
  width:15px;height:15px;border-radius:4px;background:var(--red);
  box-shadow:0 0 10px rgba(220,38,38,.8);transition:.25s;
}
.heart.is-dead{background:rgba(255,255,255,.12);box-shadow:none;transform:scale(.82)}
.nitro-row{display:flex;align-items:center;gap:8px;margin-top:8px;pointer-events:auto}
.nitro-label{font-size:10px;letter-spacing:1.2px;color:var(--blue-soft);font-weight:700}
.nitro-track{flex:1;height:7px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.nitro-fill{
  height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),#22D3EE 60%,#A5F3FC);
  box-shadow:0 0 12px rgba(34,211,238,.9);transition:width .12s linear;
}
.nitro-fill.is-hot{background:linear-gradient(90deg,#F59E0B,#FDE68A);box-shadow:0 0 14px rgba(253,224,71,.9)}
.icon-btn{
  width:30px;height:30px;display:grid;place-items:center;padding:0;
  border-radius:9px;cursor:pointer;color:var(--text);
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  transition:background .18s,transform .18s;
}
.icon-btn:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.icon-btn svg{width:15px;height:15px}
/* ---------- Overlays ---------- */
.overlay{
  position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;
  padding:22px 18px;
  background:radial-gradient(circle at 50% 30%,rgba(7,11,20,.72),rgba(4,7,14,.94));
  backdrop-filter:blur(9px);
  transition:opacity .28s ease,visibility .28s;
}
.overlay.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.panel{
  width:100%;max-width:360px;text-align:center;
  padding:26px 20px 22px;border-radius:22px;
  background:linear-gradient(180deg,rgba(23,34,58,.9),rgba(12,19,34,.94));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07);
  animation:pop .34s cubic-bezier(.2,.9,.3,1.2) both;
}
.panel--sm{max-width:330px}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.eyebrow{
  margin:0 0 8px;font-family:var(--font-mono);font-size:10px;letter-spacing:3px;
  color:var(--blue-soft);text-transform:uppercase;
}
.title{
  margin:0;font-size:42px;line-height:1;font-weight:900;letter-spacing:-1px;
  color:#fff;text-shadow:0 0 26px rgba(220,38,38,.45);
}
.title span{color:var(--red-soft);text-shadow:0 0 26px rgba(220,38,38,.85)}
.panel-title{margin:0 0 6px;font-size:26px;font-weight:900;color:#fff;letter-spacing:-.5px}
.lead{margin:10px 0 0;font-size:13.5px;line-height:1.65;color:var(--muted)}
.difficulty{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 12px}
.diff{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 4px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--text);font-family:var(--font-ar);font-size:13px;font-weight:700;
  transition:.2s;
}
.diff small{font-family:var(--font-mono);font-size:9.5px;color:var(--muted)}
.diff:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.diff.is-active{
  background:linear-gradient(180deg,rgba(220,38,38,.28),rgba(220,38,38,.12));
  border-color:rgba(255,92,92,.6);box-shadow:0 0 18px -4px rgba(220,38,38,.8);
}
.diff.is-active small{color:#FCA5A5}
.records{display:grid;gap:6px;margin:4px 0 16px;font-family:var(--font-mono);font-size:11.5px}
.records--single{margin:16px 0 18px}
.rec-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 11px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
}
.rec-row b{color:#fff;font-weight:700;direction:ltr}
.rec-row span{color:var(--muted);display:flex;align-items:center;gap:6px}
.rec-row svg{width:12px;height:12px;color:#FBBF24}
.rec-row.is-best{border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.09)}
.cta{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 18px;border:0;border-radius:14px;cursor:pointer;
  font-family:var(--font-ar);font-size:16px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,var(--red),#B91C1C);
  box-shadow:0 12px 30px -10px rgba(220,38,38,.9),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .18s,box-shadow .18s,filter .18s;
}
.cta:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 18px 38px -12px rgba(220,38,38,.95)}
.cta:active{transform:translateY(0) scale(.985)}
.cta svg{width:17px;height:17px}
.ghost{
  width:100%;margin-top:9px;padding:11px;border-radius:12px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--muted);
  font-family:var(--font-ar);font-size:13px;font-weight:700;transition:.18s;
}
.ghost:hover{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.05)}
.keys{margin:14px 0 0;font-size:11px;color:var(--muted);line-height:2}
kbd{
  font-family:var(--font-mono);font-size:10px;padding:2px 6px;margin:0 1px;
  border-radius:5px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);border-bottom-width:2px;color:#E2E8F0;
}
/* ---------- Touch controls ---------- */
.touch{
  position:absolute;inset:auto 0 0 0;z-index:4;
  display:none;align-items:center;justify-content:space-between;gap:10px;
  padding:0 14px 16px;direction:ltr;pointer-events:none;
}
.tbtn{
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;pointer-events:auto;color:#fff;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  transition:transform .12s,background .12s;
  -webkit-tap-highlight-color:transparent;touch-action:none;
}
.tbtn svg{width:26px;height:26px}
.tbtn:active,.tbtn.is-down{transform:scale(.92);background:rgba(255,255,255,.24)}
.tbtn--nitro{
  width:74px;height:74px;background:rgba(37,99,235,.3);
  border-color:rgba(96,165,250,.55);color:#BFDBFE;
  box-shadow:0 0 24px -4px rgba(37,99,235,.9);
}
.tbtn--nitro:active,.tbtn--nitro.is-down{background:rgba(37,99,235,.6);color:#fff}
@media (hover:none),(max-width:780px){
  .touch{display:flex}
  .frame{width:min(94vw, 50.4vh)}
}
@media (max-height:720px){
  .hud{padding-top:9px}
  .stat-value{font-size:19px}
  .title{font-size:34px}
  .panel{padding:20px 16px 18px}
  .lead{font-size:12.5px}
  .tbtn{width:58px;height:58px}
  .tbtn--nitro{width:64px;height:64px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- inline icon wrappers ---------- */
[data-icon]{display:inline-flex;align-items:center;justify-content:center;line-height:0}