/* ============================================================
   PronoCarpi — Tema "Curva Rossa" (v2.0.1)
   Identità Carpi: rosso smorzato #b4172e, accenti oro, card bianche
   su fondo neutro, look moderno da prodotto sportivo.
   ============================================================ */

:root {
    --color-primary:       #b4172e;   /* rosso Carpi smorzato: link, azioni */
    --color-primary-dark:  #8c1023;   /* rosso scuro: hover, fine gradiente */
    --color-primary-light: #c52a40;   /* rosso chiaro: inizio gradiente header */
    --color-accent:        #d99c00;   /* oro: evidenziazioni rare */
    --color-dark:          #1a1d21;   /* scuro: footer, barra admin */
    --color-bg:            #f4f5f7;   /* sfondo pagina neutro */
    --color-surface:       #ffffff;   /* superfici strutturali */
    --color-panel:         #f6f7f9;   /* righe alternate, card bloccate */
    --color-card:          #ffffff;   /* card bianche */
    --color-card-border:   #e6e8ec;   /* bordo card neutro */
    --color-text:          #1a1d21;   /* testo quasi nero */
    --color-text-muted:    #5f6670;   /* testo secondario */
    --color-border:        #e6e8ec;   /* bordi grigio chiaro */
    --color-success:       #2f7d32;
    --color-error:         #c0392b;
    --color-info:          #1f5fa8;   /* blu: azioni informative (es. tabellone) */
    --color-info-dark:     #184c85;   /* blu scuro: hover */
    --color-success-bg:    #eaf5ea;
    --color-error-bg:      #fdedec;
    --radius:              10px;      /* angoli morbidi */
    --shadow-sm:           0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 6px rgba(16, 24, 40, 0.05);
    --shadow:              0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.06);
    --max-width:           1100px;
    --font:                -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ─── Reset minimo ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
    font-family: var(--font);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.55;
    font-size: 1rem;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ─── Container ───────────────────────────────────────────── */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ─── Header ──────────────────────────────────────────────── */
/* Header rosso pieno con gradiente: l'identità Carpi protagonista. */
.site-header {
    background: linear-gradient(135deg,
        var(--color-primary-light) 0%,
        var(--color-primary) 45%,
        var(--color-primary-dark) 100%);
    color: #fff;
    padding: 0.65rem 0;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
/* Logo: icona del tris in versione negativa + wordmark bianco. */
.site-header .logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.site-header .logo img {
    height: 36px;
    width: auto;
    display: block;
}
.site-header .logo .logo__name {
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
}
.site-header .logo:hover { text-decoration: none; }
.site-header nav a {
    color: rgba(255, 255, 255, 0.88);
    margin-left: 0.15rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.site-header nav a:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    text-decoration: none;
}
.site-header nav .nav-user {
    color: #fff;
    font-weight: 700;
    margin-left: 0.6rem;
    padding-left: 0.9rem;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.9rem;
}
/* Logout: form POST reso visivamente come gli altri link della nav */
.site-header nav .nav-logout { display: inline; margin: 0; }
.site-header nav .nav-logout button {
    background: none;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    margin-left: 0.15rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.site-header nav .nav-logout button:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    text-decoration: none;
}

/* Pulsante "hamburger": raggruppa le voci del menu. Serve solo su
   smartphone; su desktop la barra di navigazione è sempre distesa. */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 38px;
    padding: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s, top 0.2s, background 0.2s;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; left: 0; top: -6px; }
.nav-toggle__bars::after  { position: absolute; left: 0; top: 6px; }
/* Aperto: le tre righe si trasformano in una "X". */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

/* ─── Contenuto principale ────────────────────────────────── */
.main-content {
    padding: 2rem 0 3rem;
    min-height: calc(100vh - 120px);
}

/* ─── Footer ──────────────────────────────────────────────── */
.site-footer {
    background: var(--color-dark);
    padding: 1.2rem 0;
    text-align: center;
    color: #8a9099;
    font-size: 0.85rem;
}
.site-footer a { color: #cfd3d9; }

/* ─── Alert / flash messages ─────────────────────────────── */
.alert {
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}
.alert--success { background: var(--color-success-bg); color: var(--color-success); border-left: 4px solid var(--color-success); }
.alert--error   { background: var(--color-error-bg);   color: var(--color-error);   border-left: 4px solid var(--color-error); }
.alert--info    { background: #fcebed;                  color: var(--color-primary-dark); border-left: 4px solid var(--color-primary); }

/* ─── Card ────────────────────────────────────────────────── */
.card {
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.card h2 { font-size: 1.1rem; margin-bottom: 0.5rem; }

/* ─── Hero (home) ─────────────────────────────────────────── */
.hero {
    text-align: center;
    padding: 2.5rem 0 2rem;
}
.hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}
.hero .lead {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    margin-bottom: 2.5rem;
}
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
    text-align: left;
}

/* ─── Pagine errore ───────────────────────────────────────── */
.error-page {
    text-align: center;
    padding: 4rem 1rem;
}
.error-page h1 {
    font-size: 2rem;
    color: var(--color-error);
    margin-bottom: 1rem;
}
.error-page a {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--color-primary);
    font-weight: 600;
}
.debug-info {
    text-align: left;
    background: #f8f9fa;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 1.5rem auto;
    max-width: 800px;
    font-size: 0.8rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ─── Form ────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.1rem; }
.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: var(--font);
    transition: border-color 0.15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(180, 23, 46, 0.15);
}

