/* Scacchi contro Stockfish: lo stile di base (colori, testata, pulsanti) è in ../comune/base.css.
   Caselle nei colori classici crema e verde (spec §7): con le caselle grigio-blu i pezzi neri
   sulle scure avevano contrasto 1,87:1, sotto il minimo di 3:1. */
:root {
  --casella-chiara: #eeeed2;
  --casella-scura: #769656;
  --scacco: #e05c54;
  --lato: min(calc(100vw - 48px), 560px); /* principale.js lo riscrive con la misura vera */
}

main, footer, .testata { max-width: 1000px; }

.avviso { color: var(--tenue); text-align: center; margin: 48px 0; }
#errore-motore { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#errore-motore p { margin: 0; }
.disattivato { opacity: 0.4; pointer-events: none; }

#contenuto { display: grid; gap: 20px; justify-content: center; }
.colonna-scacchiera { display: grid; gap: 8px; justify-items: center; }

/* ---- barra di valutazione: orizzontale sul telefono, verticale accanto alla scacchiera ---- */
#barra {
  --bianco: 50%;
  position: relative;
  width: var(--lato);
  height: 18px;
  background: #0b0c0e;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.riempimento { position: absolute; inset: 0 auto 0 0; width: var(--bianco); background: var(--testo); }
#barra.girata .riempimento { inset: 0 0 0 auto; }
.punteggio {
  position: relative;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--tenue);
  mix-blend-mode: difference; /* leggibile sia sulla parte bianca sia su quella nera */
}

/* ---- scacchiera e coordinate ---- */
.tavolo {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "traverse campo" ".        file";
  gap: 2px 4px;
}
.traverse { grid-area: traverse; display: grid; grid-template-rows: repeat(8, minmax(0, 1fr)); }
.file { grid-area: file; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.traverse span, .file span {
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

.campo { grid-area: campo; position: relative; width: var(--lato); }
.scacchiera {
  display: grid;
  /* minmax(0, 1fr) e non 1fr: 1fr vale minmax(auto, 1fr), e allora le celle si allargano
     fino alla dimensione intrinseca dei pezzi (45x45, e 300x150 per i due re, che non
     hanno width/height nell'SVG) invece di restare un ottavo del lato.
     Le righe vanno dichiarate: altrimenti sono implicite e si misurano sul contenuto. */
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  touch-action: none; /* il trascinamento non deve far scorrere la pagina */
}

.scacchiera button {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--casella-scura);
  display: grid;
  place-items: center;
}
.scacchiera button.chiara { background: var(--casella-chiara); }
.scacchiera button:hover { border: 0; }
.scacchiera button:focus-visible { outline: 2px solid var(--accento); outline-offset: -3px; }
.scacchiera button[aria-disabled="true"] { cursor: default; }

/* Due strati indipendenti: lo sfondo dell'evidenziazione sotto il pezzo, il puntino sopra.
   Separati perché si sommano: ultima mossa e destinazione possono capitare sulla stessa casella. */
.scacchiera button::before, .scacchiera button::after { content: ""; position: absolute; inset: 0; }
.scacchiera button::before { z-index: 0; }
.scacchiera button::after { z-index: 2; }

.ultima::before { background: rgba(61, 220, 132, 0.18); }
.selezionata::before { background: rgba(61, 220, 132, 0.34); }
.scacco::before { background: radial-gradient(circle, var(--scacco) 0%, rgba(224, 92, 84, 0.45) 55%, transparent 75%); }
.destinazione::after { background: radial-gradient(circle at center, rgba(16, 17, 20, 0.4) 0 15%, transparent 16%); }
.presa::after { background: radial-gradient(circle at center, transparent 0 60%, rgba(16, 17, 20, 0.4) 61% 76%, transparent 77%); }

.pezzo {
  display: block;
  width: 100%;
  height: 100%;
  /* contain e non riempimento: i due re hanno solo il viewBox, e senza questo verrebbero
     stirati al rapporto predefinito dell'immagine invece di restare quadrati. */
  object-fit: contain;
  position: relative;
  z-index: 1;
  pointer-events: none; /* l'immagine sotto il dito non deve coprire la casella d'arrivo */
}
.pezzo.trascinato { z-index: 3; }

/* Freccia del suggerimento, in coordinate 0–8 sopra la scacchiera */
.freccia {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.freccia line { stroke: var(--accento); stroke-width: 0.16; stroke-linecap: round; opacity: 0.85; }
.freccia path { fill: var(--accento); opacity: 0.85; }

/* ---- pannelli sopra la scacchiera ---- */
#promozione, #fine {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: rgba(16, 17, 20, 0.88);
  border-radius: 4px;
  text-align: center;
}
#promozione p, #fine p { margin: 0; }
#testo-fine { font-size: 1.2rem; font-weight: 700; }
#promozione .pezzi { display: flex; gap: 8px; }
#promozione .pezzi button { width: 56px; height: 56px; padding: 4px; }
#promozione .pezzi img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---- pannello di destra ---- */
.pannello { display: grid; gap: 12px; align-content: start; min-width: 240px; }
#stato { margin: 0; min-height: 1.4rem; font-weight: 600; }
#navigazione { display: flex; gap: 6px; }
#navigazione button { padding: 6px 12px; font-size: 0.9rem; }
.azioni { display: flex; gap: 8px; flex-wrap: wrap; }
.azioni.sinistra { justify-content: flex-start; }
button:disabled, button:disabled:hover { opacity: 0.45; cursor: default; border-color: var(--bordo); }

#pannello-nuova {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: 10px;
  justify-items: start;
}
#pannello-nuova label { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
#pannello-nuova span { color: var(--tenue); font-size: 0.9rem; }

#mosse {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
  font-variant-numeric: tabular-nums;
}
#mosse li { display: grid; grid-template-columns: 2.2rem minmax(0, 6rem) minmax(0, 6rem); align-items: center; gap: 4px; }
#mosse .numero { color: var(--tenue); font-size: 0.85rem; text-align: right; }
#mosse button {
  padding: 2px 6px;
  text-align: left;
  background: none;
  border-color: transparent;
  border-radius: 4px;
  font-size: 0.9rem;
}
#mosse button:hover { border-color: var(--bordo); }
#mosse button[aria-current="true"] { border-color: var(--accento); color: var(--accento); }

#pgn { width: 100%; font: 0.8rem/1.4 ui-monospace, monospace; color: var(--testo); background: var(--superficie); border: 1px solid var(--bordo); border-radius: 8px; padding: 8px; }

footer { margin: 24px auto 0; padding: 0 16px 24px; color: var(--tenue); font-size: 0.8rem; }
footer p { margin: 2px 0; }
footer a { color: var(--tenue); }

/* ---- due colonne: schermi larghi o telefono in orizzontale (stessa condizione in principale.js) ---- */
@media (min-width: 760px), (orientation: landscape) and (min-width: 560px) {
  #contenuto { grid-template-columns: auto minmax(240px, 1fr); gap: 28px; align-items: start; }
  .colonna-scacchiera { grid-template-columns: auto auto; align-items: start; gap: 10px; }
  #barra {
    width: 18px;
    height: var(--lato);
    margin-top: 0;
  }
  .riempimento { inset: auto 0 0 0; width: auto; height: var(--bianco); }
  #barra.girata .riempimento { inset: 0 0 auto 0; }
  .punteggio { writing-mode: vertical-rl; }
}

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .testata { padding: 6px 16px; }
  h1 { font-size: 0.95rem; }
  main { padding-bottom: 8px; }
  #mosse { max-height: 160px; }
}