.brand .dot {
  position: relative;
  z-index: 0;
  overflow: visible;
  animation: radarLogoCore 1.8s ease-in-out infinite;
}

.brand .dot::before,
.brand .dot::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 100%;
  height: 100%;
  border: 1px solid #74e8ff;
  border-radius: 50%;
  content: "";
  animation: radarLogoRing 1.8s ease-out infinite;
}

.brand .dot::after {
  border-color: #8af0b2;
  animation-delay: 0.9s;
}

.brand > :not(.dot) {
  animation: radarLogoText 2.4s ease-in-out infinite;
}

.brand {
  color: #f1f6f7;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.panel-header .panel-code {
  margin-left: auto;
}

.panel-collapse {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  margin-left: 4px;
  padding: 0;
  border: 1px solid rgba(116, 232, 255, 0.24);
  border-radius: 2px;
  background: rgba(116, 232, 255, 0.055);
  color: #74e8ff;
  font: 16px/1 "SFMono-Regular", Consolas, monospace;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.panel-collapse:hover,
.panel-collapse:focus-visible {
  border-color: rgba(138, 240, 178, 0.72);
  background: rgba(138, 240, 178, 0.09);
  color: #f1f6f7;
  outline: none;
}

.panel.is-collapsed {
  min-height: 0;
}

.panel.is-collapsed .panel-header {
  margin-bottom: 0;
}

.panel > :not(.panel-header) {
  max-height: 900px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition: max-height 420ms cubic-bezier(.22, .8, .24, 1),
    opacity 220ms ease,
    transform 420ms cubic-bezier(.22, .8, .24, 1),
    margin 420ms cubic-bezier(.22, .8, .24, 1),
    padding 420ms cubic-bezier(.22, .8, .24, 1);
}

.panel.is-collapsed > :not(.panel-header) {
  display: block !important;
  max-height: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.panel-collapse {
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease,
    transform 260ms cubic-bezier(.22, .8, .24, 1);
}

.panel.is-collapsed .panel-collapse {
  transform: rotate(-180deg);
}

.detail-card,
.readouts,
.node-list {
  will-change: opacity, transform;
}

.detail-card.is-switching,
.readouts.is-switching {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(2px);
}

.detail-card,
.readouts {
  transition: opacity 180ms ease, transform 300ms cubic-bezier(.22, .8, .24, 1), filter 300ms ease;
}

.node-list button.is-selected {
  color: #f1f6f7;
  background: rgba(116, 232, 255, 0.075);
  box-shadow: inset 2px 0 0 rgba(255, 199, 107, 0.86);
}

.node-list button.is-selected .node-jump {
  color: #fff1c7 !important;
}

/* Cross-station jump — signal relay (2026 observatory, final)
   phases: lock (target) -> corridor (tunnel) -> transit (jump) -> arrival (echo)
   decor: dynamic = streaks / horizon / reticle (max 3); reuses HTML flash + scan; ring + beam retired */
html .teleport-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  background: rgba(1, 5, 8, 0);
  /* HUD phases animate internally; the shell must become visible immediately. */
  transition: none;
}

html .teleport-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(78, 247, 255, 0.12), transparent 44%),
    rgba(1, 5, 8, 0.62);
}

/* lock: dark, focused — no full-height crosshair through the HUD */
html .teleport-overlay.phase-lock {
  background:
    radial-gradient(circle at 50% 47%, rgba(78, 247, 255, 0.18), transparent 32%),
    radial-gradient(circle at 50% 47%, rgba(124, 255, 157, 0.05), transparent 56%),
    rgba(1, 5, 8, 0.74);
}

