/* =============================================
   LuxTool — /games/ludo/ludo.css
   Tool-specific styles only. Site chrome AND every shared
   building block used on this page (.tool-page, .tool-head,
   .panel, .stat-box/.stat-num/.stat-label, .ts-seo, .lp-seo-*,
   .lp-list, .lp-faq, .back-link-btn, .status, .btn, .btn-primary,
   .btn-secondary) come from /style.css, which this page also
   loads and which is shared by every tool on the site.
   Do NOT duplicate those rules here.

   This file only holds the setup screen, the board, dice,
   pieces, player bar, and result screen — parts unique to Ludo.
   ============================================= */

.hidden { display: none !important; }

/* ── SETUP SCREEN ── */
.ludo-setup-section { margin-bottom: 1.4rem; }

.ludo-setup-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: .6rem;
}

.ludo-btn-row {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.ludo-seatcount-btn,
.ludo-diff-btn,
.ludo-mode-btn {
  flex: 1;
  min-width: 90px;
  padding: .7rem .8rem;
  background: rgba(30, 41, 59, .6);
  border: 1px solid var(--gold-dim);
  border-radius: .65rem;
  color: var(--text);
  font-family: inherit;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: .2s;
}

.ludo-seatcount-btn:hover,
.ludo-diff-btn:hover,
.ludo-mode-btn:hover {
  border-color: var(--gold);
  background: rgba(251, 191, 36, .12);
}

.ludo-seatcount-btn.active,
.ludo-diff-btn.active,
.ludo-mode-btn.active {
  background: linear-gradient(135deg, #fbbf24, #facc15);
  color: #0f172a;
  border-color: transparent;
}

.ludo-seat-list {
  display: grid;
  gap: .6rem;
}

.ludo-seat-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: rgba(30, 41, 59, .5);
  border: 1px solid var(--border);
  border-radius: .65rem;
  padding: .6rem .8rem;
  flex-wrap: wrap;
}

.ludo-seat-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(0, 0, 0, .3);
}

.ludo-seat-name {
  font-weight: 700;
  font-size: .88rem;
  min-width: 62px;
}

.ludo-seat-toggle {
  display: flex;
  gap: .4rem;
  margin-left: auto;
}

.ludo-seat-kind-btn {
  padding: .4rem .7rem;
  background: rgba(15, 23, 42, .6);
  border: 1px solid var(--gold-dim);
  border-radius: .5rem;
  color: var(--muted);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
}

.ludo-seat-kind-btn.active {
  background: rgba(251, 191, 36, .18);
  color: var(--gold);
  border-color: var(--gold);
}

/* ── STAGE / FULLSCREEN WRAPPER ── */
.ludo-stage {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.ludo-stage.ludo-fullscreen-active,
body.ludo-fake-fullscreen-active .ludo-stage.ludo-fake-fullscreen {
  background: var(--bg);
  padding: 1rem;
  width: 100%;
  height: 100%;
  justify-content: center;
  overflow: auto;
}

body.ludo-fake-fullscreen-active .ludo-fake-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 999;
}

.ludo-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}

.ludo-icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 191, 36, .1);
  border: 1px solid var(--gold-dim);
  border-radius: .6rem;
  color: var(--gold);
  font-size: 1.1rem;
  cursor: pointer;
  transition: .2s;
  flex-shrink: 0;
}

.ludo-icon-btn:hover {
  background: rgba(251, 191, 36, .22);
  transform: translateY(-1px);
}

/* ── PLAYER BAR ── */
.ludo-player-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .6rem;
}

.ludo-player-card {
  --seat-color: #fff;
  display: flex;
  align-items: center;
  gap: .55rem;
  background: rgba(30, 41, 59, .55);
  border: 1px solid var(--border);
  border-radius: .65rem;
  padding: .55rem .7rem;
  transition: .2s;
  opacity: .72;
}

.ludo-player-active {
  opacity: 1;
  border-color: var(--seat-color);
  box-shadow: 0 0 14px color-mix(in srgb, var(--seat-color) 40%, transparent);
}

.ludo-player-done {
  opacity: .55;
}

.ludo-player-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--seat-color);
  flex-shrink: 0;
  box-shadow: 0 0 6px color-mix(in srgb, var(--seat-color) 60%, transparent);
}

.ludo-player-name {
  font-size: .82rem;
  font-weight: 700;
}

.ludo-player-sub {
  font-size: .72rem;
  color: var(--muted);
  margin-top: .1rem;
}