/* ─── Bottoni ─────────────────────────────────────────────── */
.btn {
    /* inline-flex: testo centrato e, soprattutto, sempre su UNA sola riga
       (white-space: nowrap) in ogni finestra, su desktop come su mobile. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    font-family: var(--font);
}
.btn:active { transform: translateY(1px); }
/* Messa a fuoco accessibile da tastiera, coerente con i campi del form. */
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.btn--primary   {
    background-color: var(--color-primary);
    color: #fff;
}
.btn--primary:hover { background-color: var(--color-primary-dark); text-decoration: none; }
/* Bottone secondario: bianco con bordo, sobrio. */
.btn--secondary {
    background-color: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn--secondary:hover { background-color: var(--color-panel); }

/* ─── Tabella classifiche ─────────────────────────────────── */
.table-responsive { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
thead th {
    background: var(--color-surface);
    color: var(--color-text-muted);
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--color-border);
}
tbody tr:nth-child(even) { background: var(--color-panel); }
tbody tr:hover { background: #fafbfc; }
tbody td { padding: 0.7rem 1rem; border-bottom: 1px solid #f0f1f3; }

/* ─── Box autenticazione ──────────────────────────────────── */
.auth-box {
    max-width: 400px;
    margin: 2rem auto;
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
}
.auth-box h1 {
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-bottom: 0.35rem;
    text-align: center;
}
.auth-hint {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
.btn--block {
    width: 100%;
    margin-top: 0.5rem;
}

/* ============================================================
   Area amministratore
   ============================================================ */

/* ─── Barra di navigazione admin ──────────────────────────── */
/* Barra scura: distingue subito il pannello dall'area giocatore. */
.admin-nav {
    background: var(--color-dark);
    color: #cfd3d9;
}
.admin-nav .container {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.admin-nav__title {
    font-weight: 800;
    color: var(--color-accent);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-right: 0.75rem;
}
.admin-nav a {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    color: #cfd3d9;
    font-size: 0.88rem;
    font-weight: 600;
}
.admin-nav a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; }
.admin-nav a.is-active { background: var(--color-primary); color: #fff; }
.admin-nav__exit {
    margin-left: auto;
    color: #8a9099 !important;
    font-weight: 600;
}
.admin-nav__exit:hover { color: #fff !important; }

/* ─── Titolo di sezione (separatore tra blocchi di una pagina) ─── */
.section-title {
    font-size: 1.15rem;
    color: var(--color-primary);
    margin: 1.6rem 0 0.8rem;
}

/* ─── Elenco amministratori "fissi" (badge con i nomi) ────────── */
.admin-fissi__group { margin-top: 0.8rem; }
.admin-fissi__group .badge { margin: 0.15rem 0.3rem 0.15rem 0; }

/* ─── Intestazione di pagina ──────────────────────────────── */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.page-head h1 {
    font-size: 1.5rem;
    color: var(--color-primary);
}
.page-head__sub {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* ─── Card statistiche (cruscotto) ────────────────────────── */
.stat-card { display: flex; flex-direction: column; align-items: flex-start; }
.stat-number {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.1;
}
.stat-card__desc { color: var(--color-text-muted); margin-bottom: 1rem; }
.stat-card .btn { margin-top: auto; }

/* ─── Card che contiene una tabella ───────────────────────── */
.table-card { padding: 0; overflow: hidden; }
.table-card table { font-size: 0.92rem; }
th.num, td.num { text-align: right; }
th.actions-col { width: 1%; white-space: nowrap; }

/* ─── Badge di stato ──────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.badge--bozza      { background: #eceff3; color: #5f6e80; }
.badge--attivo     { background: var(--color-success-bg); color: var(--color-success); }
.badge--concluso   { background: #fbe7ea; color: var(--color-primary-dark); }
.badge--archiviato { background: #f4ece0; color: #97712a; }

/* Stati di giornate e partite (programmata/aperta/chiusa/valutata in comune) */
.badge--in_pianificazione { background: #eceff3; color: #5f6e80; }
.badge--programmata { background: #eceff3; color: #5f6e80; }
.badge--aperta      { background: var(--color-success-bg); color: var(--color-success); }
.badge--chiusa      { background: #fbe7ea; color: var(--color-primary-dark); }
.badge--valutata    { background: #ede7f6; color: #5e35b1; }

/* Etichetta "esatto" nello storico del profilo */
.badge--terminata { background: var(--color-success-bg); color: var(--color-success); }

/* ─── Azioni in riga di tabella ───────────────────────────── */
/* I gruppi di pulsanti vanno a capo invece di sforare la colonna o forzare
   lo scroll orizzontale: utile dove le azioni sono molte (es. giornate). */
.actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.actions form { display: inline; margin: 0; }
.actions--wrap { flex-wrap: wrap; }

/* Utility: elemento nascosto (toggle via JS, senza stile inline). */
.is-hidden { display: none; }

/* ─── Bottoni: varianti aggiuntive ────────────────────────── */
.btn--small { padding: 0.32rem 0.8rem; font-size: 0.85rem; }
.btn--danger { background: var(--color-error); color: #fff; }
.btn--danger:hover { background: #a93226; text-decoration: none; }
.btn--info {
    background-color: var(--color-info);
    background-image: linear-gradient(rgba(255,255,255,0.15), rgba(255,255,255,0));
    color: #fff;
}
.btn--info:hover { background-color: var(--color-info-dark); background-image: none; color: #fff; text-decoration: none; }
.btn--accent { background: var(--color-accent); color: #3d2c00; }
.btn--accent:hover { background: #d9940a; text-decoration: none; }
/* Giallo acceso: pulsante "Inserisci risultati", per renderlo ben visibile. */
.btn--warning {
    background-color: #ffd21e;
    color: #3d2c00;
    font-weight: 700;
}
.btn--warning:hover { background-color: #f5c100; color: #3d2c00; text-decoration: none; }
/* Verde: pulsante "Partite" reso più evidente e distinto dalla gestione. */
.btn--success {
    background-color: var(--color-success);
    background-image: linear-gradient(rgba(255,255,255,0.15), rgba(255,255,255,0));
    color: #fff;
    font-weight: 700;
}
.btn--success:hover { background-color: #265f28; background-image: none; color: #fff; text-decoration: none; }

/* ─── Colonna "Partite" (staccata dalle azioni di gestione) ───── */
td.cell-partite { white-space: nowrap; }

/* ─── Classifica ──────────────────────────────────────────── */
.classifica-table td, .classifica-table th { vertical-align: middle; }
.classifica-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    background: #eceff3;
    color: var(--color-text-muted);
}
.classifica-pos--1 { background: #fff4cc; color: #8a6d00; }
.classifica-pos--2 { background: #eceff3; color: #5f6e80; }
.classifica-pos--3 { background: #f4ece0; color: #97712a; }
.classifica-table tr.is-me { background: var(--color-success-bg); }
.classifica-table tr.is-me td { font-weight: 600; }
.classifica-perpetua { margin-top: 2rem; }
.punti-ottenuti {
    margin-top: 0.3rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-success);
}

/* ─── Tabellone pronostici (le giocate di tutti) ──────────── */
.tabellone-table { width: 100%; border-collapse: collapse; }
.tabellone-table th,
.tabellone-table td {
    padding: 0.5rem 0.6rem;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.tabellone-table thead th {
    background: var(--color-panel);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.25;
}
.tabellone-table th.col-giocatore,
.tabellone-table td.col-giocatore { text-align: left; }
.tabellone-table tr.is-me { background: var(--color-success-bg); }
/* Risultato finale mostrato sotto le squadre, senza colorare la colonna. */
.col-squadre { display: block; white-space: nowrap; }
.col-finale__tag {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-success);
    white-space: nowrap;
}
.col-finale__score {
    display: inline-block;
    margin-left: 0.15rem;
    padding: 0.03rem 0.38rem;
    border-radius: 999px;
    background: var(--color-success);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}
.tab-cella__punti--zero { color: var(--color-text-muted); font-weight: 400; }
.tabellone-table .col-tot { font-weight: 700; }
.tab-cella {
    display: inline-block;
    min-width: 1.9rem;
    padding: 0.12rem 0.45rem;
    border-radius: var(--radius);
    line-height: 1.4;
}
/* Segno indovinato: verde. Risultato esatto indovinato: rosso. Entrambi grassetto. */
.tab-cella--ok     { background: var(--color-success-bg); color: var(--color-success); font-weight: 800; }
.tab-cella--esatto { background: var(--color-error-bg);   color: var(--color-error);   font-weight: 800; }
.tab-cella--parz   { background: #fbf3dd; color: #97712a; font-weight: 600; }
.tab-cella--no    { color: var(--color-text-muted); }
.tab-cella--neutro { color: var(--color-text); }
.tab-cella--vuota { color: #c9c9c9; }
.tab-cella sup { font-size: 0.7em; }
/* Riga di un giocatore che non ha ancora inserito i pronostici. */
.tabellone-table td.tab-non-inserito {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.85rem;
}
/* Corona del primo in classifica: accanto al nome del leader, ovunque compaia
   (tabelle classifica, podio, mini-classifica della bacheca). */
.corona-re {
    width: 1em;
    height: 1em;
    vertical-align: -0.14em;
    margin-left: 0.35em;
    flex: 0 0 auto;
}

.tabellone-legenda { margin-top: 0.8rem; font-size: 0.85rem; }
.tabellone-legenda .tab-cella { margin-right: 0.25rem; }
/* Pulsante +/- per espandere le giocate: serve solo su smartphone, dove la
   riga è una card collassabile. Su desktop la tabella è intera e va nascosto. */
.tab-toggle { display: none; }

/* ─── Form del pannello ───────────────────────────────────── */
.form-card { max-width: 680px; }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.muted { color: var(--color-text-muted); }
.alert ul { margin: 0.4rem 0 0 1.2rem; }
.alert li { font-size: 0.9rem; }
.form-hint {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-top: 0.3rem;
}
.form-card--wide { max-width: 760px; }

/* ─── Allineamento celle di tabella ───────────────────────── */
th.center, td.center { text-align: center; }
th.right,  td.right  { text-align: right; }

/* ─── Form pronostici (area giocatore) ────────────────────── */
.pronostici-form .form-actions { padding: 0.6rem 0 0; align-items: center; }
/* Pulsante "Vedi il tabellone": spinto a destra, alla stessa altezza di
   Salva pronostici e Annulla. */
.form-actions__tabellone { margin-left: auto; }

/* Lista di card: una partita per card, niente scroll orizzontale su mobile. */
.pronostici-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.match-card {
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius);
    background: #fff;
    padding: 0.7rem 0.85rem;
}
.match-card--locked { background: var(--color-panel); }
/* Partita valutata: card evidenziata con risultato finale. */
.match-card--valutata { border-color: var(--color-success); box-shadow: inset 3px 0 0 var(--color-success); }
.match-card__final-tag {
    display: inline-block;
    margin-right: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--color-success-bg);
    color: var(--color-success);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
/* Pop-up animato dei punti guadagnati su una partita valutata. */
.match-card__popup {
    align-self: center;
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    margin-left: auto;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    background: var(--color-success);
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 2px 7px rgba(45, 106, 47, 0.3);
    transform-origin: center;
    animation: popup-pop 0.45s cubic-bezier(0.18, 1.4, 0.5, 1) both,
               popup-glow 2.4s ease-in-out 0.5s infinite;
}
.match-card__popup--zero {
    background: #8a93a3;
    box-shadow: 0 2px 7px rgba(95, 110, 128, 0.28);
    animation: popup-pop 0.45s cubic-bezier(0.18, 1.4, 0.5, 1) both;
}
.match-card__popup-pts { font-size: 0.82rem; font-weight: 800; }
.match-card__popup-label { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }

@keyframes popup-pop {
    0%   { opacity: 0; transform: scale(0.4) translateY(8px); }
    70%  { opacity: 1; transform: scale(1.12) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes popup-glow {
    0%, 100% { transform: scale(1);    box-shadow: 0 2px 7px rgba(45, 106, 47, 0.3); }
    50%      { transform: scale(1.05); box-shadow: 0 4px 12px rgba(45, 106, 47, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
    .match-card__popup,
    .match-card__popup--zero { animation: popup-pop 0.3s ease both; }
}

/* Intestazione: squadre + stato della partita. */
.match-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.match-card__info { flex: 1 1 auto; min-width: 0; }
.match-card__teams {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}
.match-card__vs { color: var(--color-text-muted); margin: 0 0.2rem; }
.match-card__kickoff,
.match-card__final { margin: 0.15rem 0 0; font-size: 0.8rem; }
/* Il risultato finale resta sempre intero su una sola riga. */
.match-card__final { white-space: nowrap; }
.match-card__final strong { white-space: nowrap; }
.match-card__head .badge { flex: 0 0 auto; }

/* Corpo: controllo del pronostico + punteggio. */
.match-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--color-border);
}
.match-card__pick { display: flex; align-items: center; }
.match-card__points {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    line-height: 1.3;
    white-space: nowrap;
}
.match-card__pts { font-size: 1rem; }
.match-card__pts-label { font-size: 0.78rem; }

/* Pulsanti 1 / X / 2. */
.esito-radio {
    display: inline-flex;
    gap: 0.35rem;
}
.esito-radio label { cursor: pointer; }
.esito-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.esito-radio span {
    display: inline-block;
    min-width: 2.8rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg);
    font-weight: 800;
    color: var(--color-text-muted);
    text-align: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.esito-radio label:hover span { border-color: var(--color-primary); color: var(--color-text); }
.esito-radio input[type="radio"]:checked + span {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(180, 23, 46, 0.35);
}
.esito-radio input[type="radio"]:focus-visible + span {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.esito-radio input[type="radio"]:disabled + span {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Risultato esatto: i due box sempre affiancati, casa a sx, ospite a dx. */
.score-input {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}
.score-input__field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
}
.score-input__label {
    max-width: 6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-align: center;
}
.score-input__sep {
    align-self: flex-start;
    padding-top: 0.55rem;
    font-weight: 700;
    color: var(--color-text-muted);
}
.input-gol {
    width: 3rem;
    text-align: center;
    /* 16px evita lo zoom automatico al focus su iOS */
    font-size: 1rem;
}

/* Desktop: la card si distende su un'unica riga compatta. */
@media (min-width: 641px) {
    .match-card {
        display: flex;
        align-items: center;
        gap: 1.25rem;
    }
    .match-card__head { display: contents; }
    .match-card__body {
        display: contents;
    }
    .match-card__pick { flex: 0 0 auto; }
    .match-card__points { flex: 0 0 auto; }

    /* ── Tabellone desktop: colonna "Giocatore" sempre visibile ──
       Scorrendo le partite in orizzontale la prima colonna resta
       ancorata a sinistra, così si capisce sempre di chi è la riga.
       Solo su desktop: su smartphone la tabella diventa a card. */
    .tabellone-table th.col-giocatore,
    .tabellone-table td.col-giocatore {
        position: sticky;
        left: 0;
        background: var(--color-card);
        box-shadow: 2px 0 4px -2px rgba(16, 24, 40, 0.18);
    }
    .tabellone-table td.col-giocatore { z-index: 1; }
    .tabellone-table thead th.col-giocatore {
        z-index: 3;
        background: var(--color-panel);
    }
    /* La riga del giocatore corrente è evidenziata in verde: la cella
       ancorata deve mantenere lo stesso sfondo, non quello di default. */
    .tabellone-table tr.is-me td.col-giocatore { background: var(--color-success-bg); }

    /* ── Tabellone desktop: prima riga (partite) bloccata in alto ──
       Il tabellone scorre dentro un proprio riquadro (max-height): così
       l'eventuale scroll orizzontale (tante partite) resta confinato e
       non sborda dal layout, e lo scroll verticale avviene nel riquadro
       con l'intestazione delle partite ancorata in alto. La colonna
       "Giocatore" resta ancorata a sinistra. Non si applica su mobile:
       lì la tabella è a card. */
    .table-card.is-cards .table-responsive {
        overflow: auto;
        max-height: 75vh;
    }
    .tabellone-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    /* ── Divisori verticali tra le colonne per una lettura più ordinata ── */
    .tabellone-table th,
    .tabellone-table td {
        border-right: 1px solid rgba(0, 0, 0, 0.12);
    }
    .tabellone-table th:last-child,
    .tabellone-table td:last-child {
        border-right: 0;
    }
}

/* ─── Link "torna indietro" ───────────────────────────────── */
.back-link { margin-bottom: 1rem; font-size: 0.9rem; }

/* ─── Gruppo di pulsanti nell'intestazione di pagina ──────── */
.page-head__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ─── Risultato di una partita in tabella ─────────────────── */
.match-result { font-weight: 700; white-space: nowrap; }

/* ─── Pagina di inserimento risultati ─────────────────────── */
.risultati-lista {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 1rem 0;
}
.risultato-riga {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius);
    background: var(--color-panel);
}
.risultato-riga--annullata { opacity: 0.65; }
.risultato-nome { font-weight: 600; }
.risultato-nome--casa   { text-align: right; }
.risultato-nome--ospite { text-align: left; }
.risultato-gol {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.risultato-trattino { font-weight: 700; color: var(--color-text-muted); }
.risultato-annullata {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-error);
}
.gol-input {
    width: 3.4rem;
    text-align: center;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 1rem;
}

/* ─── Etichetta accessibile non visibile ──────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Bacheca giocatore ───────────────────────────────────── */
/* ─── Messaggi di bacheca in home (avvisi dell'amministrazione) ─────── */
.bacheca-messaggi {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 0 0 1.6rem;
}
.bacheca-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    box-shadow: var(--shadow-sm);
}
.bacheca-msg__icona { font-size: 1.3rem; line-height: 1.4; flex: 0 0 auto; }
.bacheca-msg__corpo { min-width: 0; }
.bacheca-msg__titolo {
    font-size: 1.05rem;
    color: var(--color-primary);
    margin: 0 0 0.25rem;
}
.bacheca-msg__testo { color: var(--color-text); margin: 0; }

/* ─── Gestione messaggi (pannello admin) ───────────────────────────── */
.msg-admin-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.msg-admin--nascosto { opacity: 0.7; }
.msg-admin__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.4rem;
}
.msg-admin__titolo { font-size: 1.1rem; margin: 0; }
.msg-admin__testo { margin: 0.2rem 0 0.6rem; }
.msg-admin__meta { font-size: 0.85rem; margin: 0 0 0.7rem; }
.msg-admin__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.form-check label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
}
.form-check input { width: auto; }

.bacheca-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.1rem;
    margin-bottom: 2rem;
}
.scadenza-card {
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.scadenza-card--urgente { border-left-color: var(--color-error); }
.scadenza-card__camp {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.scadenza-card__giornata {
    font-size: 1.15rem;
    color: var(--color-primary);
    margin-top: 0.1rem;
}
.scadenza-card__scadenza { font-size: 0.9rem; line-height: 1.5; }
.scadenza-card__stato { font-size: 0.95rem; }
.scadenza-card__stato .badge { margin-left: 0.3rem; }
.scadenza-card__foot {
    margin-top: auto;
    padding-top: 0.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
    /* ── Header: menu raggruppato sotto l'hamburger ──
       Logo a sinistra, pulsante a destra; le voci di navigazione si aprono
       sotto, a tutta larghezza, solo quando il menu è aperto (body.nav-open). */
    .site-header .container {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
    .nav-toggle { display: inline-flex; order: 2; }
    .site-header nav {
        order: 3;
        flex-basis: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        margin-top: 0.5rem;
    }
    body.nav-open .site-header nav { display: flex; }
    .site-header nav a,
    .site-header nav .nav-logout button {
        display: block;
        width: 100%;
        margin-left: 0;
        padding: 0.65rem 0.8rem;
        border-radius: 8px;
        text-align: left;
    }
    .site-header nav .nav-user {
        margin-left: 0;
        padding: 0.3rem 0.2rem 0.55rem;
        border-left: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.28);
        margin-bottom: 0.25rem;
    }
    .site-header nav .nav-logout { display: block; width: 100%; }

    /* ── Barra admin: anch'essa raggruppata nello stesso menu ──
       Su mobile l'intera barra delle voci admin resta nascosta finché non si
       apre l'hamburger, così la stessa icona governa tutte le voci in alto. */
    .admin-nav { display: none; }
    body.nav-open .admin-nav { display: block; }
    .admin-nav .container { flex-direction: column; align-items: stretch; gap: 0.2rem; }
    .admin-nav a { display: block; }

    .hero { padding: 1.5rem 0 1rem; }
    .admin-nav__exit { margin-left: 0; }
    .form-row { grid-template-columns: 1fr; }
    .page-head { align-items: flex-start; }
    .bacheca-grid { grid-template-columns: 1fr; }

    /* ── Tabelle-elenco che collassano in card su smartphone ──
       Ogni riga diventa una card autonoma, separata e distinguibile,
       senza scroll orizzontale. Le intestazioni di colonna vengono
       riproposte davanti a ciascun valore tramite data-label. */
    .table-card.is-cards { padding: 0.7rem; }
    .table-card.is-cards .table-responsive { overflow-x: visible; }
    .table-card.is-cards table,
    .table-card.is-cards tbody,
    .table-card.is-cards tr,
    .table-card.is-cards td { display: block; width: 100%; }
    .table-card.is-cards thead {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0; border: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .table-card.is-cards tbody tr {
        background: #fff;
        border: 1px solid var(--color-card-border);
        border-radius: var(--radius);
        padding: 0.6rem 0.8rem;
        margin-bottom: 0.55rem;
    }
    .table-card.is-cards tbody tr:last-child { margin-bottom: 0; }
    .table-card.is-cards td {
        border: none;
        padding: 0.25rem 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.9rem;
        text-align: right;
    }
    .table-card.is-cards td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-weight: 600;
        font-size: 0.8rem;
        color: var(--color-text-muted);
        text-align: left;
    }
    /* Cella titolo: nome dell'elemento in evidenza, a tutta larghezza. */
    .table-card.is-cards td.cell-title {
        display: block;
        text-align: left;
        font-size: 1rem;
        font-weight: 700;
        padding: 0 0 0.4rem;
        margin-bottom: 0.4rem;
        border-bottom: 1px solid var(--color-border);
    }
    .table-card.is-cards td.cell-title::before { content: none; }
    /* Cella azioni: i pulsanti si dispongono distesi sotto la card. */
    .table-card.is-cards td.cell-actions {
        display: block;
        text-align: left;
        padding-top: 0.5rem;
        margin-top: 0.4rem;
        border-top: 1px solid var(--color-border);
    }
    .table-card.is-cards td.cell-actions::before { content: none; }
    .table-card.is-cards td.cell-actions .actions { flex-wrap: wrap; gap: 0.45rem; }
    /* Target di tocco comodi: pulsanti più alti, che si dividono lo spazio e
       vanno a capo, sempre con il testo su una sola riga. */
    .table-card.is-cards td.cell-actions .actions form { flex: 1 1 8rem; }
    .table-card.is-cards td.cell-actions .actions > .btn { flex: 1 1 8rem; }
    .table-card.is-cards td.cell-actions .actions form .btn { width: 100%; }
    .table-card.is-cards td.cell-actions .actions .btn { min-height: 40px; }

    /* Azioni in cima alla pagina (es. "Inserisci risultati" / "Nuova partita"):
       si distendono e restano comode da toccare. */
    .page-head__actions { width: 100%; }
    .page-head__actions .btn { flex: 1 1 10rem; min-height: 42px; }

    /* ── Card pronostici su smartphone ──
       L'intestazione può andare a capo (badge/pop-up scendono sotto) senza mai
       spezzare il testo a metà parola; il risultato resta intero su una riga. */
    .match-card__head { flex-wrap: wrap; }
    .match-card__popup { margin-left: 0; }
    .match-card__teams { white-space: normal; }

    /* Nel tabellone-card il valore del pronostico (segno/risultato + punti)
       resta sempre su una sola riga. */
    .table-card.is-cards .tab-cella { white-space: nowrap; }

    /* ── Tabellone: giocate collassabili per giocatore ──
       Di base ogni card mostra solo il nome del giocatore con il pulsante
       "+". Le celle delle partite (e il totale) restano nascoste finché la
       riga non viene espansa con il pulsante, che allora mostra "−". */
    .table-card.is-cards .tabellone-table td.cell-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    .table-card.is-cards .tabellone-table .tab-giocatore__nome {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .table-card.is-cards .tabellone-table tr.is-open td.cell-title {
        margin-bottom: 0.4rem;
        padding-bottom: 0.4rem;
        border-bottom: 1px solid var(--color-border);
    }
    /* Celle delle giocate e totale: nascoste da collassate, visibili da aperte. */
    .table-card.is-cards .tabellone-table tr > td:not(.cell-title) { display: none; }
    .table-card.is-cards .tabellone-table tr.is-open > td:not(.cell-title) { display: flex; }

    /* Pulsante tondo +/- accanto al nome. */
    .table-card.is-cards .tabellone-table .tab-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 1px solid var(--color-primary);
        border-radius: 50%;
        background: #fff;
        color: var(--color-primary);
        cursor: pointer;
        line-height: 1;
    }
    .table-card.is-cards .tabellone-table .tab-toggle__icon {
        display: block;
        font-size: 1.25rem;
        font-weight: 700;
    }
    .table-card.is-cards .tabellone-table .tab-toggle__icon::before { content: "+"; }
    .table-card.is-cards .tabellone-table .tab-toggle[aria-expanded="true"] {
        background: var(--color-primary);
        color: #fff;
    }
    .table-card.is-cards .tabellone-table .tab-toggle[aria-expanded="true"] .tab-toggle__icon::before {
        content: "\2212"; /* segno meno "−" */
    }
}

/* ============================================================
   v2.1.0 — Hero board, podio, frecce, card partita, header
   ============================================================ */

/* ─── Header: voce attiva e avatar ────────────────────────── */
.site-header nav a.is-active {
    background: #fff;
    color: var(--color-primary);
}
.site-header nav a.is-active:hover {
    background: #fff;
    color: var(--color-primary-dark);
}
.site-header nav .nav-user {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    vertical-align: middle;
}
.avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

/* ─── Hero board (bacheca) ────────────────────────────────── */
.hero-board {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    border-radius: var(--radius);
    color: #fff;
    padding: 1.8rem;
    display: grid;
    /* minmax(0, …): le colonne possono restringersi sotto la larghezza
       intrinseca del contenuto (necessario per il carosello interno). */
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.5rem;
    box-shadow: 0 8px 28px rgba(16, 24, 40, 0.13);
    position: relative;
    overflow: hidden;
    margin-bottom: 1.4rem;
}
/* Watermark: la griglia del tris del logo come motivo decorativo. */
.hero-board::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 240px;
    height: 240px;
    background:
        linear-gradient(rgba(255,255,255,0.09), rgba(255,255,255,0.09)) 80px 0/14px 100% no-repeat,
        linear-gradient(rgba(255,255,255,0.09), rgba(255,255,255,0.09)) 146px 0/14px 100% no-repeat,
        linear-gradient(rgba(255,255,255,0.09), rgba(255,255,255,0.09)) 0 80px/100% 14px no-repeat,
        linear-gradient(rgba(255,255,255,0.09), rgba(255,255,255,0.09)) 0 146px/100% 14px no-repeat;
    transform: rotate(8deg);
    pointer-events: none;
}
.hero-board__main { position: relative; z-index: 1; }
.hero-board__kicker {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
}
.hero-board__title {
    font-size: 1.7rem;
    font-weight: 800;
    margin: 0.3rem 0 0.5rem;
}
.hero-board__text {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    margin-bottom: 1.1rem;
}
.hero-board__cta { margin-top: 1.2rem; }

.hero-countdown { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.hero-countdown__unit {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    text-align: center;
    min-width: 62px;
}
.hero-countdown__unit b {
    display: block;
    font-size: 1.4rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.hero-countdown__unit small {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
}
.hero-countdown.is-scaduto { opacity: 0.55; }

.hero-board__side {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    padding: 1.1rem;
    position: relative;
    z-index: 1;
    /* Elemento grid: senza min-width il carosello interno (N slide larghe
       100%) lo allargherebbe oltre la colonna, tagliando i punteggi. */
    min-width: 0;
}
.hero-board__side h3 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: 0.7rem;
}
/* ─── Carosello delle classifiche (bacheca) ───────────────── */
/* Scroll-snap orizzontale: swipe naturale su mobile, trascinamento o
   puntini su desktop. Una slide per classifica (perpetua + campionati). */
.rank-carousel { display: flex; flex-direction: column; min-width: 0; }
.rank-carousel__track {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox */
}
.rank-carousel__track::-webkit-scrollbar { display: none; }
.rank-carousel__track:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
    border-radius: 6px;
}
.rank-slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding-right: 0.15rem;
}
.rank-slide__link { margin-top: 0.6rem; font-size: 0.82rem; }
.rank-slide__link a { color: #fff; font-weight: 700; }
.rank-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    width: 100%;
    margin-top: 0.55rem;
}
/* Bottone 24×24 (area di tocco comoda) con il puntino disegnato dentro. */
.rank-carousel__dot {
    width: 24px;
    height: 24px;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
}
.rank-carousel__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: translate(-50%, -50%);
    transition: background 0.15s, transform 0.15s;
}
.rank-carousel__dot:hover::before { background: rgba(255, 255, 255, 0.6); }
.rank-carousel__dot.is-active::before {
    background: var(--color-accent);
    transform: translate(-50%, -50%) scale(1.3);
}
.rank-carousel__dot:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: -2px;
    border-radius: 50%;
}

.mini-rank { list-style: none; margin: 0; padding: 0; }
.mini-rank li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
    font-size: 0.9rem;
}
.mini-rank li:last-child { border-bottom: none; }
.mini-rank li.is-me .mini-rank__nome { text-decoration: underline; }
.mini-rank__pos {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
}
.mini-rank li:first-child .mini-rank__pos {
    background: var(--color-accent);
    color: var(--color-dark);
}
.mini-rank__nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mini-rank__punti { margin-left: auto; font-weight: 800; }
/* Riga del giocatore evidenziata anche quando è la voce extra fuori top 5. */
.mini-rank li.is-me {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
}
/* Separatore continuo (non tratteggiato): indica che tra i primi cinque e la
   posizione del giocatore ci sono altri giocatori non mostrati. */
.mini-rank__gap {
    display: block;
    padding: 0;
    border-bottom: none;
    margin: 0.3rem 0;
}
.mini-rank__gap::before {
    content: "";
    display: block;
    width: 45%;
    height: 2px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 1px;
}

/* ─── Statistiche personali (bacheca) ─────────────────────── */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.8rem;
}
.stat { padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: 0.1rem; }
.stat__lbl {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.stat__val {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.15;
}
.stat__sub { font-size: 0.8rem; color: var(--color-text-muted); }

/* ─── Podio della classifica ──────────────────────────────── */
.podium {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1.4rem;
}
.pod { text-align: center; padding: 1.2rem 1rem; }
.pod__medal {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
    color: #fff;
}
.pod--1 { padding-top: 3.8rem; border-top: 4px solid var(--color-accent); }
.pod--1 .pod__medal { background: var(--color-accent); color: var(--color-dark); }
.pod--2 { padding-top: 2.4rem; border-top: 4px solid #9aa3ad; }
.pod--2 .pod__medal { background: #9aa3ad; }
.pod--3 { padding-top: 1.2rem; border-top: 4px solid #b07a4a; }
.pod--3 .pod__medal { background: #b07a4a; }
.pod--me { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.pod__nome { font-weight: 800; }
.pod__punti { font-size: 1.5rem; font-weight: 800; color: var(--color-primary); }
.pod__punti small {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

/* ─── Frecce di variazione posizione ──────────────────────── */
.delta { font-size: 0.78rem; font-weight: 800; white-space: nowrap; }
.delta--up   { color: var(--color-success); }
.delta--down { color: var(--color-primary); }
.delta--eq   { color: var(--color-text-muted); }
.delta--new  { color: var(--color-text-muted); }

/* ─── Intestazioni di colonna: variante lunga/corta ───────── */
/* Su desktop si mostra l'etichetta estesa; su mobile quella breve
   ("Giocati") per far stare tutte le colonne nella finestra. */
.th-corto { display: none; }

/* ─── Classifiche compatte su mobile ──────────────────────── */
/* Tutte le colonne (posizione, giocatore, giocati, punti) restano
   visibili senza scroll orizzontale: celle più strette, etichette brevi
   e nome del giocatore con ellissi se troppo lungo. */
@media (max-width: 640px) {
    .th-lungo { display: none; }
    .th-corto { display: inline; }

    .classifica-table { font-size: 0.84rem; }
    .classifica-table thead th {
        font-size: 0.62rem;
        letter-spacing: 0.03em;
        padding: 0.55rem 0.35rem;
    }
    .classifica-table tbody td { padding: 0.5rem 0.35rem; }
    .classifica-table thead th:first-child,
    .classifica-table tbody td:first-child { padding-left: 0.65rem; }
    .classifica-table thead th:last-child,
    .classifica-table tbody td:last-child { padding-right: 0.65rem; }

    .classifica-pos {
        min-width: 1.55rem;
        height: 1.55rem;
        padding: 0 0.3rem;
        font-size: 0.72rem;
    }

    /* Il nome non allarga mai la tabella: si tronca con i puntini. */
    .classifica-table td.cell-giocatore {
        max-width: 32vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .classifica-table td.cell-giocatore .badge {
        font-size: 0.58rem;
        padding: 0.1rem 0.4rem;
    }

    .classifica-table .delta { font-size: 0.68rem; }
}

/* ─── Card partita: colonna orario ────────────────────────── */
.match-card__when {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    line-height: 1.25;
}
.match-card__when-day {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.match-card__when-time {
    font-size: 1.02rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
/* ─── Barra di salvataggio sticky (form pronostici) ───────── */
.save-bar {
    position: sticky;
    bottom: 0.75rem;
    margin-top: 1.1rem;
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(6px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(16, 24, 40, 0.13);
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    flex-wrap: wrap;
    z-index: 5;
}
.save-bar__info { font-size: 0.88rem; color: var(--color-text-muted); }
.save-bar .form-actions { margin-top: 0; }

/* ─── Responsive delle novità v2.1.0 ──────────────────────── */
@media (max-width: 760px) {
    .hero-board {
        grid-template-columns: minmax(0, 1fr);
        padding: 1.1rem;
        gap: 1rem;
    }
    .hero-board__title { font-size: 1.45rem; }
    .hero-countdown { gap: 0.45rem; }
    .hero-countdown__unit { min-width: 54px; padding: 0.4rem 0.55rem; }
    .hero-countdown__unit b { font-size: 1.2rem; }

    /* Pannello classifiche compatto: il carosello riempie la larghezza
       disponibile e i punteggi restano sempre visibili a destra. */
    .hero-board__side { padding: 0.85rem 0.9rem; }
    .rank-slide { padding-right: 0; }
    .mini-rank li { font-size: 0.86rem; gap: 0.5rem; }
    .mini-rank__punti { font-size: 0.9rem; }

    /* Su mobile il podio è eliminato del tutto: resta la sola tabella. */
    .podium { display: none; }
}
@media (max-width: 640px) {
    .match-card__when {
        flex-direction: row;
        align-items: baseline;
        gap: 0.45rem;
        min-width: 0;
        margin-bottom: 0.35rem;
    }
    .save-bar { position: static; box-shadow: none; padding: 0.5rem 0 0; border: none; background: transparent; }
}

/* ───────── Statistiche e curiosità ───────── */
.statistiche__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.statistiche__selettore {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.statistiche__selettore select {
    padding: .35rem .5rem;
}
.statistiche__blocco {
    margin-top: 2rem;
}
.statistiche__blocco > h2 {
    margin-bottom: .75rem;
}
.statistiche__vuoto {
    color: #6b7280;
}
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 640px) {
    .stat-grid { grid-template-columns: 1fr; }
}
.stat-card h3 {
    margin: 0 0 .75rem;
    font-size: 1.05rem;
}
.stat-card__nota {
    margin-top: .5rem;
    font-size: .82rem;
    color: #6b7280;
}
.grafico-box {
    width: 100%;
}
.grafico-box .grafico {
    width: 100%;
    height: auto;
    display: block;
}
.grafico__linea {
    stroke: #c1121f;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.grafico__area {
    fill: rgba(193, 18, 31, .15);
    stroke: none;
}
.grafico__punto {
    fill: #c1121f;
}
.grafico__asse {
    stroke: #c8ccd2;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.grafico__griglia {
    stroke: #eef0f2;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.grafico__et {
    fill: #6b7280;
    font-size: 9px;
    font-family: inherit;
}
.grafico__et--x { text-anchor: middle; }
.grafico__et--y { text-anchor: end; }
.grafico__et--val { text-anchor: middle; fill: #c1121f; font-weight: 600; }
.grafico__colonna { fill: #c1121f; }
.grafico__titolo {
    fill: #374151;
    font-size: 10px;
    font-weight: 600;
    font-family: inherit;
}
.grafico__titolo--y { text-anchor: start; }
.grafico__titolo--x { text-anchor: middle; }
.stat-campionato {
    margin-bottom: 1.5rem;
}
.stat-campionato:last-child { margin-bottom: 0; }
.stat-campionato__nome {
    margin: 0 0 .6rem;
    font-size: 1.1rem;
    padding-bottom: .3rem;
    border-bottom: 2px solid #f0f0f0;
}
.statistiche__intestazione {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.stat-elenco {
    list-style: none;
    margin: 0;
    padding: 0;
}
.stat-elenco li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.stat-elenco li:last-child { border-bottom: none; }
.stat-elenco__cosa { font-weight: 600; text-align: right; }
.stat-percentuali,
.stat-numeri {
    list-style: none;
    margin: 0;
    padding: 0;
}
.stat-percentuali li,
.stat-numeri li {
    padding: .4rem 0;
}
.stat-percentuali__valore,
.stat-numeri__valore {
    display: inline-block;
    min-width: 3.5rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #c1121f;
}