* { margin: 0; padding: 0; box-sizing: border-box; } /* Fattore di scala UI globale (slider "Scala interfaccia" nel menu Impostazioni, vedi main.js applyUiScale): moltiplica, via calc()/ composizione di transform scale(), la taglia di HUD/leaderboard/shop-panel/ toast/kill-feed/torte a spicchi in OGNI modalità (N=1/2/3/4) — impostato su :root così ogni regola sotto (incluse quelle già esistenti per l'ingrandimento 1.5x/2x touch/mouse) lo eredita senza bisogno di ripeterlo. Il fallback "1" nei var(--ui-scale, 1) sotto copre il primissimo frame prima che main.js applichi la preferenza salvata. */ :root { --ui-scale: 1; /* Compensa la scala fissa 2x di #hud/#leaderboard-panel sui viewport touch piccoli (vedi updateTouchViewportScale in main.js): resta al default 1 su desktop (mai scritto lì), quindi calc(2 * var(--ui-scale, 1) * var(--touch-viewport-scale, 1)) equivale esattamente a prima su desktop. */ --touch-viewport-scale: 1; /* Oro/legno chiaro già usato in giro per l'UI su valori in risalto (DNA, Prestigio, podio Top 10, "Codice stanza:" in Impostazioni — tutti #ffd166 hardcoded sparsi nel file): prima variabile CSS ufficiale per questo accento, qui usata da #room-btn. --accent-gold-rgb affianca la tripletta r,g,b per comporre sfumature translucide via rgba(var(...)) senza duplicare il valore esadecimale (stesso bisogno che ha già rgba(77, 159, 255, ...) per #info-btn, solo reso riusabile). */ --accent-gold: #ffd166; --accent-gold-rgb: 255, 209, 102; /* Altezza NON scalata di #hud-card (contenuto di #hud, barra stat in alto centro): padding 10+10=20 + riga #hud-bar 22px (icona più alta della track 18px, le altre icone/track della riga si allineano a quella) = 42px, calcolata sommando le regole sotto, non misurata a occhio. Serve a #important-banner (vedi sotto) per calcolare un top che segua la STESSA formula di scala di #hud (calc(2 * var(--ui-scale,1) * var(--touch-viewport-scale,1)), vedi #hud) invece di un offset fisso in px — altrimenti a scala UI alta (--ui-scale oltre ~114%, es. 130-150%) #hud cresce più in fretta di un top statico e il banner ci finisce sotto/sopra invece che restarci staccato. */ --hud-card-natural-height: 42px; } /* Stesso --ui-scale (slider "Scala interfaccia" in Impostazioni) applicato anche a Home e ai popup raggiungibili da lì (Impostazioni/Codice stanza/Come si gioca) — finora era solo su HUD/leaderboard/shop-panel in game. Nessuna variabile parallela: applyUiScale (main.js) scrive solo :root { --ui-scale }, quindi lo slider — che vive proprio dentro #settings-box, raggiungibile da qui — si riflette qui in tempo reale via cascata CSS, nessuna gestione JS dedicata necessaria. Scala solo il contenitore di Home (#login-screen) e le card dei popup (*-box), non i loro overlay a tutto schermo (*-modal, position:fixed inset:0 — scalarli non avrebbe effetto visibile utile e comporrebbe la trasformazione con quella della card figlia). [data-role="settings-box"] (i cloni per gli slot extra dello split-screen in game) resta escluso apposta: quello scala già (o no) secondo la logica dedicata di applySplitScreenPositioning, fuori scope qui. */ #login-screen, #settings-box, #room-box, #info-box { transform: scale(var(--ui-scale, 1)); } html, body { width: 100%; height: 100%; overflow: hidden; background: #0e1116; font-family: system-ui, "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", sans-serif; touch-action: none; } #game-canvas { display: block; width: 100vw; height: 100vh; cursor: crosshair; touch-action: none; } /* --- Split-screen locale (2-4 giocatori sullo stesso schermo) --- Costruito/rimosso dinamicamente da main.js (buildViewportGrid/ teardownSplitScreen), MAI presente per il caso a un solo giocatore locale: #game-canvas e il resto del DOM per-giocatore restano allora diretti figli di , e le regole sopra (100vw/100vh, position:fixed di #hud/#shop-panel/ecc. nelle regole più sotto) restano le uniche applicate, bit-per-bit come prima di questa milestone. */ #viewport-grid { position: fixed; inset: 0; z-index: 1; display: grid; gap: 2px; background: #000; } #viewport-grid[data-layout="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } /* N=3: griglia 2x2, il 4° quadrante (basso-dx, auto-placement riga-per-riga) è occupato da #leaderboard-panel.leaderboard-quadrant invece che da un viewport di gioco — vedi placeLeaderboardForLayout in main.js. */ #viewport-grid[data-layout="3"], #viewport-grid[data-layout="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .viewport-cell { position: relative; overflow: hidden; background: #04141c; } /* Il canvas riempie la propria cella (non più l'intero viewport): vince su #game-canvas{width:100vw} grazie alla combinazione #id+.class+elemento, senza dover duplicare la regola per ogni id suffissato (#game-canvas-1, #game-canvas-2, ...) dei cloni degli slot extra. */ #viewport-grid .viewport-cell canvas { width: 100%; height: 100%; } /* #leaderboard-panel è condiviso (un solo elemento, mai clonato): per N=3 diventa il 4° quadrante della griglia, in-flow (non più un overlay fixed) — position:relative+.class ha specificità sufficiente per vincere su #leaderboard-panel{position:fixed}. */ #leaderboard-panel.leaderboard-quadrant { position: relative; inset: auto; width: 100%; height: 100%; border-radius: 0; z-index: 1; /* A differenza di HUD/shop-panel (dentro un .viewport-cell già overflow:hidden), qui il pannello È il figlio diretto della griglia: serve il proprio overflow:hidden per contenere lo scale(--ui-scale) del nuovo slider "Scala interfaccia" (fino a 1.5x) senza farlo traboccare nelle celle vicine — stesso identico contenimento che le altre celle ottengono gratis da .viewport-cell. */ overflow: hidden; } /* Per N=2/4 resta un overlay centrato SOPRA tutti i quadranti, ma FUORI dalla griglia (vedi placeLeaderboardForLayout in main.js — bug 4 del report: come figlio della griglia con grid-column/row esplicito su entrambi gli assi rompeva l'auto-placement dei viewport-cell). position: fixed + transform di centratura invece dell'ancoraggio in alto a destra di #leaderboard-panel di base; il transform qui dichiarato vince per specificità (id+classe) sulla regola scale(2) fissa di #leaderboard-panel, senza bisogno di azzerarlo via JS come per .leaderboard-quadrant. */ #leaderboard-panel.leaderboard-overlay { position: fixed; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%) scale(var(--ui-scale, 1)); z-index: 10; background: rgba(5, 10, 14, 0.85); } /* N=2 (split verticale a 2 giocatori): overlay centrata solo sull'asse ORIZZONTALE, ancorata in ALTO invece che al centro verticale — richiesta esplicita per lo split a 2, diversa da N=4 (che resta centrata su entrambi gli assi, regola sopra). Il selettore attributo [data-slots="2"] (impostato da placeLeaderboardForLayout in main.js) tiene questa regola scoped al solo caso N=2 senza toccare N=4, che condivide la stessa classe .leaderboard-overlay. Specificità (id+2classi+attributo) sufficiente a vincere sulla regola base sopra senza bisogno di !important. */ #leaderboard-panel.leaderboard-overlay[data-slots="2"] { top: 12px; transform: translateX(-50%) scale(var(--ui-scale, 1)); } /* Invito a riagganciarsi (bug A): copre l'intera cella di uno slot "licenziato" mentre altri slot locali restano in gioco (vedi enterEmptySlotState in main.js) — sopra il frame di gioco ormai fermo, così non sembra un blocco/crash ma un'attesa esplicita. */ .empty-slot-invite { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; background: rgba(5, 8, 11, 0.82); padding: 16px; text-align: center; } .empty-slot-invite-text { color: #f2f2f2; font-size: 15px; line-height: 1.4; } /* Mini-card di riaggancio: stesso aspetto di .lobby-slot in login, solo dentro il riquadro di gioco invece che in #lobby-extra-slots. Bug 1 del report: dimensione fissa (uguale per N=2/3/4) invece che proporzionata allo spazio nero disponibile in QUESTA cella — --empty-slot-card-scale è calcolato da sizeEmptySlotCard in main.js in base al lato corto reale della .viewport-cell dello slot (stesso principio del transform:scale già usato per #lobby-columns/--lobby-fit-scale). transform, non width/height, così l'intera card (canvas, frecce, testo, barra hold) cresce/rimpicciolisce in blocco mantenendo le proporzioni interne; .viewport-cell{overflow:hidden} resta il backstop se lo scale la spingesse oltre i bordi (stesso backstop già usato da HUD/shop-panel split-screen, vedi applySplitScreenPositioning). */ .empty-slot-reclaim-card { background: rgba(255,255,255,0.08); transform: scale(var(--empty-slot-card-scale, 1)); } /* Istruzione hold-Start (bug 2): a differenza delle mini-card di lobby (dove basta il bottone "Gioca" a dare contesto alla barra), qui va detto esplicitamente cosa fare — stessa dimensione/colore di .lobby-slot-label invece del più grande .empty-slot-invite-text ereditato, per restare leggibile nella card stretta senza andare a capo in modo scomodo. */ .empty-slot-reclaim-hint { font-size: 12px; line-height: 1.3; } /* Barra di progresso dell'hold Start (3s) PER QUESTO pad: stessa tecnica di #play-btn-progress (scaleX via --hold-progress), ma inline nella mini-card invece che sovrapposta a un bottone. */ .empty-slot-reclaim-progress { width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.15); overflow: hidden; position: relative; } .empty-slot-reclaim-progress::after { content: ''; position: absolute; inset: 0; background: rgba(76, 175, 80, 0.9); transform: scaleX(var(--hold-progress, 0)); transform-origin: left; } /* Mentre si usa il controller il mirino (cursore) non serve: si nasconde finché il mouse non si rimuove di nuovo (vedi Input.isUsingGamepad). */ #game-canvas.gamepad-cursor, [data-role="game-canvas"].gamepad-cursor { cursor: none; } /* Su touch, mentre si usa il controller il joystick virtuale di movimento non serve: si nasconde finché non si ritocca lo schermo (vedi Input.isUsingGamepad in renderer.js). I tasti azione touch (attacco/dash) restano visibili: la classe è applicata solo a #joystick-base. Stesso discorso per #backpack-btn: con gamepad attivo l'uso item passa al tasto X (slot 0), quindi il bottone touch diventa ridondante (vedi updateHeldItems in main.js) — Kill/Dash NON sono in questa lista, restano sempre visibili. display:none, non solo un fade: l'elemento nascosto non deve più ricevere tap accidentali. */ #joystick-base.gamepad-hidden, #backpack-btn.gamepad-hidden { display: none; } /* #login-box resta l'UNICO elemento che #login-screen centra via justify-content:center — la versione precedente metteva #login-box e #login-leaderboard nella STESSA riga flex (flex-wrap), quindi la presenza/larghezza della classifica spostava la colonna host dal centro esatto del viewport (bug segnalato). #login-leaderboard è ora tolta dal flusso flex (position:absolute, vedi la sua regola più sotto) e ancorata a destra in modo indipendente: la sua larghezza non influenza più in alcun modo dove #login-box viene centrato. Le 3 colonne (sinistra/centro/destra) restano SEMPRE affiancate, anche su touch: se lo spazio reale non basta a contenerle alla loro dimensione naturale, updateLobbyFitScale in main.js restringe l'intero gruppo in blocco tramite --lobby-fit-scale (vedi .lobby-columns più sotto), mai un breakpoint che ne nasconde una — questo garantisce MATEMATICAMENTE (computeFitScale non supera mai 1) che il gruppo scalato entri nello spazio disponibile, quindi overflow-y resta hidden qui: con transform:scale() il browser calcola comunque lo scrollHeight del genitore sulla dimensione NATURALE pre-scala di .lobby-columns (non quella visiva già rimpicciolita) — con overflow-y:auto questo produceva uno scroll "fantasma" verificato empiricamente (contenuto già tutto visibile ma ancora scorribile, bug segnalato su mobile landscape). overflow-y:auto torna SOLO nel media query più sotto per touch+portrait, dove le colonne sono impilate SENZA fit-scale e possono eccedere l'altezza per design: lì lo scroll è reale e voluto. */ #login-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow-y: hidden; padding: 24px 16px; /* Trasparente apposta: dietro c'è #game-canvas, che qui disegna dal vivo lo sfondo dell'hub (vedi renderer.homeBackgroundMode) invece di un'immagine statica. Ogni colonna/pannello si dà da sé lo sfondo "vetro smerigliato" necessario per restare leggibile sopra la mappa. */ background: transparent; z-index: 10; } .lobby-columns { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; max-width: 1400px; /* --lobby-fit-scale: calcolato da updateLobbyFitScale in main.js in base allo spazio REALE disponibile in #login-screen (mai un breakpoint fisso) — restringe le 3 colonne in blocco, mantenendole affiancate e centrate, invece di nasconderne una su viewport touch stretti. */ transform: scale(var(--lobby-fit-scale, 1)); transform-origin: center center; } .lobby-col { display: flex; flex-direction: column; align-items: center; gap: 10px; } .lobby-col-left, .lobby-col-right { flex: 0 0 220px; } /* Touch in portrait: le 3 colonne si IMPILANO verticalmente (centro in cima, poi sinistra, poi destra) invece di restringersi affiancate come in landscape — updateLobbyFitScale in main.js riconosce la stessa condizione (touch + orientation:portrait) e lascia --lobby-fit-scale a 1, quindi nessun doppio effetto con lo scale qui sopra. Ogni pannello resta alla sua larghezza naturale (fit-scale qui non serve: ogni colonna occupa ormai la propria riga da sola). Landscape touch e desktop restano invariati: nessuna di queste regole si applica fuori da questa combinazione hover/pointer/orientation. */ @media (hover: none) and (pointer: coarse) and (orientation: portrait) { #login-screen { /* Qui (a differenza della regola base, vedi sopra) le colonne impilate NON usano --lobby-fit-scale e possono davvero eccedere l'altezza disponibile — overflow-y torna auto apposta: a differenza del caso scalato via transform, qui lo scrollHeight riflette la dimensione LAYOUT reale (nessun transform sulle colonne, vedi updateLobbyFitScale in main.js), quindi niente scroll fantasma. */ overflow-y: auto; /* Con le colonne impilate non dovrebbe più servire, ma resta una difesa in più per il pannello centrale (unico senza un cap di larghezza esplicito, vedi #login-box più sotto) su viewport strettissimi. */ overflow-x: hidden; /* align-items:center (ereditato dalla regola base) intrappolerebbe la parte INIZIALE del contenuto quando eccede l'altezza disponibile con overflow-y:auto attivo — bug noto di flexbox: centrare un contenuto che trabocca lo rende irraggiungibile scorrendo, anche se si può scorrere oltre la fine. Qui le 3 colonne impilate eccedono l'altezza per design (lo scroll verticale è accettato ed esplicitamente voluto), quindi si ancora in cima invece di centrare. */ align-items: flex-start; } .lobby-columns { flex-direction: column; } .lobby-col-center { order: 1; } .lobby-col-left { order: 2; } .lobby-col-right { order: 3; } /* flex:0 0 220px (landscape, sopra) fisserebbe l'ALTEZZA a 220px ora che l'asse principale di .lobby-columns è verticale — qui serve solo una larghezza "a carta", l'altezza resta auto (dipende dal contenuto). */ .lobby-col-left, .lobby-col-right { flex: 0 0 auto; width: min(340px, 92vw); } /* Stesso ordine di grandezza dei pannelli sinistra/destra qui sopra: le 3 "carte" impilate restano di larghezza coerente tra loro invece che ciascuna alla propria dimensione naturale (356px circa di suo). */ #login-box { max-width: min(340px, 92vw); } } /* Pannello "vetro smerigliato" condiviso da #login-box e .lobby-col-left, così bordo/raggio/background restano un'UNICA fonte invece di due valori duplicati che potrebbero disallinearsi. */ .lobby-panel { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; } .lobby-col-left { padding: 20px 10px; } .lobby-col-center { flex: 0 1 auto; position: relative; } #login-box { display: flex; flex-direction: column; gap: 12px; align-items: center; color: #f2f2f2; padding: 24px 28px; } #login-box input { padding: 10px 14px; border-radius: 6px; border: none; font-size: 16px; width: 220px; text-align: center; } #login-box button { padding: 10px 24px; border-radius: 6px; border: none; background: #4caf50; color: white; font-size: 16px; cursor: pointer; } #login-box button:hover { background: #43a047; } #login-title { margin: 0; font-size: 48px; } #login-beaver-canvas { display: block; } /* Frecce sinistra/destra ai lati della preview stessa, sulla stessa riga: il colore selezionato si vede solo dal Beaver renderizzato nel canvas, niente più label o pallino separati. align-items:center centra le frecce (36px) rispetto all'altezza del canvas (170px) sull'asse trasversale della riga. */ #color-carousel { display: flex; align-items: center; justify-content: center; gap: 16px; border-radius: 12px; outline: 2px solid transparent; transition: outline-color 0.15s; } /* Il gamepad legato all'host sta guidando il carosello in questo momento (vedi hostUsingGamepad in main.js) — stesso concetto del cursore crosshair nascosto in partita quando si usa il controller, qui reso come un anello attorno al carosello invece che sparire qualcosa. */ #color-carousel.gamepad-active { outline-color: rgba(76, 175, 80, 0.6); } .color-arrow-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; } #login-box .color-arrow-btn { background: rgba(255,255,255,0.1); } #login-box .color-arrow-btn:hover { background: rgba(255,255,255,0.2); } /* Barra di caricamento durante l'hold di 3s del tasto Start su un gamepad in lobby: riempimento a sinistra->destra sopra lo sfondo verde del bottone, sotto la label testuale. --hold-progress va da 0 a 1, aggiornato ad ogni frame da pollLobbyGamepads in main.js — a 0 resta invisibile (scaleX(0)), niente da nascondere esplicitamente quando nessun controller sta tenendo premuto. */ #play-btn { position: relative; overflow: hidden; } #play-btn span { position: relative; z-index: 1; } #play-btn-progress { position: absolute; inset: 0; z-index: 0; background: rgba(255,255,255,0.4); transform: scaleX(var(--hold-progress, 0)); transform-origin: left; pointer-events: none; } /* Fino a 3 mini-card, una per gamepad aggiuntivo unitosi in lobby (vedi addLobbySlot in main.js) — vuoto e senza alcun ingombro finché nessun secondo controller preme X. */ #lobby-extra-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .lobby-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); } .lobby-slot-label { font-size: 12px; color: rgba(255,255,255,0.7); } .lobby-slot-color-row { display: flex; align-items: center; gap: 6px; } .lobby-slot-canvas { display: block; } /* Frecce più piccole delle principali (36px): le mini-card devono restare compatte, stessa palette/hover di .color-arrow-btn (ereditati). */ .lobby-slot-arrow { width: 26px; height: 26px; font-size: 15px; } .lobby-slot-name { width: 120px; padding: 5px 8px; border-radius: 6px; border: none; font-size: 12px; text-align: center; } /* Nella colonna sinistra, insieme a #info-btn: stessa forma "pillola" icona+testo (non più un cerchio icon-only, che non avrebbe spazio per la label "Impostazioni"), stessa palette neutra già usata da #settings-btn in-game. */ #home-settings-btn { padding: 10px 24px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); color: #fff; font-size: 16px; cursor: pointer; } #home-settings-btn:hover { background: rgba(255,255,255,0.2); } /* Bottone "Come si gioca", stessa colonna sinistra: riusa il font/padding generico dei bottoni di #login-box (non più applicabile via discendenza, dato che ora vive fuori da #login-box) più l'accento blu già usato prima. */ #info-btn { padding: 10px 24px; border-radius: 6px; border: 1px solid rgba(77, 159, 255, 0.6); background: rgba(77, 159, 255, 0.25); color: white; font-size: 16px; cursor: pointer; } #info-btn:hover { background: rgba(77, 159, 255, 0.4); } /* "Codice stanza": stessa forma "pillola" icona+testo di #home-settings-btn, ma tinta oro (--accent-gold, vedi :root) invece della palette neutra — la distingue visivamente come azione legata al codice Room, stesso trattamento "bordo/sfondo translucidi nell'accento" già usato da #info-btn con il blu. */ #room-btn { padding: 10px 24px; border-radius: 6px; border: 1px solid rgba(var(--accent-gold-rgb), 0.6); background: rgba(var(--accent-gold-rgb), 0.25); color: #fff; font-size: 16px; cursor: pointer; } #room-btn:hover { background: rgba(var(--accent-gold-rgb), 0.4); } /* Nessuno dei tre ha una width propria: senza questa regola si dimensionano al proprio contenuto (icona+testo), e .lobby-col li centra (align-items:center) invece di stirarli — "Impostazioni" (testo più corto di "Codice stanza"/"Come si gioca") restava visibilmente più stretto e non arrivava al bordo del pannello. width:100% li fissa tutti alla stessa larghezza del pannello sinistro, indipendente dal testo. */ #home-settings-btn, #info-btn, #room-btn { width: 100%; } /* Conferma "Copiato!" nel popup #room-modal: nessuno spazio riservato quando nascosta (.hidden = display:none). */ #room-copy-confirm { color: #4caf50; font-size: 13px; } @media (max-width: 480px) { #home-settings-btn, #info-btn, #room-btn { padding: 8px 18px; font-size: 14px; } #login-title { font-size: 36px; } /* Freccia+canvas+freccia sono ora affiancati sulla stessa riga (invece che impilati): su schermi stretti restringiamo gap e canvas così la riga resti comoda anche sui viewport più piccoli, invece di rischiare di sfiorare i bordi. */ #color-carousel { gap: 10px; } #login-beaver-canvas { width: 140px; height: 140px; } } #info-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(14, 17, 22, 0.95); z-index: 11; } /* max-width/max-height divisi per --ui-scale per compensare il transform:scale(--ui-scale) applicato a #info-box (vedi regola in cima al file): quel transform agisce DOPO il layout, con transform-origin al centro, quindi ingrandisce il box (e con esso #info-close-btn, che ne è figlio) simmetricamente in tutte le direzioni — a scale>1 il bordo superiore del box (e il tasto X vicino) finisce sopra y=0, fuori viewport e non cliccabile, perché html/body hanno overflow:hidden e #info-modal non ha uno scroll proprio. Dividendo qui il clamp per lo stesso --ui-scale che poi lo moltiplica in transform, il prodotto resta costante: la dimensione VISIVA del box non supera mai 640px x 82vh, per qualunque valore di --ui-scale (slider 80%-150%) — non un'euristica, è un invariante algebrico (max * scale / scale = max). */ #info-box { position: relative; background: #1b1f27; border-radius: 12px; padding: 32px 36px; color: #f2f2f2; max-width: calc(640px / var(--ui-scale, 1)); max-height: calc(82vh / var(--ui-scale, 1)); overflow-y: auto; } #info-box h1 { margin-bottom: 16px; font-size: 22px; } #info-box h2 { margin-top: 20px; margin-bottom: 6px; font-size: 16px; color: #ffd166; } #info-box p { font-size: 14px; line-height: 1.5; opacity: 0.92; } #info-box ul { margin: 6px 0 6px 20px; font-size: 14px; line-height: 1.6; opacity: 0.92; } #info-close-btn { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,0.1); color: #fff; font-size: 16px; cursor: pointer; } #info-close-btn:hover { background: rgba(255,255,255,0.2); } #settings-modal, [data-role="settings-modal"], #room-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(14, 17, 22, 0.85); z-index: 13; } #settings-box, [data-role="settings-box"], #room-box { position: relative; background: #1b1f27; border-radius: 12px; padding: 28px 32px; color: #f2f2f2; min-width: 280px; max-width: 420px; } /* #room-modal, a differenza di #settings-modal, impila due sezioni centrate (codice attuale, entra con un codice) — stesso layout verticale già usato da #login-box, non un pannello di righe come le Impostazioni. */ #room-box { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; } /* Sezioni (a)/(b) di #room-box, separate da un filo sottile — stesso trattamento del border-bottom già usato per staccare #room-box h2 dal corpo. */ .room-section { display: flex; flex-direction: column; align-items: center; gap: 10px; } .room-section + .room-section { padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); } .room-section-label { font-size: 13px; opacity: 0.75; } .room-code-row { display: flex; align-items: center; gap: 10px; } /* Codice attuale mascherato/rivelato: stessa tipografia monospace di #settings-room-code-value, per restare leggibile allo stesso modo indipendentemente da dove il codice compare in UI. */ #room-current-code-value { font-weight: 700; letter-spacing: 3px; font-family: 'Courier New', monospace; color: #ffd166; font-size: 18px; min-width: 90px; } /* Bottone occhiolino mostra/nascondi: stessa forma circolare "icon-only" di #settings-close-btn/#room-close-btn, ma di dimensione ridotta e non posizionata in absolute (vive dentro .room-code-row). */ .icon-toggle-btn { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .icon-toggle-btn:hover { background: rgba(255,255,255,0.2); } #room-join-error { color: #e35b4f; font-size: 13px; } /* Bottone/input del popup: stessa palette verde/pillola già usata dai bottoni di #login-box, ma come classi condivise (non selettori "#box button/input") per non alzare la specificità sopra il close-btn circolare qui sotto, che deve restare piccolo e in alto a destra. */ .room-modal-btn { padding: 10px 24px; border-radius: 6px; border: none; background: #4caf50; color: white; font-size: 15px; cursor: pointer; } .room-modal-btn:hover { background: #43a047; } .room-modal-input { padding: 10px 14px; border-radius: 6px; border: none; font-size: 16px; width: 220px; text-align: center; box-sizing: border-box; } /* Label "Codice stanza:" persistente nel pannello Impostazioni (vedi setRoomCode/refreshSettingsRoomCodeDisplay in main.js), sempre visibile — consultabile anche a partita iniziata. Mascherabile via #settings-room-code-eye-btn (.icon-toggle-btn, stessa classe/dimensione di #room-current-eye-btn) e copiabile via #settings-room-code-copy-btn (stessa copyRoomCodeToClipboard del pulsante "Copia codice" nel popup Home) — entrambi figli della riga flex qui sotto, nessun CSS dedicato necessario oltre a .icon-toggle-btn/.settings-copy-confirm. */ #settings-room-code { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; font-size: 14px; } #settings-room-code-value { font-weight: 700; letter-spacing: 3px; font-family: 'Courier New', monospace; color: #ffd166; } /* Conferma "Copiato!" del pannello Impostazioni: stessa palette/dimensione di #room-copy-confirm (popup Home), ma per classe (non id) perché questo elemento vive dentro #settings-modal ed è quindi clonato/suffissato per slot in split-screen (vedi PLAYER_DOM_IDS/suffixIdsInSubtree in main.js) — una regola per id non farebbe più match sui cloni. */ .settings-copy-confirm { color: #4caf50; font-size: 13px; } /* Gerarchia visiva vera (prima leggeva quasi come una riga del corpo: 18px, nessun peso/colore distinto dalle label sottostanti a 14px) — stessa ricetta già usata dai titoli di altri modali (#info-box h1: dimensione marcatamente maggiore del corpo, più un divisore sotto per staccarlo dalle righe) invece di inventare una nuova tipografia. */ #settings-box h2, [data-role="settings-box"] h2, #room-box h2 { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 21px; font-weight: 700; } #settings-close-btn, [data-role="settings-close-btn"], #room-close-btn { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,0.1); color: #fff; font-size: 15px; cursor: pointer; } #settings-close-btn:hover, [data-role="settings-close-btn"]:hover, #room-close-btn:hover { background: rgba(255,255,255,0.2); } /* Riga base condivisa da TUTTE le voci del pannello, qualunque sia il tipo (vedi .settings-row--toggle/--slider/--stepper sotto — modificatori solo per le rifiniture specifiche del tipo, mai per il layout base): stessa altezza minima, stesso padding sinistra/destra, label sempre a sinistra e controllo sempre a destra (justify-content:space-between). Costruita da renderSettingsRows in main.js, non scritta a mano in index.html — vedi quella funzione per come ogni tipo popola il proprio "controllo". margin:0 -8px + padding orizzontale 8px è voluto (si cancellano a vicenda sul contenuto): serve solo a far "sanguinare" lo sfondo di .settings-row--focused un po' oltre il testo, il contenuto resta allineato al padding di #settings-box. Puramente basata su classi (nessun #id): sopravvive tale quale al cloneNode(true) di #settings-modal per gli slot extra dello split-screen — ma renderSettingsRows viene comunque richiamata da capo per OGNI slot (host e ogni extra), quindi le righe che finiscono davvero a schermo sono sempre ricostruite fresche per quello slot specifico, non quelle ereditate dal clone (che rifletterebbero lo stato dell'host). I18n.applyToDom/Icons.applyToDom non toccano mai queste classi (agiscono solo su testo/icone via [data-i18n]/[data-icon], non sul wrapper della riga). */ .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 32px; border-radius: 8px; padding: 8px 8px; margin: 0 -8px; } /* Stesso ritmo verticale tra tutte le righe. */ .settings-row + .settings-row { margin-top: 10px; } /* Raggruppamento visivo: la lingua è concettualmente diversa dalle righe sopra (accessibilità/input, non localizzazione) — un sottile divisore + uno stacco leggermente più ampio del solito gap tra righe, senza nuove icone/categorie. Selettore per attributo (stessa specificità di una singola classe: MENO di ".settings-row + .settings-row" sopra, che ha 2 classi) — va quindi dichiarato DOPO nel foglio per vincere il tie-break sul margin-top via ordine di cascata, non per specificità. Attributo invece di una classe dedicata: raggruppare/distinguere UNA riga specifica è una scelta di contenuto, non un nuovo "tipo" di riga (che riguarda solo il comportamento input, vedi .settings-row--toggle/--slider/--stepper). */ .settings-row[data-settings-row-id="language"] { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); } /* Unica fonte di evidenziazione del focus da controller, per QUALUNQUE tipo di riga (toggle/slider/stepper) — mai un trattamento hardcoded per un tipo specifico, vedi updateSettingsFocusVisual in main.js che applica questa stessa classe per indice, indipendentemente da row.config.type. */ .settings-row--focused { background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 1px rgba(255,214,102,0.6); } .settings-row-label { font-size: 14px; } /* Riga toggle: l'intera riga è cliccabile (vedi il listener delegato in renderSettingsRows), non solo il quadratino nativo. */ .settings-row--clickable { cursor: pointer; } .settings-toggle-input { width: 18px; height: 18px; cursor: pointer; flex: 0 0 auto; } /* Riga slider: il gruppo +percentuale è il "controllo" allineato a destra sulla stessa riga della label — flex:0 0 auto (non riempie lo spazio residuo, che justify-content:space-between della riga usa già come gap dalla label). */ .settings-slider-control { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .settings-row--slider input[type="range"] { width: 130px; cursor: pointer; } /* Riga stepper (lingua): stesso schema "‹ valore ›" del carosello skin dell'host, stesse frecce (.color-arrow-btn, vedi sotto) — niente più