:root {
  color-scheme: dark;
  --needle-angle: -17deg;
  --signal-strength: 10%;
  --ink: #f4f0e6;
  --muted: #b8b0a0;
  --amber: #e8b15f;
  --red: #b75350;
  --mint: #80d6bd;
  --wood: #24130d;
  --shadow: 0 32px 90px rgba(0, 0, 0, 0.64);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(128, 214, 189, 0.12), transparent 19rem),
    radial-gradient(circle at 50% 100%, rgba(183, 83, 80, 0.12), transparent 20rem),
    #030504;
}

button {
  font: inherit;
  color: inherit;
}

.video-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
}

.video-background iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180vh;
  height: 101.25vh;
  min-width: 100vw;
  min-height: 56.25vw;
  border: 0;
  transform: translate(-50%, -50%) scale(1.08);
  opacity: 0;
  filter: grayscale(0.35) contrast(1.22) brightness(0.62);
  pointer-events: none;
}

body:not(.has-video-background) .video-background {
  filter: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(128, 214, 189, 0.14), transparent 18rem),
    repeating-linear-gradient(0deg, rgba(244, 240, 230, 0.035) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(183, 83, 80, 0.05), transparent 32%, rgba(128, 214, 189, 0.05)),
    linear-gradient(180deg, rgba(5, 8, 7, 0.36), rgba(5, 8, 7, 0.9));
  animation: vhs-roll 4.8s linear infinite;
  transition: opacity 300ms ease;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08), transparent 2px),
    radial-gradient(circle at 70% 62%, rgba(255, 255, 255, 0.06), transparent 2px),
    radial-gradient(circle at 48% 82%, rgba(255, 255, 255, 0.05), transparent 1px);
  background-size: 64px 64px, 92px 92px, 38px 38px;
  mix-blend-mode: screen;
  animation: static-drift 900ms steps(2, end) infinite;
  transition: opacity 300ms ease;
}

body.is-awake::before {
  opacity: 1;
}

body.is-awake::after {
  opacity: 0.28;
}

body.is-333::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(183, 83, 80, 0.22), transparent 18rem),
    repeating-linear-gradient(0deg, rgba(244, 240, 230, 0.045) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(183, 83, 80, 0.1), transparent 28%, rgba(128, 214, 189, 0.08)),
    linear-gradient(180deg, rgba(5, 8, 7, 0.22), rgba(5, 8, 7, 0.88));
}

.start-spotlight {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(circle at 50% 39%, rgba(0, 0, 0, 0.08) 0 6rem, rgba(0, 0, 0, 0.36) 8rem, rgba(0, 0, 0, 0.6) 100%),
    rgba(0, 0, 0, 0.34);
  transition: opacity 420ms ease, visibility 420ms ease;
}

.has-started .start-spotlight,
.is-awake .start-spotlight {
  visibility: hidden;
  opacity: 0;
}

body:not(.has-started):not(.is-awake) .radio-console > *:not(.radio-face),
body:not(.has-started):not(.is-awake) .radio-face > *:not(.power-switch) {
  opacity: 0.38;
  filter: grayscale(0.32) blur(0.3px);
}

body:not(.has-started):not(.is-awake) .power-switch {
  opacity: 1;
  filter: brightness(1.9) drop-shadow(0 0 24px rgba(232, 177, 95, 0.52));
}

.haunted-room {
  position: relative;
  z-index: 2;
  width: min(100%, 520px, calc((100svh - 34px) * 0.8));
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  gap: 14px;
  animation: room-reveal 900ms ease-out both;
}

.show-title {
  width: 100%;
  display: grid;
  gap: 4px;
  text-align: center;
  filter: drop-shadow(0 0 18px rgba(232, 177, 95, 0.24));
  animation: title-float 5.5s ease-in-out infinite;
}

.show-title span {
  color: var(--ink);
  font-size: clamp(2rem, 9vw, 3.8rem);
  font-weight: 950;
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.show-title small {
  color: rgba(232, 177, 95, 0.82);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.radio-console {
  position: relative;
  width: 100%;
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(244, 240, 230, 0.12);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(57, 29, 18, 0.88), rgba(12, 20, 18, 0.92)),
    var(--wood);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  animation: cabinet-idle 5.8s ease-in-out infinite;
}

.radio-console::before {
  content: "";
  display: block;
  position: absolute;
  inset: -3px;
  z-index: -2;
  border-radius: 30px;
  background: conic-gradient(from 180deg, rgba(128, 214, 189, 0), rgba(232, 177, 95, 0.28), rgba(183, 83, 80, 0.18), rgba(128, 214, 189, 0));
  filter: blur(18px);
  opacity: 0.42;
  animation: aura-turn 8s linear infinite;
}

.stage-light {
  position: absolute;
  top: -18%;
  z-index: -2;
  width: 44%;
  height: 150%;
  opacity: 0.24;
  pointer-events: none;
  filter: blur(10px);
  background: linear-gradient(180deg, rgba(232, 177, 95, 0.34), rgba(232, 177, 95, 0));
  clip-path: polygon(44% 0, 58% 0, 100% 100%, 0 100%);
  animation: stage-sweep 7s ease-in-out infinite;
}

.stage-left {
  left: -18%;
  transform: rotate(-16deg);
}

.stage-right {
  right: -18%;
  transform: rotate(16deg);
  animation-delay: -3.5s;
}

.smoke {
  position: absolute;
  z-index: -1;
  width: 170px;
  height: 170px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 42%, rgba(184, 176, 160, 0.18), transparent 34%),
    radial-gradient(circle at 62% 54%, rgba(128, 214, 189, 0.11), transparent 42%);
  filter: blur(18px);
  opacity: 0.52;
  pointer-events: none;
  animation: smoke-rise 9s ease-in-out infinite;
}

.smoke-one {
  left: 4%;
  top: 12%;
}

.smoke-two {
  right: 8%;
  top: 24%;
  animation-delay: -3s;
  animation-duration: 11s;
}

.smoke-three {
  left: 34%;
  bottom: 18%;
  animation-delay: -6s;
  animation-duration: 13s;
}

.top-strip {
  display: flex;
  align-items: center;
}

.live-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.player-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: rgba(128, 214, 189, 0.62);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(128, 214, 189, 0.18);
}

.player-count strong {
  color: rgba(244, 240, 230, 0.78);
  font-size: 0.68rem;
}

.top-strip {
  position: fixed;
  left: 50%;
  top: max(10px, env(safe-area-inset-top));
  z-index: 46;
  width: min(88vw, 360px);
  transform: translateX(-50%);
  pointer-events: none;
}

.top-strip {
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.question-card {
  min-height: 108px;
  border: 1px solid rgba(128, 214, 189, 0.24);
  border-radius: 20px;
  padding: 14px 18px;
  display: grid;
  place-items: center;
  color: rgba(244, 240, 230, 0.9);
  background:
    linear-gradient(90deg, rgba(5, 8, 7, 0.88), rgba(13, 31, 28, 0.9), rgba(5, 8, 7, 0.88)),
    radial-gradient(circle at 50% 0%, rgba(128, 214, 189, 0.18), transparent 64%),
    #030605;
  box-shadow:
    inset 0 0 26px rgba(128, 214, 189, 0.14),
    inset 0 1px 0 rgba(244, 240, 230, 0.08),
    0 0 24px rgba(0, 0, 0, 0.28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 0 14px rgba(128, 214, 189, 0.22);
}

.question-card #quizQuestion {
  display: grid;
  gap: 7px;
  width: 100%;
}

.quiz-id {
  color: rgba(232, 177, 95, 0.84);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.quiz-prompt {
  display: block;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 18px rgba(183, 83, 80, 0.9);
}

.live-dot.is-live {
  background: var(--mint);
  box-shadow: 0 0 20px rgba(128, 214, 189, 1);
}

.radio-face {
  position: relative;
  width: 100%;
  aspect-ratio: 1.08;
  overflow: visible;
  border: 1px solid rgba(244, 240, 230, 0.16);
  border-radius: 34px;
  padding: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 12%, transparent 88%, rgba(255, 255, 255, 0.04)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 18px),
    linear-gradient(145deg, #5b2f1d 0%, #2b160f 46%, #130b08 100%);
  cursor: pointer;
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.58),
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    0 26px 54px rgba(0, 0, 0, 0.52);
}

.radio-face::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(232, 177, 95, 0.22);
  border-radius: 26px;
  pointer-events: none;
  box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.48);
}

.radio-handle {
  position: absolute;
  left: 22%;
  right: 22%;
  top: -18px;
  height: 34px;
  border: 2px solid rgba(232, 177, 95, 0.18);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background: rgba(23, 13, 9, 0.6);
}

.radio-brand {
  position: absolute;
  left: 50%;
  top: 32px;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(244, 240, 230, 0.8);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-shadow: 0 0 16px rgba(232, 177, 95, 0.32);
}

.power-switch {
  position: absolute;
  left: 50%;
  top: 46px;
  z-index: 24;
  min-width: 156px;
  min-height: 58px;
  border: 1px solid rgba(232, 177, 95, 0.34);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 16px;
  color: rgba(244, 240, 230, 0.88);
  background:
    radial-gradient(circle at 28% 50%, rgba(183, 83, 80, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(41, 20, 13, 0.96), rgba(5, 8, 7, 0.92));
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.66),
    0 0 28px rgba(183, 83, 80, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.34);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  pointer-events: auto;
  transform: translateX(-50%);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  animation: start-call 1.65s ease-in-out infinite;
}

.power-switch:hover,
.power-switch:focus-visible {
  transform: translateX(-50%) scale(1.04);
  border-color: rgba(232, 177, 95, 0.62);
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.62),
    0 0 34px rgba(232, 177, 95, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.36);
}

.switch-light {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 14px rgba(183, 83, 80, 0.82);
}

.is-awake .switch-light {
  background: var(--mint);
  box-shadow: 0 0 18px rgba(128, 214, 189, 1);
  animation: switch-spark 1.5s ease-in-out infinite;
}

.is-awake .power-switch {
  border-color: rgba(128, 214, 189, 0.42);
  background:
    radial-gradient(circle at 28% 50%, rgba(128, 214, 189, 0.22), transparent 30%),
    linear-gradient(180deg, rgba(14, 42, 35, 0.96), rgba(5, 8, 7, 0.92));
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.66),
    0 0 30px rgba(128, 214, 189, 0.24),
    0 10px 24px rgba(0, 0, 0, 0.34);
  animation: none;
}

body:not(.is-awake) .quiz-answers button {
  opacity: 0.54;
  filter: grayscale(0.35);
  pointer-events: none;
}

.speaker {
  position: absolute;
  top: 27%;
  bottom: 24%;
  width: 23%;
  border-radius: 18px;
  background:
    repeating-linear-gradient(0deg, rgba(232, 177, 95, 0.22) 0 3px, transparent 3px 12px),
    linear-gradient(180deg, rgba(5, 8, 7, 0.72), rgba(5, 8, 7, 0.42));
  border: 1px solid rgba(244, 240, 230, 0.11);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.6);
}

.is-awake .speaker {
  animation: speaker-rattle 180ms ease-in-out infinite;
}

.is-static-hold .speaker {
  animation: speaker-rattle 70ms ease-in-out infinite;
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.8), 0 0 26px rgba(128, 214, 189, 0.22);
}

.speaker-left {
  left: 7%;
}

.speaker-right {
  right: 7%;
}

.dial-window {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 3;
  width: 47%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(232, 177, 95, 0.34);
  border-radius: 999px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(128, 214, 189, 0.22), rgba(10, 23, 21, 0.8) 58%, rgba(0, 0, 0, 0.96)),
    #101817;
  box-shadow:
    inset 0 0 38px rgba(128, 214, 189, 0.18),
    0 0 42px rgba(0, 0, 0, 0.52);
  animation: dial-flicker 4.2s steps(1, end) infinite;
}

.dial-scale {
  position: absolute;
  inset: 12%;
  border-radius: 999px;
  background:
    repeating-conic-gradient(from -52deg, rgba(232, 177, 95, 0.88) 0deg 1.2deg, transparent 1.2deg 8deg);
  mask: radial-gradient(circle, transparent 0 52%, #000 53% 66%, transparent 67%);
  opacity: 0.82;
}

.broadcast-glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.08);
  transition: opacity 260ms ease, filter 260ms ease;
  filter: contrast(1.35) saturate(0.75) brightness(0.68);
}

.broadcast-glass iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.has-broadcast-glass .broadcast-glass {
  opacity: 0.92;
  pointer-events: auto;
  z-index: 8;
}

.has-broadcast-glass #scope {
  opacity: 0.42;
}

.has-broadcast-glass .dial-scale {
  opacity: 0.28;
}

.has-broadcast-glass .glass-glow {
  opacity: 0.34;
}

.is-awake .dial-scale {
  animation: scale-glow 1.7s ease-in-out;
}

.is-manual-tuning .dial-scale {
  animation: scale-glow 420ms ease-in-out infinite;
}

.radio-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(232, 177, 95, 0.18), transparent 18%),
    linear-gradient(110deg, rgba(255, 255, 255, 0.1), transparent 24%, transparent 70%, rgba(0, 0, 0, 0.2));
}

.radio-ripple {
  position: absolute;
  z-index: 9;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(232, 177, 95, 0.72);
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: ripple-out 720ms ease-out forwards;
}

.glass-glow {
  position: absolute;
  inset: 12%;
  z-index: 3;
  border-radius: 999px;
  opacity: 0.52;
  box-shadow: 0 0 54px rgba(128, 214, 189, 0.42), inset 0 0 42px rgba(128, 214, 189, 0.22);
  transition: opacity 300ms ease, box-shadow 300ms ease;
}

.is-awake .glass-glow {
  opacity: 1;
  box-shadow: 0 0 80px rgba(128, 214, 189, 0.72), inset 0 0 62px rgba(232, 177, 95, 0.24);
  animation: glow-breathe 1.9s ease-in-out infinite;
}

.dial-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 48%;
  height: 48%;
  border: 1px solid rgba(232, 177, 95, 0.5);
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  background: rgba(5, 8, 7, 0.52);
  box-shadow: 0 0 42px rgba(0, 0, 0, 0.6);
}

.dial-center strong {
  display: block;
  width: 100%;
  font-size: clamp(1rem, 6vw, 1.8rem);
  line-height: 1;
  text-align: center;
}

.dial-center small {
  display: block;
  width: 100%;
  margin-top: 5px;
  color: var(--amber);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-align: center;
}

.needle {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 42%;
  height: 3px;
  transform-origin: 0 50%;
  transform: rotate(var(--needle-angle));
  background: linear-gradient(90deg, var(--red), rgba(232, 177, 95, 0));
  box-shadow: 0 0 14px rgba(183, 83, 80, 0.9);
  transition: transform 500ms ease;
}

.is-awake .needle {
  transform: rotate(var(--needle-angle));
  animation: needle-twitch 620ms ease-in-out infinite;
}

.is-tuning .needle {
  animation: tuning-sweep 1.7s cubic-bezier(0.18, 0.9, 0.18, 1) both;
}

.is-manual-tuning .needle {
  animation: none;
  transition: transform 80ms linear;
}

.is-tuning .tuning-window {
  animation: tuning-window-glow 1.7s ease-in-out both;
}

#scope {
  position: absolute;
  inset: auto 0 0;
  z-index: 5;
  width: 100%;
  height: 36%;
  mix-blend-mode: screen;
  opacity: 0.86;
}

.video-clues {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}

.video-clue {
  position: absolute;
  left: var(--base-x, 50%);
  top: var(--base-y, 50%);
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(128, 214, 189, 0.56);
  border-radius: 999px;
  background: rgba(128, 214, 189, 0.08);
  box-shadow: 0 0 22px rgba(128, 214, 189, 0.56);
  animation:
    clue-drift var(--orbit-speed, 14s) ease-in-out infinite alternate,
    clue-pulse 2.4s ease-in-out infinite,
    clue-static 720ms steps(2, end) infinite;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transform: translate(-50%, -50%);
}

.video-clue::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: inherit;
  background: rgba(128, 214, 189, 0.8);
  box-shadow: 0 0 12px rgba(128, 214, 189, 1);
}

.video-clue::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  opacity: 0.45;
  background:
    repeating-linear-gradient(0deg, rgba(244, 240, 230, 0.5) 0 1px, transparent 1px 3px),
    radial-gradient(circle, rgba(128, 214, 189, 0.32), transparent 68%);
  mix-blend-mode: screen;
  filter: blur(0.4px);
  animation: clue-noise 460ms steps(3, end) infinite;
}

.is-manual-tuning .video-clue {
  opacity: 0.28;
}

.tuning-window {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 18%;
  z-index: 3;
  height: 30px;
  border: 1px solid rgba(232, 177, 95, 0.2);
  border-radius: 999px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(244, 240, 230, 0.58);
  background: rgba(5, 8, 7, 0.44);
  font-size: 0.62rem;
  font-weight: 900;
}

.marquee-window {
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 7.8%;
  z-index: 5;
  height: 38px;
  border: 1px solid rgba(232, 177, 95, 0.32);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(232, 177, 95, 0.13), rgba(5, 8, 7, 0.72)),
    rgba(5, 8, 7, 0.76);
  box-shadow:
    inset 0 0 18px rgba(232, 177, 95, 0.14),
    0 0 22px rgba(232, 177, 95, 0.14);
}

.marquee-window {
  display: none;
}

.signal-meter {
  position: absolute;
  left: 31%;
  right: 31%;
  bottom: 4.6%;
  z-index: 5;
  height: 8px;
  border: 1px solid rgba(232, 177, 95, 0.2);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(5, 8, 7, 0.7);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
}

.signal-meter span {
  display: block;
  width: var(--signal-strength);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red), var(--amber), var(--mint));
  box-shadow: 0 0 14px rgba(128, 214, 189, 0.62);
  transition: width 160ms ease;
}

.marquee-window::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(5, 8, 7, 0.9), transparent 18%, transparent 82%, rgba(5, 8, 7, 0.9));
}

.marquee-window span {
  display: inline-block;
  min-width: max-content;
  padding-left: 100%;
  color: var(--amber);
  text-shadow: 0 0 12px rgba(232, 177, 95, 0.76);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  white-space: nowrap;
  animation: ticker-scroll 16s linear infinite;
}

.is-awake .marquee-window {
  box-shadow:
    inset 0 0 22px rgba(232, 177, 95, 0.22),
    0 0 28px rgba(232, 177, 95, 0.24);
}

.is-manual-tuning .marquee-window,
.is-static-hold .marquee-window {
  box-shadow:
    inset 0 0 26px rgba(128, 214, 189, 0.26),
    0 0 34px rgba(128, 214, 189, 0.26);
}

.knob {
  position: absolute;
  bottom: 7%;
  z-index: 4;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(232, 177, 95, 0.28);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), transparent 18%),
    radial-gradient(circle, #382016, #100806 68%);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.7), 0 0 18px rgba(0, 0, 0, 0.42);
  pointer-events: auto;
}

.knob-left {
  left: 12%;
}

.knob-left::after,
.knob-right::after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(244, 240, 230, 0.68);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.knob-left::after {
  content: "PREV";
}

.knob-right {
  right: 12%;
}

.knob-right::after {
  content: "NEXT";
}

.is-awake .knob-left {
  animation: knob-turn-left 3.4s ease-in-out infinite;
}

.is-awake .knob-right {
  animation: knob-turn-right 4.2s ease-in-out infinite;
}

.radio-feet {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -10px;
  height: 16px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #120907, #3a2016, #120907);
  opacity: 0.88;
}

.video-clue.is-tuned {
  border-color: rgba(232, 177, 95, 0.76);
  background: rgba(232, 177, 95, 0.14);
  box-shadow: 0 0 24px rgba(232, 177, 95, 0.72);
}

.video-clue.is-sealed {
  border-color: rgba(244, 240, 230, 0.18);
  background: rgba(5, 8, 7, 0.42);
  box-shadow: 0 0 12px rgba(183, 83, 80, 0.28);
  opacity: 0.34;
}

.video-clue.is-sealed::after {
  inset: 13px;
  background: rgba(183, 83, 80, 0.62);
  box-shadow: 0 0 10px rgba(183, 83, 80, 0.82);
}

.video-clue.is-sealed::before {
  opacity: 0.24;
}

.video-clue.is-unlocked {
  opacity: 1;
}

.video-clue.is-target {
  width: 46px;
  height: 46px;
  border-color: rgba(244, 240, 230, 0.92);
  background:
    radial-gradient(circle, rgba(244, 240, 230, 0.16), rgba(128, 214, 189, 0.1)),
    rgba(5, 8, 7, 0.2);
  box-shadow:
    0 0 14px rgba(244, 240, 230, 0.84),
    0 0 34px rgba(128, 214, 189, 0.88),
    0 0 72px rgba(128, 214, 189, 0.36);
  animation:
    clue-drift var(--orbit-speed, 14s) ease-in-out infinite alternate,
    target-breathe 1.18s ease-in-out infinite,
    clue-static 520ms steps(2, end) infinite;
}

.video-clue.is-target::after {
  inset: 12px;
  background: rgba(244, 240, 230, 0.96);
  box-shadow:
    0 0 18px rgba(244, 240, 230, 1),
    0 0 30px rgba(128, 214, 189, 0.9);
}

.video-clue.is-target::before {
  inset: -14px;
  opacity: 0.85;
}

.video-clue.is-holding,
.video-clue.is-locked {
  border-color: rgba(244, 240, 230, 1);
  background: rgba(232, 177, 95, 0.28);
  box-shadow:
    0 0 18px rgba(244, 240, 230, 0.9),
    0 0 44px rgba(232, 177, 95, 0.78),
    0 0 76px rgba(128, 214, 189, 0.42);
}

.video-clue.is-holding::after,
.video-clue.is-locked::after {
  background: rgba(244, 240, 230, 0.95);
}

.video-clue.is-near::before,
.video-clue.is-holding::before,
.video-clue.is-locked::before {
  opacity: 0.9;
}

.video-clue.is-near {
  border-color: rgba(244, 240, 230, 0.95);
  background: rgba(232, 177, 95, 0.22);
  box-shadow: 0 0 34px rgba(232, 177, 95, 0.96), 0 0 58px rgba(128, 214, 189, 0.36);
}

.is-awake .video-clue {
  animation-duration: 1.35s;
}

.is-correct .radio-console {
  animation:
    cabinet-idle 5.8s ease-in-out infinite,
    capture-flash 860ms ease-out both;
}

.is-correct .dial-window,
.is-correct .marquee-window,
.is-correct .signal-readout,
.is-correct .game-panel {
  border-color: rgba(128, 214, 189, 0.62);
  box-shadow:
    inset 0 0 28px rgba(128, 214, 189, 0.24),
    0 0 34px rgba(128, 214, 189, 0.34);
}

.is-wrong .radio-console {
  animation:
    cabinet-idle 5.8s ease-in-out infinite,
    false-signal-shake 460ms steps(3, end) both;
}

.is-wrong .dial-window,
.is-wrong .marquee-window,
.is-wrong .signal-readout,
.is-wrong .game-panel {
  border-color: rgba(183, 83, 80, 0.64);
  box-shadow:
    inset 0 0 24px rgba(183, 83, 80, 0.22),
    0 0 28px rgba(183, 83, 80, 0.34);
}

.has-video-background .video-background iframe {
  opacity: 0;
}

.signal-readout,
.hidden-message {
  border: 1px solid rgba(244, 240, 230, 0.12);
  border-radius: 18px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(128, 214, 189, 0.07), rgba(5, 8, 7, 0.58)),
    rgba(5, 8, 7, 0.42);
}

.game-panel {
  border: 1px solid rgba(244, 240, 230, 0.12);
  border-radius: 18px;
  min-height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(244, 240, 230, 0.72);
  background:
    linear-gradient(180deg, rgba(232, 177, 95, 0.06), rgba(5, 8, 7, 0.48)),
    rgba(5, 8, 7, 0.34);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.game-panel strong,
#roundTimer {
  color: var(--amber);
  font-size: 0.86rem;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(232, 177, 95, 0.46);
}

.quiz-panel {
  border: 1px solid rgba(128, 214, 189, 0.16);
  border-radius: 18px;
  padding: 12px;
  display: grid;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(128, 214, 189, 0.07), rgba(5, 8, 7, 0.56)),
    rgba(5, 8, 7, 0.38);
  box-shadow:
    inset 0 0 20px rgba(128, 214, 189, 0.08),
    0 0 20px rgba(0, 0, 0, 0.22);
}

.radio-face .quiz-panel {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 16%;
  z-index: 11;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  pointer-events: auto;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.quiz-question {
  min-height: 34px;
  color: rgba(244, 240, 230, 0.84);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(128, 214, 189, 0.22);
}

.radio-face .quiz-question {
  min-height: 16px;
  max-height: 18px;
  overflow: hidden;
  color: rgba(232, 177, 95, 0.86);
  font-size: 0.5rem;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.16em;
}

.radio-face .quiz-question span {
  display: contents;
}

.quiz-answers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.radio-face .quiz-answers {
  gap: 6px;
}

.quiz-answers button {
  min-height: 42px;
  border: 1px solid rgba(232, 177, 95, 0.28);
  border-radius: 12px;
  padding: 8px 6px;
  color: rgba(244, 240, 230, 0.82);
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 177, 95, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(37, 22, 15, 0.96), rgba(8, 12, 11, 0.94));
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.58),
    0 0 12px rgba(232, 177, 95, 0.08);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.08;
  text-transform: uppercase;
  cursor: pointer;
}

.radio-face .quiz-answers button {
  min-height: 32px;
  border-radius: 999px;
  padding: 5px 6px;
  font-size: 0.48rem;
}

.quiz-answers button:active {
  transform: translateY(1px);
  border-color: rgba(128, 214, 189, 0.68);
  color: var(--ink);
  box-shadow:
    inset 0 0 18px rgba(128, 214, 189, 0.18),
    0 0 18px rgba(128, 214, 189, 0.28);
}

.is-correct .quiz-panel {
  border-color: rgba(128, 214, 189, 0.5);
  box-shadow:
    inset 0 0 22px rgba(128, 214, 189, 0.16),
    0 0 26px rgba(128, 214, 189, 0.22);
}

.is-wrong .quiz-panel {
  border-color: rgba(183, 83, 80, 0.5);
  box-shadow:
    inset 0 0 22px rgba(183, 83, 80, 0.14),
    0 0 26px rgba(183, 83, 80, 0.2);
}

.is-intro .dial-window {
  animation: dial-flicker 420ms steps(1, end) infinite;
}

.signal-readout {
  min-height: 58px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  box-shadow: inset 0 0 24px rgba(128, 214, 189, 0.08);
}

#readoutFrequency {
  color: var(--amber);
  font-size: 1.18rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#trackTitle {
  color: rgba(244, 240, 230, 0.68);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.readout-bars {
  width: 44px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(128, 214, 189, 0.2) 0 4px, transparent 4px 8px),
    linear-gradient(0deg, rgba(232, 177, 95, 0.34), rgba(128, 214, 189, 0.24));
  box-shadow: 0 0 18px rgba(128, 214, 189, 0.22);
  opacity: 0.48;
}

.is-awake .readout-bars {
  animation: readout-meter 1.2s ease-in-out infinite;
}

.is-surge .radio-console {
  animation: power-surge 520ms ease-out both;
}

.is-surge .dial-window {
  box-shadow:
    inset 0 0 44px rgba(232, 177, 95, 0.24),
    0 0 70px rgba(128, 214, 189, 0.46);
}

.is-static-hold .readout-bars,
.is-manual-tuning .readout-bars {
  animation: readout-meter 260ms ease-in-out infinite;
}

p {
  margin: 0;
}

.hidden-message {
  color: var(--muted);
  line-height: 1.45;
  text-align: center;
  font-size: 0.82rem;
}

@keyframes readout-meter {
  0%,
  100% {
    opacity: 0.46;
    transform: scaleY(0.78);
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes room-reveal {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(14px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes ripple-out {
  from {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.4);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(9);
  }
}

@keyframes power-surge {
  0% {
    filter: brightness(1);
    transform: scale(1);
  }

  35% {
    filter: brightness(1.45) saturate(1.28);
    transform: scale(1.012);
  }

  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}

@keyframes start-call {
  0%,
  100% {
    box-shadow:
      inset 0 0 18px rgba(0, 0, 0, 0.66),
      0 0 22px rgba(183, 83, 80, 0.2),
      0 10px 24px rgba(0, 0, 0, 0.34);
  }

  50% {
    box-shadow:
      inset 0 0 18px rgba(0, 0, 0, 0.66),
      0 0 40px rgba(232, 177, 95, 0.34),
      0 12px 28px rgba(0, 0, 0, 0.38);
  }
}

@keyframes title-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes aura-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes stage-sweep {
  0%,
  100% {
    opacity: 0.18;
  }

  50% {
    opacity: 0.34;
  }
}

@keyframes switch-spark {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.18);
  }
}

@keyframes dust-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.4);
  }

  20% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: translate3d(12px, -120px, 0) scale(1);
  }
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes question-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.radio-face:active {
  transform: scale(0.98);
}

.magic-dust {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.magic-dust span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(232, 177, 95, 0.85);
  box-shadow: 0 0 14px rgba(232, 177, 95, 0.85);
  opacity: 0;
  animation: dust-rise 6s ease-in-out infinite;
}

.magic-dust span:nth-child(1) { left: 16%; bottom: 18%; animation-delay: 0s; }
.magic-dust span:nth-child(2) { left: 32%; bottom: 24%; animation-delay: -1.2s; }
.magic-dust span:nth-child(3) { left: 48%; bottom: 16%; animation-delay: -2.4s; }
.magic-dust span:nth-child(4) { left: 62%; bottom: 28%; animation-delay: -3.1s; }
.magic-dust span:nth-child(5) { left: 74%; bottom: 20%; animation-delay: -4.2s; }
.magic-dust span:nth-child(6) { left: 86%; bottom: 34%; animation-delay: -5s; }

@keyframes clue-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes clue-static {
  0%,
  100% {
    filter: brightness(1);
  }

  40% {
    filter: brightness(1.45) contrast(1.2);
  }

  42% {
    filter: brightness(0.72);
  }
}

@keyframes target-breathe {
  0%,
  100% {
    opacity: 0.82;
    filter: brightness(1);
  }

  50% {
    opacity: 1;
    filter: brightness(1.8) contrast(1.2);
  }
}

@keyframes clue-noise {
  0% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(1px, -1px) scale(1.04);
  }

  66% {
    transform: translate(-1px, 1px) scale(0.98);
  }

  100% {
    transform: translate(0, 0) scale(1.02);
  }
}

@keyframes clue-drift {
  from {
    transform: translate(-50%, -50%);
  }

  to {
    transform: translate(calc(-50% + var(--drift-x, 8px)), calc(-50% + var(--drift-y, 8px)));
  }
}

@keyframes capture-flash {
  0% {
    filter: brightness(1);
  }

  18% {
    filter: brightness(1.38) saturate(1.2);
  }

  42% {
    filter: brightness(0.92);
  }

  100% {
    filter: brightness(1);
  }
}

@keyframes false-signal-shake {
  0%,
  100% {
    transform: translateX(0);
    filter: none;
  }

  25% {
    transform: translateX(-3px);
    filter: hue-rotate(-14deg);
  }

  50% {
    transform: translateX(3px);
    filter: contrast(1.22);
  }

  75% {
    transform: translateX(-2px);
  }
}

@keyframes vhs-roll {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(4px);
  }
}

@keyframes static-drift {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.18;
  }

  50% {
    transform: translate3d(-2px, 1px, 0);
    opacity: 0.3;
  }

  100% {
    transform: translate3d(2px, -1px, 0);
    opacity: 0.22;
  }
}

