.mines-board {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 520px;
  padding: 28px;
  background:
    radial-gradient(520px 420px at 50% 50%, rgb(61 123 255 / 0.12), transparent 70%),
    var(--bg-0);
  transition: background-color 400ms;
}
.mines-board.is-lost { background: radial-gradient(520px 420px at 50% 50%, rgb(255 77 99 / 0.12), transparent 70%), var(--bg-0); }
.mines-board.is-won { background: radial-gradient(520px 420px at 50% 50%, rgb(34 224 143 / 0.12), transparent 70%), var(--bg-0); }

.mines-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(8px, 1.4vw, 14px);
  width: min(100%, 540px);
}
.mines-grid.is-dealing .mine-tile { animation: tile-deal 420ms var(--ease-spring) backwards; }
.mines-grid.is-dealing .mine-tile:nth-child(5n+2) { animation-delay: 30ms; }
.mines-grid.is-dealing .mine-tile:nth-child(5n+3) { animation-delay: 60ms; }
.mines-grid.is-dealing .mine-tile:nth-child(5n+4) { animation-delay: 90ms; }
.mines-grid.is-dealing .mine-tile:nth-child(5n) { animation-delay: 120ms; }
@keyframes tile-deal { from { transform: scale(0.6) translateY(10px); opacity: 0; } }

.mine-tile {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  perspective: 600px;
}
.mine-tile:disabled { cursor: default; }
.mine-tile__face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #34558f, #2b4a8f);
  box-shadow: 0 5px 0 #152a5c, inset 0 1px 0 rgb(255 255 255 / 0.12);
  transition: transform 160ms var(--ease-out), background-color 160ms, box-shadow 160ms, opacity 200ms;
}
.mine-tile:not(:disabled):hover .mine-tile__face {
  transform: translateY(-3px);
  background: linear-gradient(180deg, #4166a8, #34579c);
  box-shadow: 0 8px 0 #152a5c, 0 12px 24px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.16);
}
.mine-tile:not(:disabled):active .mine-tile__face { transform: translateY(2px); box-shadow: 0 2px 0 #152a5c; }
.mine-tile:disabled:not(.is-gem):not(.is-mine) .mine-tile__face { opacity: 0.72; }
.mine-tile.is-pending .mine-tile__face { animation: tile-pending 500ms ease-in-out infinite alternate; }
@keyframes tile-pending { to { background: #5b7fc4; transform: translateY(-2px); } }

.mine-tile.is-gem .mine-tile__face,
.mine-tile.is-mine .mine-tile__face {
  background: #0a1633;
  box-shadow: inset 0 0 0 2px #1d3570;
  transform: none;
}
.mine-tile.is-gem:not(.is-dim) .mine-tile__face {
  background: radial-gradient(circle, rgb(47 227 140 / 0.28), #0a1633 70%);
  box-shadow: inset 0 0 0 2px rgb(47 227 140 / 0.55), 0 0 22px rgb(47 227 140 / 0.25);
}
.mine-tile.is-mine:not(.is-dim) .mine-tile__face {
  background: radial-gradient(circle, rgb(255 77 99 / 0.4), #2a0a12 70%);
  box-shadow: inset 0 0 0 2px rgb(255 77 99 / 0.7), 0 0 28px rgb(255 77 99 / 0.4);
}
.mine-tile__content {
  position: absolute;
  inset: 14%;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.mine-tile__content .sprite { width: 100%; height: 100%; }
.mine-tile.is-flipped .mine-tile__content { animation: sprite-pop 460ms var(--ease-spring); }
.mine-tile.is-flipped .mine-tile__face { animation: tile-flip 360ms var(--ease-out); }
.mine-tile.is-dim .mine-tile__content { opacity: 0.4; transform: scale(0.78); }
.mine-tile.is-dim .mine-tile__face { opacity: 0.55; }
@keyframes sprite-pop { from { transform: scale(0.2) rotate(-25deg); opacity: 0; } }
@keyframes tile-flip { from { transform: rotateY(90deg); } }

/* Next multiplier hint on hover. */
.mine-tile:not(:disabled)[data-next]:hover::after {
  content: attr(data-next);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  translate: -50% 0;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg-0);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
  animation: fade-in 150ms;
}

@media (max-width: 600px) {
  .mines-board { min-height: 380px; padding: 16px; }
}