/* Allenamento — quello che le tre schede (puzzle, aperture, finali) hanno in comune: la barra delle schede sotto la
   navbar e la vista d'allenamento, scacchiera a sinistra e colonna dei riquadri a destra. Le classi .sch* sono quelle di
   assets/js/scacchi/scacchiera.js. Ogni scheda aggiunge nel suo foglio i riquadri suoi e l'ordine della griglia sul
   telefono.

   Senza scorrimento su schermi larghi: la scacchiera prende il lato che resta tolte navbar (52px), barra delle schede
   (42px), la riga di stato e i margini (--fisso). La colonna di destra è alta quanto quella della scacchiera (contain:
   size: non allunga la riga della griglia, la riempie): i riquadri scorrono dentro di sé se non ci stanno, e in fondo i
   comandi, a pari con la riga di stato. Sotto i 900px una colonna sola: la colonna di destra si scioglie e i riquadri si
   mettono in ordine nella griglia. */

[hidden] { display: none !important; }

body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(120% 80% at 18% -10%, #1d2036 0%, var(--color-bg) 58%);
  color: var(--color-text); font-family: var(--font-body); font-size: 14px;
}

/* ── Le schede: Puzzle, Aperture, Finali ── */

.schede {
  display: flex; justify-content: center; gap: 4px; height: 42px; box-sizing: border-box; padding: 0 12px;
  border-bottom: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-surface) 55%, transparent);
}
.schede__voce {
  display: flex; align-items: center; padding: 0 16px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: var(--font-heading); font-size: 13.5px; color: var(--color-neutral-400); text-decoration: none;
  transition: color .15s, border-color .15s;
}
.schede__voce:hover { color: var(--color-text); }
.schede__voce[aria-current='page'] { color: var(--color-accent-200); border-bottom-color: var(--color-accent); }

/* ── La vista d'allenamento ── */

.pagina {
  --navbar: 52px;
  --schede: 42px;
  --margine: clamp(12px, 2vw, 24px);
  --spazio: 10px;
  --fisso: 50px;   /* riga di stato + il suo spazio + bordo della cornice */
  --lato: max(260px, min(100dvh - var(--navbar) - var(--schede) - 2 * var(--margine) - var(--fisso), 100vw - 400px, 820px));
  box-sizing: border-box; height: calc(100dvh - var(--navbar) - var(--schede)); padding: var(--margine);
  display: grid; justify-content: center; align-content: start; align-items: start; column-gap: clamp(16px, 2vw, 24px); row-gap: var(--spazio);
  grid-template-columns: var(--lato) minmax(280px, 340px);
  grid-template-areas: "gioco lato";
}
.colonna-scacchiera { grid-area: gioco; display: flex; flex-direction: column; gap: var(--spazio); min-width: 0; }
.colonna-lato {
  grid-area: lato; align-self: stretch; contain: size;
  display: flex; flex-direction: column; gap: var(--spazio); min-height: 0;
}
/* niente barre: le misure sono fatte per starci; solo su schermi molto bassi si scorre con la rotella */
.colonna-lato .riquadro::-webkit-scrollbar { display: none; }
.colonna-lato .azioni { flex: none; margin-top: auto; }

@media (max-width: 899px) {
  .pagina {
    /* 145px: il riquadro in cima, i comandi e i loro spazi, che qui stanno sopra e sotto la scacchiera */
    --lato: max(260px, min(100vw - 2 * var(--margine), 100dvh - var(--navbar) - var(--schede) - 2 * var(--margine) - var(--fisso) - 145px));
    height: auto; grid-template-columns: minmax(0, var(--lato));
  }
  .colonna-lato { display: contents; }
  .colonna-lato .azioni { grid-area: azioni; margin-top: 0; }
}

/* ── Chi muove e verdetto ── */

.stato-riga { display: flex; gap: 8px; min-width: 0; }
.stato-riga .bottone--icona { height: auto; min-height: 38px; }
.turno {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); background: var(--color-surface); font-size: 13px; color: var(--color-neutral-300);
}
.turno__colore {
  width: 12px; height: 12px; flex: none; border-radius: 3px;
  border: 1px solid var(--color-neutral-600); background: var(--color-neutral-800);
}
.turno__colore--w { background: var(--color-neutral-200); }
.turno__colore--b { background: var(--color-neutral-900); }

.verdetto {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 38px; line-height: 20px; padding: 8px 14px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border-radius: var(--radius-md); border: 1px solid var(--color-divider);
  font-size: 14px; color: var(--color-neutral-300); background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}
