/* ═══════════════════════════════════════════════════════════
   RUN 99 — City Survival Instrument Panel
   palette: charcoal #16181b · concrete #2b2e33 · white #e8ebee
            emergency blue #4a7ba6 / #6fa3cc · hazard #c9502e
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#e8ebee;
  --ink-dim:rgba(232,235,238,.55);
  --charcoal:#16181b;
  --concrete:#2b2e33;
  --blue:#6fa3cc;
  --blue-deep:#4a7ba6;
  --hazard:#c9502e;
  --mono:'JetBrains Mono',monospace;
  --sans:'Archivo',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#0c0d0f;font-family:var(--sans);color:var(--ink);
  -webkit-user-select:none;user-select:none}

#game-canvas{position:fixed;inset:0;width:100%;height:100%;display:block}

.hidden{display:none!important}

/* ─────────────── environmental screen-edge layers ─────────────── */
.env-layer{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:5}
#env-rain-edge{
  background:
    linear-gradient(180deg,rgba(20,28,36,.55) 0%,transparent 18%),
    linear-gradient(0deg,rgba(20,28,36,.4) 0%,transparent 14%),
    radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(14,20,26,.5) 100%);
  transition:opacity 2.5s ease;
}
#env-blackout-edge{
  background:radial-gradient(ellipse at 50% 46%,transparent 34%,rgba(0,0,0,.72) 88%);
  transition:opacity 2s ease;
}
#env-flood-edge{
  background:linear-gradient(0deg,rgba(38,58,72,.65) 0%,rgba(38,58,72,.22) 9%,transparent 22%);
  transition:opacity 1.5s ease;
}
#env-collapse-edge{
  background:
    radial-gradient(ellipse at 0% 50%,rgba(60,52,44,.5) 0%,transparent 26%),
    radial-gradient(ellipse at 100% 50%,rgba(60,52,44,.5) 0%,transparent 26%);
  transition:opacity 1s ease;
}
#env-damage-flash{background:rgba(201,80,46,.28);transition:opacity .12s ease;z-index:6}

/* ─────────────── HUD root ─────────────── */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;font-family:var(--mono)}

/* ── countdown instrument : the identity ── */
#countdown-instrument{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:min(560px,72vw);text-align:center;
}
#countdown-rail{
  position:relative;height:3px;background:rgba(232,235,238,.14);
  border-radius:2px;overflow:visible;
}
#countdown-fill{
  position:absolute;left:0;top:0;height:100%;width:100%;
  background:linear-gradient(90deg,var(--blue-deep),#d8dde2);
  border-radius:2px;transform-origin:left center;
  box-shadow:0 0 8px rgba(111,163,204,.35);
}
#countdown-ticks{position:absolute;inset:0}
#countdown-ticks i{
  position:absolute;top:-3px;width:1px;height:9px;background:rgba(232,235,238,.28);
}
#countdown-phase-markers{position:absolute;inset:0}
#countdown-phase-markers b{
  position:absolute;top:-6px;width:2px;height:15px;background:rgba(111,163,204,.0);
  transition:background .5s ease;
}
#countdown-phase-markers b.passed{background:rgba(111,163,204,.55)}
#countdown-readout{
  margin-top:9px;display:flex;align-items:baseline;justify-content:center;gap:12px;
}
#countdown-time{
  font-size:clamp(28px,4.4vw,44px);font-weight:800;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;color:var(--ink);
  text-shadow:0 2px 14px rgba(0,0,0,.65);
  line-height:1;
}
#countdown-time.critical{color:#e8a18a;animation:cd-pulse .5s ease infinite alternate}
@keyframes cd-pulse{from{opacity:1}to{opacity:.65}}
#countdown-label{
  font-size:9px;letter-spacing:.32em;color:var(--ink-dim);font-weight:500;
}

/* ── emergency road signage event notification ── */
#event-sign{
  position:absolute;top:clamp(96px,15vh,140px);left:50%;
  transform:translateX(-50%) translateY(0) rotateX(0deg);
  display:flex;align-items:stretch;overflow:hidden;
  background:#1c1e21;border:1px solid rgba(232,235,238,.22);
  box-shadow:0 8px 30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .45s cubic-bezier(.2,1.4,.4,1),opacity .45s ease;
  border-radius:2px;
}
#event-sign.sign-hidden{transform:translateX(-50%) translateY(-18px) rotateX(60deg);opacity:0}
#event-sign-stripe{
  width:10px;flex:none;
  background:repeating-linear-gradient(135deg,var(--hazard) 0 7px,#1c1e21 7px 14px);
}
#event-sign.sign-info #event-sign-stripe{
  background:repeating-linear-gradient(135deg,var(--blue-deep) 0 7px,#1c1e21 7px 14px);
}
#event-sign-body{display:flex;flex-direction:column;padding:8px 18px 9px 14px}
#event-sign-code{font-size:9px;letter-spacing:.3em;color:var(--ink-dim)}
#event-sign-text{
  font-family:var(--sans);font-weight:700;font-size:clamp(13px,2vw,17px);
  letter-spacing:.14em;margin-top:2px;white-space:nowrap;
}

