:root {
  --navy: #07060c;
  --panel: rgba(8, 6, 12, 0.82);
  --panel-cyan: rgba(6, 22, 32, 0.86);
  --gold: #e8b24a;
  --gold-dim: #c88840;
  --gold-border: rgba(210, 150, 70, 0.62);
  --cyan: #3ee8ff;
  --cyan-hot: #7af6ff;
  --cyan-dim: #1aa8c0;
  --orange: #ff9a32;
  --orange-hot: #ff6a18;
  --magenta: #ff48c8;
  --yellow: #ffd428;
  --red: #ff3a4a;
  --white: #f4fbff;
  --muted: #9aa3b0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #07040a;
  color: var(--white);
  font-family: "Rajdhani", "Exo 2", sans-serif;
  user-select: none;
}

#stage { position: fixed; inset: 0; background: #07040a; }
#c { display: block; width: 100%; height: 100%; }

.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }

#loading {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07040a;
  color: var(--orange);
  font-family: "Orbitron", sans-serif;
  letter-spacing: 0.22em;
  font-size: 13px;
  font-weight: 700;
}

#heat-vignette, #rewind-flash, #hit-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
#heat-vignette {
  background: radial-gradient(ellipse at center, transparent 48%, rgba(90, 12, 0, 0.42) 100%);
  opacity: 0.55;
}
#rewind-flash {
  background: radial-gradient(ellipse at 45% 55%, rgba(40, 220, 255, 0.22), transparent 62%);
  opacity: 0;
  transition: opacity 0.12s linear;
}
#rewind-flash.on { opacity: 1; }
#hit-flash {
  background: rgba(255, 40, 40, 0.28);
  opacity: 0;
}

/* ========== HUD PANELS ========== */
.panel {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  background: var(--panel);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 8px 28px rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
}
.gold-panel {
  border: 1.5px solid var(--gold-border);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.55),
    0 0 18px rgba(200, 110, 30, 0.18),
    inset 0 0 22px rgba(40, 16, 6, 0.35);
}
.cyan-panel {
  background: var(--panel-cyan);
  border: 1.6px solid rgba(62, 232, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.55),
    0 0 22px rgba(40, 200, 255, 0.22),
    inset 0 0 28px rgba(10, 40, 60, 0.4);
}

/* Title */
#hud-tl {
  top: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 10px;
  min-width: 360px;
}
.title-hex {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 140, 30, 0.55));
  flex: 0 0 auto;
}
.title-copy { display: flex; flex-direction: column; }
.title-word {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #f0c060;
  text-shadow: 0 0 12px rgba(255, 160, 40, 0.45);
  line-height: 1.1;
}
.title-sub {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #c88840;
  margin-top: 3px;
}

/* Score */
#hud-score {
  top: 14px;
  left: 50%;
  transform: translateX(-168%);
  padding: 8px 18px 10px;
  min-width: 210px;
  text-align: left;
}
.score-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: #c9c4be;
}
.best-lab { color: var(--gold); font-size: 10px; letter-spacing: 0.12em; }
.best-lab b { font-family: "Share Tech Mono", monospace; }
.score-num {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 34px;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
.mult-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.mult-badge {
  background: linear-gradient(180deg, #ff7a28, #ff4a10);
  color: #fff;
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  min-width: 38px;
  text-align: center;
  box-shadow: 0 0 10px rgba(255, 90, 20, 0.5);
}
.mult-track {
  flex: 1;
  height: 5px;
  border-radius: 4px;
  background: #1a1010;
  overflow: hidden;
}
.mult-track i {
  display: block;
  height: 100%;
  width: 45%;
  background: linear-gradient(90deg, #ff6a18, #ffe090);
  border-radius: 4px;
}

/* Delivery */
#hud-deliv {
  top: 14px;
  left: 50%;
  transform: translateX(-8%);
  display: flex;
  align-items: stretch;
  padding: 8px 16px;
  gap: 0;
  min-width: 430px;
}
.deliv-col { padding: 0 14px; text-align: left; }
.deliv-col:first-child { padding-left: 4px; }
.dest-col { min-width: 150px; }
.deliv-div {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(200,150,70,0.45), transparent);
  margin: 2px 0;
}
.deliv-lab {
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: #b8b0a8;
}
.deliv-val {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-top: 2px;
}
.deliv-val.cyan { color: var(--cyan); text-shadow: 0 0 10px rgba(62,232,255,0.45); }
.deliv-val.orange { color: var(--orange); text-shadow: 0 0 10px rgba(255,154,50,0.4); }
.deliv-val.magenta { color: var(--magenta); text-shadow: 0 0 10px rgba(255,72,200,0.45); font-size: 16px; letter-spacing: 0.08em; }

/* Shield */
#hud-tr {
  top: 14px;
  right: 18px;
  padding: 8px 16px 10px;
  min-width: 280px;
}
.shield-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hex-pips { display: flex; gap: 4px; }
.hex-pips .pip {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(62, 232, 255, 0.7));
}
.hex-pips .pip.off { filter: grayscale(1) brightness(0.35); opacity: 0.45; }
.pollen-row {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #c8c0b8;
}
.pollen-pct { color: var(--gold); font-family: "Share Tech Mono", monospace; letter-spacing: 0; }
.pollen-track {
  margin-top: 5px;
  height: 7px;
  border-radius: 6px;
  background: #1a1210;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,180,40,0.15);
}
.pollen-track i {
  display: block;
  height: 100%;
  width: 88%;
  background: linear-gradient(90deg, #c87810, #ffd030);
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(255, 200, 40, 0.55);
}

/* Telemetry */
#hud-bl {
  bottom: 18px;
  left: 18px;
  display: flex;
  gap: 18px;
  padding: 8px 16px 10px;
}
.telem-col { min-width: 78px; }

