/* Snakes & Ladders: editor rows + board / play UI. */

/* Snake palette — a grass green, deliberately yellower than the teal --accent
   so snakes, ladders (gold) and the goal square stay tellable apart. */
:root {
  --snake: #4e9c3a;
  --snake-dark: #2f6b22;
  --snake-ink: #2f6b22;   /* readable label colour on tinted backgrounds */
  --tongue: #d0342c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --snake: #5fb545;
    --snake-dark: #2c6b1f;
    --snake-ink: #8fd472;
    --tongue: #e2564a;
  }
}

/* ---- Editor ------------------------------------------------------------ */
.field { max-width: 460px; margin-bottom: 1.25rem; }

.editor-head {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.75rem 0 .5rem;
}
.editor-head h2 { margin: 0; font-size: 1.1rem; }
.editor-head .meta { color: var(--ink-soft); font-weight: 400; font-size: .9rem; }
.editor-head .btn { margin-inline-start: auto; }
.section-hint { color: var(--ink-soft); font-size: .85rem; margin: 0 0 .75rem; }

.editor-grid { display: grid; gap: .75rem; }

.player-row {
  display: grid;
  grid-template-columns: 1.6rem 1fr 2.4rem;
  gap: .6rem;
  align-items: center;
  max-width: 460px;
}
.player-dot {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: inline-block; background: var(--accent);
}
.player-dot[data-index="1"] { background: #c99a2e; }
.player-dot[data-index="2"] { background: #3b6ea5; }
.player-dot[data-index="3"] { background: #8a4f9e; }

.question-item {
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.question-item:last-child { border-bottom: none; padding-bottom: 0; }
.question-row {
  display: grid;
  grid-template-columns: 2rem 1fr 2.4rem;
  gap: .6rem;
  align-items: center;
}
.question-row .card-index { color: var(--ink-soft); text-align: center; font-variant-numeric: tabular-nums; }
.question-row .question-input { font-size: 1.05rem; }
.btn.icon { padding: .45rem; width: 2.4rem; }
.question-image-row { margin: .4rem 0 0 2.6rem; }

/* ---- Play layout ------------------------------------------------------- */
/* Growth-only: keeps today's sizes as a floor on typical windows, but keeps
   growing past them on wider ones instead of plateauing. */
.sl-main { max-width: max(1100px, 90vw); }

.scorebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem 1.1rem; box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.scorebar .deck-name { font-weight: 700; font-size: 1.05rem; }
.turn-indicator .meta { color: var(--ink-soft); font-size: .85rem; margin-inline-end: .4rem; }
.turn-indicator strong { font-size: 1.1rem; }

.sl-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 860px) {
  .sl-layout { grid-template-columns: 1fr; }
}

/* ---- Board ------------------------------------------------------------- */
.board-wrap {
  --board-w: max(640px, 60vw);
  position: relative;
  width: 100%;
  max-width: var(--board-w);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.board {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  border: 2px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.board-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  /* Tokens park just below the board before their first move, outside the
     0..1000 viewBox — let them show rather than be clipped. */
  overflow: visible;
}

.cell {
  position: relative;
  border: .5px solid color-mix(in srgb, var(--border) 60%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.cell.alt { background: var(--surface-2); }
.cell-num {
  position: absolute; top: 2px; left: 4px;
  font-size: calc(var(--board-w, 640px) * 0.0145);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.cell-mark { font-size: calc(var(--board-w, 640px) * 0.02); opacity: .55; }
.cell.ladder-bottom { background: color-mix(in srgb, var(--gold) 20%, var(--surface)); }
.cell.snake-head { background: color-mix(in srgb, var(--snake) 20%, var(--surface)); }
.cell.goal { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); }

/* SVG artwork */
.ladder .rail {
  stroke: var(--gold); stroke-width: 5; stroke-linecap: round; opacity: .9;
}
.ladder .rung {
  stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; opacity: .75;
}
/* Body is a filled, tapered outline (not a stroke), so it narrows to a point. */
.snake .snake-body {
  fill: var(--snake);
  stroke: var(--snake-dark);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.snake .snake-band {
  stroke: var(--snake-dark); stroke-width: 2.6;
  stroke-linecap: round; opacity: .45;
}
.snake .snake-head-shape {
  fill: var(--snake); stroke: var(--snake-dark); stroke-width: 1.4;
}
.snake .snake-eye { fill: #fff; }
.snake .snake-pupil { fill: #14210f; }
.snake .snake-tongue {
  stroke: var(--tongue); stroke-width: 2; fill: none;
  stroke-linecap: round;
}

/* Tokens */
.token { transition: transform .14s linear; }
.token-ring { stroke: #fff; stroke-width: 3; }
.token-label {
  /* In SVG viewBox user-units (viewBox="0 0 1000 1000"), not CSS px — this
     already scales with the board automatically as the SVG element resizes,
     unlike the HTML-side font-sizes elsewhere in this file. */
  fill: #fff; font-size: 20px; font-weight: 700;
  font-family: system-ui, sans-serif;
}

/* ---- Side panel -------------------------------------------------------- */
.sl-side { display: flex; flex-direction: column; gap: 1rem; }

.players-panel { display: grid; gap: .5rem; }
.player-chip {
  display: flex; align-items: center; gap: .6rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: .5rem .7rem;
}
.player-chip.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.chip-dot {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  color: #fff; font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.chip-name { font-weight: 600; flex: 1; }
.chip-pos { color: var(--ink-soft); font-size: .8rem; font-variant-numeric: tabular-nums; }

.dice-panel {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow);
}
.die { font-size: 3.5rem; line-height: 1; }
@keyframes die-pop { 0% { transform: scale(1); } 45% { transform: scale(1.25); } 100% { transform: scale(1); } }
.die.pop { animation: die-pop .3s ease; }
.dice-panel .btn { width: 100%; }

.sl-message {
  color: var(--ink-soft); font-size: .9rem; text-align: center;
  min-height: 2.5em; margin: 0;
}

.sl-rules { font-size: .85rem; color: var(--ink-soft); }
.sl-rules summary { cursor: pointer; font-weight: 600; }
.sl-rules ul { margin: .5rem 0 0; padding-inline-start: 1.1rem; }
.sl-rules li { margin-bottom: .25rem; }

/* ---- Question / win overlays ------------------------------------------ */
.q-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 12, 16, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; z-index: 50;
  backdrop-filter: blur(3px);
}
.q-card {
  background: var(--surface);
  border-radius: 20px;
  padding: 2rem clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
  box-shadow: var(--shadow);
  max-width: 520px; width: 100%;
}
.q-context {
  font-size: .9rem; font-weight: 600;
  padding: .4rem .8rem; border-radius: 999px;
  display: inline-block; margin-bottom: 1.25rem;
}
.q-context.ladder { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); }
.q-context.snake { background: color-mix(in srgb, var(--snake) 20%, transparent); color: var(--snake-ink); }
.q-image {
  display: block;
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 12px;
  margin: 0 auto 1.25rem;
}
.q-text {
  font-size: max(1.4rem, 4vw);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1.25rem;
  unicode-bidi: isolate;
}
.q-hint { color: var(--ink-soft); font-size: .85rem; margin: 0 0 1rem; }
.q-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.q-actions .btn { flex: 1; min-width: 140px; }
.q-actions .btn.danger { border-color: var(--danger); }

.result-emoji { font-size: 3rem; }
.q-card h2 { margin: .25rem 0 .5rem; }
.result-score { color: var(--ink-soft); }
.result-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.5rem; }

@media (max-width: 520px) {
  .cell-num { font-size: .5rem; }
  .cell-mark { font-size: .65rem; }
}