/* Mines' own look, on the game template (static/game.css styles the shell and the .gm-cell primitive): the board of
   cut cells, the tiles you can turn lighting up only while a round is open, the Auto picks in gold, the ghosts at the
   end. The plate under the stage says how the round goes. */

.mn-stage { flex: 1; display: grid; place-items: center; padding: 14px; }
.mn-board { width: min(100%, 560px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mn-tile { aspect-ratio: 1; cursor: default; }
.mn-board.live .mn-tile.live { cursor: pointer; }
.mn-tile.pending { --lnc: var(--gold-line); animation: mn-wait .7s ease-in-out infinite alternate; }

/* Auto: the tiles to turn each round are picked on the board, gold-outlined, with a small gold mark */
.mn-board.aedit .mn-tile:not(.rev) { cursor: pointer; }
.mn-board.aedit .mn-tile:not(.rev):hover { --fill: var(--cell-hi); --lnc: rgb(216 165 72 / .55); }
.mn-tile.apick:not(.rev) { --lnc: var(--gold-line); }
.mn-board.aedit .mn-tile.apick:not(.rev):hover { --lnc: var(--gold-hi); }
.mn-tile.apick:not(.rev) > i::after { content: ""; width: 10px; height: 10px; background: var(--gold-line);
  clip-path: polygon(3px 0, 100% 0, 100% 7px, 7px 100%, 0 100%, 0 3px); }
.gm.autoplaying .mn-board.aedit .mn-tile { cursor: default; }
.gm.autoplaying .mn-board.aedit .mn-tile:not(.rev):hover { --fill: var(--cell); --lnc: transparent; }
.gm.autoplaying .mn-board.aedit .mn-tile.apick:not(.rev):hover { --lnc: var(--gold-line); }

@media (max-width: 899px) {
  .gm[data-game="mines"] .gm-play { min-height: 0; }
  .mn-board { gap: 8px; }
}
@keyframes mn-wait { from { filter: brightness(1); } to { filter: brightness(1.4); } }
@media (prefers-reduced-motion: reduce) { .mn-tile.pending { animation: none; } }