/*
 * fwr-player.css — l'aspetto del widget.
 *
 * Tutto sotto `.fwr`, e nessuna regola sugli elementi nudi: il player finisce dentro pagine che
 * non sono sue e non deve tingere quello che ci sta intorno. I colori stanno in variabili, così
 * chi lo incorpora può ritingerlo senza toccare una riga di questo file:
 *
 *   .fwr { --fwr-accent: #d4a017; }
 */

/*
 * **L'altezza la decide il widget, e viene dalla larghezza.**
 *
 * Il campo e' 16:9 — lo impone `resize()` in `fwr-player.js`, che scrive l'altezza sullo stage —
 * e l'altezza del widget e' quella del suo contenuto: barra piu' campo piu' comandi. Chi ospita
 * decide quanto largo, e la forma esce da li'.
 *
 * Prima c'era `height: 100%`, cioe' l'altezza la dava il contenitore. Funzionava finche' il
 * contenitore un'altezza ce l'aveva: bastava una regola sbagliata di la' — o un foglio vecchio
 * ancora in cache — perche' lo stage venisse alto zero e il campo sparisse. Una proporzione che
 * il widget promette non puo' dipendere da un foglio che il widget non controlla.
 */
.fwr {
    height: auto;
    box-sizing: border-box;

    /* **Il widget si misura da sé, non dalla finestra.** Le regole strette qui sotto stanno in
       `@container` e non in `@media` perché quello che le fa scattare è **quanto è largo il
       widget**, non quanto è largo lo schermo: incorporato in una colonna da 400 pixel su un
       monitor grande ha gli stessi problemi che ha su un telefono, e con una media query non se
       ne accorgerebbe nessuno. Un browser che non conosce le container query salta quelle regole
       e resta al disegno largo — che è come stava prima, non peggio. */
    container-type: inline-size;
    container-name: fwr;

    --fwr-bg: #14181c;
    --fwr-panel: #1b2126;
    --fwr-ink: #e8edf1;
    --fwr-dim: #93a0aa;
    --fwr-line: #2a333a;
    --fwr-accent: #4ea3ff;

    display: flex;
    flex-direction: column;
    background: var(--fwr-bg);
    color: var(--fwr-ink);
    border: 1px solid var(--fwr-line);
    border-radius: 10px;
    overflow: hidden;
    font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
    outline: none;
}

.fwr:focus-visible {
    box-shadow: 0 0 0 2px var(--fwr-accent);
}

/* ── intestazione ─────────────────────────────────────────────────────────────────────── */

.fwr-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--fwr-panel);
    border-bottom: 1px solid var(--fwr-line);
    min-height: 20px;
}

.fwr-badge {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--fwr-line);
    flex: none;
}

.fwr-team {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30%;
}

.fwr-team--home { text-align: right; flex: 1; }
.fwr-team--away { text-align: left; flex: 1; }

.fwr-score {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex: none;
}

.fwr-meta {
    margin-left: auto;
    color: var(--fwr-dim);
    font-size: 12px;
    white-space: nowrap;
}

/* ── campo ────────────────────────────────────────────────────────────────────────────── */

.fwr-stage {
    position: relative;

    /* **`flex: none`**: l'altezza gliela scrive `resize()`, e un `flex: 1` la sovrascriverebbe
       stirando lo stage su quello che avanza nel widget. Con `none` il valore in linea comanda.

       `aspect-ratio` come rete: e' quello che tiene la forma nei millisecondi fra il primo
       disegno della pagina e la prima passata di `resize()`, e in quel momento il campo e' gia'
       della forma giusta invece di saltare. */
    flex: none;
    aspect-ratio: 16 / 9;
    min-height: 0;
    background: #10140f;
}

/* **Su una colonna stretta il campo si alza.** A 360 pixel di larghezza un 16:9 è alto duecento,
   e i giocatori vengono grandi come una virgola. Il quattro-terzi ne dà settanta in più senza
   mangiarsi la pagina, ed è la stessa soglia che usa `resize()` in `fwr-player.js` — questa qui
   è quella che vale nei millisecondi prima che il JavaScript scriva l'altezza vera.

   Si vede meno campo in larghezza, ed è voluto: la camera segue la palla, e su uno schermo
   piccolo conta più distinguere chi tira che vedere la fascia opposta. Il pulsante dello zoom
   allarga per chi la vuole. */
@container fwr (max-width: 560px) {
    .fwr-stage { aspect-ratio: 4 / 3; }
}

.fwr-canvas {
    display: block;

    /* Niente `min-height`: c'era 160px, e su una colonna stretta avrebbe tenuto il canvas piu'
       alto dello stage, cioe' rotto il 16:9 proprio dove si nota di piu'. */
    min-height: 0;
    width: 100%;
    height: 100%;
}

/*
 * **`hidden` da solo non basta a nascondere questi due.**
 *
 * L'attributo `hidden` è `display: none` scritto nel foglio dello user-agent, cioè a specificità
 * zero: una regola di classe che dice `display: flex` lo scavalca, e il pannello resta a video.
 * Con uno sfondo opaco al 92% steso su `inset: 0` il risultato è un campo che sembra buio, senza
 * niente di sbagliato nel disegno — è costato mezz'ora di misure sui pixel per capirlo.
 *
 * Quindi: lo stato di partenza è **nascosto**, e il `display` vero si dà solo quando `hidden` non
 * c'è.
 */
