/* ═══ LUDO — Evotic Edge ═══
   Solo vs IA (2-4 joueurs). Plateau croix 15x15, dé, capture, sortie au 6.
   Réutilise le chrome games-shell (.gs-*). */

.lu-stage { display: flex; flex-direction: column; min-height: 0; }

/* ─── Lobby ─── */
.lu-lobby { padding: 28px 20px; text-align: center; }
.lu-lobby h2 { font-size: 20px; font-weight: 900; color: var(--gs-txt); margin: 0 0 14px; }
.lu-lobby p { font-size: 13px; color: var(--gs-txt3); margin: 0 0 22px; }
/* Mode segmenté : Ordinateur / Entre amis */
.lu-mode-seg { display: inline-flex; flex-wrap: wrap; justify-content: center; background: var(--gs-card, #f0ede4); border-radius: 999px; padding: 4px; gap: 4px; margin: 0 auto; }
#lu-online-section { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 6px; }
#lu-online-section .gs-btn { min-width: 220px; }
.lu-mode-btn {
  border: none; background: transparent; color: var(--gs-txt3); font-family: inherit;
  font-size: 13px; font-weight: 800; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s;
}
.lu-mode-btn.active { background: #43A047; color: #fff; }
.lu-mode-hint { font-size: 12.5px; color: var(--gs-txt3); margin: 12px 0 18px; min-height: 16px; }
.lu-count-title { font-size: 14px; font-weight: 800; color: var(--gs-txt); margin: 0 0 12px; }
.lu-count-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lu-count-btn {
  width: 88px; height: 96px; border: 2px solid var(--gs-border, #e2d9bf); border-radius: 16px;
  background: var(--gs-card, #fff); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; cursor: pointer; font-family: inherit; transition: transform .12s;
}
.lu-count-btn:active { transform: scale(.95); }
.lu-count-btn i { font-size: 24px; color: #43A047; }
.lu-count-btn span { font-size: 12px; font-weight: 800; color: var(--gs-txt); }
.lu-count-btn small { font-size: 10px; color: var(--gs-txt3); font-weight: 700; }

/* ─── Players bar ─── */
.lu-players { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 8px; }
.lu-pl { display: flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
  background: var(--gs-card, #fff); font-size: 11px; font-weight: 800; color: var(--gs-txt); border: 1.5px solid transparent; }
.lu-pl.active { box-shadow: 0 0 0 2px currentColor; }
.lu-pl .lu-dot { width: 12px; height: 12px; border-radius: 50%; }
.lu-pl.red { color: #E53935; } .lu-pl.green { color: #43A047; }
.lu-pl.yellow { color: #F9A825; } .lu-pl.blue { color: #1E88E5; }
.lu-pl .lu-dot.red { background: #E53935; } .lu-pl .lu-dot.green { background: #43A047; }
.lu-pl .lu-dot.yellow { background: #FDD835; } .lu-pl .lu-dot.blue { background: #1E88E5; }
.lu-pl .lu-home-n { color: var(--gs-txt3); }

/* ─── Board ─── */
.lu-wrap { width: 100%; max-width: 440px; margin: 4px auto; position: relative; aspect-ratio: 1 / 1;
  background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 3px 12px rgba(0,0,0,.18); }
.lu-grid { position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(15, 1fr); }
.lu-cell { border: 1px solid rgba(0,0,0,.10); box-sizing: border-box; }
.lu-cell.track { background: #fff; }
/* bases + centre couverts par les overlays décoratifs → cellules transparentes */
.lu-cell.blank, .lu-cell.base, .lu-cell.center { background: transparent; border: none; }
/* chemin coloré (home stretch) vers le centre */
.lu-cell.home.red { background: #ef9a9a; } .lu-cell.home.green { background: #a5d6a7; }
.lu-cell.home.yellow { background: #ffe082; } .lu-cell.home.blue { background: #90caf9; }
/* case de départ colorée + flèche directionnelle */
.lu-cell.start.red { background: #ef9a9a; } .lu-cell.start.green { background: #a5d6a7; }
.lu-cell.start.yellow { background: #ffe082; } .lu-cell.start.blue { background: #90caf9; }
.lu-cell.start { position: relative; }
.lu-cell[class*="arrow-"]::after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 92%; font-weight: 900; color: rgba(0,0,0,.5); }
.lu-cell.arrow-right::after { content: "\2192"; }
.lu-cell.arrow-left::after  { content: "\2190"; }
.lu-cell.arrow-up::after    { content: "\2191"; }
.lu-cell.arrow-down::after  { content: "\2193"; }
/* étoiles cases sûres (hors départ) */
.lu-cell.safe::after { content: "\2605"; color: rgba(0,0,0,.30); font-size: 72%; display: flex; align-items: center; justify-content: center; height: 100%; }

/* ─── Décor : bases (yards) — carré coloré + carré blanc + 4 emplacements ─── */
.lu-yard { position: absolute; width: 40%; height: 40%; z-index: 1; box-sizing: border-box; }
.lu-yard.red    { left: 0; top: 0; background: #E53935; border-radius: 0 0 30px 0; }
.lu-yard.green  { right: 0; top: 0; background: #43A047; border-radius: 0 0 0 30px; }
.lu-yard.yellow { right: 0; bottom: 0; background: #F9C100; border-radius: 30px 0 0 0; }
.lu-yard.blue   { left: 0; bottom: 0; background: #1E88E5; border-radius: 0 30px 0 0; }
.lu-yard-inner { position: absolute; inset: 16%; background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.lu-slot { position: absolute; width: 22%; height: 22%; border-radius: 50%; transform: translate(-50%, -50%); box-sizing: border-box; }
.lu-yard.red    .lu-slot { border: 3px solid #E53935; background: #ffebee; }
.lu-yard.green  .lu-slot { border: 3px solid #43A047; background: #e8f5e9; }
.lu-yard.yellow .lu-slot { border: 3px solid #F9A825; background: #fffde7; }
.lu-yard.blue   .lu-slot { border: 3px solid #1E88E5; background: #e3f2fd; }

/* ─── Décor : pinwheel central (4 triangles pointant vers chaque maison) ─── */
.lu-center-deco { position: absolute; left: 40%; top: 40%; width: 20%; height: 20%; z-index: 1; box-sizing: border-box;
  background: conic-gradient(from 45deg, #F9C100 0deg 90deg, #1E88E5 90deg 180deg, #E53935 180deg 270deg, #43A047 270deg 360deg);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.10); }

/* ─── Pawns ─── */
.lu-pawn {
  position: absolute; width: 5.2%; height: 5.2%; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9); box-shadow: 0 1px 3px rgba(0,0,0,.4);
  transform: translate(-50%, -50%); transition: left .16s linear, top .16s linear;
  box-sizing: border-box; z-index: 2; display: flex; align-items: center; justify-content: center;
}
.lu-pawn.red { background: #E53935; } .lu-pawn.green { background: #43A047; }
.lu-pawn.yellow { background: #FDD835; } .lu-pawn.blue { background: #1E88E5; }
.lu-pawn.movable { cursor: pointer; box-shadow: 0 0 0 3px #6750A4, 0 1px 3px rgba(0,0,0,.4); z-index: 4; }
.lu-pawn.movable { animation: lu-bob .7s ease-in-out infinite; }
@keyframes lu-bob { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%,-62%); } }

/* Sortie de base — le pion "pop" sur sa case de départ */
.lu-pawn.lu-pop { animation: lu-pop .3s ease; z-index: 5; }
@keyframes lu-pop {
  0%   { transform: translate(-50%,-50%) scale(.3); }
  55%  { transform: translate(-50%,-66%) scale(1.18); }
  100% { transform: translate(-50%,-50%) scale(1); }
}
/* Capture — flash + secousse avant le renvoi à la maison */
.lu-pawn.lu-captured { animation: lu-capt .3s ease; z-index: 6; }
@keyframes lu-capt {
  0%   { transform: translate(-50%,-50%) scale(1); filter: brightness(1); }
  30%  { transform: translate(-50%,-58%) scale(1.4) rotate(-15deg); filter: brightness(1.7); }
  70%  { transform: translate(-50%,-58%) scale(1.4) rotate(15deg);  filter: brightness(1.7); }
  100% { transform: translate(-50%,-50%) scale(1); filter: brightness(1); }
}
/* Renvoi à la maison — glisse plus lentement avec un léger rebond */
.lu-pawn.lu-returning { transition: left .55s cubic-bezier(.5,-0.2,.4,1.3), top .55s cubic-bezier(.5,-0.2,.4,1.3); z-index: 6; }
/* Respecte prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .lu-pawn { transition: none; }
  .lu-pawn.lu-pop, .lu-pawn.lu-captured { animation: none; }
  .lu-pawn.lu-returning { transition: none; }
}

/* ─── Controls ─── */
.lu-status { text-align: center; font-size: 13px; font-weight: 800; color: var(--gs-txt); padding: 6px 12px; min-height: 20px; }
.lu-status.my-turn { color: #6750A4; }
.lu-controls { display: flex; gap: 12px; justify-content: center; align-items: center; padding: 8px 10px 16px; }
.lu-die {
  width: 54px; height: 54px; border-radius: 12px; background: #fff; border: 2px solid #cfd8dc;
  display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr);
  padding: 7px; box-sizing: border-box; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.lu-die .lu-die-pip { width: 8px; height: 8px; border-radius: 50%; background: #2a2a2a; align-self: center; justify-self: center; }
.lu-die.rolling { animation: lu-shake .5s ease; }
@keyframes lu-shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.lu-roll-btn { min-width: 120px; }

/* Très petits écrans Android MG (≤360px) — éviter le débordement des contrôles */
@media (max-width: 360px) {
  .lu-controls { gap: 8px; padding: 6px 6px 12px; }
  .lu-die { width: 46px; height: 46px; padding: 6px; }
  .lu-die .lu-die-pip { width: 7px; height: 7px; }
  .lu-roll-btn { min-width: 96px; }
}