@keyframes smoke-rise {
  0% {
    transform: translate3d(0, 28px, 0) scale(0.72) rotate(0deg);
    opacity: 0;
  }

  18% {
    opacity: 0.48;
  }

  58% {
    opacity: 0.36;
  }

  100% {
    transform: translate3d(18px, -92px, 0) scale(1.28) rotate(18deg);
    opacity: 0;
  }
}

@keyframes cabinet-idle {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes speaker-rattle {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(1px);
  }
}

@keyframes dial-flicker {
  0%,
  82%,
  100% {
    filter: brightness(1);
  }

  83% {
    filter: brightness(1.45);
  }

  84% {
    filter: brightness(0.78);
  }

  86% {
    filter: brightness(1.18);
  }
}

@keyframes glow-breathe {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.98);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes needle-twitch {
  0%,
  100% {
    transform: rotate(var(--needle-angle));
  }

  50% {
    transform: rotate(calc(var(--needle-angle) + 2deg));
  }
}

@keyframes tuning-sweep {
  0% {
    transform: rotate(-48deg);
  }

  24% {
    transform: rotate(46deg);
  }

  45% {
    transform: rotate(-34deg);
  }

  67% {
    transform: rotate(26deg);
  }

  100% {
    transform: rotate(var(--needle-angle));
  }
}

@keyframes scale-glow {
  0%,
  100% {
    opacity: 0.82;
  }

  35% {
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(232, 177, 95, 0.7));
  }

  65% {
    opacity: 0.62;
  }
}

@keyframes tuning-window-glow {
  0%,
  100% {
    box-shadow: none;
    color: rgba(244, 240, 230, 0.58);
  }

  45% {
    box-shadow: 0 0 24px rgba(232, 177, 95, 0.36);
    color: rgba(232, 177, 95, 0.96);
  }
}

@keyframes knob-turn-left {
  0%,
  100% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(9deg);
  }
}

@keyframes knob-turn-right {
  0%,
  100% {
    transform: rotate(6deg);
  }

  50% {
    transform: rotate(-10deg);
  }
}

@media (min-width: 760px) {
  .haunted-room {
    width: min(100%, 680px, calc((100svh - 34px) * 0.92));
  }
}

@media (max-height: 740px) and (min-width: 561px) {
  .haunted-room {
    width: min(100%, 350px, calc((100svh - 14px) * 0.6));
    padding: 5px 10px;
    gap: 4px;
  }

  .show-title span {
    font-size: clamp(1.2rem, 5.4vw, 2rem);
  }

  .show-title small {
    font-size: 0.5rem;
  }

  .radio-console {
    gap: 6px;
    padding: 8px;
    border-radius: 22px;
  }

  .top-strip {
    min-height: 20px;
    font-size: 0.58rem;
  }

  .question-card {
    min-height: 74px;
    padding: 9px 11px;
    border-radius: 15px;
    font-size: 0.76rem;
    line-height: 1.14;
  }

  .question-card #quizQuestion {
    gap: 4px;
  }

  .quiz-id {
    font-size: 0.46rem;
  }

  .radio-face {
    border-radius: 28px;
  }

  .radio-brand {
    display: none;
  }

  .power-switch {
    top: 22px;
    left: 50%;
    right: auto;
    min-width: 112px;
    min-height: 42px;
    font-size: 0.58rem;
    transform: translateX(-50%);
  }

  .power-switch:hover,
  .power-switch:focus-visible {
    transform: translateX(-50%) scale(1.03);
  }

  .dial-window {
    top: 44%;
    width: 45%;
  }

  .speaker {
    top: 27%;
    bottom: 26%;
  }

  .radio-face .quiz-panel {
    left: 10%;
    right: 10%;
    bottom: 10.5%;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .radio-face .quiz-question {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 42px;
    min-height: 16px;
    max-height: 18px;
    padding: 3px 7px;
    overflow: hidden;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 0.44rem;
  }

  .radio-face .quiz-answers button {
    min-height: 27px;
    border-radius: 999px;
    font-size: 0.38rem;
  }

  .signal-readout {
    min-height: 34px;
    padding: 5px 8px;
  }

  .game-panel {
    min-height: 30px;
    padding: 0 8px;
    font-size: 0.42rem;
  }

  .game-panel strong,
  #roundTimer {
    font-size: 0.62rem;
  }

  #readoutFrequency {
    font-size: 0.88rem;
  }

  #trackTitle {
    font-size: 0.54rem;
  }
}

@media (max-width: 560px) {
  body {
    min-height: 100dvh;
    overflow: hidden auto;
  }

  .haunted-room {
    width: 100%;
    min-height: 100dvh;
    padding: max(10px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));
    place-items: stretch;
    align-content: start;
    gap: 8px;
  }

  .show-title {
    gap: 1px;
    padding-top: 2px;
  }

  .show-title span {
    font-size: clamp(1.55rem, 8vw, 2.25rem);
    line-height: 0.9;
    letter-spacing: 0.05em;
  }

  .show-title small {
    font-size: 0.56rem;
    letter-spacing: 0.17em;
  }

  .radio-console {
    min-height: calc(100dvh - 76px);
    gap: 8px;
    padding: 10px;
    border-radius: 26px;
    background:
      linear-gradient(135deg, rgba(83, 42, 25, 0.92), rgba(9, 16, 14, 0.96)),
      var(--wood);
  }

  .top-strip {
    min-height: 22px;
    padding: 0 4px;
    font-size: 0.56rem;
    letter-spacing: 0.08em;
  }

  .question-card {
    min-height: 112px;
    padding: 12px 14px;
    border-radius: 16px;
    font-size: 0.94rem;
    line-height: 1.18;
    letter-spacing: 0;
  }

  .question-card #quizQuestion {
    gap: 6px;
  }

  .quiz-id {
    font-size: 0.5rem;
    letter-spacing: 0.14em;
  }

  .radio-face {
    aspect-ratio: 0.72;
    min-height: 0;
    border-radius: 30px;
    background:
      radial-gradient(circle at 50% 15%, rgba(232, 177, 95, 0.18), transparent 20%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 12%, transparent 88%, rgba(255, 255, 255, 0.04)),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 15px),
      linear-gradient(155deg, #6a3921 0%, #2a160f 44%, #0d0806 100%);
    box-shadow:
      inset 0 0 58px rgba(0, 0, 0, 0.62),
      inset 0 2px 0 rgba(255, 255, 255, 0.12),
      0 18px 44px rgba(0, 0, 0, 0.5);
  }

  .radio-face::before {
    inset: 12px;
    border-radius: 22px;
  }

  .radio-handle {
    left: 26%;
    right: 26%;
    top: -13px;
    height: 25px;
  }

  .radio-brand {
    display: none;
  }

  .power-switch {
    top: 42px;
    left: 50%;
    right: auto;
    min-width: 142px;
    min-height: 50px;
    justify-content: center;
    transform: translateX(-50%);
    padding: 8px 14px;
    font-size: 0.68rem;
  }

  .power-switch:hover,
  .power-switch:focus-visible {
    transform: translateX(-50%) scale(1.03);
  }

  .switch-light {
    width: 18px;
    height: 18px;
  }

  .speaker {
    top: 19%;
    bottom: 43%;
    width: 17%;
    border-radius: 16px;
    background:
      repeating-linear-gradient(0deg, rgba(232, 177, 95, 0.24) 0 2px, transparent 2px 9px),
      linear-gradient(180deg, rgba(5, 8, 7, 0.78), rgba(5, 8, 7, 0.38));
  }

  .speaker-left {
    left: 5%;
  }

  .speaker-right {
    right: 5%;
  }

  .dial-window {
    top: 37%;
    width: 64%;
    border-width: 2px;
    box-shadow:
      inset 0 0 34px rgba(128, 214, 189, 0.22),
      0 0 50px rgba(128, 214, 189, 0.18),
      0 0 34px rgba(0, 0, 0, 0.54);
  }

  .dial-center strong {
    font-size: clamp(1rem, 7vw, 1.55rem);
  }

  .dial-center small {
    font-size: 0.5rem;
  }

  .video-clue {
    width: 28px;
    height: 28px;
  }

  .video-clue::after {
    inset: 7px;
  }

  .video-clue.is-target {
    width: 34px;
    height: 34px;
  }

  .video-clue.is-target::after {
    inset: 9px;
  }

  .tuning-window {
    left: 20%;
    right: 20%;
    bottom: 41%;
    height: 24px;
    padding: 0 10px;
    font-size: 0.48rem;
  }

  .radio-face .quiz-panel {
    left: 6%;
    right: 6%;
    bottom: 10.5%;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background:
      linear-gradient(90deg, rgba(5, 8, 7, 0), rgba(5, 8, 7, 0.72), rgba(5, 8, 7, 0));
    box-shadow: none;
  }

  .radio-face .quiz-question {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
    min-height: 18px;
    max-height: 20px;
    padding: 4px 9px;
    overflow: hidden;
    border: 1px solid rgba(128, 214, 189, 0.14);
    border-radius: 999px;
    color: rgba(244, 240, 230, 0.76);
    background: rgba(5, 8, 7, 0.72);
    font-size: 0.52rem;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .radio-face .quiz-answers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .radio-face .quiz-answers button {
    min-height: 38px;
    padding: 6px 6px;
    border-radius: 999px;
    font-size: 0.5rem;
    line-height: 1.05;
  }

  .marquee-window {
    left: 8%;
    right: 8%;
    bottom: 2.8%;
    z-index: 13;
    height: 31px;
    border-radius: 999px;
  }

  .marquee-window span {
    font-size: 0.56rem;
    letter-spacing: 0.07em;
    animation-duration: 18s;
  }

  .signal-meter {
    left: 15%;
    right: 15%;
    bottom: 7.9%;
    z-index: 13;
    height: 6px;
  }

  .knob {
    bottom: 35%;
    width: 44px;
    height: 44px;
  }

  .knob-left {
    left: 7%;
  }

  .knob-right {
    right: 7%;
  }

  .knob-left::after,
  .knob-right::after {
    font-size: 0.48rem;
  }

  .signal-readout {
    min-height: 44px;
    grid-template-columns: 34px 1fr auto;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
  }

  .readout-bars {
    width: 34px;
    height: 28px;
    border-radius: 7px;
  }

  #readoutFrequency {
    font-size: 0.9rem;
    letter-spacing: 0.06em;
  }

  #trackTitle {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
  }

  .game-panel {
    min-height: 42px;
    padding: 0 10px;
    border-radius: 14px;
    gap: 6px;
    font-size: 0.52rem;
    letter-spacing: 0.07em;
  }

  .game-panel strong,
  #roundTimer {
    font-size: 0.72rem;
  }

  .smoke {
    opacity: 0.32;
  }

  .magic-dust {
    display: none;
  }
}

@media (max-width: 380px) {
  .show-title span {
    font-size: 1.42rem;
  }

  .radio-console {
    min-height: calc(100dvh - 68px);
    padding: 8px;
  }

  .radio-face .quiz-panel {
    left: 7%;
    right: 7%;
    bottom: 10%;
    min-height: 34px;
    padding: 0;
  }

  .radio-face .quiz-question {
    bottom: 46px;
    max-height: 18px;
    padding: 4px 8px;
    font-size: 0.46rem;
  }

  .radio-face .quiz-answers button {
    min-height: 34px;
    font-size: 0.44rem;
  }

  .game-panel {
    flex-wrap: wrap;
    justify-content: center;
    padding: 7px 8px;
  }
}

/* Clean phone-first redesign: quiz controls above, radio as the visual centerpiece. */
.haunted-room {
  width: min(100%, 460px, calc((100svh - 18px) * 0.74));
  gap: 10px;
}

.show-title span {
  font-size: clamp(1.75rem, 7.8vw, 3.1rem);
  white-space: nowrap;
}

.show-title small {
  color: rgba(232, 177, 95, 0.9);
}

.radio-console {
  gap: 10px;
  padding: 12px;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(57, 29, 18, 0.9), rgba(9, 15, 14, 0.96)),
    var(--wood);
}

.top-strip {
  position: relative;
  padding: 0 4px;
}

.station-time {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--cream);
  text-align: center;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 12px rgba(232, 177, 95, 0.36);
  white-space: nowrap;
}

.question-card {
  min-height: auto;
  padding: 14px 16px;
  border-radius: 18px;
  font-size: clamp(0.92rem, 3vw, 1.08rem);
  line-height: 1.18;
}

.question-card #quizQuestion {
  gap: 7px;
}

.quiz-id {
  font-size: 0.55rem;
}

.quiz-panel {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.quiz-answers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.quiz-answers button,
.radio-face .quiz-answers button {
  min-height: 48px;
  border-radius: 14px;
  padding: 8px 7px;
  border-color: rgba(232, 177, 95, 0.36);
  font-size: clamp(0.58rem, 2.15vw, 0.72rem);
  line-height: 1.08;
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 177, 95, 0.2), transparent 56%),
    linear-gradient(180deg, rgba(35, 20, 14, 0.96), rgba(4, 8, 7, 0.96));
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.58),
    0 0 14px rgba(232, 177, 95, 0.1);
}

.radio-face {
  aspect-ratio: 1.02;
  border-radius: 28px;
  overflow: hidden;
}

.radio-brand {
  display: none;
}

.power-switch {
  top: 12px;
  min-width: 146px;
  min-height: 50px;
}

.speaker {
  top: 30%;
  bottom: 18%;
  width: 19%;
  opacity: 0.82;
}

.speaker-left {
  left: 7%;
}

.speaker-right {
  right: 7%;
}

.dial-window {
  top: 52%;
  width: 58%;
}

.dial-center {
  z-index: 20;
  width: 50%;
  height: 50%;
  padding: 0;
  background:
    radial-gradient(circle at 50% 34%, rgba(128, 214, 189, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(6, 12, 11, 0.96), rgba(2, 4, 4, 0.98));
  box-shadow:
    0 0 34px rgba(0, 0, 0, 0.72),
    inset 0 0 18px rgba(128, 214, 189, 0.14);
  pointer-events: none;
}

.dial-center strong,
.dial-center small {
  position: relative;
  z-index: 2;
  transform: translateX(0);
}

.tuning-window {
  display: none;
}

.knob {
  bottom: 9%;
  width: 48px;
  height: 48px;
}

.knob-left {
  left: 13%;
}

.knob-right {
  right: 13%;
}

.signal-meter {
  left: 26%;
  right: 26%;
  bottom: 8.5%;
}

.signal-readout {
  min-height: 48px;
  padding: 9px 11px;
  border-radius: 16px;
}

.game-panel {
  min-height: 38px;
  padding: 0 11px;
  border-radius: 16px;
}

body:not(.has-started):not(.is-awake) .radio-console > *:not(.radio-face),
body:not(.has-started):not(.is-awake) .radio-face > *:not(.power-switch) {
  opacity: 0.42;
}

@media (max-width: 560px) {
  .haunted-room {
    width: 100%;
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  }

  .show-title span {
    font-size: clamp(1.6rem, 8vw, 2.35rem);
  }

  .show-title small {
    font-size: 0.54rem;
  }

  .radio-console {
    min-height: calc(100dvh - 72px);
    gap: 8px;
    padding: 10px;
  }

  .question-card {
    padding: 12px 13px;
    font-size: clamp(0.9rem, 4vw, 1rem);
  }

  .quiz-answers {
    gap: 7px;
  }

  .quiz-answers button,
  .radio-face .quiz-answers button {
    min-height: 44px;
    border-radius: 13px;
    font-size: clamp(0.54rem, 2.7vw, 0.66rem);
  }

  .radio-face {
    aspect-ratio: 1.08;
  }

  .power-switch {
    top: 11px;
    min-width: 138px;
    min-height: 48px;
  }

  .dial-window {
    top: 53%;
    width: 60%;
  }

  .speaker {
    top: 31%;
    bottom: 18%;
    width: 17%;
  }

  .knob {
    bottom: 8%;
    width: 42px;
    height: 42px;
  }

  .signal-meter {
    bottom: 7.6%;
  }
}

@media (max-height: 740px) and (min-width: 561px) {
  .haunted-room {
    width: min(100%, 360px, calc((100svh - 12px) * 0.62));
  }

  .question-card {
    padding: 9px 11px;
    font-size: 0.72rem;
  }

  .quiz-answers button,
  .radio-face .quiz-answers button {
    min-height: 34px;
    border-radius: 11px;
    font-size: 0.46rem;
  }

  .radio-face {
    aspect-ratio: 1.04;
  }

  .power-switch {
    top: 10px;
    min-height: 40px;
    min-width: 122px;
  }

  .dial-window {
    top: 53%;
    width: 54%;
  }
}

@media (max-height: 620px) and (min-width: 561px) {
  .haunted-room {
    width: min(100%, 320px, calc((100svh - 10px) * 0.58));
    gap: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .show-title span {
    font-size: 1.45rem;
    line-height: 0.9;
  }

  .show-title small {
    font-size: 0.42rem;
  }

  .radio-console {
    gap: 5px;
    padding: 8px;
    border-radius: 20px;
  }

  .top-strip {
    min-height: 18px;
    font-size: 0.5rem;
  }

  .question-card {
    padding: 8px 10px;
    border-radius: 13px;
    font-size: 0.66rem;
    line-height: 1.12;
  }

  .quiz-id {
    font-size: 0.38rem;
  }

  .quiz-answers {
    gap: 5px;
  }

  .quiz-answers button,
  .radio-face .quiz-answers button {
    min-height: 30px;
    border-radius: 10px;
    padding: 4px 5px;
    font-size: 0.4rem;
  }

  .radio-face {
    aspect-ratio: 0.95;
    border-radius: 20px;
  }

  .power-switch {
    top: 9px;
    min-width: 112px;
    min-height: 36px;
    font-size: 0.52rem;
  }

  .dial-window {
    top: 53%;
    width: 52%;
  }

  .speaker {
    top: 32%;
    bottom: 17%;
  }

  .knob {
    bottom: 8%;
    width: 38px;
    height: 38px;
  }

  .signal-readout {
    min-height: 34px;
    padding: 5px 8px;
  }

  #readoutFrequency {
    font-size: 0.76rem;
  }

  #trackTitle {
    font-size: 0.48rem;
  }

  .game-panel {
    display: none;
  }
}

/* Clear game loop pass */
.mission-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  align-items: center;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid rgba(232, 177, 95, 0.34);
  border-radius: 18px;
  color: var(--cream);
  background:
    radial-gradient(circle at 10% 0%, rgba(232, 177, 95, 0.22), transparent 42%),
    linear-gradient(180deg, rgba(29, 18, 13, 0.96), rgba(4, 8, 7, 0.94));
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.46),
    0 0 18px rgba(232, 177, 95, 0.08);
}