.fwr-warn,
.fwr-error { display: none; }

.fwr-warn:not([hidden]) { display: block; }

.fwr-error:not([hidden]) { display: flex; }

.fwr-warn {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(20, 24, 28, 0.9);
    border: 1px solid var(--fwr-line);
    color: #ffd79a;
    font-size: 12px;
}

.fwr-error {
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 24px;
    text-align: center;
    color: #ffb4b4;
    background: rgba(20, 24, 28, 0.92);
}

/* ── comandi ──────────────────────────────────────────────────────────────────────────── */

.fwr-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--fwr-panel);
    border-top: 1px solid var(--fwr-line);
}

.fwr-btn {
    flex: none;
    min-width: 32px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--fwr-line);
    border-radius: 6px;
    background: #232b31;
    color: var(--fwr-ink);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* Stessa lezione dei due pannelli: se un giorno una regola desse un `display` ai bottoni,
   `hidden` smetterebbe di funzionare. Meglio dirlo adesso che scoprirlo davanti a un campo buio. */
.fwr-btn[hidden] { display: none; }

.fwr-btn:disabled { opacity: 0.45; cursor: default; }

.fwr-btn:hover:not(:disabled) { background: #2b343b; }
.fwr-btn:active:not(:disabled) { transform: translateY(1px); }

.fwr-btn.fwr-on {
    border-color: var(--fwr-accent);
    color: var(--fwr-accent);
}

.fwr-time {
    flex: none;
    color: var(--fwr-dim);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    min-width: 96px;
    text-align: center;
}

.fwr-scrub {
    flex: 1;
    min-width: 80px;
    accent-color: var(--fwr-accent);
    cursor: pointer;
}

/* Le due voci del formato, che compaiono di fianco al pulsante quando lo si preme. Non sono un
   menu a tendina: sono due, e due voci in una tendina costano più di due pulsanti che compaiono.
   `flex: none` perché non partecipino alla divisione dello spazio della fila. */
.fwr-formati { display: flex; gap: 6px; flex: none; }

/* Mentre prepara, il pulsante conta la percentuale: la larghezza minima gli impedisce di
   allargarsi e restringersi a ogni cifra, che fa saltellare tutta la fila. */
.fwr-download { min-width: 74px; }

/* Finché non c'è un replay i comandi non servono a niente: si vede che sono spenti. */
.fwr:not(.fwr--loaded) .fwr-controls { opacity: 0.4; pointer-events: none; }

/* ── stretto ──────────────────────────────────────────────────────────────────────────────
 *
 * Sotto i 560 pixel di **larghezza del widget** — un telefono in verticale, o una colonna
 * stretta — il disegno largo non regge: la barra ha cinque cose su una riga e la fila dei
 * comandi ne ha nove, e a schiacciarle tutte non se ne legge nessuna.
 *
 * Non si toglie niente. Si manda a capo, e si ingrandisce quello che va toccato con un dito.
 */
@container fwr (max-width: 560px) {

    /* La barra su due righe: le squadre col punteggio in mezzo, e sotto il resto.
       **Il `meta` era il colpevole**: `nowrap` e `margin-left: auto`, cioè una riga che non si
       spezza e si prende tutto lo spazio che trova — «Gol · 2° tempo · 78′ · 5/9/2026 · PC»
       lasciava ai due nomi una manciata di pixel e tre puntini. */
    .fwr-bar { flex-wrap: wrap; row-gap: 4px; padding: 8px 10px; }

    /* Senza il tetto del 30% i nomi si prendono quello che c'è davvero. */
    .fwr-team { max-width: none; }

    .fwr-meta {
        flex: 1 0 100%;
        margin-left: 0;
        text-align: center;
        white-space: normal;
        line-height: 1.3;
    }

    /* I comandi: la barra di scorrimento su una riga sua **in cima**, dove il pollice la trova
       senza coprire i pulsanti, e sotto i pulsanti in una griglia che va a capo da sé. */
    .fwr-controls { flex-wrap: wrap; gap: 6px; padding: 8px 10px 10px; }

    .fwr-scrub {
        flex: 1 0 100%;
        order: -1;

        /* Un cursore da toccare, non da puntare: la traccia resta sottile, è l'area sensibile
           che cresce. */
        height: 26px;
        margin: 0;
    }

    /* Quarantaquattro per quaranta: la misura sotto la quale un dito sbaglia bersaglio. */
    .fwr-btn {
        min-width: 44px;
        height: 40px;
        padding: 0 12px;
        font-size: 14px;
    }

    /* Il tempo non è un pulsante e non serve che tenga la sua colonna: si stringe e lascia
       spazio a chi si tocca. */
    .fwr-time { min-width: 0; flex: 1 1 auto; text-align: left; }

    /* Le due voci del formato restano attaccate al pulsante che le ha aperte anche quando la
       fila va a capo. */
    .fwr-formati { order: 1; }
    .fwr-download { order: 1; }
}