/* Analisi Scacchiera: token e componenti in assets/css/nocturne.css, icone in icons.css.
   Tutto l'aspetto della pagina e' qui: il JS sceglie solo le classi (is-on, is-sel, ...) e passa in variabili
   CSS i numeri che cambiano a ogni render (--pct, --x, --y, ...). Le misure si regolano dal blocco qui sotto. */

/* ---------- misure della pagina: le colonne e la scacchiera si regolano da qui ---------- */
.an-shell {
  --an-navbar-h: 52px;
  --an-col-sx: 35%;            /* colonna della scacchiera */
  --an-col-centro: 35%;        /* motore, accuratezza e flusso della partita; la destra prende il resto */
  --an-scacchiera-max: 9999px; /* lato massimo della scacchiera (9999px = nessun limite) */
  --an-giocatore-h: 30px;      /* riga di un giocatore, sopra e sotto la scacchiera */
  --an-barra-eval-w: 12px;     /* barra della valutazione, a sinistra della scacchiera */
  --an-barra-termica-w: 8px;   /* barra della mappa termica, accanto alla valutazione */
  --an-barra-wdl-w: 22px;      /* barra delle probabilita' di vittoria, a destra della scacchiera (con le percentuali) */
  --an-asse-w: 26px;           /* valori dell'asse y, a sinistra dei grafici */
  --an-respiro: 7px;           /* spazio libero sotto i pulsanti quando la scacchiera e' limitata dall'altezza */
  --an-moves-w: 158px;         /* colonna delle mosse nel flusso della partita */
  --an-cards-min: 182px;       /* larghezza minima delle schede accanto alle mosse */
  --an-cards-gap: 18px;        /* spazio fra mosse e schede */
}
/* finestre strette, ancora a colonne: piu' spazio al centro, dove mosse e schede stanno affiancate */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .an-shell { --an-col-sx: 31%; --an-col-centro: 40%; --an-cards-min: 150px; --an-cards-gap: 10px; }
}
@media (max-width: 559.98px) {
  .an-shell { --an-moves-w: 136px; --an-cards-min: 0px; --an-cards-gap: 10px; }
}

:root {
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* case: stesse tinte della scacchiera di gioco (partita.css) e dei puzzle; ultima mossa, scelta e scacco */
  --sq-light: #3f424d;
  --sq-dark: #292b31;
  --sq-last-light: #4d4668;
  --sq-last-dark: #3a3450;
  --sq-sel-light: #5d5294;
  --sq-sel-dark: #4a4070;
  --sq-check-light: #6d3a4c;
  --sq-check-dark: #5a3040;
  /* mappa termica: base, controllo del bianco, del nero */
  --heat-base: #2d303c;
  --heat-w: #d98a55;
  --heat-b: #5f7fd6;
  --neon: #7de3e8;
  --sig-good: #6fd39a;
  --sig-warn: #e0b45c;
  --sig-bad: #dd7284;
  /* giudizi delle mosse: elenco, scheda, grafico e scacchiera */
  --giudizio-best: #3ee08f;
  --giudizio-excellent: #8ce85a;
  --giudizio-good: var(--sig-good);
  --giudizio-inaccuracy: #ffd23d;
  --giudizio-mistake: #ff8c33;
  --giudizio-blunder: #ff4d6a;
  --giudizio-mate: var(--neon);
  --giudizio-pending: color-mix(in srgb, var(--color-text) 24%, transparent);
  --giudizio-book: #a9743f;
  --giudizio-forced: #97a3b6;
  /* la distribuzione ha tinte sue */
  --dist-book: #a9743f;
  --dist-best: #3ee08f;
  --dist-excellent: #8ce85a;
  --dist-good: #37bf5e;
  --dist-inaccuracy: #f2c418;
  --dist-mistake: #ff8c33;
  --dist-blunder: #eb4b56;
  /* fasi della partita nei grafici */
  --fase-apertura: var(--color-accent-300);
  --fase-mediogioco: var(--sig-warn);
  --fase-finale: var(--neon);
}

/* --g: il colore del giudizio, per chi porta data-giudizio */
[data-giudizio="best"] { --g: var(--giudizio-best); }
[data-giudizio="excellent"] { --g: var(--giudizio-excellent); }
[data-giudizio="good"] { --g: var(--giudizio-good); }
[data-giudizio="inaccuracy"] { --g: var(--giudizio-inaccuracy); }
[data-giudizio="mistake"] { --g: var(--giudizio-mistake); }
[data-giudizio="blunder"] { --g: var(--giudizio-blunder); }
[data-giudizio="mate"] { --g: var(--giudizio-mate); }
[data-giudizio="pending"] { --g: var(--giudizio-pending); }
[data-giudizio="book"] { --g: var(--giudizio-book); }
[data-giudizio="forced"] { --g: var(--giudizio-forced); }
/* --d: la tinta della distribuzione */
[data-dist="book"] { --d: var(--dist-book); }
[data-dist="best"] { --d: var(--dist-best); }
[data-dist="excellent"] { --d: var(--dist-excellent); }
[data-dist="good"] { --d: var(--dist-good); }
[data-dist="inaccuracy"] { --d: var(--dist-inaccuracy); }
[data-dist="mistake"] { --d: var(--dist-mistake); }
[data-dist="blunder"] { --d: var(--dist-blunder); }
/* --fc: il colore della fase */
[data-fase] { --fc: var(--color-neutral-500); }
[data-fase="Apertura"] { --fc: var(--fase-apertura); }
[data-fase="Mediogioco"] { --fc: var(--fase-mediogioco); }
[data-fase="Finale"] { --fc: var(--fase-finale); }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* colonna: #app prende l'altezza lasciata dalla navbar, senza scorrimento verticale */
body { display: flex; flex-direction: column; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
#app { flex: 1 1 auto; min-height: 0; }
a { text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-300); }
button { font-family: inherit; cursor: pointer; }

/* colonne scorrevoli */
.mv-scroll { scrollbar-width: thin; }
@supports selector(::-webkit-scrollbar) { .mv-scroll { scrollbar-width: auto; } }
.mv-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.mv-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.mv-scroll::-webkit-scrollbar-corner { background: transparent; }
.mv-scroll::-webkit-scrollbar-track { background: color-mix(in srgb, var(--color-text) 5%, transparent); border-radius: 2px; }
.mv-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-accent) 62%, transparent); border-radius: 2px; }
.mv-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-accent-400); }

