/* ========================================================== QuizZen - correzioni per telefono ========================================================== PERCHE' UN FOGLIO A PARTE Si carica DOPO style.css, quindi vince a parita' di specificita' senza bisogno di rincorrerla. Ed e' un file che nessun altro sta modificando: le correzioni per telefono non si scontrano con il lavoro in corso su style.css e main_content.php. IL PROBLEMA CHE RISOLVE Su un telefono, aprendo il sito da collegati, prima di vedere un solo Oggetto Misterioso bisognava scorrere oltre: la vetrina dei vincitori, il riquadro arancione del saluto e la barra "Come Funziona". Tre riquadri che occupavano piu' di meta' schermo per dire tre cose brevi. Il gioco cominciava sotto la piega, cioe' non si vedeva. Il criterio, qui sotto, e' uno solo: nessun riquadro di servizio deve costare piu' di una riga quando il suo contenuto e' una riga. */ @media (max-width: 768px) { /* ------------------------------------------------------ Il saluto: da quattro righe a una ------------------------------------------------------ Diceva nome, livello, l'etichetta "Punti Scintilla" e il numero, uno sotto l'altro, dentro un riquadro con venti pixel di respiro per lato. Sono quattro righe per tre informazioni che stanno in una. */ .user-info-strip { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px !important; margin-bottom: 8px !important; border-radius: 12px; } .user-info-strip .user-profile-info { flex-direction: row; align-items: center; gap: 7px; min-width: 0; flex: 1; } .user-info-strip .lvl-icon-big { font-size: 1.1rem; } .user-info-strip .user-texts { flex-direction: row; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; } .user-info-strip .nick { font-size: 0.92rem; line-height: 1.2; white-space: nowrap; } /* Il livello non e' un titolo, e' una nota: sta accanto al nome, piu' piccolo, non su una riga sua. */ .user-info-strip .rank { font-size: 0.68rem; opacity: 0.85; line-height: 1.2; } .user-info-strip .user-stats { flex: none; text-align: right; } .user-info-strip .scintille-count { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; } /* "Punti Scintilla" per esteso costava una riga intera per etichettare un numero che ha gia' la sua icona ovunque nel sito. */ .user-info-strip .sc-etichetta { font-size: 0.52rem; letter-spacing: 0.5px; opacity: 0.8; } .user-info-strip .sc-valore { font-size: 1.15rem; font-weight: 900; } /* ------------------------------------------------------ "Come Funziona": barra, non riquadro ------------------------------------------------------ E' una fisarmonica chiusa: finche' resta chiusa deve costare quanto una riga di testo. */ .explanation-box { margin: 8px 0 !important; border-radius: 12px; } .explanation-head { padding: 8px 12px !important; font-size: 0.92rem !important; } /* Il titolo andava a capo su due righe: su una barra chiusa raddoppia l'altezza per niente. */ .explanation-head .titolo-seconda-riga { display: inline !important; } /* ------------------------------------------------------ La vetrina dei vincitori ------------------------------------------------------ Una scheda occupava quasi un terzo dello schermo per dire che una persona ha vinto cinque Scintille. */ .slider-wrapper { padding: 4px 0 !important; } .premium-card .card-header { padding: 3px 6px !important; font-size: 0.55rem !important; line-height: 1.25; } .premium-card .card-body { padding: 6px 8px !important; gap: 8px !important; } .premium-card .img-prodotto-container, .premium-card .img-prodotto { width: 38px !important; height: 38px !important; } .premium-card .info-premio h3 { font-size: 0.8rem !important; margin-bottom: 1px !important; } .premium-card .codice-utente { font-size: 0.5rem !important; } .premium-card .valore-commerciale, .premium-card .valore-commerciale-line { font-size: 0.62rem !important; } .custom-scrollbar-container { margin-top: 4px !important; } /* ------------------------------------------------------ Il podio ------------------------------------------------------ Tre riquadri alti quanto il primo Oggetto Misterioso. Restano i primi tre, ma non devono costare mezza schermata. */ .sidebar-right .podio-posto { padding: 5px 2px !important; } .sidebar-right .podio-nome { font-size: 0.66rem !important; line-height: 1.15; } .sidebar-right .podio-punti { font-size: 0.66rem !important; } .sidebar-right .podio-gradino { font-size: 1.1rem !important; line-height: 1.1; } .sidebar-right .titolo-classifica { margin-bottom: 6px !important; } /* ------------------------------------------------------ Il piede ------------------------------------------------------ Cinque voci che andavano a capo e occupavano due righe fisse in fondo a ogni schermata. */ .app-footer-area { font-size: 0.68rem; } .app-footer-area a, .app-footer-area span { padding: 2px 4px; } } /* Telefono stretto: le stesse cose, ancora piu' compatte. */ @media (max-width: 400px) { .user-info-strip .nick { font-size: 0.86rem; } .user-info-strip .rank { font-size: 0.62rem; } .user-info-strip .sc-valore { font-size: 1.05rem; } .explanation-head { font-size: 0.86rem !important; } .premium-card .info-premio h3 { font-size: 0.74rem !important; } } /* ========================================================== Richieste del 3 ottobre 2026 ========================================================== */ @media (max-width: 768px) { /* ------------------------------------------------------ Il piede: meno della meta' ------------------------------------------------------ Era 0.78rem e andava a capo su due righe fisse in fondo a ogni schermata. A 0.36rem sta su una riga sola. */ .piede-sito { font-size: 0.36rem !important; gap: 7px !important; padding: 0 8px !important; flex-wrap: nowrap !important; letter-spacing: 0; } .piede-sito a, .piede-sito span { white-space: nowrap; } /* ------------------------------------------------------ Intestazione: pulsanti a sinistra, dati a destra ------------------------------------------------------ I quattro pulsanti stavano al centro e sbordavano sopra la fascia nera, sul disegno dell'intestazione. Ora stanno dentro la fascia, allineati a sinistra, e il riquadro con punti e persone collegate torna a destra: era nascosto perche' con i pulsanti grandi non ci stava, ora lo spazio c'e'. NOTA: i pulsanti scendono da 44 a 31 pixel di altezza, cioe' il 30 per cento chiesto. Sotto i 44 il dito centra meno facilmente il bersaglio: se ti accorgi di sbagliare pulsante, e' questa la ragione e basta dirlo. */ /* L'immagine dell'intestazione e' alta 72 pixel; quello che resta sotto, fino al bordo dorato, e' la fascia nera. Ancorando i pulsanti IN ALTO con 76 pixel di stacco cadono sempre dentro la fascia, qualunque sia l'altezza totale dell'intestazione, che cambia tre volte fra 768 e 360 pixel di schermo. Centrandoli in verticale finivano invece sopra il disegno. */ .header-ui-layout { justify-content: flex-start !important; align-items: flex-start !important; padding: 76px 8px 0 !important; } .auth-buttons { width: 100%; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 5px !important; align-items: center; } .btn-help, .btn-profile, .btn-avvisi { min-height: 31px !important; padding: 0 9px !important; font-size: 0.6rem !important; margin: 0 !important; border-radius: 8px; } .btn-logout { min-height: 25px !important; padding: 0 8px !important; font-size: 0.5rem !important; border-radius: 7px; } .pallino-avvisi { font-size: 0.5rem; } /* Il riquadro dei dati torna, ma in piccolo e su due righe: le Scintille sopra, le persone collegate sotto. */ .stats-box { display: flex !important; flex-direction: column; align-items: flex-end; gap: 0 !important; margin-left: auto; order: 10; background: rgba(255, 255, 255, 0.88); border-width: 1px; border-radius: 7px; padding: 3px 7px !important; line-height: 1.1; } .stats-box .stat-col { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; } .stats-box .stat-lbl { font-size: 0.42rem !important; } .stats-box .stat-val { font-size: 0.62rem !important; } .stats-box .stat-val img { width: 10px !important; height: 10px !important; margin-right: 2px !important; } /* ------------------------------------------------------ La scheda dorata del vincitore ------------------------------------------------------ 1. La foto cresce di cinque pixel in alto e a sinistra, cosi' se ne vede una porzione piu' ampia. 2. La foto sale e parte dalla stessa riga del nickname. 3. ID e totale scendono al fondo della foto, e "Scintille in totale" cala del trenta per cento. Con il titolo senza altezza minima il riquadro si accorcia da solo. */ .premium-card .card-body { align-items: stretch !important; padding: 6px 8px 7px !important; gap: 7px !important; } .premium-card .info-premio { display: flex; flex-direction: column; justify-content: space-between; transform: none !important; height: auto !important; } /* Era alto 62 pixel a vuoto: e' quello che teneva su il riquadro anche quando il nickname era una parola sola. */ .premium-card .titolo-premio { min-height: 0 !important; margin-bottom: 3px !important; line-height: 1.1 !important; } .premium-card .img-prodotto-container, .premium-card .img-prodotto { width: 53px !important; height: 53px !important; align-self: flex-start; margin-top: -5px !important; margin-left: -5px !important; flex: 0 0 53px !important; } .premium-card .valore-commerciale-line { font-size: 0.43rem !important; line-height: 1.15; } .premium-card .valore-numero { font-size: 0.82rem; font-weight: 900; } /* ------------------------------------------------------ La fascia si scorre col dito ------------------------------------------------------ Le frecce spariscono: su uno schermo che si tocca sono un bersaglio scomodo e rubano spazio alle schede. Al loro posto lo scorrimento nativo, quello con l'inerzia. Lo scorrimento automatico continua finche' nessuno tocca: se ne occupa il codice in slider_vincitori.php. */ .slider-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; /* Niente scorrimento a scatti: litigherebbe con quello automatico, che muove la fascia di un pixel ogni venti millesimi di secondo, e la farebbe sobbalzare. */ scroll-snap-type: none; scrollbar-width: none; padding: 6px 10px !important; } .slider-container::-webkit-scrollbar { display: none; } .arrow { display: none !important; } } /* ========================================================== Il riquadro di dettaglio su telefono ========================================================== E' il posto dove si gioca, ed era la cosa piu' rotta del sito su uno schermo verticale: nasceva dentro la colonna centrale, larga poco piu' di duecento pixel, con overflow: hidden, quindi il contenuto veniva tagliato; si sovrapponeva a quello che c'era sotto; e il comando di chiusura galleggiava a settantotto pixel dal fondo occupando mezzo schermo. Qui diventa un pannello che copre lo schermo intero e scorre, con l'ordine di lettura deciso da Danilo: immagine, punti, vincitore, campo di risposta, condivisione. */ @media (max-width: 768px) { .om-detail { /* fixed e non absolute: deve coprire lo schermo, non il ritaglio di colonna in cui e' scritto. */ position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 2000 !important; border-radius: 0 !important; /* Scorre invece di tagliare: era overflow: hidden, ed e' il motivo per cui mezzo contenuto non si vedeva. */ overflow-y: auto !important; -webkit-overflow-scrolling: touch; /* In fondo resta posto per il pulsante di chiusura, che non galleggia piu' in mezzo allo schermo. */ padding: 12px 14px 18px !important; box-shadow: none !important; } .om-detail-grid { display: flex !important; flex-direction: column; gap: 10px !important; height: auto !important; max-height: none !important; overflow: visible !important; } /* L'immagine non puo' prendersi tutto: oltre meta' schermo, il campo di risposta finisce sotto la tastiera quando si apre. */ .om-detail-figure { order: 1; } .om-detail-figure img { width: 100%; max-height: 42vh; object-fit: contain; border-radius: 14px; } /* L'ordine di lettura voluto. Nel codice il vincitore viene prima dei punti: qui si invertono senza toccare il PHP. */ .om-detail-main { order: 2; display: flex; flex-direction: column; gap: 8px; } .om-points-center { order: 1; margin: 0 !important; } .om-detail-winner { order: 2; font-size: 0.8rem; } .flash-deadline { order: 3; font-size: 0.72rem; } .om-play-zone { order: 4; } .feedback-message { order: 5; } .om-condivisione { order: 6; } .om-points-number { font-size: 2rem; } .om-points-label { font-size: 0.68rem; } /* Il campo deve restare raggiungibile con la tastiera aperta: alto quanto basta al dito, e il testo a 16 pixel perche' sotto quella misura iPhone ingrandisce la pagina da solo quando ci si scrive dentro, e il riquadro esce dallo schermo. */ .om-play-zone input[type="text"] { width: 100%; min-height: 46px; font-size: 16px; box-sizing: border-box; } .om-play-zone button { min-height: 46px; font-size: 0.9rem; } /* Il comando di chiusura: una X in alto a destra, ferma, al posto della barra che galleggiava in fondo e si portava via mezza schermata. */ .om-detail-chiudi { position: fixed !important; top: 8px !important; right: 10px !important; left: auto !important; bottom: auto !important; transform: none !important; width: 40px; height: 40px; padding: 0 !important; border-radius: 50% !important; font-size: 0 !important; z-index: 2001; display: flex; align-items: center; justify-content: center; } /* Il testo lungo sparisce e resta il simbolo: su un telefono non si "clicca fuori dal riquadro", non c'e' un fuori. */ .om-detail-chiudi .om-detail-chiudi-nota { display: none !important; } .om-detail-chiudi::before { content: "\00d7"; font-size: 1.6rem; line-height: 1; font-weight: 700; } }