/* ==========================================================
   QuizZen - ritocchi validi su tutti i dispositivi
   ==========================================================

   Si carica dopo style.css e dopo telefono.css, quindi vince a
   parita' di specificita'. Sta in un file separato perche' le
   regole qui dentro NON sono legate alla larghezza dello
   schermo: telefono.css contiene solo quello che vale sotto i
   768 pixel, e mescolarli renderebbe impossibile capire dove
   guardare quando qualcosa si rompe. */

/* ----------------------------------------------------------
   Miniature piu' piccole del 15 per cento
   ----------------------------------------------------------
   Non si cambia la griglia: si restringe la singola casella
   dentro la propria cella e la si centra. Lo spazio che si
   libera diventa aria fra un riquadro e l'altro, che e'
   esattamente quello che serviva.

   Farlo con transform: scale() sarebbe stato piu' corto, ma
   lascia il posto occupato com'era e i riquadri resterebbero
   distanti come prima, con un buco attorno a ciascuno. */
/* I selettori portano davanti il contenitore per una ragione
   precisa: main_content.php impone width: 100% a queste caselle dal
   suo blocco <style>, che sta nel corpo della pagina e si carica DOPO
   i fogli esterni. A parita' di specificita' vinceva lui, e le due
   riduzioni precedenti non hanno mai avuto effetto: i riquadri erano
   rimasti identici.

   SULLA MISURA. Il 75 per cento si era rivelato troppo piccolo:
   94 e' quel 75 ingrandito di un quarto, come chiesto. */
.om-featured > .om-big,
.om-strip-track > .om-thumb {
    width: 94% !important;
    margin-left: auto;
    margin-right: auto;
}

/* Le caselle vuote "IN ARRIVO" seguono le altre, altrimenti in
   una riga mista le piene sarebbero piu' strette delle vuote. */
.om-featured > .om-big-vuota,
.om-strip-track > .om-thumb-vuota {
    width: 94% !important;
    margin-left: auto;
    margin-right: auto;
}

/* La fila dei riquadri in evidenza e' passata da cinque a sei
   direttamente in includes/main_content.php, dove la regola e'
   scritta: quel blocco <style> sta nel corpo della pagina e si
   carica DOPO i fogli esterni, quindi vinceva su qualsiasi cosa
   scritta qui. */

/* ----------------------------------------------------------
   Linea fra i riquadri in evidenza e la vetrina
   ----------------------------------------------------------
   Separa due cose diverse: sopra si gioca, sotto si guarda chi
   ha gia' vinto. Senza una riga sembravano un blocco solo.

   NOTA sui mezzi pixel: a 0.5px il browser disegna la riga piu'
   sottile che il monitor permette. Su uno schermo normale resta
   un pixel; su un telefono o un monitor ad alta densita' e'
   davvero mezza riga. Non c'e' modo di ottenere meno di un
   pixel fisico, e fingere il contrario sarebbe inutile. */
.app-main-viewport .slider-wrapper {
    border-top: 0.5px solid #FF8C00;
}

/* ----------------------------------------------------------
   Vetrina piu' in alto, per togliere la barra di scorrimento
   ----------------------------------------------------------
   La colonna centrale mostrava una barra verticale perche' il
   contenuto superava l'altezza disponibile di poche decine di
   pixel. Si recuperano dagli spazi vuoti attorno alla vetrina,
   che erano generosi, invece di rimpicciolire quello che si
   legge. */
/* Misurato: il contenuto superava l'altezza visibile di 14 pixel
   soltanto (630 contro 644). Qui se ne recuperano una ventina, tutti
   da spazi vuoti, senza rimpicciolire niente di leggibile. */
/* I selettori portano davanti un antenato per una ragione precisa:
   queste quattro regole sono scritte anche dentro i blocchi <style>
   di main_content.php e slider_vincitori.php, che stanno nel corpo
   della pagina e si caricano DOPO i fogli esterni. A parita' di
   specificita' vincevano loro. Con l'antenato davanti la specificita'
   e' piu' alta e l'ordine non conta piu'. */
.app-main-viewport .om-zone { padding-bottom: 2px; }
.app-main-viewport .slider-wrapper { padding: 8px 0 2px; }
.app-main-viewport .slider-container { padding-top: 10px; padding-bottom: 10px; }
.app-main-viewport .custom-scrollbar-container { margin-top: 2px; }

