/* Temi della scacchiera. Il tema scelto sta in <html data-tema="…">, lo scrive assets/js/scacchi/pezzi.js.
   «notte» è il predefinito e qui non ha regole: ogni pagina tiene i colori suoi.
   Gli altri disegnano tutta la scacchiera con un'immagine sola (assets/img/scacchiere/, le rigenerano gli script
   in tools/), così fughe e crepe passano da una casa all'altra: le case diventano trasparenti e le evidenziazioni
   sono velature sopra la pietra. Ogni tema dà solo le sue variabili; le regole valgono per tutti quelli che non
   sono «notte», partono da :root[data-tema] e vincono sui colori delle pagine senza !important.
   Scacchiere: .sch (scacchiera.js), .board/.sq (partita), .an-tavola/.an-casa (analisi), .scacchiera__caselle (home). */

/* marmo.py */
:root[data-tema="marmo"] {
  --tema-scacchiera: url("../img/scacchiere/marmo.webp");
  --tema-ultima: rgba(222, 170, 58, .42);
  --tema-scelta: rgba(222, 170, 58, .66);
  --tema-premossa: rgba(64, 120, 176, .48);
  --tema-vietata: rgba(196, 34, 34, .62);
  --tema-scacco: radial-gradient(circle, rgba(232, 48, 30, .95) 0%, rgba(214, 40, 26, .6) 32%, rgba(170, 20, 10, 0) 72%);
  --tema-bersaglio: rgba(36, 30, 22, .34);
  --tema-coord-chiara: rgba(84, 74, 58, .85);
  --tema-coord-scura: rgba(234, 228, 212, .8);
}

/* ghiaccio.py, le tre scacchiere con le pedine delle casate. «Ghiaccio e fuoco»: neve e ardesia dalla parte del
   Bianco, arenaria e lava da quella del Nero; girata non e' uguale, col Nero si usa la copia capovolta.
   «Ghiaccio e lava» e «Neve e cenere» sono uguali dai due lati. Sulla neve e sul ghiaccio l'azzurro sparisce, le
   evidenziazioni sono color brace */
:root[data-tema="ghiaccio"] {
  --tema-scacchiera: url("../img/scacchiere/ghiaccio.webp");
  --tema-scacchiera-girata: url("../img/scacchiere/ghiaccio-girata.webp");
}
:root[data-tema="lava"] { --tema-scacchiera: url("../img/scacchiere/lava.webp"); }
:root[data-tema="cenere"] { --tema-scacchiera: url("../img/scacchiere/cenere.webp"); }
:root:is([data-tema="ghiaccio"], [data-tema="lava"], [data-tema="cenere"]) {
  --tema-ultima: rgba(236, 150, 48, .42);
  --tema-scelta: rgba(236, 150, 48, .64);
  --tema-premossa: rgba(118, 80, 196, .5);
  --tema-vietata: rgba(196, 34, 34, .62);
  --tema-scacco: radial-gradient(circle, rgba(232, 48, 30, .95) 0%, rgba(214, 40, 26, .6) 32%, rgba(170, 20, 10, 0) 72%);
  --tema-bersaglio: rgba(20, 22, 30, .36);
  --tema-coord-chiara: rgba(44, 52, 66, .88);
  --tema-coord-scura: rgba(240, 236, 230, .88);
}

/* mosaico.py: sulle tessere avorio e basalto l'oro e il seppia si perdono, le evidenziazioni sono verde lauro */
:root[data-tema="roma"] {
  --tema-scacchiera: url("../img/scacchiere/mosaico.webp");
  --tema-ultima: rgba(104, 156, 72, .46);
  --tema-scelta: rgba(104, 156, 72, .7);
  --tema-premossa: rgba(118, 80, 196, .5);
  --tema-vietata: rgba(196, 34, 34, .62);
  --tema-scacco: radial-gradient(circle, rgba(232, 48, 30, .95) 0%, rgba(214, 40, 26, .6) 32%, rgba(170, 20, 10, 0) 72%);
  --tema-bersaglio: rgba(30, 24, 18, .36);
  --tema-coord-chiara: rgba(66, 56, 46, .88);
  --tema-coord-scura: rgba(236, 228, 210, .86);
}

/* ── scacchiera.js ── */
:root[data-tema]:not([data-tema="notte"]) .sch { background: var(--tema-scacchiera) 0 0 / 100% 100%; }
:root[data-tema]:not([data-tema="notte"]) .sch__casa--chiara,
:root[data-tema]:not([data-tema="notte"]) .sch__casa--scura { background: transparent; }
:root[data-tema]:not([data-tema="notte"]) .sch__casa--ultima { background: var(--tema-ultima); }
:root[data-tema]:not([data-tema="notte"]) .sch__casa--scelta { background: var(--tema-scelta); }
:root[data-tema]:not([data-tema="notte"]) .sch__casa--scacco { background: var(--tema-scacco); }
:root[data-tema]:not([data-tema="notte"]) .sch__casa--bersaglio::after { background: var(--tema-bersaglio); }
:root[data-tema]:not([data-tema="notte"]) .sch__casa--presa::after { box-shadow: inset 0 0 0 4px var(--tema-bersaglio); }
:root[data-tema]:not([data-tema="notte"]) .sch__casa--chiara > .sch__rango,
:root[data-tema]:not([data-tema="notte"]) .sch__casa--chiara > .sch__colonna { color: var(--tema-coord-chiara); }
:root[data-tema]:not([data-tema="notte"]) .sch__casa--scura > .sch__rango,
:root[data-tema]:not([data-tema="notte"]) .sch__casa--scura > .sch__colonna { color: var(--tema-coord-scura); }

