/* Snakes & Ladders — game-specific */
.board-wrap { flex:1; display:flex; align-items:center; justify-content:center; }

.sl-board {
  position:relative;
  width:min(95vw, 460px);
  aspect-ratio:1/1;
  border:5px solid var(--stroke);
  border-radius:14px;
  box-shadow:0 6px 0 var(--stroke);
  overflow:hidden;
  background:#FAF3E3;
}
.cells {
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:repeat(10, 1fr);
  grid-template-rows:repeat(10, 1fr);
}
.cells .cell {
  display:flex; align-items:flex-start; justify-content:flex-start;
  font-size:9px; font-weight:800; color:rgba(28,24,20,0.55);
  padding:2px 0 0 3px; position:relative;
  border:0.5px solid rgba(28,24,20,0.08);
}
.cells .cell.dark { background:rgba(61,194,255,0.13); }
.cells .cell.light { background:rgba(255,212,59,0.13); }
.cells .cell .mark { position:absolute; right:2px; bottom:0; font-size:13px; line-height:1; }

.overlay-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.token {
  position:absolute; width:8.2%; aspect-ratio:1/1; border-radius:50%;
  border:2.5px solid var(--stroke); box-sizing:border-box;
  transform:translate(-50%, -50%);
  left:0; top:0;
  transition:left 140ms linear, top 140ms linear;
  z-index:5; box-shadow:0 2px 0 rgba(28,24,20,0.4);
}
.token.you { background:#FF5DAA; }
.token.cpu { background:#3DC2FF; }
.token::after { content:''; position:absolute; left:24%; top:20%; width:30%; height:30%; border-radius:50%; background:rgba(255,255,255,0.6); }

.roll-bar { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:14px; }
.roll-btn { min-width:120px; }
.die {
  width:52px; height:52px; border-radius:12px; background:#FAFAFA;
  border:4px solid var(--stroke); box-shadow:0 4px 0 var(--stroke);
  position:relative; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  padding:7px; box-sizing:border-box;
}
.die i { width:9px; height:9px; border-radius:50%; background:var(--stroke); align-self:center; justify-self:center; visibility:hidden; }
.die.rolling { animation:die-shake 0.5s ease; }
@keyframes die-shake { 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-12deg) scale(1.05); } 75%{ transform:rotate(12deg) scale(1.05); } }

.status-line { text-align:center; font-weight:700; font-size:15px; color:var(--muted); margin-top:10px; }