/* Final Haunted FM radio alignment overrides.
   Loaded after the main stylesheet so the radio skin, clock, and clue ring share one box. */

.radio-face .dial-window,
body .radio-face .dial-window,
body.is-mobile-performance .radio-face .dial-window {
  left: 50.186% !important;
  top: 57.423% !important;
  width: 37.08% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: 50% 50% !important;
  overflow: visible !important;
}

.radio-face .video-clues,
body .radio-face .video-clues,
body.is-mobile-performance .radio-face .video-clues,
.radio-face .dial-scale,
body .radio-face .dial-scale,
body.is-mobile-performance .radio-face .dial-scale,
.radio-face .glass-glow,
body .radio-face .glass-glow,
body.is-mobile-performance .radio-face .glass-glow {
  position: absolute !important;
  inset: 0 !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
}

.radio-face .dial-window > .dial-center,
body .radio-face .dial-window > .dial-center,
body.is-mobile-performance .radio-face .dial-window > .dial-center {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 26 !important;
  width: 48% !important;
  height: 48% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: 50% 50% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.radio-face .dial-center strong,
.radio-face .dial-center small,
body .radio-face .dial-center strong,
body .radio-face .dial-center small,
body.is-mobile-performance .radio-face .dial-center strong,
body.is-mobile-performance .radio-face .dial-center small {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  margin-inline: auto !important;
  transform: none !important;
  text-align: center !important;
  white-space: nowrap !important;
}

body:not(.is-dial-unlocked) .radio-face .video-clue,
body:not(.is-dial-unlocked) .radio-face .video-clue.is-target {
  left: var(--base-x, 50%) !important;
  top: var(--base-y, 50%) !important;
  transform: translate(-50%, -50%) !important;
}

@media (max-width: 700px), (pointer: coarse) {
  .radio-face::before,
  .radio-face::after,
  .radio-face .radio-skin,
  .radio-face .broadcast-glass,
  .radio-face .glass-glow,
  .radio-face .dial-scale,
  .radio-face .needle,
  .radio-face .speaker,
  .radio-face .radio-brand-engraving,
  .radio-face .tuning-window,
  .radio-face .marquee-window,
  .radio-face .signal-meter,
  .start-spotlight,
  .magic-dust,
  .smoke {
    pointer-events: none !important;
  }

  .radio-face .power-switch,
  body .radio-face .power-switch,
  body.is-awake .radio-face .power-switch,
  body.is-dial-unlocked.is-awake .radio-face .power-switch {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    z-index: 140 !important;
    min-width: 92px !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
  }

  .radio-face .power-switch::before,
  .radio-face .power-switch::after {
    pointer-events: none !important;
  }

  .quiz-answers button,
  .experience-panel button,
  .station-dossier-button,
  .daily-signal-card,
  .archive-tape,
  .crime-photo-card,
  .video-clue,
  .escaped-transmissions .video-clue {
    touch-action: manipulation !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    pointer-events: auto !important;
  }

  .is-quiz-open .quiz-lightbox,
  .quiz-answers {
    pointer-events: auto !important;
    z-index: 150 !important;
  }
}

/* iPhone Safari stability reset: no page-wide gesture locks, only controls opt into fast taps. */
@media (max-width: 700px), (pointer: coarse) {
  html,
  body,
  .app,
  .radio-stage,
  .radio-console,
  .radio-shell,
  .radio-face {
    touch-action: manipulation !important;
    overscroll-behavior: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  button,
  a,
  [role="button"],
  [role="switch"],
  .quiz-answers button,
  .video-clue,
  .archive-tape,
  .crime-photo-card {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .radio-face .power-switch,
  body .radio-face .power-switch,
  body.is-awake .radio-face .power-switch,
  body.is-dial-unlocked.is-awake .radio-face .power-switch {
    z-index: 240 !important;
    pointer-events: auto !important;
  }

  .experience-panel,
  .quiz-lightbox,
  .station-dossier-button {
    z-index: 120 !important;
  }

  .escaped-transmissions {
    pointer-events: none !important;
  }

  .escaped-transmissions .video-clue.is-escaped {
    left: 50vw !important;
    top: clamp(128px, 18dvh, 168px) !important;
    width: clamp(116px, 32vw, 138px) !important;
    height: clamp(116px, 32vw, 138px) !important;
    transform: translate(-50%, -50%) !important;
    animation-duration: 3.8s !important;
    pointer-events: auto !important;
    z-index: 245 !important;
  }
}

/* Mobile tap map: keep the signal/archive/case-file buttons from sharing a hitbox. */
@media (max-width: 700px), (pointer: coarse) {
  .experience-panel {
    position: relative !important;
    isolation: isolate !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: min(94vw, 386px) !important;
    margin-inline: auto !important;
    z-index: 260 !important;
    pointer-events: auto !important;
  }

  .experience-panel .daily-signal-card,
  .experience-panel .tape-archive-card,
  .experience-panel .case-file-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 7px !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .experience-panel .daily-signal-card::before,
  .experience-panel .tape-archive-card::before,
  .experience-panel .case-file-card::before,
  .experience-panel .daily-signal-card::after,
  .experience-panel .tape-archive-card::after,
  .experience-panel .case-file-card::after {
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }

  .experience-panel .daily-signal-card {
    grid-column: 1 !important;
  }

  .experience-panel .tape-archive-card {
    grid-column: 2 !important;
  }

  .experience-panel .case-file-card {
    grid-column: 3 !important;
  }

  .experience-panel span,
  .experience-panel strong {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

body.is-dial-unlocked .escaped-transmissions .video-clue.is-escaped {
    top: clamp(210px, 31dvh, 292px) !important;
    z-index: 230 !important;
  }
}

/* Archive modal: recovered transmissions should open in the middle of the radio frame. */
.has-archive-open .archive-drawer,
.archive-drawer[aria-hidden="false"] {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)) !important;
}

.has-archive-open .archive-smoke,
.archive-drawer[aria-hidden="false"] .archive-smoke {
  align-self: center !important;
  justify-self: center !important;
  margin: 0 auto !important;
  transform: none !important;
}