/* ── partita ── */
:root[data-tema]:not([data-tema="notte"]) .board { background: var(--tema-scacchiera) 0 0 / 100% 100%; }
:root[data-tema]:not([data-tema="notte"]) .sq--light,
:root[data-tema]:not([data-tema="notte"]) .sq--dark { background: transparent; }
:root[data-tema]:not([data-tema="notte"]) .sq--last { background: var(--tema-ultima); }
:root[data-tema]:not([data-tema="notte"]) .sq--sel { background: var(--tema-scelta); }
:root[data-tema]:not([data-tema="notte"]) .sq--check { background: var(--tema-scacco); }
:root[data-tema]:not([data-tema="notte"]) .sq--vietata { background: var(--tema-vietata); }
:root[data-tema]:not([data-tema="notte"]) .sq--premove { background: var(--tema-premossa); }
:root[data-tema]:not([data-tema="notte"]) .sq.is-target:not(.has-piece) .sq__dot { background: var(--tema-bersaglio); }
:root[data-tema]:not([data-tema="notte"]) .sq.is-target.has-piece .sq__ring { box-shadow: inset 0 0 0 4px var(--tema-bersaglio); }
:root[data-tema]:not([data-tema="notte"]) .sq--light .sq__coord { color: var(--tema-coord-chiara); }
:root[data-tema]:not([data-tema="notte"]) .sq--dark .sq__coord { color: var(--tema-coord-scura); }

/* ── analisi: la mappa termica resta com'è, le sue tinte sono piene ── */
:root[data-tema]:not([data-tema="notte"]) .an-tavola { background: var(--tema-scacchiera) 0 0 / 100% 100%; }
/* nella variante la pietra si schiarisce, come le case del tema notte */
:root[data-tema]:not([data-tema="notte"]) .an-tavola.is-variante {
  background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)), var(--tema-scacchiera);
  background-size: 100% 100%;
}
:root[data-tema]:not([data-tema="notte"]) .an-casa:not(.is-termica) { background: transparent; }
:root[data-tema]:not([data-tema="notte"]) .an-casa:not(.is-termica).is-ultima { background: var(--tema-ultima); }
:root[data-tema]:not([data-tema="notte"]) .an-casa:not(.is-termica).is-ultima[data-giudizio] { background: color-mix(in oklab, var(--g) 52%, transparent); }
:root[data-tema]:not([data-tema="notte"]) .an-casa:not(.is-termica).is-scelta { background: var(--tema-scelta); }
:root[data-tema]:not([data-tema="notte"]) .an-casa:not(.is-termica).is-scacco { background: var(--tema-scacco); }
:root[data-tema]:not([data-tema="notte"]) .an-casa:not(.is-termica) > .an-coord { color: var(--tema-coord-scura); }
:root[data-tema]:not([data-tema="notte"]) .an-casa:not(.is-termica).is-chiara > .an-coord { color: var(--tema-coord-chiara); }
:root[data-tema]:not([data-tema="notte"]) .an-bersaglio { background: var(--tema-bersaglio); }
:root[data-tema]:not([data-tema="notte"]) .an-bersaglio.is-presa { background: none; box-shadow: inset 0 0 0 4px var(--tema-bersaglio); }

/* ── col Nero in basso la scacchiera si gira tutta, immagine compresa. Conta solo per i temi che girati non sono
   uguali: danno la copia capovolta in --tema-scacchiera-girata, gli altri restano come sono ── */
:root[data-tema]:not([data-tema="notte"]) .sch.is-girata,
:root[data-tema]:not([data-tema="notte"]) .board.is-girata,
:root[data-tema]:not([data-tema="notte"]) .an-tavola.is-girata { background-image: var(--tema-scacchiera-girata, var(--tema-scacchiera)); }
:root[data-tema]:not([data-tema="notte"]) .an-tavola.is-variante.is-girata {
  background-image: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)), var(--tema-scacchiera-girata, var(--tema-scacchiera));
}

/* ── home: la scacchiera che gioca da sola ── */
:root[data-tema]:not([data-tema="notte"]) .scacchiera__caselle { background: var(--tema-scacchiera) 0 0 / 100% 100%; }
:root[data-tema]:not([data-tema="notte"]) .chess-square { background: transparent; }
:root[data-tema]:not([data-tema="notte"]) .chess-square.is-accesa { background: var(--tema-ultima); box-shadow: none; }

/* ── anteprime nelle impostazioni (giocatore.js): l'angolo in alto a sinistra, 2×2 case ── */
.tema__anteprima { background: repeating-conic-gradient(#292b31 0% 25%, #3f424d 0% 50%) 0 0 / 100% 100%; }
.tema__anteprima--marmo { background: url("../img/scacchiere/marmo.webp") 0 0 / 400% 400%; }
.tema__anteprima--ghiaccio { background: url("../img/scacchiere/ghiaccio.webp") 0 0 / 400% 400%; }
.tema__anteprima--lava { background: url("../img/scacchiere/lava.webp") 0 0 / 400% 400%; }
.tema__anteprima--cenere { background: url("../img/scacchiere/cenere.webp") 0 0 / 400% 400%; }
.tema__anteprima--roma { background: url("../img/scacchiere/mosaico.webp") 0 0 / 400% 400%; }