/* ── BOARD (SVG) ── */
.ludo-board-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

.ludo-board {
  width: 100%;
  height: 100%;
}

.ludo-board-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ── PER-SEAT CORNER DICE ──
   One small dice sits over each player's yard so, in local
   multiplayer, whoever is up can just tap the die closest to
   them instead of reaching for one shared control. Only the
   die belonging to the seat whose turn it is lights up and is
   clickable; the rest sit dim. The big central dice (and Space)
   still works too. */
.ludo-corner-dice {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ludo-corner-die {
  position: absolute;
  width: 15%;
  aspect-ratio: 1 / 1;
  min-width: 34px;
  max-width: 58px;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  border-radius: .8rem;
  background: rgba(8, 11, 20, .78);
  border: 2px solid rgba(255, 255, 255, .12);
  padding: 10%;
  cursor: not-allowed;
  opacity: .38;
  pointer-events: auto;
  transition: opacity .25s, transform .2s, border-color .25s, box-shadow .25s;
}

.ludo-corner-die .ludo-corner-die-face { display: block; width: 100%; height: 100%; }

.ludo-corner-die-active {
  opacity: 1;
  border-color: var(--seat-color, #fbbf24);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--seat-color, #fbbf24) 35%, transparent), 0 0 16px color-mix(in srgb, var(--seat-color, #fbbf24) 55%, transparent);
  animation: ludo-corner-die-pulse 1.6s ease-in-out infinite;
}

.ludo-corner-die-active:not(:disabled) {
  cursor: pointer;
}

.ludo-corner-die-active:not(:disabled):hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.ludo-corner-die-active:disabled {
  cursor: default;
  animation: none;
}

@keyframes ludo-corner-die-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--seat-color, #fbbf24) 30%, transparent), 0 0 10px color-mix(in srgb, var(--seat-color, #fbbf24) 45%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--seat-color, #fbbf24) 45%, transparent), 0 0 22px color-mix(in srgb, var(--seat-color, #fbbf24) 80%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .ludo-corner-die-active { animation: none; }
}

@media (max-width: 480px) {
  .ludo-corner-die { min-width: 28px; }
}

/* ── PIECES (SVG <g> elements, positioned via CSS transform) ── */
.ludo-piece {
  cursor: default;
  transition: transform .38s cubic-bezier(.34, 1.56, .64, 1);
  transform-box: fill-box;
  transform-origin: center;
}

.ludo-piece-body {
  transition: filter .15s;
}

/* Bounce plays on the inner visual group only (not the outer <g>, which
   carries the piece's board-position transform via inline style) so the
   two transforms don't fight — the shadow stays grounded while the token
   hops, same idea as Ludo King's "these are playable" cue. */
.ludo-piece-visual {
  transform-box: fill-box;
  transform-origin: center;
}

.ludo-piece-selectable .ludo-piece-visual {
  animation: ludo-piece-bounce .85s ease-in-out infinite;
}

@keyframes ludo-piece-bounce {
  0%, 100% { transform: translateY(0); }
  28% { transform: translateY(-22%); }
  50% { transform: translateY(0); }
  66% { transform: translateY(-9%); }
  82% { transform: translateY(0); }
}

/* A captured piece flying back to its yard: longer, smoother ease than
   a normal hop, plus a little shrink so it visibly retreats rather than
   teleporting home. */
.ludo-piece-captured-flight {
  transition: transform .5s cubic-bezier(.4, 0, .2, 1) !important;
}

.ludo-piece-pulse {
  opacity: 0;
  r: 0;
}

.ludo-piece-selectable {
  cursor: pointer;
}

.ludo-piece-selectable .ludo-piece-pulse {
  animation: ludo-piece-pulse 1.1s ease-out infinite;
}

.ludo-piece-selectable .ludo-piece-body {
  filter: url(#ludo-soft-drop) drop-shadow(0 0 6px rgba(251, 191, 36, .85));
}

.ludo-piece-selectable:hover .ludo-piece-body,
.ludo-piece-selectable:focus-visible .ludo-piece-body {
  filter: url(#ludo-soft-drop) drop-shadow(0 0 10px rgba(251, 191, 36, 1));
}

.ludo-piece-selectable:focus-visible {
  outline: none;
}

.ludo-piece-finished {
  opacity: .95;
}

@keyframes ludo-piece-pulse {
  0% { r: 0; opacity: .9; }
  100% { r: 22; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ludo-piece { transition: none; }
  .ludo-piece-selectable .ludo-piece-pulse { animation: none; opacity: .8; r: 16; }
  .ludo-piece-selectable .ludo-piece-visual { animation: none; }
  .ludo-piece-captured-flight { transition: transform .01s linear !important; }
}

/* ── CAPTURE BURST ── */
.ludo-capture-burst {
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}

.ludo-capture-ring {
  animation: ludo-capture-ring-pop .45s ease-out forwards;
}

.ludo-capture-spark {
  opacity: 0;
  animation: ludo-capture-spark-fly .42s ease-out forwards;
}

@keyframes ludo-capture-ring-pop {
  0% { r: 4; stroke-width: 6; stroke-opacity: 1; }
  100% { r: 30; stroke-width: 0; stroke-opacity: 0; }
}

@keyframes ludo-capture-spark-fly {
  0% { opacity: 1; transform: scale(.2); }
  100% { opacity: 0; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ludo-capture-ring, .ludo-capture-spark { animation: none; opacity: 0; }
}

/* ── CONTROLS ── */
.ludo-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.ludo-dice-btn {
  width: 84px;
  height: 84px;
  padding: 0;
  border-radius: 1.1rem;
  background: linear-gradient(145deg, rgba(251, 191, 36, .16), rgba(120, 83, 8, .1));
  border: 2px solid var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .2s;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .4);
}

.ludo-dice-btn:hover:not(:disabled) {
  border-color: var(--gold);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), 0 0 18px var(--gold-glow);
  transform: translateY(-2px);
}

.ludo-dice-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Glows in the current player's color so it's obvious whose turn it is,
   the way Ludo King highlights the active player's dice. */
.ludo-dice-glow {
  --seat-color: #fbbf24;
  border-color: var(--seat-color);
  animation: ludo-dice-turn-pulse 1.6s ease-in-out infinite;
}

@keyframes ludo-dice-turn-pulse {
  0%, 100% {
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), 0 0 10px color-mix(in srgb, var(--seat-color) 55%, transparent);
  }
  50% {
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), 0 0 26px color-mix(in srgb, var(--seat-color) 85%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ludo-dice-glow { animation: none; box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 16px color-mix(in srgb, var(--seat-color) 70%, transparent); }
}

/* Turn status text picks up a soft left accent bar in the active color */
#ludo-turn-status {
  --seat-color: #fbbf24;
  border-left: 3px solid color-mix(in srgb, var(--seat-color) 70%, transparent);
  padding-left: .6rem;
  transition: border-color .3s;
}

#ludo-dice-face {
  display: block;
  width: 62px;
  height: 62px;
}

.ludo-die-svg { width: 100%; height: 100%; display: block; }

.ludo-die-idle { opacity: .45; }

.ludo-dice-rolling #ludo-dice-face {
  animation: ludo-dice-spin .5s linear infinite;
}