html .teleport-overlay.phase-corridor {
  /* Tunnel geometry lives on the overlay background so Chromium cannot flatten
     a full-screen masked child above the centered HUD on wide displays. */
  background:
    radial-gradient(circle at 50% 50%, transparent 0 12%, rgba(0, 3, 5, 0.08) 46%, rgba(0, 3, 5, 0.78) 78%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 72px, rgba(116, 232, 255, 0.13) 73px 75px, transparent 76px 145px),
    repeating-conic-gradient(from -5deg at 50% 50%, transparent 0deg 12deg, rgba(78, 247, 255, 0.08) 12deg 13deg, transparent 13deg 24deg),
    radial-gradient(ellipse 120% 42% at 50% 50%, rgba(78, 247, 255, 0.28), transparent 58%),
    rgba(0, 3, 5, 0.88);
}

/* transit: contained hot spot, no full-screen overexposure */
html .teleport-overlay.phase-transit {
  background:
    repeating-conic-gradient(from 7deg at 50% 50%, transparent 0deg 17deg, rgba(78, 247, 255, 0.08) 17deg 18deg, transparent 18deg 30deg),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2), transparent 10%),
    radial-gradient(circle at 50% 50%, rgba(78, 247, 255, 0.4), transparent 40%),
    rgba(0, 2, 4, 0.96);
}

/* decor layers sit behind HUD */
html .teleport-scan,
html .teleport-flash,
html .teleport-horizon,
html .teleport-streaks,
html .teleport-reticle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Keep every composited mask/gradient behind the HUD on wide GPUs too. */
  z-index: -1;
}

/* scanlines (existing layer) — subtle drift during lock/corridor */
html .teleport-scan {
  opacity: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(116, 232, 255, 0.04) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: screen;
}

html .teleport-overlay.phase-lock .teleport-scan,
html .teleport-overlay.phase-corridor .teleport-scan {
  opacity: 0.32;
  animation: jumpScanDrift 900ms linear both;
}

/* transit flash (existing layer) — small core, capped brightness, photosensitivity-safe */
html .teleport-flash {
  opacity: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.55), rgba(78, 247, 255, 0.3) 9%, transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(78, 247, 255, 0.22), transparent 40%);
  mix-blend-mode: screen;
}

html .teleport-overlay.phase-transit .teleport-flash {
  animation: jumpTransitFlash 340ms cubic-bezier(.16, .84, .24, 1) both;
}

/* energy corridor — centered band, scaleY opens it; core converges, glint sweeps */
html .teleport-horizon {
  top: 50%;
  left: -6%;
  right: -6%;
  bottom: auto;
  height: 140px;
  margin-top: -70px;
  opacity: 0;
  transform: scaleY(0.02) scaleX(0.3);
  transform-origin: 50% 50%;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(78, 247, 255, 0.06) 34%,
      rgba(180, 255, 255, 0.45) 49%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(124, 255, 157, 0.1) 60%,
      transparent 100%);
  box-shadow:
    0 0 34px rgba(78, 247, 255, 0.32),
    0 0 90px rgba(78, 247, 255, 0.14);
  transition:
    opacity 220ms ease,
    transform 460ms cubic-bezier(.12, .82, .2, 1);
}

/* energy convergence core */
html .teleport-horizon::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse 26% 100% at 50% 50%, rgba(255, 255, 255, 0.5), transparent 70%);
  mix-blend-mode: screen;
}

/* speed glint sweeping along the corridor */
html .teleport-horizon::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 34%;
  opacity: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  mix-blend-mode: screen;
}

html .teleport-overlay.phase-lock .teleport-horizon {
  opacity: 0.7;
  transform: scaleY(0.05) scaleX(0.6);
}

html .teleport-overlay.phase-corridor .teleport-horizon {
  opacity: 0.58;
  transform: scaleY(0.72) scaleX(1);
}

html .teleport-overlay.phase-corridor .teleport-horizon::before {
  opacity: 1;
  animation: jumpCoreCharge 520ms cubic-bezier(.16, .84, .24, 1) both;
}

html .teleport-overlay.phase-corridor .teleport-horizon::after {
  opacity: 1;
  animation: jumpGlintSweep 440ms cubic-bezier(.3, .7, .2, 1) 120ms both;
}