/* sfondo: griglia sottile e alone in alto a sinistra */
.an-shell {
  min-height: calc(100vh - var(--an-navbar-h));
  background-color: var(--color-bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 5%, transparent) 1px, transparent 1px),
    radial-gradient(1200px 620px at 6% -8%, #1d2033 0%, transparent 62%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
}
.an-spacer { flex: 1; }
.an-row { display: flex; align-items: center; gap: var(--space-3); }
.an-col { display: flex; flex-direction: column; gap: var(--space-3); flex: none; }

/* ---------- colonne: scacchiera | motore e flusso | distribuzione e grafici ---------- */
.an-colonne {
  display: grid;
  grid-template-columns: var(--an-col-sx) 1px var(--an-col-centro) 1px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: calc(100vh - var(--an-navbar-h));
}
.an-colonne > * { min-width: 0; min-height: 0; }
.an-col-sx {
  /* la scacchiera misura lo spazio di questa colonna (container query) */
  container-type: inline-size;
  overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4) var(--space-6) calc(var(--space-4) + var(--an-respiro));
}
.an-col-sx > * { flex: none; }
.an-divisore { background: linear-gradient(180deg, transparent 0, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent 100%); }
.an-col-centro { overflow: hidden; display: flex; flex-direction: column; }
.an-col-dx {
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
}
/* anticheat: resta la sola colonna della scacchiera */
.an-colonne[data-modo="anticheat"] > :not(.an-col-sx) { display: none; }

/* sotto i 900px le colonne si impilano: scacchiera e giocatori in una schermata, poi le altre */
@media (max-width: 899.98px) {
  .an-colonne { display: flex; flex-direction: column; height: auto; }
  .an-colonne > * { flex: none; }
  .an-col-sx { overflow: visible; padding: var(--space-4); }
  .an-divisore { height: 1px; background: linear-gradient(90deg, transparent 0, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent 100%); }
  .an-col-centro { overflow: visible; height: calc(100vh - var(--an-navbar-h)); min-height: 520px; }
  .an-col-dx { overflow: visible; }
}

/* intestazione della colonna sinistra: apertura, cadenza, data; le prime due si ritirano quando manca spazio */
.an-meta { font-size: 11px; white-space: nowrap; }
.an-meta-evento { min-width: 60px; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.an-meta-cadenza { flex: none; color: color-mix(in srgb, var(--color-text) 46%, transparent); }
@media (min-width: 900px) and (max-width: 1049.98px) { .an-meta-evento { display: none; } }
@media (min-width: 900px) and (max-width: 1179.98px), (max-width: 559.98px) { .an-meta-cadenza { display: none; } }

/* ---------- scacchiera: il lato piu' grande che ci sta, in larghezza e in altezza ---------- */
.an-scacchiera {
  /* a sinistra della scacchiera: la barra della valutazione (e nella termica anche la sua) */
  --an-riserva: calc(var(--an-barra-eval-w) + var(--space-3));
  /* a destra: la barra delle probabilita' */
  --an-riserva-dx: calc(var(--an-barra-wdl-w) + var(--space-3));
  --an-attorno: calc(2 * var(--an-giocatore-h) + 2 * var(--space-2));
  --an-lato: round(down, min(round(100cqw, 1px) - var(--an-riserva) - var(--an-riserva-dx), 100cqh - var(--an-attorno), var(--an-scacchiera-max)), 1px);
  container-type: size;
  /* altezza di partenza: scacchiera larga quanto la colonna; se non ci sta, la colonna la stringe */
  contain-intrinsic-block-size: calc(min(round(100cqw, 1px) - var(--an-riserva) - var(--an-riserva-dx), var(--an-scacchiera-max)) + var(--an-attorno));
  display: flex; flex-direction: column; gap: var(--space-2);
}
.an-col-sx > .an-scacchiera { flex: 0 1 auto; min-height: 0; }
.an-scacchiera[data-vista="thermal"] {
  --an-riserva: calc(var(--an-barra-eval-w) + var(--an-barra-termica-w) + 2 * var(--space-3));
}
@media (max-width: 899.98px) {
  /* impilata: la scacchiera sta in una schermata insieme ai giocatori */
  .an-scacchiera {
    container-type: inline-size;
    --an-lato: round(down, min(round(100cqw, 1px) - var(--an-riserva) - var(--an-riserva-dx), 100dvh - var(--an-navbar-h) - var(--an-attorno) - 24px, var(--an-scacchiera-max)), 1px);
  }
}
.an-scacchiera-riga { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); overflow: hidden; }
.an-barra-eval, .an-barra-termica, .an-barra-wdl {
  position: relative; flex: none; height: var(--an-lato); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--color-neutral-800);
}
.an-barra-eval { width: var(--an-barra-eval-w); border-radius: 6px; background: var(--color-neutral-900); }
.an-barra-wdl { width: var(--an-barra-wdl-w); border-radius: 6px; background: var(--color-neutral-900); }
.an-barra-termica {
  width: var(--an-barra-termica-w); z-index: 1; border-radius: 5px;
  background: linear-gradient(180deg, var(--heat-w), var(--heat-base) 50%, var(--heat-b));
}
.an-tavola {
  position: relative; flex: none; width: var(--an-lato); height: var(--an-lato);
  container-type: size; overscroll-behavior: contain; touch-action: none;
  /* trascinando i pezzi non si evidenziano le coordinate */
  user-select: none; -webkit-user-select: none;
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md);
  background: repeating-conic-gradient(var(--sq-dark) 0% 25%, var(--sq-light) 0% 50%) 0 0/25% 25%;
}

