/* Ludo page styles — pairs with ../../shared.css */
:root {
  --c-red: #c0392b;
  --c-green: #2d8a4f;
  --c-yellow: #d4a017;
  --c-blue: #1f3a5f;
  --c-red-soft: #f1c6c1;
  --c-green-soft: #c6e0cf;
  --c-yellow-soft: #f1dfae;
  --c-blue-soft: #c4cfdb;
  --track: #fbf6ea;
  --track-line: #d6c8a8;
}

.game-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.game-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
  line-height: 1;
}
.game-sub { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

/* Setup screen */
.setup {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow);
}
.setup h2 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 4px;
}
.setup-help { color: var(--muted); margin: 0 0 18px; font-size: 13px; }

.seat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 620px) { .seat-grid { grid-template-columns: 1fr; } }

.seat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.seat strong {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  min-width: 60px;
}
.dot {
  width: 18px; height: 18px; border-radius: 50%;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08), inset 0 -2px 0 rgba(0,0,0,0.15);
}
.seat-opts {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  margin-left: auto;
}
.seat-opts .opt {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: 600 12px 'Inter', sans-serif;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.seat-opts .opt:hover { color: var(--ink); }
.seat-opts .opt.is-active {
  background: var(--accent);
  color: var(--paper);
}

.setup-actions { display: flex; justify-content: flex-end; }

/* Game layout */
.play {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  align-items: start;
}
.play[hidden] { display: none; }
.setup[hidden] { display: none; }
@media (max-width: 900px) {
  .play { grid-template-columns: 1fr; }
}

.board-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}

.board {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  background: var(--bg-2);
  border-radius: 8px;
  overflow: hidden;
}

/* Cells */
.cell {
  position: relative;
  border: 1px solid var(--track-line);
  background: var(--track);
}
.cell.yard {
  border: none;
  background: transparent;
}
.cell.empty { background: transparent; border: none; }

/* Yard backgrounds — pass color via data-color */
.yard-bg {
  border: 2px solid var(--ink);
  border-radius: 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yard-bg.red    { background: var(--c-red); }
.yard-bg.green  { background: var(--c-green); }
.yard-bg.yellow { background: var(--c-yellow); }
.yard-bg.blue   { background: var(--c-blue); }
.yard-inner {
  width: 70%;
  height: 70%;
  background: var(--paper);
  border-radius: 10px;
  position: relative;
  border: 1px solid rgba(0,0,0,0.08);
}
.yard-slot {
  position: absolute;
  width: 38%;
  height: 38%;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid currentColor;
}
.yard-slot.tl { top: 6%; left: 6%; }
.yard-slot.tr { top: 6%; right: 6%; }
.yard-slot.bl { bottom: 6%; left: 6%; }
.yard-slot.br { bottom: 6%; right: 6%; }

/* Track-colored start-of-lane squares */
.cell.start-red    { background: var(--c-red-soft); }
.cell.start-green  { background: var(--c-green-soft); }
.cell.start-yellow { background: var(--c-yellow-soft); }
.cell.start-blue   { background: var(--c-blue-soft); }

/* Home columns leading to centre */
.cell.home-red    { background: var(--c-red); }
.cell.home-green  { background: var(--c-green); }
.cell.home-yellow { background: var(--c-yellow); }
.cell.home-blue   { background: var(--c-blue); }

/* Safe squares */
.cell.safe::before {
  content: '★';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(28, 42, 58, 0.35);
  font-size: clamp(10px, 1.6vw, 16px);
  pointer-events: none;
}

/* Centre finish triangles */
.center {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Tokens — absolutely positioned over the board */
.token {
  position: absolute;
  width: calc(100% / 15);
  height: calc(100% / 15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 170ms cubic-bezier(0.4, 0.0, 0.2, 1),
              top 170ms cubic-bezier(0.4, 0.0, 0.2, 1),
              transform 200ms ease;
  cursor: default;
  z-index: 5;
}
.token.no-transition { transition: none !important; }
.token.is-moving { z-index: 12; }
/* Clickable tokens float above any opponent sharing the cell so taps land
   on the player's own piece rather than the opponent's. */
.token.is-clickable { z-index: 15; }
/* Tokens parked in the centre finish triangles sit below the dice button. */
.token.finished { z-index: 3; }
.token-body {
  width: 72%;
  height: 72%;
  border-radius: 50%;
  border: 2px solid rgba(28, 42, 58, 0.9);
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,0.18),
    inset 0 3px 0 rgba(255,255,255,0.25),
    0 2px 4px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(9px, 1.3vw, 13px);
  color: rgba(255,255,255,0.85);
}
.token[data-color="red"]    .token-body { background: var(--c-red); }
.token[data-color="green"]  .token-body { background: var(--c-green); }
.token[data-color="yellow"] .token-body { background: var(--c-yellow); color: rgba(28,42,58,0.85); border-color: rgba(28,42,58,0.95); }
.token[data-color="blue"]   .token-body { background: var(--c-blue); }

.token.is-active .token-body {
  animation: pulse 1100ms ease-in-out infinite;
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,0.18),
    inset 0 3px 0 rgba(255,255,255,0.25),
    0 0 0 3px var(--accent-soft),
    0 0 0 5px rgba(31, 58, 95, 0.55);
  cursor: pointer;
}
.token.is-clickable .token-body { cursor: pointer; }
.token.is-clickable:hover .token-body { transform: scale(1.06); }
.token.finished .token-body {
  opacity: 0.95;
  transform: scale(0.55);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Capture — knocked-back token shrinks toward home */
@keyframes ludo-captured {
  0%   { transform: scale(1); opacity: 1; }
  35%  { transform: scale(1.3) rotate(-8deg); opacity: 1; }
  100% { transform: scale(0.35) rotate(20deg); opacity: 0.75; }
}
.token.is-captured .token-body {
  animation: ludo-captured 340ms ease-in;
}

/* Clickable tokens gently breathe to draw attention */
@keyframes ludo-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.16); }
}
.token.is-clickable .token-body {
  animation: ludo-breathe 1500ms ease-in-out infinite;
}

