/* The portrait cockpit uses its own illustrated housing. Its presentation follows
   the existing startup/audio clock, so pausing or skipping cannot leave it behind. */
.nuclear-lights-mobile-frame { display: none; }

@media (max-aspect-ratio: 1/1) {
  #app :is(.cockpit-shell, .startup-cockpit-video, .nuclear-lights-frame) {
    display: none !important;
  }

  #app .mobile-cockpit-art {
    pointer-events: none;
  }

  #app.startup-armed .mobile-cockpit-art {
    opacity: clamp(0, calc((1 - var(--startup-screen-veil, 1)) * 1.12), 1);
    transition: none;
  }

  #app.startup-armed[data-startup-stage='waiting'] .mobile-cockpit-art {
    opacity: 0;
  }

  #app .mobile-cockpit-art::before {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--mobile-header, 26cqw)) -5.637cqw calc(-1 * var(--mobile-footer, 71cqw));
    pointer-events: none;
    opacity: 0;
  }

  /* A light scan assembles the new artwork without scaling or stretching it.
     All values advance from StartupIntro.revealScreen rather than a CSS timer. */
  #app.startup-armed .mobile-cockpit-art::before {
    opacity: var(--startup-screen-pattern, 0);
    background-image:
      linear-gradient(180deg, transparent 0%, #79dfff10 38%, #b9f1ff98 49%, #fff9dcba 50%, #63cfff1c 57%, transparent 100%),
      repeating-linear-gradient(0deg, transparent 0 3px, #91e4ff25 3px 4px);
    background-size: 100% 22%, 100% 4px;
    background-repeat: no-repeat, repeat;
    background-position: 0 var(--startup-screen-scan, -20%), 0 var(--startup-screen-lines, 0px);
    mix-blend-mode: screen;
  }

  /* These compact buttons share the timing and sounds of their real panels.
     :has keeps that relationship even when the mobile buttons live elsewhere. */
  #app.startup-armed :is(#mobile-log-button, #mobile-collections-button) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  #app.startup-armed:has(.power-panel.startup-revealed) #mobile-collections-button,
  #app.startup-armed:has(.history-strip.startup-revealed) #mobile-log-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: startupInstrumentOnline .7s ease-out;
  }

  #app.startup-suspended :is(#mobile-log-button, #mobile-collections-button) {
    animation-play-state: paused !important;
  }

  /* The original desktop lamps no longer match the portrait illustration. */
  #app .nuclear-lights-panel,
  #app .nuclear-lights-history-mobile,
  #app .nuclear-lights-portrait {
    display: none !important;
  }

  #app.nuclear-alarm .nuclear-lights-mobile-frame {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
  }

  #app svg.nuclear-lights-mobile-header {
    inset: 0 0 auto;
    width: 100%;
    height: var(--mobile-header, 26cqw);
  }

  #app svg.nuclear-lights-mobile-sides {
    inset: var(--mobile-header, 26cqw) 0 var(--mobile-footer, 71cqw);
    width: 100%;
    height: calc(100% - var(--mobile-header, 26cqw) - var(--mobile-footer, 71cqw));
  }

  #app svg.nuclear-lights-mobile-footer {
    inset: auto 0 0;
    width: 100%;
    height: var(--mobile-footer, 71cqw);
  }

  /* Repaint only the actual orange lamps. The 3D window remains transparent. */
  #app .nuclear-lights-mobile .nuclear-lights-bloom {
    stroke-width: 15;
    filter: blur(4px);
    opacity: .5;
  }

  #app .nuclear-lights-mobile .nuclear-lights-tube {
    stroke-width: 5.5;
  }

  #app .nuclear-lights-mobile .nuclear-lights-core {
    stroke-width: 1.65;
  }

  .reduced-motion #app.startup-armed .mobile-cockpit-art::before,
  #app.startup-armed.reduced-motion .mobile-cockpit-art::before {
    display: none;
  }

  .reduced-motion #app.startup-armed :is(#mobile-log-button, #mobile-collections-button),
  #app.startup-armed.reduced-motion :is(#mobile-log-button, #mobile-collections-button) {
    animation: none !important;
  }

  #app.startup-armed .nuclear-lights-mobile-frame {
    display: none;
  }
}

@media (max-aspect-ratio: 1/1) and (prefers-reduced-motion: reduce) {
  #app.startup-armed .mobile-cockpit-art::before {
    display: none;
  }

  #app.startup-armed :is(#mobile-log-button, #mobile-collections-button) {
    animation: none !important;
  }
}