html .teleport-overlay.phase-transit .teleport-horizon {
  opacity: 0.16;
  transform: scaleY(2.2) scaleX(1.2);
  transition-duration: 180ms;
}

/* depth tunnel: near rings (self) + converging spokes (::before) + far rings (::after)
   transform/opacity only — masks and gradients are static */
html .teleport-streaks {
  /* A bounded square avoids Chromium flattening a full-screen masked layer over
     the centered HUD on wide viewports, while still covering every screen. */
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 140vmax;
  height: 140vmax;
  margin: -70vmax 0 0 -70vmax;
  opacity: 0;
  transform: scale(0.55);
  transform-origin: 50% 50%;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0 34px,
    rgba(116, 232, 255, 0.14) 34px 36px,
    transparent 36px 88px
  );
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 10%, #000 30%, #000 55%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 10%, #000 30%, #000 55%, transparent 72%);
}

html .teleport-streaks::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: rotate(-5deg) scale(0.7);
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg 9deg,
    rgba(78, 247, 255, 0.12) 9deg 10.4deg,
    transparent 10.4deg 24deg
  );
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 9%, #000 32%, transparent 66%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 9%, #000 32%, transparent 66%);
}

html .teleport-streaks::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.75);
  background: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0 64px,
    rgba(124, 255, 157, 0.08) 64px 65px,
    transparent 65px 150px
  );
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 12%, #000 36%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 12%, #000 36%, transparent 74%);
}

html .teleport-overlay.phase-corridor .teleport-streaks,
html .teleport-overlay.phase-transit .teleport-streaks {
  /* Geometry is painted by the phase backgrounds above; retiring this masked
     compositor layer keeps the HUD deterministic on desktop and mobile. */
  display: none;
}

/* lock reticle — ring + cross with a masked center hole (never crosses the HUD text) */
html .teleport-reticle {
  --jump-reticle-size: min(56vw, 220px);
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: var(--jump-reticle-size);
  height: var(--jump-reticle-size);
  margin: calc(var(--jump-reticle-size) / -2) 0 0 calc(var(--jump-reticle-size) / -2);
  opacity: 0;
  border: 1px solid rgba(78, 247, 255, 0.6);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(124, 255, 157, 0.1),
    0 0 26px rgba(78, 247, 255, 0.2);
  transform: scale(1.6);
  transition: opacity 200ms ease, transform 360ms cubic-bezier(.16, .84, .24, 1);
}

html .teleport-reticle::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.85;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(78, 247, 255, 0.9) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(180deg, transparent calc(50% - 0.5px), rgba(78, 247, 255, 0.9) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 32%, #000 36%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 32%, #000 36%);
}

html .teleport-reticle::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px dashed rgba(124, 255, 157, 0.6);
  border-radius: 50%;
  opacity: 0.9;
}

html .teleport-overlay.phase-lock .teleport-reticle {
  opacity: 1;
  transform: scale(1);
  animation: jumpLockPulse 460ms cubic-bezier(.16, .84, .24, 1) both;
}

html .teleport-overlay.phase-lock .teleport-reticle::after {
  animation: jumpLockSpin 620ms cubic-bezier(.2, .8, .2, 1) both;
}

html .teleport-overlay.phase-corridor .teleport-reticle {
  opacity: 0.18;
  transform: scale(0.8);
}

html .teleport-overlay.phase-transit .teleport-reticle {
  opacity: 0;
  transform: scale(0.55);
}

/* HUD must always win over decor; stable and crisp through lock -> corridor */
html .teleport-core {
  position: relative;
  z-index: 10 !important;
  isolation: isolate;
  max-width: calc(100vw - 32px);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  filter: none !important;
  /* Opacity snaps on with the first lock frame; keep the HUD on its own compositor plane. */
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 360ms cubic-bezier(.16, .84, .24, 1) !important;
}

