/* ==========================================================
   Ludo specific styles
   ========================================================== */
.page { width: min(1100px, 100% - 1.5rem); margin: 0 auto; padding: .8rem 0 2rem; }

/* ---------- set-up screen (compact: whole form fits one phone screen) ---------- */
.setup { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: .6rem; }
.setup h1 { font-size: clamp(1.5rem, 5vw, 2.2rem); margin: 0; }
.top-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; }
.field h2 { font-family: var(--font-body); font-size: .88rem; font-weight: 600; color: var(--muted); margin: 0 0 .2rem; }
.setup .seg { min-height: 36px; padding: .2rem .75rem; }
.seat-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.seat {
  display: flex; align-items: center; gap: .4rem; padding: .25rem .45rem;
  background: var(--surface); border: 2px solid var(--ink); border-radius: 12px;
  border-left: 8px solid var(--pc);
}
.seat input.nm {
  flex: 1 1 0; min-width: 0; font: inherit; font-size: .98rem; color: var(--ink);
  background: var(--bg); border: 2px solid var(--line); border-radius: 8px; padding: .1rem .5rem; min-height: 34px;
}
.seat input.nm:focus { border-color: var(--ink); }
.seat .seg { font-size: .84rem; min-height: 30px; padding: .1rem .5rem; }
.hint { color: var(--muted); font-size: .84rem; margin: 0; line-height: 1.3; }
.rules { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .1rem .55rem; cursor: pointer;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--surface); font-size: .84rem; line-height: 1.3;
}
.chip input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--accent); flex: none; }
.setup .start { width: 100%; text-align: center; margin-top: .2rem; }

/* ---------- game screen ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.4rem; align-items: start; }
.board-wrap { display: flex; justify-content: center; }
#board { width: 100%; max-width: min(100%, 82vh); height: auto; aspect-ratio: 1; display: block; touch-action: manipulation; }

.b-bg { fill: var(--board-bg); stroke: var(--ink); stroke-width: .14; }
.b-inner { fill: var(--board-bg); stroke: var(--ink); stroke-width: .08; }
.b-corner { stroke: var(--ink); stroke-width: .1; }
.cell { fill: var(--cell); stroke: var(--grid); stroke-width: .05; }
.fill-red { fill: var(--c-red); } .fill-green { fill: var(--c-green); }
.fill-yellow { fill: var(--c-yellow); } .fill-blue { fill: var(--c-blue); }
.soft-red { fill: var(--c-red-soft); } .soft-green { fill: var(--c-green-soft); }
.soft-yellow { fill: var(--c-yellow-soft); } .soft-blue { fill: var(--c-blue-soft); }
.slot { stroke: var(--ink); stroke-width: .06; }
.start-cell, .home-cell { stroke: var(--ink); stroke-width: .05; }
.star-safe { fill: var(--muted); opacity: .75; }
.star-start { fill: #fff; opacity: .95; }
.center-frame { fill: none; stroke: var(--ink); stroke-width: .1; }
.tri { stroke: var(--ink); stroke-width: .05; }
.unused { opacity: .3; }

/* tokens */
.token { transition: transform .18s ease-out; }
.noanim .token { transition: none; }
.token .body { stroke: var(--ink); stroke-width: .07; }
.token.c-red .body { fill: var(--c-red); } .token.c-green .body { fill: var(--c-green); }
.token.c-yellow .body { fill: var(--c-yellow); } .token.c-blue .body { fill: var(--c-blue); }
.token .shine { fill: #fff; opacity: .5; }
.token .ring { fill: none; stroke: var(--ink); stroke-width: .08; stroke-dasharray: .2 .14; opacity: 0; transform-box: fill-box; transform-origin: center; }
.token.can { cursor: pointer; }
.token.can .ring { opacity: 1; animation: spin 2.4s linear infinite; }
.token.can .body { animation: bob .7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { from { transform: scale(1); } to { transform: scale(1.14); } }

/* ---------- side panel ---------- */
.side { display: grid; gap: 1rem; }
.turn-card {
  display: flex; align-items: center; gap: 1rem; padding: .9rem;
  background: var(--surface); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink);
}
.turn-text { flex: 1; min-width: 0; }
.status { margin: 0; font-weight: 600; font-size: 1.1rem; line-height: 1.35; min-height: 2.9em; display: flex; align-items: center; }

/* dice */
.dice {
  flex: none; width: 82px; height: 82px; padding: 10px; cursor: pointer;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  background: #fff; border: 4px solid var(--pc, var(--c-red)); border-radius: 18px;
  box-shadow: 0 0 0 2px var(--ink);
}
.dice:disabled { cursor: default; opacity: 1; }
.dice.ready { animation: nudge 1.1s ease-in-out infinite; }
.dice .pip { place-self: center; width: 13px; height: 13px; border-radius: 50%; background: #1a1f3d; visibility: hidden; }
.dice .pip.on { visibility: visible; }
.dice.rolling { animation: shake .32s linear infinite; }
@keyframes nudge { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes shake { 0% { transform: rotate(-12deg) scale(1.05); } 50% { transform: rotate(12deg) scale(1.1); } 100% { transform: rotate(-12deg) scale(1.05); } }

/* players */
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pl {
  display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem;
  background: var(--surface); border: 2px solid var(--line); border-left: 10px solid var(--pc); border-radius: 12px;
}
.pl.cur { border-color: var(--ink); border-left-color: var(--pc); box-shadow: 3px 3px 0 var(--ink); }
.pl .pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pl .ph { font-weight: 600; color: var(--muted); white-space: nowrap; }
.pl.fin .ph { color: var(--ink); }
.side-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ---------- how to play ---------- */
.how { margin-top: 2.2rem; padding: 1.2rem 1.3rem; background: var(--surface); border: 2px solid var(--ink); border-radius: 16px; }
.how h2 { font-size: 1.6rem; margin-bottom: .6rem; }
.how ol { margin: 0 0 .8rem; padding-left: 1.3rem; max-width: 70ch; }
.how li { margin-bottom: .4rem; }
.how .note { color: var(--muted); max-width: 70ch; margin: 0; }

/* ---------- game over ---------- */
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rank-list li { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; font-weight: 600; }
.rank-list .medal { width: 2rem; text-align: center; }

/* ---------- small screens ---------- */
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; gap: 1rem; }
  #board { max-width: min(100%, 94vw); }
  .page { padding-top: .8rem; }
}
@media (max-width: 420px) {
  .dice { width: 72px; height: 72px; padding: 8px; }
  .dice .pip { width: 11px; height: 11px; }
}

/* ---------- the one ad square (below Restart / Set-up) ---------- */
.ad-slot { justify-self: center; width: 300px; max-width: 100%; text-align: center; }
.ad-label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .2rem; }
.ad-box { width: 300px; max-width: 100%; min-height: 250px; overflow: hidden; }

@media (max-height: 700px) {
  .setup { gap: .45rem; }
  .setup h1 { font-size: 1.4rem; }
}