.mission-card strong {
  font-size: clamp(0.82rem, 3vw, 1rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mission-card span:not(.mission-pips) {
  grid-column: 1 / -1;
  color: rgba(244, 240, 230, 0.82);
  font-size: clamp(0.72rem, 2.75vw, 0.86rem);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0;
}

.mission-pips {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.mission-pips i {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(128, 214, 189, 0.5);
  border-radius: 999px;
  background: rgba(4, 8, 7, 0.82);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.72);
}

.mission-pips i.is-filled {
  border-color: rgba(128, 214, 189, 0.96);
  background: var(--green);
  box-shadow:
    0 0 14px rgba(128, 214, 189, 0.72),
    inset 0 0 8px rgba(244, 240, 230, 0.34);
}

.question-card {
  min-height: 74px;
}

.game-panel {
  min-height: 38px;
  padding: 0 11px;
  border-radius: 16px;
  color: rgba(244, 240, 230, 0.78);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

@media (max-width: 560px) {
  .mission-card {
    min-height: 62px;
    padding: 12px 13px;
  }

  .mission-pips i {
    width: 11px;
    height: 11px;
  }
}

@media (max-height: 620px) and (min-width: 561px) {
  .mission-card {
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 13px;
  }

  .mission-card strong {
    font-size: 0.58rem;
  }

  .mission-card span:not(.mission-pips) {
    font-size: 0.54rem;
  }
}

/* Minimal redesign */
body {
  background: #000;
}

body::before {
  opacity: 0.2;
}

body::after {
  opacity: 0.16;
}

.video-background,
.stage-light,
.magic-dust {
  display: none;
}

.haunted-room {
  width: min(100%, 430px);
  min-height: 100svh;
  gap: 12px;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
}

.show-title {
  margin: 0;
}

.show-title span {
  font-size: clamp(1.85rem, 8vw, 2.65rem);
  letter-spacing: 0.05em;
  text-shadow: 0 0 22px rgba(128, 214, 189, 0.28);
}

.show-title small {
  display: none;
}

.radio-console {
  width: 100%;
  min-height: auto;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.smoke {
  opacity: 0.14;
}

.top-strip {
  min-height: 22px;
  padding: 0 4px;
  color: rgba(244, 240, 230, 0.55);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.live-dot {
  width: 8px;
  height: 8px;
}

.station-time {
  color: rgba(244, 240, 230, 0.78);
}

.mission-card,
.question-card,
.quiz-panel,
.signal-readout,
.game-panel {
  border-radius: 18px;
}

.mission-card {
  min-height: 0;
  padding: 13px 14px;
  border-color: rgba(128, 214, 189, 0.28);
  background:
    linear-gradient(180deg, rgba(8, 18, 17, 0.92), rgba(2, 4, 4, 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(244, 240, 230, 0.04),
    0 0 22px rgba(128, 214, 189, 0.06);
}

.mission-card strong {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.mission-card span:not(.mission-pips) {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(244, 240, 230, 0.74);
}

.mission-pips i {
  width: 10px;
  height: 10px;
}

.question-card {
  min-height: 92px;
  padding: 16px;
  border-color: rgba(244, 240, 230, 0.1);
  background:
    linear-gradient(180deg, rgba(9, 16, 15, 0.96), rgba(3, 5, 5, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(128, 214, 189, 0.06),
    0 0 24px rgba(0, 0, 0, 0.28);
  font-size: clamp(0.98rem, 4.5vw, 1.16rem);
}

.quiz-id {
  color: rgba(232, 177, 95, 0.78);
  font-size: 0.48rem;
}

.quiz-prompt {
  max-width: 26ch;
  margin-inline: auto;
}

.quiz-answers {
  grid-template-columns: 1fr;
  gap: 8px;
}

.quiz-answers button,
.radio-face .quiz-answers button {
  min-height: 46px;
  border-radius: 16px;
  border-color: rgba(128, 214, 189, 0.22);
  color: rgba(244, 240, 230, 0.92);
  font-size: clamp(0.72rem, 3.25vw, 0.86rem);
  letter-spacing: 0.04em;
  background:
    linear-gradient(180deg, rgba(13, 23, 22, 0.96), rgba(3, 6, 6, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(244, 240, 230, 0.03),
    0 0 14px rgba(0, 0, 0, 0.22);
}

.quiz-answers button:active {
  transform: translateY(1px) scale(0.99);
}

.radio-face {
  aspect-ratio: 1.15;
  border: 1px solid rgba(244, 240, 230, 0.1);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 40%, rgba(128, 214, 189, 0.08), transparent 48%),
    linear-gradient(180deg, rgba(24, 20, 17, 0.96), rgba(6, 7, 7, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 -24px 50px rgba(0, 0, 0, 0.5),
    0 24px 70px rgba(0, 0, 0, 0.62);
}

.radio-handle,
.radio-feet {
  display: none;
}

.power-switch {
  top: 14px;
  min-width: 136px;
  min-height: 48px;
  border-radius: 999px;
  border-color: rgba(128, 214, 189, 0.48);
  background:
    linear-gradient(180deg, rgba(8, 28, 25, 0.98), rgba(1, 4, 4, 0.98));
  box-shadow:
    0 0 0 1px rgba(244, 240, 230, 0.04),
    0 0 24px rgba(128, 214, 189, 0.18);
}

.switch-light {
  width: 22px;
  height: 22px;
}

.speaker {
  display: none;
}

.dial-window {
  top: 56%;
  width: 66%;
  border-color: rgba(128, 214, 189, 0.24);
  background:
    radial-gradient(circle at 50% 50%, rgba(128, 214, 189, 0.12), transparent 55%),
    #030505;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.74),
    0 0 34px rgba(128, 214, 189, 0.08);
}

.dial-scale,
.glass-glow {
  opacity: 0.28;
}

.dial-center {
  width: 46%;
  height: 46%;
  border-color: rgba(244, 240, 230, 0.16);
  background:
    linear-gradient(180deg, rgba(4, 8, 8, 0.98), rgba(0, 0, 0, 0.98));
}

.dial-center strong {
  font-size: clamp(1.45rem, 8vw, 2.1rem);
}

.video-clue {
  width: 18px;
  height: 18px;
}

.knob {
  display: none;
}

.knob-left {
  left: 14%;
}

.knob-right {
  right: 14%;
}

.knob::after {
  font-size: 0.58rem;
}

.signal-meter {
  left: 31%;
  right: 31%;
  bottom: 8.8%;
}

.signal-readout {
  min-height: 44px;
  padding: 8px 11px;
  border-color: rgba(244, 240, 230, 0.08);
  background: rgba(3, 5, 5, 0.86);
}

.readout-bars {
  width: 38px;
  height: 30px;
}

#readoutFrequency {
  font-size: 0.9rem;
}

#trackTitle {
  color: rgba(244, 240, 230, 0.62);
  font-size: 0.54rem;
}

.game-panel {
  display: flex;
  min-height: 28px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(244, 240, 230, 0.5);
}

.game-panel strong {
  color: rgba(128, 214, 189, 0.9);
}

body:not(.has-started):not(.is-awake) .radio-console > *:not(.radio-face),
body:not(.has-started):not(.is-awake) .radio-face > *:not(.power-switch) {
  opacity: 0.2;
}

@media (max-width: 560px) {
  .haunted-room {
    gap: 10px;
    padding-inline: 14px;
  }

  .radio-console {
    gap: 9px;
  }

  .question-card {
    min-height: 92px;
  }

  .radio-face {
    aspect-ratio: 1.13;
  }

  .dial-window {
    top: 56%;
    width: 68%;
  }
}

@media (max-height: 740px) and (min-width: 561px) {
  .haunted-room {
    width: min(100%, 390px, calc((100svh - 12px) * 0.68));
  }

  .question-card {
    min-height: 74px;
    font-size: 0.82rem;
  }
}

@media (max-height: 620px) and (min-width: 561px) {
  .game-panel {
    display: flex;
  }
}

@media (max-height: 700px) {
  .haunted-room {
    width: min(100%, 390px);
    gap: 7px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .show-title {
    display: none;
  }

  .top-strip {
    min-height: 18px;
    font-size: 0.5rem;
  }

  .mission-card {
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 14px;
  }

  .mission-card strong {
    font-size: 0.58rem;
  }

  .mission-card span:not(.mission-pips) {
    font-size: 0.58rem;
    line-height: 1.12;
  }

  .question-card {
    min-height: 62px;
    padding: 10px 12px;
    border-radius: 15px;
    font-size: 0.78rem;
    line-height: 1.1;
  }

  .quiz-id {
    font-size: 0.38rem;
  }

  .quiz-answers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .quiz-answers button,
  .radio-face .quiz-answers button {
    min-height: 34px;
    border-radius: 12px;
    padding: 5px 6px;
    font-size: 0.48rem;
    line-height: 1.05;
  }

  .radio-face {
    aspect-ratio: 1.42;
    border-radius: 22px;
  }

  .power-switch {
    top: 10px;
    min-width: 118px;
    min-height: 38px;
    font-size: 0.54rem;
  }

  .switch-light {
    width: 20px;
    height: 20px;
  }

  .dial-window {
    top: 57%;
    width: 45%;
  }

  .dial-center strong {
    font-size: 1.2rem;
  }

  .dial-center small {
    margin-top: 2px;
    font-size: 0.44rem;
  }

  .signal-meter {
    left: 33%;
    right: 33%;
    bottom: 8%;
  }

  .signal-readout {
    display: none;
  }

  .game-panel {
    min-height: 20px;
    font-size: 0.52rem;
  }
}

/* No hard edges outside the radio cabinet */
.top-strip,
.quiz-lightbox,
.quiz-lightbox::before,
.quiz-lightbox .mission-card,
.quiz-lightbox .question-card,
.quiz-lightbox .quiz-panel,
.quiz-lightbox .quiz-answers button,
.mission-pips i,
.signal-readout,
.game-panel {
  border: 0;
  outline: 0;
}

.mission-pips i {
  background: radial-gradient(circle, rgba(128, 214, 189, 0.42), rgba(128, 214, 189, 0.08) 58%, transparent 72%);
  box-shadow: 0 0 14px rgba(128, 214, 189, 0.18);
}

.mission-pips i.is-filled {
  background: radial-gradient(circle, rgba(128, 214, 189, 1), rgba(128, 214, 189, 0.35) 54%, transparent 76%);
  box-shadow: 0 0 22px rgba(128, 214, 189, 0.76);
}

.is-dial-unlocked .dial-window {
  box-shadow:
    inset 0 0 34px rgba(128, 214, 189, 0.18),
    0 0 44px rgba(128, 214, 189, 0.24),
    0 0 72px rgba(232, 177, 95, 0.08);
}

.is-dial-unlocked .dial-center {
  border-color: rgba(128, 214, 189, 0.36);
  box-shadow:
    0 0 34px rgba(128, 214, 189, 0.24),
    inset 0 0 20px rgba(128, 214, 189, 0.12);
}

.is-dial-unlocked .video-clue.is-target {
  transform: translate(-50%, -50%) scale(1.35);
  box-shadow:
    0 0 22px rgba(128, 214, 189, 0.92),
    0 0 42px rgba(232, 177, 95, 0.42);
}

/* Radio-first lightbox layout */
.haunted-room {
  justify-content: center;
}

.radio-console {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

.top-strip {
  order: 1;
}

.radio-face {
  order: 2;
  width: min(100%, 410px);
  margin-inline: auto;
}

.signal-readout,
.game-panel {
  order: 3;
}

.quiz-lightbox {
  position: fixed;
  left: 50%;
  top: auto;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 40;
  width: min(92vw, 380px);
  display: grid;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px) scale(0.98);
  transition: opacity 220ms ease, transform 220ms ease;
}

.is-quiz-open .quiz-lightbox {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.is-quiz-open .radio-face,
.is-quiz-open .signal-readout,
.is-quiz-open .game-panel {
  filter: brightness(0.78) saturate(0.94);
}

.is-quiz-open .radio-face {
  transform: translateY(-74px) scale(0.94);
}

.quiz-lightbox::before {
  content: "";
  position: fixed;
  inset: -100vmax;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 34%, transparent 0 22%, rgba(0, 0, 0, 0.12) 48%, rgba(0, 0, 0, 0.46) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px);
  pointer-events: none;
}

.quiz-lightbox .mission-card,
.quiz-lightbox .question-card,
.quiz-lightbox .quiz-panel {
  backdrop-filter: blur(18px);
}

.quiz-lightbox .mission-card {
  border-color: rgba(128, 214, 189, 0.38);
  background:
    linear-gradient(180deg, rgba(8, 18, 17, 0.96), rgba(2, 4, 4, 0.94));
}

.quiz-lightbox .question-card {
  min-height: 82px;
  border-color: rgba(232, 177, 95, 0.24);
  box-shadow:
    inset 0 0 0 1px rgba(244, 240, 230, 0.04),
    0 18px 60px rgba(0, 0, 0, 0.54),
    0 0 32px rgba(128, 214, 189, 0.08);
}

.quiz-lightbox .quiz-answers {
  grid-template-columns: 1fr;
}

.quiz-lightbox .quiz-answers button,
.radio-face .quiz-lightbox .quiz-answers button {
  min-height: 52px;
  font-size: clamp(0.78rem, 3.4vw, 0.92rem);
}

body:not(.is-quiz-open) .quiz-lightbox {
  visibility: hidden;
}

body:not(.is-awake) .quiz-lightbox {
  display: none;
}

body:not(.is-awake) .signal-readout,
body:not(.is-awake) .game-panel {
  display: none;
}

body:not(.is-awake) .radio-console {
  grid-template-rows: auto 1fr;
  width: min(100%, 430px);
}

body:not(.is-awake) .radio-face {
  width: min(100%, 430px);
  min-width: min(92vw, 340px);
}

body:not(.has-started):not(.is-awake) .radio-console > *:not(.radio-face),
body:not(.has-started):not(.is-awake) .radio-face > *:not(.power-switch) {
  opacity: 0.72;
  filter: none;
}

body:not(.has-started):not(.is-awake) .radio-face {
  filter: brightness(0.92);
  min-height: 360px;
}

body:not(.has-started):not(.is-awake) .start-spotlight {
  display: none;
}

body:not(.has-started):not(.is-awake) .radio-face {
  transform: none;
}

@media (max-width: 560px) {
  .radio-face {
    width: min(100%, 390px);
  }

  body:not(.is-awake) .radio-face {
    min-width: min(92vw, 340px);
  }

  .quiz-lightbox {
    width: min(92vw, 360px);
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .quiz-lightbox .question-card {
    min-height: 78px;
  }
}

@media (max-height: 700px) {
  .radio-console {
    gap: 7px;
  }

  .quiz-lightbox {
    width: min(92vw, 360px);
    gap: 7px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .quiz-lightbox .mission-card {
    min-height: 38px;
    padding: 7px 9px;
  }

  .quiz-lightbox .question-card {
    min-height: 58px;
    padding: 9px 10px;
  }

  .quiz-lightbox .quiz-answers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quiz-lightbox .quiz-answers button {
    min-height: 34px;
    font-size: 0.52rem;
  }

  .is-quiz-open .radio-face {
    transform: translateY(-92px) scale(0.9);
  }
}

/* Keep transmissions audible but visually hidden from the radio dial */
.broadcast-glass,
.has-broadcast-glass .broadcast-glass {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.has-broadcast-glass #scope {
  opacity: 0.78;
}

.has-broadcast-glass .dial-scale,
.has-broadcast-glass .glass-glow {
  opacity: 0.42;
}

/* Soft, no-window presentation */
.quiz-lightbox {
  width: min(90vw, 390px);
  gap: 8px;
}

.quiz-lightbox::before {
  background:
    radial-gradient(ellipse at 50% 58%, rgba(128, 214, 189, 0.08), transparent 0 36%, rgba(0, 0, 0, 0.42) 76%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
}

.mission-card,
.question-card,
.quiz-panel,
.signal-readout,
.game-panel {
  border-color: transparent;
  border-radius: 999px;
  box-shadow: none;
}

.quiz-lightbox .mission-card {
  min-height: 54px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(128, 214, 189, 0.18), transparent 68%),
    rgba(2, 7, 7, 0.82);
  box-shadow:
    0 0 38px rgba(128, 214, 189, 0.12),
    inset 0 0 22px rgba(128, 214, 189, 0.06);
}

.quiz-lightbox .question-card {
  min-height: 98px;
  padding: 18px 24px;
  border: 0;
  border-radius: 42px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(13, 27, 25, 0.98), rgba(3, 6, 6, 0.92) 72%, rgba(0, 0, 0, 0.84)),
    rgba(0, 0, 0, 0.76);
  box-shadow:
    0 0 60px rgba(128, 214, 189, 0.1),
    inset 0 0 36px rgba(128, 214, 189, 0.08);
}

.quiz-lightbox .question-card #quizQuestion {
  place-items: center;
}

.quiz-lightbox .quiz-prompt {
  max-width: 24ch;
}

.quiz-lightbox .quiz-panel {
  background: transparent;
  box-shadow: none;
}

.quiz-lightbox .quiz-answers {
  gap: 9px;
}

.quiz-lightbox .quiz-answers button,
.radio-face .quiz-lightbox .quiz-answers button {
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(128, 214, 189, 0.16), transparent 62%),
    rgba(2, 8, 8, 0.86);
  box-shadow:
    0 0 22px rgba(128, 214, 189, 0.08),
    inset 0 0 18px rgba(244, 240, 230, 0.03);
}

.quiz-lightbox .quiz-answers button:hover,
.quiz-lightbox .quiz-answers button:focus-visible {
  border: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232, 177, 95, 0.22), transparent 66%),
    rgba(8, 16, 15, 0.92);
  box-shadow:
    0 0 32px rgba(232, 177, 95, 0.12),
    inset 0 0 20px rgba(128, 214, 189, 0.08);
}

.signal-readout {
  border-radius: 999px;
  background: rgba(2, 7, 7, 0.58);
}

.game-panel {
  border-radius: 999px;
}

@media (max-height: 700px) {
  .quiz-lightbox .mission-card {
    min-height: 36px;
    padding: 7px 14px;
  }

  .quiz-lightbox .question-card {
    min-height: 62px;
    padding: 10px 16px;
    border-radius: 30px;
  }

  .quiz-lightbox .quiz-answers {
    gap: 7px;
  }

  .quiz-lightbox .quiz-answers button {
    min-height: 34px;
    border-radius: 999px;
  }
}

/* Smoke-form question UI */
.quiz-lightbox {
  gap: 4px;
}

.quiz-lightbox .mission-card,
.quiz-lightbox .question-card,
.quiz-lightbox .quiz-answers button {
  position: relative;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.quiz-lightbox .mission-card::before,
.quiz-lightbox .question-card::before,
.quiz-lightbox .quiz-answers button::before {
  content: "";
  position: absolute;
  inset: -18px -28px;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(6, 18, 17, 0.9), rgba(6, 18, 17, 0.5) 38%, rgba(128, 214, 189, 0.12) 58%, transparent 74%),
    radial-gradient(ellipse at 30% 42%, rgba(232, 177, 95, 0.08), transparent 48%),
    radial-gradient(ellipse at 72% 52%, rgba(128, 214, 189, 0.1), transparent 52%);
  filter: blur(10px);
  opacity: 0.96;
  pointer-events: none;
}

.quiz-lightbox .question-card::before {
  inset: -24px -36px;
  filter: blur(14px);
  opacity: 1;
}

.quiz-lightbox .quiz-answers button::before {
  inset: -14px -20px;
  filter: blur(9px);
  opacity: 0.78;
}

.quiz-lightbox .mission-card::after,
.quiz-lightbox .question-card::after {
  content: "";
  position: absolute;
  inset: -26px -40px;
  z-index: -2;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 18% 40%, rgba(244, 240, 230, 0.08), transparent 28%),
    radial-gradient(ellipse at 82% 58%, rgba(128, 214, 189, 0.12), transparent 34%);
  filter: blur(22px);
  opacity: 0.58;
  animation: smoke-drift-soft 7s ease-in-out infinite;
  pointer-events: none;
}

.quiz-lightbox .question-card {
  min-height: 92px;
  padding: 18px 26px;
}

.quiz-lightbox .mission-card {
  min-height: 46px;
  padding: 10px 20px;
}

.quiz-lightbox .quiz-answers {
  gap: 2px;
}

.quiz-lightbox .quiz-answers button,
.radio-face .quiz-lightbox .quiz-answers button {
  min-height: 48px;
  padding: 8px 16px;
}

.quiz-lightbox .quiz-answers button:hover::before,
.quiz-lightbox .quiz-answers button:focus-visible::before {
  opacity: 1;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(20, 22, 17, 0.92), rgba(18, 22, 19, 0.5) 38%, rgba(232, 177, 95, 0.18) 62%, transparent 76%),
    radial-gradient(ellipse at 68% 52%, rgba(128, 214, 189, 0.14), transparent 52%);
}

@keyframes smoke-drift-soft {
  0%, 100% {
    transform: translate3d(-3px, 0, 0) scale(0.98);
    opacity: 0.48;
  }
  50% {
    transform: translate3d(4px, -4px, 0) scale(1.03);
    opacity: 0.68;
  }
}

@media (max-height: 700px) {
  .quiz-lightbox .mission-card::before,
  .quiz-lightbox .question-card::before,
  .quiz-lightbox .quiz-answers button::before {
    inset: -12px -18px;
    filter: blur(8px);
  }

  .quiz-lightbox .question-card {
    min-height: 58px;
    padding: 9px 14px;
  }

  .quiz-lightbox .mission-card {
    min-height: 34px;
    padding: 6px 12px;
  }

  .quiz-lightbox .quiz-answers button {
    min-height: 32px;
    padding: 5px 8px;
  }
}

/* Antique radio cabinet */
.radio-face {
  aspect-ratio: 1.02;
  border: 1px solid rgba(89, 48, 25, 0.9);
  border-radius: 30px 30px 24px 24px;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(232, 177, 95, 0.16), transparent 36%),
    linear-gradient(90deg, rgba(255, 230, 170, 0.08), transparent 11%, transparent 89%, rgba(0, 0, 0, 0.24)),
    repeating-linear-gradient(92deg, rgba(255, 211, 139, 0.06) 0 2px, rgba(49, 23, 12, 0.06) 2px 8px),
    linear-gradient(145deg, #5a301c 0%, #2d170d 48%, #100907 100%);
  box-shadow:
    inset 0 0 0 2px rgba(244, 188, 105, 0.08),
    inset 0 18px 42px rgba(255, 223, 156, 0.06),
    inset 0 -34px 58px rgba(0, 0, 0, 0.62),
    0 28px 80px rgba(0, 0, 0, 0.72);
}

.radio-face::before {
  display: block;
  inset: 16px;
  border: 1px solid rgba(232, 177, 95, 0.18);
  border-radius: 24px 24px 18px 18px;
  background:
    radial-gradient(ellipse at 50% 28%, transparent 0 30%, rgba(0, 0, 0, 0.26) 72%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.18));
  box-shadow:
    inset 0 0 32px rgba(0, 0, 0, 0.52),
    0 0 18px rgba(232, 177, 95, 0.05);
  pointer-events: none;
}

.radio-face::after {
  opacity: 0.24;
  background:
    radial-gradient(circle at 24% 22%, rgba(232, 177, 95, 0.16), transparent 12%),
    radial-gradient(circle at 84% 58%, rgba(232, 177, 95, 0.18), transparent 9%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 5px);
}

.radio-brand {
  display: block;
  top: 20px;
  color: rgba(232, 177, 95, 0.42);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-shadow: 0 0 10px rgba(232, 177, 95, 0.12);
}

.radio-handle {
  display: block;
  left: 18%;
  right: 18%;
  top: -15px;
  height: 34px;
  border: 1px solid rgba(82, 45, 25, 0.8);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background:
    linear-gradient(180deg, rgba(95, 52, 29, 0.92), rgba(23, 12, 8, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(244, 188, 105, 0.14),
    0 10px 20px rgba(0, 0, 0, 0.28);
}

.power-switch {
  top: 30px;
  min-width: 126px;
  min-height: 44px;
  border: 1px solid rgba(199, 149, 83, 0.4);
  background:
    radial-gradient(circle at 30% 32%, rgba(232, 177, 95, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(38, 22, 15, 0.98), rgba(8, 6, 5, 0.98));
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.62),
    0 0 26px rgba(128, 214, 189, 0.1);
}

.switch-light {
  background:
    radial-gradient(circle at 38% 32%, rgba(244, 240, 230, 0.72), transparent 20%),
    radial-gradient(circle, rgba(128, 214, 189, 0.95), rgba(128, 214, 189, 0.18) 64%, rgba(0, 0, 0, 0.76));
}

.speaker {
  display: block;
  top: 31%;
  bottom: 17%;
  width: 20%;
  border: 1px solid rgba(99, 62, 34, 0.54);
  border-radius: 20px;
  opacity: 0.74;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.38)),
    repeating-linear-gradient(0deg, rgba(232, 177, 95, 0.18) 0 2px, rgba(28, 17, 11, 0.96) 2px 9px),
    repeating-linear-gradient(90deg, rgba(244, 188, 105, 0.06) 0 1px, transparent 1px 6px),
    #120b08;
  box-shadow:
    inset 0 0 22px rgba(0, 0, 0, 0.86),
    0 0 16px rgba(0, 0, 0, 0.32);
}

.speaker-left {
  left: 8%;
}

.speaker-right {
  right: 8%;
}

.dial-window {
  top: 58%;
  width: 46%;
  border: 2px solid rgba(171, 122, 66, 0.42);
  background:
    radial-gradient(circle at 50% 50%, rgba(128, 214, 189, 0.12), transparent 52%),
    radial-gradient(circle at 50% 50%, #0a1110, #020303 72%);
  box-shadow:
    inset 0 0 34px rgba(0, 0, 0, 0.86),
    0 0 0 6px rgba(38, 21, 13, 0.78),
    0 0 0 7px rgba(232, 177, 95, 0.08),
    0 0 34px rgba(128, 214, 189, 0.08);
}

.dial-center {
  width: 52%;
  height: 52%;
  border: 1px solid rgba(171, 122, 66, 0.24);
  background:
    radial-gradient(circle at 50% 28%, rgba(244, 240, 230, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(16, 12, 9, 0.98), rgba(0, 0, 0, 0.98));
}

.signal-meter {
  left: 28%;
  right: 28%;
  bottom: 7.4%;
  height: 8px;
  border: 1px solid rgba(171, 122, 66, 0.22);
  background: rgba(10, 6, 4, 0.72);
}

@media (max-height: 700px) {
  .radio-face {
    aspect-ratio: 1.32;
  }

  .radio-brand {
    display: none;
  }

  .radio-handle {
    display: none;
  }

  .power-switch {
    top: 12px;
  }

  .speaker {
    top: 31%;
    bottom: 17%;
    width: 18%;
  }

  .dial-window {
    top: 58%;
    width: 42%;
  }
}

/* Easier tuning targets and active-state power placement */
.is-awake .power-switch {
  left: auto;
  right: 20px;
  top: 20px;
  min-width: 104px;
  min-height: 40px;
  padding: 8px 12px;
  transform: none;
}

.is-awake .power-switch:hover,
.is-awake .power-switch:focus-visible {
  transform: scale(1.04);
}

.is-awake .switch-light {
  width: 18px;
  height: 18px;
}

.video-clue {
  width: 58px;
  height: 58px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.video-clue::after {
  inset: 21px;
}

.video-clue::before {
  inset: 3px;
  opacity: 0.28;
}

.video-clue.is-target,
.is-dial-unlocked .video-clue.is-target {
  width: 84px;
  height: 84px;
}

.video-clue.is-target::after,
.is-dial-unlocked .video-clue.is-target::after {
  inset: 31px;
}

.video-clue.is-target::before,
.is-dial-unlocked .video-clue.is-target::before {
  inset: 2px;
  opacity: 0.72;
  filter: blur(1px);
}

.is-dial-unlocked .dial-window,
.is-dial-unlocked .dial-center {
  cursor: pointer;
}

@media (max-height: 700px) {
  .is-awake .power-switch {
    right: 14px;
    top: 10px;
    min-width: 96px;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 0.48rem;
  }

  .video-clue {
    width: 52px;
    height: 52px;
  }

  .video-clue::after {
    inset: 19px;
  }

  .video-clue.is-target,
  .is-dial-unlocked .video-clue.is-target {
    width: 72px;
    height: 72px;
  }

  .video-clue.is-target::after,
  .is-dial-unlocked .video-clue.is-target::after {
    inset: 26px;
  }
}

/* Restored haunted attraction effects */
.stage-light,
.magic-dust {
  display: block;
}

.stage-light {
  opacity: 0.18;
  filter: blur(16px);
  animation: stage-sweep 8s ease-in-out infinite;
}

.is-awake .stage-light {
  opacity: 0.32;
}

.smoke {
  opacity: 0.34;
  filter: blur(22px);
}

.is-awake .smoke {
  opacity: 0.56;
}

.magic-dust {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.48;
}

.magic-dust span {
  width: 5px;
  height: 5px;
  background: rgba(232, 177, 95, 0.7);
  box-shadow:
    0 0 12px rgba(232, 177, 95, 0.72),
    0 0 24px rgba(128, 214, 189, 0.32);
  animation: dust-rise 6.5s ease-in-out infinite;
}

.is-awake .magic-dust {
  opacity: 0.86;
}

.radio-ripple {
  border-color: rgba(128, 214, 189, 0.92);
  box-shadow:
    0 0 18px rgba(128, 214, 189, 0.72),
    inset 0 0 10px rgba(232, 177, 95, 0.26);
}

.is-static-hold .radio-face {
  animation: cabinet-static-shake 90ms steps(2, end) infinite;
  filter: brightness(1.08) contrast(1.08);
}

.is-static-hold .dial-window {
  animation: dial-static-flash 110ms steps(2, end) infinite;
}

.is-static-hold #scope {
  opacity: 1;
  filter: drop-shadow(0 0 14px rgba(128, 214, 189, 0.8));
}

.is-surge .radio-face {
  box-shadow:
    inset 0 0 0 2px rgba(244, 188, 105, 0.12),
    inset 0 -34px 58px rgba(0, 0, 0, 0.62),
    0 0 34px rgba(128, 214, 189, 0.42),
    0 28px 90px rgba(0, 0, 0, 0.76);
}

.video-clue::before {
  animation:
    clue-noise 280ms steps(3, end) infinite,
    clue-aura-drift 2.4s ease-in-out infinite;
}

.video-clue::after {
  animation: clue-static 420ms steps(2, end) infinite;
}

.quiz-lightbox .quiz-answers button:active::before {
  opacity: 1;
  filter: blur(7px);
}

.quiz-lightbox .quiz-answers button:active {
  text-shadow:
    1px 0 rgba(128, 214, 189, 0.5),
    -1px 0 rgba(183, 83, 80, 0.42),
    0 0 16px rgba(232, 177, 95, 0.38);
}

@keyframes cabinet-static-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, 1px); }
  75% { transform: translate(1px, 1px); }
}

@keyframes dial-static-flash {
  0%, 100% {
    box-shadow:
      inset 0 0 34px rgba(0, 0, 0, 0.86),
      0 0 0 6px rgba(38, 21, 13, 0.78),
      0 0 30px rgba(128, 214, 189, 0.12);
  }
  50% {
    box-shadow:
      inset 0 0 24px rgba(128, 214, 189, 0.24),
      0 0 0 6px rgba(38, 21, 13, 0.78),
      0 0 48px rgba(128, 214, 189, 0.44);
  }
}

@keyframes clue-aura-drift {
  0%, 100% { transform: scale(0.92) rotate(0deg); }
  50% { transform: scale(1.08) rotate(9deg); }
}

/* Intermittent idle haunt moments */
.is-haunt-flicker .radio-face {
  animation: haunt-cabinet-flicker 720ms steps(4, end) both;
}

.is-haunt-flicker .dial-window,
.is-haunt-signal .dial-window {
  animation: haunt-dial-flare 980ms ease-in-out both;
}

.is-haunt-twitch .radio-face {
  animation: haunt-twitch 620ms cubic-bezier(0.2, 1, 0.2, 1) both;
}

.is-haunt-twitch .needle {
  animation: idle-needle-twitch 620ms steps(3, end) both;
}

.is-haunt-signal #scope {
  opacity: 1;
  filter: drop-shadow(0 0 18px rgba(128, 214, 189, 0.88));
}

.is-haunt-signal .speaker {
  animation: speaker-rattle 90ms ease-in-out infinite;
}

.is-haunt-signal .magic-dust {
  opacity: 1;
}

@keyframes haunt-cabinet-flicker {
  0%, 100% {
    filter: brightness(1) saturate(1);
  }
  18% {
    filter: brightness(1.28) saturate(1.25);
  }
  32% {
    filter: brightness(0.78) saturate(0.8);
  }
  55% {
    filter: brightness(1.16) contrast(1.12);
  }
  74% {
    filter: brightness(0.92) contrast(1.2);
  }
}

@keyframes haunt-dial-flare {
  0%, 100% {
    box-shadow:
      inset 0 0 34px rgba(0, 0, 0, 0.86),
      0 0 0 6px rgba(38, 21, 13, 0.78),
      0 0 0 7px rgba(232, 177, 95, 0.08),
      0 0 34px rgba(128, 214, 189, 0.08);
  }
  42% {
    box-shadow:
      inset 0 0 20px rgba(128, 214, 189, 0.28),
      0 0 0 6px rgba(38, 21, 13, 0.78),
      0 0 0 7px rgba(232, 177, 95, 0.16),
      0 0 68px rgba(128, 214, 189, 0.5),
      0 0 110px rgba(183, 83, 80, 0.18);
  }
}

@keyframes haunt-twitch {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  18% { transform: translate3d(-1px, 1px, 0) rotate(-0.35deg); }
  34% { transform: translate3d(2px, -1px, 0) rotate(0.45deg); }
  48% { transform: translate3d(-1px, -1px, 0) rotate(-0.25deg); }
  65% { transform: translate3d(1px, 0, 0) rotate(0.18deg); }
}

@keyframes idle-needle-twitch {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(183, 83, 80, 0.65)); }
  25% { transform: rotate(calc(var(--needle-angle) - 8deg)); }
  55% { transform: rotate(calc(var(--needle-angle) + 10deg)); }
  78% { transform: rotate(calc(var(--needle-angle) - 4deg)); }
}

/* Rare scare interruptions */
.scare-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(244, 240, 230, 0.1), transparent 0 12%, rgba(0, 0, 0, 0.42) 44%, rgba(0, 0, 0, 0.82) 100%),
    repeating-linear-gradient(0deg, rgba(244, 240, 230, 0.08) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}

.scare-layer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: min(58vw, 220px);
  aspect-ratio: 0.72;
  border-radius: 46% 46% 44% 44%;
  background:
    radial-gradient(circle at 36% 35%, rgba(244, 240, 230, 0.95) 0 4%, transparent 5%),
    radial-gradient(circle at 64% 35%, rgba(244, 240, 230, 0.95) 0 4%, transparent 5%),
    radial-gradient(ellipse at 50% 62%, rgba(0, 0, 0, 0.92) 0 8%, transparent 10%),
    radial-gradient(ellipse at 50% 44%, rgba(128, 214, 189, 0.4), rgba(244, 240, 230, 0.08) 28%, transparent 62%);
  filter: blur(2px) contrast(1.5);
  opacity: 0.58;
  transform: translate(-50%, -50%) scale(0.88);
}

.scare-layer span {
  position: relative;
  z-index: 2;
  max-width: 80vw;
  color: rgba(244, 240, 230, 0.96);
  font-size: clamp(1rem, 6vw, 2.4rem);
  font-weight: 950;
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    2px 0 rgba(128, 214, 189, 0.68),
    -2px 0 rgba(183, 83, 80, 0.58),
    0 0 24px rgba(244, 240, 230, 0.52);
  transform: translateY(34vh) skewX(-8deg);
}

.is-scare-event .scare-layer {
  animation: scare-signal 1.35s steps(2, end) both;
}

.is-jump-scare .scare-layer {
  animation: jump-scare-hit 1.5s steps(2, end) both;
}

.is-scare-event .radio-face {
  animation: scare-radio-jolt 1.05s steps(3, end) both;
}

.is-scare-event .dial-window {
  animation: scare-dial-burn 1.05s steps(3, end) both;
}

.is-scare-peak .scare-layer::before {
  opacity: 0.92;
  transform: translate(-50%, -50%) scale(1.14);
}

.is-jump-scare .scare-layer::before {
  width: min(72vw, 300px);
  opacity: 0.98;
  filter: blur(1px) contrast(2.1);
}

.is-jump-scare .scare-layer span {
  transform: translateY(30vh) skewX(-10deg) scale(1.08);
}

@keyframes scare-signal {
  0%, 12%, 100% { opacity: 0; }
  14%, 18% { opacity: 0.95; filter: invert(0) contrast(1.3); }
  22%, 28% { opacity: 0.18; transform: translateX(-3px); }
  34%, 48% { opacity: 0.72; transform: translateX(4px); }
  54%, 64% { opacity: 0.26; filter: invert(1) contrast(1.8); }
  70%, 86% { opacity: 0.82; }
}

@keyframes jump-scare-hit {
  0%, 8%, 100% { opacity: 0; }
  10%, 16% {
    opacity: 1;
    filter: contrast(2) brightness(1.8);
    transform: translateX(-8px) scale(1.04);
  }
  18%, 23% {
    opacity: 0.08;
    filter: invert(1) contrast(2.5);
    transform: translateX(7px) scale(1.02);
  }
  26%, 42% {
    opacity: 0.92;
    filter: contrast(1.8);
    transform: translateX(0) scale(1);
  }
  48%, 62% {
    opacity: 0.28;
    filter: invert(1) contrast(2);
  }
  70%, 84% {
    opacity: 0.78;
    filter: contrast(1.4) brightness(1.3);
  }
}

@keyframes scare-radio-jolt {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); filter: brightness(1); }
  20% { transform: translate3d(-3px, 2px, 0) rotate(-0.8deg); filter: brightness(1.55); }
  36% { transform: translate3d(3px, -2px, 0) rotate(0.7deg); filter: brightness(0.7); }
  58% { transform: translate3d(-2px, -1px, 0) rotate(-0.35deg); filter: brightness(1.35); }
}

@keyframes scare-dial-burn {
  0%, 100% {
    box-shadow:
      inset 0 0 34px rgba(0, 0, 0, 0.86),
      0 0 0 6px rgba(38, 21, 13, 0.78),
      0 0 34px rgba(128, 214, 189, 0.08);
  }
  45% {
    box-shadow:
      inset 0 0 20px rgba(244, 240, 230, 0.34),
      0 0 0 6px rgba(38, 21, 13, 0.78),
      0 0 82px rgba(244, 240, 230, 0.42),
      0 0 120px rgba(183, 83, 80, 0.32);
  }
}

/* Clear post-quiz unlock state */
.is-dial-unlocked .quiz-lightbox {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.is-dial-unlocked .radio-face {
  filter: brightness(1.12) saturate(1.08);
}

.is-dial-unlocked.is-awake .power-switch {
  top: -26px;
  right: 8px;
  min-width: 92px;
  min-height: 34px;
  opacity: 0.78;
  transform: scale(0.88);
}

.is-dial-unlocked .dial-window {
  z-index: 28;
  overflow: visible;
  animation: unlocked-dial-breathe 1.4s ease-in-out infinite;
}

.is-dial-unlocked .dial-center strong,
.is-dial-unlocked .dial-center small {
  opacity: 0;
}

.is-dial-unlocked .dial-center::before,
.is-dial-unlocked .dial-center::after {
  position: absolute;
  left: 50%;
  z-index: 4;
  width: 120%;
  color: rgba(244, 240, 230, 0.96);
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
  text-shadow:
    0 0 12px rgba(128, 214, 189, 0.82),
    0 0 24px rgba(232, 177, 95, 0.28);
  pointer-events: none;
}

.is-dial-unlocked .dial-center::before {
  content: "Tap";
  top: 30%;
  font-size: clamp(0.95rem, 5vw, 1.55rem);
  letter-spacing: 0.08em;
}

.is-dial-unlocked .dial-center::after {
  content: "To Listen";
  top: 56%;
  color: rgba(232, 177, 95, 0.9);
  font-size: clamp(0.42rem, 2.4vw, 0.7rem);
  letter-spacing: 0.14em;
}

.is-dial-unlocked .video-clues {
  position: fixed;
  inset: 0;
  z-index: 32;
  pointer-events: none;
}

.is-dial-unlocked .video-clue {
  opacity: 0;
  pointer-events: none;
}

.is-dial-unlocked .video-clue.is-target {
  left: 50% !important;
  top: -54% !important;
  width: 178px;
  height: 178px;
  opacity: 1;
  pointer-events: auto;
  animation:
    unlocked-transmission-float 2.8s ease-in-out infinite,
    clue-static 360ms steps(2, end) infinite;
}

.is-dial-unlocked .video-clue.is-target:not(.is-escaped) {
  left: 50% !important;
  top: 39% !important;
  width: 132px;
  height: 132px;
  opacity: 0.72;
  pointer-events: auto;
}

.is-dial-unlocked .video-clue.is-target:not(.is-escaped)::after {
  inset: 51px;
}

.is-dial-unlocked .video-clue.is-target::before {
  inset: 10px;
  opacity: 0.82;
  background:
    radial-gradient(circle, rgba(244, 240, 230, 0.22), transparent 18%),
    radial-gradient(circle, rgba(128, 214, 189, 0.28), transparent 42%),
    radial-gradient(circle, transparent 0 38%, rgba(128, 214, 189, 0.44) 40%, transparent 58%),
    radial-gradient(circle, transparent 0 58%, rgba(232, 177, 95, 0.22) 60%, transparent 72%);
  filter: blur(2.4px);
}

.is-dial-unlocked .video-clue.is-target::after {
  inset: 69px;
  background: rgba(244, 240, 230, 0.95);
  box-shadow:
    0 0 18px rgba(244, 240, 230, 0.92),
    0 0 44px rgba(128, 214, 189, 0.9),
    0 0 72px rgba(232, 177, 95, 0.34);
}

.is-dial-unlocked .video-clues::before {
  content: "Unlocked Transmission";
  position: absolute;
  left: 50%;
  top: 14%;
  z-index: 34;
  width: 190px;
  color: rgba(244, 240, 230, 0.9);
  font-size: clamp(0.5rem, 2.4vw, 0.7rem);
  font-weight: 950;
  letter-spacing: 0.14em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 0 12px rgba(128, 214, 189, 0.7),
    0 0 24px rgba(232, 177, 95, 0.32);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: unlocked-label-float 2.8s ease-in-out infinite;
}

.is-dial-unlocked .dial-window::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -92%;
  z-index: 31;
  width: 42%;
  height: 72%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(128, 214, 189, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(128, 214, 189, 0.16), transparent 74%);
  filter: blur(10px);
  opacity: 0.82;
  transform: translateX(-50%);
  pointer-events: none;
  animation: unlocked-beam-breathe 1.8s ease-in-out infinite;
}

@keyframes unlocked-dial-breathe {
  0%, 100% {
    box-shadow:
      inset 0 0 34px rgba(128, 214, 189, 0.18),
      0 0 0 6px rgba(38, 21, 13, 0.78),
      0 0 44px rgba(128, 214, 189, 0.24),
      0 0 72px rgba(232, 177, 95, 0.08);
  }
  50% {
    box-shadow:
      inset 0 0 26px rgba(128, 214, 189, 0.34),
      0 0 0 6px rgba(38, 21, 13, 0.78),
      0 0 64px rgba(128, 214, 189, 0.48),
      0 0 96px rgba(232, 177, 95, 0.18);
  }
}

@keyframes unlocked-target-hover {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes unlocked-transmission-float {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0) scale(0.95);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-10px) scale(1.04);
  }
}

@keyframes unlocked-label-float {
  0%, 100% {
    opacity: 0.68;
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(-8px);
  }
}

@keyframes unlocked-beam-breathe {
  0%, 100% {
    opacity: 0.42;
    transform: translateX(-50%) scaleY(0.9);
  }
  50% {
    opacity: 0.86;
    transform: translateX(-50%) scaleY(1.06);
  }
}

@media (max-height: 700px) {
  .is-dial-unlocked.is-awake .power-switch {
    top: -20px;
    right: 6px;
    transform: scale(0.82);
  }

  .is-dial-unlocked .video-clue.is-target:not(.is-escaped) {
    top: 38% !important;
    width: 104px;
    height: 104px;
  }

  .is-dial-unlocked .video-clue.is-target:not(.is-escaped)::after {
    inset: 40px;
  }

  .is-dial-unlocked .video-clue.is-target.is-escaped {
    top: -46% !important;
    width: 138px;
    height: 138px;
  }

  .is-dial-unlocked .video-clue.is-target.is-escaped::after {
    inset: 53px;
  }

  .is-dial-unlocked .video-clues::before {
    top: 12%;
    width: 160px;
    font-size: 0.48rem;
  }

  .is-dial-unlocked .dial-window::after {
    top: -80%;
    height: 64%;
  }
}