/* Rewind */
#hud-bc {
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px 12px;
  min-width: 520px;
  max-width: 620px;
}
.rw-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rw-title {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--cyan);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rw-ico {
  width: 16px;
  height: 16px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  position: relative;
  display: inline-block;
}
.rw-ico::after {
  content: "";
  position: absolute;
  left: 3px; top: 3px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 4px 6px 4px 0;
  border-color: transparent var(--cyan) transparent transparent;
}
.rw-ready {
  font-family: "Rajdhani", sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--cyan);
  border: 1.4px solid rgba(62,232,255,0.45);
  border-radius: 14px;
  padding: 3px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rw-ready .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}
.rw-ready.charging { color: #8aa0b0; border-color: rgba(140,160,180,0.35); }
.rw-ready.charging .dot { background: #6a8090; box-shadow: none; }
.rw-ready.rewinding { color: #fff; border-color: #fff; animation: pulse 0.5s infinite; }
.rw-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #8ec8d8;
  font-weight: 700;
}
.rw-track {
  position: relative;
  margin-top: 4px;
  height: 8px;
  border-radius: 6px;
  background: #0a1820;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(62,232,255,0.2);
}
.rw-track i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #1488a8, #5ef0ff);
  border-radius: 6px;
}
.rw-track b {
  position: absolute;
  top: -2px;
  width: 3px;
  height: 12px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 8px #fff;
  left: 100%;
  transform: translateX(-50%);
}
.rw-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--cyan-hot);
}
.rw-foot kbd, .menu-controls kbd {
  display: inline-block;
  background: #e8eef4;
  color: #0a1820;
  font-family: "Rajdhani", "Orbitron", sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.06em;
  margin: 0 2px;
}

/* Radar */
#hud-br {
  bottom: 18px;
  right: 18px;
  padding: 8px 14px 10px;
  min-width: 220px;
}
.radar-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: #c8c0b8;
}
.cyan-lab { color: var(--cyan); }
#radar-lanes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 8px;
  height: 78px;
  border: 1px solid rgba(200,150,70,0.28);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  background: rgba(4, 8, 16, 0.5);
}
.rlane {
  position: relative;
  border-right: 1px dashed rgba(180,160,120,0.28);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
}
.rlane:last-child { border-right: 0; }
.rlane span {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #9aa0a8;
  font-weight: 700;
}
.rblip {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 10px;
  height: 10px;
  pointer-events: none;
}
.rblip.player {
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 11px solid #ffd428;
  background: none;
  bottom: 28%;
}
.rblip.hornet {
  width: 9px; height: 9px; border-radius: 50%;
  background: #ff3a4a;
  box-shadow: 0 0 8px #ff3a4a;
}
.rblip.geyser {
  width: 9px; height: 9px;
  background: #ff9a32;
  transform: translate(-50%, 50%) rotate(45deg);
  box-shadow: 0 0 8px #ff9a32;
}
.rblip.pollen {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ffd428;
}