html .teleport-overlay.active .teleport-core,
html .teleport-overlay.phase-lock .teleport-core,
html .teleport-overlay.phase-corridor .teleport-core {
  opacity: 1 !important;
  transform: translate3d(0, 0, 1px) scale(1) !important;
  filter: none !important;
}

html .teleport-overlay.phase-corridor .teleport-core {
  transform: translate3d(0, 0, 1px) scale(1.02) !important;
}

html .teleport-overlay.phase-transit .teleport-core {
  opacity: 0 !important;
  transform: scale(1.1) translateY(-8px) !important;
  filter: none !important;
  transition-duration: 150ms !important;
}

/* retire old spin/beam theatrics */
html .teleport-ring,
html .teleport-ring::before,
html .teleport-ring::after {
  animation: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
}

html .teleport-beam {
  animation: none !important;
  opacity: 0 !important;
}

/* near-opaque card: decor can never wash the text out */
html .teleport-text {
  position: relative;
  z-index: 11;
  width: min(360px, calc(100vw - 48px));
  max-width: 100%;
  opacity: 1 !important;
  isolation: isolate;
  backface-visibility: hidden;
  transform: translateZ(2px);
  color: #e8f7fa !important;
  border-color: rgba(78, 247, 255, 0.55);
  background: rgba(2, 10, 13, 0.97) !important;
  box-shadow:
    inset 0 0 0 1px rgba(124, 255, 157, 0.1),
    0 0 28px rgba(78, 247, 255, 0.18);
  transition: border-color 240ms ease, box-shadow 280ms ease, transform 320ms ease;
}

html .teleport-text span {
  color: rgba(222, 247, 250, 0.98) !important;
}

html .teleport-text span:last-child {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

html .teleport-overlay.phase-lock .teleport-text {
  border-color: rgba(78, 247, 255, 0.7);
  box-shadow:
    inset 0 0 0 1px rgba(124, 255, 157, 0.12),
    0 0 32px rgba(78, 247, 255, 0.24);
}

html .teleport-overlay.phase-corridor .teleport-text {
  border-color: rgba(124, 255, 157, 0.6);
  box-shadow:
    inset 0 0 0 1px rgba(124, 255, 157, 0.16),
    0 0 36px rgba(78, 247, 255, 0.3);
  transform: translateZ(2px) scale(1.03);
}

html .teleport-overlay.phase-transit .teleport-text {
  opacity: 0 !important;
  transform: scale(1.08);
}

html .teleport-text strong {
  color: #ffffff !important;
  letter-spacing: 0.12em;
  text-shadow: 0 0 16px rgba(78, 247, 255, 0.8) !important;
}

html .teleport-overlay.phase-corridor .teleport-text strong {
  letter-spacing: 0.16em;
  text-shadow:
    0 0 20px rgba(78, 247, 255, 0.95),
    0 0 38px rgba(124, 255, 157, 0.4) !important;
}

/* map/stage: opacity-only dimming — no animated filters on the Leaflet map */
body.is-teleporting #map,
body.is-teleporting .stage,
body.is-teleporting .leaflet-control-container,
body.is-teleporting .vignette {
  transition: opacity 220ms ease !important;
  transform: none !important;
  filter: none !important;
  will-change: opacity;
}

body.is-teleporting #map { opacity: 0.8; }
body.is-teleporting.phase-lock #map { opacity: 0.66; }
body.is-teleporting.phase-corridor #map { opacity: 0.3; }
body.is-teleporting.phase-transit #map { opacity: 0.05; }

body.is-teleporting .stage { opacity: 0.35; }
body.is-teleporting.phase-lock .stage { opacity: 0.35; }
body.is-teleporting.phase-corridor .stage,
body.is-teleporting.phase-transit .stage { opacity: 0; }

/* chrome exits early and cleanly — no half-faded header/footer ghosting into transit */
body.is-teleporting .footer,
body.is-teleporting .header {
  transition: opacity 180ms ease !important;
  transform: none !important;
  filter: none !important;
  opacity: 0 !important;
}

body.is-teleporting .leaflet-control-container { opacity: 0.3; }

body.is-teleporting.phase-corridor .leaflet-control-container,
body.is-teleporting.phase-transit .leaflet-control-container { opacity: 0; }

body.is-teleporting .vignette { opacity: 0.85; }
body.is-teleporting.phase-transit .vignette { opacity: 1; }

/* Arrival — short landing echo, no white flash, text readable */
html.is-arriving #map {
  animation: jumpArriveMap 620ms ease-out both;
}

