@import url('/assets/shared/pixel-audio.css?v=8035127e7ac5');

/* Space Invaders: cabinet chrome, HUD, canvas frame, touch and pause controls. */
* {
  box-sizing: border-box
}
button, input {
  font: inherit
}
button {
  -webkit-tap-highlight-color: transparent
}
.cabinet {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(5px, 0.7vh, 9px);
  width: min(1500px, 100%);
  height: 100dvh;
  margin: 0 auto;
  padding:
    max(6px, env(safe-area-inset-top))
    max(6px, env(safe-area-inset-right))
    max(6px, env(safe-area-inset-bottom))
    max(6px, env(safe-area-inset-left))
}
.cabinet::before {
  content: '';
  position: absolute;
  inset: 3px;
  z-index: -1;
  border: 2px solid #142c58;
  background: linear-gradient(180deg, rgba(13, 25, 53, 0.94), rgba(5, 9, 24, 0.98));
  box-shadow:
    inset 0 0 0 3px #050914,
    inset 0 0 0 5px rgba(43, 129, 146, 0.35),
    0 0 28px rgba(34, 123, 160, 0.16);
  clip-path: polygon(
    var(--edge) 0,
    calc(100% - var(--edge)) 0,
    100% var(--edge),
    100% calc(100% - var(--edge)),
    calc(100% - var(--edge)) 100%,
    var(--edge) 100%,
    0 calc(100% - var(--edge)),
    0 var(--edge)
  )
}
.cabinet-marquee {
  min-height: clamp(40px, 6.3vh, 62px);
  display: grid;
  grid-template-columns: minmax(92px, 1fr) auto minmax(92px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px clamp(10px, 1.5vw, 20px);
  border-bottom: 2px solid var(--cyan-dim);
  background: #071024;
  box-shadow: inset 0 -3px #030713
}
.cabinet-marquee h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(11px, 1.5vw, 18px);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #17395a
}
.audio-toggle {
  position: relative;
  cursor: pointer
}
.audio-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px
}
.cabinet-tools {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0
}
.cabinet-link, .pixel-text-button {
  min-height: 32px;
  border: 0;
  padding: 7px 8px;
  color: var(--cyan);
  background: transparent;
  font-family: var(--pixel-font);
  font-size: clamp(7px, 0.72vw, 10px);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer
}
@media (hover: hover) and (pointer: fine) {
  .cabinet-link:hover, .pixel-text-button:hover {
    color: #fff
  }
}
.cabinet-stage {
  touch-action: none;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(4px, 0.7vh, 8px)
}
.playfield-wrap {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none
}
.game-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 5 / 3;
  background: var(--screen);
  border: 2px solid var(--cyan-dim);
  box-shadow:
    inset 0 0 0 3px #02050d,
    0 0 0 2px #142c58,
    0 8px 20px rgba(0, 0, 0, 0.45);
  clip-path: polygon(
    9px 0,
    calc(100% - 9px) 0,
    100% 9px,
    100% calc(100% - 9px),
    calc(100% - 9px) 100%,
    9px 100%,
    0 calc(100% - 9px),
    0 9px
  )
}
#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--screen);
  image-rendering: pixelated;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(113, 245, 255, 0.12));
  outline: none
}
.hud p:nth-child(2) {
  color: var(--pink)
}
.hud p:nth-child(3) {
  color: var(--gold)
}
.cabinet-status {
  min-height: 19px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(6px, 0.72vw, 9px);
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase
}
.pause-overlay {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-content: center;
  gap: 10px;
  color: var(--gold);
  background: rgba(3, 8, 23, 0.86);
  text-align: center;
  text-transform: uppercase
}
.pause-overlay strong {
  font-size: clamp(18px, 4vw, 44px)
}
.pause-overlay span {
  color: var(--ink);
  font-size: clamp(7px, 1vw, 11px)
}
@media (pointer: coarse) {
  .cabinet-link:active, .pixel-text-button:active, .audio-toggle:active {
    color: var(--gold);
    background: #102545;
    transform: translate(2px, 2px)
  }
}
body.is-playing .game-frame {
  border-color: #214a67
}
body.is-arcade-stage .game-frame {
  border: 0;
  clip-path: none
}
body.is-arcade-stage .cabinet {
  grid-template-rows: minmax(0, 1fr)
}
body.is-arcade-stage .cabinet-marquee {
  display: none
}
body.is-arcade-stage .cabinet-status {
  display: none
}
.hud {
  position: absolute;
  top: clamp(6px, 1vw, 12px);
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  white-space: nowrap;
  min-height: 42px;
  gap: clamp(18px, 3.5vw, 46px);
  padding: 9px 16px;
  border: 3px solid rgba(113, 245, 255, 0.78);
  background: rgba(3, 8, 23, 0.94);
  box-shadow: 4px 4px 0 #071727, inset 0 0 0 2px rgba(113, 245, 255, 0.12)
}
.hud p {
  margin: 0;
  color: var(--cyan);
  line-height: 1.3;
  text-transform: uppercase; font-size: clamp(9px, 1.25vw, 14px)
}
.hud strong {
  font-weight: 400; margin-left: 7px; color: #ffffff; font-size: 1.08em
}
.run-summary {
  margin-top: 8px;
  text-align: center
}