/* Escaped clickable transmission bubbles */
.is-dial-unlocked .video-clue.is-escaped {
  position: fixed;
  left: var(--escape-x) !important;
  top: var(--escape-y) !important;
  z-index: 120;
  width: clamp(104px, 17vw, 148px);
  height: clamp(104px, 17vw, 148px);
  opacity: 1;
  pointer-events: auto;
  touch-action: manipulation;
  transform: translate(-50%, -50%);
  animation-name: escaped-transmission-burst, escaped-transmission-drift, clue-static;
  animation-duration: 920ms, 3.7s, 360ms;
  animation-timing-function: cubic-bezier(0.16, 0.88, 0.22, 1.18), ease-in-out, steps(2, end);
  animation-delay: var(--escape-delay, 0s), calc(var(--escape-delay, 0s) + var(--drift-delay, 0s) + 920ms), 0s;
  animation-iteration-count: 1, infinite, infinite;
  animation-fill-mode: both, none, none;
}

.escaped-transmissions {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
}

.is-dial-unlocked .escaped-transmissions .video-clue.is-target.is-escaped {
  left: var(--escape-x) !important;
  top: var(--escape-y) !important;
  opacity: 1;
  pointer-events: auto;
}

body:not(.is-dial-unlocked) .escaped-transmissions {
  display: none;
}

.video-background {
  display: block !important;
  visibility: visible;
  pointer-events: none;
}

.video-background iframe {
  opacity: 0 !important;
}

.show-title {
  display: none;
}

.brand-logo,
.radio-brand-logo {
  display: block;
  object-fit: contain;
}

.radio-brand-logo {
  position: absolute;
  left: 10.5%;
  top: 16px;
  z-index: 16;
  width: min(35%, 166px);
  max-height: 84px;
  opacity: 0.92;
  pointer-events: none;
  filter:
    brightness(1.14)
    drop-shadow(0 0 12px rgba(244, 240, 230, 0.3))
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.56));
  transform: rotate(-1.5deg);
}

.brand-logo {
  width: min(76vw, 430px);
  max-height: clamp(72px, 15svh, 128px);
  opacity: 0.92;
  transform: translateZ(0);
  animation: logo-signal-float 6.4s ease-in-out infinite;
}

.show-title small {
  display: block;
  color: rgba(232, 177, 95, 0.84);
  font-size: clamp(0.48rem, 2.1vw, 0.7rem);
  letter-spacing: 0.18em;
  text-shadow: 0 0 14px rgba(232, 177, 95, 0.24);
}

.is-awake .brand-logo {
  opacity: 0.78;
}

.has-video-apparition .brand-logo,
.is-dial-unlocked .brand-logo {
  opacity: 0.48;
}

.is-awake .radio-brand-logo {
  opacity: 0.88;
}

.is-dial-unlocked .radio-brand-logo,
.has-video-apparition .radio-brand-logo {
  opacity: 0.74;
}

.video-apparition {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(128, 214, 189, 0.12), transparent 0 28%, rgba(0, 0, 0, 0.62) 74%),
    repeating-linear-gradient(0deg, rgba(244, 240, 230, 0.05) 0 1px, transparent 1px 4px);
  transition: opacity 260ms ease, visibility 260ms ease;
}

.has-video-apparition .video-apparition {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.apparition-shell {
  position: relative;
  width: min(92vw, 640px);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  filter:
    drop-shadow(0 0 24px rgba(128, 214, 189, 0.34))
    drop-shadow(0 34px 70px rgba(0, 0, 0, 0.82));
  animation: apparition-arrive 1200ms ease-out both;
}

.apparition-shell::before,
.apparition-shell::after {
  content: "";
  position: absolute;
  inset: -34px;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(5, 14, 13, 0.92), rgba(5, 14, 13, 0.48) 42%, rgba(128, 214, 189, 0.16) 62%, transparent 76%),
    radial-gradient(ellipse at 22% 52%, rgba(232, 177, 95, 0.1), transparent 36%);
  filter: blur(16px);
}

.apparition-shell::after {
  inset: -14px;
  opacity: 0.52;
  background:
    repeating-linear-gradient(90deg, rgba(244, 240, 230, 0.08) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(128, 214, 189, 0.08) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

.apparition-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 42px;
  background: #000;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 68%, rgba(0, 0, 0, 0.82) 78%, transparent 100%);
}

.apparition-screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.4) contrast(1.34) brightness(0.74);
  transform: scale(1.035);
}

.apparition-close {
  position: absolute;
  right: 4%;
  top: 0;
  z-index: 4;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  color: rgba(244, 240, 230, 0.92);
  background:
    radial-gradient(circle, rgba(128, 214, 189, 0.18), rgba(2, 7, 7, 0.82));
  box-shadow: 0 0 24px rgba(128, 214, 189, 0.24);
  font: 950 0.86rem/1 var(--font-display);
  cursor: pointer;
}

.apparition-title {
  position: absolute;
  left: 50%;
  bottom: -10px;
  max-width: min(78vw, 500px);
  transform: translateX(-50%);
  color: rgba(244, 240, 230, 0.9);
  font: 950 clamp(0.54rem, 2.5vw, 0.82rem)/1 var(--font-display);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 0 12px rgba(128, 214, 189, 0.75),
    2px 0 rgba(183, 83, 80, 0.44);
}

.dial-window,
.dial-center {
  pointer-events: auto;
  cursor: pointer;
}

/* Tiny footer/status strip */
.signal-readout {
  min-height: 24px;
  grid-template-columns: 18px auto auto;
  gap: 6px;
  width: min(86%, 320px);
  margin-inline: auto;
  padding: 2px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(2, 7, 7, 0.34);
  box-shadow: none;
  opacity: 0.68;
}

.readout-bars {
  width: 18px;
  height: 12px;
  opacity: 0.5;
}

#readoutFrequency {
  font-size: 0.58rem;
  letter-spacing: 0.04em;
}

#trackTitle {
  max-width: 12ch;
  overflow: hidden;
  color: rgba(244, 240, 230, 0.5);
  font-size: 0.46rem;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-panel {
  min-height: 18px;
  width: min(82%, 300px);
  margin-inline: auto;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: rgba(244, 240, 230, 0.42);
  font-size: 0.44rem;
  gap: 5px;
  letter-spacing: 0.04em;
}

.game-panel strong,
#roundTimer {
  font-size: 0.52rem;
  text-shadow: none;
}

.is-quiz-open .signal-readout,
.is-quiz-open .game-panel {
  opacity: 0.46;
}

@media (max-width: 560px) {
  .player-count {
    font-size: 0.46rem;
    gap: 3px;
    letter-spacing: 0.05em;
  }

  .player-count strong {
    font-size: 0.58rem;
  }
}

@media (max-width: 380px) {
  .player-count span {
    display: none;
  }
}

/* Physical radio power switch */
.power-switch,
.is-awake .power-switch,
.is-dial-unlocked.is-awake .power-switch {
  left: auto;
  right: 18px;
  top: 18px;
  z-index: 30;
  min-width: 104px;
  min-height: 38px;
  height: 38px;
  padding: 0 12px 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid rgba(184, 126, 62, 0.44);
  border-radius: 10px;
  color: rgba(244, 240, 230, 0.8);
  background:
    linear-gradient(180deg, rgba(71, 43, 25, 0.96), rgba(20, 12, 8, 0.98)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px);
  box-shadow:
    inset 0 1px 0 rgba(244, 240, 230, 0.12),
    inset 0 -10px 18px rgba(0, 0, 0, 0.46),
    0 8px 18px rgba(0, 0, 0, 0.46);
  transform: none;
  animation: none;
}

.power-switch::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(1, 5, 5, 0.95), rgba(28, 17, 11, 0.96));
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(244, 240, 230, 0.08);
  transform: translateY(-50%);
}

.power-switch::after {
  content: "POWER";
  position: absolute;
  left: 45px;
  top: 5px;
  color: rgba(232, 177, 95, 0.48);
  font: 900 0.42rem/1 var(--font-display);
  letter-spacing: 0.12em;
}

.switch-light,
.is-awake .switch-light {
  position: absolute;
  left: 10px;
  top: 50%;
  z-index: 2;
  width: 12px;
  height: 12px;
  background:
    radial-gradient(circle at 36% 30%, rgba(244, 240, 230, 0.82), transparent 24%),
    radial-gradient(circle, rgba(183, 83, 80, 0.92), rgba(76, 18, 17, 0.9) 64%, rgba(0, 0, 0, 0.82));
  box-shadow:
    0 0 8px rgba(183, 83, 80, 0.6),
    inset 0 0 5px rgba(0, 0, 0, 0.54);
  transform: translateY(-50%);
  transition: left 180ms ease, background 180ms ease, box-shadow 180ms ease;
  animation: none;
}

.is-awake .switch-light {
  left: 24px;
  background:
    radial-gradient(circle at 36% 30%, rgba(244, 240, 230, 0.9), transparent 24%),
    radial-gradient(circle, rgba(128, 214, 189, 0.96), rgba(30, 95, 78, 0.82) 66%, rgba(0, 0, 0, 0.82));
  box-shadow:
    0 0 14px rgba(128, 214, 189, 0.9),
    inset 0 0 6px rgba(0, 0, 0, 0.54);
}

.switch-label {
  position: relative;
  top: 5px;
  font-size: 0.52rem;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.power-switch:hover,
.power-switch:focus-visible,
.is-awake .power-switch:hover,
.is-awake .power-switch:focus-visible {
  border-color: rgba(232, 177, 95, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(244, 240, 230, 0.14),
    inset 0 -10px 18px rgba(0, 0, 0, 0.48),
    0 0 20px rgba(232, 177, 95, 0.18),
    0 10px 22px rgba(0, 0, 0, 0.5);
  transform: none;
}

@media (max-width: 560px) {
  .power-switch,
  .is-awake .power-switch,
  .is-dial-unlocked.is-awake .power-switch {
    right: 14px;
    top: 14px;
    min-width: 94px;
    height: 34px;
    min-height: 34px;
    padding-left: 40px;
  }

  .power-switch::after {
    left: 41px;
    top: 4px;
    font-size: 0.38rem;
  }

  .switch-label {
    font-size: 0.46rem;
  }
}

.is-dial-unlocked .video-clue.is-escaped::before {
  inset: 4px;
  opacity: 0.78;
  background:
    radial-gradient(circle, rgba(244, 240, 230, 0.18), transparent 18%),
    radial-gradient(circle, rgba(128, 214, 189, 0.26), transparent 44%),
    radial-gradient(circle, transparent 0 42%, rgba(128, 214, 189, 0.4) 44%, transparent 64%),
    radial-gradient(circle, transparent 0 62%, rgba(232, 177, 95, 0.18) 64%, transparent 78%);
  filter: blur(2.2px);
}

.is-dial-unlocked .video-clue.is-escaped::after {
  inset: 42%;
  background: rgba(244, 240, 230, 0.94);
  box-shadow:
    0 0 18px rgba(244, 240, 230, 0.92),
    0 0 42px rgba(128, 214, 189, 0.84),
    0 0 68px rgba(232, 177, 95, 0.28);
}

.is-dial-unlocked .video-clue.is-escaped:nth-last-child(odd)::before {
  opacity: 0.58;
}

@keyframes escaped-transmission-drift {
  0%, 100% {
    transform: translate(-50%, -50%) translate3d(-7px, 4px, 0) scale(0.94);
  }
  50% {
    transform: translate(-50%, -50%) translate3d(8px, -13px, 0) scale(1.07);
  }
}

@keyframes escaped-transmission-burst {
  0% {
    opacity: 0;
    transform:
      translate(calc(50vw - var(--escape-x)), calc(42vh - var(--escape-y)))
      translate(-50%, -50%)
      scale(0.12);
    filter: blur(10px) brightness(1.8);
  }
  22% {
    opacity: 1;
    filter: blur(4px) brightness(1.55);
  }
  68% {
    transform: translate(-50%, -50%) scale(1.16);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0) brightness(1);
  }
}

@keyframes apparition-arrive {
  0% {
    opacity: 0;
    transform: scale(0.7) translate3d(0, 26px, 0) skewX(-3deg);
    filter:
      blur(14px)
      drop-shadow(0 0 24px rgba(128, 214, 189, 0.2));
  }
  7%,
  14% {
    opacity: 1;
    transform: scale(1.03) translate3d(-8px, 0, 0) skewX(4deg);
  }
  18%,
  74% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    filter:
      blur(0)
      drop-shadow(0 0 24px rgba(128, 214, 189, 0.34))
      drop-shadow(0 34px 70px rgba(0, 0, 0, 0.82));
  }
  82% {
    opacity: 1;
    transform: scale(1.02) translate3d(7px, -3px, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
  }
}

@keyframes logo-signal-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    filter: brightness(0.92);
  }
  50% {
    transform: translate3d(0, -4px, 0);
    filter: brightness(1.12);
  }
}

@media (max-width: 560px) {
  .show-title {
    display: none;
    padding-top: max(4px, env(safe-area-inset-top));
  }

  .radio-brand-logo {
    left: 10%;
    top: 16px;
    width: min(29%, 116px);
    max-height: 54px;
  }

  .brand-logo {
    width: min(82vw, 340px);
    max-height: clamp(64px, 13svh, 96px);
  }

  .show-title small {
    font-size: 0.48rem;
    letter-spacing: 0.14em;
  }

  .is-dial-unlocked .escaped-transmissions .video-clue.is-target.is-escaped {
    width: clamp(78px, 23vw, 104px);
    height: clamp(78px, 23vw, 104px);
  }

  .apparition-screen {
    border-radius: 30px;
  }

  .apparition-close {
    right: 2%;
    top: -12px;
  }
}

@media (max-height: 700px) {
  .show-title {
    display: none;
    gap: 2px;
  }

  .radio-brand-logo {
    left: 11%;
    top: 12px;
    width: min(27%, 104px);
    max-height: 42px;
  }

  .brand-logo {
    width: min(64vw, 280px);
    max-height: 56px;
  }

  .show-title small {
    display: none;
  }
}

/* Phone fit pass */
@media (max-width: 560px) {
  body {
    overflow-x: hidden;
  }

  .haunted-room {
    width: 100%;
    min-height: 100svh;
    padding: max(8px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    place-items: center;
    align-content: center;
    gap: 6px;
  }

  .radio-console {
    width: min(100%, 420px);
    grid-template-rows: auto 1fr;
    gap: 4px;
    padding: 0;
  }

  .top-strip {
    top: max(7px, env(safe-area-inset-top));
    width: min(92vw, 340px);
    min-height: 16px;
    padding-inline: 2px;
    font-size: 0.48rem;
    letter-spacing: 0.05em;
  }

  .live-status {
    gap: 5px;
  }

  .live-dot {
    width: 7px;
    height: 7px;
  }

  .player-count {
    font-size: 0.42rem;
  }

  .player-count strong {
    font-size: 0.54rem;
  }

  .radio-face {
    width: min(94vw, 390px);
    min-height: auto;
    margin-top: 12px;
  }

  .is-quiz-open .radio-face {
    transform: translateY(-52px) scale(0.88);
    transform-origin: center top;
  }

  .radio-brand-logo {
    left: 9%;
    top: 13px;
    width: min(27%, 104px);
    max-height: 46px;
  }

  .power-switch,
  .is-awake .power-switch,
  .is-dial-unlocked.is-awake .power-switch {
    right: 10px;
    top: 11px;
    min-width: 84px;
    min-height: 30px;
    height: 30px;
    padding: 0 8px 0 35px;
    border-radius: 8px;
  }

  .power-switch::before {
    left: 7px;
    width: 25px;
    height: 14px;
  }

  .power-switch::after {
    left: 36px;
    top: 4px;
    font-size: 0.34rem;
    letter-spacing: 0.09em;
  }

  .switch-light,
  .is-awake .switch-light {
    left: 9px;
    width: 10px;
    height: 10px;
  }

  .is-awake .switch-light {
    left: 20px;
  }

  .switch-label {
    top: 5px;
    font-size: 0.41rem;
    letter-spacing: 0.06em;
  }

  .quiz-lightbox {
    width: min(94vw, 380px);
    bottom: max(16px, env(safe-area-inset-bottom));
    gap: 3px;
  }

  .quiz-lightbox .mission-card {
    min-height: 36px;
    padding: 7px 14px;
  }

  .quiz-lightbox .question-card {
    min-height: 76px;
    padding: 13px 18px;
  }

  .quiz-lightbox .quiz-prompt {
    max-width: 25ch;
    font-size: clamp(1rem, 4.5vw, 1.18rem);
    line-height: 1.05;
  }

  .quiz-lightbox .quiz-answers {
    gap: 4px;
  }

  .quiz-lightbox .quiz-answers button,
  .radio-face .quiz-lightbox .quiz-answers button {
    min-height: 40px;
    padding: 6px 10px;
    font-size: clamp(0.56rem, 2.5vw, 0.72rem);
  }

  .signal-readout {
    min-height: 18px;
    width: min(74vw, 260px);
    padding: 0 6px;
  }

  .game-panel {
    min-height: 16px;
    width: min(74vw, 260px);
    font-size: 0.38rem;
  }

  .game-panel strong,
  #roundTimer {
    font-size: 0.44rem;
  }

  .is-dial-unlocked .escaped-transmissions .video-clue.is-target.is-escaped {
    width: clamp(72px, 22vw, 96px);
    height: clamp(72px, 22vw, 96px);
  }

  .apparition-shell {
    width: min(94vw, 420px);
  }
}

@media (max-height: 680px) and (max-width: 560px) {
  .radio-face {
    width: min(90vw, 340px);
    margin-top: 8px;
  }

  .is-quiz-open .radio-face {
    transform: translateY(-44px) scale(0.82);
  }

  .quiz-lightbox {
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  .quiz-lightbox .mission-card {
    min-height: 30px;
    padding-block: 5px;
  }

  .quiz-lightbox .question-card {
    min-height: 58px;
    padding: 9px 14px;
  }

  .quiz-lightbox .quiz-answers button,
  .radio-face .quiz-lightbox .quiz-answers button {
    min-height: 32px;
    padding-block: 4px;
  }
}

/* Native app viewport lock */
html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
}

.haunted-room {
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.radio-console {
  max-height: 100%;
}

.signal-readout,
.game-panel {
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .haunted-room {
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    overflow: hidden;
  }

  .radio-console {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    align-content: center;
  }

  .signal-readout,
  .game-panel {
    transform: translateY(-2px);
  }
}

/* Haunted FM living title banner */
.station-title {
  position: fixed;
  left: 50%;
  top: max(10px, env(safe-area-inset-top));
  z-index: 34;
  width: min(92vw, 620px);
  margin: 0;
  transform: translateX(-50%);
  color: rgba(244, 240, 230, 0.94);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 8vw, 5.2rem);
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(128, 214, 189, 0.18)) drop-shadow(0 12px 28px rgba(0, 0, 0, 0.78));
  mix-blend-mode: screen;
}

.station-title::before,
.station-title::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84%;
  height: 58%;
  transform: translate(-50%, -42%);
  border-radius: 999px;
  pointer-events: none;
}

.station-title::before {
  background:
    radial-gradient(ellipse at 50% 54%, rgba(128, 214, 189, 0.18), transparent 62%),
    radial-gradient(ellipse at 50% 70%, rgba(232, 177, 95, 0.1), transparent 70%);
  filter: blur(16px);
  opacity: 0.76;
  animation: title-signal-glow 4.8s ease-in-out infinite;
}

.station-title::after {
  height: 34%;
  background:
    linear-gradient(90deg, transparent, rgba(244, 240, 230, 0.22), transparent),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(128, 214, 189, 0.1) 5px 6px);
  filter: blur(7px);
  opacity: 0.32;
  animation: title-scan 2.6s linear infinite;
}

.station-title-copy {
  position: relative;
  z-index: 2;
  display: inline-block;
  transform: scaleX(1.04);
  text-shadow:
    0 1px 0 rgba(232, 177, 95, 0.42),
    0 0 12px rgba(128, 214, 189, 0.26),
    0 0 34px rgba(232, 177, 95, 0.16),
    2px 0 rgba(128, 214, 189, 0.16),
    -2px 0 rgba(160, 39, 38, 0.16);
  animation:
    title-float 6.2s ease-in-out infinite,
    title-flicker 9s steps(1, end) infinite;
}

body:not(.has-started):not(.is-awake) .station-title {
  animation: title-first-breath 2.8s ease-in-out infinite;
}

.is-awake .station-title-copy {
  animation:
    title-float 5.4s ease-in-out infinite,
    title-flicker 7.4s steps(1, end) infinite,
    title-glitch 6.8s steps(2, end) infinite;
}

.is-surge .station-title-copy,
.is-jump-scare .station-title-copy,
.has-video-apparition .station-title-copy {
  animation:
    title-float 2.2s ease-in-out infinite,
    title-flicker 1.2s steps(1, end) infinite,
    title-glitch 520ms steps(2, end) infinite;
}

.top-strip {
  top: max(78px, calc(env(safe-area-inset-top) + 70px));
}

@keyframes title-first-breath {
  0%,
  100% {
    opacity: 0.82;
    transform: translateX(-50%) translateY(0) scale(0.98);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(2px) scale(1);
  }
}

@keyframes title-float {
  0%,
  100% {
    transform: scaleX(1.04) translateY(0);
  }
  50% {
    transform: scaleX(1.045) translateY(3px);
  }
}

@keyframes title-flicker {
  0%,
  86%,
  100% {
    opacity: 0.96;
  }
  87% {
    opacity: 0.44;
  }
  88% {
    opacity: 1;
  }
  91% {
    opacity: 0.68;
  }
  92% {
    opacity: 0.98;
  }
}

@keyframes title-glitch {
  0%,
  92%,
  100% {
    filter: none;
  }
  93% {
    filter: hue-rotate(42deg) contrast(1.25);
    transform: scaleX(1.04) translate(2px, 1px);
  }
  94% {
    filter: hue-rotate(-18deg) contrast(1.4);
    transform: scaleX(1.04) translate(-2px, -1px);
  }
}

@keyframes title-signal-glow {
  0%,
  100% {
    opacity: 0.52;
    transform: translate(-50%, -42%) scale(0.92);
  }
  50% {
    opacity: 0.86;
    transform: translate(-50%, -42%) scale(1.04);
  }
}

@keyframes title-scan {
  from {
    transform: translate(-58%, -42%);
  }
  to {
    transform: translate(-42%, -42%);
  }
}

@media (max-width: 560px) {
  .station-title {
    top: max(9px, env(safe-area-inset-top));
    width: 96vw;
    font-size: clamp(2.25rem, 13vw, 3.8rem);
  }

  .top-strip {
    top: max(64px, calc(env(safe-area-inset-top) + 58px));
  }

  .radio-face {
    margin-top: 46px;
  }

  .is-quiz-open .radio-face {
    transform: translateY(-30px) scale(0.86);
  }
}

@media (max-height: 680px) and (max-width: 560px) {
  .station-title {
    font-size: clamp(1.95rem, 11vw, 3.1rem);
  }

  .top-strip {
    top: max(54px, calc(env(safe-area-inset-top) + 48px));
  }

  .radio-face {
    margin-top: 34px;
  }

  .is-quiz-open .radio-face {
    transform: translateY(-26px) scale(0.8);
  }
}

/* Smoke-only stage: no hard edges outside the radio */
.radio-console {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.radio-console::before {
  display: none;
}

.stage-light {
  opacity: 0;
  display: none;
}

.smoke {
  width: 220px;
  height: 220px;
  opacity: 0.42;
  background:
    radial-gradient(ellipse at 38% 44%, rgba(244, 240, 230, 0.08), transparent 28%),
    radial-gradient(ellipse at 60% 58%, rgba(128, 214, 189, 0.16), transparent 48%),
    radial-gradient(ellipse at 50% 50%, rgba(5, 8, 7, 0.4), transparent 72%);
  filter: blur(28px);
  mix-blend-mode: screen;
}

.smoke-one {
  left: -18%;
  top: 14%;
}

.smoke-two {
  right: -18%;
  top: 20%;
}

.smoke-three {
  left: 28%;
  bottom: 8%;
}

.is-awake .smoke {
  opacity: 0.66;
}

.haunted-room::before,
.haunted-room::after {
  content: "";
  position: fixed;
  z-index: 1;
  pointer-events: none;
  border-radius: 999px;
  mix-blend-mode: screen;
  filter: blur(34px);
  opacity: 0.42;
}

.haunted-room::before {
  left: 50%;
  top: 36%;
  width: min(104vw, 680px);
  height: min(48vh, 360px);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at 18% 48%, rgba(244, 240, 230, 0.12), transparent 26%),
    radial-gradient(ellipse at 48% 44%, rgba(128, 214, 189, 0.18), transparent 44%),
    radial-gradient(ellipse at 78% 58%, rgba(232, 177, 95, 0.1), transparent 36%);
  animation: room-smoke-roll 11s ease-in-out infinite;
}

.haunted-room::after {
  left: 50%;
  bottom: 8%;
  width: min(116vw, 760px);
  height: min(38vh, 280px);
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 24% 60%, rgba(128, 214, 189, 0.18), transparent 34%),
    radial-gradient(ellipse at 54% 48%, rgba(244, 240, 230, 0.1), transparent 30%),
    radial-gradient(ellipse at 78% 42%, rgba(183, 83, 80, 0.09), transparent 34%);
  animation: room-smoke-drift 13s ease-in-out infinite;
}

.radio-console,
.escaped-transmissions,
.video-apparition,
.scare-layer {
  position: relative;
  z-index: 2;
}

.station-title {
  position: fixed;
  z-index: 34;
}

.smoke {
  opacity: 0.7;
}

.is-awake .haunted-room::before,
.is-awake .haunted-room::after {
  opacity: 0.68;
}

.video-apparition {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(128, 214, 189, 0.16), transparent 0 30%, rgba(0, 0, 0, 0.72) 76%),
    radial-gradient(ellipse at 50% 50%, transparent 0 38%, rgba(0, 0, 0, 0.52) 76%),
    repeating-linear-gradient(0deg, rgba(244, 240, 230, 0.05) 0 1px, transparent 1px 4px);
  transition: opacity 260ms ease, visibility 260ms ease;
}

.has-video-apparition .video-apparition {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.apparition-shell {
  position: relative;
  z-index: 181;
  width: min(88vw, 560px);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border-radius: 999px;
  filter:
    drop-shadow(0 0 34px rgba(128, 214, 189, 0.42))
    drop-shadow(0 34px 80px rgba(0, 0, 0, 0.9));
  animation: apparition-arrive 900ms ease-out both;
}

.apparition-shell::before,
.apparition-shell::after {
  content: "";
  position: absolute;
  inset: -46px;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(3, 10, 10, 0.95), rgba(3, 10, 10, 0.52) 42%, rgba(128, 214, 189, 0.18) 64%, transparent 78%),
    radial-gradient(ellipse at 22% 58%, rgba(232, 177, 95, 0.1), transparent 34%),
    radial-gradient(ellipse at 76% 42%, rgba(183, 83, 80, 0.12), transparent 36%);
  filter: blur(18px);
  animation: room-smoke-roll 8s ease-in-out infinite;
}

