/* Space Invaders: viewport, coarse-pointer and reduced-motion adaptations. */
@media (pointer: coarse), (max-width: 820px) {
  .cabinet {
    gap: 4px;
    padding:
      max(4px, env(safe-area-inset-top))
      max(4px, env(safe-area-inset-right))
      max(4px, env(safe-area-inset-bottom))
      max(4px, env(safe-area-inset-left));
  }

  .cabinet-marquee {
    min-height: 48px;
    grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr);
    padding: 5px 6px;
  }

  .cabinet-marquee h1 {
    font-size: clamp(10px, 3vw, 15px);
  }

  .cabinet-tools {
    gap: 2px;
  }

  .cabinet-link {
    min-width: 44px;
    min-height: 44px;
    padding: 5px 4px;
    font-size: 6px;
  }

  body.is-playing .cabinet-marquee {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
  }

  body.is-playing .cabinet-marquee h1 {
    min-width: 0;
    max-width: 100%;
  }

  body.is-playing .marquee-spacer {
    display: none;
  }

  .audio-toggle {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  body.is-playing .cabinet-stage {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
  }

  body.is-arcade-stage.is-playing .playfield-wrap { height: auto; }

  .hud {
    top: 5px;
    min-height: 36px;
    gap: clamp(8px, 3.5vw, 18px);
    padding: 6px 8px;
  }

  .hud p {
    font-size: clamp(7px, 1.5vw, 10px);
  }






  body.is-post-game .arcade-score-card {
    padding-inline: clamp(14px, 5vw, 42px);
  }
}

@media (max-width: 540px) and (orientation: portrait) {
  body.is-arcade-stage.is-playing .hud { top: -48px; }











  body.is-post-game #post-game-title {
    font-size: clamp(26px, 10vw, 42px);
  }

  body.is-post-game #final-score {
    font-size: clamp(28px, 10vw, 44px);
  }

  body.is-post-game .arcade-score-card {
    justify-content: start;
    padding-block: 24px;
  }

  body.is-post-game .score-entry {
    width: min(300px, 100%);
  }

  body.is-post-game .leaderboard-list {
    grid-template-columns: 1fr;
    max-height: 150px;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  body.is-playing .game-frame { container-type: inline-size; }
  body.is-playing .hud {
    top: 1.2cqw;
    min-height: 0;
    padding: 1cqw 2cqw;
    gap: 3cqw;
    border-width: 1px;
  }
  body.is-playing .hud p { font-size: clamp(6px, 2cqw, 9px); }
  body.is-playing .hud strong { margin-left: 1cqw; }

  .cabinet {
    grid-template-rows: 48px minmax(0, 1fr);
  }

  .cabinet-marquee {
    min-height: 48px;
    padding-block: 2px;
  }

  .cabinet-link {
    min-width: 44px;
    min-height: 44px;
  }

  .audio-toggle {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  body.is-selecting .cabinet-stage {
    display: block;
  }

  body.is-selecting .playfield-wrap,
  body.is-selecting .game-frame {
    width: 100%;
    height: 100%;
  }

  body.is-selecting .cabinet-status {
    display: none;
  }











  body.is-post-game .arcade-score-card {
    gap: 5px;
    padding: 8px 20px;
  }

  body.is-post-game #post-game-title {
    font-size: clamp(25px, 9vh, 42px);
  }

  body.is-post-game #final-score {
    font-size: clamp(22px, 8vh, 36px);
  }

  body.is-post-game .score-entry {
    width: min(300px, 100%);
  }

  body.is-post-game .leaderboard-panel {
    padding-top: 0;
  }

  body.is-post-game .leaderboard-list {
    max-height: 42px;
    gap: 2px 18px;
    font-size: 6px;
  }

  body.is-post-game .scoreboard-actions .score-action {
    min-height: 44px;
    font-size: 7px;
  }
}

@media (pointer: coarse) {
  body.is-post-game .score-entry .score-action,
  .score-action {
    min-height: 44px;
  }
}

@media (max-width: 620px) {
  body.is-post-game .arcade-score-card {
    width: 100%;
  }

  body.is-post-game .scoreboard-actions {
    width: min(360px, 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }

  .crt-overlay {
    display: none;
  }

  .attract-title-text,
  .attract-title-line > span[style],
  .attract-prompt,
  .ship-demo-runner,
  .ship-demo-shot,
  .launch-button,
  body.is-launching .ship-demo-runner,
  .launch-sequence.is-level-visible .launch-sequence-level,
  body.is-post-game #post-game-title > span[style],
  body.is-post-game #final-score > span {
    animation: none;
  }

  .attract-title-text {
    color: var(--gold);
    background: none;
  }

  .ship-demo-shot {
    opacity: 1;
    transform: translate(-50%, -34px) rotate(var(--shot-angle));
  }
}