/* riga giocatore: larga quanto barra e scacchiera, cosi' l'orologio finisce sul bordo destro */
.an-player {
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--an-giocatore-h); width: calc(var(--an-riserva) + var(--an-lato)); max-width: 100%;
  padding-left: var(--an-riserva);
}
/* nome, Elo e pezzi presi su una riga */
.an-player-id { display: flex; align-items: center; gap: 8px; line-height: 1.25; min-width: 0; }
.an-player-name { font-size: 13px; font-weight: 500; color: var(--color-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-player-elo { font-size: 11px; flex: none; color: color-mix(in srgb, var(--color-text) 48%, transparent); }
.an-taken { display: flex; align-items: center; gap: 1px; white-space: nowrap; }
.an-taken img { width: 14px; height: 14px; object-fit: contain; display: block; }
.an-diff { font-family: var(--font-mono); font-size: 10.5px; flex: none; color: var(--color-accent-300); }

/* intestazione di un riquadro: pulsante, filetto, stato */
.an-head {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 34%, transparent);
}
.an-head-btn {
  display: flex; align-items: center; gap: 5px; padding: 0; border-width: 0; background: transparent;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  white-space: nowrap; color: var(--color-neutral-100); cursor: pointer;
}
.an-head-btn:hover { color: var(--color-accent-200); }
.an-head-btn i { font-size: 11px; color: var(--color-accent-300); }
.an-rule { flex: 1; height: 0; border-top: 1px dotted color-mix(in srgb, var(--color-text) 14%, transparent); }

/* riquadri: incassato, con grafico, scheda */
.an-box, .an-panel, .an-card { border-radius: var(--radius-md); border: 1px solid var(--color-neutral-800); background: color-mix(in srgb, var(--color-surface) 62%, transparent); }
.an-box { padding: var(--space-2) var(--space-3); }
.an-panel, .an-card { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3) var(--space-4); }
.an-card { border-color: var(--color-divider); background: color-mix(in srgb, var(--color-surface) 84%, transparent); }

.an-mono { font-family: var(--font-mono); font-size: 10px; color: var(--color-neutral-100); }
.an-mono-num { font-variant-numeric: tabular-nums; }

/* tabella accuratezza */
.an-th {
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  padding: 0 0 3px; border-bottom: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.an-td {
  font-size: 10.5px; white-space: nowrap; padding: 1px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-neutral-200);
}
.an-td-num { font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
.an-td-cp { color: var(--color-neutral-400); }

.an-cap { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 42%, transparent); }
.an-val { font-family: var(--font-heading); font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: var(--color-neutral-100); }
.an-nav { width: 30px; height: 28px; font-size: 14px; }

/* =====================================================================================================
   Componenti della pagina. Il JS non scrive stili: sceglie le classi (is-on, is-sel, ...) e passa in
   variabili CSS solo i numeri che cambiano (--pct, --x, --y, ...).
   ===================================================================================================== */

/* ---------- colonna sinistra: modalita', vista, giocatori, comandi ---------- */
.an-modi { display: flex; align-items: stretch; gap: var(--space-6); flex: none; min-width: 0; border-bottom: 1px solid var(--color-divider); }
.an-modo {
  display: flex; align-items: center; gap: 6px; padding: 0 2px 7px;
  border: none; border-bottom: 2px solid transparent;
  background: transparent; margin-bottom: -1px; white-space: nowrap;
  font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
  transition: color 160ms ease, border-color 160ms ease;
}
.an-modo.is-on { border-bottom-color: var(--color-accent); color: var(--color-text); }
.an-modo:hover { color: var(--color-text); }
.an-modo > i { font-size: 14px; }

