/* Hearts & O's — Snakes & Ladders styles */
:root {
  --sl-p1: #ff5da2;
  --sl-p2: #7c4dff;
  --sl-brand: #ff5da2;
  --sl-brand-2: #9b72f5;
  --sl-ink: #2d1b4e;
  --sl-muted: #9b8aad;
  --sl-card: #ffffff;
  --sl-bg: #0d0620;
  --sl-radius: 16px;
  --sl-shadow: 0 8px 28px rgba(100,0,80,.18);
  --sl-shadow-3d: 0 6px 0 rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.4);
}

/* BACKGROUND */
body {
  background: var(--sl-bg);
  background-image:
    radial-gradient(ellipse at 20% 10%, #3d0a5e 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, #1a0535 0%, transparent 50%),
    radial-gradient(ellipse at 60% 40%, #0a1a4e 0%, transparent 40%);
  color: #f0e8ff;
  min-height: 100vh;
}

/* FLOATING STARS */
.sl-stars {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.sl-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: starTwinkle ease-in-out infinite;
}
@keyframes starTwinkle {
  0%,100% { opacity: .15; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.4); }
}

/* HEADER */
header {
  background: linear-gradient(90deg, var(--sl-brand), var(--sl-brand-2));
  position: relative; z-index: 10;
  box-shadow: 0 4px 20px rgba(180,0,100,.3);
}
.brand { color: #fff; font-weight: 800; font-size: 1.4rem; }
nav a { color: rgba(255,255,255,.9); font-weight: 700; text-decoration: none; font-size: .95rem; }
nav a:hover { color: #fff; text-decoration: underline; }

/* PAGE */
.sl-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 40px;
  position: relative; z-index: 1;
}

.sl-title {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 900;
  text-align: center;
  margin-bottom: 16px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(255,93,162,.6), 0 0 40px rgba(155,114,245,.4);
  letter-spacing: .02em;
}

/* INSTRUCTIONS */
.sl-instructions {
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: var(--sl-radius);
  padding: 14px 18px;
  margin-bottom: 18px;
  backdrop-filter: blur(8px);
}
.sl-instructions summary {
  font-weight: 700;
  cursor: pointer;
  color: #c9a0f5;
  font-size: 1rem;
  list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.sl-instructions ol {
  margin-top: 10px;
  padding-left: 20px;
  line-height: 2;
  color: #d4c8f0;
  font-size: .95rem;
}

/* SCOREBOARD */
.sl-scoreboard {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 18px;
}
.sl-player-card {
  flex: 1; max-width: 200px;
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.12);
  border-radius: var(--sl-radius);
  padding: 14px 16px;
  text-align: center;
  position: relative;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  backdrop-filter: blur(8px);
}
.sl-player-card.active {
  transform: translateY(-4px);
}
.sl-player-card.p1.active {
  border-color: var(--sl-p1);
  box-shadow: 0 10px 30px rgba(255,93,162,.3);
}
.sl-player-card.p2.active {
  border-color: var(--sl-p2);
  box-shadow: 0 10px 30px rgba(124,77,255,.3);
}
.sl-turn-badge {
  position: absolute;
  top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--sl-p1);
  color: #fff;
  font-weight: 800;
  font-size: .7rem;
  padding: 2px 10px;
  border-radius: 99px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.sl-player-card.p2 .sl-turn-badge { background: var(--sl-p2); }
.sl-player-card.active .sl-turn-badge { opacity: 1; }
.sl-player-token { font-size: 2.2rem; line-height: 1; margin-bottom: 4px; }
.sl-player-name { font-weight: 800; font-size: .9rem; color: #e0d0ff; }
.sl-player-wins { font-size: .8rem; color: var(--sl-muted); margin-top: 2px; }

/* GAME AREA */
.sl-game-area {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
}

/* BOARD */
.sl-board-wrap {
  flex-shrink: 0;
  position: relative;
}
#boardCanvas {
  border-radius: 18px;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.08),
    0 20px 60px rgba(0,0,0,.6),
    0 0 80px rgba(155,114,245,.2);
  display: block;
  width: 100%;
  max-width: min(480px, 92vw);
  height: auto;
}

/* SIDE PANEL */
.sl-side-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 160px;
  max-width: 200px;
}

