/* ═══ Torre de Londres ═══════════════════════════════════════════════════════ */
/* .screen--tol es hijo directo de .screen--center (display:grid;place-items:center),
   que solo centra verticalmente un ítem único; por eso todo el contenido va envuelto
   en .tol-panel: así el grid centra ese único bloque como un todo. Además, .screen--center
   fija min-height:80vh: cuando el contenido real es más bajo que eso (como aquí), el bloque
   queda centrado dentro de ese 80vh pero el 20vh restante se ve como espacio muerto abajo,
   dando la sensación de que todo está pegado arriba. Se sube a ~100vh para que centre de verdad. */
.screen--tol.screen--center,
.screen--tol-feedback.screen--center { min-height: calc(100vh - 42px); }
.screen--tol { width: 100%; max-width: 960px; }
.tol-panel { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }

.tol-header { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; }
.tol-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: .82rem; font-weight: 500;
  box-shadow: 0 1px 2px rgba(15, 30, 45, .05);
}
.tol-chip strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.tol-chip--accent { background: var(--accent-soft); border-color: transparent; color: var(--accent-dark); }
.tol-chip--accent strong { color: var(--accent-dark); }

.tol-boards { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; width: 100%; }
.tol-board-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tol-board-label {
  margin: 0; font-weight: 700; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft);
}
.tol-board-frame {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 6px; box-shadow: 0 2px 10px rgba(15, 30, 45, .06);
}
.tol-board-frame--goal { background: var(--paper); }
.tol-board-frame svg { display: block; }
.tol-board-arrow { font-size: 1.6rem; font-weight: 300; color: var(--muted); align-self: center; }

.tol-hint {
  margin: 0; min-height: 1.4em; text-align: center; font-size: .88rem; font-weight: 500;
  color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 9px 18px; max-width: 480px;
}
.tol-controls { display: flex; justify-content: center; }
.tol-btn-reset { min-width: 160px; }
.tol-peg-hit { transition: fill .15s ease; }
.tol-peg-hit:hover { fill: rgba(21, 94, 141, .08); }

/* Los ítems de 4 bolas muestran dos tableros lado a lado (~720px combinados)
   — .tol-boards ya tiene flex-wrap, pero se fuerza la columna explícitamente
   para que el apilado sea consistente (no depender de si justo entran o no)
   y la flecha separadora se rota para apuntar hacia abajo. El SVG tiene
   viewBox, así que limitarlo por CSS lo escala sin tocar ballR/gap en JS. */
@media (max-width: 480px) {
  .tol-boards { flex-direction: column; }
  .tol-board-arrow { transform: rotate(90deg); }
  .tol-board-frame svg { width: min(78vw, 320px); height: auto; }
}