/* Ludo ("Čovječe ne ljuti se") — shared styling. All classes scoped `.ludo-*`.
 * Matches the hub's neon-indigo vibe. Consumed by lobby.html / tv.html via the
 * shared board.js / effects.js layers (+ player.js / tv.js).
 *
 * Color tokens here are CSS only; board.js injects per-color HEX inline so the
 * geometry stays self-contained. prefers-reduced-motion strips ALL animation.
 */

.ludo-root,
.ludo-scope {
  /* brand piece colours */
  --ludo-red:    #e6443b;
  --ludo-blue:   #2f7be0;
  --ludo-green:  #36a84b;
  --ludo-yellow: #f3b915;

  /* hub neon-indigo surface */
  --ludo-bg:        #0a0a0f;
  --ludo-bg-2:      #0f0f1a;
  --ludo-card-bg:   #16162a;
  --ludo-accent:    #7c3aed;
  --ludo-accent2:   #ec4899;
  --ludo-text:      #e2e8f0;
  --ludo-text-2:    #94a3b8;
  --ludo-border:    rgba(124, 58, 237, 0.18);
  --ludo-border-br: rgba(124, 58, 237, 0.5);
  --ludo-glow:      0 0 24px rgba(124, 58, 237, .35);
  --ludo-r:         14px;
  --ludo-rl:        22px;
  --ludo-shadow:    0 10px 34px rgba(0, 0, 0, .55);
  --ludo-tr:        .18s ease;

  color: var(--ludo-text);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, Arial, sans-serif;
}

/* ============================ BOARD HOST / SVG ============================ */
.ludo-board-host {
  position: relative;
  width: 100%;
  max-width: min(92vmin, 720px);
  margin: 0 auto;
  /* keep a square aspect so the SVG never crops on any device */
  aspect-ratio: 1 / 1;
}
.ludo-board-svg {
  display: block;
  width: 100%;
  height: 100%;
  /* preserveAspectRatio="xMidYMid meet" set inline -> NEVER crops */
  touch-action: manipulation;
  user-select: none;
}

/* plate behind the cross */
.ludo-plate {
  fill: #131322;
  stroke: var(--ludo-border-br);
  stroke-width: 2;
}

/* ============================ BASE YARDS ============================ */
.ludo-base-panel {
  stroke: rgba(0, 0, 0, .28);
  stroke-width: 2;
  opacity: .92;
  transition: filter var(--ludo-tr), opacity var(--ludo-tr);
}
.ludo-base-panel.is-active {
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, .55));
  opacity: 1;
}
.ludo-base-cradle {
  fill: rgba(15, 15, 26, .78);
  stroke: rgba(255, 255, 255, .12);
  stroke-width: 1.5;
}
.ludo-base-slot {
  fill: rgba(0, 0, 0, .22);
  stroke: rgba(255, 255, 255, .14);
  stroke-width: 1.5;
}

/* ============================ TRACK CELLS ============================ */
.ludo-cell {
  fill: #e9ecf3;
  stroke: #c2c9d6;
  stroke-width: 1.6;
}
.ludo-cell.is-start {
  stroke-width: 2.4;
}
.ludo-start-mark {
  font-size: 24px;
  opacity: .85;
  pointer-events: none;
}

/* ============================ HOME COLUMNS ============================ */
.ludo-home-cell {
  stroke-width: 2;
  opacity: .9;
}

/* ============================ CENTRE ============================ */
.ludo-center-bg {
  fill: #0f0f1a;
  stroke: rgba(255, 255, 255, .14);
  stroke-width: 2;
}
.ludo-center-tri {
  stroke: rgba(0, 0, 0, .3);
  stroke-width: 1.5;
  opacity: .92;
}
.ludo-center-crown {
  font-size: 30px;
  fill: #fff;
  opacity: .92;
  pointer-events: none;
}

/* ============================ DICE ============================ */
.ludo-layer-dice .ludo-die-face {
  fill: #fbfcff;
  stroke-width: 3;
  transition: stroke var(--ludo-tr);
}
.ludo-layer-dice.is-empty .ludo-die-face {
  fill: rgba(251, 252, 255, .35);
}
.ludo-die-pip {
  fill: #1a1a22;
  animation: ludo-die-in .22s ease both;
}
@keyframes ludo-die-in {
  from { transform: scale(.2); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* ============================ TOKENS ============================ */
.ludo-token {
  cursor: default;
  transition: filter var(--ludo-tr);
}
.ludo-token-shadow {
  fill: rgba(0, 0, 0, .28);
  transform: translateY(3px);
}
.ludo-token-body {
  stroke-width: 2;
}
.ludo-token-gloss {
  fill: rgba(255, 255, 255, .6);
  pointer-events: none;
}
.ludo-token-label {
  font-size: 17px;
  font-weight: 700;
  fill: #fff;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .35);
  stroke-width: 2px;
  pointer-events: none;
}
.ludo-token.is-done {
  opacity: .96;
}

/* legal & current: pulse / float so the player knows what they can move */
.ludo-token.is-legal {
  cursor: pointer;
}
.ludo-token.is-legal .ludo-token-body {
  stroke: #fff;
  stroke-width: 3;
  animation: ludo-pulse 1.05s ease-in-out infinite;
}
@keyframes ludo-pulse {
  0%, 100% { filter: url(#ludo-shadow) drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%      { filter: url(#ludo-shadow) drop-shadow(0 0 7px rgba(255,255,255,.9)); }
}
.ludo-token.is-legal:hover .ludo-token-body {
  stroke-width: 3.5;
}
.ludo-token.is-moving {
  pointer-events: none;
}

/* ============================ PATH PREVIEW ============================ */
.ludo-preview-dot {
  opacity: .55;
  pointer-events: none;
  animation: ludo-prev-in .18s ease both;
}
.ludo-preview-dot.is-dest {
  opacity: .85;
  stroke: #fff;
  stroke-width: 2;
}
@keyframes ludo-prev-in {
  from { opacity: 0; }
  to   { opacity: .55; }
}

/* ============================ FX OVERLAY ============================ */
.ludo-fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}
.ludo-confetti {
  position: absolute;
  top: 0;
  width: 10px;
  height: 16px;
  border-radius: 2px;
  will-change: transform, opacity;
}
.ludo-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  will-change: transform, opacity;
}
.ludo-pop-bit {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  will-change: transform, opacity;
}
.ludo-shock {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .85);
  will-change: transform, opacity;
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  .ludo-token.is-legal .ludo-token-body { animation: none; }
  .ludo-die-pip { animation: none; }
  .ludo-preview-dot { animation: none; }
  .ludo-confetti,
  .ludo-spark,
  .ludo-pop-bit,
  .ludo-shock { display: none; }
}