/* Mosaic — the stones, their readouts and their controls. Shared chrome: artifact.css */

.board {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/*
 * The stage takes the picture's own proportion — the controller sets
 * --aspect from the stones' width over their height — no taller than the
 * screen minus room for the buttons, and stands in the middle when the
 * column is wider than it. It has no ground of its own: the stones stand
 * on the page, which shows through the joints and around them.
 */
.board__stage {
  position: relative;
  width: 100%;
  max-width: calc((100vh - 12rem) * var(--aspect, 0.6));
  min-width: min(100%, 16rem);
  margin-inline: auto;
  aspect-ratio: var(--aspect, 0.6);
  overflow: hidden;
  /* A touch anywhere on it sends a wave, so no touch may scroll or select. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

/* Dragging turns the picture; the hand says so. */
.game.is-dragging .board__stage {
  cursor: grabbing;
}

/* The picture takes the keys when touched; nothing tabs to it, so no ring need say so. */
.board__stage:focus {
  outline: none;
}

/* Out of the flow, so the size of its drawing can never feed back into the box's. */
.board__stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* The pictures, by number only, the one up pressed. */
.pictures {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.picture {
  min-width: 2.75rem;
  padding-inline: 0.6rem;
}

.picture[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.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 - 9rem) * var(--aspect, 0.6));
  }

  .controls {
    justify-content: center;
  }

  .status {
    min-height: 1.4em;
    text-align: center;
  }

  .actions {
    justify-content: center;
  }
}