@keyframes ludo-dice-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.14); }
  100% { transform: rotate(360deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ludo-dice-rolling #ludo-dice-face { animation: none; }
}

.ludo-controls-side {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  align-items: center;
}

/* ── RESULT SCREEN ── */
.ludo-result-panel {
  text-align: center;
}

.ludo-result-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 1rem;
}

.ludo-rank-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  justify-content: center;
  padding: .5rem .8rem;
  background: rgba(30, 41, 59, .5);
  border: 1px solid var(--border);
  border-radius: .6rem;
  margin-bottom: .5rem;
  font-size: .9rem;
}

.ludo-rank-num {
  font-weight: 800;
  color: var(--gold);
  min-width: 28px;
}

.ludo-meta-row {
  display: flex;
  justify-content: space-between;
  max-width: 320px;
  margin: 0 auto .4rem;
  font-size: .85rem;
  color: var(--muted);
}

.ludo-meta-row strong { color: var(--text); }

.ludo-result-actions {
  display: flex;
  gap: .7rem;
  justify-content: center;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}

/* ── STAT CARDS GRID (reuses .stat-box/.stat-num/.stat-label) ── */
.ludo-stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
}

/* ── MOBILE ── */
@media (max-width: 720px) {
  .ludo-stat-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .ludo-dice-btn { width: 62px; height: 62px; font-size: 1.8rem; }
  .ludo-seat-toggle { margin-left: 0; width: 100%; }
  .ludo-seat-kind-btn { flex: 1; text-align: center; }
  .ludo-player-bar { grid-template-columns: repeat(2, 1fr); }
}