/* =============================================================
   GAME: Ludo
   ============================================================= */
/* colours also used by the status bar chips, so they live on the play area */
.play-area { --ld-c0: #ff3d6e; --ld-c1: #2bff88; --ld-c2: #ffd23f; --ld-c3: #3d9bff; --ld-glow: #ff5cf0; }
.board-ludo {
  width: min(calc(100vw - 56px), 540px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ld-stage {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 14px; background: #0d0a24;
  box-shadow: 0 0 0 2px var(--ld-glow), 0 0 26px rgba(255, 92, 240, .35);
}
.ld-svg { display: block; width: 100%; height: 100%; }
.ld-cell { fill: #1b1740; stroke: #2f2960; stroke-width: .5; }
.ld-cell.c0 { fill: color-mix(in srgb, var(--ld-c0) 55%, #120c2a); }
.ld-cell.c1 { fill: color-mix(in srgb, var(--ld-c1) 45%, #120c2a); }
.ld-cell.c2 { fill: color-mix(in srgb, var(--ld-c2) 50%, #120c2a); }
.ld-cell.c3 { fill: color-mix(in srgb, var(--ld-c3) 55%, #120c2a); }
.ld-star { fill: rgba(255, 255, 255, .55); pointer-events: none; }
.ld-cell.start + .ld-star { fill: rgba(255, 255, 255, .85); }
.ld-arrow { fill: rgba(255, 255, 255, .45); }
.ld-yard { stroke-width: 1.2; }
.ld-yard.c0 { fill: color-mix(in srgb, var(--ld-c0) 30%, #0d0a24); stroke: var(--ld-c0); }
.ld-yard.c1 { fill: color-mix(in srgb, var(--ld-c1) 22%, #0d0a24); stroke: var(--ld-c1); }
.ld-yard.c2 { fill: color-mix(in srgb, var(--ld-c2) 25%, #0d0a24); stroke: var(--ld-c2); }
.ld-yard.c3 { fill: color-mix(in srgb, var(--ld-c3) 30%, #0d0a24); stroke: var(--ld-c3); }
.ld-yard.off, .ld-spot.off { opacity: .28; }
.ld-yard-in { fill: #0d0a24; }
.ld-spot { fill: #1b1740; stroke-width: 1; }
.ld-spot.c0 { stroke: var(--ld-c0); } .ld-spot.c1 { stroke: var(--ld-c1); } .ld-spot.c2 { stroke: var(--ld-c2); } .ld-spot.c3 { stroke: var(--ld-c3); }
.ld-tri { stroke: #0d0a24; stroke-width: .6; }
.ld-tri.c0 { fill: var(--ld-c0); } .ld-tri.c1 { fill: var(--ld-c1); } .ld-tri.c2 { fill: var(--ld-c2); } .ld-tri.c3 { fill: var(--ld-c3); }

/* tokens: horse pieces (buttons) positioned in % of the board; the base stands on the square's centre */
.ld-tokens { position: absolute; inset: 0; pointer-events: none; }
.ld-token {
  --tc: var(--ld-c0);
  position: absolute; width: 7%; aspect-ratio: 100 / 120; padding: 0; border: 0; background: none; color: var(--tc);
  transform: translate(-50%, -78%); cursor: default; pointer-events: auto; -webkit-tap-highlight-color: transparent;
  transition: left .13s ease-out, top .13s ease-out, width .2s;
  z-index: calc(100 + var(--z, 0));
}
.ld-token.c1 { --tc: var(--ld-c1); } .ld-token.c2 { --tc: var(--ld-c2); } .ld-token.c3 { --tc: var(--ld-c3); }
/* soft contact shadow under the base */
.ld-token::before {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -4%; height: 20%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); transition: transform .2s, opacity .2s;
}
.ld-horse {
  position: relative; display: block; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .25)); transform-origin: 50% 88%; transition: transform .2s, filter .2s;
}
.ld-num {
  position: absolute; right: -16%; bottom: 2%; min-width: 1.5em; height: 1.5em; border-radius: 50%;
  display: grid; place-items: center; font: 800 clamp(.48rem, 1.5vw, .62rem)/1 var(--font-body);
  color: #fff; background: #140b26; box-shadow: 0 0 0 1.5px var(--tc); pointer-events: none;
}
.ld-token.small { width: 5.2%; }
.ld-token.small .ld-num { display: none; }
@media (max-width: 480px) { .ld-token:not(.legal) .ld-num { display: none; } }
.ld-token:focus-visible { outline: none; }
.ld-token:focus-visible .ld-horse { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 5px var(--focus)); }

/* movable horses hop gently and glow; the ring on the floor marks them too */
.ld-token.legal { cursor: pointer; z-index: calc(300 + var(--z, 0)); }
.ld-token.legal::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -12%; height: 34%; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 10px var(--tc), inset 0 0 6px var(--tc); animation: ld-ring 1s ease-in-out infinite alternate;
}
.ld-token.legal .ld-horse { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 6px var(--tc)); animation: ld-hop .9s ease-in-out infinite; }
.ld-token.legal:hover .ld-horse, .ld-token.legal:focus-visible .ld-horse { animation: none; transform: translateY(-10%) scale(1.14); }
.ld-token.moving { z-index: 600; }
.ld-token.moving .ld-horse { transform: translateY(-16%) scale(1.12) rotate(-6deg); filter: drop-shadow(0 6px 3px rgba(0, 0, 0, .45)); }
.ld-token.moving::before { transform: scale(.75); opacity: .6; }
.ld-token.hit { transition: left .5s ease-in-out, top .5s ease-in-out, width .2s; z-index: 500; }
.ld-token.hit .ld-horse { animation: ld-hit .55s ease-out; }
@keyframes ld-hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-13%) rotate(-4deg); } 60% { transform: translateY(-11%) rotate(2deg); } }
@keyframes ld-ring { from { opacity: .45; transform: scale(.9); } to { opacity: 1; transform: scale(1.05); } }
@keyframes ld-hit { 0% { transform: translateY(-30%) rotateY(0) scale(1.25); } 100% { transform: translateY(0) rotateY(720deg) scale(1); } }

/* die: a real 3D cube; the player's colour glows on the table under it */
.ld-controls { display: flex; align-items: center; justify-content: center; gap: 20px; }
.ld-die {
  --die-c: var(--ld-glow); --s: 44px;
  position: relative; width: 60px; height: 60px; flex: none; display: grid; place-items: center; perspective: 260px;
  border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--die-c) 45%, transparent), transparent 75%);
}
.ld-cube {
  position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.2, .75, .3, 1.08);
}
.ld-die.instant .ld-cube { transition: none; }
.ld-die.rolling { animation: ld-toss .62s ease-out; }
@keyframes ld-toss { 0% { transform: translateY(0); } 35% { transform: translateY(-14px); } 70% { transform: translateY(1px); } 85% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
.ld-face {
  position: absolute; inset: 0; padding: 16%; border-radius: 14%; backface-visibility: hidden;
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); place-items: center;
  background: radial-gradient(circle at 30% 25%, #fff, #ece8fb 55%, #cfc8e8);
  box-shadow: inset 0 0 0 1px rgba(40, 20, 80, .18), inset -2px -3px 5px rgba(60, 40, 110, .25), inset 2px 2px 4px #fff;
}
.ld-face.f1 { transform: translateZ(calc(var(--s) / 2)); }
.ld-face.f6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.ld-face.f3 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.ld-face.f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.ld-face.f2 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.ld-face.f5 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.ld-face i { width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4a3f7a, #120a26 70%); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .8); }
.ld-face.f1 i { width: 90%; background: radial-gradient(circle at 40% 35%, #ff7a9b, #b0103c 70%); }
.ld-die.blank .ld-face i { visibility: hidden; }
.ld-roll { min-width: 150px; font-size: 1.05rem; }
.ld-note { margin: 0; min-height: 1.5em; text-align: center; color: var(--muted); font-weight: 600; }