/* Galaga (public/arcade/galaga.js). Arcade tokens come from arcade.css. The playfield is one canvas,
   centered on the CRT; the only DOM on top is the "waiting for them" card after you're out. */
.ag-stage[data-kind="galaga"] { touch-action: none; cursor: crosshair; }
.ag-stage[data-kind="galaga"] .gl-wrap { position: absolute; inset: 0; display: grid; place-items: center; }
.ag-stage[data-kind="galaga"] .gl-cv { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.ag-stage[data-kind="galaga"] .gl-wait { position: absolute; left: 0; right: 0; top: 22%; z-index: 2; pointer-events: none;
  padding: 14px 16px 18px; text-align: center; background: rgba(0, 0, 0, .78); border-top: 2px solid #262a52; border-bottom: 2px solid #262a52; }
.ag-stage[data-kind="galaga"] .gl-wait[hidden] { display: none; }
.ag-stage[data-kind="galaga"] .gl-wait p { margin: 0; }
.ag-stage[data-kind="galaga"] .gl-lbl { font: 400 16px/1.3 var(--font); color: #b3bcff; }
.ag-stage[data-kind="galaga"] .gl-final { font: 400 72px/1 var(--ac-pixel, "Jersey 10"); color: var(--gl-me, #f6f7ff); letter-spacing: .02em; }
.ag-stage[data-kind="galaga"] .gl-for { margin-top: 8px; font: 400 40px/1 var(--ac-pixel, "Jersey 10"); color: #f6f7ff; overflow-wrap: anywhere; }
.ag-stage[data-kind="galaga"] .gl-for[hidden] { display: none; }
@media (max-height: 560px) {
  .ag-stage[data-kind="galaga"] .gl-final { font-size: 52px; }
  .ag-stage[data-kind="galaga"] .gl-for { font-size: 30px; }
}