.apparition-shell::after {
  inset: -22px;
  opacity: 0.6;
  background:
    repeating-linear-gradient(90deg, rgba(244, 240, 230, 0.08) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(128, 214, 189, 0.08) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

.apparition-screen {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 999px;
  background: #000;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 66%, rgba(0, 0, 0, 0.78) 78%, transparent 100%);
}

.apparition-close {
  right: 2%;
  top: 2%;
}

@keyframes room-smoke-roll {
  0%,
  100% {
    transform: translate(-52%, -50%) scale(0.92) rotate(-2deg);
  }
  50% {
    transform: translate(-48%, -45%) scale(1.08) rotate(3deg);
  }
}

@keyframes room-smoke-drift {
  0%,
  100% {
    transform: translateX(-54%) translateY(8px) scale(0.96);
  }
  50% {
    transform: translateX(-46%) translateY(-14px) scale(1.08);
  }
}

.quiz-lightbox::before {
  display: none;
}

.quiz-lightbox {
  background: transparent;
  box-shadow: none;
}

.quiz-lightbox .mission-card,
.quiz-lightbox .question-card,
.quiz-lightbox .quiz-panel,
.quiz-lightbox .quiz-answers button {
  background: transparent;
  box-shadow: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.quiz-lightbox .mission-card::before,
.quiz-lightbox .question-card::before,
.quiz-lightbox .quiz-answers button::before {
  opacity: 0.86;
  mask-image: radial-gradient(ellipse at 50% 52%, #000 0 54%, rgba(0, 0, 0, 0.62) 66%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 52%, #000 0 54%, rgba(0, 0, 0, 0.62) 66%, transparent 82%);
}

.quiz-lightbox .mission-card::after,
.quiz-lightbox .question-card::after {
  opacity: 0.36;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 44%, rgba(0, 0, 0, 0.55) 58%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 44%, rgba(0, 0, 0, 0.55) 58%, transparent 76%);
}

.quiz-lightbox .question-card::before {
  inset: -28px -46px;
  mask-image: radial-gradient(ellipse at 50% 54%, #000 0 46%, rgba(0, 0, 0, 0.5) 58%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 54%, #000 0 46%, rgba(0, 0, 0, 0.5) 58%, transparent 72%);
}

.quiz-lightbox .quiz-answers button::before {
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 48%, rgba(0, 0, 0, 0.42) 60%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 48%, rgba(0, 0, 0, 0.42) 60%, transparent 74%);
}

.quiz-lightbox .mission-card::before,
.quiz-lightbox .mission-card::after,
.quiz-lightbox .question-card::before,
.quiz-lightbox .question-card::after,
.quiz-lightbox .quiz-answers button::before {
  display: none;
}

.quiz-lightbox .mission-card,
.quiz-lightbox .question-card,
.quiz-lightbox .quiz-answers button {
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.95),
    0 0 18px rgba(128, 214, 189, 0.22);
}

.quiz-lightbox::after {
  display: none;
}

.quiz-lightbox .quiz-prompt,
.quiz-lightbox .quiz-answers button,
.quiz-lightbox .mission-card {
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 1),
    0 0 9px rgba(0, 0, 0, 0.96),
    0 0 18px rgba(128, 214, 189, 0.28);
}

/* Final title/radio composition pass */
.station-title {
  top: max(16px, env(safe-area-inset-top));
  font-size: clamp(2.25rem, 7.2vw, 4.8rem);
}

.radio-console {
  transform: translateY(34px) scale(0.92);
  transform-origin: top center;
}

.top-strip {
  top: max(92px, calc(env(safe-area-inset-top) + 84px));
}

.quiz-lightbox {
  bottom: max(20px, env(safe-area-inset-bottom));
}

.is-quiz-open .radio-face {
  transform: translateY(-54px) scale(0.9);
}

@media (max-width: 560px) {
  .station-title {
    top: max(13px, env(safe-area-inset-top));
    font-size: clamp(2.15rem, 11.6vw, 3.45rem);
  }

  .radio-console {
    width: min(100%, 390px);
    transform: translateY(58px) scale(0.86);
  }

  .top-strip {
    top: max(76px, calc(env(safe-area-inset-top) + 68px));
  }

  .radio-face {
    margin-top: 0;
  }

  .is-quiz-open .radio-face {
    transform: translateY(-34px) scale(0.84);
  }

  .quiz-lightbox {
    bottom: max(18px, env(safe-area-inset-bottom));
    width: min(92vw, 360px);
  }
}

@media (max-height: 700px) and (max-width: 560px) {
  .station-title {
    top: max(9px, env(safe-area-inset-top));
    font-size: clamp(1.85rem, 10vw, 2.9rem);
  }

  .radio-console {
    transform: translateY(44px) scale(0.8);
  }

  .top-strip {
    top: max(58px, calc(env(safe-area-inset-top) + 52px));
  }

  .is-quiz-open .radio-face {
    transform: translateY(-28px) scale(0.78);
  }

  .quiz-lightbox {
    bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* Stable placement fallback for embedded browsers */
.station-title {
  position: fixed !important;
  left: 50%;
  top: 16px !important;
  transform: translateX(-50%);
  z-index: 34;
}

@media (max-width: 560px) {
  .station-title {
    top: 13px !important;
  }
}

@media (max-height: 700px) and (max-width: 560px) {
  .station-title {
    top: 9px !important;
  }
}

.start-spotlight {
  display: none;
}

.haunted-room::before {
  top: 34% !important;
  width: min(132vw, 860px) !important;
  height: min(58vh, 420px) !important;
  opacity: 0.76 !important;
  background:
    radial-gradient(ellipse at 15% 46%, rgba(244, 240, 230, 0.16), transparent 28%),
    radial-gradient(ellipse at 42% 42%, rgba(128, 214, 189, 0.28), transparent 46%),
    radial-gradient(ellipse at 80% 56%, rgba(232, 177, 95, 0.14), transparent 38%),
    radial-gradient(ellipse at 58% 70%, rgba(183, 83, 80, 0.1), transparent 42%) !important;
  filter: blur(38px) !important;
}

.haunted-room::after {
  bottom: 2% !important;
  width: min(136vw, 900px) !important;
  height: min(50vh, 360px) !important;
  opacity: 0.72 !important;
  background:
    radial-gradient(ellipse at 18% 54%, rgba(128, 214, 189, 0.24), transparent 34%),
    radial-gradient(ellipse at 48% 42%, rgba(244, 240, 230, 0.16), transparent 32%),
    radial-gradient(ellipse at 82% 44%, rgba(128, 214, 189, 0.2), transparent 36%),
    radial-gradient(ellipse at 66% 72%, rgba(232, 177, 95, 0.1), transparent 42%) !important;
  filter: blur(42px) !important;
}

.smoke {
  opacity: 0.92 !important;
  filter: blur(34px) !important;
}

.station-title::before {
  width: 112% !important;
  height: 118% !important;
  top: 68% !important;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(244, 240, 230, 0.22), transparent 20%),
    radial-gradient(ellipse at 34% 54%, rgba(128, 214, 189, 0.32), transparent 44%),
    radial-gradient(ellipse at 70% 56%, rgba(232, 177, 95, 0.18), transparent 42%),
    radial-gradient(ellipse at 50% 88%, rgba(5, 8, 7, 0.78), transparent 70%) !important;
  filter: blur(20px) !important;
  opacity: 0.96 !important;
  animation: title-smoke-bed 7.8s ease-in-out infinite !important;
}

.station-title::after {
  width: 104% !important;
  height: 88% !important;
  top: 82% !important;
  background:
    radial-gradient(ellipse at 22% 54%, rgba(128, 214, 189, 0.22), transparent 34%),
    radial-gradient(ellipse at 58% 48%, rgba(244, 240, 230, 0.14), transparent 30%),
    radial-gradient(ellipse at 84% 58%, rgba(128, 214, 189, 0.16), transparent 36%) !important;
  filter: blur(26px) !important;
  opacity: 0.62 !important;
  animation: title-smoke-low 9.6s ease-in-out infinite !important;
}

@keyframes title-smoke-bed {
  0%,
  100% {
    transform: translate(-53%, -48%) scale(0.96);
  }
  50% {
    transform: translate(-47%, -42%) scale(1.08);
  }
}

@keyframes title-smoke-low {
  0%,
  100% {
    transform: translate(-46%, -42%) scale(0.92);
  }
  50% {
    transform: translate(-54%, -38%) scale(1.12);
  }
}

/* Fog beds under informational text */
.live-status,
.player-count,
.quiz-lightbox .mission-card,
.quiz-lightbox .question-card,
.quiz-lightbox .quiz-answers button,
.signal-readout,
.game-panel {
  position: relative;
  isolation: isolate;
}

.live-status::before,
.player-count::before,
.quiz-lightbox .mission-card::before,
.quiz-lightbox .question-card::before,
.quiz-lightbox .quiz-answers button::before,
.signal-readout::before,
.game-panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: -1;
  width: 126%;
  height: 180%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(5, 14, 13, 0.84), rgba(5, 14, 13, 0.42) 38%, rgba(128, 214, 189, 0.12) 58%, transparent 76%),
    radial-gradient(ellipse at 24% 46%, rgba(244, 240, 230, 0.08), transparent 32%),
    radial-gradient(ellipse at 78% 58%, rgba(128, 214, 189, 0.1), transparent 36%);
  filter: blur(10px);
  opacity: 0.78;
  pointer-events: none;
  animation: info-smoke-breathe 6.8s ease-in-out infinite;
}

.quiz-lightbox .question-card::before {
  width: 140%;
  height: 150%;
  filter: blur(16px);
  opacity: 0.9;
}

.quiz-lightbox .quiz-answers button::before {
  width: 118%;
  height: 150%;
  filter: blur(9px);
  opacity: 0.68;
}

.live-status::before,
.player-count::before {
  width: 150%;
  height: 220%;
  filter: blur(8px);
  opacity: 0.72;
}

.is-awake .live-status::before,
.is-awake .player-count::before,
.is-awake .quiz-lightbox .mission-card::before,
.is-awake .quiz-lightbox .question-card::before,
.is-awake .quiz-lightbox .quiz-answers button::before {
  opacity: 0.94;
}

@keyframes info-smoke-breathe {
  0%,
  100% {
    transform: translate(-52%, -50%) scale(0.96);
  }
  50% {
    transform: translate(-48%, -54%) scale(1.05);
  }
}

.haunted-room {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 92px 14px max(10px, env(safe-area-inset-bottom)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.radio-console {
  width: min(92vw, 390px) !important;
  height: auto !important;
  min-height: 0 !important;
  transform: translateY(22px) scale(0.9) !important;
  transform-origin: center center !important;
}

@media (max-width: 560px) {
  .haunted-room {
    padding-top: 86px !important;
  }

  .radio-console {
    width: min(92vw, 360px) !important;
    transform: translateY(26px) scale(0.86) !important;
  }
}

@media (max-height: 700px) and (max-width: 560px) {
  .haunted-room {
    padding-top: 70px !important;
  }

  .radio-console {
    transform: translateY(20px) scale(0.78) !important;
  }
}

/* Mobile touch and player-logo hardening */
html,
body,
button,
.radio-face,
.power-switch,
.dial-window,
.dial-center,
.video-clue,
.quiz-lightbox .quiz-answers button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.radio-brand-wordmark {
  position: absolute;
  left: 10.5%;
  top: 17px;
  z-index: 27;
  display: block;
  color: rgba(244, 240, 230, 0.94);
  font: 950 clamp(1.3rem, 5.8vw, 2.1rem)/0.78 var(--font-display);
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 0 12px rgba(244, 240, 230, 0.36),
    0 8px 14px rgba(0, 0, 0, 0.72);
  transform: rotate(-1.5deg);
  pointer-events: none;
}

.is-awake .radio-brand-logo,
.is-dial-unlocked .radio-brand-logo,
.has-video-apparition .radio-brand-logo {
  opacity: 0.9 !important;
}

.power-switch,
.is-awake .power-switch,
.is-dial-unlocked.is-awake .power-switch {
  z-index: 36 !important;
  pointer-events: auto !important;
  min-width: 92px !important;
  min-height: 48px !important;
}

.quiz-lightbox {
  z-index: 38 !important;
  pointer-events: none !important;
}

.quiz-lightbox .quiz-answers,
.quiz-lightbox .quiz-answers button,
.radio-face .quiz-lightbox .quiz-answers button {
  pointer-events: auto !important;
}

.quiz-lightbox .quiz-answers button,
.radio-face .quiz-lightbox .quiz-answers button {
  min-height: 48px !important;
  padding: 12px 14px !important;
  user-select: none;
  -webkit-user-select: none;
}

.quiz-lightbox .quiz-answers button:disabled {
  pointer-events: none !important;
  opacity: 0.72;
}

.quiz-lightbox .quiz-answers button.is-selected-answer {
  opacity: 1;
  filter: brightness(1.18) saturate(1.12);
  transform: translateY(1px) scale(0.99);
}

@media (max-width: 560px) {
  .radio-brand-wordmark {
    left: 10%;
    top: 14px;
    font-size: clamp(1.12rem, 7vw, 1.72rem);
  }

  .power-switch,
  .is-awake .power-switch,
  .is-dial-unlocked.is-awake .power-switch {
    right: 11px !important;
    top: 10px !important;
    min-width: 88px !important;
    min-height: 50px !important;
  }

  .quiz-lightbox {
    width: min(94vw, 380px) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    transform: translate(-50%, -4px) scale(1) !important;
  }

  .quiz-lightbox .quiz-answers {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .quiz-lightbox .quiz-answers button,
  .radio-face .quiz-lightbox .quiz-answers button {
    width: min(88vw, 340px) !important;
    min-height: 52px !important;
    font-size: clamp(0.74rem, 3.7vw, 0.94rem) !important;
    line-height: 1.12 !important;
  }
}

@media (max-height: 700px) and (max-width: 560px) {
  .radio-console {
    transform: translateY(12px) scale(0.74) !important;
  }

  .is-quiz-open .radio-face {
    transform: translateY(-24px) scale(0.82) !important;
  }

  .quiz-lightbox {
    transform: translate(-50%, -12px) scale(1) !important;
  }

  .quiz-lightbox .quiz-answers button,
  .radio-face .quiz-lightbox .quiz-answers button {
    min-height: 48px !important;
    padding-block: 10px !important;
  }
}

/* Phone-first gameplay layout */
@media (max-width: 560px) {
  .station-title {
    top: max(12px, env(safe-area-inset-top)) !important;
    font-size: clamp(2.2rem, 11vw, 3.2rem) !important;
    line-height: 0.9 !important;
  }

  .haunted-room {
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  .radio-console {
    position: fixed !important;
    left: 50% !important;
    top: max(118px, calc(env(safe-area-inset-top) + 108px)) !important;
    width: min(94vw, 360px) !important;
    transform: translateX(-50%) scale(0.78) !important;
    transform-origin: top center !important;
  }

  .radio-face,
  .is-quiz-open .radio-face {
    transform: none !important;
  }

  .top-strip {
    display: none !important;
  }

  .signal-readout,
  .game-panel {
    display: none !important;
  }

  .quiz-lightbox {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    z-index: 80 !important;
    width: min(92vw, 360px) !important;
    max-height: 42svh !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    transform: translateX(-50%) !important;
  }

  .quiz-lightbox .mission-card {
    display: none !important;
  }

  .quiz-lightbox .question-card {
    min-height: 0 !important;
    padding: 10px 16px 8px !important;
  }

  .quiz-lightbox .question-card #quizQuestion {
    display: grid !important;
    gap: 4px !important;
    justify-items: center !important;
  }

  .quiz-lightbox .quiz-id {
    display: none !important;
  }

  .quiz-lightbox .quiz-prompt {
    max-width: 27ch !important;
    font-size: clamp(0.92rem, 4.7vw, 1.12rem) !important;
    line-height: 1.08 !important;
  }

  .quiz-lightbox .quiz-panel {
    width: 100% !important;
  }

  .quiz-lightbox .quiz-answers {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    justify-items: center !important;
  }

  .quiz-lightbox .quiz-answers button,
  .radio-face .quiz-lightbox .quiz-answers button {
    width: min(86vw, 336px) !important;
    min-height: 48px !important;
    padding: 10px 16px !important;
    font-size: clamp(0.78rem, 4vw, 0.98rem) !important;
    line-height: 1.08 !important;
  }

  .power-switch,
  .is-awake .power-switch,
  .is-dial-unlocked.is-awake .power-switch {
    min-width: 96px !important;
    min-height: 52px !important;
  }
}

@media (max-height: 740px) and (max-width: 560px) {
  .station-title {
    font-size: clamp(1.95rem, 9.5vw, 2.75rem) !important;
  }

  .radio-console {
    top: max(90px, calc(env(safe-area-inset-top) + 82px)) !important;
    transform: translateX(-50%) scale(0.66) !important;
  }

  .quiz-lightbox {
    max-height: 46svh !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
  }

  .quiz-lightbox .question-card {
    padding-block: 8px 6px !important;
  }

  .quiz-lightbox .quiz-prompt {
    font-size: clamp(0.82rem, 4.2vw, 1rem) !important;
  }

  .quiz-lightbox .quiz-answers button,
  .radio-face .quiz-lightbox .quiz-answers button {
    min-height: 44px !important;
    padding-block: 8px !important;
  }
}

/* Mobile emergency layout: keep the dial in frame and controls tappable */
@media (max-width: 560px) {
  html,
  body {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .station-title {
    top: max(10px, env(safe-area-inset-top)) !important;
    width: 100vw !important;
    font-size: clamp(2rem, 10vw, 3rem) !important;
    text-align: center !important;
  }

  .haunted-room {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .radio-console {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: max(112px, calc(env(safe-area-inset-top) + 104px)) !important;
    width: min(92vw, 330px) !important;
    margin-inline: auto !important;
    transform: none !important;
    transform-origin: top center !important;
    display: block !important;
  }

  .radio-face,
  .is-quiz-open .radio-face,
  body:not(.is-awake) .radio-face,
  .is-correct .radio-face,
  .is-wrong .radio-face,
  .is-surge .radio-face,
  .is-static-hold .radio-face,
  .is-haunt-flicker .radio-face,
  .is-haunt-twitch .radio-face,
  .is-scare-event .radio-face,
  .is-dial-unlocked .radio-face,
  .is-haptic-hit .radio-face {
    width: 100% !important;
    aspect-ratio: 1.08 !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  .dial-window {
    left: 50% !important;
    top: 50% !important;
    width: 43% !important;
    transform: translate(-50%, -50%) !important;
  }

  .speaker {
    top: 31% !important;
    bottom: 24% !important;
    width: 18% !important;
  }

  .speaker-left {
    left: 8% !important;
  }

  .speaker-right {
    right: 8% !important;
  }

  .radio-brand-wordmark {
    left: 9% !important;
    top: 12px !important;
    font-size: clamp(1rem, 6.2vw, 1.55rem) !important;
    z-index: 42 !important;
  }

  .power-switch,
  .is-awake .power-switch,
  .is-dial-unlocked.is-awake .power-switch {
    left: auto !important;
    right: 10px !important;
    top: 10px !important;
    transform: none !important;
    min-width: 86px !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    z-index: 44 !important;
  }

  .power-switch:hover,
  .power-switch:focus-visible {
    transform: none !important;
  }

  .top-strip,
  .signal-readout,
  .game-panel,
  .tuning-window,
  .marquee-window {
    display: none !important;
  }

  .quiz-lightbox {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    width: min(92vw, 360px) !important;
    max-height: 36dvh !important;
    overflow: visible !important;
    transform: translateX(-50%) !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .quiz-lightbox .mission-card {
    display: none !important;
  }

  .quiz-lightbox .question-card {
    min-height: auto !important;
    padding: 8px 14px !important;
  }

  .quiz-lightbox .quiz-id {
    display: none !important;
  }

  .quiz-lightbox .quiz-prompt {
    max-width: 28ch !important;
    font-size: clamp(0.86rem, 4.4vw, 1.04rem) !important;
    line-height: 1.08 !important;
  }

  .quiz-lightbox .quiz-answers {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .quiz-lightbox .quiz-answers button,
  .radio-face .quiz-lightbox .quiz-answers button {
    width: min(88vw, 340px) !important;
    min-height: 46px !important;
    padding: 9px 14px !important;
    font-size: clamp(0.76rem, 3.9vw, 0.94rem) !important;
    line-height: 1.08 !important;
  }
}

@media (max-height: 720px) and (max-width: 560px) {
  .station-title {
    font-size: clamp(1.75rem, 8.8vw, 2.55rem) !important;
  }

  .radio-console {
    top: max(78px, calc(env(safe-area-inset-top) + 72px)) !important;
    width: min(82vw, 292px) !important;
    transform: none !important;
  }

  .quiz-lightbox {
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    max-height: 40dvh !important;
  }

  .quiz-lightbox .quiz-prompt {
    font-size: clamp(0.78rem, 3.9vw, 0.94rem) !important;
  }

  .quiz-lightbox .quiz-answers button,
  .radio-face .quiz-lightbox .quiz-answers button {
    min-height: 42px !important;
    padding-block: 7px !important;
  }
}

/* Mobile performance mode */
@media (max-width: 700px), (pointer: coarse) {
  body::before {
    animation: none !important;
    opacity: 0.55 !important;
  }

  body::after {
    animation: none !important;
    opacity: 0.12 !important;
  }

  .is-mobile-performance .video-background,
  .is-mobile-performance .video-background iframe {
    display: none !important;
  }

  .stage-light,
  .smoke,
  .magic-dust,
  .radio-console::before,
  .radio-console::after,
  .station-title::before,
  .station-title::after,
  .quiz-lightbox .mission-card::before,
  .quiz-lightbox .question-card::before,
  .quiz-lightbox .quiz-answers button::before,
  .live-status::before,
  .player-count::before,
  .signal-readout::before,
  .game-panel::before {
    display: none !important;
  }

  .radio-face,
  .dial-window,
  .speaker,
  .power-switch,
  .switch-light,
  .video-clue,
  .dial-center,
  .station-title-copy,
  .radio-brand-wordmark,
  .quiz-lightbox,
  .quiz-lightbox * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 80ms !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .radio-face {
    box-shadow:
      inset 0 0 38px rgba(0, 0, 0, 0.58),
      0 18px 36px rgba(0, 0, 0, 0.42) !important;
  }

  .dial-window {
    box-shadow:
      inset 0 0 22px rgba(128, 214, 189, 0.12),
      0 0 26px rgba(0, 0, 0, 0.4) !important;
  }

  .speaker {
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55) !important;
  }

  .power-switch {
    box-shadow:
      inset 0 0 12px rgba(0, 0, 0, 0.62),
      0 0 16px rgba(128, 214, 189, 0.16) !important;
  }

  .quiz-lightbox .question-card,
  .quiz-lightbox .quiz-answers button {
    text-shadow:
      0 2px 2px rgba(0, 0, 0, 0.92),
      0 0 8px rgba(0, 0, 0, 0.72) !important;
  }

  .has-broadcast-glass .broadcast-glass {
    display: block !important;
    opacity: 0.9 !important;
    pointer-events: auto !important;
  }
}

/* Lightweight mobile smoke beds under readable text */
@media (max-width: 700px), (pointer: coarse) {
  .station-title::before,
  .quiz-lightbox .question-card::before,
  .quiz-lightbox .quiz-answers button::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 54% !important;
    z-index: -1 !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    animation: none !important;
  }

  .station-title {
    isolation: isolate !important;
  }

  .station-title::before {
    width: 118% !important;
    height: 118% !important;
    background:
      radial-gradient(ellipse at 50% 54%, rgba(244, 240, 230, 0.18), transparent 22%),
      radial-gradient(ellipse at 42% 60%, rgba(128, 214, 189, 0.24), transparent 50%),
      radial-gradient(ellipse at 50% 88%, rgba(0, 0, 0, 0.72), transparent 74%) !important;
    filter: blur(10px) !important;
    opacity: 0.82 !important;
  }

  .quiz-lightbox .question-card,
  .quiz-lightbox .quiz-answers button {
    position: relative !important;
    isolation: isolate !important;
  }

  .quiz-lightbox .question-card::before {
    width: 132% !important;
    height: 145% !important;
    background:
      radial-gradient(ellipse at 50% 52%, rgba(4, 10, 10, 0.84), rgba(4, 10, 10, 0.42) 42%, rgba(128, 214, 189, 0.13) 62%, transparent 78%),
      radial-gradient(ellipse at 30% 48%, rgba(244, 240, 230, 0.08), transparent 38%) !important;
    filter: blur(8px) !important;
    opacity: 0.9 !important;
  }

  .quiz-lightbox .quiz-answers button::before {
    width: 118% !important;
    height: 132% !important;
    background:
      radial-gradient(ellipse at 50% 52%, rgba(2, 8, 8, 0.76), rgba(2, 8, 8, 0.38) 46%, rgba(128, 214, 189, 0.12) 64%, transparent 78%) !important;
    filter: blur(6px) !important;
    opacity: 0.78 !important;
  }
}

/* Mobile question tray placement */
@media (max-width: 560px) {
  .quiz-lightbox {
    top: min(62dvh, 530px) !important;
    bottom: auto !important;
    width: min(92vw, 360px) !important;
    max-height: none !important;
    transform: translateX(-50%) !important;
  }

  .quiz-lightbox .question-card {
    padding: 9px 14px !important;
  }

  .quiz-lightbox .quiz-answers {
    gap: 8px !important;
  }
}

@media (max-height: 720px) and (max-width: 560px) {
  .quiz-lightbox {
    top: min(59dvh, 400px) !important;
  }
}

.is-haptic-hit .quiz-lightbox {
  animation: haptic-screen-tick 120ms ease-out both !important;
}

.is-haptic-hit .radio-face {
  animation: haptic-radio-tick 120ms ease-out both !important;
}

@keyframes haptic-screen-tick {
  0% {
    transform: translateX(-50%) scale(1);
  }
  45% {
    transform: translateX(-50%) scale(1.012);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

@keyframes haptic-radio-tick {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.006);
  }
}

/* Final reward-video repair: keep background embeds hidden, but show unlocked transmissions. */
.reward-listen-button {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 11;
  display: grid;
  place-items: center;
  width: min(42%, 142px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.72);
  border-radius: 999px;
  color: rgba(246, 229, 186, 0.98);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 242, 181, 0.28), rgba(141, 22, 18, 0.42) 54%, rgba(14, 3, 2, 0.9) 72%),
    #160705;
  box-shadow:
    inset 0 0 18px rgba(255, 226, 145, 0.24),
    0 0 24px rgba(233, 59, 42, 0.24),
    0 0 46px rgba(128, 214, 189, 0.12);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
}

.reward-listen-button strong,
.reward-listen-button small {
  display: block;
  line-height: 1;
  pointer-events: none;
}

.reward-listen-button strong {
  font-size: clamp(1rem, 3vw, 1.45rem);
}

.reward-listen-button small {
  margin-top: 0.25em;
  font-size: clamp(0.48rem, 1.4vw, 0.66rem);
}

.is-dial-unlocked:not(.has-reward-transmission) .reward-listen-button {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  animation: reward-pulse 1.7s ease-in-out infinite;
}

.reward-listen-button:hover,
.reward-listen-button:focus-visible {
  filter: brightness(1.24);
  outline: none;
}

.has-reward-transmission .broadcast-glass,
.is-mobile-performance.has-reward-transmission .broadcast-glass {
  display: block !important;
  visibility: visible !important;
  opacity: 0.96 !important;
  pointer-events: auto !important;
  z-index: 14 !important;
  transform: scale(1.03);
}

.has-reward-transmission .broadcast-glass iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.has-reward-transmission .reward-listen-button,
.has-reward-transmission .dial-center {
  opacity: 0;
  pointer-events: none;
}

.has-transmission-bed .broadcast-glass {
  display: block !important;
  visibility: visible !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  transform: scale(1) !important;
}

.has-transmission-bed .broadcast-glass iframe,
.has-transmission-bed .apparition-screen iframe {
  display: block !important;
}

.has-transmission-bed .video-apparition {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.has-transmission-bed .reward-listen-button,
.has-transmission-bed .transmission-close,
.has-transmission-bed .floating-transmission-close {
  opacity: 0 !important;
  pointer-events: none !important;
}

.has-transmission-bed .dial-center {
  opacity: 1;
}

.is-video-priority .radio-console,
.is-video-priority .radio-face,
.is-video-priority .dial-window,
.is-video-priority .video-apparition,
.is-video-priority .apparition-shell,
.is-video-priority .broadcast-glass {
  animation: none !important;
}

.is-video-priority .radio-console,
.is-video-priority .radio-face {
  filter: none !important;
}

.is-video-priority .smoke,
.is-video-priority .stage-light,
.is-video-priority .magic-dust,
.is-video-priority .video-clues,
.is-video-priority .escaped-transmissions,
.is-video-priority .start-spotlight {
  animation-play-state: paused !important;
}

.is-video-priority .apparition-screen,
.is-video-priority.has-archive-video-lightbox .apparition-screen,
.is-video-priority .broadcast-glass {
  border-radius: 22px !important;
  filter: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.is-video-priority .apparition-shell,
.is-video-priority.has-archive-video-lightbox .apparition-shell {
  filter: drop-shadow(0 18px 54px rgba(0, 0, 0, 0.86)) !important;
}

.is-video-priority .apparition-shell::before,
.is-video-priority .apparition-shell::after {
  opacity: 0.34 !important;
  filter: blur(10px) !important;
}

.is-video-priority .apparition-screen iframe,
.is-video-priority .broadcast-glass iframe,
.is-video-priority.has-archive-video-lightbox .apparition-screen iframe {
  filter: none !important;
  transform: none !important;
  will-change: auto !important;
}

.youtube-resume-button {
  appearance: none;
  border: 0;
  position: absolute;
  left: 50%;
  bottom: 9%;
  z-index: 50;
  min-width: min(76%, 260px);
  padding: 12px 16px;
  border-radius: 999px;
  color: rgba(248, 238, 214, 0.96);
  background:
    radial-gradient(ellipse at 50% 45%, rgba(128, 214, 189, 0.26), rgba(0, 0, 0, 0.78) 72%);
  box-shadow:
    inset 0 0 18px rgba(248, 238, 214, 0.08),
    0 0 30px rgba(128, 214, 189, 0.2),
    0 18px 40px rgba(0, 0, 0, 0.56);
  font: 900 0.72rem/1 var(--font-display, monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto !important;
  touch-action: manipulation;
  transform: translateX(-50%);
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease;
}

.youtube-resume-button.is-soft {
  opacity: 0.72;
}

.youtube-resume-button.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.96);
}

.youtube-resume-button:hover,
.youtube-resume-button:focus-visible {
  filter: brightness(1.18);
  outline: 0;
}

.transmission-close {
  position: absolute;
  right: 10%;
  top: 10%;
  z-index: 18;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  color: rgba(248, 238, 214, 0.94);
  background: rgba(0, 0, 0, 0.54);
  box-shadow: inset 0 0 12px rgba(128, 214, 189, 0.16), 0 0 20px rgba(0, 0, 0, 0.38);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease;
}

.has-reward-transmission .transmission-close {
  opacity: 1;
  pointer-events: auto;
}

.floating-transmission-close {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  top: max(14px, env(safe-area-inset-top));
  z-index: 120;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  color: rgba(248, 238, 214, 0.96);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 236, 173, 0.2), rgba(18, 5, 4, 0.86) 70%),
    rgba(0, 0, 0, 0.72);
  box-shadow:
    inset 0 0 14px rgba(128, 214, 189, 0.18),
    0 0 28px rgba(0, 0, 0, 0.54);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease;
}

.has-reward-transmission .floating-transmission-close {
  opacity: 1;
  pointer-events: auto;
}

.floating-transmission-close:active {
  transform: scale(0.94);
}

.transmission-close:active {
  transform: scale(0.94);
}

@keyframes reward-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 18px rgba(255, 226, 145, 0.24),
      0 0 22px rgba(233, 59, 42, 0.24),
      0 0 42px rgba(128, 214, 189, 0.12);
  }
  50% {
    box-shadow:
      inset 0 0 26px rgba(255, 226, 145, 0.42),
      0 0 34px rgba(233, 59, 42, 0.38),
      0 0 64px rgba(128, 214, 189, 0.22);
  }
}

@media (max-width: 700px), (pointer: coarse) {
  .reward-listen-button {
    width: min(48%, 136px);
    min-width: 96px;
    min-height: 96px;
    touch-action: manipulation;
  }
}

/* Experience upgrades: intro, daily signal, archive, listener board */
.intro-veil {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(128, 214, 189, 0.12), transparent 34%),
    radial-gradient(circle at 50% 64%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.92) 62%),
    rgba(0, 0, 0, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.has-intro-veil .intro-veil {
  opacity: 1;
  pointer-events: auto;
}

.intro-veil[aria-hidden="true"] {
  visibility: hidden;
}

.intro-smoke-card {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(86vw, 420px);
  padding: 28px 24px;
  color: rgba(248, 238, 214, 0.96);
  text-align: center;
  isolation: isolate;
}

.intro-smoke-card::before {
  content: "";
  position: absolute;
  inset: -42px -34px;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(2, 7, 7, 0.92), rgba(2, 7, 7, 0.62) 42%, rgba(128, 214, 189, 0.16) 64%, transparent 78%),
    radial-gradient(ellipse at 42% 62%, rgba(232, 177, 95, 0.2), transparent 48%);
  filter: blur(15px);
  animation: smoke-drift 6s ease-in-out infinite;
}

.intro-kicker,
.experience-panel span,
.archive-smoke span,
.leader-card span {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(128, 214, 189, 0.78);
}

