/* Ludo's shared look: theme colours, the 15×15 board, tokens and dice. Used by
   both board.html (TV) and player.html (phone), on top of /shared.css. */

:root {
  --ludo-bg: #1d2260;
  --ludo-bg-dark: #0e1236;
  --ludo-red: #e23b3b;
  --ludo-green: #23a455;
  --ludo-yellow: #f2c14e;
  --ludo-blue: #2f6fed;
  --ludo-cell: #fdfdfb;
  --ludo-line: #c9ccd6;
}

.hidden { display: none !important; }

/* colour helpers */
.dot.yellow { background: var(--ludo-yellow); }
.dot.green { background: var(--ludo-green); }
.dot.red { background: var(--ludo-red); }
.dot.blue { background: var(--ludo-blue); }

/* ===================================================================== */
/* Board                                                                 */
/* ===================================================================== */
.ludo-board {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--ludo-cell);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  border: 3px solid #fff;
}

.lcell {
  position: absolute;
  width: calc(100% / 15);
  height: calc(100% / 15);
  box-shadow: inset 0 0 0 0.5px var(--ludo-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lcell .mark { font-size: clamp(8px, 2.2vmin, 26px); line-height: 1; opacity: 0.55; color: #555; }
.lcell.start .mark { color: #fff; opacity: 0.9; }
.lcell[data-dir="green"] .mark { transform: rotate(90deg); }
.lcell[data-dir="yellow"] .mark { transform: rotate(180deg); }
.lcell[data-dir="blue"] .mark { transform: rotate(270deg); }
.lcell.red, .yard.red, .yard-spot.red { background: var(--ludo-red); }
.lcell.green, .yard.green, .yard-spot.green { background: var(--ludo-green); }
.lcell.yellow, .yard.yellow, .yard-spot.yellow { background: var(--ludo-yellow); }
.lcell.blue, .yard.blue, .yard-spot.blue { background: var(--ludo-blue); }

.yard {
  position: absolute;
  width: calc(600% / 15);
  height: calc(600% / 15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.yard-inner {
  width: 68%;
  height: 68%;
  background: #fff;
  border-radius: 14%;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}
.yard-spot {
  position: absolute;
  width: calc(100% / 15 * 0.95);
  height: calc(100% / 15 * 0.95);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.35;
}

.home-center {
  position: absolute;
  width: calc(300% / 15);
  height: calc(300% / 15);
  background: conic-gradient(
    from -45deg,
    var(--ludo-green) 0 90deg,
    var(--ludo-yellow) 0 180deg,
    var(--ludo-blue) 0 270deg,
    var(--ludo-red) 0
  );
}

/* ---- tokens ---- */
.token-layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.token {
  --s: 1;
  position: absolute;
  width: calc(100% / 15 * 0.78);
  height: calc(100% / 15 * 0.78);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(var(--s));
  transition: top 0.13s ease-out, left 0.13s ease-out, transform 0.2s ease;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 -3px 5px rgba(0, 0, 0, 0.3), inset 0 3px 4px rgba(255, 255, 255, 0.45);
  z-index: 1;
}
.token::after {
  content: "";
  position: absolute;
  top: 28%; right: 28%; bottom: 28%; left: 28%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.token.red { background: var(--ludo-red); }
.token.green { background: var(--ludo-green); }
.token.yellow { background: var(--ludo-yellow); }
.token.blue { background: var(--ludo-blue); }
.token.last { z-index: 2; box-shadow: 0 0 0 2px #111, 0 0 10px 3px rgba(255, 255, 255, 0.9); }
.token.movable {
  z-index: 3;
  animation: token-pulse 0.9s ease-in-out infinite;
}
.token.clickable { pointer-events: auto; cursor: pointer; }
/* A bigger invisible hit area makes small tokens easy to tap on phones. */
.token.clickable::before {
  content: "";
  position: absolute;
  top: -40%; right: -40%; bottom: -40%; left: -40%;
  border-radius: 50%;
}
@keyframes token-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(calc(var(--s) * 1.05)); box-shadow: 0 0 0 2px #111, 0 0 6px 2px #fff; }
  50% { transform: translate(-50%, -50%) scale(calc(var(--s) * 1.25)); box-shadow: 0 0 0 2px #111, 0 0 16px 6px #fff; }
}

/* ===================================================================== */
/* Dice                                                                  */
/* ===================================================================== */
.dice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  padding: 8px;
  width: 72px;
  height: 72px;
  background: #fff;
  border-radius: 18%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 -4px 0 rgba(0, 0, 0, 0.12);
  border: 4px solid #fff;
}
.dice[data-color="red"] { border-color: var(--ludo-red); }
.dice[data-color="green"] { border-color: var(--ludo-green); }
.dice[data-color="yellow"] { border-color: var(--ludo-yellow); }
.dice[data-color="blue"] { border-color: var(--ludo-blue); }
.dice .pip { border-radius: 50%; }
.dice .pip.on { background: #1d2733; }
.dice.rolling { animation: dice-shake 0.14s linear infinite; }
@keyframes dice-shake {
  0% { transform: rotate(-12deg) translateY(-2px); }
  50% { transform: rotate(12deg) translateY(2px); }
  100% { transform: rotate(-12deg) translateY(-2px); }
}

/* home-progress pips (● = token home) */
.home-pips { letter-spacing: 1px; font-size: 0.85em; white-space: nowrap; }
.home-pips .h { opacity: 0.3; }
.home-pips .h.in { opacity: 1; }