/* ----------------------------------------------------------
   Otto pixel dal bordo per i riquadri dorati
   ----------------------------------------------------------
   Le due file arrivavano a filo del bordo della colonna e il
   primo e l'ultimo riquadro sembravano tagliati. Il rientro
   sta sul CONTENITORE e non sui riquadri: messo su quelli, la
   griglia li avrebbe comunque allargati per riempire la riga e
   non sarebbe cambiato niente. */
.app-main-viewport .om-featured {
    padding-left: 8px;
    padding-right: 8px;
}
.app-main-viewport .om-strip-view {
    padding-left: 8px;
    padding-right: 8px;
}

/* ----------------------------------------------------------
   L'esito, in obliquo sul riquadro
   ----------------------------------------------------------
   Compare SOLO su quelli gia' giocati. "Non indovinato" e "non
   ancora provato" sono due cose diverse: scriverle uguali
   direbbe a chi non ha ancora giocato che ha perso.

   Niente piu' fascia colorata dietro: resta la sola scritta,
   verde se indovinato e arancione se no. Per restare leggibile
   sopra una fotografia qualsiasi ha un contorno bianco, fatto
   con quattro ombre incrociate: senza, su uno sfondo chiaro il
   giallo-verde sparirebbe.

   La scritta non intercetta il tocco, altrimenti coprirebbe il
   riquadro e il clic non arriverebbe al pulsante sotto. */