/* DICE */
.sl-dice-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sl-dice {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #fff 60%, #f0e8ff);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  box-shadow:
    0 6px 0 #b0a0d0,
    0 8px 20px rgba(0,0,0,.4),
    inset 0 2px 4px rgba(255,255,255,.8);
  cursor: pointer;
  transition: transform .1s;
  user-select: none;
}
.sl-dice.rolling {
  animation: diceRoll .5s cubic-bezier(.36,.07,.19,.97);
}
@keyframes diceRoll {
  0%   { transform: rotate(0deg) scale(1); }
  20%  { transform: rotate(-15deg) scale(1.1); }
  40%  { transform: rotate(15deg) scale(1.15); }
  60%  { transform: rotate(-10deg) scale(1.1); }
  80%  { transform: rotate(8deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}
.sl-dice-face { line-height: 1; }

/* STATUS BOX */
.sl-status-box {
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: center;
  backdrop-filter: blur(8px);
}
.sl-status-turn {
  font-weight: 800;
  font-size: .95rem;
  color: #e0d0ff;
  margin-bottom: 4px;
}
.sl-status-msg {
  font-size: .82rem;
  color: var(--sl-muted);
  line-height: 1.4;
}

/* POSITIONS */
.sl-positions {
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 12px 14px;
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sl-pos-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
}
.sl-pos-token { font-size: 1.3rem; }
.sl-pos-label { color: var(--sl-muted); flex: 1; }
.sl-pos-num { font-weight: 800; color: #e0d0ff; font-size: 1.1rem; }

/* BUTTONS */
.sl-btn {
  font-weight: 800;
  font-size: 1rem;
  padding: 12px 24px;
  border: none;
  border-radius: 99px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  letter-spacing: .02em;
  width: 100%;
}
.sl-btn-primary {
  background: linear-gradient(135deg, var(--sl-brand), var(--sl-brand-2));
  color: #fff;
  box-shadow: 0 4px 0 #8b1a6b, 0 6px 20px rgba(180,0,100,.4);
}
.sl-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #8b1a6b, 0 10px 24px rgba(180,0,100,.45); }
.sl-btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #8b1a6b, 0 4px 12px rgba(180,0,100,.3); }
.sl-btn-secondary {
  background: rgba(255,255,255,.1);
  color: #c9a0f5;
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
  border: 1.5px solid rgba(255,255,255,.15);
}
.sl-btn-secondary:hover { transform: translateY(-2px); background: rgba(255,255,255,.15); }
.sl-btn-secondary:active { transform: translateY(2px); }
.sl-roll-btn { font-size: 1.1rem; padding: 14px 24px; }

/* WIN OVERLAY */
#winOverlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(10,2,32,.85);
  backdrop-filter: blur(8px);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
#winOverlay.show { display: flex; }
.sl-win-card {
  background: linear-gradient(135deg, #1e0a40, #0d1a50);
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 28px;
  padding: 42px 48px;
  text-align: center;
  box-shadow: 0 28px 72px rgba(0,0,0,.6), 0 0 60px rgba(155,114,245,.3);
  animation: popIn .4s cubic-bezier(.34,1.56,.64,1);
  position: relative; z-index: 101;
  max-width: 380px; width: 92%;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.65); }
  to   { opacity: 1; transform: scale(1); }
}
.sl-win-emoji { font-size: 4.5rem; margin-bottom: 8px; }
.sl-win-title { font-size: 2rem; font-weight: 900; margin-bottom: 6px; color: #fff; }
.sl-win-sub { color: var(--sl-muted); font-size: 1rem; margin-bottom: 24px; }
.sl-win-scores { display: flex; gap: 16px; justify-content: center; margin-bottom: 28px; }
.sl-win-score { background: rgba(255,255,255,.07); border-radius: 14px; padding: 12px 20px; font-weight: 800; border: 1.5px solid rgba(255,255,255,.1); }
.sl-ws-name { font-size: .85rem; color: var(--sl-muted); margin-bottom: 2px; }
.sl-ws-num { font-size: 2rem; color: #fff; }
.sl-ws-label { font-size: .75rem; color: var(--sl-muted); }
.ws-p1 .sl-ws-num { color: var(--sl-p1); }
.ws-p2 .sl-ws-num { color: var(--sl-p2); }
.sl-win-btns { display: flex; flex-direction: column; gap: 10px; }

/* SNAKE TAUNT OVERLAY */
#snakeTaunt {
  display: none;
  position: fixed; inset: 0;
  z-index: 110;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#snakeTaunt.show { display: flex; }
.sl-taunt-card {
  background: linear-gradient(135deg, #2d0a0a, #4e0e1a);
  border: 2px solid #f87171;
  border-radius: 24px;
  padding: 32px 44px;
  text-align: center;
  box-shadow:
    0 0 0 4px rgba(248,113,113,.2),
    0 24px 60px rgba(0,0,0,.7),
    0 0 80px rgba(239,68,68,.3);
  animation: tauntPop .35s cubic-bezier(.34,1.56,.64,1);
  max-width: 340px; width: 90%;
}
@keyframes tauntPop {
  from { opacity: 0; transform: scale(.5) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
.sl-taunt-snake {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: 8px;
  display: inline-block;
  animation: snakeWiggle .4s ease-in-out infinite alternate;
}
@keyframes snakeWiggle {
  from { transform: rotate(-12deg) scale(1); }
  to   { transform: rotate(12deg) scale(1.1); }
}
.sl-taunt-text {
  font-size: 1.5rem;
  font-weight: 900;
  color: #f87171;
  margin-bottom: 8px;
  text-shadow: 0 0 20px rgba(239,68,68,.6);
  letter-spacing: .02em;
}
.sl-taunt-sub {
  font-size: .95rem;
  color: #fca5a5;
  font-weight: 600;
}

/* CONFETTI */
#confettiCanvas { position: fixed; inset: 0; pointer-events: none; z-index: 99; }

/* RESPONSIVE */
@media (max-width: 640px) {
  .sl-game-area { flex-direction: column; align-items: center; }
  .sl-side-panel { flex-direction: row; flex-wrap: wrap; max-width: 100%; width: 100%; min-width: unset; }
  .sl-dice-wrap { flex: 1; min-width: 140px; }
  .sl-status-box { flex: 1; min-width: 140px; }
  .sl-positions { width: 100%; flex-direction: row; }
  .sl-btn { width: auto; }
  #resetBtn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-dice.rolling { animation: none; }
  .sl-player-card { transition: none; }
}