/* css/mobile-projector.css Correzioni mobile per la modalità Proiettore e la Cerimonia di Premiazione. Queste schermate sono pensate per essere proiettate su schermo grande davanti a un pubblico (aula/torneo): usano misure fisse (larghezze minime, altezze in vh, font molto grandi) adeguate a quel contesto ma non a uno smartphone tenuto in verticale. Stessa soglia (720px) già usata altrove nella rifinitura mobile, per coerenza. */ @media (max-width: 720px) { /* ──────────────────────────────────────────────────────────── 1) Podio Top 3 (Dashboard del Proiettore) I 3 blocchi (oro/argento/bronzo) hanno min-width:140px, senza possibilità di andare a capo: 3 blocchi + margini superano sempre la larghezza di un telefono, con 2°/3° classificato tagliati fuori senza alcun modo di raggiungerli. Impilati in colonna sotto i 720px; l'etichetta "1°/2°/3°" già presente in ciascun blocco rende comunque chiaro il piazzamento anche senza l'effetto "podio" affiancato. ──────────────────────────────────────────────────────────── */ .proj-podium { flex-direction: column; align-items: center; gap: 1.2rem; } /* ──────────────────────────────────────────────────────────── 2) Stendardi decorativi (Classifica / Delta ELO del Proiettore) Le due immagini "Arazzo Sinistro/Destro" vengono dimensionate via JS in base all'altezza dello schermo (projectorEngine.js), non alla larghezza: su un telefono (stretto ma alto) diventano sproporzionatamente larghe e schiacciano la tabella dei dati in una striscia sottile. Sono puramente decorative: le nascondiamo sotto i 720px per lasciare tutta la larghezza alla tabella vera, piuttosto che provare a farle scalare in modo proporzionalmente corretto sia in altezza che in larghezza (complesso e di scarso valore per un elemento solo ornamentale). ──────────────────────────────────────────────────────────── */ .proj-tapestry { display: none !important; } /* ──────────────────────────────────────────────────────────── 3) Certificato (Cerimonia di Premiazione) Nome giocatore e titolo hanno un font fisso da 3rem (~48px), pensato per essere leggibile da lontano su un proiettore: su schermo stretto il testo va a capo su più righe, e siccome la card ha un'altezza fissa (72vh) senza scroll, il contenuto in eccesso finisce per sovrapporsi visivamente ai bottoni Indietro/Avanti/Esci (posizionati fissi in fondo allo schermo). Font ridotti per un caso normale già corretto, più uno scroll interno di sicurezza per nomi/titoli particolarmente lunghi che andassero comunque oltre lo spazio disponibile. */ .ceremony-player-name, .ceremony-title-name { font-size: 1.7rem; } #ceremony-card { padding: 1.8rem 1.2rem; overflow-y: auto; } /* ──────────────────────────────────────────────────────────── 4) Tabelle Classifica / Delta ELO / Classifica per Genere (Proiettore) Le tabelle usano table-layout:fixed con colonne Pos/Punti/ELO/Var a larghezza fissa in rem (pensate per un proiettore largo): su telefono, sottraendo quelle larghezze fisse, alla colonna del nome restava pochissimo spazio — troppo poco perfino per i puntini di troncamento "...", il nome finiva per sparire del tutto pur avendo già overflow:hidden/ellipsis impostati altrove. Le colonne fisse si restringono qui (il colgroup usa larghezze inline, serve !important), e il font si riduce leggermente per guadagnare ulteriore spazio orizzontale. */ .proj-sticky-header colgroup col:nth-child(1), .proj-data-rows colgroup col:nth-child(1) { width: 2.3rem !important; } .proj-sticky-header colgroup col:nth-child(3), .proj-data-rows colgroup col:nth-child(3), .proj-sticky-header colgroup col:nth-child(4), .proj-data-rows colgroup col:nth-child(4) { width: 3.4rem !important; } /* Le intestazioni (th) e le celle dati (td) hanno anche una propria larghezza dichiarata separatamente da quella del colgroup qui sopra (vedi .th-pos/.th-pts/.th-elo/.th-var e .td-pos/.td-pts/ .td-elo/.td-var in css/projector.css): senza allinearle alle stesse misure ristrette, le due larghezze in conflitto causavano la sovrapposizione del testo delle intestazioni. */ .proj-sticky-header th.th-pos, .proj-data-rows td.td-pos { width: 2.3rem !important; } .proj-sticky-header th.th-pts, .proj-data-rows td.td-pts, .proj-sticky-header th.th-elo, .proj-data-rows td.td-elo, .proj-sticky-header th.th-var, .proj-data-rows td.td-var { width: 3.4rem !important; } .proj-sticky-header th, .proj-data-rows td { padding-left: 0.5rem; padding-right: 0.5rem; } /* .th-pos ha nel CSS originale un padding-left:1.5rem dichiarato specificamente (per allinearlo otticamente sul proiettore), più specifico della regola generale qui sopra: senza sovrascriverlo esplicitamente, a "POS" restavano pochi pixel di spazio reale, causando la sovrapposizione con l'intestazione successiva. */ .proj-sticky-header th.th-pos { padding-left: 0.5rem !important; } /* Anche restringendo le colonne e il padding, il testo delle intestazioni (maiuscolo, grassetto, con letter-spacing 0.08em, pensato per essere leggibile da lontano) richiedeva comunque più spazio di quello disponibile nelle colonne ristrette (misurato: "Pos" da solo richiede ~41px, contro i ~21px rimasti dopo padding) — da qui lo sconfinamento visivo nella colonna successiva. overflow:hidden aggiunto come rete di sicurezza. */ .proj-sticky-header th { font-size: 0.72rem; letter-spacing: 0.02em; overflow: hidden; } .proj-data-rows table { font-size: 0.95rem; } /* Classifica per Genere: Maschile/Femminile affiancate a metà larghezza lasciavano alla colonna nome uno spazio ancora minore che nelle altre tabelle. Impilate in colonna, stessa soluzione già adottata per l'equivalente dentro l'app (vedi .gender-rankings-grid qui sopra). */ .proj-gender-grid { grid-template-columns: 1fr !important; gap: 0.8rem !important; overflow-y: auto; } /* ──────────────────────────────────────────────────────────── 5) Classifica per Scacchiera (solo percorso a squadre) Stesso problema delle altre tabelle, ma con una quinta colonna ("Partite") e una struttura leggermente diversa (.proj-board-body invece di .proj-data-rows): nessuna delle regole precedenti la raggiungeva. Stesso identico trattamento — colonne fisse ristrette, stesso padding-left speciale su .td-pos da correggere (uguale al bug già risolto sull'intestazione). */ .proj-board-body colgroup col:nth-child(1) { width: 2.3rem !important; } .proj-board-body colgroup col:nth-child(3), .proj-board-body colgroup col:nth-child(4) { width: 3.4rem !important; } .proj-board-body colgroup col:nth-child(5) { width: 3.4rem !important; } .proj-board-body td.td-pos { width: 2.3rem !important; padding-left: 0.5rem !important; } .proj-board-body td.td-pts, .proj-board-body td.td-games { width: 3.4rem !important; } .proj-board-body td.td-elo { width: 3.4rem !important; } .proj-board-body td { padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.95rem; } /* La stessa intestazione (.proj-sticky-header) è riusata anche qui, ma con 5 colonne invece di 3-4: le regole del punto 4 già restringono le colonne 1/3/4 — qui in più serve restringere anche la 5ª (ELO), assente negli altri casi. */ .proj-sticky-header colgroup col:nth-child(5) { width: 3.4rem !important; } .proj-sticky-header th.th-games { width: 3.4rem !important; } }