.intro-smoke-card strong {
  font-size: clamp(1.45rem, 8vw, 2.7rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.intro-smoke-card button,
.daily-signal-card,
.tape-archive-card,
.archive-close,
.archive-tape {
  appearance: none;
  border: 0;
  color: rgba(248, 238, 214, 0.96);
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.intro-smoke-card button {
  justify-self: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 236, 173, 0.28), rgba(132, 19, 17, 0.54) 58%, rgba(12, 4, 3, 0.9));
  box-shadow: inset 0 0 18px rgba(255, 238, 177, 0.22), 0 0 30px rgba(128, 214, 189, 0.16);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.station-dossier-button {
  appearance: none;
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 42;
  display: grid;
  gap: 4px;
  min-width: 158px;
  min-height: 58px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  color: rgba(248, 238, 214, 0.96);
  text-align: left;
  background:
    radial-gradient(ellipse at 42% 48%, rgba(6, 16, 15, 0.9), rgba(0, 0, 0, 0.42) 58%, transparent 82%);
  box-shadow:
    inset 0 0 18px rgba(128, 214, 189, 0.12),
    0 0 28px rgba(128, 214, 189, 0.14);
  cursor: pointer;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 220ms ease;
  touch-action: manipulation;
}

.station-dossier-button::before {
  content: "";
  position: absolute;
  inset: -16px -20px;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 56%, rgba(128, 214, 189, 0.2), rgba(128, 214, 189, 0.06) 46%, transparent 76%),
    radial-gradient(ellipse at 34% 50%, rgba(232, 177, 95, 0.14), transparent 58%);
  filter: blur(12px);
  animation: smoke-drift 7s ease-in-out infinite;
}

.station-dossier-button span,
.station-dossier-kicker {
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(128, 214, 189, 0.82);
}

.station-dossier-button strong {
  font-size: 0.9rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.is-awake .station-dossier-button,
.has-started .station-dossier-button,
.is-quiz-open .station-dossier-button,
.has-intro-veil .station-dossier-button {
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
}

@media (max-width: 700px), (pointer: coarse) {
  .station-dossier-button {
    top: max(12px, env(safe-area-inset-top));
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: auto;
    z-index: 120;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    text-align: center;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .station-dossier-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .station-dossier-button strong {
    position: static;
    display: grid;
    place-items: center;
    font-size: 0;
    line-height: 1;
  }

  .station-dossier-button strong::before {
    content: "333";
    font-size: 0.8rem;
    letter-spacing: 0.08em;
  }

  .has-archive-open .station-dossier-button,
  .has-crime-scene-open .station-dossier-button,
  .has-crime-photo-lightbox .station-dossier-button,
  .has-ringtone-bonus .station-dossier-button,
  .has-vault-prize .station-dossier-button,
  .has-video-apparition .station-dossier-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .has-intro-veil .station-dossier-button {
    opacity: 0;
    pointer-events: none;
  }
}

.station-dossier {
  position: fixed;
  inset: 0;
  z-index: 78;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(128, 214, 189, 0.11), transparent 34%),
    radial-gradient(circle at 50% 64%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.9) 64%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.station-dossier[aria-hidden="true"] {
  visibility: hidden;
}

.has-station-dossier .station-dossier {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.station-dossier-smoke {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(88vw, 470px);
  padding: 30px 26px;
  color: rgba(248, 238, 214, 0.96);
  text-align: center;
  isolation: isolate;
}

.station-dossier-smoke::before {
  content: "";
  position: absolute;
  inset: -48px -38px;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(2, 7, 7, 0.95), rgba(2, 7, 7, 0.66) 42%, rgba(128, 214, 189, 0.16) 66%, transparent 80%),
    radial-gradient(ellipse at 58% 62%, rgba(232, 177, 95, 0.16), transparent 50%);
  filter: blur(16px);
  animation: smoke-drift 6.8s ease-in-out infinite;
}

.station-dossier-smoke strong {
  font-size: clamp(1.5rem, 8vw, 2.75rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.station-dossier-smoke p,
.station-dossier-smoke small {
  max-width: 36rem;
  margin: 0 auto;
  color: rgba(248, 238, 214, 0.84);
  line-height: 1.45;
}

.station-dossier-smoke small {
  color: rgba(128, 214, 189, 0.82);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.station-dossier-close {
  appearance: none;
  position: absolute;
  top: -8px;
  right: 10px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: rgba(248, 238, 214, 0.95);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 236, 173, 0.22), rgba(132, 19, 17, 0.5) 58%, rgba(12, 4, 3, 0.88));
  box-shadow: inset 0 0 14px rgba(255, 238, 177, 0.18), 0 0 20px rgba(128, 214, 189, 0.12);
  cursor: pointer;
}

.ringtone-bonus-button {
  appearance: none;
  display: inline-grid;
  place-items: center;
  justify-self: center;
  min-height: 44px;
  margin-top: 2px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: rgba(3, 5, 4, 0.96);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 246, 184, 0.94), rgba(232, 177, 95, 0.82) 58%, rgba(128, 214, 189, 0.68));
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, 0.3),
    0 0 24px rgba(232, 177, 95, 0.22),
    0 0 46px rgba(128, 214, 189, 0.14);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.ringtone-bonus {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(128, 214, 189, 0.22), transparent 34%),
    radial-gradient(circle at 50% 62%, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.96) 66%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.has-ringtone-bonus .ringtone-bonus,
.ringtone-bonus[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ringtone-bonus-smoke {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(88vw, 480px);
  padding: 32px 24px;
  color: rgba(248, 238, 214, 0.96);
  text-align: center;
  isolation: isolate;
  opacity: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.88);
}

.ringtone-bonus-smoke::before {
  content: "";
  position: absolute;
  inset: -44px -34px;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(2, 7, 7, 0.96), rgba(2, 7, 7, 0.68) 42%, rgba(128, 214, 189, 0.23) 66%, transparent 82%),
    radial-gradient(ellipse at 52% 66%, rgba(232, 177, 95, 0.24), transparent 48%);
  filter: blur(15px);
  animation: smoke-drift 6.4s ease-in-out infinite;
}

.ringtone-bonus-smoke span {
  color: rgba(128, 214, 189, 0.82);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ringtone-bonus-smoke strong {
  font-size: clamp(2rem, 10vw, 3.8rem);
  line-height: 0.88;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(244, 240, 230, 0.26);
}

.ringtone-bonus-smoke p,
.ringtone-bonus-smoke small {
  max-width: 34rem;
  margin: 0 auto;
  color: rgba(248, 238, 214, 0.84);
  line-height: 1.45;
}

.ringtone-demo-frame {
  width: min(100%, 260px);
  aspect-ratio: 320 / 692;
  min-height: 462px;
  margin: 4px auto 0;
  padding: 0;
  border: 0;
  border-radius: 28px;
  overflow: hidden;
  background:
    url("assets/evp-ringtone-demo.gif?v=4") center / cover no-repeat,
    rgba(0, 0, 0, 0.42);
  box-shadow:
    0 0 28px rgba(128, 214, 189, 0.18),
    0 18px 42px rgba(0, 0, 0, 0.44);
}

.ringtone-demo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 462px;
  object-fit: cover;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(128, 214, 189, 0.18), transparent 56%),
    rgba(0, 0, 0, 0.72);
}

.ringtone-demo-frame img.is-media-missing {
  min-height: 220px;
}

.ringtone-demo-frame img.is-frame-fallback {
  image-rendering: auto;
}

.ringtone-phone-guide {
  display: none;
}

.ringtone-bonus-smoke small {
  color: rgba(128, 214, 189, 0.82);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ringtone-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.ringtone-bonus-close,
.ringtone-actions button,
.ringtone-actions a,
#vaultRingtoneOpen {
  appearance: none;
  border: 0;
  border-radius: 999px;
  color: rgba(248, 238, 214, 0.96);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 236, 173, 0.2), rgba(18, 5, 4, 0.86) 70%),
    rgba(0, 0, 0, 0.72);
  box-shadow: inset 0 0 14px rgba(128, 214, 189, 0.18), 0 0 28px rgba(0, 0, 0, 0.54);
  cursor: pointer;
  text-decoration: none;
}

.ringtone-bonus-close {
  position: absolute;
  right: 12px;
  top: 8px;
  width: 40px;
  height: 40px;
}

.ringtone-actions button,
.ringtone-actions a,
#vaultRingtoneOpen {
  display: inline-grid;
  place-items: center;
  min-height: 46px;
  padding: 0 18px;
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ringtone-actions button,
.ringtone-primary-link {
  color: rgba(3, 5, 4, 0.96);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 246, 184, 0.94), rgba(232, 177, 95, 0.88) 58%, rgba(128, 214, 189, 0.76));
}

@media (max-width: 700px), (pointer: coarse) {
  .ringtone-bonus {
    place-items: stretch center;
    align-content: center;
    padding:
      max(14px, env(safe-area-inset-top))
      14px
      max(18px, env(safe-area-inset-bottom));
  }

  .ringtone-bonus-smoke {
    width: min(92vw, 390px);
    max-height: calc(100dvh - 48px);
    padding: 34px 20px 28px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(ellipse at 50% 44%, rgba(1, 5, 5, 0.96), rgba(1, 5, 5, 0.78) 58%, rgba(128, 214, 189, 0.18) 82%, transparent 100%);
    border-radius: 34px;
    box-shadow:
      0 0 40px rgba(128, 214, 189, 0.18),
      0 0 90px rgba(0, 0, 0, 0.72);
  }

  .ringtone-bonus-smoke strong {
    font-size: clamp(2.1rem, 15vw, 3.25rem);
    color: rgba(248, 238, 214, 0.98);
  }

  .ringtone-bonus-smoke p {
    color: rgba(248, 238, 214, 0.94);
    font-size: 0.94rem;
    line-height: 1.38;
  }

  .ringtone-actions {
    display: grid;
    width: 100%;
  }

  .ringtone-actions button,
  .ringtone-actions a {
    width: min(100%, 310px);
    justify-self: center;
  }

  .ringtone-demo-frame {
    width: min(82vw, 330px);
    aspect-ratio: auto;
    min-height: 0;
    padding: 0;
    background:
      radial-gradient(ellipse at 50% 20%, rgba(128, 214, 189, 0.16), transparent 54%),
      rgba(0, 0, 0, 0.62);
  }

  .ringtone-demo-frame img {
    display: none;
    min-height: 0;
  }

  .ringtone-phone-guide {
    display: block;
    width: 100%;
    max-height: min(56dvh, 560px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(0, 0, 0, 0.9);
  }

  .ringtone-phone-guide img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
  }
}

.experience-panel {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(92vw, 420px);
  margin: 10px auto 0;
}

.daily-signal-card,
.tape-archive-card,
.leader-card {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 999px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(6, 16, 15, 0.86), rgba(0, 0, 0, 0.34) 62%, transparent 80%);
  box-shadow: inset 0 0 18px rgba(128, 214, 189, 0.08), 0 0 18px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.daily-signal-card::before,
.tape-archive-card::before,
.leader-card::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 50%, rgba(128, 214, 189, 0.18), transparent 68%);
  filter: blur(12px);
  opacity: 0.7;
}

.daily-signal-card strong,
.tape-archive-card strong,
.leader-card strong {
  overflow: hidden;
  font-size: clamp(0.68rem, 2.4vw, 0.86rem);
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.daily-signal-card.is-live-now {
  animation: reward-pulse 1.7s ease-in-out infinite;
}

.archive-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: end center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.44);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.archive-drawer[aria-hidden="true"] {
  visibility: hidden;
}

.has-archive-open .archive-drawer {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.archive-smoke {
  position: relative;
  width: min(92vw, 520px);
  max-height: min(72dvh, 560px);
  padding: 24px 20px 20px;
  color: rgba(248, 238, 214, 0.96);
  isolation: isolate;
}

.archive-smoke::before {
  content: "";
  position: absolute;
  inset: -28px -24px;
  z-index: -1;
  border-radius: 48px;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(128, 214, 189, 0.16), transparent 44%),
    radial-gradient(ellipse at 50% 54%, rgba(2, 7, 7, 0.94), rgba(2, 7, 7, 0.6) 52%, transparent 78%);
  filter: blur(10px);
}

.archive-smoke > strong {
  display: block;
  margin-right: 42px;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.archive-close {
  position: absolute;
  right: 16px;
  top: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.36);
  box-shadow: inset 0 0 12px rgba(128, 214, 189, 0.12);
}

.archive-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 44dvh;
  margin-top: 14px;
  overflow: auto;
  padding: 4px;
}

.archive-tape {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(7, 15, 14, 0.76);
  box-shadow: inset 0 0 14px rgba(128, 214, 189, 0.1);
  font-size: 0.72rem;
  line-height: 1.15;
  text-align: left;
}

.archive-tape.is-missing {
  color: rgba(248, 238, 214, 0.34);
  cursor: default;
}

.archive-tape.is-found {
  color: rgba(248, 238, 214, 0.94);
}

.vault-prize {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 44%, rgba(128, 214, 189, 0.18), transparent 34%),
    radial-gradient(circle at 50% 58%, rgba(183, 83, 80, 0.14), rgba(0, 0, 0, 0.9) 68%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.has-vault-prize .vault-prize,
.vault-prize[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.vault-prize-smoke {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(88vw, 460px);
  padding: 32px 24px;
  color: rgba(248, 238, 214, 0.96);
  text-align: center;
  isolation: isolate;
  pointer-events: auto;
}

.vault-prize-smoke::before {
  content: "";
  position: absolute;
  inset: -44px -34px;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(2, 7, 7, 0.96), rgba(2, 7, 7, 0.68) 42%, rgba(128, 214, 189, 0.24) 64%, transparent 80%),
    radial-gradient(ellipse at 52% 66%, rgba(232, 177, 95, 0.24), transparent 48%);
  filter: blur(15px);
  animation: smoke-drift 6s ease-in-out infinite;
}

.vault-prize-smoke span {
  color: rgba(128, 214, 189, 0.82);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.vault-prize-smoke strong {
  font-size: clamp(2rem, 11vw, 4rem);
  line-height: 0.86;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(244, 240, 230, 0.3);
}

.vault-prize-smoke p {
  max-width: 34ch;
  margin: 0 auto;
  color: rgba(248, 238, 214, 0.82);
}

.vault-close,
.vault-prize-smoke button,
.vault-prize-smoke a {
  appearance: none;
  border: 0;
  border-radius: 999px;
  color: rgba(248, 238, 214, 0.96);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 236, 173, 0.2), rgba(18, 5, 4, 0.86) 70%),
    rgba(0, 0, 0, 0.72);
  box-shadow: inset 0 0 14px rgba(128, 214, 189, 0.18), 0 0 28px rgba(0, 0, 0, 0.54);
  cursor: pointer;
  text-decoration: none;
}

.vault-close {
  position: absolute;
  right: 12px;
  top: 8px;
  width: 40px;
  height: 40px;
}

#vaultArchiveOpen {
  justify-self: center;
  min-height: 46px;
  padding: 0 20px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#vaultPrizeLink {
  justify-self: center;
  display: inline-grid;
  place-items: center;
  min-height: 52px;
  padding: 0 24px;
  color: rgba(3, 5, 4, 0.96);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 246, 184, 0.94), rgba(232, 177, 95, 0.88) 58%, rgba(128, 214, 189, 0.76));
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.36),
    0 0 34px rgba(232, 177, 95, 0.32),
    0 0 70px rgba(128, 214, 189, 0.22);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@keyframes smoke-drift {
  0%, 100% {
    transform: translate3d(-1%, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(1%, -2%, 0) scale(1.04);
  }
}

@media (max-width: 700px), (pointer: coarse) {
  .vault-prize {
    place-items: stretch center !important;
    align-content: center !important;
    padding:
      max(14px, env(safe-area-inset-top))
      14px
      max(92px, calc(env(safe-area-inset-bottom) + 92px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .vault-prize-smoke {
    width: min(92vw, 390px) !important;
    max-height: calc(100dvh - 124px) !important;
    padding: 24px 18px 96px !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .vault-prize-smoke strong {
    font-size: clamp(2rem, 15vw, 3.35rem) !important;
  }

  .vault-prize-smoke p {
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
  }

  .has-vault-prize #vaultPrizeLink,
  .vault-prize[aria-hidden="false"] #vaultPrizeLink {
    position: fixed !important;
    left: max(16px, env(safe-area-inset-left)) !important;
    right: max(16px, env(safe-area-inset-right)) !important;
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px)) !important;
    z-index: 220 !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 62px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: clamp(0.86rem, 4vw, 1rem) !important;
    line-height: 1.05 !important;
    text-align: center !important;
    pointer-events: auto !important;
  }

  #vaultArchiveOpen {
    margin-bottom: 10px !important;
  }

  .experience-panel {
    grid-template-columns: 1fr;
    gap: 4px;
    width: min(88vw, 330px);
    margin-top: 6px;
  }

  .daily-signal-card,
  .tape-archive-card,
  .leader-card {
    min-height: 42px;
    padding: 7px 12px;
  }

  .daily-signal-card strong,
  .tape-archive-card strong,
  .leader-card strong {
    font-size: 0.68rem;
  }

  .archive-list {
    grid-template-columns: 1fr;
  }
}

/* Final composition lock: keep the radio centered in embeds and on phones. */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  touch-action: pan-y manipulation !important;
  overscroll-behavior: none !important;
  -webkit-text-size-adjust: 100% !important;
}

.station-title {
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  margin-inline: auto !important;
  text-align: center !important;
  transform: none !important;
}

.haunted-room {
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-inline: auto !important;
  justify-items: center !important;
}

.radio-console,
.experience-panel,
.signal-readout,
.game-panel {
  margin-left: auto !important;
  margin-right: auto !important;
}

.experience-panel {
  position: fixed !important;
  left: 50% !important;
  top: clamp(78px, 13dvh, 124px) !important;
  z-index: 44 !important;
  width: min(88vw, 420px) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}