html.is-arriving .stage {
  animation: jumpArriveStage 620ms cubic-bezier(.16, .84, .24, 1) both;
}

html.is-arriving .leaflet-control-container,
html.is-arriving .footer {
  animation: jumpArriveFade 600ms ease both;
}

/* no .active on arrival: opacity is driven purely by the keyframe (no !important fight) */
html.is-arriving .teleport-overlay.arrival {
  visibility: visible !important;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(78, 247, 255, 0.14), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(124, 255, 157, 0.07), transparent 55%),
    rgba(1, 5, 8, 0.55);
  animation: jumpArriveOverlay 720ms cubic-bezier(.16, .84, .24, 1) both;
}

html.is-arriving .teleport-overlay.arrival .teleport-core {
  filter: none !important;
  transition: none !important;
  animation: jumpArriveCore 720ms cubic-bezier(.16, .84, .24, 1) both;
}

html.is-arriving .teleport-overlay.arrival .teleport-text {
  opacity: 1 !important;
  background: rgba(2, 10, 13, 0.96) !important;
  border-color: rgba(124, 255, 157, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(124, 255, 157, 0.14),
    0 0 34px rgba(78, 247, 255, 0.22);
}

/* landing shockline collapses */
html.is-arriving .teleport-overlay.arrival .teleport-horizon {
  transition: none;
  animation: jumpArriveHorizon 620ms cubic-bezier(.16, .84, .24, 1) both;
}

/* touchdown ping — double green echo */
html.is-arriving .teleport-overlay.arrival .teleport-reticle {
  border-color: rgba(124, 255, 157, 0.6);
  transition: none;
  animation: jumpArrivePing 680ms cubic-bezier(.16, .84, .24, 1) both !important;
}

html.is-arriving .teleport-overlay.arrival .teleport-ring,
html.is-arriving .teleport-overlay.arrival .teleport-beam,
html.is-arriving .teleport-overlay.arrival .teleport-scan,
html.is-arriving .teleport-overlay.arrival .teleport-streaks,
html.is-arriving .teleport-overlay.arrival .teleport-flash {
  opacity: 0 !important;
  animation: none !important;
}

/* reduced motion: instant, decor-free relay */
@media (prefers-reduced-motion: reduce) {
  html .teleport-overlay,
  html .teleport-overlay *,
  body.is-teleporting #map,
  body.is-teleporting .stage,
  body.is-teleporting .footer,
  body.is-teleporting .header,
  html.is-arriving #map,
  html.is-arriving .stage,
  html.is-arriving .leaflet-control-container,
  html.is-arriving .footer {
    animation: none !important;
    transition: opacity 120ms linear !important;
  }

  html .teleport-scan,
  html .teleport-flash,
  html .teleport-horizon,
  html .teleport-streaks,
  html .teleport-reticle {
    display: none !important;
  }

  html .teleport-core,
  html .teleport-text {
    transform: none !important;
  }
}

/* small screens (390x844): 16px safe margin, tighter decor */
@media (max-width: 480px) {
  html .teleport-core {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px) !important;
  }

  html .teleport-text {
    width: calc(100vw - 48px);
    max-width: 100%;
    padding-inline: 14px;
  }

  html .teleport-text span {
    letter-spacing: 0.1em;
  }

  html .teleport-reticle {
    --jump-reticle-size: min(64vw, 180px);
  }

  html .teleport-horizon {
    height: 104px;
    margin-top: -52px;
  }

  body.is-teleporting .footer,
  body.is-teleporting .leaflet-control-container {
    opacity: 0 !important;
  }
}

