/* Ludo — game-specific */
.diff-seg { display:flex; gap:8px; }
.diff-seg button { flex:1; font-size:13px; }
.game-shell { max-width:480px; }

.board-wrap { flex:1; display:flex; align-items:center; justify-content:center; }
.ludo-board {
  position:relative;
  display:grid; grid-template-columns:repeat(15,1fr); grid-template-rows:repeat(15,1fr);
  width:100%; max-width:420px; aspect-ratio:1; touch-action:manipulation;
  border:5px solid var(--stroke); border-radius:14px; overflow:hidden; box-shadow:0 6px 0 var(--stroke);
  background:var(--card);
}
.lc { position:relative; border:1px solid rgba(28,24,20,0.08); }
.lc.path { background:#fff; }
.lc.wall { background:transparent; border:none; }
.lc.yard0 { background:#ffd9ec; } .lc.yard1 { background:#d4f7df; }
.lc.yard2 { background:#fff1c2; } .lc.yard3 { background:#cfeeff; }
.lc.home0 { background:#FF5DAA; } .lc.home1 { background:#5EE882; }
.lc.home2 { background:#FFD43B; } .lc.home3 { background:#3DC2FF; }
.lc.start0 { background:#FF5DAA; } .lc.start1 { background:#5EE882; }
.lc.start2 { background:#FFD43B; } .lc.start3 { background:#3DC2FF; }
.lc.safe::after { content:'★'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:rgba(0,0,0,0.3); }
.lc.center { background:#EBD4AC; }

.token {
  position:absolute; width:80%; height:80%; left:10%; top:10%; border-radius:50%;
  border:2.5px solid var(--stroke); box-shadow:inset 0 3px 0 rgba(255,255,255,0.5), inset 0 -3px 0 rgba(0,0,0,0.2);
  z-index:5; transition:all 0.18s var(--bounce); cursor:default;
}
.token.p0 { background:#FF5DAA; } .token.p1 { background:#5EE882; }
.token.p2 { background:#FFD43B; } .token.p3 { background:#3DC2FF; }
.token.movable { cursor:pointer; animation:tok 0.7s ease-in-out infinite; box-shadow:0 0 0 3px var(--stroke), inset 0 3px 0 rgba(255,255,255,0.5); }
@keyframes tok { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.18);} }
/* a token mid-move: glides cell-to-cell above the board with a little hop */
.token.flying {
  z-index:30; pointer-events:none;
  transition:left 0.14s linear, top 0.14s linear;
  animation:flyHop 0.28s ease-in-out infinite;
}
@keyframes flyHop { 0%,100%{ transform:translateY(0) scale(1);} 50%{ transform:translateY(-16%) scale(1.08);} }

.dice-row { display:flex; align-items:center; gap:14px; justify-content:center; margin-top:14px; }
.die {
  width:60px; height:60px; font-size:34px; cursor:pointer; line-height:1;
  background:var(--card); border:4px solid var(--stroke); border-radius:16px; box-shadow:var(--sh-lg);
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.1s, box-shadow 0.1s;
}
.die:active { transform:translateY(5px); box-shadow:0 0 0 var(--stroke); }
.die.rolling { animation:roll 0.5s ease; }
@keyframes roll { 0%{transform:rotate(0);} 100%{transform:rotate(360deg);} }
.die.disabled { opacity:0.5; pointer-events:none; }
.status-line { font-weight:700; font-size:15px; }
.turn-chip { background:var(--yellow); }