.an-intesta { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--space-3); flex: none; margin-bottom: var(--space-3); min-width: 0; }
.seg.an-viste { flex: none; background: color-mix(in srgb, var(--color-surface) 70%, transparent); }
.an-vista {
  display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--space-4);
  border: none; background: transparent; color: color-mix(in srgb, var(--color-text) 52%, transparent);
  font-size: 12px; letter-spacing: 0.01em;
}
.an-vista.is-on { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.an-vista:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.an-vista:active { background: color-mix(in srgb, var(--color-accent-400) 18%, transparent); color: var(--color-accent-100); }
.an-vista > i { font-size: 13px; }

.an-avatar {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: var(--color-neutral-900); border: 1px solid var(--color-neutral-800);
  font-size: 11px; font-weight: 600; color: var(--color-neutral-300);
}
.an-avatar.is-bianco { background: var(--color-neutral-300); border-color: var(--color-neutral-400); color: var(--color-neutral-900); }
/* orologio: acceso per chi ha il tratto */
.an-orologio {
  display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; font-size: 14px;
  padding: 3px 9px; border-radius: var(--radius-sm); letter-spacing: 0.01em;
  background: var(--color-neutral-900); border: 1px solid var(--color-neutral-800);
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.an-orologio.is-on { background: color-mix(in srgb, var(--color-accent) 16%, transparent); border-color: var(--color-accent-700); color: var(--color-accent-100); }
.an-orologio > i { font-size: 12px; opacity: .55; }
/* senza orologio: il simbolo dell'infinito */
.an-orologio-inf { font-size: 19px; line-height: 1; font-weight: 300; margin-top: -2px; }

/* barra della valutazione: --pct e' la parte del bianco, da 0 a 1 */
.an-barra-eval-pieno {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform-origin: bottom;
  transform: scaleY(var(--pct, .5));
  background: linear-gradient(180deg, var(--color-neutral-200), var(--color-neutral-300));
  transition: transform 320ms cubic-bezier(.24,.68,.32,1);
}
.an-barra-eval-meta { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: color-mix(in srgb, var(--color-accent) 55%, transparent); }
/* barra delle probabilita': dal basso la vittoria del bianco (--w), poi la patta fino a --wd, sopra il nero */
.an-barra-wdl-bianco, .an-barra-wdl-patta {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform-origin: bottom;
  transition: transform 320ms cubic-bezier(.24,.68,.32,1);
}
.an-barra-wdl-bianco { transform: scaleY(var(--w, 0)); background: linear-gradient(180deg, var(--color-neutral-200), var(--color-neutral-300)); }
.an-barra-wdl-patta { transform: scaleY(var(--wd, 0)); background: var(--color-neutral-600); }
/* la percentuale di ogni parte, al centro della sua altezza */
.an-barra-wdl-pct {
  position: absolute; left: 0; right: 0; z-index: 1; transform: translateY(50%); text-align: center; pointer-events: none;
  font-family: var(--font-mono); font-size: 8px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  transition: bottom 320ms cubic-bezier(.24,.68,.32,1);
}
.an-barra-wdl-pct.is-bianco { bottom: calc(var(--w, 0) * 50%); color: var(--color-neutral-900); }
.an-barra-wdl-pct.is-patta { bottom: calc((var(--w, 0) + var(--wd, 0)) * 50%); color: #ffffff; }
.an-barra-wdl-pct.is-nero { bottom: calc((1 + var(--wd, 0)) * 50%); color: var(--color-neutral-200); }
/* senza probabilita' (analisi in corso, variante) la barra resta vuota e tratteggiata */
.an-barra-wdl.is-vuota { background: transparent; box-shadow: none; outline: 1px dashed var(--color-neutral-700); outline-offset: -1px; }
.an-barra-termica-meta { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: color-mix(in srgb, #ffffff 32%, transparent); }

.an-comandi { display: flex; flex-direction: column; gap: var(--space-2); flex: none; padding-left: calc(var(--an-barra-eval-w) + var(--space-3)); }
.an-pulsanti { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
/* pulsanti piccoli della pagina, sopra .btn di nocturne */
.an-btn { height: 28px; padding: 0 var(--space-4); font-size: 12px; }
.an-btn > i { font-size: 13px; }
.an-btn-pgn { white-space: nowrap; }
.an-btn-pgn > i { color: var(--color-accent-300); }
.an-fen-etichetta { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; flex: none; color: color-mix(in srgb, var(--color-text) 34%, transparent); }
.an-fen { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; color: var(--color-neutral-300); }
.an-fen-copia { height: 22px; font-size: 10.5px; flex: none; }
.an-fen-copia > i { font-size: 12px; }

/* ---------- scacchiera: case, pezzi, freccia ---------- */
/* nella variante le case si schiariscono (anche la base della mappa termica) */
.an-tavola.is-variante { --sq-light: #5b5f6c; --sq-dark: #464951; --sq-last-light: #6a6386; --sq-last-dark: #565070; --heat-base: #474a58; }
.an-tavola-strato { position: absolute; inset: 0; }
/* una casa: --c colonna e --r traversa da 0 a 7, come la si vede */
.an-casa {
  position: absolute; width: 12.5%; height: 12.5%;
  left: calc(var(--c) * 12.5%); top: calc(var(--r) * 12.5%);
  background: var(--sq-dark); transition: background 240ms linear; cursor: default;
}
.an-casa.is-chiara { background: var(--sq-light); }
.an-casa.is-ultima { background: var(--sq-last-dark); }
.an-casa.is-ultima.is-chiara { background: var(--sq-last-light); }
.an-casa.is-scacco { background: var(--sq-check-dark); }
.an-casa.is-scacco.is-chiara { background: var(--sq-check-light); }
.an-casa.is-scelta { background: var(--sq-sel-dark); }
.an-casa.is-scelta.is-chiara { background: var(--sq-sel-light); }
/* le case della mossa giudicata prendono il colore del giudizio */
.an-casa.is-ultima[data-giudizio] { background: color-mix(in oklab, var(--g) 34%, var(--sq-dark)); }
.an-casa.is-ultima.is-chiara[data-giudizio] { background: color-mix(in oklab, var(--g) 34%, var(--sq-light)); }
/* mappa termica: --calore e' l'intensita' del controllo, del bianco (is-w) o del nero (is-b) */
.an-casa.is-termica { --termica: var(--heat-base); background: var(--termica); }
.an-casa.is-termica.is-chiara { --termica: color-mix(in oklab, var(--heat-base) 82%, #ffffff); }
.an-casa.is-termica.is-w { --termica: color-mix(in oklab, var(--heat-w) var(--calore), var(--heat-base)); }
.an-casa.is-termica.is-b { --termica: color-mix(in oklab, var(--heat-b) var(--calore), var(--heat-base)); }
/* nella termica la tinta si mescola al controllo, che resta leggibile */
.an-casa.is-termica.is-ultima { background: color-mix(in oklab, var(--sq-last-light) 62%, var(--termica)); }
.an-casa.is-termica.is-scacco { background: color-mix(in oklab, var(--sq-check-light) 62%, var(--termica)); }
.an-casa.is-termica.is-scelta { background: color-mix(in oklab, var(--sq-sel-light) 62%, var(--termica)); }
.an-casa.is-attiva { cursor: pointer; }
/* coordinate sul bordo */
.an-coord { position: absolute; font-size: 2.5cqmin; color: rgba(233,233,237,.28); }
.an-casa.is-chiara > .an-coord { color: rgba(233,233,237,.34); }
.an-coord.is-colonna { right: 7%; bottom: 2%; }
.an-coord.is-traversa { left: 7%; top: 2%; }
/* case d'arrivo della casa scelta: anello sulle prese, punto sulle case vuote */
.an-bersaglio {
  position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; transform: translate(-50%,-50%);
  border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 62%, transparent);
}
.an-bersaglio.is-presa {
  inset: 6%; width: auto; height: auto; transform: none; background: none;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--color-accent) 75%, transparent);
}
/* un pezzo: si sposta con transform, cosi' scivola da una casa all'altra */
.an-pezzo {
  position: absolute; width: 12.5%; height: 12.5%; left: 0; top: 0;
  transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
  transition: transform 260ms cubic-bezier(.24,.68,.32,1);   /* 260ms come CONFIG.animMs in analisi.js */
  display: grid; place-items: center; z-index: 2; cursor: default;
}
.an-tavola.is-veloce .an-pezzo { transition-duration: 90ms; }
.an-pezzo.is-re { z-index: 3; }
.an-pezzo.is-mio { cursor: grab; }
.an-pezzo > img { width: 90%; height: 90%; object-fit: contain; pointer-events: none; user-select: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
/* freccia della mossa migliore: --freccia e' il poligono (arrowClip) */
.an-freccia { position: absolute; inset: 0; z-index: 5; pointer-events: none; clip-path: var(--freccia); background: var(--giudizio-best); opacity: 0.75; }
/* icona del giudizio sull'angolo della casa d'arrivo: --x e --y in % della scacchiera */
.an-giudizio-icona {
  position: absolute; z-index: 6; pointer-events: none; width: 5.2%; height: 5.2%; left: var(--x); top: var(--y);
  border-radius: 50%; background: var(--g); display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.55); border: 1.5px solid rgba(255,255,255,.85);
}
.an-giudizio-icona > i { font-size: 3cqmin; color: #fff; line-height: 1; }

/* ---------- colonna centrale: motore e precisione ---------- */
.an-centro-corpo { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; min-height: 0; position: relative; overflow: hidden; padding: var(--space-4) var(--space-3) var(--space-6); }
.an-motore-stato {
  font-family: inherit; font-size: 10px; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}
.an-motore-stato.is-warn { color: var(--sig-warn); }
/* avanzamento dell'analisi sul server: --pct e' la frazione delle posizioni valutate */
.an-progresso {
  position: relative; flex: 0 1 110px; min-width: 48px; height: 4px; overflow: hidden;
  border-radius: 2px; background: var(--color-neutral-800);
}
.an-progresso-pieno {
  position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--pct, 0));
  background: var(--color-accent); transition: transform 0.4s ease-out;
}
.an-progresso-testo { flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--color-neutral-400); }
/* il livello dell'analisi sul server, accanto al pulsante che la avvia */
.an-livello {
  flex: none; height: 19px; padding: 0 4px; border-radius: var(--radius-sm); border: 1px solid var(--color-neutral-800);
  background: var(--color-bg); font-family: inherit; font-size: 10px; color: var(--color-neutral-300); cursor: pointer;
}
/* "analizza" / "rianalizza": giallo mentre il server lavora, spento senza partita */
.an-scan {
  display: flex; align-items: center; gap: 4px; flex: none; padding: 0 7px; height: 19px;
  border-radius: var(--radius-sm); border: 1px solid var(--color-neutral-800);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  font-family: inherit; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-neutral-500); cursor: not-allowed;
}
.an-scan.is-scan { background: color-mix(in srgb, var(--sig-warn) 18%, transparent); }
.an-scan.is-pronto { color: var(--color-accent-100); cursor: pointer; }
.an-scan:hover { border-color: var(--color-accent-700); }
.an-scan > i { font-size: 11px; }

.an-box.an-motore { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--space-3); row-gap: 2px; }
.an-motore-etichetta { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; color: color-mix(in srgb, var(--color-text) 48%, transparent); }
.an-motore-scelta {
  grid-column: span 2; min-width: 0; height: 22px; margin-bottom: 4px; padding: 0 6px;
  font-family: inherit; font-size: 11px; color: var(--color-text); background: var(--color-bg);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-sm); cursor: pointer;
}

.an-box.an-precisione { display: flex; align-items: center; flex-wrap: wrap; row-gap: var(--space-3); gap: var(--space-6); padding: var(--space-3); }
.an-precisione-anelli { display: flex; align-items: center; gap: var(--space-6); flex: none; }
.an-precisione-valori { display: flex; flex-direction: column; line-height: 1.15; }
/* anello della precisione: --deg e' la parte piena */
.an-anello {
  --c: var(--color-accent);
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: conic-gradient(var(--c) var(--deg), color-mix(in srgb, var(--c) 16%, transparent) 0);
}
.an-anello.is-nero { --c: var(--color-neutral-400); }
.an-anello::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--color-surface); }
.an-precisione-tabella { display: grid; grid-template-columns: minmax(58px,1fr) 30px 38px 30px 38px; column-gap: var(--space-2); row-gap: 0; flex: 1 1 100%; min-width: 0; }
.an-th.an-th-lato { grid-column: span 2; text-align: left; }