/* World tags */
#world-tags {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}
.wtag {
  position: absolute;
  transform: translate(-50%, -120%);
  font-family: "Rajdhani", sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.wtag.hostile {
  background: linear-gradient(180deg, #c81828, #8a0810);
  color: #fff;
  border: 1px solid #ff6a70;
  box-shadow: 0 0 12px rgba(255, 40, 50, 0.4);
}
.wtag.geyser {
  background: linear-gradient(180deg, #e07018, #c05008);
  color: #fff;
  border: 1px solid #ffb040;
  box-shadow: 0 0 12px rgba(255, 140, 30, 0.4);
}
.reticle {
  position: absolute;
  width: 72px; height: 72px;
  transform: translate(-50%, -50%);
  border: 1.6px dashed #ff2a3a;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 40, 50, 0.35);
}
.reticle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: #ff2a3a;
  border-radius: 50%;
  box-shadow: 0 0 8px #ff2a3a;
}

#dodge-banner {
  position: absolute;
  left: 54%;
  top: 42%;
  transform: translate(-50%, -50%) rotate(-6deg);
  z-index: 7;
  pointer-events: none;
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: #1a1200;
  background: linear-gradient(180deg, #ffe050, #e8b010);
  padding: 8px 16px;
  border-radius: 8px;
  border: 2px solid #1a1000;
  box-shadow: 0 0 18px rgba(255, 210, 40, 0.55);
  animation: dodgePop 0.9s ease-out forwards;
}
@keyframes dodgePop {
  0% { opacity: 0; transform: translate(-50%, -40%) rotate(-6deg) scale(0.8); }
  15% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(1.05); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -70%) rotate(-6deg) scale(1); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Menu / pause / results */
#menu, #pause, #results {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(40, 12, 8, 0.35), rgba(4, 2, 6, 0.78));
}
.menu-card {
  width: min(720px, 92vw);
  padding: 28px 32px 24px;
  background: rgba(8, 6, 12, 0.88);
  border: 1.6px solid var(--gold-border);
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(255, 100, 20, 0.18);
  text-align: center;
}
.menu-card.slim { width: min(420px, 90vw); }
.menu-title {
  position: relative;
  display: inline-flex;
  left: auto; top: auto;
  margin: 0 auto 16px;
  pointer-events: none;
}
.menu-blurb {
  color: #d0c8c0;
  font-size: 16px;
  line-height: 1.45;
  margin: 12px 0 16px;
}
.menu-blurb b { color: var(--cyan); }
.menu-art {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 18px;
  height: 120px;
  margin-bottom: 16px;
}
.menu-art img {
  max-height: 110px;
  max-width: 160px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
}
#btn-play, #btn-again, #btn-resume {
  background: linear-gradient(180deg, #ff9a32, #ff5a10);
  color: #1a0a00;
  border: 0;
  border-radius: 10px;
  padding: 12px 28px;
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.12em;
  box-shadow: 0 0 22px rgba(255, 100, 20, 0.45);
}
#btn-play:hover, #btn-again:hover, #btn-resume:hover { filter: brightness(1.12); }
.menu-controls {
  margin-top: 14px;
  color: #a8a098;
  font-size: 13px;
  line-height: 1.6;
}
.menu-sub {
  color: var(--gold);
  letter-spacing: 0.16em;
  font-weight: 700;
  margin-bottom: 12px;
}
.res-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin: 16px 0 18px;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #b8b0a8;
}
.res-grid b {
  display: block;
  font-family: "Orbitron", sans-serif;
  color: #fff;
  font-size: 20px;
  margin-top: 2px;
}

@media (max-width: 1100px) {
  #hud-score { transform: translateX(-155%); }
  #hud-deliv { min-width: 360px; transform: translateX(-4%); }
  .title-word { font-size: 14px; }
  .score-num { font-size: 26px; }
  #hud-bc { min-width: 420px; }
}
@media (max-width: 820px) {
  #hud-tl { min-width: 0; padding: 6px 10px; }
  .title-word { font-size: 11px; }
  #hud-deliv { display: none; }
  #hud-score { transform: none; left: auto; right: 16px; }
}