/* ── corner telemetry ── */
.telemetry-corner{
  position:absolute;bottom:18px;min-width:150px;
  padding:10px 12px;
  background:linear-gradient(180deg,rgba(22,24,27,.78),rgba(22,24,27,.55));
  border:1px solid rgba(232,235,238,.12);
  border-radius:2px;backdrop-filter:blur(3px);
}
#telemetry-left{left:18px;border-left:2px solid var(--blue-deep)}
#telemetry-right{right:18px;border-right:2px solid var(--blue-deep);text-align:right}
.tele-row{display:flex;align-items:baseline;gap:8px;line-height:1.5}
#telemetry-right .tele-row{justify-content:flex-end}
.tele-key{font-size:9px;letter-spacing:.24em;color:var(--ink-dim)}
.tele-val{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.tele-unit{font-size:9px;color:var(--ink-dim)}
#speed-bar,#combo-bar{height:2px;background:rgba(232,235,238,.12);margin-top:7px;border-radius:1px;overflow:hidden}
#speed-bar-fill{height:100%;width:0%;background:var(--blue);transition:width .2s linear}
#combo-bar-fill{height:100%;width:0%;background:#d8b25e;transition:width .15s linear;margin-left:auto}
.combo-row .tele-val{color:#d8b25e}
.combo-row.combo-hot .tele-val{color:#e8cf8a;text-shadow:0 0 10px rgba(216,178,94,.5)}

/* ── circular threat indicator ── */
#threat-instrument{
  position:absolute;right:22px;top:18px;width:74px;height:74px;
}
#threat-ring{transition:stroke-dashoffset .25s ease,stroke .4s ease}
#threat-center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;
}
#threat-pct{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
#threat-center em{font-style:normal;font-size:7px;letter-spacing:.28em;color:var(--ink-dim)}
#threat-instrument.threat-high #threat-pct{color:#e8a18a}

/* ── route indicator near the road ── */
#route-indicator{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%) perspective(240px) rotateX(48deg);
  display:flex;gap:10px;
}
.route-lane{
  width:34px;height:16px;border:1px solid rgba(232,235,238,.3);
  border-radius:2px;background:rgba(232,235,238,.05);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.route-lane.active{
  background:rgba(111,163,204,.55);border-color:var(--blue);
  box-shadow:0 0 12px rgba(111,163,204,.45);
}
.route-lane.danger{background:rgba(201,80,46,.4);border-color:var(--hazard)}

/* ── bonus ticker ── */
#bonus-ticker{
  position:absolute;left:50%;bottom:24vh;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.bonus-pop{
  font-size:12px;letter-spacing:.22em;font-weight:700;color:var(--ink);
  text-shadow:0 1px 8px rgba(0,0,0,.8);
  animation:bonus-rise 1s ease forwards;white-space:nowrap;
}
.bonus-pop.nm{color:#8fc1e8}
.bonus-pop.frag{color:#d8b25e}
@keyframes bonus-rise{
  0%{opacity:0;transform:translateY(8px) scale(.9)}
  18%{opacity:1;transform:translateY(0) scale(1)}
  75%{opacity:1}
  100%{opacity:0;transform:translateY(-16px)}
}

/* ── instability warning ── */
#instability-warning{
  position:absolute;top:clamp(96px,16vh,150px);left:50%;transform:translateX(-50%);
  font-size:clamp(12px,1.8vw,15px);letter-spacing:.4em;font-weight:700;color:#e8a18a;
  text-shadow:0 0 18px rgba(201,80,46,.5);
  animation:inst-flicker 1.1s steps(2) infinite;
}
@keyframes inst-flicker{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}

/* ── touch controls ── */
#touch-controls{display:none;position:absolute;bottom:86px;left:0;right:0;
  justify-content:center;gap:14px;pointer-events:none}
#touch-controls button{
  pointer-events:auto;width:58px;height:58px;border-radius:50%;
  border:1px solid rgba(232,235,238,.3);background:rgba(22,24,27,.55);
  color:var(--ink);font-size:18px;font-family:var(--mono);
  backdrop-filter:blur(2px);
}
#touch-controls button:active{background:rgba(111,163,204,.4)}
@media (pointer:coarse){#touch-controls{display:flex}}

/* ═══════ TITLE SCREEN ═══════ */
#title-screen{
  position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse at 50% 120%,rgba(74,123,166,.14),transparent 55%),
    linear-gradient(180deg,rgba(12,13,15,.4) 0%,rgba(12,13,15,.82) 100%);
  transition:opacity .8s ease;
}
#title-screen.fade{opacity:0;pointer-events:none}
#title-grade{
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.12) 3px 4px);
  pointer-events:none;
}
#title-inner{text-align:center;padding:0 24px;position:relative}
#title-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.42em;color:var(--ink-dim);
  margin-bottom:14px;
}
#title-name{
  font-size:clamp(72px,16vw,168px);font-weight:800;line-height:.9;letter-spacing:-.02em;
  color:var(--ink);text-shadow:0 6px 40px rgba(0,0,0,.7);
}
#title-name span{color:var(--blue);margin-left:.08em}
#title-sub{
  font-family:var(--mono);font-size:clamp(11px,2vw,15px);letter-spacing:.58em;
  color:var(--ink-dim);margin-top:14px;margin-left:.58em;
}
#title-rule{width:64px;height:2px;background:var(--blue-deep);margin:26px auto}
#btn-start,.btn-run-again{
  font-family:var(--sans);font-weight:800;letter-spacing:.24em;
  font-size:clamp(14px,2vw,17px);color:var(--charcoal);
  background:var(--ink);border:none;padding:16px 46px;cursor:pointer;
  border-radius:2px;position:relative;transition:transform .15s ease,box-shadow .15s ease;
  box-shadow:0 4px 24px rgba(0,0,0,.5);
}
#btn-start:hover,.btn-run-again:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(111,163,204,.3)}
#btn-start:active,.btn-run-again:active{transform:translateY(0)}
#title-controls{
  margin-top:26px;display:flex;justify-content:center;gap:22px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink-dim);
}
#title-controls b{color:var(--ink);font-weight:700;margin-right:5px}
#title-best{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:rgba(216,178,94,.8)}