/* ---------- flusso della partita: mosse, varianti, linee del motore, scheda ---------- */
.an-flusso { position: relative; display: flex; align-items: stretch; gap: 0; flex: 1 1 auto; height: auto; flex-basis: 0; min-height: 180px; overflow: hidden; }
.an-flusso.is-chiuso { display: none; }
.an-flusso-connettori { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
.an-mosse { position: relative; width: var(--an-moves-w); flex: none; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 5px; padding: 2px 8px 2px 26px; direction: rtl; }
/* una semimossa: il nero scende di 10px; --var-h e' l'altezza della variante appesa sotto */
.an-mossa { position: relative; display: flex; align-items: center; direction: ltr; margin-bottom: var(--var-h, 0px); }
.an-mossa.is-nero { margin-bottom: calc(var(--var-h, 0px) + 10px); }
.an-mossa-nodo { position: absolute; left: -15px; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; border: none; background: #000000; transition: none; }
.an-mossa.is-bianco > .an-mossa-nodo { background: #ffffff; }
/* pillola: tinta del giudizio sulle mosse notevoli (is-calda), bordo e alone sulla mossa mostrata (is-sel) */
.an-pillola {
  --acc: var(--color-accent);
  display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; height: 27px;
  padding: 0 9px; overflow: hidden; white-space: nowrap; text-align: left;
  border-radius: 999px; border-width: 0px; border-style: solid; border-color: transparent; appearance: none; outline: none;
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  color: var(--color-neutral-200);
  transition: border-color 160ms ease, box-shadow 220ms ease, background 160ms ease, opacity 160ms ease;
}
.an-pillola.is-calda { --acc: var(--g); background: color-mix(in srgb, var(--g) 15%, var(--color-surface)); }
.an-pillola.is-sel {
  border-width: 1px; border-color: var(--acc); padding: 0 8px;
  background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent-100);
  box-shadow: 0 0 0 1px var(--acc), 0 0 22px color-mix(in srgb, var(--acc) 42%, transparent);
}
.an-pillola.is-calda.is-sel { background: color-mix(in srgb, var(--g) 30%, var(--color-surface)); color: var(--color-neutral-100); }
.an-mosse .an-pillola:hover { background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)); border-color: var(--color-accent-700); }
.an-mosse .an-pillola:active { background: color-mix(in srgb, var(--color-accent-400) 22%, var(--color-surface)); border-color: var(--color-accent-400); }
.an-pillola-n { font-family: var(--font-mono); font-size: 15px; flex: none; min-width: 22px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.an-pillola-san {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.01em; color: #FFFFFF;
}
/* giudizio sul bordo destro, allineato sempre allo stesso punto: l'icona (col segno davanti per errore e matto),
   oppure ?! e ?? da soli */
.an-pillola-giudizio {
  flex: none; min-width: 13px; display: flex; align-items: center; justify-content: flex-end; gap: 2px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--g);
}
.an-pillola-giudizio > i { font-size: 12px; }
/* ?! e ?? senza icona: l'icona vuota non deve occupare lo spazio del gap */
.an-pillola-giudizio > i[class=""] { display: none; }
/* varianti appese sotto una semimossa */
.an-varianti {
  position: absolute; left: 12px; right: 0; top: 100%; display: flex; flex-direction: column; gap: 2px;
  padding: 4px 0 0 12px; z-index: 2; border-left: 1px dashed color-mix(in srgb, var(--neon) 35%, transparent);
}
.an-var {
  display: flex; align-items: center; gap: 5px; width: 100%; height: 22px;
  padding: 0 6px; border-radius: 999px; cursor: pointer; text-align: left; opacity: 1;
  border: 1px solid color-mix(in srgb, var(--neon) 22%, transparent);
  background: transparent; box-shadow: none; color: var(--color-neutral-300);
}
.an-var.is-attiva {
  border-color: color-mix(in srgb, var(--neon) 55%, transparent);
  background: color-mix(in srgb, var(--neon) 12%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--neon) 30%, transparent); color: var(--neon);
}
.an-var.is-avanti { opacity: 0.45; }
.an-var-n { font-family: var(--font-mono); font-size: 9px; flex: none; opacity: .6; }
.an-var-san { font-family: var(--font-mono); font-size: 11px; flex: none; }
.an-var-apri {
  display: flex; align-items: center; gap: 4px; align-self: flex-start; height: 18px; padding: 0 7px;
  border-radius: 999px; border-width: 0px; background: color-mix(in srgb, var(--neon) 8%, transparent);
  color: color-mix(in srgb, var(--neon) 80%, transparent); font-size: 9.5px; letter-spacing: 0.04em; cursor: pointer;
}
.an-var-apri:hover { background: color-mix(in srgb, var(--neon) 18%, transparent); }
.an-var-apri > i { font-size: 10px; }
/* pallino del colore che muove */
.an-tondo { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #000000; }
.an-tondo.is-grande { width: 9px; height: 9px; }
.an-tondo.is-bianco { background: #ffffff; }
.an-risultato { position: relative; display: flex; align-items: center; direction: ltr; margin-top: 6px; padding-left: 9px; }
.an-risultato > span { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--color-neutral-100); }

.an-schede { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 182px; min-width: var(--an-cards-min); min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 2px var(--space-3) 0; margin-left: var(--an-cards-gap); }
/* linee del motore: la prima (is-migliore) accesa, le altre tenui */
.an-linee {
  flex: none; min-width: 0; padding: 6px 9px; border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.an-linee-corpo { position: relative; padding-left: 10px; }
.an-linee-filo { position: absolute; left: 0; top: 0; bottom: 11px; width: 0; border-left: 1px dashed color-mix(in srgb, var(--color-accent) 45%, transparent); }
.an-linee-nota { font-size: 11px; letter-spacing: 0.01em; display: block; padding: 2px 0; color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.an-linea { --lc: color-mix(in srgb, var(--color-text) 20%, transparent); display: flex; align-items: center; flex-wrap: wrap; row-gap: 2px; gap: 3px; min-height: 18px; padding: 0; }
.an-linea.is-migliore { --lc: color-mix(in srgb, var(--color-accent) 70%, transparent); }
.an-linea-gomito { width: 8px; height: 10px; flex: none; margin-top: -10px; border-left: 1px dashed var(--lc); border-bottom: 1px dashed var(--lc); border-bottom-left-radius: 4px; }
.an-linea-nome { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; flex: none; color: color-mix(in srgb, var(--color-text) 30%, transparent); }
.an-linea.is-migliore .an-linea-nome { color: var(--color-accent-300); }
.an-linea-punti { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; flex: none; min-width: 34px; color: var(--color-neutral-500); }
.an-linea.is-migliore .an-linea-punti { color: var(--color-neutral-200); }
.an-linea .an-linea-punti.is-matto { color: var(--neon); }
.an-linea-legame { width: 5px; flex: none; height: 0; border-top: 1px dashed var(--lc); }
.an-linea-mossa { font-family: var(--font-mono); font-size: 12px; padding: 0; flex: none; white-space: nowrap; color: var(--color-neutral-400); }
.an-linea.is-migliore .an-linea-mossa { color: var(--color-accent-100); }
.an-linea-n { font-size: 10px; margin-right: 2px; opacity: 0.6; }

/* scheda della mossa mostrata */
.an-card.an-scheda-mossa { flex: none; gap: var(--space-3); padding: var(--space-4); }
.an-scheda-testa { display: flex; align-items: flex-start; flex-wrap: wrap; row-gap: var(--space-2); gap: var(--space-3); }
.an-scheda-eval { display: flex; flex-direction: column; gap: 1px; flex: none; }
.an-scheda-eval-n { font-family: var(--font-mono); font-size: 18px; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; color: var(--color-accent-200); }
.an-scheda-eval-nota { font-size: 9.5px; white-space: nowrap; color: color-mix(in srgb, var(--color-text) 34%, transparent); }
.an-scheda-mossa-riga { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.an-scheda-n, .an-scheda-san { font-family: var(--font-heading); font-size: 22px; line-height: 1; letter-spacing: -0.02em; }
.an-scheda-n { color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.an-scheda-san { color: var(--color-neutral-100); }
.an-scheda-etichette {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; row-gap: var(--space-2); column-gap: var(--space-2);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; flex: 0 1 auto; min-width: 0;
}
/* etichetta del giudizio, nel suo colore; "inizio" per la posizione iniziale */
.an-chip {
  --t: var(--g);
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; letter-spacing: 0.01em; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--t) 45%, transparent);
  background: color-mix(in srgb, var(--t) 16%, transparent); color: var(--color-neutral-100);
}
.an-chip[data-giudizio="pending"] { --t: var(--color-neutral-600); }
.an-chip[data-giudizio="inizio"] { --t: var(--color-accent); }
.an-chip > i { font-size: 13px; }
.an-chip-variante {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--neon) 50%, transparent);
  background: color-mix(in srgb, var(--neon) 12%, transparent); color: var(--neon);
}
.an-chip-variante > i { font-size: 11px; }
.an-scheda-filo { height: 1px; background: linear-gradient(90deg, var(--color-divider), transparent); }
.an-scheda-dati { display: grid; grid-template-columns: 1fr; row-gap: 2px; column-gap: var(--space-4); }
.an-dato { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.an-dato-etichetta { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; flex: none; color: color-mix(in srgb, var(--color-text) 38%, transparent); }
.an-dato-valore {
  font-family: var(--font-mono); font-size: 14px; letter-spacing: -0.01em; line-height: 1.25; color: var(--color-neutral-100);
  flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.an-dato-valore.is-accento { color: var(--color-accent-200); }
.an-dato-valore.is-neon { color: var(--neon); }
.an-dato-valore.is-giudizio { color: var(--g); }
.an-dato-nota {
  font-size: 9.5px; line-height: 1.3; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: right; color: color-mix(in srgb, var(--color-text) 38%, transparent);
}
.an-scheda-commento {
  margin: 0; font-size: 12px; line-height: 1.55; text-wrap: pretty; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  color: color-mix(in srgb, var(--color-text) 74%, transparent);
}
/* chat AI sulla partita: riempie lo spazio che resta sotto la scheda della mossa */
.an-card.an-chat { flex: 1 0 auto; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.an-chat-testa { display: flex; align-items: center; gap: var(--space-2); }
.an-chat-testa > i { font-size: 13px; color: var(--color-accent-300); }
.an-chat-titolo { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-100); }
.an-chat-etichetta {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent-200);
}
.an-chat-etichetta > i { font-size: 11px; }
.an-chat-messaggi {
  flex: 1 1 auto; min-height: 44px; display: flex; align-items: center; justify-content: center;
  padding: var(--space-3); border-radius: var(--radius-md);
  border: 1px dashed color-mix(in srgb, var(--color-text) 14%, transparent);
}
/* coi messaggi la cornice diventa una colonna che scorre, alta al massimo quanto una decina di righe */
.an-chat-messaggi.is-piena {
  flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px;
  max-height: 300px; overflow-y: auto; border-style: solid;
}
.an-chat-vuoto { max-width: 34ch; font-size: 12px; line-height: 1.55; text-align: center; text-wrap: pretty; color: color-mix(in srgb, var(--color-text) 52%, transparent); }
.an-chat-msg {
  max-width: 92%; padding: 6px 10px; border-radius: 10px; font-size: 12px; line-height: 1.5; text-wrap: pretty;
  background: color-mix(in srgb, var(--color-text) 7%, transparent); color: color-mix(in srgb, var(--color-text) 86%, transparent);
}
.an-chat-msg.is-io { align-self: flex-end; background: color-mix(in srgb, var(--color-accent) 24%, transparent); color: var(--color-neutral-100); }
.an-chat-msg.is-errore { color: var(--sig-warn); }
.an-chat-msg.is-attesa { font-style: italic; color: color-mix(in srgb, var(--color-text) 48%, transparent); }
.an-chat-mossa { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.an-chat-mossa:empty { display: none; }
.an-chat-rapide { display: flex; flex-wrap: wrap; gap: 6px; }
.an-chat-rapida {
  padding: 4px 10px; border-radius: 999px; font: inherit; font-size: 11.5px; line-height: 1.3; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); background: transparent; color: var(--color-accent-200);
  transition: background .15s;
}
.an-chat-rapida:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.an-chat-rapida:disabled { opacity: .45; cursor: default; }
.an-chat-scrivi { display: flex; align-items: center; gap: var(--space-2); }
.an-chat-campo { flex: 1; min-width: 0; min-height: 30px; font-size: 12px; }
.an-chat-nota { font-size: 10.5px; line-height: 1.4; color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.an-chat-nota:empty { display: none; }

/* ---------- colonna destra: distribuzione dei giudizi ---------- */
.an-box.an-distribuzione { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-3); }
.an-dist-lato { display: flex; flex-direction: column; gap: 5px; }
.an-dist-testa { display: flex; align-items: center; gap: 6px; }
.an-dist-nome { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: color-mix(in srgb, var(--color-text) 48%, transparent); }
.an-dist-totale { font-family: var(--font-mono); font-size: 10px; white-space: nowrap; color: color-mix(in srgb, var(--color-text) 34%, transparent); }
.an-dist-barre { display: flex; align-items: stretch; gap: 3px; height: 24px; }
/* un tratto della barra: largo quanto --n, le mosse con quel giudizio */
.an-dist-pezzo {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  flex: var(--n) 1 0; min-width: 22px; border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, var(--d), color-mix(in srgb, var(--d) 82%, #000));
  color: #0d1017;
  box-shadow: 0 0 10px color-mix(in srgb, var(--d) 45%, transparent);
  transition: flex-grow 240ms ease;
}
.an-dist-pezzo > i { font-size: 12px; }
.an-dist-pezzo > span { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.an-dist-legenda {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px var(--space-2);
  padding-top: var(--space-2); border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.an-dist-voce { display: flex; align-items: center; gap: 4px; min-width: 0; }
.an-dist-voce > i { font-size: 11px; flex: none; color: var(--d); }
.an-dist-voce > span { font-size: 9px; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* ---------- grafici: andamento e tempi ---------- */
.an-grafico-riga { display: flex; align-items: stretch; gap: 5px; }
.an-grafico { position: relative; flex: 1; min-width: 0; height: 104px; cursor: crosshair; }
.an-grafico.is-basso { height: 92px; }
.an-grafico-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* asse y a sinistra di un grafico: ogni valore a --y dall'alto; le linee guida dell'andamento alla stessa altezza */
.an-asse { position: relative; flex: none; width: var(--an-asse-w); }
.an-asse-valore {
  position: absolute; right: 0; top: var(--y); transform: translateY(-50%); white-space: nowrap;
  font-family: var(--font-mono); font-size: 8px; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.an-guida { position: absolute; left: 0; right: 0; top: var(--y); height: 0; pointer-events: none; border-top: 1px dotted color-mix(in srgb, var(--color-text) 12%, transparent); }
/* a colonne i due grafici si allungano fino in fondo alla colonna destra (impilata restano alti 104/92px) */
@media (min-width: 900px) {
  .an-col-grafico:has(> .an-panel) { flex: 1 1 auto; }
  .an-col-grafico > .an-panel { flex: 1 1 auto; }
  .an-col-grafico .an-grafico-riga { flex: 1 1 auto; }
  .an-col-grafico .an-grafico { height: auto; min-height: 104px; }
  .an-col-grafico .an-grafico.is-basso { min-height: 92px; }
}
/* linea verticale a --x: confine di fase, mossa mostrata, passaggio del mouse */
.an-vlinea { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; left: var(--x); }
.an-vlinea.is-fase { border-left: 1px dashed color-mix(in srgb, var(--fc) 55%, transparent); }
.an-vlinea.is-neon { border-left: 1px dashed color-mix(in srgb, var(--neon) 70%, transparent); }
.an-vlinea.is-tenue { border-left: 1px dashed color-mix(in srgb, var(--color-text) 40%, transparent); }
.an-vlinea.is-cursore { border-left: 1px solid color-mix(in srgb, var(--color-accent) 70%, transparent); }
/* nome della fase: da --x, largo al massimo --largo; is-basso dove il grafico lascia libero sotto */
.an-fase-nome {
  position: absolute; top: 2px; pointer-events: none; white-space: nowrap;
  left: var(--x); margin-left: 3px; max-width: calc(var(--largo) - 5px);
  overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--fc) 78%, transparent);
}
.an-fase-nome.is-basso { top: auto; bottom: 2px; }
/* mossa notevole sulla curva, a --x/--y */
.an-grafico-segno {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  left: calc(var(--x) - 2.5px); top: calc(var(--y) - 2.5px);
  background: var(--g); box-shadow: 0 0 6px var(--g); pointer-events: none;
}
.an-grafico-punto {
  position: absolute; width: 7px; height: 7px; border-radius: 50%; pointer-events: none;
  left: calc(var(--x) - 3.5px); top: calc(var(--y) - 3.5px);
  background: var(--neon); box-shadow: 0 0 8px var(--neon);
}
/* fumetto dell'andamento: a destra del punto, o a sinistra (is-destra) oltre meta' grafico */
.an-grafico-tip {
  position: absolute; display: flex; align-items: center; gap: 7px; pointer-events: none;
  top: 2px; z-index: 6; white-space: nowrap; left: calc(var(--x) + 10px); right: auto;
  padding: 3px 8px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--neon) 45%, transparent);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent); box-shadow: 0 6px 18px rgba(0,0,0,.55);
}
.an-grafico-tip.is-destra { left: auto; right: calc(100% - var(--x) + 10px); }
/* fumetto dei tempi, da --x */
.an-tip {
  position: absolute; top: 2px; pointer-events: none; display: flex; gap: 6px; align-items: baseline;
  padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid var(--color-neutral-700);
  background: var(--color-neutral-900); white-space: nowrap; box-shadow: var(--shadow-sm); left: var(--x);
}
.an-tip-valore { color: var(--color-accent-200); }
/* tempi: il bianco sopra la linea di mezzo, il nero sotto; --b la tinta del lato */
.an-tempi-meta { position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 1px dashed color-mix(in srgb, var(--color-text) 24%, transparent); pointer-events: none; }
.an-tempo {
  --b: var(--color-accent-300);
  position: absolute; pointer-events: none; border-radius: 1px;
  left: var(--x); width: calc(var(--w) - 1.5px); height: calc(var(--h) + 1px);
  background: color-mix(in srgb, var(--b) 42%, transparent); box-shadow: none; top: 50%;
}
.an-tempo.is-bianco { --b: #e9e9ed; top: auto; bottom: 50%; }
.an-tempo.is-sel { background: var(--b); box-shadow: 0 0 7px var(--b); }
/* media dei tempi di un lato, a --y dalla linea di mezzo */
.an-media-linea, .an-media-nome { --b: var(--color-accent-300); position: absolute; pointer-events: none; }
.an-media-linea.is-bianco, .an-media-nome.is-bianco { --b: #e9e9ed; }
.an-media-linea { left: 0; right: 0; height: 0; border-top: 1px dashed color-mix(in srgb, var(--b) 72%, transparent); top: calc(50% + var(--y)); }
.an-media-linea.is-bianco { top: auto; bottom: calc(50% + var(--y)); }
.an-media-nome {
  right: 2px; white-space: nowrap; font-family: var(--font-mono); font-size: 8px; font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em; padding: 0 3px; border-radius: 2px;
  background: color-mix(in srgb, var(--color-bg) 78%, transparent); color: color-mix(in srgb, var(--b) 85%, transparent);
  top: calc(50% + var(--y) + 1px);
}
.an-media-nome.is-bianco { top: auto; bottom: calc(50% + var(--y) + 1px); }

/* ---------- finestra "Carica una partita" ---------- */
.an-finestra-sfondo {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: var(--space-6); background: color-mix(in srgb, #05060b 62%, transparent); backdrop-filter: blur(3px);
}
.an-finestra {
  width: min(560px, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--color-divider);
  background: var(--color-surface); box-shadow: 0 24px 64px color-mix(in srgb, #000 62%, transparent);
}
.an-finestra-icona { font-size: 16px; color: var(--color-accent-300); }
.an-finestra-titolo { font-size: 14px; letter-spacing: 0.01em; color: var(--color-neutral-100); }
.an-finestra-chiudi { width: 28px; height: 28px; font-size: 14px; }
textarea.an-pgn { min-height: 150px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.55; }
/* zona di rilascio del file: is-sopra mentre ci si trascina sopra */
.an-rilascio {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4);
  border-radius: var(--radius-md); font-size: 12px; transition: border-color 160ms ease, background 160ms ease;
  border: 1px dashed var(--color-neutral-700); background: transparent; color: color-mix(in srgb, var(--color-text) 52%, transparent);
}
.an-rilascio.is-sopra { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-100); }
.an-rilascio > i { font-size: 16px; color: var(--color-accent-300); }
.an-btn-alto { height: 30px; padding: 0 var(--space-4); font-size: 12px; }
.an-btn-alto.is-largo { padding: 0 var(--space-6); }
.an-btn-alto > i { font-size: 13px; }
.an-btn-file { cursor: pointer; white-space: nowrap; }
.an-btn-file > i { color: var(--color-accent-300); }
.an-btn-file > input { display: none; }
.an-stato { font-size: 11px; letter-spacing: 0.01em; min-height: 14px; color: color-mix(in srgb, var(--color-text) 42%, transparent); }
.an-stato.is-warn { color: var(--sig-warn); }
.an-recenti { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--color-divider); padding-top: var(--space-4); }
.an-recenti-titolo { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 52%, transparent); }
.an-row.an-recente { gap: 6px; }
.an-recente-apri {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 var(--space-3);
  border: 1px solid var(--color-divider); border-radius: var(--radius-sm); background: transparent;
  color: var(--color-neutral-100); font-size: 12px; text-align: left; cursor: pointer;
}
.an-recente-apri:hover { border-color: var(--color-accent-700); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.an-recente-apri > i { font-size: 13px; flex: none; color: var(--color-accent-300); }
.an-recente-titolo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-recente-nota { flex: none; font-size: 11px; color: color-mix(in srgb, var(--color-text) 52%, transparent); }
.an-recente-togli { width: 26px; height: 26px; font-size: 12px; flex: none; }

@media print {
  @page { margin: 0.5cm; }
  #app { height: auto; }
  *, *::before, *::after {
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
    animation-duration: .001s !important; transition-duration: 0s !important;
  }
}