@media (min-width: 561px) {
  .haunted-room {
    display: grid !important;
    place-items: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .radio-console {
    width: min(92vw, 430px) !important;
    transform-origin: center center !important;
  }
}

@media (max-width: 560px) {
  .station-title {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    z-index: 45 !important;
  }

  .haunted-room {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .radio-console {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: clamp(186px, 31dvh, 240px) !important;
    width: min(90vw, 330px) !important;
    margin: 0 auto !important;
    transform: none !important;
    transform-origin: top center !important;
  }

  .experience-panel {
    top: max(70px, calc(env(safe-area-inset-top) + 62px)) !important;
    width: min(92vw, 360px) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .experience-panel .daily-signal-card,
  .experience-panel .tape-archive-card {
    min-height: 34px !important;
    padding: 4px 6px !important;
  }

  .experience-panel span {
    font-size: 0.48rem !important;
    letter-spacing: 0.08em !important;
  }

  .experience-panel strong {
    font-size: 0.54rem !important;
    line-height: 1 !important;
  }

  .quiz-lightbox {
    left: 50% !important;
    right: auto !important;
    width: min(92vw, 360px) !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-height: 720px) and (max-width: 560px) {
  .radio-console {
    top: clamp(150px, 28dvh, 186px) !important;
    width: min(82vw, 292px) !important;
  }
}

/* Desktop archive replay: recovered tapes open inside a smoke lightbox. */
@media (min-width: 700px) {
  .has-archive-video-lightbox .video-apparition {
    background:
      radial-gradient(ellipse at 50% 48%, rgba(128, 214, 189, 0.2), transparent 0 34%, rgba(0, 0, 0, 0.8) 78%),
      radial-gradient(ellipse at 18% 72%, rgba(232, 177, 95, 0.1), transparent 38%),
      radial-gradient(ellipse at 80% 28%, rgba(183, 83, 80, 0.12), transparent 36%),
      repeating-linear-gradient(0deg, rgba(244, 240, 230, 0.055) 0 1px, transparent 1px 4px);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .has-archive-video-lightbox .apparition-shell {
    width: min(82vw, 880px);
    aspect-ratio: 16 / 9;
    filter:
      drop-shadow(0 0 46px rgba(128, 214, 189, 0.46))
      drop-shadow(0 44px 110px rgba(0, 0, 0, 0.96));
  }

  .has-archive-video-lightbox .apparition-shell::before {
    inset: -72px;
    opacity: 0.96;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(2, 8, 8, 0.98), rgba(2, 8, 8, 0.62) 43%, rgba(128, 214, 189, 0.2) 67%, transparent 82%),
      radial-gradient(ellipse at 20% 58%, rgba(232, 177, 95, 0.14), transparent 36%),
      radial-gradient(ellipse at 78% 38%, rgba(183, 83, 80, 0.16), transparent 40%);
    filter: blur(22px);
  }

  .has-archive-video-lightbox .apparition-screen {
    border-radius: 999px;
    box-shadow:
      inset 0 0 0 1px rgba(244, 240, 230, 0.08),
      inset 0 0 44px rgba(0, 0, 0, 0.82);
    mask-image: radial-gradient(ellipse at 50% 50%, #000 0 72%, rgba(0, 0, 0, 0.78) 82%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 72%, rgba(0, 0, 0, 0.78) 82%, transparent 100%);
  }

  .has-archive-video-lightbox .apparition-screen iframe {
    filter: grayscale(0.22) contrast(1.22) brightness(0.82);
    transform: scale(1.01);
  }

  .has-archive-video-lightbox .apparition-title {
    bottom: -24px;
    max-width: min(74vw, 720px);
    font-size: clamp(0.72rem, 1.15vw, 1rem);
    letter-spacing: 0.16em;
  }
}

.has-archive-video-lightbox .video-apparition {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.has-archive-video-lightbox .apparition-shell {
  width: min(88vw, 880px);
  aspect-ratio: 16 / 9;
}

.has-archive-video-lightbox .apparition-screen {
  border-radius: 999px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 72%, rgba(0, 0, 0, 0.78) 82%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 72%, rgba(0, 0, 0, 0.78) 82%, transparent 100%);
}

/* Mobile app composition: make the live site match the approved iOS preview. */
@media (max-width: 700px), (pointer: coarse) {
  html,
  body {
    overflow: hidden !important;
    background: #000 !important;
  }

  body {
    background:
      radial-gradient(ellipse at 50% 20%, rgba(142, 228, 206, 0.16), transparent 34%),
      radial-gradient(ellipse at 50% 62%, rgba(113, 55, 43, 0.16), transparent 40%),
      linear-gradient(180deg, #010202, #06100d 42%, #000 100%) !important;
  }

  .video-background,
  .intro-veil,
  .top-strip,
  .signal-readout,
  .game-panel,
  .marquee-window,
  .signal-meter,
  .radio-handle,
  .stage-light,
  .magic-dust {
    display: none !important;
  }

  body.has-intro-veil {
    overflow: hidden !important;
  }

  .station-title {
    position: fixed !important;
    inset: max(8px, env(safe-area-inset-top)) 0 auto 0 !important;
    z-index: 45 !important;
    width: 100vw !important;
    height: clamp(78px, 14dvh, 112px) !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  .station-title::before,
  .station-title::after {
    content: "" !important;
    position: absolute !important;
    left: 9% !important;
    right: 9% !important;
    top: 18px !important;
    height: 86px !important;
    border-radius: 999px !important;
    background:
      radial-gradient(ellipse at 50% 48%, rgba(142, 228, 206, 0.22), rgba(246, 236, 212, 0.07) 44%, transparent 72%),
      radial-gradient(ellipse at 28% 58%, rgba(217, 170, 100, 0.12), transparent 48%) !important;
    filter: blur(24px) !important;
    opacity: 0.68 !important;
    animation: room-smoke-roll 7s ease-in-out infinite !important;
  }

  .station-title::after {
    top: 42px !important;
    opacity: 0.28 !important;
    animation-duration: 9s !important;
  }

  .station-title-copy {
    width: min(92vw, 390px) !important;
    max-width: 92vw !important;
    color: rgba(247, 236, 210, 0.82) !important;
    font-size: clamp(2.1rem, 13vw, 4.2rem) !important;
    line-height: 0.72 !important;
    letter-spacing: 0 !important;
    text-shadow:
      0 0 18px rgba(142, 228, 206, 0.32),
      0 9px 20px rgba(0, 0, 0, 0.9) !important;
    opacity: 0.82 !important;
  }

  .haunted-room {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: block !important;
    padding: 0 !important;
    background:
      radial-gradient(ellipse at 50% 20%, rgba(142, 228, 206, 0.16), transparent 34%),
      radial-gradient(ellipse at 50% 62%, rgba(113, 55, 43, 0.16), transparent 40%),
      linear-gradient(180deg, #010202, #06100d 42%, #000 100%) !important;
  }

  .haunted-room::before {
    content: "" !important;
    position: absolute !important;
    inset: 18% -38% auto !important;
    height: 54% !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    background:
      radial-gradient(ellipse at 52% 45%, rgba(142, 228, 206, 0.22), transparent 62%),
      radial-gradient(ellipse at 40% 64%, rgba(246, 236, 212, 0.08), transparent 58%) !important;
    filter: blur(26px) !important;
    opacity: 0.75 !important;
    animation: room-smoke-drift 9s ease-in-out infinite !important;
  }

  .haunted-room::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
    pointer-events: none !important;
    opacity: 0.34 !important;
    background:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 4px),
      linear-gradient(90deg, rgba(201, 67, 62, 0.06), transparent 22%, rgba(142, 228, 206, 0.05) 82%, transparent) !important;
    mix-blend-mode: screen !important;
  }

  .radio-console {
    position: fixed !important;
    left: 50% !important;
    top: clamp(108px, 18dvh, 138px) !important;
    z-index: 5 !important;
    width: min(100vw, 430px) !important;
    height: clamp(250px, 43dvh, 375px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    transform: translateX(-50%) !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .radio-console::before,
  .radio-console::after {
    display: none !important;
  }

  .smoke {
    display: block !important;
    position: absolute !important;
    pointer-events: none !important;
    border-radius: 999px !important;
    filter: blur(24px) !important;
    opacity: 0.45 !important;
    background:
      radial-gradient(ellipse at 50% 48%, rgba(142, 228, 206, 0.22), rgba(246, 236, 212, 0.07) 44%, transparent 72%),
      radial-gradient(ellipse at 28% 58%, rgba(217, 170, 100, 0.12), transparent 48%) !important;
    animation: room-smoke-roll 9s ease-in-out infinite !important;
  }

  .smoke-one {
    inset: 12% -26% auto !important;
    height: 58% !important;
  }

  .smoke-two,
  .smoke-three {
    display: none !important;
  }

  .radio-face,
  .is-quiz-open .radio-face,
  body:not(.is-awake) .radio-face,
  .is-correct .radio-face,
  .is-wrong .radio-face,
  .is-surge .radio-face,
  .is-static-hold .radio-face,
  .is-haunt-flicker .radio-face,
  .is-haunt-twitch .radio-face,
  .is-scare-event .radio-face,
  .is-dial-unlocked .radio-face,
  .is-haptic-hit .radio-face {
    position: relative !important;
    width: min(88vw, 365px) !important;
    max-width: 365px !important;
    height: min(84%, 318px) !important;
    min-height: 266px !important;
    margin: 0 !important;
    border-radius: 38px !important;
    border: 2px solid rgba(247, 236, 210, 0.2) !important;
    background:
      radial-gradient(circle at 50% 38%, rgba(142, 228, 206, 0.09), transparent 34%),
      linear-gradient(145deg, #3a2115, #1a0f0b 54%, #060403) !important;
    box-shadow:
      inset 0 0 0 10px rgba(0, 0, 0, 0.16),
      inset 0 -28px 48px rgba(0, 0, 0, 0.46),
      0 26px 80px rgba(0, 0, 0, 0.86) !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }

  .is-correct .radio-console,
  .is-wrong .radio-console,
  .is-surge .radio-console,
  .is-scare-event .radio-console,
  .is-haunt-flicker .radio-console,
  .is-haunt-twitch .radio-console,
  .is-static-hold .radio-console,
  .is-dial-unlocked .radio-console,
  .is-haptic-hit .radio-console {
    left: 50% !important;
    transform: translateX(-50%) !important;
    animation: none !important;
  }

  .is-correct .dial-window,
  .is-wrong .dial-window,
  .is-surge .dial-window,
  .is-haunt-flicker .dial-window,
  .is-haunt-signal .dial-window,
  .is-static-hold .dial-window,
  .is-scare-event .dial-window,
  .is-dial-unlocked .dial-window {
    left: 50% !important;
    transform: translateX(-50%) !important;
    animation: none !important;
  }

  .radio-face:active {
    transform: none !important;
  }

  .radio-face::before {
    inset: 14px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(247, 236, 210, 0.08) !important;
    background: transparent !important;
    opacity: 1 !important;
  }

  .radio-face::after {
    left: 8% !important;
    right: 8% !important;
    top: 18px !important;
    bottom: auto !important;
    height: 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(247, 236, 210, 0.22), transparent) !important;
    opacity: 0.4 !important;
  }

  body:not(.has-started):not(.is-awake) .radio-console > *:not(.radio-face),
  body:not(.has-started):not(.is-awake) .radio-face > *:not(.power-switch) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .radio-brand-wordmark {
    left: 28px !important;
    top: 28px !important;
    z-index: 8 !important;
    color: rgba(247, 236, 210, 0.9) !important;
    font-size: clamp(1.04rem, 5.4vw, 1.38rem) !important;
    line-height: 0.78 !important;
    transform: rotate(-2deg) !important;
    text-shadow: 0 0 14px rgba(247, 236, 210, 0.25) !important;
    opacity: 1 !important;
  }

  .power-switch,
  .is-awake .power-switch,
  .is-dial-unlocked.is-awake .power-switch {
    right: 22px !important;
    top: 20px !important;
    left: auto !important;
    z-index: 18 !important;
    width: 112px !important;
    min-width: 112px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    color: #d9aa64 !important;
    background:
      radial-gradient(circle at 32% 35%, rgba(247, 236, 210, 0.14), transparent 28%),
      linear-gradient(180deg, #160d09, #050302) !important;
    border: 1px solid rgba(217, 170, 100, 0.38) !important;
    box-shadow:
      inset 0 0 28px rgba(0, 0, 0, 0.8),
      0 0 20px rgba(0, 0, 0, 0.58) !important;
  }

  .is-awake .power-switch {
    color: #04100c !important;
    background: linear-gradient(90deg, #d9aa64, #8ee4ce) !important;
    box-shadow: 0 0 32px rgba(142, 228, 206, 0.35) !important;
  }

  .switch-light,
  .power-switch::before,
  .power-switch::after {
    display: none !important;
  }

  .switch-label {
    color: currentColor !important;
    font-size: 0.72rem !important;
    font-weight: 1000 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
  }

  .speaker {
    top: 30% !important;
    width: clamp(54px, 17vw, 64px) !important;
    height: clamp(110px, 33vw, 128px) !important;
    border-radius: 999px !important;
    opacity: 0.72 !important;
    background:
      repeating-linear-gradient(90deg, rgba(247, 236, 210, 0.24) 0 2px, transparent 2px 8px),
      radial-gradient(circle, #110907, #020101) !important;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.9) !important;
  }

  .speaker-left {
    left: 20px !important;
  }

  .speaker-right {
    right: 20px !important;
  }

  .dial-window {
    left: 50% !important;
    top: 24% !important;
    width: min(49%, 178px) !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    transform: translateX(-50%) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(247, 236, 210, 0.12) !important;
    overflow: hidden !important;
    background: #000 !important;
    box-shadow:
      inset 0 0 36px #000,
      0 0 38px rgba(142, 228, 206, 0.12) !important;
    opacity: 1 !important;
  }

  .dial-scale {
    inset: 0 !important;
    background:
      repeating-conic-gradient(from -20deg, rgba(247, 236, 210, 0.26) 0 1deg, transparent 1deg 10deg),
      radial-gradient(circle, transparent 0 58%, rgba(0, 0, 0, 0.62) 66%, #000 100%) !important;
    opacity: 0.58 !important;
  }

  #scope {
    inset: -8% !important;
    width: 116% !important;
    height: 116% !important;
    opacity: 0.45 !important;
    filter: contrast(1.24) saturate(0.82) !important;
  }

  .glass-glow {
    opacity: 0.2 !important;
  }

  .needle {
    z-index: 8 !important;
    width: 4px !important;
    height: 44% !important;
    border-radius: 999px !important;
    background: #c9433e !important;
    transform-origin: bottom center !important;
    transform: rotate(-35deg) !important;
    box-shadow: 0 0 16px #c9433e !important;
  }

  .is-awake .needle {
    animation: mobile-tune-twitch 2.8s ease-in-out infinite !important;
  }

  .dial-center {
    z-index: 9 !important;
    inset: auto 0 24% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    text-align: center !important;
  }

  .dial-center::before,
  .dial-center::after {
    display: none !important;
  }

  .dial-center strong {
    display: block !important;
    color: #f7ecd2 !important;
    font-size: clamp(1.42rem, 7vw, 1.85rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-shadow: 0 0 14px rgba(247, 236, 210, 0.44) !important;
  }

  .dial-center strong {
    font-size: 0 !important;
  }

  .dial-center strong::before {
    content: "3:33" !important;
    display: block !important;
    color: #f7ecd2 !important;
    font-size: clamp(1.42rem, 7vw, 1.85rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-shadow: 0 0 14px rgba(247, 236, 210, 0.44) !important;
  }

  .dial-center small {
    display: block !important;
    margin-top: 1px !important;
    color: #8ee4ce !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.28em !important;
  }

  .dial-center small {
    font-size: 0 !important;
  }

  .dial-center small::before {
    content: "AM" !important;
    display: block !important;
    color: #8ee4ce !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.28em !important;
  }

  .tuning-window {
    left: 50% !important;
    bottom: 8.5% !important;
    top: auto !important;
    width: min(50%, 180px) !important;
    height: 28px !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(90deg, transparent, rgba(142, 228, 206, 0.2), transparent),
      repeating-linear-gradient(90deg, rgba(247, 236, 210, 0.2) 0 1px, transparent 1px 12px),
      rgba(0, 0, 0, 0.46) !important;
    opacity: 1 !important;
  }

  .tuning-window span {
    opacity: 0 !important;
  }

  .video-clue,
  .is-dial-unlocked .video-clue,
  .escaped-transmissions .video-clue {
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    background:
      radial-gradient(circle, #f7ecd2 0 10%, rgba(142, 228, 206, 0.9) 16%, rgba(142, 228, 206, 0.24) 42%, transparent 74%),
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0 1px, transparent 1px 3px) !important;
    box-shadow: 0 0 26px rgba(142, 228, 206, 0.72) !important;
    animation: unlocked-transmission-float 4.4s ease-in-out infinite, clue-static 420ms steps(2) infinite !important;
    opacity: 0.22 !important;
    filter: grayscale(1) !important;
  }

  .video-clue.is-target,
  .video-clue.is-unlocked,
  .is-dial-unlocked .video-clue.is-target,
  .escaped-transmissions .video-clue.is-target {
    width: 54px !important;
    height: 54px !important;
    background: radial-gradient(circle, #fff 0 12%, #d9aa64 18%, rgba(201, 67, 62, 0.4) 52%, transparent 78%) !important;
    box-shadow: 0 0 38px rgba(217, 170, 100, 0.88) !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .video-clue::before,
  .video-clue::after {
    opacity: 0 !important;
  }

  .is-dial-unlocked .reward-listen-button {
    position: absolute !important;
    inset: 0 !important;
    z-index: 30 !important;
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    background: radial-gradient(circle, rgba(217, 170, 100, 0.42) 0 16%, rgba(201, 67, 62, 0.18) 28%, transparent 56%) !important;
  }

  .is-dial-unlocked .reward-listen-button strong {
    width: 58px !important;
    height: 58px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: transparent !important;
    background: radial-gradient(circle, #fff 0 10%, #d9aa64 18%, rgba(201, 67, 62, 0.42) 58%, transparent 78%) !important;
    box-shadow: 0 0 44px rgba(217, 170, 100, 0.95) !important;
  }

  .is-dial-unlocked .reward-listen-button small {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 24% !important;
    color: #f7ecd2 !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.18em !important;
  }

  .has-mobile-reward-lightbox .video-apparition {
    z-index: 220 !important;
    background:
      radial-gradient(ellipse at 50% 48%, rgba(142, 228, 206, 0.2), transparent 0 34%, rgba(0, 0, 0, 0.84) 78%),
      repeating-linear-gradient(0deg, rgba(247, 236, 210, 0.055) 0 1px, transparent 1px 4px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .has-mobile-reward-lightbox .apparition-shell {
    width: min(94vw, 390px) !important;
    aspect-ratio: 16 / 11 !important;
    filter:
      drop-shadow(0 0 46px rgba(142, 228, 206, 0.46))
      drop-shadow(0 44px 110px rgba(0, 0, 0, 0.96)) !important;
  }

  .has-mobile-reward-lightbox .apparition-screen {
    border-radius: 999px !important;
    aspect-ratio: 16 / 9 !important;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 0 72%, rgba(0, 0, 0, 0.78) 82%, transparent 100%) !important;
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 72%, rgba(0, 0, 0, 0.78) 82%, transparent 100%) !important;
  }

  .has-mobile-reward-lightbox .apparition-screen iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    transform: scale(1.01) !important;
  }

  .has-mobile-reward-lightbox .apparition-title {
    bottom: -24px !important;
    max-width: 88vw !important;
    font-size: 0.72rem !important;
  }

  .quiz-lightbox {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: clamp(430px, 55dvh, 470px) !important;
    z-index: 12 !important;
    width: min(92vw, 390px) !important;
    transform: translateX(-50%) !important;
    display: grid !important;
    gap: 7px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .is-quiz-open .quiz-lightbox {
    pointer-events: auto !important;
  }

  .quiz-lightbox .mission-card {
    min-height: 30px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 !important;
    color: #8ee4ce !important;
    font-size: 0.62rem !important;
    font-weight: 1000 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
  }

  .quiz-lightbox .mission-card strong {
    display: none !important;
  }

  .quiz-lightbox .mission-card span:not(.mission-pips) {
    display: block !important;
    flex: 1 !important;
  }

  .mission-pips {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .mission-pips i {
    width: 15px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(247, 236, 210, 0.18) !important;
  }

  .mission-pips i.is-lit,
  .mission-pips i:nth-child(1) {
    background: #8ee4ce !important;
  }

  .quiz-lightbox .question-card {
    min-height: 78px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    background: transparent !important;
  }

  .quiz-lightbox .question-card #quizQuestion {
    display: block !important;
  }

  .quiz-lightbox .quiz-id {
    display: block !important;
    margin-bottom: 8px !important;
    color: #8ee4ce !important;
    font-size: 0.64rem !important;
    font-weight: 1000 !important;
    letter-spacing: 0.22em !important;
  }

  .quiz-lightbox .quiz-prompt {
    display: block !important;
    color: #f7ecd2 !important;
    font-size: clamp(0.96rem, 4.8vw, 1.18rem) !important;
    line-height: 1.18 !important;
    font-weight: 1000 !important;
    text-shadow: 0 0 18px rgba(0, 0, 0, 0.9) !important;
  }

  .quiz-lightbox .quiz-panel {
    padding: 0 !important;
    background: transparent !important;
  }

  .quiz-lightbox .quiz-answers {
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .quiz-lightbox .quiz-answers button,
  .radio-face .quiz-lightbox .quiz-answers button {
    position: relative !important;
    min-height: 42px !important;
    padding: 8px 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #f7ecd2 !important;
    box-shadow: none !important;
    font-size: 0.8rem !important;
    font-weight: 1000 !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    pointer-events: auto !important;
  }

  .quiz-lightbox .mission-card::before,
  .quiz-lightbox .question-card::before,
  .quiz-lightbox .quiz-answers button::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    inset: -16px -20px !important;
    border-radius: 999px !important;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.82), rgba(3, 14, 12, 0.42) 48%, rgba(142, 228, 206, 0.15) 68%, transparent 84%) !important;
    filter: blur(11px) !important;
    pointer-events: none !important;
    opacity: 1 !important;
    animation: room-smoke-roll 7s ease-in-out infinite !important;
  }

  .quiz-lightbox .mission-card::after,
  .quiz-lightbox .question-card::after {
    display: none !important;
  }

  .experience-panel {
    position: fixed !important;
    z-index: 18 !important;
    left: 20px !important;
    right: 20px !important;
    top: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    transform: none !important;
    margin: 0 !important;
  }

  .experience-panel .daily-signal-card,
  .experience-panel .tape-archive-card {
    min-height: 38px !important;
    border-radius: 999px !important;
    background: rgba(247, 236, 210, 0.08) !important;
    color: #d9aa64 !important;
    box-shadow: none !important;
    padding: 6px 10px !important;
  }

  .experience-panel span {
    font-size: 0.68rem !important;
    font-weight: 1000 !important;
    letter-spacing: 0.12em !important;
  }

  .experience-panel strong {
    display: none !important;
  }

  @media (max-height: 760px) {
    .station-title {
      height: 84px !important;
    }

    .station-title-copy {
      font-size: clamp(1.8rem, 11vw, 3.3rem) !important;
    }

    .radio-console {
      top: 92px !important;
      height: 290px !important;
    }

    .radio-face,
    .is-quiz-open .radio-face,
    body:not(.is-awake) .radio-face,
    .is-correct .radio-face,
    .is-wrong .radio-face,
    .is-surge .radio-face,
    .is-static-hold .radio-face,
    .is-haunt-flicker .radio-face,
    .is-haunt-twitch .radio-face,
    .is-scare-event .radio-face,
    .is-dial-unlocked .radio-face,
    .is-haptic-hit .radio-face {
      width: min(84vw, 318px) !important;
      height: 266px !important;
      min-height: 266px !important;
      transform: none !important;
      animation: none !important;
    }

    .radio-brand-wordmark {
      left: 24px !important;
      top: 24px !important;
      font-size: 1.04rem !important;
    }

    .power-switch,
    .is-awake .power-switch,
    .is-dial-unlocked.is-awake .power-switch {
      right: 18px !important;
      top: 18px !important;
      width: 96px !important;
      min-width: 96px !important;
      height: 50px !important;
      min-height: 50px !important;
    }

    .speaker {
      top: 86px !important;
      width: 54px !important;
      height: 110px !important;
    }

    .speaker-left {
      left: 17px !important;
    }

    .speaker-right {
      right: 17px !important;
    }

    .dial-center strong {
      font-size: 1.42rem !important;
    }

    .tuning-window {
      width: 150px !important;
      height: 24px !important;
    }

    .quiz-lightbox {
      top: 366px !important;
      gap: 5px !important;
    }

    .quiz-lightbox .question-card {
      min-height: 66px !important;
    }

    .quiz-lightbox .quiz-prompt {
      font-size: 0.9rem !important;
    }

    .quiz-lightbox .quiz-answers button,
    .radio-face .quiz-lightbox .quiz-answers button {
      min-height: 38px !important;
      font-size: 0.74rem !important;
    }

    .experience-panel .daily-signal-card,
    .experience-panel .tape-archive-card {
      min-height: 38px !important;
    }
  }

  @media (max-width: 430px) {
    .radio-face,
    .is-quiz-open .radio-face,
    body:not(.is-awake) .radio-face,
    .is-correct .radio-face,
    .is-wrong .radio-face,
    .is-surge .radio-face,
    .is-static-hold .radio-face,
    .is-haunt-flicker .radio-face,
    .is-haunt-twitch .radio-face,
    .is-scare-event .radio-face,
    .is-dial-unlocked .radio-face,
    .is-haptic-hit .radio-face {
      width: min(88vw, 345px) !important;
      height: 300px !important;
      min-height: 300px !important;
    }
  }
}

@media (max-width: 560px) {
  body.is-mobile-performance .radio-console,
  body.is-mobile-performance.is-correct .radio-console,
  body.is-mobile-performance.is-wrong .radio-console,
  body.is-mobile-performance.is-surge .radio-console,
  body.is-mobile-performance.is-scare-event .radio-console,
  body.is-mobile-performance.is-haunt-flicker .radio-console,
  body.is-mobile-performance.is-haunt-twitch .radio-console,
  body.is-mobile-performance.is-static-hold .radio-console,
  body.is-mobile-performance.is-dial-unlocked .radio-console,
  body.is-mobile-performance.is-haptic-hit .radio-console {
    left: 0 !important;
    right: 0 !important;
    margin-inline: auto !important;
    transform: none !important;
    animation: none !important;
  }

  body.is-mobile-performance .radio-face,
  body.is-mobile-performance.is-quiz-open .radio-face,
  body.is-mobile-performance.is-correct .radio-face,
  body.is-mobile-performance.is-wrong .radio-face,
  body.is-mobile-performance.is-surge .radio-face,
  body.is-mobile-performance.is-static-hold .radio-face,
  body.is-mobile-performance.is-haunt-flicker .radio-face,
  body.is-mobile-performance.is-haunt-twitch .radio-face,
  body.is-mobile-performance.is-scare-event .radio-face,
  body.is-mobile-performance.is-dial-unlocked .radio-face,
  body.is-mobile-performance.is-haptic-hit .radio-face {
    transform: none !important;
    animation: none !important;
  }
}

@keyframes mobile-tune-twitch {
  0%, 100% {
    transform: rotate(28deg);
  }
  45% {
    transform: rotate(21deg);
  }
  52% {
    transform: rotate(33deg);
  }
}

/* Codex-safe preview mode keeps local testing responsive without changing the live experience. */
.is-codex-safe *,
.is-codex-safe *::before,
.is-codex-safe *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

.is-codex-safe .video-background,
.is-codex-safe .broadcast-glass iframe,
.is-codex-safe .apparition-screen iframe {
  display: none !important;
}

/* Use the supplied Haunted FM logo artwork instead of generated text. */
.station-logo-art {
  width: auto !important;
  max-width: min(82vw, 540px) !important;
  height: clamp(96px, 15dvh, 150px) !important;
  max-height: none !important;
  object-fit: contain !important;
  opacity: 0.96 !important;
  mix-blend-mode: screen !important;
  filter:
    drop-shadow(0 0 13px rgba(244, 240, 230, 0.22))
    drop-shadow(0 0 24px rgba(128, 214, 189, 0.14))
    drop-shadow(0 16px 30px rgba(0, 0, 0, 0.84)) !important;
}

.station-title .station-title-copy.station-logo-art {
  display: block !important;
  margin: 0 auto !important;
  text-shadow: none !important;
  transform: none !important;
}

.station-logo-art.is-logo-missing {
  display: none !important;
}

.is-awake .station-title-copy.station-logo-art,
.is-surge .station-title-copy.station-logo-art,
.is-jump-scare .station-title-copy.station-logo-art,
.has-video-apparition .station-title-copy.station-logo-art {
  animation:
    title-float 5.4s ease-in-out infinite,
    title-flicker 7.4s steps(1, end) infinite !important;
}

.radio-brand-engraving {
  position: absolute !important;
  left: 9.5% !important;
  top: 23px !important;
  z-index: 27 !important;
  width: min(32%, 136px) !important;
  height: 72px !important;
  display: grid !important;
  place-items: center !important;
  transform: rotate(-2deg) !important;
  pointer-events: none !important;
  mix-blend-mode: multiply !important;
}

.radio-brand-engraving::before,
.radio-brand-engraving::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url("assets/haunted-fm-logo-transparent.png?v=mobile-power-left-1") center / contain no-repeat;
  mask: url("assets/haunted-fm-logo-transparent.png?v=mobile-power-left-1") center / contain no-repeat;
  pointer-events: none;
}

.radio-brand-engraving::before {
  color: rgba(12, 5, 2, 0.82);
  transform: translate(-1px, -1px);
  filter: blur(0.35px);
  opacity: 0.72;
}

.radio-brand-engraving::after {
  color: rgba(244, 222, 184, 0.16);
  transform: translate(1px, 1px);
  filter: blur(0.2px);
  opacity: 0.54;
}

.radio-brand-wordmark {
  display: block !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  z-index: 2 !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  color: transparent !important;
  filter:
    brightness(0)
    sepia(1)
    saturate(1050%)
    hue-rotate(346deg)
    brightness(0.42)
    contrast(1.22)
    drop-shadow(0 1px 0 rgba(244, 222, 184, 0.12))
    drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.92)) !important;
  opacity: 0.48 !important;
  mix-blend-mode: multiply !important;
  transform: none !important;
}

.radio-brand-wordmark.is-logo-missing {
  display: none !important;
}

@media (max-width: 560px) {
  .station-title {
    width: min(94vw, 430px) !important;
  }

  .station-logo-art {
    width: auto !important;
    max-width: min(74vw, 300px) !important;
    height: clamp(96px, 13dvh, 116px) !important;
    max-height: none !important;
  }

  .radio-brand-wordmark {
    width: 100% !important;
  }

  .radio-brand-engraving {
    left: 20px !important;
    top: 24px !important;
    width: 104px !important;
    height: 58px !important;
    max-height: none !important;
    transform: rotate(-2deg) !important;
  }
}

/* Final mobile power placement: middle-left of the radio, away from Case File. */
@media (max-width: 700px), (pointer: coarse) {
  .radio-face .power-switch,
  .is-awake .radio-face .power-switch,
  .is-dial-unlocked.is-awake .radio-face .power-switch,
  body:not(.has-started):not(.is-awake) .radio-face .power-switch {
    position: absolute !important;
    left: clamp(12px, 4.8vw, 22px) !important;
    right: auto !important;
    top: 52% !important;
    z-index: 86 !important;
    width: clamp(84px, 24vw, 104px) !important;
    min-width: clamp(84px, 24vw, 104px) !important;
    height: clamp(42px, 11vw, 52px) !important;
    min-height: clamp(42px, 11vw, 52px) !important;
    padding: 0 9px !important;
    transform: translateY(-50%) !important;
    pointer-events: auto !important;
  }

  .radio-face .power-switch:hover,
  .radio-face .power-switch:focus-visible,
  .is-awake .radio-face .power-switch:hover,
  .is-awake .radio-face .power-switch:focus-visible {
    transform: translateY(-50%) scale(1.03) !important;
  }

  .radio-face .switch-label {
    top: 0 !important;
    font-size: clamp(0.48rem, 2.8vw, 0.68rem) !important;
    line-height: 1 !important;
  }

  .radio-face .power-switch::after {
    content: "3 correct answers unlock the dial";
    position: absolute;
    left: 50%;
    top: calc(100% + 9px);
    width: min(46vw, 170px);
    transform: translateX(-50%);
    color: rgba(248, 238, 214, 0.82);
    font-size: clamp(0.5rem, 2.8vw, 0.66rem);
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    text-shadow:
      0 0 10px rgba(0, 0, 0, 0.9),
      0 0 18px rgba(128, 214, 189, 0.26);
    pointer-events: none;
  }
}

@media (max-width: 390px) {
  .radio-face .power-switch,
  .is-awake .radio-face .power-switch,
  .is-dial-unlocked.is-awake .radio-face .power-switch {
    left: 10px !important;
    top: 54% !important;
    width: 82px !important;
    min-width: 82px !important;
  }
}

/* Bonus case-file interaction: station crime scene photo clues. */
.case-file-card,
.crime-scene-close,
.crime-photo-card {
  appearance: none;
  border: 0;
  color: rgba(248, 238, 214, 0.96);
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.experience-panel {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.experience-panel .daily-signal-card,
.experience-panel .tape-archive-card,
.experience-panel .case-file-card {
  min-width: 0 !important;
}

.case-file-card {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 999px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(6, 16, 15, 0.86), rgba(0, 0, 0, 0.34) 62%, transparent 80%);
  box-shadow: inset 0 0 18px rgba(128, 214, 189, 0.08), 0 0 18px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.case-file-card::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(232, 177, 95, 0.2), transparent 58%),
    radial-gradient(ellipse at 50% 52%, rgba(128, 214, 189, 0.12), transparent 72%);
  filter: blur(12px);
  opacity: 0.7;
}

.case-file-card strong {
  overflow: hidden;
  font-size: clamp(0.68rem, 2.4vw, 0.86rem);
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.case-file-card.has-evidence span {
  color: rgba(232, 177, 95, 0.84);
}

.case-file-card.has-new-evidence {
  animation: case-file-pulse 1.4s ease-in-out infinite;
}

.crime-scene-drawer {
  position: fixed;
  inset: 0;
  z-index: 145;
  display: grid;
  place-items: center;
  padding:
    max(18px, env(safe-area-inset-top))
    16px
    max(18px, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 50% 46%, rgba(128, 214, 189, 0.16), transparent 30%),
    radial-gradient(ellipse at 50% 62%, rgba(183, 83, 80, 0.12), rgba(0, 0, 0, 0.76) 72%),
    repeating-linear-gradient(0deg, rgba(244, 240, 230, 0.04) 0 1px, transparent 1px 5px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.has-crime-scene-open .crime-scene-drawer,
.crime-scene-drawer[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.crime-scene-smoke {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(94vw, 760px);
  max-height: min(84dvh, 720px);
  padding: 28px 22px 22px;
  color: rgba(248, 238, 214, 0.96);
  isolation: isolate;
}

.crime-scene-smoke::before,
.crime-scene-smoke::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
}

.crime-scene-smoke::before {
  inset: -42px -34px;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(2, 7, 7, 0.96), rgba(2, 7, 7, 0.7) 44%, rgba(128, 214, 189, 0.2) 68%, transparent 82%),
    radial-gradient(ellipse at 42% 70%, rgba(232, 177, 95, 0.18), transparent 46%);
  filter: blur(17px);
  animation: smoke-drift 6.6s ease-in-out infinite;
}

.crime-scene-smoke::after {
  inset: -16px;
  background:
    repeating-linear-gradient(92deg, rgba(244, 240, 230, 0.05) 0 1px, transparent 1px 8px),
    radial-gradient(ellipse at 50% 58%, rgba(128, 214, 189, 0.1), transparent 64%);
  filter: blur(8px);
  mix-blend-mode: screen;
  opacity: 0.62;
}

.crime-scene-close {
  position: absolute;
  right: 12px;
  top: 10px;
  z-index: 4;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 0 12px rgba(128, 214, 189, 0.14), 0 0 22px rgba(0, 0, 0, 0.52);
}

.case-kicker {
  width: fit-content;
  color: rgba(128, 214, 189, 0.8);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.crime-scene-smoke > strong {
  max-width: calc(100% - 48px);
  font: 950 clamp(1.4rem, 5vw, 2.8rem)/0.9 Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow:
    0 0 16px rgba(128, 214, 189, 0.28),
    0 0 32px rgba(0, 0, 0, 0.78);
}

.crime-scene-smoke p {
  max-width: 54ch;
  color: rgba(248, 238, 214, 0.78);
  font-size: 0.9rem;
  line-height: 1.35;
}

.crime-scene-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-height: min(56dvh, 460px);
  overflow: auto;
  padding: 8px 4px 12px;
  -webkit-overflow-scrolling: touch;
}

.crime-photo-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 252px;
  padding: 0;
  text-align: left;
  isolation: isolate;
}

.crime-photo-card::before {
  content: "";
  position: absolute;
  inset: -12px -10px;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.72), rgba(3, 14, 12, 0.34) 58%, rgba(128, 214, 189, 0.08) 72%, transparent 86%);
  filter: blur(11px);
  opacity: 0.9;
}

.crime-photo-paper {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 178px;
  padding: 10px 10px 12px;
  border-radius: 20px 18px 22px 16px;
  background:
    linear-gradient(180deg, rgba(246, 236, 211, 0.9), rgba(188, 174, 143, 0.84)),
    repeating-linear-gradient(96deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 9px);
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.2),
    0 16px 30px rgba(0, 0, 0, 0.5);
  transform: rotate(var(--photo-tilt, -1.5deg));
}

.crime-photo-card:nth-child(even) .crime-photo-paper {
  --photo-tilt: 1.8deg;
}

.crime-photo-card:nth-child(3n) .crime-photo-paper {
  --photo-tilt: -2.4deg;
}

.crime-photo-image {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  min-height: 126px;
  overflow: hidden;
  border-radius: 16px 14px 18px 12px;
  background:
    radial-gradient(circle at 50% 38%, rgba(248, 238, 214, 0.24), transparent 4%),
    radial-gradient(ellipse at 50% 60%, rgba(0, 0, 0, 0.22), transparent 54%),
    linear-gradient(180deg, rgba(64, 81, 72, 0.9), rgba(11, 16, 15, 0.96));
  filter: grayscale(0.9) contrast(1.38) sepia(0.2);
}

.crime-photo-image.has-photo {
  background: #050505;
}

.crime-photo-image.has-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(0.36) contrast(1.16) brightness(0.84) sepia(0.12);
  transform: scale(1.015);
}

.crime-photo-image::before,
.crime-photo-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.crime-photo-image::before {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 50% 50%, transparent 44%, rgba(0, 0, 0, 0.62) 100%);
  mix-blend-mode: screen;
}

.crime-photo-image::after {
  content: attr(data-marker);
  inset: auto 8px 8px auto;
  color: rgba(248, 238, 214, 0.72);
  font: 950 0.62rem/1 var(--font-display, monospace);
  letter-spacing: 0.12em;
  text-shadow: 0 0 8px rgba(128, 214, 189, 0.72);
}

.crime-photo-image i {
  position: absolute;
  display: block;
  background: rgba(248, 238, 214, 0.52);
  box-shadow: 0 0 18px rgba(128, 214, 189, 0.22);
}

.crime-photo-image.has-photo i {
  display: none;
}

.scene-control .crime-photo-image i:nth-child(1) {
  left: 12%;
  right: 12%;
  bottom: 16%;
  height: 28%;
  border-radius: 999px 999px 18px 18px;
  background: linear-gradient(180deg, rgba(38, 54, 48, 0.82), rgba(4, 7, 7, 0.96));
}

.scene-control .crime-photo-image i:nth-child(2) {
  left: 42%;
  top: 15%;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: radial-gradient(circle, transparent 0 44%, rgba(248, 238, 214, 0.52) 47% 52%, transparent 55%);
}

.scene-control .crime-photo-image i:nth-child(3) {
  left: 16%;
  bottom: 22%;
  width: 68%;
  height: 2px;
  background: rgba(128, 214, 189, 0.4);
}

.scene-mic .crime-photo-image i:nth-child(1) {
  left: 46%;
  top: 20%;
  width: 18px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(248, 238, 214, 0.72), rgba(44, 42, 37, 0.8));
}

.scene-mic .crime-photo-image i:nth-child(2) {
  left: 26%;
  right: 26%;
  bottom: 24%;
  height: 4px;
  transform: rotate(-12deg);
  background: rgba(183, 83, 80, 0.48);
}

.scene-mic .crime-photo-image i:nth-child(3) {
  left: 50%;
  bottom: 18%;
  width: 58px;
  height: 22px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.58);
}

.scene-reel .crime-photo-image i:nth-child(1),
.scene-reel .crime-photo-image i:nth-child(2) {
  top: 26%;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background:
    radial-gradient(circle, transparent 0 20%, rgba(248, 238, 214, 0.52) 21% 28%, transparent 30% 46%, rgba(248, 238, 214, 0.44) 48% 54%, transparent 56%);
}

.scene-reel .crime-photo-image i:nth-child(1) {
  left: 24%;
}

.scene-reel .crime-photo-image i:nth-child(2) {
  right: 24%;
}

.scene-reel .crime-photo-image i:nth-child(3) {
  left: 18%;
  right: 18%;
  bottom: 18%;
  height: 26px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.62);
}

.scene-dial .crime-photo-image i:nth-child(1) {
  left: 50%;
  top: 22%;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle, rgba(6, 9, 8, 0.88) 0 34%, rgba(232, 177, 95, 0.5) 36% 39%, transparent 41%),
    conic-gradient(from 210deg, rgba(248, 238, 214, 0.62), rgba(183, 83, 80, 0.5), rgba(128, 214, 189, 0.2), rgba(248, 238, 214, 0.62));
}

.scene-dial .crime-photo-image i:nth-child(2) {
  left: 50%;
  top: 42%;
  width: 58px;
  height: 3px;
  transform-origin: left center;
  transform: rotate(-28deg);
  background: rgba(183, 83, 80, 0.82);
}

.scene-dial .crime-photo-image i:nth-child(3) {
  left: 32%;
  right: 32%;
  bottom: 17%;
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.52);
}

.scene-door .crime-photo-image i:nth-child(1) {
  left: 34%;
  top: 14%;
  width: 38%;
  height: 70%;
  border-radius: 6px 6px 12px 12px;
  background: linear-gradient(90deg, rgba(15, 18, 16, 0.86), rgba(68, 55, 42, 0.66));
}

.scene-door .crime-photo-image i:nth-child(2),
.scene-door .crime-photo-image i:nth-child(3) {
  left: 43%;
  width: 34%;
  height: 3px;
  background: rgba(248, 238, 214, 0.45);
}

.scene-door .crime-photo-image i:nth-child(2) {
  top: 38%;
  transform: rotate(-22deg);
}

.scene-door .crime-photo-image i:nth-child(3) {
  top: 50%;
  transform: rotate(18deg);
}

.scene-antenna .crime-photo-image i:nth-child(1) {
  left: 50%;
  top: 18%;
  width: 3px;
  height: 68%;
  transform: translateX(-50%);
  background: rgba(248, 238, 214, 0.62);
}

.scene-antenna .crime-photo-image i:nth-child(2),
.scene-antenna .crime-photo-image i:nth-child(3) {
  left: 50%;
  top: 34%;
  width: 84px;
  height: 3px;
  background: rgba(128, 214, 189, 0.48);
  transform-origin: center;
}

.scene-antenna .crime-photo-image i:nth-child(2) {
  transform: translateX(-50%) rotate(-28deg);
}

.scene-antenna .crime-photo-image i:nth-child(3) {
  transform: translateX(-50%) rotate(28deg);
}

.crime-photo-label {
  color: rgba(14, 12, 10, 0.78);
  font: 950 0.58rem/1.15 var(--font-display, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.crime-photo-clue {
  display: block;
  min-height: 58px;
  padding: 0 6px;
  color: rgba(248, 238, 214, 0.74);
  font-size: 0.78rem;
  line-height: 1.28;
}

.crime-photo-card.is-missing {
  cursor: default;
  opacity: 0.48;
}

.crime-photo-card.is-missing .crime-photo-paper {
  filter: grayscale(1) brightness(0.64);
}

.crime-photo-card.is-missing .crime-photo-image.has-photo img {
  filter: blur(3px) grayscale(1) brightness(0.46) contrast(1.08);
  transform: scale(1.06);
}

.crime-photo-card.is-inspected .crime-photo-paper,
.crime-photo-card.is-found:focus-visible .crime-photo-paper,
.crime-photo-card.is-found:hover .crime-photo-paper {
  filter: brightness(1.08) contrast(1.05);
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.22),
    0 0 24px rgba(128, 214, 189, 0.26),
    0 18px 34px rgba(0, 0, 0, 0.56);
}

.crime-photo-card.is-inspected .crime-photo-clue {
  color: rgba(248, 238, 214, 0.96);
  text-shadow: 0 0 10px rgba(128, 214, 189, 0.28);
}

.crime-photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 175;
  display: grid;
  place-items: center;
  padding:
    max(14px, env(safe-area-inset-top))
    14px
    max(14px, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 50% 44%, rgba(128, 214, 189, 0.14), transparent 34%),
    radial-gradient(ellipse at 50% 60%, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.98) 80%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.has-crime-photo-lightbox .crime-photo-lightbox,
.crime-photo-lightbox[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.crime-photo-viewer {
  position: relative;
  display: grid;
  place-items: center;
  width: min(96vw, 1040px);
  isolation: isolate;
}

.crime-photo-viewer::before,
.crime-photo-viewer::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
}

.crime-photo-viewer::before {
  inset: -44px -34px;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(2, 7, 7, 0.96), rgba(2, 7, 7, 0.72) 48%, rgba(128, 214, 189, 0.18) 70%, transparent 84%),
    radial-gradient(ellipse at 42% 68%, rgba(232, 177, 95, 0.16), transparent 46%);
  filter: blur(18px);
  animation: smoke-drift 6.2s ease-in-out infinite;
}

.crime-photo-viewer::after {
  inset: -24px;
  background:
    repeating-linear-gradient(0deg, rgba(244, 240, 230, 0.04) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 52% 42%, rgba(248, 238, 214, 0.06), transparent 56%);
  filter: blur(8px);
  opacity: 0.72;
  mix-blend-mode: screen;
}

.crime-photo-viewer-frame {
  position: relative;
  display: grid;
  gap: 12px;
  width: 100%;
  margin: 0;
  color: rgba(248, 238, 214, 0.96);
}

.crime-photo-viewer-frame img {
  display: block;
  width: 100%;
  max-height: min(66dvh, 620px);
  object-fit: contain;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.82);
  box-shadow:
    0 0 46px rgba(0, 0, 0, 0.86),
    0 0 70px rgba(128, 214, 189, 0.12);
  filter: contrast(1.04) brightness(0.96);
}

.crime-photo-viewer-frame::before,
.crime-photo-viewer-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 24px;
}

.crime-photo-viewer-frame::before {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 50% 50%, transparent 64%, rgba(0, 0, 0, 0.5) 100%);
  mix-blend-mode: screen;
}

.crime-photo-viewer-frame::after {
  inset: -12px;
  background: radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.68) 92%);
  filter: blur(8px);
}

.crime-photo-viewer-frame figcaption {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 5px;
  justify-items: center;
  text-align: center;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
}