.om-esito {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%) rotate(-18deg);
    text-align: center;
    padding: 0 2px;
    font-weight: 900;
    font-size: 0.6rem;
    letter-spacing: 0;
    white-space: normal;
    line-height: 1.05;
    pointer-events: none;
    z-index: 4;
    text-shadow:
         1px  1px 0 #fff, -1px  1px 0 #fff,
         1px -1px 0 #fff, -1px -1px 0 #fff,
         0 2px 4px rgba(0,0,0,0.35);
}
.om-esito-si { color: #1f8a3f; }
.om-esito-no { color: #FF6600; }

.om-big .om-esito { font-size: 0.6rem; }

/* ----------------------------------------------------------
   Via la fascetta dei punti sui riquadri gia' giocati
   ----------------------------------------------------------
   Su un oggetto gia' giocato il punteggio non serve piu', e due
   scritte sovrapposte sullo stesso riquadro si disturbavano.
   Sui riquadri ANCORA DA GIOCARE la fascetta resta: e' l'unico
   posto in cui si vede quanto vale un oggetto prima di aprirlo. */
/* La classe e' "giocato", non "indovinato": la fascetta va tolta
   anche a chi ha sbagliato, altrimenti resterebbe solo sui rossi. */
.om-giocato .om-thumb-points,
.om-giocato .om-big-points { display: none !important; }

@media (max-width: 560px) {
    .om-thumb .om-esito { font-size: 0.52rem; }
    .om-big .om-esito { font-size: 0.72rem; }
}

/* ----------------------------------------------------------
   Su telefono: tutti i riquadri grandi dorati, due per riga
   ----------------------------------------------------------
   Per un periodo su telefono se ne mostrava uno solo (il
   penultimo caricato). Su richiesta sono stati rimessi tutti,
   due per riga, come la griglia magenta qui sotto. */
@media (max-width: 560px) {
    /* La fascia dorata e' la fila "hero" degli oggetti col flash
       attivo: riquadri grandi, piu' grandi delle miniature magenta,
       scorrevoli col dito (le frecce spariscono). Si nascondono le
       caselle vuote "IN ARRIVO", cosi' restano solo gli oggetti veri.
       La vera fascia dorata e' .om-featured-track (non .om-featured,
       che e' CSS morto). */
    .om-featured-strip .om-arrow { display: none; }
    /* L'!important e' necessario: la base ".om-featured-view { overflow:
       hidden }" sta nel blocco <style> di main_content.php, che si
       carica DOPO questo foglio e a parita' di specificita' vincerebbe,
       lasciando la fascia non scorrevole. */
    .om-featured-view {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .om-featured-track {
        /* Circa un box e mezzo per schermata: grandi, e si capisce che
           si scorre perche' si intravede il successivo. */
        grid-auto-columns: calc((100% - 10px) / 1.5) !important;
        gap: 10px !important;
        transform: none !important;
        transition: none;
    }
    .om-featured-track > .om-big { scroll-snap-align: start; }
    .om-featured-track > .om-big-vuota { display: none !important; }
    .om-big .om-esito { font-size: 1rem; padding: 7px 0; letter-spacing: 2px; }
}

/* ----------------------------------------------------------
   Su telefono la fascia magenta mostra tutte le miniature
   ----------------------------------------------------------
   Per un periodo mostrava solo gli oggetti gia' giocati e
   spariva del tutto a chi non aveva ancora giocato. Su richiesta
   ora mostra tutte le miniature reali (nascoste solo le caselle
   vuote di riserva) e resta sempre visibile. */
@media (max-width: 560px) {
    /* La fascia magenta mostra TUTTE le miniature, non solo quelle
       gia' giocate: su richiesta sono state rimesse tutte. Restano
       nascoste solo le caselle vuote di riserva, e la fascia non
       sparisce piu' quando non hai ancora giocato niente. */
    .om-strip-track > .om-thumb:not(.om-thumb-vuota) { display: block !important; }
    .om-strip-track > .om-thumb-vuota { display: none !important; }
    .om-strip.om-strip-senza-giocati { display: block !important; }
}

/* ----------------------------------------------------------
   La fotografia intera nel riquadro di dettaglio
   ----------------------------------------------------------
   Il ritaglio e' quadrato e viene ritagliato al centro
   (object-fit: cover): sulla fotografia INTERA la stessa regola
   taglierebbe via i bordi, cioe' proprio il contesto che si e'
   guadagnato indovinando. Qui si vede tutta, con il suo
   rapporto, su fondo scuro. */
.om-detail-figure img.om-detail-intera {
    aspect-ratio: auto;
    max-height: 62vh;
    object-fit: contain;
    background: #1a1a1a;
}

/* ----------------------------------------------------------
   I pulsanti dell'intestazione, cinque pixel piu' bassi
   ---------------------------------------------------------- */
.btn-help, .btn-profile, .btn-avvisi { padding-top: 8px; padding-bottom: 8px; }
.btn-logout { padding-top: 8px; padding-bottom: 8px; }

@media (max-width: 768px) {
    /* Su telefono le altezze sono dichiarate: 31 e 25 meno cinque.
       NOTA: 26 pixel sono parecchio sotto i 44 che il dito centra
       senza sbagliare. Se ti accorgi di premere il pulsante vicino,
       la causa e' questa. */
    .btn-help, .btn-profile, .btn-avvisi { min-height: 26px !important; }
    .btn-logout { min-height: 20px !important; }
}

/* ----------------------------------------------------------
   Su telefono: prima il riquadro grande, poi lo storico
   ----------------------------------------------------------
   Nel codice la fascia delle miniature viene prima, perche' su
   schermo largo e' l'elenco di tutti gli oggetti. Su telefono
   pero' la fascia mostra solo quello che hai gia' giocato, cioe'
   il passato, mentre il riquadro grande e' l'oggetto su cui si
   gioca adesso: in cima va quello.

   Si usa l'ordine del contenitore flessibile, cosi' il codice
   resta com'e' e su schermo largo non cambia niente. */
@media (max-width: 560px) {
    .app-main-viewport .om-zone {
        display: flex;
        flex-direction: column;
    }
    /* In cima la fascia dorata (gli oggetti col flash attivo), poi il
       claim, poi la fascia magenta (flash scaduto). La fascia dorata e'
       .om-featured-strip, non .om-featured. */
    .app-main-viewport .om-zone > .om-featured-strip { order: 1; }
    .app-main-viewport .om-zone > .om-claim          { order: 2; }
    .app-main-viewport .om-zone > .om-strip          { order: 3; }
}

/* ----------------------------------------------------------
   Le miniature piccole diventano fucsia
   ----------------------------------------------------------
   Solo la fascia scorrevole: i riquadri grandi restano dorati,
   cosi' le due file si distinguono a colpo d'occhio invece di
   sembrare lo stesso elenco ripetuto.

   I selettori portano davanti il contenitore perche' il colore
   d'origine e' scritto nel blocco <style> di main_content.php,
   che si carica dopo i fogli esterni e a parita' di
   specificita' vincerebbe. */
.app-main-viewport .om-strip-track > .om-thumb {
    border-color: #FF00FF;
    /* Il bordo era di 2 pixel mentre i riquadri grandi ne hanno 3:
       su telefono la differenza si vedeva e sembrava un'altra cosa. */
    border-width: 3px;
}
/* La fascetta dei punti usa un magenta piu' scuro, non lo stesso del
   bordo: il bianco sopra il magenta pieno sta al limite della
   leggibilita', e quella scritta deve restare chiara. */
.app-main-viewport .om-strip-track > .om-thumb .om-thumb-points {
    background: #C2009B;
}
/* Le caselle in attesa seguono, ma spente: devono restare
   riconoscibili come "non c'e' ancora niente". */
.app-main-viewport .om-strip-track > .om-thumb-vuota {
    border-color: #f0bdf0;
    border-width: 3px;
}
.app-main-viewport .om-strip-track > .om-thumb-vuota .om-thumb-points {
    background: #e3a9e3;
}

/* Otto pixel fra una miniatura e l'altra, come fra i riquadri
   grandi: la fascia ne aveva sei su telefono. */
.app-main-viewport .om-strip-track { gap: 8px !important; }

/* ----------------------------------------------------------
   Aiuto, Avvisi e Profilo: sfondo dorato, niente contorno
   ----------------------------------------------------------
   Erano arancioni con un bordo dorato di 2 pixel. Ora il
   dorato e' il fondo e il contorno sparisce.

   IL TESTO DIVENTA SCURO, e non e' un'aggiunta arbitraria:
   bianco su #D4AF37 ha un rapporto di contrasto di circa 2 a 1,
   sotto qualunque soglia di leggibilita'. Le scritte sarebbero
   rimaste ma non si sarebbero lette. Con il testo scuro il
   rapporto sale sopra 8. */
.auth-buttons .btn-help,
.auth-buttons .btn-profile,
.auth-buttons .btn-avvisi {
    background: #D4AF37;
    border: none;
    color: #2b2412;
}
.auth-buttons .btn-help:hover,
.auth-buttons .btn-profile:hover,
.auth-buttons .btn-avvisi:hover {
    background: #c49f2a;
    border: none;
    color: #2b2412;
}
/* La pallina degli avvisi resta rossa: e' un richiamo, e sul
   dorato si vede anche meglio di prima. */

/* ----------------------------------------------------------
   IL VELO DEL RIQUADRO DI BENVENUTO DEVE SPARIRE DAVVERO
   ----------------------------------------------------------
   Guasto trovato in produzione il 7 ottobre 2026: con il sito
   caricato e perfettamente disegnato, nessun Oggetto Misterioso
   rispondeva al clic. Diciotto su diciotto risultavano coperti da
   DIV.ingresso-velo, largo quanto lo schermo, z-index 3000,
   opacita' 0 e pointer-events auto: un vetro invisibile.

   Perche' succedeva. Il riquadro di benvenuto parte con
   l'attributo hidden, e il browser lo nasconde con la regola
   [hidden] { display: none }. Quella regola pero' ha la STESSA
   specificita' di .ingresso-velo, e a parita' di specificita'
   vince il foglio del sito, che diceva display: flex. Quindi
   hidden non faceva niente. L'opacita' a zero lo rendeva
   invisibile, ma l'opacita' non toglie il tocco: il velo restava
   li' a intercettare tutto.

   Si vedeva solo da collegati e solo dalla seconda visita del
   giorno: alla prima il riquadro si apre davvero, e da scollegati
   non viene nemmeno generato. Ed e' il motivo per cui in incognito
   sembrava tutto a posto.

   Sta qui e non dentro il riquadro perche' questo foglio e' gia'
   caricato su tutte le pagine: correggere qui rimette in piedi il
   sito senza dover toccare nient'altro. La stessa riga e' anche
   in includes/om_ingresso.php, dove sta il velo.

   Non togliere questa regola e non sostituirla con un cambio di
   opacita'. */
.ingresso-velo[hidden] { display: none; }