/* ================= مارپله ================= */
#scr-snakes .sn-tags { display: flex; flex-wrap: wrap; gap: 6px; }
#scr-snakes .sn-wrap { width: 100%; max-width: 520px; margin: 8px auto 0; touch-action: manipulation; }
#scr-snakes .sn-svg { width: 100%; height: auto; display: block; direction: ltr; }
#scr-snakes .sn-bg { fill: #2a1d13; }
#scr-snakes .sn-c.a { fill: #5a4129; }
#scr-snakes .sn-c.b { fill: #46321f; }
#scr-snakes .sn-c.goal { fill: #7a6118; }
#scr-snakes .sn-n { fill: rgba(255, 255, 255, .38); font-size: .27px; font-family: inherit; pointer-events: none; }
#scr-snakes .sn-start { fill: #35261a; stroke: rgba(255, 255, 255, .12); stroke-width: .03; }

#scr-snakes .sn-ladder line { stroke: #d9a441; stroke-width: .08; stroke-linecap: round; }
#scr-snakes .sn-ladder line.rung { stroke-width: .055; stroke: #e8c06a; }
#scr-snakes .sn-snake { pointer-events: none; }
#scr-snakes .sn-snake .body { fill: none; stroke-width: .2; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
#scr-snakes .sn-snake .pat { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: .06; stroke-dasharray: .1 .16; stroke-linecap: round; stroke-linejoin: round; }
#scr-snakes .sn-snake .eye { fill: #fff; }

#scr-snakes .sn-pc { transition-property: transform; transition-timing-function: ease-in-out; will-change: transform; }
#scr-snakes .sn-pb { stroke-width: .06; filter: drop-shadow(0 .03px .03px rgba(0, 0, 0, .6)); }
#scr-snakes .sn-pd { fill: rgba(255, 255, 255, .55); }
#scr-snakes .sn-pc.cur .sn-pb { animation: snPulse 1s ease-in-out infinite; }
#scr-snakes .sn-pc.me .sn-pb { stroke: #fff; }
@keyframes snPulse { 0%, 100% { stroke-width: .06; } 50% { stroke-width: .14; } }

#scr-snakes .sn-turnbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); border-inline-start: 4px solid var(--c, #888); }
#scr-snakes .sn-timer { font-variant-numeric: tabular-nums; opacity: .85; }
#scr-snakes .sn-timer.warn { color: #ff6b6b; font-weight: 700; }

#scr-snakes .sn-controls { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 10px; }
#scr-snakes .sn-dice { width: 76px; height: 76px; border-radius: 18px; font-size: 54px; line-height: 1; border: 2px solid rgba(255, 255, 255, .15);
  background: #fff; color: #1a1a1a; cursor: pointer; padding: 0; display: grid; place-items: center; opacity: .75; }
#scr-snakes .sn-dice.ready { opacity: 1; border-color: #f5c242; box-shadow: 0 0 0 3px rgba(245, 194, 66, .35); animation: snReady 1.2s ease-in-out infinite; }
#scr-snakes .sn-dice:disabled { cursor: default; }
#scr-snakes .sn-dice.roll { animation: snRoll .5s ease-out; }
@keyframes snReady { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes snRoll { 0% { transform: rotate(0) scale(.8); } 60% { transform: rotate(300deg) scale(1.12); } 100% { transform: rotate(360deg) scale(1); } }
#scr-snakes .sn-hint { min-width: 0; flex: 1; max-width: 220px; opacity: .85; }

#scr-snakes .sn-pos { font-weight: 700; opacity: .8; }
#scr-snakes .sn-over.won { box-shadow: 0 0 0 2px #f5c242 inset; }
#scr-snakes .sn-over { text-align: center; }
#scr-snakes .sn-over .big-emoji { font-size: 44px; }

@media (prefers-reduced-motion: reduce) {
  #scr-snakes .sn-dice.ready, #scr-snakes .sn-dice.roll, #scr-snakes .sn-pc.cur .sn-pb { animation: none; }
}