.crime-photo-viewer-frame figcaption span,
.crime-photo-viewer-marker {
  color: rgba(128, 214, 189, 0.82);
  font: 900 0.68rem/1 var(--font-display, monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.crime-photo-viewer-frame figcaption strong {
  font: 950 clamp(1.35rem, 4.8vw, 2.7rem)/0.92 Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.crime-photo-viewer-frame figcaption em {
  max-width: min(72ch, 92vw);
  color: rgba(248, 238, 214, 0.78);
  font-style: normal;
  font-size: clamp(0.86rem, 2.6vw, 1rem);
  line-height: 1.35;
}

.crime-photo-viewer-marker {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  padding: 7px 10px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.26) 76%, transparent);
  color: rgba(232, 177, 95, 0.9);
  text-shadow: 0 0 10px rgba(232, 177, 95, 0.42);
}

.crime-photo-viewer-close,
.crime-photo-viewer-nav {
  appearance: none;
  border: 0;
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  color: rgba(248, 238, 214, 0.94);
  background:
    radial-gradient(ellipse at 50% 45%, rgba(28, 40, 36, 0.9), rgba(0, 0, 0, 0.66));
  box-shadow:
    inset 0 0 14px rgba(128, 214, 189, 0.18),
    0 0 28px rgba(0, 0, 0, 0.72),
    0 0 24px rgba(128, 214, 189, 0.08);
  cursor: pointer;
  touch-action: manipulation;
}

.crime-photo-viewer-close {
  top: -18px;
  right: -6px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
}

.crime-photo-viewer-nav {
  top: 42%;
  width: 50px;
  height: 64px;
  border-radius: 999px;
  font-size: 1.55rem;
  transform: translateY(-50%);
}

.crime-photo-viewer-prev {
  left: -8px;
}

.crime-photo-viewer-next {
  right: -8px;
}

.crime-photo-viewer-nav:disabled {
  opacity: 0.24;
  pointer-events: none;
}

.crime-photo-viewer-close:hover,
.crime-photo-viewer-nav:hover,
.crime-photo-viewer-close:focus-visible,
.crime-photo-viewer-nav:focus-visible {
  filter: brightness(1.2);
  outline: 0;
}

.is-evidence-flash .radio-face {
  filter: brightness(1.12) contrast(1.06);
}

.is-evidence-flash .crime-scene-drawer {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(248, 238, 214, 0.16), transparent 24%),
    radial-gradient(ellipse at 50% 62%, rgba(128, 214, 189, 0.18), rgba(0, 0, 0, 0.78) 72%),
    repeating-linear-gradient(0deg, rgba(244, 240, 230, 0.08) 0 1px, transparent 1px 4px);
}

@keyframes case-file-pulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow: inset 0 0 18px rgba(128, 214, 189, 0.08), 0 0 18px rgba(0, 0, 0, 0.24);
  }
  50% {
    filter: brightness(1.18);
    box-shadow:
      inset 0 0 18px rgba(232, 177, 95, 0.16),
      0 0 26px rgba(232, 177, 95, 0.22),
      0 0 46px rgba(128, 214, 189, 0.12);
  }
}

@media (max-width: 700px), (pointer: coarse) {
  .experience-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .experience-panel .daily-signal-card,
  .experience-panel .tape-archive-card,
  .experience-panel .case-file-card {
    min-height: 34px !important;
    padding: 4px 5px !important;
  }

  .experience-panel .daily-signal-card strong,
  .experience-panel .tape-archive-card strong,
  .experience-panel .case-file-card strong {
    display: none !important;
  }

  .experience-panel .daily-signal-card span,
  .experience-panel .tape-archive-card span,
  .experience-panel .case-file-card span {
    font-size: 0.46rem !important;
    letter-spacing: 0.07em !important;
  }

  .crime-scene-drawer {
    place-items: stretch center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .crime-scene-smoke {
    width: min(94vw, 390px);
    max-height: none;
    padding: 24px 16px 20px;
    align-self: center;
  }

  .crime-scene-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: min(58dvh, 460px);
    gap: 10px;
  }

  .crime-photo-card {
    min-height: 210px;
  }

  .crime-photo-paper {
    min-height: 146px;
    padding: 8px 8px 10px;
  }

  .crime-photo-image {
    min-height: 104px;
  }

  .crime-photo-viewer {
    width: min(94vw, 430px);
  }

  .crime-photo-viewer-frame {
    gap: 10px;
  }

  .crime-photo-viewer-frame img {
    max-height: min(58dvh, 460px);
    border-radius: 18px;
  }

  .crime-photo-viewer-frame::before {
    border-radius: 18px;
  }

  .crime-photo-viewer-frame figcaption em {
    max-width: 90vw;
  }

  .crime-photo-viewer-close {
    top: -8px;
    right: -4px;
  }

  .crime-photo-viewer-nav {
    top: auto;
    bottom: -4px;
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
    transform: none;
  }

  .crime-photo-viewer-prev {
    left: 12px;
  }

  .crime-photo-viewer-next {
    right: 12px;
  }

  .crime-photo-label {
    font-size: 0.48rem;
  }

  .crime-photo-clue {
    min-height: 64px;
    font-size: 0.68rem;
  }
}

/* Viewport-safe smoke: no tall translucent windows around trays or answers. */
.quiz-lightbox .mission-card,
.quiz-lightbox .question-card,
.quiz-lightbox .quiz-answers,
.quiz-lightbox .quiz-answers button {
  isolation: auto !important;
}

.quiz-lightbox .mission-card::before,
.quiz-lightbox .question-card::before,
.quiz-lightbox .quiz-answers button::before {
  left: 9% !important;
  right: 9% !important;
  top: auto !important;
  bottom: -6px !important;
  inset-block-start: auto !important;
  inset-block-end: -6px !important;
  width: auto !important;
  height: 24px !important;
  min-height: 0 !important;
  max-height: 36px !important;
  transform: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 50% 56%, rgba(0, 0, 0, 0.55), rgba(8, 21, 19, 0.22) 54%, rgba(142, 228, 206, 0.09) 74%, transparent 100%) !important;
  filter: blur(9px) !important;
  opacity: 0.42 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  pointer-events: none !important;
}

.quiz-lightbox .question-card::before {
  left: 6% !important;
  right: 6% !important;
  bottom: 4px !important;
  height: 38px !important;
  opacity: 0.46 !important;
}

.quiz-lightbox .quiz-answers button::before {
  left: 18% !important;
  right: 18% !important;
  bottom: 0 !important;
  height: 16px !important;
  opacity: 0.24 !important;
}

.experience-panel .daily-signal-card::before,
.experience-panel .tape-archive-card::before,
.experience-panel .case-file-card::before {
  left: -6px !important;
  right: -6px !important;
  top: -4px !important;
  bottom: -4px !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  filter: blur(6px) !important;
  opacity: 0.38 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.stage-light {
  display: none !important;
  opacity: 0 !important;
}

/* Mobile power clearance: keep Case File from sitting over the radio switch. */
@media (max-width: 700px), (pointer: coarse) {
  .power-switch,
  .is-awake .power-switch,
  .is-dial-unlocked.is-awake .power-switch {
    z-index: 74 !important;
    right: clamp(14px, 5vw, 24px) !important;
    top: clamp(16px, 3.4dvh, 24px) !important;
    width: clamp(96px, 28vw, 116px) !important;
    min-width: clamp(96px, 28vw, 116px) !important;
    pointer-events: auto !important;
  }

  .experience-panel {
    left: clamp(16px, 5vw, 24px) !important;
    right: auto !important;
    transform: none !important;
    width: min(60vw, 246px) !important;
    z-index: 22 !important;
    gap: 5px !important;
  }

  .experience-panel .daily-signal-card,
  .experience-panel .tape-archive-card,
  .experience-panel .case-file-card {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding-inline: 4px !important;
  }

  .experience-panel .daily-signal-card span,
  .experience-panel .tape-archive-card span,
  .experience-panel .case-file-card span {
    font-size: clamp(0.43rem, 2vw, 0.56rem) !important;
    letter-spacing: 0.06em !important;
  }
}

@media (max-width: 390px) {
  .experience-panel {
    width: min(58vw, 218px) !important;
    left: 14px !important;
    gap: 4px !important;
  }

  .power-switch,
  .is-awake .power-switch,
  .is-dial-unlocked.is-awake .power-switch {
    right: 12px !important;
    width: 92px !important;
    min-width: 92px !important;
  }
}

@media (max-width: 380px) {
  .crime-scene-board {
    grid-template-columns: 1fr;
  }

  .crime-photo-card {
    min-height: 194px;
  }
}

/* Final top-spacing pass: keep the logo proud and give the action row breathing room. */
.experience-panel {
  top: clamp(130px, 18dvh, 170px) !important;
}

@media (max-width: 560px) {
  .experience-panel {
    top: max(134px, calc(env(safe-area-inset-top) + 118px)) !important;
  }
}

@media (max-height: 720px) and (max-width: 560px) {
  .experience-panel {
    top: max(102px, calc(env(safe-area-inset-top) + 92px)) !important;
  }
}

/* Gameplay pass: keep unlocked transmission tap targets stable while the glow moves. */
.is-dial-unlocked .escaped-transmissions .video-clue.is-target.is-escaped {
  animation-name: escaped-transmission-burst, clue-static !important;
  animation-duration: 920ms, 360ms !important;
  animation-timing-function: cubic-bezier(0.16, 0.88, 0.22, 1.18), steps(2, end) !important;
  animation-delay: var(--escape-delay, 0s), 0s !important;
  animation-iteration-count: 1, infinite !important;
  animation-fill-mode: both, none !important;
}

.is-dial-unlocked .escaped-transmissions .video-clue.is-target.is-escaped::before {
  animation:
    escaped-transmission-aura 3.7s ease-in-out infinite,
    clue-noise 420ms steps(3, end) infinite !important;
  animation-delay: calc(var(--escape-delay, 0s) + var(--drift-delay, 0s)), 0s !important;
}

.is-dial-unlocked .escaped-transmissions .video-clue.is-target.is-escaped::after {
  animation:
    escaped-transmission-core 2.9s ease-in-out infinite,
    clue-static 360ms steps(2, end) infinite !important;
  animation-delay: calc(var(--escape-delay, 0s) + var(--drift-delay, 0s)), 0s !important;
}

@keyframes escaped-transmission-aura {
  0%, 100% {
    transform: translate3d(-6px, 4px, 0) scale(0.92);
  }
  50% {
    transform: translate3d(7px, -9px, 0) scale(1.08);
  }
}

@keyframes escaped-transmission-core {
  0%, 100% {
    transform: translate3d(2px, -2px, 0) scale(0.9);
  }
  50% {
    transform: translate3d(-3px, 3px, 0) scale(1.14);
  }
}

/* Compact top controls: stop the three action buttons from stretching into panels. */
@media (max-width: 700px), (pointer: coarse) {
  .experience-panel {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: max(136px, calc(env(safe-area-inset-top) + 118px)) !important;
    bottom: auto !important;
    z-index: 30 !important;
    width: min(90vw, 430px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 42px !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 7px !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
  }

  .experience-panel .daily-signal-card,
  .experience-panel .tape-archive-card,
  .experience-panel .case-file-card {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 999px !important;
    overflow: visible !important;
    color: rgba(142, 228, 206, 0.96) !important;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(7, 18, 16, 0.72), rgba(7, 18, 16, 0.28) 48%, transparent 76%) !important;
    box-shadow:
      inset 0 0 12px rgba(142, 228, 206, 0.08),
      0 0 16px rgba(142, 228, 206, 0.1) !important;
  }

  .experience-panel .daily-signal-card::before,
  .experience-panel .tape-archive-card::before,
  .experience-panel .case-file-card::before {
    inset: -9px -8px !important;
    z-index: -1 !important;
    border-radius: 999px !important;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(142, 228, 206, 0.18), rgba(142, 228, 206, 0.05) 44%, transparent 72%) !important;
    filter: blur(9px) !important;
    opacity: 0.72 !important;
  }

  .experience-panel .daily-signal-card span,
  .experience-panel .tape-archive-card span,
  .experience-panel .case-file-card span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: currentColor !important;
    font-size: clamp(0.5rem, 2.45vw, 0.62rem) !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .experience-panel .daily-signal-card strong,
  .experience-panel .tape-archive-card strong,
  .experience-panel .case-file-card strong {
    display: none !important;
  }
}

@media (max-height: 720px) and (max-width: 700px) {
  .experience-panel {
    top: max(104px, calc(env(safe-area-inset-top) + 92px)) !important;
    bottom: auto !important;
  }
}

/* Final tray cleanup: keep smoke as atmosphere instead of tall windows. */
@media (max-width: 700px), (pointer: coarse) {
  .quiz-lightbox,
  .quiz-lightbox .mission-card,
  .quiz-lightbox .question-card,
  .quiz-lightbox .quiz-answers,
  .quiz-lightbox .quiz-answers button {
    isolation: auto !important;
  }

  .quiz-lightbox .mission-card::before,
  .quiz-lightbox .question-card::before,
  .quiz-lightbox .quiz-answers button::before {
    left: 8% !important;
    right: 8% !important;
    top: auto !important;
    bottom: -8px !important;
    width: auto !important;
    height: 28px !important;
    min-height: 0 !important;
    max-height: 44px !important;
    transform: none !important;
    border-radius: 999px !important;
    background:
      radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0.58), rgba(9, 24, 21, 0.22) 50%, rgba(142, 228, 206, 0.1) 72%, transparent 100%) !important;
    filter: blur(10px) !important;
    opacity: 0.54 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    pointer-events: none !important;
  }

  .quiz-lightbox .question-card::before {
    left: 5% !important;
    right: 5% !important;
    bottom: 6px !important;
    height: 40px !important;
    opacity: 0.5 !important;
  }

  .quiz-lightbox .quiz-answers button::before {
    left: 14% !important;
    right: 14% !important;
    bottom: -2px !important;
    height: 18px !important;
    opacity: 0.34 !important;
  }

  .experience-panel .daily-signal-card::before,
  .experience-panel .tape-archive-card::before,
  .experience-panel .case-file-card::before {
    left: -6px !important;
    right: -6px !important;
    top: -5px !important;
    bottom: -5px !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    filter: blur(6px) !important;
    opacity: 0.42 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
}

/* Absolute final mobile power placement: middle-left, clear of Case File. */
@media (max-width: 700px), (pointer: coarse) {
  .radio-shell .radio-face .power-switch,
  .radio-shell .radio-face .is-awake .power-switch,
  body .radio-shell .radio-face .power-switch,
  body.is-awake .radio-shell .radio-face .power-switch,
  body.is-dial-unlocked.is-awake .radio-shell .radio-face .power-switch,
  body:not(.has-started):not(.is-awake) .radio-shell .radio-face .power-switch {
    position: absolute !important;
    left: clamp(12px, 4.6vw, 22px) !important;
    right: auto !important;
    top: 52% !important;
    bottom: auto !important;
    z-index: 88 !important;
    width: clamp(84px, 23vw, 104px) !important;
    min-width: clamp(84px, 23vw, 104px) !important;
    max-width: 104px !important;
    height: clamp(42px, 11vw, 52px) !important;
    min-height: clamp(42px, 11vw, 52px) !important;
    padding: 0 9px !important;
    transform: translateY(-50%) !important;
    pointer-events: auto !important;
  }

  body .radio-shell .radio-face .power-switch:hover,
  body .radio-shell .radio-face .power-switch:focus-visible,
  body.is-awake .radio-shell .radio-face .power-switch:hover,
  body.is-awake .radio-shell .radio-face .power-switch:focus-visible {
    transform: translateY(-50%) scale(1.03) !important;
  }
}

@media (max-width: 390px) {
  body .radio-shell .radio-face .power-switch,
  body.is-awake .radio-shell .radio-face .power-switch,
  body.is-dial-unlocked.is-awake .radio-shell .radio-face .power-switch {
    left: 10px !important;
    right: auto !important;
    top: 54% !important;
    width: 82px !important;
    min-width: 82px !important;
  }
}

/* Final popup priority: photo evidence must sit above every video/transmission overlay. */
.has-crime-photo-lightbox .crime-photo-lightbox,
.crime-photo-lightbox[aria-hidden="false"] {
  z-index: 260 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.has-crime-scene-open .crime-scene-drawer,
.crime-scene-drawer[aria-hidden="false"] {
  z-index: 245 !important;
}

/* Mobile portrait lock: one stable vertical stack for phones. */
@media (max-width: 700px), (pointer: coarse) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }

  body {
    min-height: 100dvh !important;
    touch-action: manipulation !important;
  }

  .station-title {
    position: relative !important;
    inset: auto !important;
    z-index: 18 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: clamp(82px, 13dvh, 116px) !important;
    margin: max(8px, env(safe-area-inset-top)) auto 8px !important;
    padding: 0 !important;
    transform: none !important;
  }

  .station-title-copy.station-logo-art {
    max-width: min(76vw, 310px) !important;
    height: clamp(76px, 12dvh, 108px) !important;
  }

  .haunted-room {
    position: relative !important;
    z-index: 8 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-content: start !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: calc(100dvh - 100px) !important;
    padding: 0 0 max(18px, env(safe-area-inset-bottom)) !important;
    margin: 0 auto !important;
    overflow-x: clip !important;
  }

  .radio-console,
  body.is-mobile-performance .radio-console,
  body.is-mobile-performance.is-correct .radio-console,
  body.is-mobile-performance.is-wrong .radio-console,
  body.is-mobile-performance.is-surge .radio-console,
  body.is-mobile-performance.is-scare-event .radio-console,
  body.is-mobile-performance.is-haunt-flicker .radio-console,
  body.is-mobile-performance.is-haunt-twitch .radio-console,
  body.is-mobile-performance.is-static-hold .radio-console,
  body.is-mobile-performance.is-dial-unlocked .radio-console,
  body.is-mobile-performance.is-haptic-hit .radio-console {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    max-width: 430px !important;
    height: clamp(318px, 47dvh, 382px) !important;
    min-height: 318px !important;
    margin: 0 auto !important;
    display: grid !important;
    place-items: center !important;
    transform: none !important;
    animation: none !important;
  }

  .radio-face,
  body.is-mobile-performance .radio-face,
  body.is-mobile-performance.is-quiz-open .radio-face,
  body.is-mobile-performance.is-correct .radio-face,
  body.is-mobile-performance.is-wrong .radio-face,
  body.is-mobile-performance.is-surge .radio-face,
  body.is-mobile-performance.is-static-hold .radio-face,
  body.is-mobile-performance.is-haunt-flicker .radio-face,
  body.is-mobile-performance.is-haunt-twitch .radio-face,
  body.is-mobile-performance.is-scare-event .radio-face,
  body.is-mobile-performance.is-dial-unlocked .radio-face,
  body.is-mobile-performance.is-haptic-hit .radio-face {
    width: min(94vw, 386px) !important;
    height: clamp(292px, 42dvh, 346px) !important;
    min-height: clamp(292px, 42dvh, 346px) !important;
    max-width: 386px !important;
    margin: 0 auto !important;
    transform: none !important;
    animation: none !important;
  }

  .experience-panel {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 20 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(94vw, 390px) !important;
    margin: 4px auto 0 !important;
    transform: none !important;
  }

  .experience-panel .daily-signal-card,
  .experience-panel .tape-archive-card,
  .experience-panel .case-file-card {
    min-height: 44px !important;
    padding: 8px 6px !important;
    border-radius: 999px !important;
  }

  .experience-panel span {
    font-size: clamp(0.5rem, 2.5vw, 0.64rem) !important;
  }

  .experience-panel strong {
    font-size: clamp(0.58rem, 2.8vw, 0.72rem) !important;
  }

  .quiz-lightbox {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    z-index: 90 !important;
    width: min(92vw, 390px) !important;
    max-height: 38dvh !important;
    gap: 7px !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
  }

  .quiz-lightbox .mission-card,
  .quiz-lightbox .question-card,
  .quiz-lightbox .quiz-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  .quiz-lightbox .question-card {
    min-height: auto !important;
    max-height: 12dvh !important;
    padding: 10px 14px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .quiz-lightbox .quiz-prompt,
  .quiz-lightbox .question-card #quizQuestion {
    font-size: clamp(1rem, 4.2vw, 1.18rem) !important;
    line-height: 1.15 !important;
  }

  .quiz-lightbox .quiz-answers {
    display: grid !important;
    gap: 7px !important;
    width: 100% !important;
  }

  .quiz-lightbox .quiz-answers button,
  .radio-face .quiz-lightbox .quiz-answers button {
    width: 100% !important;
    min-height: 44px !important;
    padding: 9px 12px !important;
    font-size: clamp(0.72rem, 3.5vw, 0.88rem) !important;
    line-height: 1.05 !important;
    touch-action: manipulation !important;
  }

  .station-dossier-button {
    left: auto !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    bottom: auto !important;
    width: 46px !important;
    height: 46px !important;
    z-index: 95 !important;
    transform: none !important;
  }

  .ringtone-bonus-smoke {
    width: min(92vw, 390px) !important;
    max-height: calc(100dvh - 34px) !important;
  }

  .ringtone-phone-guide {
    max-height: min(52dvh, 520px) !important;
  }

  .archive-drawer,
  .crime-scene-drawer,
  .crime-photo-lightbox,
  .station-dossier,
  .ringtone-bonus,
  .vault-prize {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .crime-scene-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .crime-photo-image.has-photo {
    background: #050505 !important;
  }

  .crime-photo-image.has-photo img,
  .crime-photo-card.is-found .crime-photo-image.has-photo img,
  .crime-photo-viewer-frame img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2 !important;
  }

  .crime-photo-card.is-found .crime-photo-image.has-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: grayscale(0.18) contrast(1.14) brightness(0.92) sepia(0.06) !important;
    transform: scale(1.01) !important;
  }

  .crime-photo-image.has-photo i {
    display: none !important;
  }

  .crime-photo-image.has-photo::before {
    opacity: 0.28 !important;
  }

  .crime-photo-image.has-photo::after {
    opacity: 0.18 !important;
  }
}

@media (max-width: 700px) and (orientation: landscape) {
  .haunted-room {
    min-height: 100dvh !important;
  }

  .station-title {
    height: 64px !important;
    margin-top: 4px !important;
  }

  .station-title-copy.station-logo-art {
    height: 58px !important;
  }

  .radio-console,
  body.is-mobile-performance .radio-console {
    height: 252px !important;
    min-height: 252px !important;
  }

  .radio-face,
  body.is-mobile-performance .radio-face {
    width: min(58vw, 330px) !important;
    height: 236px !important;
    min-height: 236px !important;
  }
}

/* iPhone Pro mobile polish: separate the control row from the radio and darken popups. */
@media (max-width: 700px), (pointer: coarse) {
  .experience-panel {
    order: -1 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 68 !important;
    width: min(92vw, 398px) !important;
    max-height: none !important;
    margin: 0 auto 10px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(7px, 2vw, 10px) !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .experience-panel .daily-signal-card,
  .experience-panel .tape-archive-card,
  .experience-panel .case-file-card {
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(3, 9, 8, 0.92), rgba(3, 9, 8, 0.62) 56%, rgba(3, 9, 8, 0.16) 82%, transparent 100%) !important;
    box-shadow:
      inset 0 0 14px rgba(142, 228, 206, 0.14),
      0 0 18px rgba(0, 0, 0, 0.56),
      0 0 24px rgba(142, 228, 206, 0.12) !important;
  }

  .experience-panel .daily-signal-card span,
  .experience-panel .tape-archive-card span,
  .experience-panel .case-file-card span {
    font-size: clamp(0.55rem, 2.65vw, 0.68rem) !important;
    letter-spacing: 0.07em !important;
  }

  .radio-console,
  body.is-mobile-performance .radio-console {
    margin-top: 0 !important;
  }

  .station-dossier-button {
    top: auto !important;
    right: auto !important;
    left: max(14px, env(safe-area-inset-left)) !important;
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px)) !important;
    z-index: 98 !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 50% 42%, rgba(142, 228, 206, 0.3), rgba(8, 17, 15, 0.9) 54%, rgba(0, 0, 0, 0.92)) !important;
    box-shadow:
      inset 0 0 18px rgba(142, 228, 206, 0.18),
      0 0 22px rgba(0, 0, 0, 0.72),
      0 0 30px rgba(142, 228, 206, 0.16) !important;
  }

  .station-dossier-button span,
  .station-dossier-button strong {
    display: none !important;
  }

  .station-dossier-button::after {
    content: "333" !important;
    display: grid !important;
    place-items: center !important;
    color: rgba(248, 238, 214, 0.96) !important;
    font-size: 0.72rem !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
  }

  .has-archive-open .experience-panel,
  .has-crime-scene-open .experience-panel,
  .has-station-dossier .experience-panel,
  .has-ringtone-bonus .experience-panel,
  .has-vault-prize .experience-panel,
  .has-crime-photo-lightbox .experience-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .archive-drawer,
  .crime-scene-drawer,
  .station-dossier {
    padding:
      max(18px, env(safe-area-inset-top))
      14px
      max(18px, env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(circle at 50% 32%, rgba(142, 228, 206, 0.08), transparent 34%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.96)) !important;
    backdrop-filter: blur(6px) brightness(0.72) !important;
    -webkit-backdrop-filter: blur(6px) brightness(0.72) !important;
  }

  .archive-smoke,
  .crime-scene-smoke,
  .station-dossier-smoke {
    width: min(92vw, 390px) !important;
    color: rgba(248, 238, 214, 0.98) !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.96) !important;
  }

  .archive-smoke::before,
  .crime-scene-smoke::before,
  .station-dossier-smoke::before {
    inset: -18px -14px !important;
    border-radius: 34px !important;
    background:
      radial-gradient(ellipse at 50% 42%, rgba(1, 5, 5, 0.99), rgba(1, 5, 5, 0.9) 54%, rgba(1, 5, 5, 0.62) 72%, rgba(142, 228, 206, 0.16) 88%, transparent 100%) !important;
    filter: blur(8px) !important;
    opacity: 0.98 !important;
  }

  .crime-scene-smoke::after {
    opacity: 0.32 !important;
  }

  .archive-list,
  .crime-scene-board {
    background:
      radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.12) 64%, transparent 100%) !important;
    border-radius: 26px !important;
  }
}

@media (max-width: 430px) and (min-height: 780px) {
  .station-title {
    height: clamp(82px, 11dvh, 96px) !important;
    margin-bottom: 6px !important;
  }

  .station-title-copy.station-logo-art {
    height: clamp(76px, 10.5dvh, 92px) !important;
  }

  .experience-panel {
    margin-top: 0 !important;
  }
}

@media (max-width: 390px) {
  .experience-panel {
    width: min(94vw, 366px) !important;
    gap: 6px !important;
  }

  .experience-panel .daily-signal-card,
  .experience-panel .tape-archive-card,
  .experience-panel .case-file-card {
    min-height: 40px !important;
    height: 40px !important;
    padding-inline: 5px !important;
  }

  .experience-panel .daily-signal-card span,
  .experience-panel .tape-archive-card span,
  .experience-panel .case-file-card span {
    font-size: 0.54rem !important;
  }
}

/* Mobile archive focus: recovered transmissions should not sit on the quiz tray. */
@media (max-width: 700px), (pointer: coarse) {
  .has-archive-open .quiz-lightbox {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .has-archive-open .archive-drawer,
  .archive-drawer[aria-hidden="false"] {
    z-index: 246 !important;
    place-items: center !important;
    align-content: center !important;
  }

  .has-archive-open .archive-smoke,
  .archive-drawer[aria-hidden="false"] .archive-smoke {
    align-self: center !important;
    max-height: min(72dvh, 560px) !important;
    margin: 0 auto !important;
  }
}

/* 3:33 dossier only: darker, scalable smoke page without changing other windows. */
.station-dossier {
  z-index: 255 !important;
  background:
    radial-gradient(circle at 50% 22%, rgba(142, 228, 206, 0.06), transparent 26%),
    radial-gradient(circle at 50% 54%, rgba(0, 0, 0, 0.98), #000 66%),
    linear-gradient(180deg, #000, #000 100%) !important;
  backdrop-filter: blur(8px) brightness(0.45) !important;
  -webkit-backdrop-filter: blur(8px) brightness(0.45) !important;
}

.station-dossier-smoke::before {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(0, 0, 0, 0.99), rgba(1, 6, 6, 0.92) 48%, rgba(1, 7, 7, 0.7) 68%, rgba(142, 228, 206, 0.14) 86%, transparent 100%),
    radial-gradient(ellipse at 52% 68%, rgba(232, 177, 95, 0.12), transparent 48%) !important;
}

@media (max-width: 700px), (pointer: coarse) {
  .station-dossier {
    z-index: 255 !important;
    place-items: center !important;
    align-content: center !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding:
      max(18px, env(safe-area-inset-top))
      16px
      max(18px, env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(142, 228, 206, 0.06), transparent 28%),
      radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.98), #000 68%),
      linear-gradient(180deg, #000, #000 100%) !important;
    backdrop-filter: blur(8px) brightness(0.42) !important;
    -webkit-backdrop-filter: blur(8px) brightness(0.42) !important;
  }

  .station-dossier-smoke {
    position: relative !important;
    z-index: 256 !important;
    display: grid !important;
    width: min(92vw, 390px) !important;
    max-height: calc(100dvh - max(42px, env(safe-area-inset-top)) - max(42px, env(safe-area-inset-bottom))) !important;
    padding: clamp(24px, 7vw, 34px) clamp(18px, 5vw, 24px) !important;
    gap: clamp(10px, 2.8vw, 14px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 34px !important;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(142, 228, 206, 0.16), transparent 34%),
      linear-gradient(180deg, rgba(4, 12, 11, 0.98), rgba(0, 0, 0, 0.98) 72%, rgba(0, 0, 0, 0.96)) !important;
    box-shadow:
      inset 0 0 28px rgba(142, 228, 206, 0.12),
      0 0 0 1px rgba(142, 228, 206, 0.08),
      0 24px 80px rgba(0, 0, 0, 0.92) !important;
    color: rgba(248, 238, 214, 0.98) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .station-dossier-smoke > * {
    position: relative !important;
    z-index: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .station-dossier-smoke::before {
    inset: -16px -12px !important;
    border-radius: 42px !important;
    background:
      radial-gradient(ellipse at 50% 42%, rgba(0, 0, 0, 0.995), rgba(1, 5, 5, 0.95) 56%, rgba(1, 5, 5, 0.78) 74%, rgba(142, 228, 206, 0.13) 90%, transparent 100%) !important;
    filter: blur(7px) !important;
    z-index: -1 !important;
  }

  .station-dossier-smoke strong {
    color: rgba(248, 238, 214, 1) !important;
    font-size: clamp(1.65rem, 10vw, 2.55rem) !important;
    line-height: 0.92 !important;
  }

  .station-dossier-smoke p {
    color: rgba(248, 238, 214, 0.94) !important;
    font-size: clamp(0.9rem, 3.7vw, 1rem) !important;
    line-height: 1.38 !important;
  }

  .station-dossier-smoke small {
    color: rgba(142, 228, 206, 0.9) !important;
    font-size: clamp(0.66rem, 2.7vw, 0.78rem) !important;
    line-height: 1.32 !important;
  }

  .station-dossier-close {
    top: 6px !important;
    right: 8px !important;
  }

  .has-station-dossier .quiz-lightbox,
  .has-station-dossier .escaped-transmissions,
  .has-station-dossier .floating-transmission-close,
  .has-station-dossier .video-apparition,
  .has-station-dossier .vault-prize,
  .has-station-dossier .ringtone-bonus,
  .has-station-dossier .archive-drawer,
  .has-station-dossier .crime-scene-drawer,
  .has-station-dossier .crime-photo-lightbox {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}