/* ===== LA PARTITA DAL VIVO: I COMPONENTI CHE CONSUMANO IL MOTORE =====
 *
 * Il foglio del dominio interfaccia-motore. Qui stanno solo i componenti che
 * disegnano stato del motore in diretta o l'aggregato che ne resta: il campo
 * sotto le mappe, e — quando arriveranno i token — la mappa di calore, i
 * vettori dei tiri, le barre della pressione.
 *
 * ZERO COLORI SCRITTI A MANO. Non e' rigore per il rigore: i tre ratchet di
 * coerenza visiva (`node tools/check-size.mjs`) sono al tetto con margine
 * zero, e scendono soltanto. Un colore letterale qui dentro fa rosso il gate
 * per tutti. Vale anche per i raggi: il tetto dei raggi scritti a mano e'
 * zero, e zero vuol dire zero.
 *
 * IL CAMPO E' MONDO. Non e' una tua decisione (lime), non sei tu (azzurro),
 * non e' quello che il club ti chiede (arancione): e' il racconto di cos'e'
 * successo. Nessun rango di colore — la regola sta in css/components.css,
 * sotto "RANGHI DI COLORE". */

/* Il riquadro: larghezza fluida, altezza dal rapporto vero del campo
 * (105x68). Il viewBox e' in metri, quindi preserveAspectRatio fa tutto e qui
 * non serve nessun calcolo di altezza. */
.pv-campo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
}

/* Il manto e' VERDE, ed e' una correzione: l'avevo fatto scuro sostenendo che
 * un prato saturo si sarebbe mangiato la scala di calore. Sbagliavo su due
 * fronti. Il render approvato dall'utente ha il campo verde e se ne serve come
 * legenda — "campo verde = li non ha toccato palla" — e le sei fermate della
 * scala hanno un ALFA proprio perche' il prato traspaia sotto i valori bassi.
 * Con un fondo scuro quell'alfa non avrebbe senso.
 * Conseguenza da non perdere: tutta l'analisi di contrasto che avevo fatto era
 * contro il fondo sbagliato, e va rifatta su questo.
 *
 * I quattro token li scrive interfaccia in tokens.css; qui si referenziano e
 * basta, per non essere in due a scrivere lo stesso file. Da NON riusare:
 * --pitch-500 e' primitivo e non va toccato dai componenti, e --field-accent
 * e' gia' impegnato dalla zona Conference in classifica — ritoccare quel verde
 * cambierebbe anche il colore del campo, e viceversa. */
.pv-fuori { fill: var(--map-pitch-out, transparent); }
.pv-fascia-a { fill: var(--map-pitch-a, transparent); }
.pv-fascia-b { fill: var(--map-pitch-b, transparent); }

/* Le linee sono bianche col loro token, non un grigio da bordo: sul manto
 * verde un grigio scuro sparisce. L'opacita' fa il lavoro che su fondo scuro
 * faceva un colore spento, e non conta come colore scritto a mano.
 * Lo spessore e' in unita' del viewBox, cioe' in METRI: 0,25 sono venticinque
 * centimetri, la larghezza vera di una riga di gesso. Devono dire "qui c'e'
 * l'area di rigore" a chi le cerca, e sparire per chi guarda le macchie. */
.pv-linee {
  stroke: var(--map-pitch-line, transparent);
  stroke-opacity: .65;
  stroke-width: .25;
}

/* Dischetti e punto di centro: gli stessi della riga, pieni. */
.pv-segni {
  fill: var(--map-pitch-line, transparent);
  fill-opacity: .65;
}

/* Le porte, piene invece che semitrasparenti: sono il riferimento che serve
 * alla mappa dei tiri, dove ogni vettore finisce sulla linea di fondo. */
.pv-porte {
  stroke: var(--map-pitch-line, transparent);
  stroke-width: .45;
}

/* ---- la mappa di calore -------------------------------------------------
 * Nessuna regola di colore qui dentro: la scala non e' piu' fatta di sette
 * gradini con una classe ciascuno, e' un campo continuo disegnato in canvas
 * (js/ui-partita-calore.js) che entra come <image>. I sei colori restano
 * token in tokens.css — sono colori, e sono di interfaccia — e il renderer li
 * legge con getComputedStyle. Posizioni, soglia, gradino e gamma no: quelli
 * sono la CURVA e stanno nel renderer, dove nessuno li scambia per tinte. */
.pv-calore image { image-rendering: auto; }

/* ---- la mappa dei tiri --------------------------------------------------
 * SPESSORE UNICO per tutte le frecce, per decisione dell'utente: il colore e'
 * l'unica cosa che distingue gol, parato e fuori. Non piu' spesso il gol —
 * xg non entra nel disegno del singolo tiro.
 * Sul manto verde le frecce devono STACCARE: 0,7 metri invece dei 0,5 che
 * bastavano su fondo scuro, dove una riga sottile reggeva e su un prato si
 * perde. Il tratteggio del "fuori" resta: e' l'unico segno che sopravvive a
 * chi non distingue i colori. */
