/* ── Burst mode overlay ──────────────────────────────────────
   Reuses the template's .modal machinery (focus trap, Escape, backdrop close)
   and replaces only the dialog's own look — hence .modal__dialog stays. */

.mode-overlay .modal__backdrop { background: rgba(2, 4, 14, .92); }

.mode-dialog {
  position: relative;
  width: min(100%, 1100px);
  max-width: none;
  aspect-ratio: 16 / 10;
  max-height: 88vh;
  padding: clamp(12px, 2.4vw, 28px);
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(var(--accent-rgb), .12), transparent 70%),
    linear-gradient(160deg, var(--hud-raised-start), var(--hud-raised-end));
  border: 1px solid var(--hud-line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* The cross-hair the reference divides its screen with */
.mode-dialog::before, .mode-dialog::after {
  content: ''; position: absolute; background: var(--hud-line);
}
.mode-dialog::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.mode-dialog::after { top: 50%; left: 0; right: 0; height: 1px; }

.mode-quad {
  position: absolute;
  display: grid; gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: rgba(3, 6, 22, .72);
  border: 1px solid var(--hud-line-strong);
  border-radius: var(--radius-sm);
  animation: quadIn var(--dur-slow) var(--ease-out) backwards;
}
.mode-quad--tl { top: clamp(12px, 3%, 26px); left: clamp(12px, 3%, 26px); animation-delay: 120ms; }
.mode-quad--tr { top: clamp(12px, 3%, 26px); right: clamp(12px, 3%, 26px); text-align: right; animation-delay: 200ms; }
.mode-quad--bl { bottom: clamp(12px, 3%, 26px); left: clamp(12px, 3%, 26px); animation-delay: 280ms; }
.mode-quad--br { bottom: clamp(12px, 3%, 26px); right: clamp(12px, 3%, 26px); text-align: right; animation-delay: 360ms; }
@keyframes quadIn { from { opacity: 0; transform: scale(.92); } }

.mode-quad__k {
  font-family: var(--font-hud); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--track-xwide);
  color: var(--text-muted);
}
.mode-quad__v {
  font-family: var(--font-hud); font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  color: var(--accent);
  text-shadow: 0 0 calc(12px * var(--fx-bloom)) var(--glow-mid);
}

.mode-core {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}

.mode-ring {
  position: absolute;
  width: min(62%, 62vh); aspect-ratio: 1;
  transform: rotate(-90deg);
}
.mode-ring__track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 14; }
.mode-ring__sweep {
  fill: none;
  stroke: var(--accent);
  stroke-width: 14;
  stroke-linecap: butt;
  stroke-dasharray: 553;
  stroke-dashoffset: 553;
  filter: drop-shadow(0 0 calc(14px * var(--fx-bloom)) var(--glow-hot));
  transition: stroke-dashoffset var(--dur-boot) var(--ease-out);
}
.mode-overlay.is-charged .mode-ring__sweep { stroke-dashoffset: 0; }

.core-a--ghost {
  position: absolute;
  width: min(34%, 34vh); height: auto; aspect-ratio: 1;
  color: var(--accent);
  opacity: .3;
  animation: none;
  filter: drop-shadow(0 0 calc(30px * var(--fx-bloom)) var(--glow-mid));
}

.mode-banner {
  position: relative;
  width: min(78%, 720px);
  padding: var(--space-3) var(--space-6);
  text-align: center;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .3) 12%, rgba(var(--accent-rgb), .3) 88%, transparent);
  border-block: 1px solid var(--accent);
  clip-path: polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0 50%);
  animation: bannerSlam var(--dur-slow) var(--ease-out) backwards;
}
@keyframes bannerSlam {
  from { opacity: 0; transform: scaleX(.4); letter-spacing: .8em; }
}
.mode-banner span {
  font-family: var(--font-hud);
  font-size: clamp(var(--text-lg), 3.4vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--text-primary);
  text-shadow: 0 0 calc(22px * var(--fx-bloom)) var(--glow-hot);
}

.mode-picker {
  position: absolute;
  left: 50%; bottom: clamp(52px, 11%, 92px);
  transform: translateX(-50%);
  display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center;
  width: min(92%, 620px);
}

.mode-actions {
  position: absolute;
  left: 50%; bottom: clamp(12px, 3%, 26px);
  transform: translateX(-50%);
}

/* An active mode keeps a chip in the console readout */
.readout__v.is-live { animation: livePulse 1.6s var(--ease-out) infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }