/* ══ Oman Racer — design tokens ══ */
:root{
  --bg:#0b0a14;
  --bg-2:#141026;
  --muted:#241d33;
  --primary:#dc2626;
  --primary-dark:#8f1414;
  --secondary:#2563eb;
  --accent:#22c55e;
  --accent-2:#fbbf24;
  --fg:#f6f4ff;
  --fg-dim:#a49fc4;
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.22);
  --sand:#e0a45e;
  --shadow:0 18px 60px rgba(0,0,0,.65);
  --glow-red:0 0 24px rgba(220,38,38,.45);
  --r-sm:6px; --r:12px; --r-lg:20px;
  --mono:'Share Tech Mono',ui-monospace,monospace;
  --code:'Fira Code',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(220,38,38,.20), transparent 60%),
    radial-gradient(ellipse 60% 45% at 90% 110%, rgba(37,99,235,.22), transparent 60%),
    var(--bg);
  color:var(--fg);
  font-family:var(--code);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100dvh;
  overflow:hidden;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
i,svg{display:block}
.stage{
  position:relative;
  width:min(100vw,calc(100dvh * 1.7778),1180px);
  aspect-ratio:16/9;
  max-height:100dvh;
  font-size:clamp(8px,1.32vw,15px);
  border-radius:var(--r);
  overflow:hidden;
  background:#05040a;
  box-shadow:var(--shadow),0 0 0 2px rgba(255,255,255,.06),0 0 60px rgba(220,38,38,.12);
}
#game{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  background:#05040a;
  touch-action:none;
}
.scanlines{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.55;
}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:3;box-shadow:inset 0 0 12em rgba(0,0,0,.75)}
.is-hidden{display:none!important}

/* ══ HUD ══ */
.hud{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:1.1em 1.2em 1em;
  font-family:var(--mono);
  text-shadow:0 .12em 0 rgba(0,0,0,.85),.08em 0 0 rgba(0,0,0,.6);
}
.hud-top,.hud-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:1em}
.hud-bottom{align-items:flex-end}
.hud-cell{display:flex;flex-direction:column;gap:.1em;min-width:6em}
.hud-center{text-align:center;align-items:center;flex:1}
.hud-right{text-align:right;align-items:flex-end}
.hud-label{font-size:.72em;letter-spacing:.18em;color:var(--fg-dim);text-transform:uppercase}
.hud-value{font-size:1.5em;line-height:1;color:var(--fg);letter-spacing:.02em}
.hud-value b{font-weight:400}
.hud-value small{font-size:.55em;color:var(--fg-dim);margin-left:.25em}
.hud-sub{font-size:.72em;letter-spacing:.12em;color:var(--fg-dim)}
#hud-speed{color:var(--fg)}
.is-fast #hud-speed{color:var(--accent-2);text-shadow:0 0 .5em rgba(251,191,36,.6)}
#hud-time,#hud-score{color:var(--sand)}
.is-danger #hud-time{color:var(--primary);animation:blink .5s steps(2,end) infinite}
.hud-banner{
  align-self:center;margin-top:-1.4em;
  padding:.2em 1.2em;border:2px solid var(--accent);border-radius:.3em;
  background:rgba(6,20,12,.72);
  color:var(--accent);font-size:1.05em;letter-spacing:.24em;
  animation:banner 1.4s ease forwards;
}
@keyframes banner{0%{opacity:0;transform:translateY(-.6em) scale(.9)}18%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}
.prog{flex:1;display:flex;flex-direction:column;gap:.35em;padding:0 1em;margin-bottom:.1em}
.prog-track{
  position:relative;height:.62em;border-radius:999px;
  background:rgba(0,0,0,.55);
  border:1px solid var(--border-strong);
  overflow:visible;
}
.prog-fill{
  height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--secondary),var(--accent));
  box-shadow:0 0 .6em rgba(34,197,94,.6);
  transition:width .18s linear;
}
.prog-ticks{position:absolute;inset:0}
.tick{position:absolute;top:-.28em;width:2px;height:1.18em;background:var(--sand);transform:translateX(-1px)}
.tick.passed{background:var(--accent)}
.prog-meta{display:flex;justify-content:space-between;font-size:.7em;letter-spacing:.16em;color:var(--fg-dim)}

