:root {
  --neon-cyan: #2ee6ff;
  --neon-red: #ff2e4d;
  --panel-bg: rgba(8, 12, 24, 0.88);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05070f;
  font-family: "Menlo", "Consolas", monospace;
  color: #cfe8ff;
}

#app canvas { display: block; }

.hidden { display: none !important; }

/* ---------- Title overlay ---------- */
#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(10, 16, 36, 0.55), rgba(3, 5, 12, 0.92));
  z-index: 20;
  backdrop-filter: blur(2px);
}

#overlay .panel {
  text-align: center;
  padding: 42px 56px;
  background: var(--panel-bg);
  border: 1px solid rgba(46, 230, 255, 0.35);
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(46, 230, 255, 0.12), inset 0 0 60px rgba(46, 230, 255, 0.04);
  max-width: 560px;
}

#overlay h1 {
  font-size: 44px;
  letter-spacing: 10px;
  color: var(--neon-red);
  text-shadow: 0 0 18px rgba(255, 46, 77, 0.8), 0 0 60px rgba(255, 46, 77, 0.4);
  margin-bottom: 6px;
}

#overlay .tagline {
  color: var(--neon-cyan);
  letter-spacing: 2px;
  font-size: 13px;
  margin-bottom: 26px;
  text-shadow: 0 0 12px rgba(46, 230, 255, 0.6);
}

#overlay .controls {
  font-size: 13px;
  line-height: 2.1;
  color: #9fb8d8;
  margin-bottom: 28px;
}

#overlay kbd {
  display: inline-block;
  padding: 1px 7px;
  margin: 0 1px;
  border: 1px solid #3a4f70;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #101a2e;
  color: #dff2ff;
  font-family: inherit;
  font-size: 12px;
}

#enterBtn {
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 4px;
  padding: 13px 38px;
  color: #051018;
  background: var(--neon-cyan);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(46, 230, 255, 0.55);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

#enterBtn:hover {
  transform: scale(1.04);
  box-shadow: 0 0 36px rgba(46, 230, 255, 0.85);
}

#overlay .hint {
  margin-top: 22px;
  font-size: 11px;
  color: #62788f;
  letter-spacing: 1px;
}

/* ---------- HUD ---------- */
#crosshair {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(46, 230, 255, 0.9);
  box-shadow: 0 0 8px rgba(46, 230, 255, 0.9);
  z-index: 10;
  pointer-events: none;
  transition: transform 0.05s ease, background 0.05s ease, box-shadow 0.05s ease;
}

/* Soft aim-bloom ring (::after) — lit on 2x/3x mult hits; independent of .hit flash. */
#crosshair::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

#crosshair.hit {
  animation: crosshairHit 0.14s ease-out;
  background: #fff;
  box-shadow: 0 0 16px rgba(255, 176, 46, 1), 0 0 28px rgba(255, 46, 77, 0.7);
}

/* 2x mult — amber reticle bloom */
#crosshair.bloom {
  background: rgba(255, 210, 122, 0.95);
  box-shadow: 0 0 12px rgba(255, 176, 46, 0.95), 0 0 22px rgba(255, 176, 46, 0.45);
}

#crosshair.bloom::after {
  opacity: 1;
  border-color: rgba(255, 176, 46, 0.75);
  box-shadow: 0 0 16px rgba(255, 176, 46, 0.85), 0 0 32px rgba(255, 176, 46, 0.35);
  animation: aimBloomIn 0.32s ease-out;
}

/* 3x mult — hot red reticle bloom */
#crosshair.bloom-hot {
  background: rgba(255, 140, 160, 0.95);
  box-shadow: 0 0 14px rgba(255, 46, 77, 1), 0 0 28px rgba(255, 176, 46, 0.55);
}

#crosshair.bloom-hot::after {
  opacity: 1;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-color: rgba(255, 46, 77, 0.85);
  box-shadow: 0 0 20px rgba(255, 46, 77, 0.9), 0 0 40px rgba(255, 176, 46, 0.4);
  animation: aimBloomInHot 0.42s ease-out;
}

@keyframes crosshairHit {
  0%   { transform: scale(1); }
  40%  { transform: scale(2.4); }
  100% { transform: scale(1); }
}