/* ═══════ DEATH SCREEN ═══════ */
#death-screen{
  position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 50%,rgba(30,16,12,.55),rgba(12,13,15,.9));
  animation:death-in .3s ease;
}
@keyframes death-in{from{opacity:0}to{opacity:1}}
#death-inner{text-align:center}
#death-time{
  font-family:var(--mono);font-size:clamp(56px,12vw,110px);font-weight:800;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;
}
#death-label{
  font-family:var(--mono);font-size:12px;letter-spacing:.5em;color:#e8a18a;margin-top:10px;
}
#death-cause{
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--ink-dim);margin-top:6px;
}
#death-inner .btn-run-again{margin-top:34px}

/* ═══════ RESULT SCREEN ═══════ */
#result-screen{
  position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#101214 0%,#0c0d0f 100%);
  overflow:hidden;
}
#result-bg-num{
  position:absolute;right:-4vw;bottom:-8vh;
  font-size:60vh;font-weight:800;line-height:1;color:rgba(232,235,238,.03);
  font-family:var(--sans);pointer-events:none;
}
#result-inner{text-align:center;position:relative;padding:0 24px;max-width:520px;width:100%}
#result-time{
  font-family:var(--mono);font-size:clamp(72px,15vw,140px);font-weight:800;line-height:1;
  color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  text-shadow:0 0 60px rgba(111,163,204,.25);
}
#result-survived{
  font-family:var(--mono);font-size:clamp(13px,2.4vw,19px);letter-spacing:.5em;
  color:var(--blue);margin-top:12px;font-weight:700;
}
#result-rule{width:100%;height:1px;background:rgba(232,235,238,.14);margin:30px 0 22px}
#result-stats{display:flex;flex-direction:column;gap:9px;font-family:var(--mono)}
#result-stats>div{display:flex;justify-content:space-between;align-items:baseline}
#result-stats dt{font-size:10px;letter-spacing:.3em;color:var(--ink-dim)}
#result-stats dd{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
#res-newbest{
  margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.4em;
  color:#d8b25e;animation:inst-flicker 1.4s steps(2) infinite;
}
#result-inner .btn-run-again{margin-top:30px;width:100%;padding:18px}

/* result entrance choreography */
.res-anim{opacity:0;transform:translateY(18px)}

@media (max-width:640px){
  .telemetry-corner{min-width:110px;padding:8px 10px;bottom:12px}
  #telemetry-left{left:10px}#telemetry-right{right:10px}
  #threat-instrument{width:56px;height:56px;right:12px;top:12px}
  #threat-pct{font-size:13px}
  #countdown-instrument{width:78vw}
  #route-indicator{bottom:158px}
}