/* Data-driven board layout states. The runtime writes grid slots from shell-tide-board-templates.js. */

.board-grid[data-board-template="classic_ring_12"] {
  transition: min-width 180ms ease;
}

.board-grid[data-board-layout="wide"] {
  grid-auto-flow: row;
  gap: 12px;
  min-height: 228px;
}

.board-grid[data-board-layout="wide"] .cup.wet-pit {
  min-height: 228px;
  align-self: stretch;
}

.board-grid[data-board-layout="compact"] {
  grid-auto-flow: row;
  gap: 8px;
  min-height: 276px;
}

.board-grid[data-board-layout="compact"] .cup {
  min-width: 72px;
  min-height: 84px;
  padding: 7px 5px;
}

.board-grid[data-board-layout="compact"] .cup.wet-pit {
  min-height: 84px;
}

.board-grid[data-board-layout="compact"] .tokens {
  max-width: 66px;
  max-height: 58px;
}

.board-grid[data-board-layout="compact"] .token {
  width: 23px;
  height: 23px;
  flex-basis: 23px;
  font-size: 18px;
}

.board-grid[data-board-layout="compact"] .cup-index {
  width: 17px;
  height: 17px;
  font-size: 9px;
}

body[data-board-layout="compact"] .board-scroll {
  padding-bottom: 5px;
}

@media (max-width: 760px) {
  .board-card {
    padding-inline: 10px;
  }

  .board-instructions {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-grid[data-board-template="classic_ring_12"] {
    transition: none;
  }
}