.pv-tiro line { stroke-width: .7; }
.pv-tiro circle { stroke: none; }
.pv-tiro-gol line { stroke: var(--map-shot-goal, transparent); }
.pv-tiro-gol circle { fill: var(--map-shot-goal, transparent); }
.pv-tiro-parato line { stroke: var(--map-shot-saved, transparent); }
.pv-tiro-parato circle { fill: var(--map-shot-saved, transparent); }
.pv-tiro-fuori line { stroke: var(--map-shot-wide, transparent); stroke-dasharray: 1.5 1.2; }
.pv-tiro-fuori circle { fill: var(--map-shot-wide, transparent); }

/* ---- la curva di pressione ----------------------------------------------
 * DOVE VIVE, che e' una decisione dell'utente e non una scelta di layout: la
 * pressione e' un dato di SQUADRA e va con le statistiche di partita, mentre
 * la mappa di calore e quella dei tiri sono dati INDIVIDUALI e vanno con le
 * statistiche del giocatore. Non sono tre viste della stessa scheda: sono due
 * viste di una pagina e una di un'altra. Chi compone non le metta in fila.
 * La larghezza: quanto il riquadro di una mappa, o il doppio — cosi' calore e
 * tiri stanno affiancati sopra e la pressione larga sotto. L'altezza puo'
 * stare bassa, e' una striscia.
 *
 * preserveAspectRatio="none" di proposito: la curva si stira in larghezza per
 * riempire lo spazio che ha, e l'altezza la decide il CSS. Non e' una mappa,
 * non ha proporzioni da rispettare — il fondoscala e' dichiarato nel JS
 * (0,75, misurato) ed e' quello a rendere confrontabili due partite. */
.pv-pressione {
  display: block;
  width: 100%;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
}
/* Nessun token nuovo, per decisione di interfaccia: la barra in su e' la tua
 * squadra e usa --accent-player, quella in giu' e' l'avversaria e usa
 * --accent-energy, tutti e due gia' esistenti.
 * Nota di confine, registrata e non discussa oltre: avevo tolto io
 * --accent-player da questa vista, perche' l'azzurro e' il rango "te" e le
 * mappe sono mondo. Qui pero' la curva confronta DUE SQUADRE, e una delle due
 * sei tu: la palette e' di interfaccia e la sua lettura vale piu' della mia. */
.pv-pr-mia { fill: var(--accent-player); }
.pv-pr-loro { fill: var(--accent-energy); }

/* non-scaling-stroke NON e' un vezzo, e va tenuto. Il riquadro e' 606x72 su un
 * viewBox 90x30: la scala e' 6,73 in orizzontale contro 2,40 in verticale, e
 * senza questa riga lo stesso stroke-width renderebbe QUATTRO VOLTE piu' spesso
 * sulle linee verticali che su quelle orizzontali — e cambierebbe peso a ogni
 * larghezza diversa del pannello. Un grafico i cui tratti cambiano spessore
 * quando ridimensioni la finestra non e' disegnato, e' capitato.
 * Misurato in un browser vero, non dedotto: le rette qui sotto sono in pixel,
 * non in unita' del viewBox. */
.pv-pressione line { vector-effect: non-scaling-stroke; }
.pv-pr-asse { stroke: var(--border-default); stroke-width: 1; }
/* I gol come pallini sull'asse. Sono linee di lunghezza zero con capo tondo
 * (vedi golHtml): lo stroke-width e' il DIAMETRO in pixel, non un raggio in
 * unita' del viewBox, e con non-scaling-stroke resta tondo a ogni larghezza.
 * Un <circle> qui verrebbe un'ellisse, perche' la scala orizzontale e' quasi
 * tre volte quella verticale. */
/* I PALLONI DEI GOL, sovrapposti al grafico e non dentro di lui: l'SVG ha
 * preserveAspectRatio="none" e li schiaccerebbe. Posizionati in percentuale
 * sul minuto, centrati sull'asse.
 * Tredici pixel e' il compromesso: piu' piccoli non si leggono, piu' grandi
 * coprono le barre sotto — cioe' il contesto per cui il segno sta li'. */
.pv-pr-wrap { position: relative; }
.pv-gol {
  position: absolute; top: 50%; left: 0;
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  line-height: 0; pointer-events: none;
}
.pv-gol svg { display: block; width: 100%; height: 100%; }
.pv-gol-corpo { stroke: var(--ink-1000); stroke-width: .9; }
/* le facce: scure sul colore della squadra, e non riempite — a questa misura
 * un pentagono pieno chiude il pallone e torna a essere un pallino */
.pv-gol-facce { fill: none; stroke: var(--ink-1000); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }
.pv-gol-mio .pv-gol-corpo { fill: var(--accent-player); }
.pv-gol-loro .pv-gol-corpo { fill: var(--accent-energy); }

/* Lo stato vuoto: una partita su tante ha zero tiri, e chi non e sceso in
 * campo non ha mappa. Una frase dice cos'e successo; un campo vuoto senza
 * spiegazione sembra un errore di caricamento. */
