/* ==========================================================================
   بازی مار و پله مدرن و مینیمال (QuizB Snakes & Ladders)
   پشتیبانی دوگانه از تم روشن و تاریک قالب سایت (Light & Dark Mode)
   چیدمان ۳ ستونه: گفتگوی ۴ نفره ریل‌تایم (چپ) • تخته بازی (مرکز) • کنترل‌ها و تاس (راست)
   ========================================================================== */

:root {
  --sn-bg: #f8fafc;
  --sn-border: #e2e8f0;
  --sn-panel-bg: #ffffff;
  --sn-panel-border: #e2e8f0;
  --sn-panel-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --sn-text-main: #0f172a;
  --sn-text-muted: #64748b;
  --sn-subtle-bg: #f1f5f9;
  --sn-input-bg: #ffffff;
  --sn-input-border: #cbd5e1;
  --sn-input-text: #0f172a;
  --sn-board-wrap-bg: #ffffff;
  --sn-board-wrap-border: #e2e8f0;
  --sn-board-wrap-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  --sn-accent: #059669;
  --sn-accent-hover: #047857;
  --sn-accent-light: #ecfdf5;
}

html.dark {
  --sn-bg: #0b1120;
  --sn-border: #1e293b;
  --sn-panel-bg: #0f172a;
  --sn-panel-border: #1e293b;
  --sn-panel-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
  --sn-text-main: #f8fafc;
  --sn-text-muted: #94a3b8;
  --sn-subtle-bg: #1e293b;
  --sn-input-bg: #020617;
  --sn-input-border: #334155;
  --sn-input-text: #f8fafc;
  --sn-board-wrap-bg: #0f172a;
  --sn-board-wrap-border: #1e293b;
  --sn-board-wrap-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --sn-accent: #059669;
  --sn-accent-hover: #10b981;
  --sn-accent-light: rgba(5, 150, 105, 0.18);
}

/* ظرف اصلی بازی — مینیمال، بدون کادر سنگین */
.snakes-game {
  margin: 0;
  min-height: 80vh;
  color: var(--sn-text-main);
  font-family: 'Sahel', 'Vazirmatn', Tahoma, sans-serif;
  background: var(--sn-bg);
  border: 1px solid var(--sn-border);
  display: flex;
  justify-content: center;
  padding: 16px 14px 32px;
  border-radius: 1.5rem;
  box-shadow: var(--sn-panel-shadow);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  position: relative;
}

