/* ghostlaps.css — **solo quello che il sito non ha già**.
 *
 * ── PERCHÉ ESISTE, E PERCHÉ È LUNGO COSÌ ────────────────────────────────────────────────────
 * L'aspetto di questa sezione è quello di magicstudio.eu: `assets/css/style.css` porta la
 * griglia, le schede, la tabella, i filtri, il riquadro vuoto, la paginazione. Fino al 5/09/2026
 * la sezione dei replay aveva un `css/site.css` suo, ed è esattamente il motivo per cui quelle
 * pagine sembravano di un altro sito; quel file è stato buttato, e questo non è la sua
 * riedizione.
 *
 * Qui ci sono **quattro cose che una classifica di tempi ha e una pagina del sito no**, e
 * ciascuna è di una riga o due. Quando una di queste servirà anche altrove, il posto giusto
 * diventa `style.css` e questo file si accorcia.
 *
 * Va caricato **dopo** il foglio del sito, e usa le sue variabili: nessun colore scritto a mano.
 */

/* Il quadratino del colore del telaio **dentro una cella di tabella**.
 *
 * `.pallino` del sito non va bene qui: è pensato per stare dentro un contenitore flex — il
 * titolo di un replay, la riga delle squadre — e uno `span` con una larghezza dentro una cella
 * di tabella semplicemente non si vede. Stessa forma e stesso filo di bordo, resi in linea. */
.colore {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 9px;
    vertical-align: -1px;
    border: 1px solid rgba(244, 237, 224, .22);
}

/* L'anteprima del circuito nella scheda.
 *
 * `.scheda > img` del sito è alta 320 px fisse con `object-fit: contain`, ed è la misura giusta
 * per una copertina quadrata; queste sono 480×293 e finirebbero in mezzo a due fasce nere. La
 * proporzione è quella dell'immagine, e la scheda la mostra intera. */
.scheda--pista > img { height: auto; aspect-ratio: 480 / 293; object-fit: cover; }

/* La riga del record dentro la scheda: il tempo è la cosa che si legge, il nome la seconda. */
.record { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.record .tempo { font-family: var(--display); font-size: 21px; color: var(--oro); flex: none; }
.record .chi { color: var(--testo-2); font-size: 15px;
               min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* L'anteprima della pista in cima alla sua classifica.
 *
 * È l'unica immagine della pagina e vale la pena vederla: larga quanto il contenuto ma non oltre
 * il doppio della sua misura vera, se no il ridimensionamento in su si nota. Il bordo è quello di
 * tutto il resto del sito. */
.pista { margin: 0 0 34px; max-width: 960px; border: 1px solid var(--bordo); }
.pista img { width: 100%; }

/* Le tre classi di una pista da kart, in cima alla classifica: sono link, non un menu a tendina.
 *
 * Sono tre e sono sempre le stesse — un `<select>` costerebbe due gesti per cambiare una cosa
 * che si cambia continuamente — e ciascuna ha un indirizzo suo, che è quello che si condivide. */
.classi { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.classi a {
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 9px 16px;
    border: 1px solid var(--bordo);
    color: var(--muto);
}
.classi a:hover { border-color: var(--bordo-forte); color: var(--oro); }
.classi a[aria-current] { background: var(--oro); border-color: var(--oro); color: var(--superficie); }

/* La riga che spiega perche' non c'e' un lettore, sulla pagina di un giro.
 *
 * `.sub` del sito vive solo dentro `.archivio-testata`, e qui siamo nel corpo della pagina: una
 * riga di prosa in mezzo ai riquadri ha bisogno d'aria sopra e di una larghezza da leggere. */
.nota-giro { margin: 30px 0 0; color: var(--muto); max-width: 640px; }

/* La riga di chi sta guardando, nella classifica: la si ritrova scorrendo.
 *
 * Un fondo appena acceso e non un bordo: in una tabella un bordo in più sposta di un pixel tutte
 * le righe sotto, e si vede. Chi sia «chi guarda» lo decide l'impronta del suo indirizzo, la
 * stessa cosa che il gioco chiama `ServerGhostLap.isMine`. */
.tabella tbody tr.mio td { background: rgba(240, 180, 0, .06); }
.tabella tbody tr.mio td:first-child { box-shadow: inset 2px 0 0 var(--oro); }