@keyframes aimBloomIn {
  0%   { opacity: 0; transform: scale(0.55); }
  35%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes aimBloomInHot {
  0%   { opacity: 0; transform: scale(0.45); }
  30%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

/* Floating arcade score pops — full-screen layer; default = crosshair, or
   world-anchored when left/top set from projected hit points. */
#scorepops {
  position: fixed;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}

.scorepop {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(calc(-50% + var(--jx, 0px)), calc(-50% + var(--jy, 0px)));
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #dff8ff;
  text-shadow: 0 0 10px rgba(46, 230, 255, 0.9), 0 2px 0 rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  animation: scorePopUp 0.7s ease-out forwards;
}

/* World-anchored: left/top are CSS px from worldToScreen (still uses --jx/--jy). */
.scorepop-anchored {
  /* left/top set inline; keep class for tests / future tweaks */
}

.scorepop-combo {
  color: #ffd27a;
  text-shadow: 0 0 12px rgba(255, 176, 46, 0.95), 0 2px 0 rgba(0, 0, 0, 0.55);
  font-size: 24px;
}

.scorepop-hot {
  color: #ff6b8a;
  text-shadow: 0 0 16px rgba(255, 46, 77, 1), 0 0 28px rgba(255, 176, 46, 0.6);
  font-size: 28px;
}

/* Mult ≥ 2: bounce/settle then float away so streak heat lingers at booths. */
.scorepop-bounce {
  animation: scorePopBounce 0.86s ease-out forwards;
}

/* Mult ≥ 3: hotter pop + second bounce peak + longer hang. */
.scorepop-bounce-hot {
  animation: scorePopBounceHot 0.98s ease-out forwards;
}

@keyframes scorePopUp {
  0%   { opacity: 0; transform: translate(calc(-50% + var(--jx, 0px)), calc(-30% + var(--jy, 0px))) scale(0.6); }
  15%  { opacity: 1; transform: translate(calc(-50% + var(--jx, 0px)), calc(-50% + var(--jy, 0px))) scale(1.15); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--jx, 0px)), calc(-160% + var(--jy, 0px))) scale(1); }
}

@keyframes scorePopBounce {
  0%   { opacity: 0; transform: translate(calc(-50% + var(--jx, 0px)), calc(-28% + var(--jy, 0px))) scale(0.55); }
  12%  { opacity: 1; transform: translate(calc(-50% + var(--jx, 0px)), calc(-48% + var(--jy, 0px))) scale(1.28); }
  26%  { opacity: 1; transform: translate(calc(-50% + var(--jx, 0px)), calc(-54% + var(--jy, 0px))) scale(0.94); }
  40%  { opacity: 1; transform: translate(calc(-50% + var(--jx, 0px)), calc(-62% + var(--jy, 0px))) scale(1.08); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--jx, 0px)), calc(-175% + var(--jy, 0px))) scale(1); }
}

@keyframes scorePopBounceHot {
  0%   { opacity: 0; transform: translate(calc(-50% + var(--jx, 0px)), calc(-24% + var(--jy, 0px))) scale(0.5); }
  10%  { opacity: 1; transform: translate(calc(-50% + var(--jx, 0px)), calc(-46% + var(--jy, 0px))) scale(1.38); }
  22%  { opacity: 1; transform: translate(calc(-50% + var(--jx, 0px)), calc(-52% + var(--jy, 0px))) scale(0.9); }
  34%  { opacity: 1; transform: translate(calc(-50% + var(--jx, 0px)), calc(-60% + var(--jy, 0px))) scale(1.18); }
  48%  { opacity: 1; transform: translate(calc(-50% + var(--jx, 0px)), calc(-72% + var(--jy, 0px))) scale(1.02); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--jx, 0px)), calc(-190% + var(--jy, 0px))) scale(1); }
}

#combo {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 18px;
  background: var(--panel-bg);
  border: 1px solid rgba(255, 176, 46, 0.55);
  border-radius: 6px;
  font-size: 14px;
  letter-spacing: 3px;
  color: #ffd27a;
  text-shadow: 0 0 12px rgba(255, 176, 46, 0.8);
  z-index: 10;
  pointer-events: none;
  /* No permanent animation — toastIn must be one-shot on reveal only.
     A base animation restarts from opacity 0 whenever mult-step punch
     classes are removed (i61 regression). */
}

/* One-shot enter when the banner first un-hides (not re-fired on punch end). */
#combo.combo-in {
  animation: toastIn 0.18s ease-out;
}

#combo.hot {
  border-color: rgba(255, 46, 77, 0.7);
  color: #ff8aa0;
  text-shadow: 0 0 14px rgba(255, 46, 77, 0.9);
  box-shadow: 0 0 18px rgba(255, 46, 77, 0.25);
}