/* Finished token settles with a tiny bounce */
@keyframes ludo-finished-in {
  0%   { transform: scale(0.55); }
  60%  { transform: scale(0.7); }
  100% { transform: scale(0.55); }
}
.token.finished.just-arrived .token-body {
  animation: ludo-finished-in 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  .token, .token.is-captured .token-body, .token.is-clickable .token-body,
  .token.finished.just-arrived .token-body { animation: none; transition: none; }
}

/* Stack two tokens on the same square */
.token.stack-2 .token-body { transform: scale(0.82); }
.token.stack-2.idx-1 .token-body { transform: scale(0.82) translate(20%, 20%); }

/* Aside */
.aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.turn-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.turn-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.turn-row { display: flex; align-items: center; gap: 10px; }
.turn-dot {
  width: 18px; height: 18px; border-radius: 50%;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18);
}
.turn-dot.red { background: var(--c-red); }
.turn-dot.green { background: var(--c-green); }
.turn-dot.yellow { background: var(--c-yellow); }
.turn-dot.blue { background: var(--c-blue); }
.turn-name {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
}
.turn-sub { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }

/* Dice — sits in the centre of the board, styled as a real die */
.dice-btn {
  position: absolute;
  /* Centre of the 15×15 grid is the middle of cells 7–9 (0-indexed: 7–9). */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9%;   /* a bit larger than one cell wide — deliberately smaller than the centre quadrant */
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 5;
  transition: transform 120ms ease;
}
.dice-btn:hover:not(:disabled) .dice-face { background: #fffdf5; }
.dice-btn:active:not(:disabled) { transform: translate(-50%, -50%) translateY(1px); }
.dice-btn:disabled { cursor: default; }
.dice-btn:disabled .dice-face { opacity: 0.85; }

.dice-face {
  /* Default colour vars — overridden when data-color is set */
  --die-bg: var(--paper);
  --die-border: var(--ink);
  --die-pip: var(--ink);

  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18%;
  background: var(--die-bg);
  border: 2px solid var(--die-border);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 14%;
  gap: 0;
  box-sizing: border-box;
  box-shadow:
    0 6px 14px rgba(31, 25, 13, 0.22),
    inset 0 -3px 0 rgba(0, 0, 0, 0.08),
    inset 0 3px 0 rgba(255, 255, 255, 0.6);
  transition: background 200ms ease, border-color 200ms ease;
}

/* Per-player tints — each colour gets a paper-tinted die with strong pips */
.dice-face[data-color="red"] {
  --die-bg: #fdecea;
  --die-border: var(--c-red);
  --die-pip: var(--c-red);
}
.dice-face[data-color="green"] {
  --die-bg: #e7f3ec;
  --die-border: var(--c-green);
  --die-pip: var(--c-green);
}
.dice-face[data-color="yellow"] {
  --die-bg: #fbf3dd;
  --die-border: var(--c-yellow);
  --die-pip: #8a6a0a;   /* darker so pips read clearly on the light yellow tint */
}
.dice-face[data-color="blue"] {
  --die-bg: #e6ecf4;
  --die-border: var(--c-blue);
  --die-pip: var(--c-blue);
}
.dice-face.rolling { animation: tumble 480ms ease-in-out; }
@keyframes tumble {
  0%   { transform: rotate(0)        scale(1);    }
  25%  { transform: rotate(-90deg)   scale(1.06); }
  50%  { transform: rotate(-180deg)  scale(0.94); }
  75%  { transform: rotate(-270deg)  scale(1.04); }
  100% { transform: rotate(-360deg)  scale(1);    }
}

/* Pip dots — 7 positions in a 3×3 grid. We toggle which are visible per face. */
.dice-face .pip {
  align-self: center;
  justify-self: center;
  width: 70%;
  aspect-ratio: 1 / 1;
  background: var(--die-pip);
  border-radius: 50%;
  visibility: hidden;
  transition: background 200ms ease;
}
/* Position each pip in the 3x3 grid */
.dice-face .p1 { grid-area: 1 / 1; }   /* top-left */
.dice-face .p2 { grid-area: 1 / 3; }   /* top-right */
.dice-face .p3 { grid-area: 2 / 1; }   /* middle-left */
.dice-face .p4 { grid-area: 2 / 2; }   /* centre */
.dice-face .p5 { grid-area: 2 / 3; }   /* middle-right */
.dice-face .p6 { grid-area: 3 / 1; }   /* bottom-left */
.dice-face .p7 { grid-area: 3 / 3; }   /* bottom-right */

/* Which pips are shown for each face value */
.dice-face[data-face="1"] .p4 { visibility: visible; }
.dice-face[data-face="2"] .p1,
.dice-face[data-face="2"] .p7 { visibility: visible; }
.dice-face[data-face="3"] .p1,
.dice-face[data-face="3"] .p4,
.dice-face[data-face="3"] .p7 { visibility: visible; }
.dice-face[data-face="4"] .p1,
.dice-face[data-face="4"] .p2,
.dice-face[data-face="4"] .p6,
.dice-face[data-face="4"] .p7 { visibility: visible; }
.dice-face[data-face="5"] .p1,
.dice-face[data-face="5"] .p2,
.dice-face[data-face="5"] .p4,
.dice-face[data-face="5"] .p6,
.dice-face[data-face="5"] .p7 { visibility: visible; }
.dice-face[data-face="6"] .p1,
.dice-face[data-face="6"] .p2,
.dice-face[data-face="6"] .p3,
.dice-face[data-face="6"] .p5,
.dice-face[data-face="6"] .p6,
.dice-face[data-face="6"] .p7 { visibility: visible; }

.dice-label {
  font: 700 11px 'Inter', sans-serif;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(31, 25, 13, 0.18);
  white-space: nowrap;
}
.dice-btn:disabled .dice-label { opacity: 0.55; }

/* Players list */
.players-list {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow);
}
.player-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  font: 600 13px 'Inter', sans-serif;
}
.player-row.is-turn { background: var(--accent-soft); }
.player-row .dot { width: 14px; height: 14px; border-radius: 50%; }
.player-row .name { color: var(--ink); }
.player-row .name small { color: var(--muted); font-weight: 500; }
.player-row .home-count {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.player-row.is-finished {
  opacity: 0.85;
  background: rgba(213, 192, 125, 0.14);
}
.player-row.is-finished .name { color: var(--ink-soft); }
.player-row.is-finished .place-tag {
  color: var(--ink);
  font-family: 'Fraunces', serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.player-row.place-1 { background: rgba(213, 192, 125, 0.28); }

/* Results scoreboard */
.overlay-card-wide { max-width: 420px; width: 100%; }
.result-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.result-row {
  display: grid;
  grid-template-columns: 34px 16px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.result-row.place-1 {
  background: rgba(213, 192, 125, 0.28);
  border-color: rgba(213, 192, 125, 0.6);
}
.result-row.place-2 { background: rgba(200, 200, 205, 0.22); }
.result-row.place-3 { background: rgba(196, 156, 108, 0.22); }
.result-medal {
  font-size: 22px;
  line-height: 1;
  text-align: center;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, sans-serif;
}
.result-medal .place-num {
  display: inline-block;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 22px;
  color: var(--ink-soft);
}
.result-dot { width: 14px; height: 14px; border-radius: 50%; }
.result-name {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}
.result-name small { color: var(--muted); font-weight: 500; font-family: 'Inter', sans-serif; }
.result-place {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* How to play */
.howto {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink-soft);
  font-size: 13px;
}
.howto summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
}
.howto summary::-webkit-details-marker { display: none; }
.howto summary::after { content: ' +'; color: var(--muted); }
.howto[open] summary::after { content: ' −'; }
.howto ul { margin: 10px 0 0; padding-left: 18px; }
.howto li { margin: 6px 0; line-height: 1.5; }

/* Overlay for win */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 42, 58, 0.35);
  backdrop-filter: blur(4px);
  z-index: 50;
}
.overlay[hidden] { display: none; }
.overlay-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 28px;
  text-align: center;
  max-width: 360px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
}
.overlay-card h2 {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  margin: 0 0 8px;
}
.overlay-card p { color: var(--ink-soft); margin: 0 0 18px; }
.overlay-actions { display: flex; gap: 8px; justify-content: center; }

@media (max-width: 520px) {
  .game-title { font-size: 26px; }
}