/* Allenamento finali — quello che la scheda aggiunge ad allenamento.css: la scelta del finale con livello e colore e,
   nella vista d'allenamento, i riquadri del finale, della guida e delle mosse, con le case intorno al re colorate al
   livello principiante. Sotto i 900px l'ordine è finale, scacchiera, comandi, guida, mosse. */

/* ═══════════════ Scelta del finale ═══════════════ */

.scelta {
  box-sizing: border-box; max-width: 1240px; margin: 0 auto;
  padding: clamp(16px, 3vw, 32px) clamp(16px, 3vw, 32px) 48px;
  display: flex; flex-direction: column; gap: 18px;
}
.scelta__titolo { margin: 0; font-family: var(--font-heading); font-size: clamp(22px, 3vw, 28px); font-weight: 500; }
.scelta__sotto { margin: 4px 0 0; max-width: 70ch; color: var(--color-neutral-400); font-size: 14px; line-height: 1.45; }
.scelta .chip { padding: 5px 12px; font-size: 13px; }
.opzioni { display: flex; flex-wrap: wrap; gap: 14px 36px; }
.opzione { display: flex; flex-direction: column; gap: 7px; }
.opzione__nota { margin: 0; max-width: 52ch; font-size: 12.5px; line-height: 1.45; color: var(--color-neutral-500); }
.opzione__nota:empty { display: none; }

.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.scheda {
  display: flex; flex-direction: column; gap: 10px; padding: 10px; min-width: 0;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface);
  color: inherit; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.scheda:hover, .scheda:focus-visible {
  border-color: var(--color-accent); transform: translateY(-2px); outline: 0;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
.scheda__tavola { border-radius: 4px; overflow: hidden; }
.scheda__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.scheda__testa { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; }
.scheda__nome { font-family: var(--font-heading); font-size: 15px; line-height: 1.3; color: var(--color-text); }
.scheda__fatto { flex: none; font-size: 11px; color: var(--sig-good, #3ee08f); font-variant-numeric: tabular-nums; }
.scheda__descr { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--color-neutral-500); }
.scheda .sch__pezzo { filter: none; }

/* ═══════════════ Allenamento ═══════════════ */

.colonna-lato .riquadro--guida { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.colonna-lato .riquadro--mosse { flex: 1 1 0; min-height: 96px; overflow-y: auto; scrollbar-width: none; }

@media (max-width: 899px) {
  .pagina { grid-template-areas: "finale" "gioco" "azioni" "guida" "mosse"; }
  .riquadro--finale { grid-area: finale; }
  .colonna-lato .riquadro--guida { grid-area: guida; overflow: visible; }
  .colonna-lato .riquadro--mosse { grid-area: mosse; overflow: visible; min-height: 0; }
}

.finale-nome { margin: 0; font-family: var(--font-heading); font-size: 18px; font-weight: 500; line-height: 1.3; }
.riquadro__testa .chip-riga { flex: none; }

/* ── La guida del principiante ── */

.riquadro--guida { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-divider)); }
.legenda { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--color-neutral-500); white-space: nowrap; }
.legenda__casa { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 4px; }
.legenda__casa:first-child { margin-left: 0; }
.legenda__casa--libera { background: #3e7a5a; }
.legenda__casa--vietata { background: #7a3a4a; }
.guida__idea { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-neutral-300); }
.guida__commento { margin: 0; padding-top: 8px; border-top: 1px solid var(--color-divider); font-size: 13px; line-height: 1.5; color: var(--color-accent-200); }
.guida__commento:empty { display: none; }
.guida__commento[data-tono='bene'] { color: var(--sig-good, #3ee08f); }
.guida__commento[data-tono='male'] { color: var(--sig-warn, #ffd23d); }

/* le case intorno al re che difende: verdi dove può andare, rosse dove i tuoi pezzi lo fermano; dopo le tinte
   dell'ultima mossa, così vincono */
.sch__casa--libera.sch__casa--chiara { background: #3e7a5a; }
.sch__casa--libera.sch__casa--scura { background: #2f6448; }
.sch__casa--vietata.sch__casa--chiara { background: #7a3a4a; }
.sch__casa--vietata.sch__casa--scura { background: #632e3c; }

/* ── Le mosse ── */

.linea__mossa--sua { color: var(--color-neutral-400); }
.punteggi { padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }

@media (max-width: 520px) {
  .griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .scheda { padding: 8px; gap: 8px; }
  .scheda__nome { font-size: 13.5px; }
  .legenda { display: none; }
}