@keyframes jumpScanDrift {
  0% { transform: translateY(-8%); opacity: 0; }
  25% { opacity: 0.35; }
  100% { transform: translateY(10%); opacity: 0.1; }
}

@keyframes jumpTransitFlash {
  0% { opacity: 0; transform: scale(0.86); }
  38% { opacity: 0.72; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18); }
}

@keyframes jumpCoreCharge {
  0% { opacity: 0; transform: scaleX(2.4); }
  100% { opacity: 1; transform: scaleX(1); }
}

@keyframes jumpGlintSweep {
  0% { transform: translateX(-120%); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(340%); opacity: 0; }
}

@keyframes jumpTunnelIn {
  0% { opacity: 0.28; transform: scale(0.62); }
  35% { opacity: 0.82; }
  100% { opacity: 0.95; transform: scale(1.22); }
}

@keyframes jumpTunnelFar {
  0% { opacity: 0; transform: scale(0.75); }
  40% { opacity: 0.85; }
  100% { opacity: 0.85; transform: scale(1.45); }
}

@keyframes jumpSpokeRush {
  0% { opacity: 0; transform: rotate(-5deg) scale(0.7); }
  30% { opacity: 0.9; }
  100% { opacity: 0.9; transform: rotate(3deg) scale(1.28); }
}

@keyframes jumpTunnelBurst {
  0% { opacity: 0.95; transform: scale(1.22); }
  100% { opacity: 0; transform: scale(2.3); }
}

@keyframes jumpSpokeBurst {
  0% { opacity: 0.9; transform: rotate(3deg) scale(1.28); }
  100% { opacity: 0; transform: rotate(10deg) scale(2); }
}

