/* Block — the stage, its glow and shadow, and the controls. Shared chrome: artifact.css */

/*
 * The stage is square, no taller than the screen minus room for the
 * controls. It has no ground of its own: the block stands on the page,
 * with a warm glow behind it and a soft shadow under it, both drawn here
 * rather than in WebGL, and both fading out when nothing is left to glow.
 */
.board__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: calc(100vh - 14rem);
  min-width: min(100%, 16rem);
  margin-inline: auto;
  aspect-ratio: 1;
  /* A touch on it strikes, so no touch may scroll or select. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.board__stage > * {
  grid-area: 1 / 1;
}

.stage__halo,
.stage__cast {
  pointer-events: none;
  transition: opacity 1.4s var(--ease) 0.3s;
}

.stage__halo {
  width: 90%;
  height: 90%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(192, 139, 74, 0.2) 0%, transparent 68%);
  filter: blur(26px);
}

.stage__cast {
  width: 60%;
  height: 14%;
  margin-top: 62%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(40, 32, 22, 0.3) 0%, transparent 72%);
  filter: blur(14px);
}

.game.is-over .stage__halo,
.game.is-over .stage__cast {
  opacity: 0;
}

/*
 * Out of the flow, so the size of its drawing can never feed back into the box's.
 * It is in the tab order, so a keyboard can reach the block; a click focuses it
 * too, but only the keyboard's focus draws the site's ring round it.
 */
.board__stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.board__stage canvas:focus:not(:focus-visible) {
  outline: none;
}

.game.is-over .board__stage canvas {
  cursor: default;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.controls .status {
  flex-basis: 100%;
}

/* The touch hint is hidden by default and shown where a finger is the pointer: the default must come first, or it wins. */
.hint--touch {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .hint--touch {
    display: block;
  }
}

@media (max-width: 47.99rem) {
  .game {
    gap: 1.25rem;
  }

  .board__stage {
    max-width: calc(100vh - 11rem);
  }

  .controls {
    justify-content: center;
  }

  .status {
    text-align: center;
  }

  .actions {
    justify-content: center;
  }
}