/* Puzzle tattici — quello che la scheda aggiunge ad allenamento.css: punteggio, esercizio, filtri, la partita di Rigioca i
   tuoi errori e la soluzione. Nella colonna di destra: punteggio, esercizio, filtri che scorrono dentro di sé se non ci
   stanno, e in fondo i comandi. Sotto i 900px l'ordine è punteggio, scacchiera, comandi, esercizio, filtri. */

.riquadro { padding: 8px 14px; }
.colonna-lato .riquadro--esercizio { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.colonna-lato .riquadro--filtri { flex: 1 1 0; min-height: 124px; overflow-y: auto; scrollbar-width: none; }

@media (max-width: 899px) {
  .pagina { grid-template-areas: "punteggio" "gioco" "azioni" "esercizio" "filtri"; }
  .barra-punteggio, .partita { grid-area: punteggio; }
  .colonna-lato .riquadro--esercizio { grid-area: esercizio; overflow: visible; }
  .colonna-lato .riquadro--filtri { grid-area: filtri; overflow: visible; min-height: 0; }
}

/* ── Esercizio ── */

.obiettivo { font-family: var(--font-heading); font-size: 13.5px; color: var(--color-accent-200); text-align: right; }
.dettagli { display: flex; flex-direction: column; gap: 1px; }
.dettagli__riga {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 5px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.dettagli__riga:last-child { border-bottom: 0; }
.dettagli__riga > span:first-child { color: var(--color-neutral-500); font-size: 13px; }
.temi { display: flex; flex-wrap: wrap; gap: 5px; }
.tema {
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--color-divider);
  font-size: 11px; color: var(--color-neutral-400); white-space: nowrap;
}
.punteggio__valore { font-size: 26px; }

/* ── Punteggio del giocatore, in alto ── */

.barra-punteggio { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 14px; }
.barra-punteggio__mio { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.barra-punteggio__valore { display: flex; align-items: baseline; gap: 8px; }
.barra-punteggio .punteggi { gap: 14px; }
.barra-punteggio .punteggio { align-items: center; }
.barra-punteggio .punteggi .punteggio__valore { font-size: 20px; }
.barra-punteggio .etichetta, .barra-punteggio .punteggio__nome { white-space: nowrap; }
.barra-punteggio__mio .punteggio__nome { overflow: hidden; text-overflow: ellipsis; }
.variazione { font-family: var(--font-heading); font-size: 13px; font-variant-numeric: tabular-nums; }
.variazione[data-segno='su'] { color: var(--sig-good, #3ee08f); }
.variazione[data-segno='giu'] { color: var(--sig-bad, #ff4d6a); }

/* ── Tutti i temi ── */

.scelta {
  width: 100%; padding: 6px 10px; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-neutral-300); font: inherit; font-size: 13px; cursor: pointer;
}
.scelta:disabled { opacity: .5; cursor: default; }
.scelta.is-on { border-color: var(--color-accent); color: var(--color-accent-200); }

/* ── Rigioca i tuoi errori: i filtri e la partita da cui viene la posizione ── */

.filtri-rigioca { display: flex; flex-direction: column; gap: 8px; }
.partita__quando { font-size: 12px; color: var(--color-neutral-500); text-align: right; }
.partita__giocatori { display: flex; flex-direction: column; gap: 4px; }
.partita__giocatore { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--color-neutral-400); min-width: 0; }
.partita__giocatore.is-tu { color: var(--color-text); font-weight: 600; }
.partita__pezzo { width: 11px; height: 11px; flex: none; border-radius: 3px; border: 1px solid var(--color-neutral-600); }
.partita__pezzo.is-bianco { background: #f2efe6; }
.partita__pezzo.is-nero { background: #1b1d24; }
.partita__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partita__tu { padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 500; color: var(--color-accent-200);
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent); }
.partita__elo { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--color-neutral-500); font-weight: 400; }
.partita__mossa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-top: 8px;
  border-top: 1px solid var(--color-divider); }
.partita__etichetta { font-size: 12.5px; color: var(--color-neutral-500); }
.partita__san { font-family: var(--font-heading); font-size: 17px; color: var(--color-text); }
/* i colori dei giudizi dell'analisi */
.partita__giudizio { font-size: 13px; color: var(--g, var(--color-neutral-300)); }
.partita__giudizio[data-giudizio='inaccuracy'] { --g: #ffd23d; }
.partita__giudizio[data-giudizio='mistake'] { --g: #ff8c33; }
.partita__giudizio[data-giudizio='blunder'] { --g: #ff4d6a; }
.partita__nota { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-neutral-300); }
.partita__link { font-size: 13px; color: var(--color-accent-200); }

/* ── Soluzione, dentro il riquadro dell'esercizio a esercizio finito ── */

.soluzione { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--color-divider); }
.apertura { color: var(--color-neutral-300); font-size: 13px; text-align: right; }

@media (max-width: 520px) {
  .barra-punteggio { padding: 10px 14px; }
  .barra-punteggio .punteggi { gap: 12px; }
}