@keyframes jumpLockPulse {
  0% { opacity: 0; transform: scale(1.6); }
  60% { opacity: 1; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes jumpLockSpin {
  0% { transform: rotate(80deg); opacity: 0.2; }
  100% { transform: rotate(0deg); opacity: 0.9; }
}

/* Arrival keyframes */
@keyframes jumpArriveMap {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

@keyframes jumpArriveStage {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}

@keyframes jumpArriveFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes jumpArriveOverlay {
  0% { opacity: 1; }
  55% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes jumpArriveCore {
  0% { opacity: 0; transform: scale(0.98) translateY(6px); }
  18% { opacity: 1; transform: none; }
  68% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(0.99); }
}

@keyframes jumpArriveHorizon {
  0% { opacity: 0.65; transform: scaleY(0.55) scaleX(1.05); }
  35% { opacity: 0.45; transform: scaleY(0.12) scaleX(1); }
  100% { opacity: 0; transform: scaleY(0.02) scaleX(0.35); }
}

@keyframes jumpArrivePing {
  0% { opacity: 0; transform: scale(0.5); }
  22% { opacity: 0.85; transform: scale(0.92); }
  40% { opacity: 0.3; transform: scale(1.04); }
  58% { opacity: 0.6; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.32); }
}

html .speedtest-modal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms cubic-bezier(.22, .8, .24, 1), visibility 300ms ease,
    background 420ms ease;
}

html .speedtest-modal[style*="opacity: 1"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html .speedtest-modal[style*="opacity: 0"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body .speedtest-modal.force-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body .speedtest-modal.force-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html .speedtest-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html .speedtest-window {
  opacity: 0;
  transform: translateY(18px) scale(.96);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(.16, .84, .24, 1);
}

html .speedtest-modal.active .speedtest-window {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.radar-node.hub .pulse {
  border-color: rgba(255, 199, 107, 0.62);
  box-shadow: 0 0 10px rgba(255, 199, 107, 0.22);
  animation-name: radarHubWave;
  animation-duration: 4.2s;
  animation-timing-function: ease-out;
}

.radar-node.hub .pulse:nth-child(2) {
  animation-delay: 1.4s;
}

.radar-node.hub .pulse:nth-child(3) {
  animation-delay: 2.8s;
}

.radar-node.hub .core {
  border-color: #fff6d9;
  background: #ffc76b;
  animation: radarHubCore 2.8s ease-in-out infinite;
}

.radar-node.hub .label {
  border-left-color: rgba(255, 199, 107, 0.9);
  color: #fff1c7;
  background: rgba(18, 14, 5, 0.8);
  text-shadow: 0 0 6px rgba(255, 199, 107, 0.38);
}

.radar-node.hub.teleport-target .label::after {
  color: #ffc76b;
  text-shadow: 0 0 10px rgba(255, 199, 107, 0.82);
}

@keyframes radarHubWave {
  0% {
    opacity: 0.5;
    transform: scale(0.48);
  }
  68% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    transform: scale(1.38);
  }
}

@keyframes radarHubCore {
  0%, 100% {
    opacity: 0.86;
    transform: translate(-50%, -50%) scale(0.94);
    box-shadow: 0 0 8px rgba(255, 199, 107, 0.62), 0 0 18px rgba(255, 199, 107, 0.16);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 0 12px rgba(255, 218, 130, 0.82), 0 0 28px rgba(255, 199, 107, 0.34);
  }
}

@keyframes radarLogoCore {
  0%, 100% {
    opacity: 0.7;
    transform: scale(0.82);
    box-shadow: 0 0 9px rgba(138, 240, 178, 0.64);
  }
  50% {
    opacity: 1;
    transform: scale(1.16);
    box-shadow: 0 0 20px rgba(138, 240, 178, 0.96), 0 0 34px rgba(116, 232, 255, 0.28);
  }
}

@keyframes radarLogoRing {
  0% {
    opacity: 0.84;
    transform: translate(-50%, -50%) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.35);
  }
}

@keyframes radarLogoText {
  0%, 100% {
    opacity: 0.9;
    text-shadow: 0 0 5px rgba(116, 232, 255, 0.16);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 13px rgba(116, 232, 255, 0.48);
  }
}

@media (max-width: 560px) {
  .topbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
  }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
  }

  .brand > span:not(.dot) {
    white-space: nowrap;
  }

  .top-actions {
    flex: 0 0 auto;
    width: auto !important;
  }

  .panel.primary {
    margin-top: 30vh !important;
  }

  .panel-collapse {
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand .dot,
  .brand .dot::before,
  .brand .dot::after,
  .brand > :not(.dot) {
    animation: none;
  }

  .radar-node.hub .pulse,
  .radar-node.hub .core,
  .radar-node.hub .label {
    animation: none;
  }

  .panel > :not(.panel-header),
  .detail-card,
  .readouts,
  .teleport-overlay,
  .teleport-core,
  .teleport-text,
  .teleport-scan,
  .teleport-flash,
  .teleport-beam,
  .teleport-horizon,
  .teleport-reticle,
  .teleport-streaks,
  .teleport-rings,
  .teleport-ring,
  .speedtest-modal,
  .speedtest-window,
  body.is-teleporting #map,
  body.is-teleporting .stage,
  body.is-teleporting .leaflet-control-container,
  body.is-teleporting .footer,
  body.is-teleporting .vignette {
    transition: none !important;
    animation: none !important;
  }

  html .teleport-overlay.active,
  html .speedtest-modal.active {
    opacity: 1;
    visibility: visible;
  }

  html .teleport-overlay.active .teleport-core,
  html .speedtest-modal.active .speedtest-window {
    opacity: 1;
    transform: none;
    filter: none;
  }

  html.is-arriving #map,
  html.is-arriving .stage,
  html.is-arriving .leaflet-control-container,
  html.is-arriving .footer,
  html.is-arriving .teleport-overlay.arrival,
  html.is-arriving .teleport-overlay.arrival .teleport-core {
    animation: none !important;
  }
}