/* Snakes' own look, on the game template (static/game.css styles the shell): one canvas stage (static/snakes.js draws
   the twelve cut cells in a ring, the gold road between them, the ivory pawn and the ivory twelve-sided die) and the
   difficulty chips in the panel, two to a row. */

.sn-stage { position: relative; flex: 1; min-height: 340px; }
.sn-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: pan-y; }
.sn-cv:focus-visible { box-shadow: inset 0 0 0 1.5px rgb(216 165 72 / .7); border-radius: 14px; }
.sn-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sn-levels button:last-child { grid-column: 1 / -1; }
.gm.inround .sn-levels button, .gm.autoplaying .sn-levels button { opacity: .5; pointer-events: none; }

@media (max-width: 899px) {
  .gm[data-game="snakes"] .gm-play { min-height: 0; }
  .sn-stage { flex: none; height: 372px; min-height: 0; }
}