/* Mult step 1→2: brief scale punch so banner heat matches +N bounce. */
#combo.combo-punch {
  animation: comboPunch 0.32s ease-out;
}

/* Mult step 2→3: hotter / longer punch. */
#combo.combo-punch-hot {
  animation: comboPunchHot 0.42s ease-out;
}

@keyframes comboPunch {
  0%   { transform: translateX(-50%) scale(1); }
  35%  { transform: translateX(-50%) scale(1.18); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes comboPunchHot {
  0%   { transform: translateX(-50%) scale(1); }
  30%  { transform: translateX(-50%) scale(1.28); }
  55%  { transform: translateX(-50%) scale(1.08); }
  100% { transform: translateX(-50%) scale(1); }
}

#prompt {
  position: fixed;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  padding: 10px 22px;
  background: var(--panel-bg);
  border: 1px solid rgba(46, 230, 255, 0.4);
  border-radius: 6px;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: #dff2ff;
  z-index: 10;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(46, 230, 255, 0.5);
}

#prompt kbd {
  padding: 0 6px;
  border: 1px solid var(--neon-cyan);
  border-radius: 3px;
  color: var(--neon-cyan);
  font-family: inherit;
}

#gamehud {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 28px;
  background: var(--panel-bg);
  border: 1px solid rgba(255, 46, 77, 0.5);
  border-radius: 6px;
  font-size: 16px;
  letter-spacing: 2px;
  color: #ffd9e0;
  z-index: 10;
  pointer-events: none;
  text-shadow: 0 0 10px rgba(255, 46, 77, 0.6);
  white-space: pre;
  text-align: center;
}

/* Timed booth last-seconds urgency — soft pulse while TIME ≤ 5. */
#gamehud.urgent {
  animation: gamehudUrgent 0.55s ease-in-out infinite;
  border-color: rgba(255, 90, 70, 0.95);
  color: #fff5f6;
  text-shadow: 0 0 14px rgba(255, 46, 77, 0.9);
  box-shadow: 0 0 16px rgba(255, 46, 77, 0.35);
}

@keyframes gamehudUrgent {
  0%,
  100% {
    border-color: rgba(255, 46, 77, 0.75);
    box-shadow: 0 0 12px rgba(255, 46, 77, 0.28);
  }
  50% {
    border-color: rgba(255, 130, 90, 1);
    box-shadow: 0 0 22px rgba(255, 46, 77, 0.55);
    color: #ffffff;
  }
}

#scorebar {
  position: fixed;
  top: 24px;
  right: 24px;
  padding: 8px 16px;
  background: var(--panel-bg);
  border: 1px solid rgba(46, 230, 255, 0.25);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.8;
  color: #8fb4d4;
  z-index: 10;
  pointer-events: none;
  white-space: pre;
}

/* Personal best — brief cyan pulse on the best-scores panel (systems unlock language). */
#scorebar.record-flash {
  animation: scoreRecordFlash 0.85s ease-out;
}

@keyframes scoreRecordFlash {
  0% {
    border-color: rgba(46, 230, 255, 0.85);
    box-shadow: 0 0 20px rgba(46, 230, 255, 0.4);
    text-shadow: 0 0 12px rgba(46, 230, 255, 0.65);
    color: #d4f8ff;
  }
  100% {
    border-color: rgba(46, 230, 255, 0.25);
    box-shadow: none;
    text-shadow: none;
    color: #8fb4d4;
  }
}

/* Mid-round / mid-endless best-chase — softer, shorter tick than NEW RECORD. */
#scorebar.chase-flash {
  animation: scoreChaseFlash 0.5s ease-out;
}

@keyframes scoreChaseFlash {
  0% {
    border-color: rgba(46, 230, 255, 0.55);
    box-shadow: 0 0 12px rgba(46, 230, 255, 0.22);
    text-shadow: 0 0 8px rgba(46, 230, 255, 0.4);
    color: #b8e8f5;
  }
  100% {
    border-color: rgba(46, 230, 255, 0.25);
    box-shadow: none;
    text-shadow: none;
    color: #8fb4d4;
  }
}

/* Park-wide soft goals — mirrors scorebar on the left */
#systems {
  position: fixed;
  top: 24px;
  left: 24px;
  padding: 8px 16px;
  background: var(--panel-bg);
  border: 1px solid rgba(46, 230, 255, 0.25);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.8;
  color: #8fb4d4;
  z-index: 10;
  pointer-events: none;
  white-space: pre;
  letter-spacing: 0.5px;
}

