/* =============================================================
   GAME: Snakes and Ladders
   ============================================================= */
.board-snakes {
  --sl-glow: #2bff9a;
  width: min(calc(100vw - 64px), 540px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.sl-stage {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 14px; background: #08121c;
  box-shadow: 0 0 0 2px var(--sl-glow), 0 0 26px rgba(43, 255, 154, .35);
}
.sl-svg { display: block; width: 100%; height: 100%; border-radius: 14px; } /* pieces on the top row may poke out above the board */
.sl-sq.a { fill: #0f2230; }
.sl-sq.b { fill: #16163a; }
.sl-sq.goal { fill: #3b3410; }
.sl-num { font: 700 2.5px var(--font-body); fill: rgba(239, 237, 255, .55); pointer-events: none; }

.sl-rail { fill: none; stroke: #ffd23f; stroke-width: .75; stroke-linecap: round; }
.sl-rung { fill: none; stroke: #ffd23f; stroke-width: .55; stroke-linecap: round; opacity: .85; }
.sl-body { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.sl-stripe { fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: .9 1.6; stroke: rgba(10, 6, 30, .55); }
.sl-snake.s0 { --sc: #ff4fb0; }
.sl-snake.s1 { --sc: #2bff9a; }
.sl-snake.s2 { --sc: #b768ff; }
.sl-snake .sl-body { stroke: var(--sc); }
.sl-snake .sl-head { fill: var(--sc); }
.sl-eye { fill: #0a0618; }
.sl-tongue { fill: none; stroke: #ff3d3d; stroke-width: .35; stroke-linecap: round; }

/* tokens: pawn pieces positioned in % of the board; the base stands on the square's centre */
.sl-token {
  position: absolute; width: 8.4%; aspect-ratio: 100 / 120; transform: translate(-50%, -76%);
  z-index: 2; pointer-events: none; color: var(--p1);
  transition: left .16s ease-out, top .16s ease-out;
}
.sl-token.p2 { color: var(--p2); }
.sl-token::before {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -5%; height: 20%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent);
}
.sl-pawn {
  position: relative; display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 88%;
  filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 70%, transparent)); transition: transform .2s, opacity .2s;
}
.sl-token.slide { transition: left .7s ease-in-out, top .7s ease-in-out; z-index: 3; }
.sl-token.slide .sl-pawn { transform: scale(1.12); }
.sl-token.home .sl-pawn { transform: scale(.8); opacity: .85; }

/* die: a real 3D cube; the current player's colour glows on the table under it */
.sl-controls { display: flex; align-items: center; justify-content: center; gap: 20px; }
.sl-die {
  --die-c: var(--sl-glow); --s: 44px;
  position: relative; width: 60px; height: 60px; flex: none; display: grid; place-items: center; perspective: 260px;
  border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--die-c) 45%, transparent), transparent 75%);
}
.sl-cube {
  position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.2, .75, .3, 1.08);
}
.sl-die.instant .sl-cube { transition: none; }
.sl-die.rolling { animation: sl-toss .62s ease-out; }
@keyframes sl-toss { 0% { transform: translateY(0); } 35% { transform: translateY(-14px); } 70% { transform: translateY(1px); } 85% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
.sl-face {
  position: absolute; inset: 0; padding: 16%; border-radius: 14%; backface-visibility: hidden;
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); place-items: center;
  background: radial-gradient(circle at 30% 25%, #fff, #ece8fb 55%, #cfc8e8);
  box-shadow: inset 0 0 0 1px rgba(40, 20, 80, .18), inset -2px -3px 5px rgba(60, 40, 110, .25), inset 2px 2px 4px #fff;
}
.sl-face.f1 { transform: translateZ(calc(var(--s) / 2)); }
.sl-face.f6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.sl-face.f3 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.sl-face.f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.sl-face.f2 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.sl-face.f5 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.sl-face i { width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4a3f7a, #120a26 70%); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .8); }
.sl-face.f1 i { width: 90%; background: radial-gradient(circle at 40% 35%, #5dffb6, #0b8a52 70%); }
.sl-die.blank .sl-face i { visibility: hidden; }
.sl-roll { min-width: 150px; font-size: 1.1rem; }
.sl-note { margin: 0; min-height: 1.5em; text-align: center; color: var(--muted); font-weight: 600; }