/* ══ Overlay screens ══ */
.overlay{
  position:absolute;inset:0;z-index:6;
  display:grid;place-items:center;padding:1.2em;
  background:
    radial-gradient(ellipse 70% 70% at 50% 45%, rgba(6,4,14,.55), rgba(4,3,10,.92));
  backdrop-filter:blur(2px);
}
.overlay.is-hidden{display:none}
.panel{
  display:none;width:min(100%,44em);
  padding:1.6em 1.9em;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(20,16,38,.92),rgba(9,8,20,.94));
  border:1px solid var(--border);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06);
  text-align:center;animation:pop .28s ease-out;
}
.panel.is-active{display:block}
@keyframes pop{from{opacity:0;transform:translateY(.8em) scale(.97)}to{opacity:1;transform:none}}
.panel.is-wide{width:min(100%,52em)}
.kicker{font-family:var(--mono);font-size:.72em;letter-spacing:.34em;color:var(--primary);text-transform:uppercase}
.title{
  font-family:var(--mono);font-size:3.5em;line-height:.92;letter-spacing:.02em;
  margin:.1em 0 0;color:var(--fg);
  text-shadow:0 0 .5em rgba(220,38,38,.35),.06em .06em 0 var(--primary-dark);
}
.title em{display:block;font-style:normal;color:var(--primary);text-shadow:0 0 .55em rgba(220,38,38,.55)}
.title-ar{font-family:var(--mono);font-size:1.05em;color:var(--sand);margin-top:.35em;direction:rtl}
.title-sm{font-family:var(--mono);font-size:1.9em;letter-spacing:.02em;margin:.1em 0 .3em}
.lede{font-size:.86em;color:var(--fg-dim);max-width:34em;margin:.5em auto 0;line-height:1.65}
.row{display:flex;gap:.7em;justify-content:center;flex-wrap:wrap;margin-top:1.2em}
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.72em 1.4em;border-radius:999px;
  font-family:var(--mono);font-size:.88em;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
}
.btn svg{width:1.05em;height:1.05em}
.btn-primary{background:linear-gradient(135deg,var(--primary),#ff6a3d);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 .5em 1.4em rgba(220,38,38,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 .8em 1.8em rgba(220,38,38,.5)}
.btn-ghost{border:1px solid var(--border-strong);color:var(--fg)}
.btn-ghost:hover{background:rgba(255,255,255,.07);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ══ Segmented control / meta ══ */
.seg{display:inline-flex;gap:.2em;margin-top:1.1em;padding:.25em;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid var(--border)}
.seg-btn{font-family:var(--mono);font-size:.74em;letter-spacing:.16em;padding:.45em 1em;border-radius:999px;color:var(--fg-dim);transition:all .18s}
.seg-btn:hover{color:var(--fg)}
.seg-btn.is-on{background:linear-gradient(135deg,var(--secondary),#3b82f6);color:#fff;box-shadow:0 0 .8em rgba(37,99,235,.5)}
.mini{display:flex;align-items:center;justify-content:center;gap:.6em;flex-wrap:wrap;margin-top:1em;font-family:var(--mono);font-size:.72em;letter-spacing:.14em;color:var(--fg-dim)}
.mini>span{display:inline-flex;align-items:center;gap:.35em}
.mini svg{width:1.1em;height:1.1em;color:var(--sand)}
.mini .sep{opacity:.4}
.mini b{color:var(--sand)}
#btn-help,#btn-sound{cursor:pointer;border-bottom:1px dashed var(--border-strong);transition:color .18s}
#btn-help:hover,#btn-sound:hover{color:var(--fg)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.6em;margin-top:1.1em}
.stat{background:rgba(255,255,255,.045);border:1px solid var(--border);border-radius:var(--r-sm);padding:.7em .8em;text-align:left}
.stat dt{font-family:var(--mono);font-size:.66em;letter-spacing:.18em;color:var(--fg-dim);text-transform:uppercase}
.stat dd{font-family:var(--mono);font-size:1.25em;color:var(--sand)}
.keys{list-style:none;display:grid;gap:.5em;margin:1.1em auto 0;max-width:30em}
.keys li{display:flex;align-items:center;gap:.5em;font-size:.8em;color:var(--fg-dim)}
.keys em{font-style:normal;margin-left:auto;text-align:right}
.kbd{
  display:inline-flex;align-items:center;justify-content:center;gap:.15em;min-width:2em;height:1.9em;padding:0 .45em;
  border-radius:var(--r-sm);background:rgba(255,255,255,.08);
  border:1px solid var(--border-strong);border-bottom-width:2px;
  font-family:var(--mono);font-size:.82em;color:var(--fg);
}
.kbd svg{width:1em;height:1em}
.kbd-wide{min-width:3.6em}

/* ══ Touch pads ══ */
.touch{position:absolute;inset:0;z-index:5;pointer-events:none}
.pad{
  position:absolute;bottom:1.6em;pointer-events:auto;
  width:4.2em;height:4.2em;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(10,8,20,.55);border:1px solid var(--border-strong);
  backdrop-filter:blur(6px);color:rgba(255,255,255,.85);
  transition:transform .1s,background .1s;
}
.pad svg{width:1.8em;height:1.8em}
.pad.is-down{background:rgba(220,38,38,.55);transform:scale(.94)}
.pad-left{left:1.2em}
.pad-right{left:6em}
.pad-brake{right:6em}
.pad-gas{right:1.2em;background:rgba(34,197,94,.28)}
.pad-gas.is-down{background:rgba(34,197,94,.65)}

/* ══ Boot + misc ══ */
.boot{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:var(--bg);transition:opacity .5s ease}
.boot.is-done{opacity:0;pointer-events:none}
.boot-text{font-family:var(--mono);font-size:clamp(11px,1.4vw,15px);letter-spacing:.35em;color:var(--accent)}
.dots{animation:blink .8s steps(4,end) infinite}
.noscript{padding:2rem;text-align:center;font-family:var(--mono)}
.err{
  position:absolute;left:0;right:0;bottom:0;z-index:30;padding:.7em 1em;
  background:rgba(120,10,10,.92);font-family:var(--mono);font-size:.72em;color:#fff;
  max-height:40%;overflow:auto;white-space:pre-wrap;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
.hint{
  position:absolute;left:50%;bottom:.6em;transform:translateX(-50%);z-index:5;
  font-family:var(--mono);font-size:.66em;letter-spacing:.22em;color:rgba(255,255,255,.5);
  pointer-events:none;animation:blink 1.6s ease-in-out infinite;
}

/* ══ Responsive ══ */
@media (hover:none) and (pointer:coarse){
  .touch{display:block}
  .hint{display:none}
}
@media (max-width:880px){
  .title{font-size:2.9em}
  .panel{padding:1.2em 1.2em}
  .overlay{padding:.7em}
  .lede{font-size:.8em}
  .keys{max-width:100%}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .title{font-size:2.4em}
  .stats{grid-template-columns:1fr}
  .hud-value{font-size:1.25em}
  .kicker{letter-spacing:.2em}
  .keys li{font-size:.72em}
  .pad{width:3.6em;height:3.6em}
}
@media (orientation:portrait){
  .stage{width:100vw;max-height:none}
}
@media (max-height:460px){
  .overlay{padding:.4em}
  .lede,.mini{margin-top:.45em}
  .row{margin-top:.6em}
  .btn{padding:.5em 1em;font-size:.78em}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .scanlines{display:none}
}