/* Tableverse Snakes and Ladders: a 10x10 path board, ladders and snakes drawn over it, one token per player. */
.sl { --sl-red: #e5484d; --sl-blue: #3b82f6; --sl-green: #22a35a; --sl-yellow: #e8b923; }
.sl-feedback { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 12px; padding: 9px 12px; border: 1px solid var(--panel-line); border-radius: 12px; background: var(--panel); font-size: 14px; text-align: center; }
.sl-feedback.ladder { border-color: #5db37f; }
.sl-feedback.snake { border-color: #e0837a; }
.sl-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 280px); gap: 18px; align-items: start; }
.sl-play { min-width: 0; padding: clamp(6px, 1.4vw, 14px); border-radius: 20px; background: linear-gradient(145deg, #e8e4d7, #d9d4c5); box-shadow: inset 0 1px 4px #fff9, 0 8px 28px #00000026; }
.sl-board-wrap { width: 100%; max-width: min(640px, max(300px, calc(100dvh - 260px))); margin: auto; padding-bottom: 9%; }
.sl-board { position: relative; aspect-ratio: 1; border: 4px solid #fdfcf7; border-radius: 10px; background: #f8f7f1; }
.sl-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(10, minmax(0, 1fr)); }
.sl-sq { position: relative; background: #fffdf6; border: 1px solid #e4e0d3; min-width: 0; min-height: 0; }
.sl-sq.alt { background: #f3efdf; }
.sl-sq.goal { background: #f6e3a1; }
.sl-sq i { position: absolute; left: 3px; top: 1px; font-style: normal; font-size: clamp(7px, 1.6vw, 12px); font-weight: 700; color: #9a937d; line-height: 1.2; }
.sl-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .78; }
.sl-ladder { fill: none; stroke: #9a6a2f; stroke-width: .8; stroke-linecap: round; opacity: .92; }
.sl-snake path { fill: none; stroke: var(--snake, #2f9e6b); stroke-width: 2.1; stroke-linecap: round; opacity: .88; }
.sl-snake circle { fill: var(--snake, #2f9e6b); }
.sl-snake .eye { fill: #fff; }
.sl-s1 { --snake: #2f9e6b; } .sl-s2 { --snake: #7a5cc7; } .sl-s3 { --snake: #d9734a; }
.sl-token { position: absolute; z-index: 3; width: 5%; height: 5%; min-width: 14px; min-height: 14px; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid #fff; box-shadow: 0 2px 5px #0005; transition: left .3s ease-in-out, top .3s ease-in-out; }
.sl-token.red { background: var(--sl-red); } .sl-token.blue { background: var(--sl-blue); } .sl-token.green { background: var(--sl-green); } .sl-token.yellow { background: var(--sl-yellow); }
.sl-token.me { outline: 2px solid #111a; outline-offset: 1px; }
.sl-token.turn { z-index: 4; box-shadow: 0 0 0 3px #fff, 0 0 12px 4px #19a66b99; }
.sl-start-label { position: absolute; left: 2%; bottom: -8.6%; font-size: 11px; font-weight: 700; color: #6b6656; }
.sl-side { display: grid; gap: 12px; }
.sl-panel { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 12px; border: 1px solid var(--panel-line); border-radius: 14px; background: var(--panel); }
.sl-panel .sl-roll { grid-column: 1 / -1; min-height: 48px; }
.sl-panel-copy { display: grid; gap: 2px; }
.sl-panel-copy small { color: var(--muted); font-size: 12px; }
.sl-die { width: 54px; height: 54px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 3px; padding: 8px; border-radius: 12px; background: #fffdf6; border: 2px solid #d8d2bd; box-shadow: 0 3px 0 #c9c3ad; }
.sl-die i { width: 100%; height: 100%; border-radius: 50%; background: #2a2a2a; }
.sl-die.blank { place-items: center; display: flex; justify-content: center; align-items: center; }
.sl-die b { color: #8a8470; font-size: 22px; }
.sl-die.tumble { animation: sl-tumble .45s ease-out; }
@keyframes sl-tumble { 0% { transform: rotate(-200deg) scale(.7); } 70% { transform: rotate(12deg) scale(1.08); } 100% { transform: none; } }
.sl-players { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sl-players li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--panel-line); border-radius: 12px; background: var(--panel); min-width: 0; }
.sl-players li.on { border-color: #19a66b; box-shadow: 0 0 0 2px #19a66b33; }
.sl-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.sl-pname small { font-weight: 500; color: var(--muted); }
.sl-pos { color: var(--muted); font-size: 13px; }
.sl-dot { width: 14px; height: 14px; border-radius: 50%; }
.sl-dot.red { background: var(--sl-red); } .sl-dot.blue { background: var(--sl-blue); } .sl-dot.green { background: var(--sl-green); } .sl-dot.yellow { background: var(--sl-yellow); }
.sl-final { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.sl-final li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.06); }
.sl-final li.win { background: rgba(255, 201, 77, .18); }
@media (max-width: 760px) {
  .sl-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sl-players { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sl-token { transition: none; } .sl-die.tumble { animation: none; } }
.sl.sl-jumping .sl-token { transition-duration: .85s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } /* a ladder or snake is one long slide */

/* Short phones: status, board, roll bar and players share one screen. */
@media (max-width: 520px) and (max-height: 700px) {
  .sl .sl-feedback { margin: 4px 0 6px; padding: 5px 10px; font-size: 13px; }
  .sl .sl-feedback.start { display: none; }
  .sl .sl-layout { gap: 6px; }
  .sl .sl-board-wrap { max-width: min(100%, calc(100dvh - 300px)); margin-inline: auto; padding: 6px; }
  .sl .sl-panel { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; }
  .sl .sl-panel .sl-die { width: 40px; height: 40px; }
  .sl .sl-panel-copy small { display: none; }
  .sl .sl-roll { min-height: 44px; min-width: 112px; width: auto; padding-inline: 14px; font-size: 15px; }
  .sl .sl-players { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .sl .sl-players li { grid-template-columns: auto minmax(0, 1fr); gap: 2px 6px; padding: 6px 8px; font-size: 12px; min-width: 0; }
  .sl .sl-players .sl-pos { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
  .sl .sl-pname small { display: none; }
  .sl .sl-panel .sl-roll { grid-column: auto; }
}