/* Space Invaders: truthful first paint and attract-screen presentation. */
body.is-attract-preview .cabinet {
  display: block;
  padding: 0;
}
body.is-attract-screen:not(.is-attract-preview):not(.is-arcade-stage) .cabinet {
  display: grid;
}
body.is-attract-preview .cabinet-stage,
body.is-attract-preview .playfield-wrap,
body.is-arcade-stage .cabinet-stage,
body.is-arcade-stage .playfield-wrap {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}
body.is-attract-preview .cabinet-stage, body.is-arcade-stage .cabinet-stage {
  display: block;
  grid-template: none;
  gap: 0;
}
body.is-attract-preview .playfield-wrap, body.is-arcade-stage .playfield-wrap {
  display: grid;
  grid-column: auto;
  grid-row: auto;
}
body.is-attract-screen:not(.is-attract-preview):not(.is-arcade-stage) .cabinet-stage,
body.is-attract-screen:not(.is-attract-preview):not(.is-arcade-stage) .playfield-wrap {
  min-height: 0;
}
body.is-attract-screen:not(.is-attract-preview):not(.is-arcade-stage) .game-frame {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 5 / 3;
}
body.is-attract-preview .game-frame,
body.is-arcade-stage .game-frame {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 5 / 3;
}
body.is-attract-preview .game-frame {
  border: 0;
  clip-path: none;
}
body.is-attract-screen .hud {
  display: none;
}
body.is-attract-screen .game-frame {
  container-type: inline-size;
}
.attract-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 5cqw, 48px);
  border: 0;
  padding: 5cqw;
  color: var(--gold);
  background: transparent;
  pointer-events: none;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255, 211, 106, 0.55);
}
.attract-title-text .title-gap { display: inline-block; width: 0.32em;
}
.attract-title-text > span[style] {
  animation: space-title-pixel-sweep 2600ms steps(1, end) calc(var(--pixel-order) * 85ms) infinite;
}
.attract-prompt:focus-visible {
  outline: 4px solid #fff0a8;
  outline-offset: 6px;
}
body.is-attract-preview .attract-prompt {
  pointer-events: none;
}
body.is-stage-waiting .attract-title-text, body.is-stage-waiting .attract-prompt {
  animation-play-state: paused;
}
.attract-title-text {
  margin: 0;
  color: var(--gold);
  background: none;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    var(--title-pixel, 3px) 0 0 #ff6b4a,
    0 var(--title-pixel, 3px) 0 #7b2f45,
    var(--title-pixel, 3px) var(--title-pixel, 3px) 0 #24143d;
  position: relative;
  font-size: inherit;
  letter-spacing: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .08em;
  line-height: .96;
  white-space: normal;
}
.attract-title-line { display: block; white-space: nowrap;
}
.attract-title-line > span[style] {
  animation: space-title-pixel-sweep 2600ms steps(1, end) calc(var(--pixel-order) * 85ms) infinite;
}
.attract-title {
  display: block;
  border: clamp(2px, 0.35vw, 4px) solid var(--cyan);
  color: var(--gold);
  background: #020510;
  box-shadow: 0 0 18px rgba(113, 245, 255, 0.24);
  font-size: clamp(18px, 7cqw, 72px);
  line-height: 1.25;
  letter-spacing: -0.04em;
  text-align: center;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 2cqw 3cqw;
}
.attract-prompt {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  min-width: min(34cqw, 360px);
  min-height: clamp(44px, 8cqw, 80px);
  border: 4px solid #020510;
  padding: 1.8cqw 3cqw;
  color: #03101b;
  background: var(--cyan);
  box-shadow:
    inset 6px 6px 0 #d8fbff,
    inset -6px -6px 0 #238196,
    8px 8px 0 #071727,
    12px 12px 0 #092d49,
    0 0 0 4px rgba(113, 245, 255, 0.16),
    0 0 18px rgba(113, 245, 255, 0.32);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  font-size: clamp(11px, 2.5cqw, 24px);
  line-height: 1.35;
  letter-spacing: 0.06em;
  pointer-events: auto;
  cursor: pointer;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  text-transform: uppercase;
  image-rendering: pixelated;
  animation: attract-button-idle 1800ms steps(1, end) infinite;
  display: grid;
  transform: none;
}
.attract-prompt:focus-visible {
  color: #160711;
  background: #ffd36a;
  box-shadow:
    inset 6px 6px 0 #fff0a8,
    inset -6px -6px 0 #b65d2e,
    8px 8px 0 #071727,
    12px 12px 0 #6b2440,
    0 0 0 4px rgba(255, 211, 106, 0.2),
    0 0 24px rgba(255, 90, 79, 0.48);
  animation: none;
  transform: translate(-3px, -3px);
}
@media (hover: hover) and (pointer: fine) {
  .attract-prompt:hover {
    color: #160711;
    background: #ffd36a;
    box-shadow:
      inset 6px 6px 0 #fff0a8,
      inset -6px -6px 0 #b65d2e,
      8px 8px 0 #071727,
      12px 12px 0 #6b2440,
      0 0 0 4px rgba(255, 211, 106, 0.2),
      0 0 24px rgba(255, 90, 79, 0.48);
    animation: none;
    transform: translate(-3px, -3px);
  }
}
.attract-prompt:active {
  color: #03101b;
  background: #d8fbff;
  box-shadow:
    inset 6px 6px 0 #238196,
    inset -3px -3px 0 #fff,
    4px 4px 0 #071727,
    0 0 12px rgba(113, 245, 255, 0.44);
  animation: none;
  transform: translate(8px, 8px);
}
@keyframes attract-button-idle {
  0%, 64% {
    color: #03101b;
    background: var(--cyan);
  }
  65%, 82% {
    color: #160711;
    background: #fff0a8;
    box-shadow:
      inset 6px 6px 0 #fff,
      inset -6px -6px 0 #b65d2e,
      8px 8px 0 #071727,
      12px 12px 0 #6b2440,
      0 0 0 4px rgba(255, 211, 106, 0.2),
      0 0 24px rgba(255, 90, 79, 0.42);
  }
  83%, 100% {
    color: #03101b;
    background: var(--cyan);
    box-shadow:
      inset 6px 6px 0 #d8fbff,
      inset -6px -6px 0 #238196,
      8px 8px 0 #071727,
      12px 12px 0 #092d49,
      0 0 18px rgba(113, 245, 255, 0.4);
  }
}
@keyframes attract-button-charge {
  0%, 49% { color: #160711; background: #ffd36a; }
  50%, 100% { color: #03101b; background: #fff0a8; }
}
@keyframes space-title-pixel-sweep {
  0%, 34% { color: var(--gold); text-shadow: var(--title-pixel, 3px) 0 0 #ff6b4a, 0 var(--title-pixel, 3px) 0 #7b2f45, var(--title-pixel, 3px) var(--title-pixel, 3px) 0 #24143d; }
  35%, 64% { color: #ff685f; text-shadow: var(--title-pixel, 3px) 0 0 #ffe06a, 0 var(--title-pixel, 3px) 0 #a33355, var(--title-pixel, 3px) var(--title-pixel, 3px) 0 #24143d; }
  65%, 100% { color: var(--gold); text-shadow: var(--title-pixel, 3px) 0 0 #ff6b4a, 0 var(--title-pixel, 3px) 0 #7b2f45, var(--title-pixel, 3px) var(--title-pixel, 3px) 0 #24143d; }
}