/* پس‌زمینه‌های انتخابی کاربر — ملایم و شیک در تم روشن، لوکس و تیره در تم تاریک */
.snakes-game.theme-felt {
  background: radial-gradient(ellipse at 50% 25%, #f0fdf4 0%, #ecfdf5 55%, #d1fae5 100%);
  border-color: #a7f3d0;
}
.snakes-game.theme-wood {
  background: radial-gradient(ellipse at 50% 25%, #faf5f0 0%, #f5ebe1 55%, #ebd5c1 100%);
  border-color: #e6ccb2;
}
.snakes-game.theme-jungle {
  background: radial-gradient(ellipse at 50% 25%, #f0fdfa 0%, #ccfbf1 55%, #99f6e4 100%);
  border-color: #5eead4;
}
.snakes-game.theme-desert {
  background: radial-gradient(ellipse at 50% 25%, #fffbeb 0%, #fef3c7 55%, #fde68a 100%);
  border-color: #fcd34d;
}
.snakes-game.theme-night {
  background: radial-gradient(ellipse at 50% 25%, #f8fafc 0%, #e0e7ff 55%, #c7d2fe 100%);
  border-color: #a5b4fc;
}

html.dark .snakes-game.theme-felt {
  background: radial-gradient(ellipse at 50% 25%, #064e3b 0%, #022c22 65%, #011710 100%);
  border-color: #065f46;
}
html.dark .snakes-game.theme-wood {
  background: radial-gradient(ellipse at 50% 25%, #3c1e0e 0%, #200f07 65%, #100602 100%);
  border-color: #5c2c16;
}
html.dark .snakes-game.theme-jungle {
  background: radial-gradient(ellipse at 50% 25%, #134e4a 0%, #042f2e 65%, #011a19 100%);
  border-color: #115e59;
}
html.dark .snakes-game.theme-desert {
  background: radial-gradient(ellipse at 50% 25%, #78350f 0%, #451a03 65%, #240d01 100%);
  border-color: #92400e;
}
html.dark .snakes-game.theme-night {
  background: radial-gradient(ellipse at 50% 25%, #1e1b4b 0%, #0f172a 65%, #020617 100%);
  border-color: #312e81;
}

.snakes-app {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* ==========================================================================
   لابی انتخاب حالت بازی (محلی / آنلاین) — طراحی مینیمال
   ========================================================================== */
.snakes-game .lobby-panel {
  background: var(--sn-panel-bg);
  border: 1px solid var(--sn-panel-border);
  border-radius: 20px;
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: var(--sn-panel-shadow);
  transition: all 0.25s ease;
}
.snakes-game .lobby-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--sn-text-main);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.snakes-game .seg {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.snakes-game .seg button {
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  background: var(--sn-subtle-bg);
  color: var(--sn-text-muted);
  border: 1px solid var(--sn-border);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
}
.snakes-game .seg button:hover:not(.on) {
  background: rgba(5, 150, 105, 0.08);
  color: var(--sn-text-main);
  border-color: rgba(5, 150, 105, 0.3);
}
.snakes-game .seg button.on {
  background: #059669;
  border-color: #059669;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

.snakes-game .joinrow {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.snakes-game .joinrow input {
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  border: 1px solid var(--sn-input-border);
  background: var(--sn-input-bg);
  color: var(--sn-input-text);
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
  text-align: center;
  letter-spacing: 0.1em;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.snakes-game .joinrow input:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.18);
}

.snakes-game .sharebox {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--sn-subtle-bg);
  border: 1.5px dashed var(--sn-border);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 12px;
  margin-top: 10px;
}
.snakes-game .sharebox code {
  flex: 1;
  font-size: 15px;
  font-weight: 900;
  color: #059669;
  direction: ltr;
}
html.dark .snakes-game .sharebox code {
  color: #34d399;
}
.snakes-game .sharebox button {
  background: #059669;
  color: #ffffff;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  border: 0;
  cursor: pointer;
  transition: opacity 0.15s;
}
.snakes-game .sharebox button:hover {
  opacity: 0.9;
}

/* ==========================================================================
   نوار نوبت و مشخصات بازیکنان مستقر در ستون وسط بالای تخته
   ========================================================================== */
.snakes-game .snakes-board-col {
  grid-area: board;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  min-width: 0;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

.snakes-game .topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  width: 100%;
  margin-bottom: 0;
  box-sizing: border-box;
}

.snakes-game .turnbox {
  background: var(--sn-panel-bg);
  border: 1px solid var(--sn-panel-border);
  border-radius: 16px;
  box-shadow: var(--sn-panel-shadow);
  padding: 6px 14px;
  min-width: 105px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  transition: all 0.25s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}
.snakes-game .turnbox small {
  font-size: 11px;
  font-weight: 700;
  color: var(--sn-text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.snakes-game .turnbox b {
  font-size: 24px;
  line-height: 1.15;
  color: #059669;
  font-weight: 900;
}
html.dark .snakes-game .turnbox b {
  color: #34d399;
}

.snakes-game .snakes-players {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  min-width: 0;
  flex: 1;
}

/* کارت بازیکن — مینیمال، تمیز و تفکیک‌شده */
.snakes-game .player {
  border-radius: 14px;
  padding: 6px 10px;
  display: flex;
  gap: 12px;
  align-items: center;
  position: relative;
  box-shadow: var(--sn-panel-shadow);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  background: var(--sn-panel-bg);
  border: 1px solid var(--sn-panel-border);
  color: var(--sn-text-main);
}

/* کارت‌های رنگی در تم روشن */
.snakes-game .player.p-blue {
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
  border-color: #bfdbfe;
  color: #1e3a8a;
}
.snakes-game .player.p-red {
  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
  border-color: #fecaca;
  color: #991b1b;
}
.snakes-game .player.p-green {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border-color: #bbf7d0;
  color: #166534;
}
.snakes-game .player.p-yellow {
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
  border-color: #fde68a;
  color: #92400e;
}

/* کارت‌های رنگی در تم تاریک */
html.dark .snakes-game .player.p-blue {
  background: linear-gradient(135deg, #0f172a 0%, #172554 100%);
  border-color: #1e40af;
  color: #bfdbfe;
}
html.dark .snakes-game .player.p-red {
  background: linear-gradient(135deg, #0f172a 0%, #450a0a 100%);
  border-color: #991b1b;
  color: #fecaca;
}
html.dark .snakes-game .player.p-green {
  background: linear-gradient(135deg, #0f172a 0%, #052e16 100%);
  border-color: #166534;
  color: #bbf7d0;
}
html.dark .snakes-game .player.p-yellow {
  background: linear-gradient(135deg, #0f172a 0%, #451a03 100%);
  border-color: #92400e;
  color: #fef08a;
}

/* حالت نوبت فعال — با برجستگی ظریف مدرن */
.snakes-game .player.is-turn {
  transform: translateY(-2px);
  border-color: currentColor !important;
  box-shadow: 0 0 0 2px currentColor, 0 6px 18px rgba(0,0,0,0.08) !important;
}
html.dark .snakes-game .player.is-turn {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px #f59e0b, 0 6px 20px rgba(245,158,11,0.25) !important;
}

.snakes-game .player.is-out {
  filter: grayscale(0.75);
  opacity: 0.55;
}
.snakes-game .player-out-tag {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: var(--sn-subtle-bg);
  border: 1px solid var(--sn-border);
  color: var(--sn-text-muted);
  vertical-align: middle;
}

.snakes-game .player-avatar-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.snakes-game .player-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.snakes-game .player.is-speaking .player-avatar-wrap {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px #10b981, 0 0 14px rgba(16, 185, 129, 0.7) !important;
  animation: voicePulse 1.2s infinite alternate;
}
@keyframes voicePulse {
  0% { transform: scale(1); box-shadow: 0 0 0 2px #10b981, 0 0 8px rgba(16, 185, 129, 0.5); }
  100% { transform: scale(1.06); box-shadow: 0 0 0 4px #059669, 0 0 16px rgba(5, 150, 105, 0.8); }
}

.snakes-game .player-info {
  flex: 1;
  min-width: 0;
}
.snakes-game .player-info strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}
.snakes-game .player-info .score {
  font-size: 10px;
  font-weight: 700;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--sn-subtle-bg);
}
html.dark .snakes-game .player-info .score {
  background: rgba(255, 255, 255, 0.12);
}
.snakes-game .player-pawn-badge {
  width: 24px;
  height: 34px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}

/* ==========================================================================
   چیدمان ۳ ستونه اصلی
   ========================================================================== */
.snakes-game .snakes-3col-layout {
  display: grid;
  grid-template-columns: 275px minmax(0, 1fr) 275px;
  grid-template-areas: "side board chat";
  gap: 1rem;
  align-items: start;
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .snakes-game .snakes-3col-layout {
    grid-template-columns: 245px minmax(0, 1fr) 245px;
    gap: 0.75rem;
  }
}
@media (min-width: 1280px) and (max-width: 1535px) {
  .snakes-game .snakes-3col-layout {
    grid-template-columns: 275px minmax(0, 1fr) 275px;
    gap: 1rem;
  }
}
@media (min-width: 1536px) {
  .snakes-game .snakes-3col-layout {
    grid-template-columns: 300px minmax(0, 1fr) 300px;
    gap: 1.25rem;
  }
}

/* نمایشگرهای عریض: سایدبارها فضای خالی را می‌گیرند و تخته روی سقف ۶۴۰px خودش می‌ماند.
   (قبلاً layout روی ۱۲۸۰px قفل بود و کناره‌ها خالی می‌موند.) */
@media (min-width: 1400px) {
  .snakes-game .snakes-app { max-width: 1440px; }
  .snakes-game .snakes-3col-layout {
    grid-template-columns: minmax(0, 1fr) 640px minmax(0, 1fr);
  }
}
@media (min-width: 1600px) {
  .snakes-game .snakes-app { max-width: 100%; }
}
.snakes-game .side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
}
.snakes-game .board-wrap {
  grid-area: board;
  min-width: 0;
  max-width: 100%;
}
.snakes-game .snakes-chat-column {
  grid-area: chat;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
}

/* پنل‌های کارت بازی */
.snakes-game .panel {
  background: var(--sn-panel-bg);
  border: 1px solid var(--sn-panel-border);
  border-radius: 20px;
  box-shadow: var(--sn-panel-shadow);
  padding: 14px;
  transition: all 0.25s ease;
}
.snakes-game .sign {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--sn-text-main);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   کامپوننت گفتگوی ۴ نفره ریل‌تایم (ستون چپ)
   ========================================================================== */
.snakes-game .snakes-chat-card {
  display: flex;
  flex-direction: column;
  height: 440px;
  padding: 11px;
}
@media (min-width: 1441px) {
  .snakes-game .snakes-chat-card {
    height: 580px;
  }
}
.snakes-game .chat-live-badge {
  font-size: 10px;
  font-weight: 800;
  background: #059669;
  color: #ffffff;
  padding: 1px 7px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
  animation: pulseLive 2s infinite;
}
@keyframes pulseLive {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.snakes-game .chat-voice-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--sn-subtle-bg);
  border: 1px solid var(--sn-border);
  border-radius: 14px;
  padding: 8px;
  margin-bottom: 10px;
}
.snakes-game .voice-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--sn-border);
  background: var(--sn-panel-bg);
  color: #059669;
  transition: all 0.15s ease;
}
html.dark .snakes-game .voice-ctrl-btn {
  color: #34d399;
}
.snakes-game .voice-ctrl-btn:hover {
  background: rgba(5, 150, 105, 0.1);
  border-color: #059669;
}
.snakes-game .voice-ctrl-btn.is-off {
  border-color: #fecaca;
  color: #ef4444;
}
.snakes-game .voice-ctrl-btn.mic-btn {
  color: #d97706;
}
html.dark .snakes-game .voice-ctrl-btn.mic-btn {
  color: #f59e0b;
}
.snakes-game .voice-ctrl-btn.mic-btn.is-active {
  background: #059669;
  border-color: #059669;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(5, 150, 105, 0.4);
}

.snakes-game .voice-notice-banner {
  background: var(--sn-accent-light);
  border: 1px dashed var(--sn-accent);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 11px;
  color: #047857;
  text-align: center;
  margin-bottom: 8px;
}
html.dark .snakes-game .voice-notice-banner {
  color: #6ee7b7;
}

.snakes-game .snakes-chat-box {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--sn-subtle-bg);
  border-radius: 14px;
  border: 1px solid var(--sn-border);
}
.snakes-game .snakes-chat-box::-webkit-scrollbar {
  width: 5px;
}
.snakes-game .snakes-chat-box::-webkit-scrollbar-thumb {
  background: var(--sn-border);
  border-radius: 4px;
}

.snakes-game .chat-msg-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  animation: fadeIn 0.2s ease;
}
.snakes-game .chat-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: 0 0 28px;
  overflow: hidden;
  border: 1.5px solid var(--sn-border);
  background: #ffffff;
}
.snakes-game .chat-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.snakes-game .chat-msg-body {
  flex: 1;
  min-width: 0;
  background: var(--sn-panel-bg);
  border-radius: 12px;
  padding: 6px 10px;
  border: 1px solid var(--sn-border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.snakes-game .chat-msg-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
.snakes-game .chat-msg-author {
  font-weight: 800;
  font-size: 11.5px;
  color: var(--sn-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.snakes-game .chat-seat-tag {
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 800;
  color: #fff;
}
.snakes-game .chat-seat-tag.p-blue { background: #2563eb; }
.snakes-game .chat-seat-tag.p-red { background: #dc2626; }
.snakes-game .chat-seat-tag.p-green { background: #16a34a; }
.snakes-game .chat-seat-tag.p-yellow { background: #d97706; }

.snakes-game .chat-msg-time {
  font-size: 10px;
  color: var(--sn-text-muted);
  direction: ltr;
}
.snakes-game .chat-msg-text {
  color: var(--sn-text-main);
  line-height: 1.4;
  word-break: break-word;
}
.snakes-game .chat-system-msg {
  background: rgba(245, 158, 11, 0.1);
  border: 1px dashed rgba(245, 158, 11, 0.4);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 11px;
  color: #d97706;
  text-align: center;
  line-height: 1.35;
}
html.dark .snakes-game .chat-system-msg {
  color: #fde68a;
}

.snakes-game .chat-quick-emotes {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 6px 2px 4px;
}
.snakes-game .chat-quick-emotes button {
  font-size: 16px;
  background: var(--sn-subtle-bg);
  border-radius: 8px;
  padding: 4px 6px;
  border: 1px solid var(--sn-border);
  cursor: pointer;
  transition: transform 0.12s, background 0.12s;
  flex: 0 0 auto;
}
.snakes-game .chat-quick-emotes button:hover {
  transform: scale(1.18);
  background: var(--sn-panel-bg);
}

.snakes-game .emote-bubble {
  position: absolute;
  z-index: 55;
  pointer-events: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: #ffffff;
  border: 2px solid #94a3b8;
  border-radius: 50% 50% 50% 6px;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.2);
  transform: translate(-50%, -135%) scale(0.4);
  opacity: 0;
  transition: transform 0.18s ease-out, opacity 0.18s ease-out;
}
.snakes-game .emote-bubble.show {
  opacity: 1;
  transform: translate(-50%, -135%) scale(1);
  animation: snakesEmoteFloat 0.5s ease-in-out infinite alternate;
}
@keyframes snakesEmoteFloat {
  from { margin-top: 0; }
  to { margin-top: -7px; }
}

.snakes-game .snakes-chat-input-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.snakes-game .snakes-chat-input-row input {
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  border: 1px solid var(--sn-input-border);
  background: var(--sn-input-bg);
  color: var(--sn-input-text);
  padding: 8px 12px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.snakes-game .snakes-chat-input-row input:focus {
  border-color: #059669;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.18);
}
.snakes-game .chat-send-btn {
  background: #059669;
  border: 0;
  border-radius: 12px;
  color: #ffffff;
  padding: 0 14px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s;
}
.snakes-game .chat-send-btn:hover {
  background: #047857;
  transform: translateY(-1px);
}

/* ==========================================================================
   تخته بازی ۱۰×۱۰ (ستون مرکز) — مینیمال و شیک
   ========================================================================== */
.snakes-game .board-wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--sn-board-wrap-bg);
  padding: 10px;
  border-radius: 22px;
  border: 1px solid var(--sn-board-wrap-border);
  box-shadow: var(--sn-board-wrap-shadow);
  position: relative;
  transition: all 0.25s ease;
}

.snakes-game .board {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(10, 10%);
  grid-template-rows: repeat(10, 10%);
  direction: ltr;
  border: 1.5px solid var(--sn-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fdfbf7;
  box-sizing: border-box;
}

.snakes-game .cell {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  border: 1px solid #e2ddd3;
  transition: background 0.2s;
}
.snakes-game .cell:nth-child(4n+1) { background: #e0efe4; }
.snakes-game .cell:nth-child(4n+2) { background: #fdf6e6; }
.snakes-game .cell:nth-child(4n+3) { background: #dceef7; }
.snakes-game .cell:nth-child(4n)   { background: #fae8d8; }

.snakes-game .cell.start { background: #ffe4e6 !important; }
.snakes-game .cell.finish { background: #fef08a !important; }
.snakes-game .cell.is-last {
  box-shadow: inset 0 0 0 2.5px #f59e0b, 0 0 8px rgba(245, 158, 11, 0.45);
  z-index: 2;
}
.snakes-game .cell.is-last .number {
  color: #b45309 !important;
  font-weight: 900 !important;
}

.snakes-game .cell .number {
  position: absolute;
  top: 3px;
  left: 4px;
  z-index: 2;
  font-size: clamp(9px, 1.3vw, 15px);
  font-weight: 800;
  color: #475569;
  line-height: 1;
  font-family: inherit;
}
.snakes-game .cell.start .number,
.snakes-game .cell.finish .number {
  color: #dc2626 !important;
  font-weight: 900;
  font-size: clamp(10px, 1.45vw, 16px);
}

.snakes-game .board-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.snakes-game .pawn {
  position: absolute;
  width: clamp(18px, 3.2vw, 36px);
  height: clamp(25px, 4.2vw, 48px);
  z-index: 6;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
  transition: left 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.snakes-game .pawn.is-out {
  opacity: 0.45;
  filter: grayscale(0.8) drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}
.snakes-game .pawn svg,
.snakes-game .player-pawn-badge svg,
.snakes-game .sw-pawn svg {
  width: 100%;
  height: 100%;
  display: block;
}

.snakes-game .pawn.is-movable {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 25 !important;
  animation: snakesPawnBounce 0.65s ease-in-out infinite alternate, snakesPawnGlow 0.65s ease-in-out infinite alternate !important;
}

@keyframes snakesPawnBounce {
  0% { transform: translate(-50%, -50%) translateY(0) scale(1); }
  100% { transform: translate(-50%, -50%) translateY(-10px) scale(1.15); }
}

@keyframes snakesPawnGlow {
  0% {
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.85)) drop-shadow(0 4px 6px rgba(0,0,0,0.35));
  }
  100% {
    filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.95)) drop-shadow(0 0 24px rgba(251, 191, 36, 0.8)) drop-shadow(0 8px 12px rgba(0,0,0,0.45));
  }
}

.snakes-game .cell.is-destination {
  background: rgba(251, 191, 36, 0.35) !important;
  box-shadow: inset 0 0 0 2px #f59e0b, 0 0 12px rgba(245, 158, 11, 0.6) !important;
  cursor: pointer !important;
  animation: snakesDestCellGlow 0.75s ease-in-out infinite alternate !important;
  z-index: 5 !important;
}

@keyframes snakesDestCellGlow {
  0% { box-shadow: inset 0 0 0 2px #f59e0b, 0 0 6px rgba(245, 158, 11, 0.4); }
  100% { box-shadow: inset 0 0 0 3px #fbbf24, 0 0 18px rgba(251, 191, 36, 0.8); }
}

.snakes-game .roll-btn.is-move-action {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.5) !important;
  animation: snakesMoveBtnPulse 0.8s ease-in-out infinite alternate !important;
}

@keyframes snakesMoveBtnPulse {
  0% { transform: scale(1); box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35); }
  100% { transform: scale(1.02); box-shadow: 0 6px 20px rgba(251, 191, 36, 0.65); }
}

/* ==========================================================================
   پنل‌های سمت راست (تاس، ذکر شانس، کنترل‌ها، تم‌ها)
   ========================================================================== */
.snakes-game .dice-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  perspective: 600px;
}
.snakes-game .die {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
}
.snakes-game .die svg {
  width: 100%;
  height: 100%;
  max-width: 74px;
  max-height: 74px;
  display: block;
}
html.dark .snakes-game .die {
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
}
.snakes-game .die:hover {
  transform: scale(1.06) rotate(3deg);
}
.snakes-game .die:active {
  transform: scale(0.95);
}
.snakes-game .die.rolling {
  animation: diceRollAnim 0.65s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes diceRollAnim {
  0%   { transform: rotate(0deg) scale(0.9); }
  35%  { transform: rotate(-360deg) scale(1.2); }
  70%  { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(0deg) scale(1); }
}

/* دکمه تاس ریختن — مدرن، بدون خطوط اضافی */
.snakes-game .roll {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 900;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border: 0;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.15s ease;
}
.snakes-game .roll:hover:not(:disabled) {
  background: linear-gradient(135deg, #047857 0%, #059669 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.45);
}
.snakes-game .roll:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
}
.snakes-game .roll:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

/* شانس‌خوانی پرتاب تاس در مار و پله — مینیمال */
.snakes-chant-box {
  background: var(--sn-subtle-bg);
  border: 1px solid var(--sn-border);
  border-radius: 14px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.snakes-chant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
}
.snakes-chant-title {
  color: #d97706;
}
html.dark .snakes-chant-title {
  color: #f59e0b;
}
.snakes-chant-sub {
  font-size: 9.5px;
  color: var(--sn-text-muted);
}
.snakes-chant-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--sn-input-bg);
  border: 1px solid var(--sn-input-border);
  border-radius: 10px;
  padding: 5px 8px;
  transition: border-color 0.15s;
}
.snakes-chant-input-wrap:focus-within {
  border-color: #059669;
}
.snakes-chant-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--sn-input-text);
  font-size: 11.5px;
  font-weight: 800;
  font-family: inherit;
  outline: none;
}
.snakes-chant-reset {
  background: transparent;
  border: 0;
  color: var(--sn-text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
}
.snakes-quick-chants {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
  padding-bottom: 2px;
}

.snakes-qchant {
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--sn-panel-bg);
  border: 1px solid var(--sn-border);
  color: var(--sn-text-muted);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.snakes-qchant:hover {
  border-color: #d97706;
  color: #d97706;
}
.snakes-qchant.active {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #b45309;
}
html.dark .snakes-qchant.active {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
  color: #fde68a;
}

.snakes-chant-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 45;
  pointer-events: none;
  max-width: 92%;
  width: 360px;
  animation: chantPop .35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.snakes-chant-banner.is-fading {
  animation: chantFade .4s ease-out forwards;
}
.snakes-chant-content {
  background: var(--sn-panel-bg);
  border: 1px solid var(--sn-border);
  border-radius: 20px;
  padding: 14px 18px;
  text-align: center;
  box-shadow: 0 16px 36px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}
html.dark .snakes-chant-content {
  background: rgba(15, 23, 42, 0.96);
  border-color: #334155;
  box-shadow: 0 16px 36px rgba(0,0,0,0.65);
}
.snakes-chant-author-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sn-subtle-bg);
  border: 1px solid var(--sn-border);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  color: var(--sn-text-main);
  margin-bottom: 6px;
}
.snakes-chant-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.snakes-chant-tag {
  font-size: 9px;
  color: #d97706;
  background: rgba(245,158,11,0.12);
  padding: 1px 6px;
  border-radius: 6px;
}
.snakes-chant-bubble {
  font-size: 15px;
  font-weight: 900;
  color: var(--sn-text-main);
  line-height: 1.5;
  padding: 4px 6px;
}
.snakes-quote-open, .snakes-quote-close {
  color: #d97706;
  font-size: 18px;
  font-weight: 900;
}
.snakes-chant-burst {
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(16,185,129,0.35);
}

.snakes-game .status {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--sn-subtle-bg);
  font-size: 12px;
  font-weight: 700;
  color: var(--sn-text-muted);
  text-align: center;
  min-height: 22px;
  line-height: 1.4;
  border: 1px solid var(--sn-border);
}

.snakes-game .action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.snakes-game .btn-action {
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  color: var(--sn-text-main);
  background: var(--sn-subtle-bg);
  border: 1px solid var(--sn-border);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.snakes-game .btn-action:hover {
  background: var(--sn-border);
  transform: translateY(-1px);
}
.snakes-game .btn-action:active {
  transform: translateY(1px);
}

/* ویترین المنت‌ها (نمایش مهره‌ها، تاس‌ها، مارها، نردبان‌ها، تم‌ها) */
.snakes-game .showcase-block {
  margin-bottom: 12px;
}
.snakes-game .showcase-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: var(--sn-subtle-bg);
  border-radius: 12px;
  padding: 8px 6px;
  border: 1px solid var(--sn-border);
}
.snakes-game .sw-pawn { width: 24px; height: 34px; display: inline-block; }
.snakes-game .sw-dice { width: 30px; height: 30px; display: inline-block; }
.snakes-game .sw-snake { width: 34px; height: 34px; display: inline-block; }
.snakes-game .sw-ladder { width: 22px; height: 38px; display: inline-block; }

.snakes-game .theme-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.snakes-game .theme-chip {
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--sn-border);
  background: var(--sn-subtle-bg);
  color: var(--sn-text-muted);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.snakes-game .theme-chip.active,
.snakes-game .theme-chip:hover {
  background: #059669;
  color: #ffffff;
  border-color: #059669;
}

.snakes-game .hist {
  max-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--sn-text-muted);
}
.snakes-game .hist div {
  background: var(--sn-subtle-bg);
  border-radius: 8px;
  padding: 4px 8px;
  border: 1px solid var(--sn-border);
}

/* اورلی پایان بازی */
.snakes-game .win-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  z-index: 50;
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* بهینه‌سازی لپ‌تاپ‌ها (۱۰۲۴ تا ۱۴۴۰ پیکسل) */
@media (min-width: 1024px) and (max-width: 1440px) {
  .snakes-game .panel {
    padding: 10px 12px;
    border-radius: 16px;
  }
  .snakes-game .sign {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .snakes-game .die {
    width: 60px;
    height: 60px;
  }
}

/* ریسپانسیو تبلت */
@media (max-width: 1023px) {
  .snakes-game .snakes-3col-layout {
    grid-template-columns: minmax(0, 1fr) 290px;
    grid-template-areas: 
      "board side"
      "chat chat";
  }
  .snakes-game .snakes-chat-card {
    height: 420px;
  }
}

@media (max-width: 860px) {
  .snakes-game { padding: 12px 8px 24px; }
  .snakes-game .snakes-3col-layout {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "board"
      "side"
      "chat";
  }
  .snakes-game .topbar { grid-template-columns: 1fr; gap: 10px; }
  .snakes-game .turnbox { flex-direction: row; gap: 12px; padding: 8px 14px; }
  .snakes-game .turnbox b { font-size: 24px; }
  .snakes-game .board-wrap { padding: 8px; border-radius: 18px; }
  .snakes-game .die { width: 66px; height: 66px; }
  .snakes-game .roll { font-size: 15px; padding: 10px; }
}
/* ==========================================================================
   بازطراحی لابی هاب (qbd-hub-lobby) در سایدبار — مرحله‌محور، تمیز و کاربرپسند
   ========================================================================== */
.snakes-game .qbd-hub-lobby {
  padding: 14px;
  border-radius: 20px;
  background: var(--sn-card-bg);
  border: 1px solid var(--sn-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.snakes-game .qbd-hub-lobby * {
  box-sizing: border-box;
}
.snakes-game .qbd-hub-lobby .qbd-lobby-head { margin-bottom: 12px; }
.snakes-game .qbd-hub-lobby .lobby-title { font-size: 15px; font-weight: 900; margin-bottom: 2px; }
.snakes-game .qbd-hub-lobby .qbd-lobby-sub { font-size: 11px; color: var(--sn-text-muted); margin: 0; line-height: 1.7; }

.snakes-game .qbd-hub-lobby .qbd-step { margin-bottom: 12px; }
.snakes-game .qbd-hub-lobby .qbd-step:last-child { margin-bottom: 0; }
.snakes-game .qbd-hub-lobby .qbd-step-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; color: var(--sn-text-main); margin-bottom: 8px;
}
.snakes-game .qbd-hub-lobby .qbd-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #059669; color: #fff; font-size: 10px; font-weight: 900;
}

/* حالت بازی — ۳ تب افقی */
.snakes-game .qbd-hub-lobby .qbd-seg-mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 0; width: 100%; }
.snakes-game .qbd-hub-lobby .qbd-seg-mode button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 4px; border-radius: 12px; font-size: 11px; font-weight: 800;
  background: var(--sn-subtle-bg); color: var(--sn-text-muted);
  border: 1.5px solid var(--sn-border); cursor: pointer; font-family: inherit; transition: all .18s ease;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.snakes-game .qbd-hub-lobby .qbd-seg-mode button .qbd-emj { font-size: 16px; }
.snakes-game .qbd-hub-lobby .qbd-seg-mode button:hover:not(.on) { border-color: rgba(5,150,105,.4); color: var(--sn-text-main); }
.snakes-game .qbd-hub-lobby .qbd-seg-mode button.on {
  background: linear-gradient(135deg, #059669, #0d9488); color: #fff; border-color: transparent;
  box-shadow: 0 4px 14px rgba(5,150,105,.35);
}

/* تعداد بازیکن (محلی) */
.snakes-game .qbd-hub-lobby .qbd-seg-count { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 0; width: 100%; }
.snakes-game .qbd-hub-lobby .qbd-seg-count button {
  padding: 8px 4px; border-radius: 10px; font-size: 11.5px; font-weight: 800;
  background: var(--sn-subtle-bg); color: var(--sn-text-muted);
  border: 1.5px solid var(--sn-border); cursor: pointer; font-family: inherit; transition: all .18s ease;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.snakes-game .qbd-hub-lobby .qbd-seg-count button:hover:not(.on) { border-color: rgba(5,150,105,.4); color: var(--sn-text-main); }
.snakes-game .qbd-hub-lobby .qbd-seg-count button.on {
  background: #059669; color: #fff; border-color: #059669; box-shadow: 0 4px 12px rgba(5,150,105,.3);
}

/* ساخت میز */
.snakes-game .qbd-hub-lobby .qbd-create-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; width: 100%; }
.snakes-game .qbd-hub-lobby .qbd-create-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: 10px; cursor: pointer; font-family: inherit; transition: all .18s ease;
  background: linear-gradient(135deg, rgba(5,150,105,.12), rgba(13,148,136,.12));
  border: 1.5px solid rgba(5,150,105,.35); color: var(--sn-text-main);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.snakes-game .qbd-hub-lobby .qbd-create-grid button b { font-size: 11.5px; font-weight: 900; }
.snakes-game .qbd-hub-lobby .qbd-create-grid button span { font-size: 10px; opacity: .75; }
.snakes-game .qbd-hub-lobby .qbd-create-grid button:hover { border-color: #059669; }

/* حریف تصادفی */
.snakes-game .qbd-hub-lobby .qbd-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
.snakes-game .qbd-hub-lobby .qbd-quick-grid button {
  padding: 8px 4px; border-radius: 10px; font-size: 11.5px; font-weight: 800; cursor: pointer; font-family: inherit; transition: all .18s ease;
  background: rgba(2,132,199,.10); border: 1.5px solid rgba(2,132,199,.30); color: var(--sn-text-main);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.snakes-game .qbd-hub-lobby .qbd-quick-grid button:hover { border-color: #0284c7; }

.snakes-game .qbd-hub-lobby .qbd-joinrow { margin-top: 8px; display: flex; gap: 6px; width: 100%; }
.snakes-game .qbd-hub-lobby .qbd-joinrow input { flex: 1; min-width: 0; padding: 7px 10px; font-size: 11.5px; border-radius: 10px; }
.snakes-game .qbd-hub-lobby .qbd-joinrow button { padding: 7px 14px; font-size: 11.5px; border-radius: 10px; flex-shrink: 0; }

/* دوئل شرطی */
.snakes-game .qbd-hub-lobby .qbd-wager { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(245,158,11,.08); border: 1.5px solid rgba(245,158,11,.45); }
.snakes-game .qbd-hub-lobby .qbd-wager-head { font-size: 11.5px; font-weight: 900; color: var(--sn-text-main); margin-bottom: 8px; }
.snakes-game .qbd-hub-lobby .qbd-wager-head span { font-weight: 700; font-size: 10.5px; color: var(--sn-text-muted); }
.snakes-game .qbd-hub-lobby .qbd-wager-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; width: 100%; }
.snakes-game .qbd-hub-lobby .qbd-wager-row select { flex: 1 1 110px; padding: 6px 8px; font-size: 11px; border-radius: 10px; min-width: 0; }
.snakes-game .qbd-hub-lobby .qbd-wager-row input { flex: 1 1 65px; max-width: none; text-align: center; padding: 6px; font-size: 12px; border-radius: 10px; min-width: 0; }
.snakes-game .qbd-hub-lobby .qbd-wager-row .btn-action { width: 100%; margin-top: 4px; padding: 8px 12px; font-size: 11.5px; background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; }
.snakes-game .qbd-hub-lobby .qbd-wager-chips { display: flex; gap: 4px; align-items: center; margin-top: 8px; font-size: 11px; flex-wrap: wrap; width: 100%; }

.snakes-game .qbd-hub-lobby .qbd-lobby-status:empty { display: none; }

/* ==========================================================================
   ★ ارتقای گرافیک، صدا و هیجان — نسخهٔ ۲ (افزوده‌شده در انتهای فایل)
   تخته‌ی تم‌دار، تاس سه‌بعدی، مهره‌های بامزه، افکت‌های نیش مار و نردبان
   ========================================================================== */

/* ---------- پالت تم‌ها (کاشی‌ها + قاب تخته) ---------- */
.snakes-game {
  --t1: #dff3e6; --t2: #f7f5df; --t3: #d6eee9; --t4: #eaf4d8;
  --frame-a: #34d399; --frame-b: #065f46;
}
.snakes-game.theme-felt   { --t1: #dff3e6; --t2: #f7f5df; --t3: #d6eee9; --t4: #eaf4d8; --frame-a: #34d399; --frame-b: #065f46; }
.snakes-game.theme-wood   { --t1: #f4e4d0; --t2: #fbf1e2; --t3: #ecd5b8; --t4: #f7e8d3; --frame-a: #c0804a; --frame-b: #5b3012; }
.snakes-game.theme-jungle { --t1: #d3f2ea; --t2: #eefaf1; --t3: #c3ebe3; --t4: #e1f5e8; --frame-a: #2dd4bf; --frame-b: #0f4f4a; }
.snakes-game.theme-desert { --t1: #fbe9bf; --t2: #fff4d6; --t3: #f7dca0; --t4: #fdeccb; --frame-a: #f5b942; --frame-b: #8a4a0f; }
.snakes-game.theme-night  { --t1: #dcdcf7; --t2: #eceafd; --t3: #cfd3f4; --t4: #e4e0fa; --frame-a: #818cf8; --frame-b: #312e81; }

/* ---------- قاب و کاشی‌های تخته ---------- */
.snakes-game .board-wrap {
  background: linear-gradient(145deg, var(--frame-a), var(--frame-b));
  padding: 12px;
  border: 0;
  border-radius: 26px;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.38), inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}
.snakes-game .board {
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  background: var(--t2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.3);
}
.snakes-game .cell { border: 1px solid rgba(0, 0, 0, 0.07); }
.snakes-game .cell:nth-child(4n+1) { background-color: var(--t1); }
.snakes-game .cell:nth-child(4n+2) { background-color: var(--t2); }
.snakes-game .cell:nth-child(4n+3) { background-color: var(--t3); }
.snakes-game .cell:nth-child(4n)   { background-color: var(--t4); }
.snakes-game .cell:nth-child(n) {
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0) 45%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
}
.snakes-game .cell .number {
  background: rgba(255, 255, 255, 0.72);
  padding: 1px 4px 2px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  top: 2px;
  left: 3px;
}
.snakes-game .cell.has-ladder { box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.snakes-game .cell.has-snake  { box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.snakes-game .cell.start {
  background: linear-gradient(145deg, #bbf7d0, #4ade80) !important;
}
.snakes-game .cell.start::after {
  content: '🚩'; position: absolute; bottom: 1px; right: 3px; font-size: clamp(11px, 1.9vw, 22px); z-index: 1;
}
.snakes-game .cell.finish {
  background: radial-gradient(circle at 50% 45%, #fffbd0, #facc15 65%, #f59e0b) !important;
  animation: snFinishGlow 2.2s ease-in-out infinite alternate;
}
.snakes-game .cell.finish::after {
  content: '🏆'; position: absolute; bottom: 1px; right: 3px; font-size: clamp(12px, 2vw, 24px); z-index: 1;
}
@keyframes snFinishGlow {
  from { box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.8), 0 0 4px rgba(250, 204, 21, 0.4); }
  to   { box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.95), 0 0 16px rgba(250, 204, 21, 0.9); }
}

/* ---------- مهره‌ها: چهره، حالت‌ها، راه‌رفتن ---------- */
.snakes-game .pf { display: none; }
.snakes-game .pf-normal { display: inline; }
.snakes-game .pawn.mood-happy .pf-normal, .snakes-game .pawn.mood-scared .pf-normal, .snakes-game .pawn.mood-hurt .pf-normal,
.snakes-game .pawn.mood-dizzy .pf-normal, .snakes-game .pawn.mood-star .pf-normal { display: none; }
.snakes-game .pawn.mood-happy .pf-happy,
.snakes-game .pawn.mood-scared .pf-scared,
.snakes-game .pawn.mood-hurt .pf-hurt,
.snakes-game .pawn.mood-dizzy .pf-dizzy,
.snakes-game .pawn.mood-star .pf-star { display: inline; }
.snakes-game .pf-eyes { transform-box: fill-box; transform-origin: center; animation: snBlink 4.6s infinite; }
@keyframes snBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
.snakes-game .pawn { overflow: visible; }
.snakes-game .pawn svg { overflow: visible; transform-origin: 50% 90%; }
.snakes-game .pawn.is-walking {
  transition: left 0.14s ease-out, top 0.14s ease-out !important;
  z-index: 20;
}
.snakes-game .pawn.is-traveling { z-index: 28; }
.snakes-game .pawn.is-bitten svg { filter: drop-shadow(0 0 7px #ef4444) saturate(1.7); }
.snakes-game .pawn.mood-dizzy::after, .snakes-game .pawn.mood-happy::after, .snakes-game .pawn.mood-star::after {
  position: absolute; left: 50%; top: -22%; font-size: clamp(11px, 1.9vw, 20px); line-height: 1; pointer-events: none;
}
.snakes-game .pawn.mood-dizzy::after { content: '💫'; transform: translateX(-50%); animation: snSpin 0.9s linear infinite; }
.snakes-game .pawn.mood-happy::after { content: '✨'; transform: translateX(-50%); animation: snTwinkle 0.5s ease-in-out infinite alternate; }
.snakes-game .pawn.mood-star::after  { content: '⭐'; transform: translateX(-50%); animation: snTwinkle 0.4s ease-in-out infinite alternate; }
@keyframes snSpin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes snTwinkle { from { transform: translateX(-50%) scale(0.8); opacity: 0.7; } to { transform: translateX(-50%) scale(1.3); opacity: 1; } }

/* ---------- تاس سه‌بعدی ---------- */
.snakes-game .dice-area { perspective: none; padding: 4px 0 8px; }
.snakes-game .die {
  position: relative;
  width: 100px;
  height: 100px;
  display: block;
  filter: none;
  animation: none !important;
}
.snakes-game .die:hover { transform: scale(1.05); }
.snakes-game .die:active { transform: scale(0.96); }
.snakes-game .die.rolling { animation: none !important; }
.snakes-game .dice-stage { position: relative; width: 100%; height: 100%; display: grid; place-items: center; perspective: 520px; }
.snakes-game .dice-shadow {
  position: absolute; bottom: 8px; left: 50%; width: 56px; height: 12px; margin-left: -28px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 70%); opacity: 0.45;
}
.snakes-game .dice-hop { position: relative; width: 58px; height: 58px; transform-style: preserve-3d; margin-top: -6px; }
.snakes-game .dice-cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(-28deg); }
.snakes-game .dice-face {
  position: absolute; inset: 0; border-radius: 10px;
  background: linear-gradient(145deg, #ffffff, #eef2f8 55%, #d3dbe8);
  box-shadow: inset 0 0 0 1.5px rgba(148, 163, 184, 0.6), inset 0 -6px 12px rgba(100, 116, 139, 0.2), inset 0 3px 6px rgba(255, 255, 255, 0.95);
  backface-visibility: hidden;
}
.snakes-game .dice-face svg { width: 100%; height: 100%; display: block; }
.snakes-game .df-1 { transform: translateZ(29px); }
.snakes-game .df-6 { transform: rotateY(180deg) translateZ(29px); }
.snakes-game .df-2 { transform: rotateY(90deg) translateZ(29px); }
.snakes-game .df-5 { transform: rotateY(-90deg) translateZ(29px); }
.snakes-game .df-3 { transform: rotateX(90deg) translateZ(29px); }
.snakes-game .df-4 { transform: rotateX(-90deg) translateZ(29px); }
.snakes-game .die.is-six::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 3px solid #fbbf24; pointer-events: none;
  animation: snRingOut 1.1s ease-out forwards;
}
@keyframes snRingOut { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.snakes-game .roll-die-icon { width: 26px; height: 26px; display: inline-grid; place-items: center; }
.snakes-game .roll-die-icon svg { width: 100%; height: 100%; display: block; }

/* ---------- دکمهٔ تاس ---------- */
.snakes-game .roll { position: relative; overflow: hidden; }
.snakes-game .roll::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg); animation: snBtnShine 3.4s ease-in-out infinite;
}
.snakes-game .roll:disabled::after { display: none; }
@keyframes snBtnShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.snakes-game .roll.is-nudge { animation: snNudge 0.9s ease-in-out infinite; }
@keyframes snNudge {
  0%, 100% { transform: scale(1) rotate(0); box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35); }
  25% { transform: scale(1.05) rotate(-1.5deg); box-shadow: 0 8px 26px rgba(250, 204, 21, 0.7); }
  75% { transform: scale(1.05) rotate(1.5deg); box-shadow: 0 8px 26px rgba(250, 204, 21, 0.7); }
}

/* ---------- بنر ذکر شانس ---------- */
.snakes-chant-banner { top: 17%; width: 340px; animation: snChantIn 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.snakes-chant-banner.is-fading { animation: snChantOut 0.4s ease-in forwards; }
@keyframes snChantIn {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.55) rotate(-5deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
@keyframes snChantOut { to { opacity: 0; transform: translate(-50%, -75%) scale(0.9); } }
.snakes-chant-content {
  border: 2px solid var(--chant-color, #f59e0b);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45), 0 18px 40px rgba(0, 0, 0, 0.3);
}
.snakes-chant-content::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
  transform: translateX(-130%); animation: snShine 2.2s 0.35s ease-in-out infinite;
}
@keyframes snShine { 0% { transform: translateX(-130%); } 60%, 100% { transform: translateX(130%); } }
.snakes-chant-bubble { text-shadow: 0 0 14px var(--chant-color, #f59e0b); }
.snk-word { display: inline-block; margin: 0 0.16em; opacity: 0; transform: translateY(10px) scale(0.7); animation: snWord 0.45s cubic-bezier(0.2, 1.7, 0.4, 1) forwards; }
@keyframes snWord { to { opacity: 1; transform: translateY(0) scale(1); } }
.snk-chant-big { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px auto 2px; min-height: 68px; position: relative; z-index: 2; }
.snk-chant-big .snk-num {
  display: inline-grid; place-items: center; width: 66px; height: 66px; border-radius: 19px;
  font-size: 40px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  background: linear-gradient(145deg, var(--vc1, #64748b), var(--vc2, #334155));
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.45);
}
.snk-chant-big.v1 { --vc1: #94a3b8; --vc2: #475569; }
.snk-chant-big.v2 { --vc1: #38bdf8; --vc2: #0369a1; }
.snk-chant-big.v3 { --vc1: #2dd4bf; --vc2: #0f766e; }
.snk-chant-big.v4 { --vc1: #818cf8; --vc2: #4338ca; }
.snk-chant-big.v5 { --vc1: #fb923c; --vc2: #c2410c; }
.snk-chant-big.v6 { --vc1: #fde047; --vc2: #d97706; }
.snk-chant-big.pop .snk-num { animation: snNumPop 0.65s cubic-bezier(0.2, 1.9, 0.4, 1) both; }
.snk-chant-big.v6.pop .snk-num { animation: snNumPop 0.65s cubic-bezier(0.2, 1.9, 0.4, 1) both, snSixPulse 0.9s 0.65s ease-in-out infinite alternate; }
@keyframes snNumPop { 0% { transform: scale(0.1) rotate(-200deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes snSixPulse { from { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(251, 191, 36, 0.8); } to { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 0 14px rgba(251, 191, 36, 0); } }
.snk-chant-big.rolling small { font-size: 11px; font-weight: 800; color: var(--sn-text-muted); }
.snk-dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 3px; background: var(--chant-color, #f59e0b); animation: snDot 0.6s ease-in-out infinite alternate; }
.snk-dots i:nth-child(2) { animation-delay: 0.15s; }
.snk-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes snDot { from { transform: translateY(0); opacity: 0.5; } to { transform: translateY(-8px); opacity: 1; } }
.snakes-chant-burst { position: relative; z-index: 2; animation: snBurstIn 0.5s 0.1s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes snBurstIn { from { opacity: 0; transform: translateY(8px) scale(0.8); } to { opacity: 1; transform: none; } }
.snakes-chant-burst.v1 { background: linear-gradient(135deg, #64748b, #334155); }
.snakes-chant-burst.v2 { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.snakes-chant-burst.v3 { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.snakes-chant-burst.v4 { background: linear-gradient(135deg, #6366f1, #4338ca); }
.snakes-chant-burst.v5 { background: linear-gradient(135deg, #f97316, #c2410c); }
.snakes-chant-burst.v6 { background: linear-gradient(135deg, #f59e0b, #16a34a); }

/* ---------- تیتر رویداد، متن شناور، انفجار نیش ---------- */
.snakes-headline {
  position: absolute; left: 50%; top: 42%; z-index: 44; pointer-events: none; text-align: center; width: 92%;
  opacity: 0; transform: translate(-50%, -50%);
}
.snakes-headline.show { animation: snHeadline 1.9s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
@keyframes snHeadline {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.4) rotate(-6deg); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(2deg); }
  22% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  80% { opacity: 1; transform: translate(-50%, -53%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -95%) scale(0.96); }
}
.snk-hl-main {
  display: inline-block; font-size: clamp(22px, 5.2vw, 40px); font-weight: 900; padding: 6px 22px; border-radius: 22px;
  color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38), inset 0 2px 0 rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.snakes-headline.kind-ladder .snk-hl-main { background: linear-gradient(135deg, #f59e0b, #16a34a); }
.snakes-headline.kind-snake .snk-hl-main { background: linear-gradient(135deg, #ef4444, #7f1d1d); }
.snakes-headline.kind-six .snk-hl-main { background: linear-gradient(135deg, #fde047, #f59e0b 55%, #ea580c); color: #422006; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5); }
.snakes-headline.kind-combo .snk-hl-main { background: linear-gradient(135deg, #fb923c, #dc2626); }
.snakes-headline.kind-overtake .snk-hl-main { background: linear-gradient(135deg, #06b6d4, #2563eb); }
.snakes-headline.kind-near .snk-hl-main { background: linear-gradient(135deg, #f43f5e, #f59e0b); }
.snk-hl-sub {
  margin-top: 8px; display: inline-block; padding: 3px 14px; border-radius: 14px; font-size: clamp(12px, 2.4vw, 17px);
  font-weight: 800; color: #fff; background: rgba(15, 23, 42, 0.74);
}
.snakes-floatxt {
  position: absolute; z-index: 35; transform: translate(-50%, -50%); font-weight: 900; font-size: clamp(13px, 2.4vw, 22px);
  padding: 2px 11px; border-radius: 14px; color: #fff; background: rgba(15, 23, 42, 0.82); pointer-events: none; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); animation: snFloat 1.4s ease-out forwards;
}
.snakes-floatxt.good { background: linear-gradient(135deg, #16a34a, #22c55e); }
.snakes-floatxt.bad { background: linear-gradient(135deg, #dc2626, #7f1d1d); }
@keyframes snFloat {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.5); }
  15% { opacity: 1; transform: translate(-50%, -85%) scale(1.15); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -230%) scale(1); }
}
.snakes-bite-burst {
  position: absolute; z-index: 36; width: clamp(72px, 15vw, 128px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  animation: snBite 1.15s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}
.snakes-bite-burst svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4)); }
.snakes-bite-burst b {
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: clamp(15px, 3vw, 26px); font-weight: 900;
  text-shadow: 0 2px 0 #7f1d1d, 0 0 8px #000; transform: rotate(-8deg);
}
@keyframes snBite {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-30deg); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(6deg); }
  35% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -75%) scale(1.1); }
}

/* ---------- فلاش، لرزش، تنش و نوبت من ---------- */
.snakes-flash { position: absolute; inset: 0; z-index: 40; pointer-events: none; border-radius: inherit; opacity: 0; }
.snakes-flash.on { animation: snFlash 0.85s ease-out forwards; }
.snakes-flash.k-red { background: radial-gradient(circle at 50% 50%, rgba(239, 68, 68, 0) 30%, rgba(220, 38, 38, 0.7) 100%); }
.snakes-flash.k-gold { background: radial-gradient(circle at 50% 60%, rgba(253, 224, 71, 0.6), rgba(253, 224, 71, 0) 70%); }
@keyframes snFlash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.snakes-game .board-wrap.fx-shake { animation: snShake 0.45s ease-in-out; }
.snakes-game .board-wrap.fx-shake-strong { animation: snShakeStrong 0.65s ease-in-out; }
@keyframes snShake {
  10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 1px, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, -1px, 0); } 40%, 60% { transform: translate3d(4px, 1px, 0); }
}
@keyframes snShakeStrong {
  10%, 90% { transform: translate3d(-2px, 1px, 0) rotate(-0.2deg); } 20%, 80% { transform: translate3d(5px, -2px, 0) rotate(0.4deg); }
  30%, 50%, 70% { transform: translate3d(-9px, 2px, 0) rotate(-0.6deg); } 40%, 60% { transform: translate3d(9px, -2px, 0) rotate(0.6deg); }
}
.snakes-game .board-wrap.is-my-turn { box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(250, 204, 21, 0.95), 0 0 22px rgba(250, 204, 21, 0.55); }
.snakes-game .board-wrap.is-tension { animation: snTension 1.1s ease-in-out infinite alternate; }
@keyframes snTension {
  from { box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(239, 68, 68, 0); }
  to { box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.45), 0 0 28px 6px rgba(251, 191, 36, 0.75); }
}
.snakes-fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
.snakes-fx-canvas.snakes-fx-win { z-index: 1; }
.snakes-game .win-overlay > *:not(canvas) { position: relative; z-index: 2; }

/* ---------- زنده‌بودن مارها و نردبان‌ها ---------- */
.snk-head-fx { animation: snSway 3.6s ease-in-out infinite alternate; animation-delay: var(--sway-d, 0s); }
@keyframes snSway { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
.snk-tongue { transform-box: fill-box; transform-origin: 0% 50%; animation: snTongue 2.6s infinite; }
@keyframes snTongue { 0%, 72%, 100% { transform: scaleX(0.15); } 78%, 84% { transform: scaleX(1); } 90% { transform: scaleX(0.4); } 94% { transform: scaleX(1); } }
.snakes-game .ladder-top-glow { transform-box: fill-box; transform-origin: center; animation: snGlow 1.8s ease-in-out infinite alternate; }
@keyframes snGlow { from { opacity: 0.3; transform: scale(0.8); } to { opacity: 1; transform: scale(1.15); } }

/* ---------- کارت بازیکن، پنل پیروزی ---------- */
.snakes-game .player .score b { display: inline-block; }
.snakes-game .player .score b.bump { animation: snBump 0.55s ease-out; }
@keyframes snBump { 0% { transform: scale(1); } 40% { transform: scale(1.75); color: #f59e0b; } 100% { transform: scale(1); } }
.snakes-game .win-overlay > div:first-of-type { animation: snTrophy 1.6s ease-in-out infinite; filter: drop-shadow(0 8px 18px rgba(251, 191, 36, 0.7)); }
@keyframes snTrophy { 0%, 100% { transform: translateY(0) rotate(-6deg) scale(1); } 50% { transform: translateY(-14px) rotate(6deg) scale(1.15); } }
.snakes-game .win-overlay h2 { animation: snWinTitle 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both; text-shadow: 0 0 22px rgba(251, 191, 36, 0.8); }
@keyframes snWinTitle { from { opacity: 0; transform: scale(0.3) rotate(-8deg); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .snakes-game .board-wrap { padding: 9px; border-radius: 20px; }
  .snakes-game .die { width: 88px; height: 88px; }
  .snakes-chant-banner { width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .snk-head-fx, .snk-tongue, .snakes-game .ladder-top-glow, .snakes-game .roll::after, .snakes-game .pf-eyes, .snakes-game .cell.finish,
  .snakes-game .roll.is-nudge, .snakes-game .board-wrap.is-tension, .snakes-game .win-overlay > div:first-of-type,
  .snakes-chant-content::before { animation: none !important; }
}

/* ---------- چشم‌ها و زبان‌های زنده و تصادفی مارها ---------- */
.snk-tongue {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: snTongue 2.8s ease-in-out infinite;
}
@keyframes snTongue {
  0%, 65%, 100% { transform: scaleX(0.08) scaleY(0.5); opacity: 0; }
  70% { transform: scaleX(1.15) scaleY(1.05); opacity: 1; }
  74% { transform: scaleX(0.65) scaleY(0.85); opacity: 1; }
  80% { transform: scaleX(1.3) scaleY(1); opacity: 1; }
  88% { transform: scaleX(0.8) scaleY(0.9); opacity: 0.9; }
  92% { transform: scaleX(0.08) scaleY(0.5); opacity: 0; }
}

.snk-eye {
  transform-box: fill-box;
  transform-origin: center center;
  animation: snEyeBlink 4.2s ease-in-out infinite;
}
@keyframes snEyeBlink {
  0%, 91%, 97%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.08); }
}

.snk-pupil {
  transform-box: fill-box;
  transform-origin: center center;
  animation: snPupilMove 5.5s ease-in-out infinite alternate;
}
@keyframes snPupilMove {
  0%, 30% { transform: scaleX(0.8); }
  60% { transform: scaleX(1.5); }
  100% { transform: scaleX(1); }
}

.snk-glint {
  animation: snEyeGlint 3.2s ease-in-out infinite alternate;
}
@keyframes snEyeGlint {
  0%, 75% { opacity: 0.92; }
  85% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.7; transform: scale(0.9); }
}