#systems.complete {
  border-color: rgba(46, 230, 255, 0.55);
  color: #b8f0ff;
  box-shadow: 0 0 18px rgba(46, 230, 255, 0.18);
  text-shadow: 0 0 8px rgba(46, 230, 255, 0.35);
}

/* One-shot park clear — brief cyan pulse on the checklist panel. */
#systems.victory-flash {
  animation: systemsVictoryFlash 1.5s ease-out;
}

@keyframes systemsVictoryFlash {
  0% {
    border-color: rgba(46, 230, 255, 0.95);
    box-shadow: 0 0 28px rgba(46, 230, 255, 0.55);
    text-shadow: 0 0 16px rgba(46, 230, 255, 0.9);
    color: #e8fbff;
  }
  40% {
    border-color: rgba(46, 230, 255, 0.75);
    box-shadow: 0 0 22px rgba(46, 230, 255, 0.35);
  }
  100% {
    border-color: rgba(46, 230, 255, 0.55);
    box-shadow: 0 0 18px rgba(46, 230, 255, 0.18);
    text-shadow: 0 0 8px rgba(46, 230, 255, 0.35);
    color: #b8f0ff;
  }
}

/* Single-system first unlock — quieter / shorter than victory-flash. */
#systems.unlock-flash {
  animation: systemsUnlockFlash 0.85s ease-out;
}

@keyframes systemsUnlockFlash {
  0% {
    border-color: rgba(46, 230, 255, 0.7);
    box-shadow: 0 0 16px rgba(46, 230, 255, 0.32);
    text-shadow: 0 0 10px rgba(46, 230, 255, 0.55);
    color: #c8f4ff;
  }
  100% {
    border-color: rgba(46, 230, 255, 0.25);
    box-shadow: none;
    text-shadow: none;
    color: #8fb4d4;
  }
}

#toast {
  position: fixed;
  left: 50%;
  top: 34%;
  transform: translateX(-50%);
  padding: 14px 34px;
  background: var(--panel-bg);
  border: 1px solid rgba(46, 230, 255, 0.6);
  border-radius: 8px;
  font-size: 20px;
  letter-spacing: 3px;
  color: var(--neon-cyan);
  text-shadow: 0 0 14px rgba(46, 230, 255, 0.8);
  z-index: 11;
  pointer-events: none;
  white-space: pre;
  text-align: center;
  animation: toastIn 0.25s ease-out;
}

/* Full park clear toast — hotter cyan rim + soft bloom. */
#toast.toast-victory {
  border-color: rgba(46, 230, 255, 0.95);
  box-shadow: 0 0 32px rgba(46, 230, 255, 0.45), 0 0 64px rgba(255, 61, 240, 0.18);
  text-shadow: 0 0 20px rgba(46, 230, 255, 1), 0 0 36px rgba(255, 176, 46, 0.35);
  animation: toastVictoryIn 0.35s ease-out;
}

@keyframes toastVictoryIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px) scale(0.92);
  }
  55% {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px) scale(1.04);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(2, 4, 10, 0.55) 100%);
  transition: background 0.18s ease;
}

/* HK searchlight lock — warm red edge threat while the cone holds you. */
#vignette.scan-lock {
  background: radial-gradient(
    ellipse at center,
    transparent 48%,
    rgba(90, 6, 18, 0.42) 78%,
    rgba(120, 8, 22, 0.62) 100%
  );
}

/* Reticle goes hot red under HK lock (independent of combo bloom). */
#crosshair.scan-lock {
  background: rgba(255, 70, 95, 0.95);
  box-shadow: 0 0 10px rgba(255, 46, 77, 0.95), 0 0 22px rgba(255, 46, 77, 0.55);
}

/* Tighter cone — brighter reticle + wider bloom so firm lock sells threat heat. */
#crosshair.scan-lock-hot {
  background: rgba(255, 110, 120, 1);
  box-shadow:
    0 0 14px rgba(255, 60, 90, 1),
    0 0 32px rgba(255, 30, 60, 0.85),
    0 0 48px rgba(180, 0, 30, 0.45);
}

#vignette.scan-lock-hot {
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(110, 4, 18, 0.5) 72%,
    rgba(150, 6, 24, 0.78) 100%
  );
}

#errlog {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 40%;
  overflow: auto;
  background: rgba(60, 0, 0, 0.92);
  color: #ffb3b3;
  font-size: 12px;
  padding: 10px;
  z-index: 99;
  white-space: pre-wrap;
}