/* V4 · One Sky, on top of V2's game styles: one space scene fills the page
   (a canvas, v4/world.mjs), and the deck is a pane of glass over it, so the
   sky shows through the deck and carries on around it. */
.world { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100vh; height: 100lvh; background: var(--space); pointer-events: none; }
/* Out-of-focus crystals and rocks that hang in front of the deck. */
.near { position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.near-piece { position: absolute; will-change: transform; }

/* The deck: no fill of its own. The world canvas tints the glass and paints
   the rocket; the frame, the tiles, and the readout sit on top. It stays
   put as the focal plane: the sky leans behind it instead. */
.board { background: transparent; animation: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 26px rgba(43, 227, 107, .22), 0 0 80px rgba(43, 227, 107, .08), inset 0 0 24px rgba(43, 227, 107, .14), inset 0 1px 0 rgba(215, 255, 232, .1); }
.has-dialog .board { scale: none; }
.has-dialog .world { filter: brightness(.8); }
.world { transition: filter .4s; }
/* The glass catches a little more light than V2's solid deck. */
.board-glass { background: linear-gradient(115deg, transparent 36%, rgba(215, 255, 235, .06) 45%, rgba(215, 255, 235, .025) 51%, transparent 60%); }

@media (prefers-reduced-motion: reduce) {
  .near-piece { transform: none !important; }
}

/* The bezel: the world canvas paints a band of coloured glass --band wide
   inside the deck's edge; the border and this line are its crisp lips. */
.board { --band: 9px; border-color: rgba(120, 255, 170, .62); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 30px rgba(43, 227, 107, .3), 0 0 90px rgba(43, 227, 107, .1), inset 0 0 22px rgba(43, 227, 107, .12); }
.board::before { inset: var(--band); border-color: rgba(170, 255, 205, .36); border-radius: calc(21px - var(--band)); }
@media (max-width: 680px) {
  .board { --band: 6px; }
  .board::before { inset: var(--band); border-radius: calc(17px - var(--band)); }
}
@media (max-height: 500px) and (min-width: 560px) {
  .board { --band: 6px; }
  .board::before { inset: var(--band); border-radius: calc(15px - var(--band)); }
}