/* FONT LOCALI
   I file stanno in css/fonts: il sito non dipende dai server esterni
   e i dati dei visitatori non escono dal dominio. */
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Black.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
}
@font-face {
    font-family: 'Dancing Script';
    src: url('fonts/DancingScript-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 400 700;
    font-display: swap;
}

/* RESET E LAYOUT BASE */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: 'Montserrat', sans-serif; overflow: hidden; display: flex; flex-direction: column; background: #fff; }

/* HEADER */
.main-header-box { width: 100%; height: 160px; position: relative; z-index: 999; background: #000; border-bottom: 3px solid #D4AF37; overflow: hidden; flex-shrink: 0; }
.header-bg-real { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.header-ui-layout { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 0 60px; }

.ciao-txt { font-family: 'Dancing Script', cursive; font-size: 32px; color: #000; text-shadow: 1px 1px 2px #fff; }
.name-txt { font-family: 'Dancing Script', cursive; font-size: 55px; color: #000; text-shadow: 2px 2px 4px #fff; }

/* STATS BOX */
.stats-box { background: rgba(255, 255, 255, 0.9); padding: 10px 25px; border-radius: 12px; display: flex; gap: 25px; border: 2px solid #D4AF37; }
.stat-lbl { font-size: 10px; font-weight: 900; color: #444; text-transform: uppercase; }
.stat-val { font-size: 19px; font-weight: 900; color: #000; }

/* --- NUCLEO ELETTRICO CON CICLO RANDOM E PAUSA --- */
.electric-logo-area {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.plasma-core-transparent {
    position: relative;
    width: 140px; height: 140px;
    background: transparent;
    border-radius: 50%;
    overflow: hidden;
    filter: blur(3px) contrast(150%) brightness(1.6);
}

.plasma-white-sparks {
    position: absolute;
    top: -100%; left: -100%; right: -100%; bottom: -100%;
    z-index: 11;
    background: 
        radial-gradient(circle, rgba(255,255,255,0.9), transparent 20%) 0 0 / 25% 25%, 
        radial-gradient(circle, rgba(255,255,255,0.4), transparent 25%) 50% 50% / 15% 15%,
        radial-gradient(circle, rgba(255,255,255,0.6), transparent 20%) 80% 20% / 20% 20%;
    mix-blend-mode: color-dodge;
    /* Durata totale 12s: 4s attività + 8s pausa */
    animation: spark-random 12s infinite ease-in-out;
}

@keyframes spark-random {
    /* 0-10%: Partenza lenta (Fade in) */
    0% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    10% { opacity: 1; transform: scale(1) rotate(45deg); }
    
    /* 10-30%: Movimenti random / Scariche veloci */
    15% { transform: translate3d(5%, -5%, 0) rotate(120deg) skew(10deg); }
    20% { transform: translate3d(-10%, 5%, 0) rotate(240deg) skew(-15deg); }
    25% { transform: translate3d(8%, 8%, 0) rotate(360deg) scale(1.2); }
    
    /* 30-35%: Fine lenta (Fade out) */
    30% { opacity: 1; transform: scale(1) rotate(400deg); }
    35% { opacity: 0; transform: scale(0.8) rotate(450deg); }
    
    /* 35-100%: PAUSA DI 8 SECONDI (Nulla visibile) */
    100% { opacity: 0; transform: scale(0.8) rotate(450deg); }
}
/* --- FINE NUCLEO --- */

.app-main-viewport { display: flex; flex: 1; overflow: hidden; }
.scrollable-column { height: 100%; overflow-y: auto; background: #fff; }

/* Colonne laterali: scorre solo l'elenco, lo spazio pubblicitario
   in fondo resta fermo e sempre visibile. */
.colonna-con-banner {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}
.colonna-con-banner > .sidebar-left-content,
.colonna-con-banner > .sidebar-right-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.colonna-con-banner > .banner-adv {
    flex: 0 0 auto;
    border-top: 1px solid #eee;
}
.sidebar-left { width: 280px; flex-shrink: 0; border-right: 1px solid #eee; }
.sidebar-right { width: 300px; flex-shrink: 0; border-left: 1px solid #eee; }
.content-center { flex: 1; background: #fff !important; }
.no-bg { background: transparent !important; }

/* PULSANTI HEADER
   Aiuto, Profilo e Avvisi hanno la stessa forma di Esci, un rettangolo
   con gli angoli smussati, ma pieni di arancione e un po' piu' grandi:
   sono le tre cose che si usano, mentre uscire e' quella che si usa di
   rado e non deve rubare l'occhio. Prima erano tre cerchi bianchi con
   dentro una parola, che a schermo stretto si schiacciavano. */
.btn-help,
.btn-profile,
.btn-avvisi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FF6600;
    color: #fff;
    padding: 11px 20px;
    border-radius: 10px;
    border: 2px solid #D4AF37;
    text-decoration: none;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1;
    margin: 0 4px;
    cursor: pointer;
    transition: 0.25s;
    white-space: nowrap;
}
.btn-help:hover,
.btn-profile:hover,
.btn-avvisi:hover {
    background: #e65c00;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.35);
}

/* Esci: piu' piccolo del trenta per cento rispetto a prima, e resta
   bianco con il bordo dorato. E' l'unico che non si vuole premere per
   sbaglio. */
.btn-logout {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    color: #FF6600;
    padding: 6px 11px;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1;
    transition: 0.3s;
    border: 2px solid #D4AF37;
}
.btn-logout:hover {
    background: #FF6600;
    color: white;
}

/* Richiamo degli avvisi non letti, accanto al pulsante */
.btn-avvisi { position: relative; }
.pallino-avvisi {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #C0392B;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet e schermi medi (≤1024px) */
@media (max-width: 1024px) {
    .sidebar-left { width: 240px; }
    .sidebar-right { width: 260px; }
    .header-ui-layout { padding: 0 30px; }
    .ciao-txt { font-size: 26px; }
    .name-txt { font-size: 45px; }
    .stats-box { padding: 8px 20px; gap: 20px; }
    .stat-val { font-size: 16px; }
}

/* ============================================================
   SCHERMO STRETTO: TELEFONO IN VERTICALE

   Impostazione decisa da Danilo: le tre colonne non si impilano una
   sotto l'altra, restano affiancate e si restringono. Quello che si
   riduce e' la quantita' di roba per schermata, non la leggibilita':
   meno miniature nella griglia, meno schede nel carosello, e nelle
   fasce laterali i contenuti messi in pila verticale.

   Le regole delle colonne laterali stanno qui e non dentro
   sidebar_left.php e sidebar_right.php, cosi' l'adattamento allo
   schermo si legge tutto in un punto solo.
   ============================================================ */

/* Tablet in verticale e telefoni (≤768px) */
@media (max-width: 768px) {
    /* --- Intestazione ---
       I pulsanti scendono in fondo alla fascia, sopra una striscia
       chiara: prima finivano sopra il logo e non si leggevano. */
    .main-header-box { height: 132px; }
    /* L'immagine occupa solo la fascia alta e resta ritagliata al
       centro, dove sta il logo: contenendola per intero il logo
       diventava una striscia alta trenta pixel. Sotto resta la riga
       nera per i pulsanti, che cosi' non finiscono sopra il logo. */
    .header-bg-real { height: 72px; object-position: center center; }
    .electric-logo-area { display: none; }
    .header-ui-layout {
        padding: 0 10px 8px;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        gap: 8px;
    }
    .welcome-group { display: none; }

    .auth-buttons {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
    }
    /* Corpo minimo di 44 pixel: sotto, il dito non centra il pulsante. */
    .btn-login-header, .btn-register-header {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 16px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.92);
        border: 2px solid #D4AF37;
        color: #FF6600;
        font-weight: 700;
        font-size: 0.95rem;
        text-decoration: none;
    }
    /* I tre arancioni restano tali anche sul telefono, solo un po' piu'
       stretti: l'altezza minima resta quella che il dito centra. */
    .btn-help, .btn-profile, .btn-avvisi {
        min-height: 44px;
        padding: 0 13px;
        font-size: 0.86rem;
        margin: 0 2px;
    }
    /* Esci resta il piu' piccolo anche qui, ma non sotto i 36 pixel:
       piccolo per non attirare il dito, non tanto da non prenderlo piu'. */
    .btn-logout {
        min-height: 36px;
        padding: 0 11px;
        font-size: 0.72rem;
    }
    /* Il riquadro con punti e utenti online sparisce dall'intestazione:
       con quattro pulsanti piu' largo di prima non ci sta, andava a capo
       e finiva sopra il logo. Il punteggio si legge comunque nella riga
       di benvenuto subito sotto, quindi non si perde niente. */
    .stats-box { display: none; }

    /* --- Le tre colonne restano affiancate ---
       In percentuale invece che in pixel: cosi' il rapporto fra le tre
       resta lo stesso da 768 a 320 pixel, senza scalini. */
    .sidebar-left  { width: 22%; min-width: 76px; }
    .sidebar-right { width: 27%; min-width: 92px; }
    .content-center { flex: 1; min-width: 0; }
    .sidebar-left > .sidebar-left-content, .sidebar-right > .sidebar-right-content { padding: 8px 5px; }

    /* --- Titoli delle fasce laterali ---
       "Top Settembre" va a capo da solo e diventa TOP sopra e
       SETTEMBRE sotto, come chiesto. */
    .sidebar-right .titolo-classifica, .sidebar-left .titolo-flash {
        font-size: 0.68rem;
        text-align: center;
        justify-content: center;
        flex-direction: column;
        gap: 2px;
        line-height: 1.15;
        padding-bottom: 6px;
        margin-bottom: 10px;
        letter-spacing: 0;
    }
    .sidebar-left .titolo-mese { font-size: 0.6rem; text-align: center; letter-spacing: 0; }

    /* --- Classifica in pila ---
       Posizione, nickname e punteggio uno sotto l'altro. */
    .sidebar-right .riga-classifica {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2px;
        padding: 8px 4px;
        font-size: 0.7rem;
    }
    .sidebar-right .riga-classifica .posizione { margin-right: 0; display: block; }
    .sidebar-right .riga-classifica .nickname { display: block; font-size: 0.66rem; }
    .sidebar-right .riga-classifica .punti { font-size: 0.72rem; }

    /* --- Podio ---
       Sotto i 500 pixel di larghezza totale la colonna vale meno di
       cento pixel: tre gradini affiancati sarebbero larghi trenta
       pixel l'uno e illeggibili. I primi tre restano quindi in pila,
       il primo in cima, ciascuno col proprio numero. */
    .sidebar-right .podio {
        grid-template-columns: 1fr;
        gap: 6px;
        border-bottom: none;
        margin-bottom: 12px;
    }
    .sidebar-right .podio-posto {
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 2px solid #D4AF37;
        border-radius: 10px;
        background: linear-gradient(180deg, #fffdf5 0%, #fff6dc 100%);
        padding: 6px 4px;
    }
    /* In pila l'ordine visivo torna quello naturale: primo, secondo,
       terzo. Senza questo, resterebbe l'ordine del podio orizzontale,
       che metterebbe il terzo in cima. */
    .sidebar-right .podio-primo   { order: 1; }
    .sidebar-right .podio-secondo { order: 2; }
    .sidebar-right .podio-terzo   { order: 3; }
    .sidebar-right .podio-nome { font-size: 0.66rem; order: 2; margin: 2px 0 0; }
    .podio-primo .sidebar-right .podio-nome { font-size: 0.78rem; }
    .sidebar-right .podio-punti { font-size: 0.68rem; order: 3; margin-bottom: 0; }
    .sidebar-right .podio-posto .podio-gradino {
        order: 1;
        height: auto;
        border: none;
        background: none;
        font-size: 1.1rem;
        line-height: 1;
    }
    .sidebar-right .podio-primo .podio-gradino { font-size: 1.4rem; }

    /* --- Vincitori Flash in pila --- */
    .sidebar-left .vincitore-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
        padding: 8px 4px;
    }
    .sidebar-left .vincitore-item .avatar { width: 38px; height: 38px; border-width: 2px; }
    .sidebar-left .vincitore-item .dati { width: 100%; }
    .sidebar-left .vincitore-item .nickname { font-size: 0.72rem; }
    .sidebar-left .vincitore-item .punti { font-size: 0.7rem; }
    .sidebar-left .vincitore-item .quando { font-size: 0.6rem; }

    .sidebar-right .classifica-vuota, .sidebar-left .flash-vuoto { padding: 10px 6px; font-size: 0.65rem; }
}

/* Telefono (≤480px) */
@media (max-width: 480px) {
    .main-header-box { height: 118px; }
    .btn-login-header, .btn-register-header {
        padding: 0 12px;
        font-size: 0.88rem;
    }
    .btn-help, .btn-profile, .btn-avvisi { padding: 0 11px; font-size: 0.8rem; }
    .btn-logout { padding: 0 9px; font-size: 0.68rem; }
    .stats-box { flex-direction: column; gap: 2px; padding: 4px 8px; }
    .stat-col { display: flex; gap: 5px; align-items: center; }
}

/* Telefoni stretti (≤360px) */
@media (max-width: 360px) {
    .main-header-box { height: 110px; }
    .sidebar-left > .sidebar-left-content, .sidebar-right > .sidebar-right-content { padding: 6px 3px; }
    .sidebar-right .titolo-classifica, .sidebar-left .titolo-flash { font-size: 0.62rem; }
    .sidebar-right .riga-classifica, .sidebar-right .podio-nome, .sidebar-right .podio-punti { font-size: 0.66rem; }
    .btn-login-header, .btn-register-header {
        padding: 0 10px;
        font-size: 0.82rem;
    }
    .btn-help, .btn-profile, .btn-avvisi { padding: 0 9px; font-size: 0.74rem; }
    .btn-logout { padding: 0 8px; font-size: 0.64rem; }
}
/* ============================================================
   TELEFONO IN VERTICALE: TIPOGRAFIA CONTENUTA

   Perche' serve questo blocco. Con le tre colonne affiancate anche sul
   telefono, alla colonna centrale resta circa il 51 per cento della
   larghezza: 183 pixel su un telefono da 360, 199 su uno da 390. Dentro
   quei 183 pixel ci stanno la barra di benvenuto, la barra Come Funziona
   e tutto il riquadro di dettaglio, scritti con misure pensate per 1920
   pixel. Le scritte non eccedevano di poco: non ci entravano.

   Il punto di partenza del disegno e' quindi 360 pixel, la larghezza
   piu' comune fra i telefoni Android oggi in circolazione, e sotto c'e'
   un secondo gradino per i 320 di iPhone SE di prima generazione.
   Allargandosi, le misure tornano da sole a quelle del foglio
   principale: niente e' scritto a misura fissa.

   Le tre soglie non sono nuove, e ciascuna ha la sua ragione. 768 e' il
   punto in cui le tre colonne cominciano a stringersi: la barra di
   benvenuto va impilata da li', perche' e' li' che nasce il guaio, non
   piu' in basso. 560 e' la soglia che main_content.php usa gia' per la
   griglia degli oggetti, cosi' griglia e riquadro di dettaglio cambiano
   nello stesso momento. 360 esiste gia' in questo foglio.

   Sulla specificita'. Queste regole devono vincere su quelle scritte
   dentro main_content.php, che il browser legge DOPO questo foglio e che
   a pari specificita' avrebbero la meglio. Per questo ogni selettore
   nomina anche il contenitore (.user-info-strip, .om-detail): non e'
   verbosita', e' quello che le rende efficaci. Senza il contenitore
   davanti, queste righe non avrebbero nessun effetto.
   ============================================================ */

/* --- BARRA ARANCIONE DI BENVENUTO ---
   Era una riga sola: icona, "Ciao Danilo!" e il livello a sinistra, i
   punti spinti a destra, e nessuna regola per telefono. Diventa una
   colonna: prima chi sei, poi quanto hai.

   Da 768 in giu' e non da 560, e questi sono i numeri misurati prima
   dell'intervento, con "Ciao Danilo!" e con un nickname lungo:

     schermo 320 - colonna 152 - la barra chiedeva 237 e 306 pixel
     schermo 360 - colonna 184 - 53 e 122 pixel fuori dalla colonna
     schermo 430 - colonna 219 - 18 e 87 pixel fuori
     schermo 560 - colonna 286 - 20 pixel fuori col nickname lungo
     schermo 600 - colonna 306 - ci stava per un pelo

   Lo sfondamento finisce quindi poco sopra i 560, ma la soglia resta
   768 perche' e' li' che le colonne cominciano a stringersi: allinearla
   alla causa invece che all'ultimo pixel che si rompe evita di doverla
   rincorrere la prossima volta che una di quelle percentuali cambia. */
@media (max-width: 768px) {
    .user-info-strip {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 11px 14px 12px;
        margin-bottom: 14px;
        border-radius: 0 0 12px 12px;
        border-bottom-width: 2px;
        box-shadow: 0 2px 6px rgba(255, 102, 0, 0.3);
        /* Non piu' appiccicata in cima. Su questa colonna la barra e'
           alta quasi un quinto dell'altezza utile, e tenerla ferma
           voleva dire giocare in una finestra piu' piccola per tutta la
           partita. Scorre via con il resto; i punti si rileggono dal
           profilo. Se la preferisci fissa, basta togliere questa riga. */
        position: static;
    }
    .user-info-strip .user-profile-info { gap: 7px; align-items: flex-start; }
    /* L'immagine della scintilla ha la misura scritta sul tag: qui si
       toglie solo l'altezza di riga che il contenitore le aggiungeva. */
    .user-info-strip .lvl-icon-big { flex: 0 0 auto; line-height: 0; margin-top: 2px; }
    /* Senza larghezza minima azzerata un blocco flessibile non si
           restringe sotto il suo contenuto, e il nickname spingeva la
           barra oltre il bordo della colonna invece di andare a capo. */
    .user-info-strip .user-texts { min-width: 0; }
    /* Un nickname lungo non ha spazi dove spezzarsi: va concesso il capo
       dentro la parola, altrimenti resta una riga unica piu' larga della
       colonna qualunque sia il corpo del carattere. */
    .user-info-strip .nick {
        font-size: 1rem;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }
    .user-info-strip .rank {
        display: block;
        font-size: 0.68rem;
        line-height: 1.2;
        margin-top: 2px;
    }

    /* I punti scendono sotto, divisi dal nickname da una riga chiara:
       affiancarli era la causa diretta dello sfondamento. */
    .user-info-strip .user-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        padding-top: 7px;
        border-top: 1px solid rgba(255, 255, 255, 0.35);
    }
    /* Etichetta sopra in piccolo, numero sotto in grande: e' il numero
       che si cerca con l'occhio, l'etichetta la si legge una volta. I
       due punti dopo l'etichetta vanno via, perche' a capo non hanno
       piu' senso. */
    .user-info-strip .scintille-count { font-size: 1.1rem; line-height: 1.1; text-shadow: none; }
    .user-info-strip .scintille-count .sc-etichetta {
        display: block;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        line-height: 1.2;
    }
    .user-info-strip .scintille-count .sc-etichetta::after { content: none; }
    .user-info-strip .scintille-count .sc-valore { display: block; margin-left: 0; }
    /* Gli sponsor sono congelati, ma se l'interruttore torna acceso
       questi pulsanti compaiono dentro la stessa colonna: meglio che
       nascano della misura giusta. */
    .user-info-strip .btn-become-sponsor,
    .user-info-strip .btn-sponsor-area {
        padding: 9px 12px;
        border-radius: 10px;
        font-size: 0.68rem;
        text-align: center;
    }
}

/* Da qui in giu' si entra nel telefono vero: la colonna centrale vale
   meno di 290 pixel e le misure di sopra vanno strette di un altro
   gradino. E' la stessa soglia a cui main_content.php passa a due
   miniature per schermata. */
@media (max-width: 560px) {
    .user-info-strip { gap: 7px; padding: 9px 11px 10px; margin-bottom: 12px; }
    /* La scintilla accanto al nickname si toglie: ruba ventisette pixel
       su centotrenta e non dice niente che non sia gia' scritto due
       righe sotto, accanto al punteggio. Tenendola, "Ciao Massimiliano!"
       andava su tre righe e la barra diventava piu' alta su un telefono
       da 390 che su uno da 360, che e' il contrario di quello che deve
       succedere. */
    .user-info-strip .lvl-icon-big { display: none; }
    .user-info-strip .nick { font-size: 0.88rem; }
    .user-info-strip .rank { font-size: 0.6rem; }
    .user-info-strip .scintille-count { font-size: 1rem; }
    .user-info-strip .scintille-count .sc-etichetta { font-size: 0.6rem; }

    /* --- BARRA COME FUNZIONA ---
       Il titolo su due righe lo imposta gia' main_content.php. Qui si
       riduce solo il testo che compare da aperta: a 0,95rem dentro 183
       pixel venivano fuori righe di tre parole. */
    .explanation-box { border-left-width: 4px; border-radius: 10px; margin: 8px 0; }
    .explanation-box .explanation-body p { font-size: 0.76rem; line-height: 1.45; }

    /* --- RIQUADRO DI DETTAGLIO: SOLO LE SCRITTE ---
       Attenzione: qui si rimpicciolisce il testo, non si rifa'
       l'impaginazione. Il riquadro su schermo verticale ha un difetto
       strutturale suo, elencato in DA_FARE.md, ed e' un lavoro a parte
       con un ordine di lettura stabilito. */

    .om-detail {
        /* Lo spazio in basso serviva al comando di chiusura, che era
           alto perche' conteneva la frase su Esc. Tolta quella frase,
           bastano 86 pixel invece di 124. */
        padding: 12px 12px 86px;
        border-radius: 16px;
    }
    .om-detail .om-detail-grid { gap: 12px; }

    .om-detail .winner-label-perm { font-size: 0.6rem; margin-bottom: 4px; }
    .om-detail .winner-info { gap: 6px; }
    .om-detail .winner-avatar,
    .om-detail .winner-avatar-default { width: 34px; height: 34px; border-width: 2px; }
    .om-detail .winner-avatar-default { font-size: 0.9rem; }
    .om-detail .winner-name { font-size: 0.85rem; overflow-wrap: anywhere; }
    .om-detail .no-winner { font-size: 0.7rem; }
    .om-detail .om-detail-winner { margin-bottom: 8px; }

    /* Tre rem sono quarantotto pixel di altezza del carattere: il
       numero da solo arrivava a coprire quasi tutta la colonna. */
    .om-detail .om-points-center { margin-bottom: 8px; }
    .om-detail .om-points-number { font-size: 1.7rem; }
    .om-detail .om-points-spark { width: 20px; height: 20px; }
    .om-detail .om-points-label { font-size: 0.58rem; margin-top: 4px; }

    .om-detail .flash-deadline {
        font-size: 0.62rem;
        line-height: 1.3;
        padding: 6px 5px;
        margin: 8px 0;
    }
    .om-detail .flash-spark { width: 12px; height: 12px; }
    .om-detail .om-tentativi { font-size: 0.6rem; margin-bottom: 6px; }

    /* Campo di risposta e pulsante uno sopra l'altro: affiancati, il
       campo restava largo un centinaio di pixel e non ci si vedeva
       dentro quello che si stava scrivendo. */
    .om-detail .om-play-zone { flex-direction: column; gap: 6px; margin-top: 10px; }
    /* Sedici pixel esatti, e non e' un numero estetico: sotto i sedici
       Safari su iPhone ingrandisce da solo la pagina quando il dito
       entra nel campo, e al ritorno non la rimpicciolisce. L'utente si
       trova il sito spostato di lato dopo avere risposto. */
    .om-detail .om-play-zone input {
        width: 100%;
        flex: none;
        font-size: 16px;
        padding: 10px;
        border-radius: 9px;
    }
    /* Quarantaquattro pixel e' il bersaglio minimo che un dito centra
       senza mirare. */
    .om-detail .om-play-zone button {
        width: 100%;
        min-height: 44px;
        padding: 0 12px;
        font-size: 0.82rem;
        border-radius: 9px;
    }

    .om-detail .risposta-corretta-msg,
    .om-detail .risposta-corretta-box { font-size: 0.7rem; padding: 8px; line-height: 1.35; }
    .om-detail .feedback-message { font-size: 0.7rem; padding: 8px; line-height: 1.35; }
    .om-detail .om-login-invite { padding: 10px; font-size: 0.72rem; }

    /* Il comando di chiusura si mangiava mezzo schermo per spiegare due
       scorciatoie che sul telefono non esistono: non c'e' il tasto Esc e
       "clicca fuori dal riquadro" si fa col dito senza che nessuno lo
       spieghi. Resta la parola Chiudi, alta quanto serve al dito. */
    .om-detail .om-detail-chiudi-nota { display: none; }
    .om-detail .om-detail-chiudi {
        bottom: 26px;
        min-height: 40px;
        padding: 0 22px;
        font-size: 0.78rem;
    }
}

/* Telefoni da 320 pixel: iPhone SE di prima generazione e simili.
   La colonna centrale vale 163 pixel, cioe' 141 utili. */
@media (max-width: 360px) {
    .user-info-strip { padding: 8px 9px 9px; gap: 6px; }
    .user-info-strip .nick { font-size: 0.8rem; }
    .user-info-strip .rank { font-size: 0.56rem; }
    .user-info-strip .scintille-count { font-size: 0.92rem; }
    .user-info-strip .scintille-count .sc-etichetta { font-size: 0.55rem; letter-spacing: 0; }

    .explanation-box .explanation-body p { font-size: 0.72rem; }

    .om-detail { padding: 10px 9px 80px; }
    .om-detail .om-points-number { font-size: 1.45rem; }
    .om-detail .winner-name { font-size: 0.78rem; }
    .om-detail .flash-deadline { font-size: 0.58rem; }
    /* Il corpo del campo resta sedici pixel anche qui: e' il limite
       sotto il quale iPhone ingrandisce la pagina, non una preferenza. */
    .om-detail .om-play-zone button { font-size: 0.76rem; }
}

/* ============================================================
   SPAZI PUBBLICITARI
   Formato 300x250, il rettangolo medio usato da Google AdSense.
   ============================================================ */
.banner-adv {
    width: 300px;
    max-width: 100%;
    height: 250px;
    margin: 22px auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.banner-adv-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    background: #fff;
    color: #b0b0b0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 1px;
}