.verdetto[data-esito='giusto'] { border-color: color-mix(in srgb, var(--sig-good, #3ee08f) 55%, transparent); color: var(--sig-good, #3ee08f); }
.verdetto[data-esito='sbagliato'] { border-color: color-mix(in srgb, var(--sig-bad, #ff4d6a) 55%, transparent); color: var(--sig-bad, #ff4d6a); }
.verdetto[data-esito='aiuto'] { border-color: color-mix(in srgb, var(--sig-warn, #ffd23d) 55%, transparent); color: var(--sig-warn, #ffd23d); }

/* ── Scacchiera (stesse tinte di partita.html) ── */

.scacchiera-cornice { border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); }
/* righe esplicite: senza, una fila vuota sarebbe più bassa di una piena */
.sch { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); aspect-ratio: 1; user-select: none; -webkit-user-select: none; }
.sch--vuota { background: var(--color-neutral-900); }
.sch__casa {
  position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.sch__casa--chiara { background: #3f424d; }
.sch__casa--scura  { background: #292b31; }
.sch__casa--ultima.sch__casa--chiara { background: #4d4668; }
.sch__casa--ultima.sch__casa--scura  { background: #3a3450; }
.sch__casa--scelta.sch__casa--chiara { background: #5d5294; }
.sch__casa--scelta.sch__casa--scura  { background: #4a4070; }
.sch__casa--scacco.sch__casa--chiara { background: #6d3a4c; }
.sch__casa--scacco.sch__casa--scura  { background: #5a3040; }
.sch__casa--segnata { box-shadow: inset 0 0 0 3px var(--sig-warn, #ffd23d); }
/* pallino su casa libera, anello su pezzo catturabile: pseudo-elementi, nessun nodo in più */
.sch__casa--bersaglio::after {
  content: ''; position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%;
  background: var(--color-accent-400); pointer-events: none;
}
.sch__casa--presa::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--color-accent-400); pointer-events: none; }
.sch__casa--vuotata .sch__pezzo { opacity: .22; }
.sch__pezzo { width: 90%; height: 90%; object-fit: contain; user-select: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.sch__rango, .sch__colonna { position: absolute; font-size: 9px; letter-spacing: .06em; color: rgba(233, 233, 237, .32); pointer-events: none; }
.sch__rango   { left: 3px; top: 2px; }
.sch__colonna { right: 3px; bottom: 1px; }
/* touch-action: none, o il browser tratta il trascinamento col dito come scorrimento */
.sch.gioca { touch-action: none; }
.sch.gioca .sch__casa { cursor: default; }
.sch.gioca .sch__casa--prendibile { cursor: grab; }
.sch.gioca .sch__casa--bersaglio, .sch.gioca .sch__casa--presa { cursor: pointer; }
.sch.gioca .sch__casa--scelta { cursor: grabbing; }
/* il pezzo che segue il dito, fuori dalla scacchiera così non intercetta clic né elementFromPoint: misura (--w, --h) e
   posizione (--x, --y) le dà il JS */
.pezzo-volante {
  position: fixed; left: var(--x); top: var(--y); width: var(--w); height: var(--h); z-index: 100; pointer-events: none; object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); transform: translate(-50%, -50%);
}

/* ── Comandi ── */

.azioni { display: flex; align-items: center; gap: 8px; }
.bottone {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; height: 38px; padding: 0 12px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: transparent;
  color: var(--color-neutral-200); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.bottone:hover:not(:disabled) { border-color: color-mix(in srgb, var(--color-text) 38%, transparent); background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.bottone:disabled { opacity: .4; cursor: not-allowed; }
.bottone--icona { flex: none; width: 40px; padding: 0; font-size: 16px; }
.bottone--primario { border-color: var(--color-accent); color: var(--color-accent-200); }
.bottone--primario:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }

/* ── Riquadri ── */

.riquadro {
  border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface);
  padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; flex: none;
}
.riquadro__testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.etichetta { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-400); }
.num { font-variant-numeric: tabular-nums; color: var(--color-accent-200); }
.chip-riga { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: transparent;
  font-family: var(--font-heading); font-size: 12px; white-space: nowrap; color: var(--color-neutral-400);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.chip:hover { color: var(--color-neutral-200); }
.chip.is-on { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent-200); }
.chip__dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--color-neutral-600); }
.chip__dot--w { background: var(--color-neutral-200); }
.chip__dot--b { background: var(--color-neutral-900); }
.punteggi { display: flex; gap: 18px; }
.punteggio { display: flex; flex-direction: column; gap: 2px; }
.punteggio__valore { font-family: var(--font-heading); font-size: 20px; font-variant-numeric: tabular-nums; color: var(--color-accent-200); line-height: 1; }
.punteggio__nome { font-size: 11.5px; color: var(--color-neutral-500); }
.linea { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13.5px; }
.linea__mossa { display: inline-flex; gap: 4px; color: var(--color-neutral-400); }
.linea__mossa--tua { color: var(--color-accent-200); font-weight: 600; }
.linea__numero { color: var(--color-neutral-600); font-weight: 400; font-variant-numeric: tabular-nums; }

/* telefoni: il turno resta solo col quadratino del colore, il verdetto può andare su due righe */
@media (max-width: 520px) {
  .pagina { --fisso: 70px; }
  .turno { padding: 0 11px; }
  .turno #turno-testo { display: none; }
  .verdetto { height: auto; min-height: 38px; white-space: normal; font-size: 13.5px; }
  .stato-riga { gap: 6px; }
  .bottone { padding: 0 8px; font-size: 12.5px; }
  .bottone--icona { width: 36px; padding: 0; }
  .schede__voce { padding: 0 12px; font-size: 13px; }
}