.pv-vuoto {
  margin: 0;
  padding: var(--space-5) var(--space-4);
  text-align: center;
  color: var(--text-muted);
}
/* ---- la mappa 2D mentre la partita scorre -----------------------------
 * Una finestra corta di tocchi resta nel flusso della diretta: il campo non
 * diventa un archivio e l'azione si legge senza dover fermare il cronometro.
 * Colori e significati riusano i token gia' dichiarati per te e l'avversario. */
.pv-live-map:empty { display: none; }
.pv-live-map { width: min(var(--measure-text), 100%); margin-top: var(--space-4); flex: none; }
.pv-live-momentum:empty { display: none; }
.pv-live-momentum { width: min(var(--measure-text), 100%); margin-top: var(--space-3); }
.pv-live-scena { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.pv-live-campo { display: block; width: auto; height: min(38vh, 330px); max-width: 100%; }
.pv-live-palla { fill: var(--text-primary); stroke: var(--surface-inset); stroke-width: .35; }
.pv-live-palla { transition-property: transform; transition-timing-function: linear; }
.pv-live-scia { fill: none; stroke: var(--accent-player); stroke-width: .8; stroke-linecap: round; stroke-dasharray: 1; }
.pv-live-scia[data-lato="avversario"] { stroke: var(--accent-energy); }
.pv-live-didascalia { position:absolute; inset:auto var(--space-2) var(--space-2) auto; display:flex; align-items:center; gap:var(--space-1); padding:var(--space-1) var(--space-2); background:color-mix(in srgb, var(--surface-inset) 88%, transparent); color:var(--text-primary); font-size:var(--type-nota); }
.pv-live-didascalia i { align-self: stretch; width: 3px; background: var(--accent-player); }
.pv-live-didascalia i[data-lato="avversario"] { background: var(--accent-energy); }
.pv-live-didascalia span { display: grid; gap: 1px; }
.pv-live-didascalia b { font: inherit; font-weight: 700; }
.pv-live-didascalia time { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---- le statistiche di squadra durante la partita, stile sofascore -----
 * Richiesta dell'utente (10 settembre), sotto la pressione: stessa coppia di
 * token della curva qui sopra, mai un colore nuovo — mia squadra/avversaria
 * e' sempre --accent-player/--accent-energy in questo file. */
.pv-live-stats:empty { display: none; }
/* serve davvero: senza, [hidden] perde contro il display:flex qui sotto */
.pv-live-stats[hidden] { display: none; }
.pv-live-stats { width: min(var(--measure-text), 100%); margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.pvs-row { display: grid; grid-template-columns: 2.6em 1fr 2.6em; align-items: center; gap: var(--space-2); font-size: var(--type-nota); }
.pvs-v { font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.pvs-v.pvs-a { color: var(--accent-player); } .pvs-v.pvs-b { color: var(--accent-energy); }
.pvs-k { grid-row: 1; grid-column: 2; text-align: center; color: var(--text-muted); }
.pvs-bar { grid-column: 1 / -1; display: flex; height: 4px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-inset); }
.pvs-bar .pvs-a { background: var(--accent-player); height: 100%; }
.pvs-bar .pvs-b { flex: 1; background: var(--accent-energy); height: 100%; }

/* Su schermo piccolo le linee si assottigliano visivamente insieme al campo,
 * perche' lo spessore e' in metri e scala col viewBox. Sotto una certa
 * larghezza sparirebbero: qui si ingrossano per compensare. La soglia e'
 * quella oltre cui il campo scende sotto i ~320px di larghezza reale. */
@media (max-width: 420px) {
  .pv-linee { stroke-width: .4; }
  .pv-porte { stroke-width: .6; }
}

/* IL GESTO DEVE VEDERSI, e non e' la stessa cosa che esserci. Il verdetto di una
 * gara vera e' alto 943 px su un 1280x800 e 1339 su un telefono 390x844: il solo
 * controllo della schermata, «Continua», finiva 92 px e 445 px SOTTO la piega —
 * non a meta', del tutto fuori. Scorrere funzionava (.transition-result e' in
 * overflow auto), ma niente diceva che sotto ci fosse altro, e un gioco che
 * aspetta un gesto invisibile sembra bloccato. Il bottone ha gia' un fondo pieno
 * suo, quindi basta tenerlo agganciato in fondo al riquadro. Nel vivaio il
 * verdetto e' corto (712 px) e ci stava: questa regola li' non cambia niente.
 * La regola base di .transition-continue resta in components.css, che non e'
 * mio: qui c'e' solo il vincolo che nasce dalla scena della partita. */
.fine-box .transition-continue { position: sticky; bottom: 6px; }

/* LA SCHEDA GIOCATORE E' SCESA SOTTO LA CRONACA (richiesta del 3 settembre: «le
 * azioni live sopra le info calciatore, la cronologia partita sopra»). Uscendo da
 * .tabellone perde il suo contenitore stretto e prende tutta la larghezza: 1228 px
 * accanto a una cronaca da 620, una fascia sparsa che attraversa lo schermo. Qui
 * torna alla misura del testo, allineata alla cronaca. */
.hud-top > .you { width: min(var(--measure-text), 100%); }