/* ═══════════════════════════════════════════════════════════════════════════ LE SO TUTTE — foglio di stile unico per telefono, tabellone e regia. Le tre superfici condividono i token e si separano con .telefono / .tabellone / .regia sul . ═══════════════════════════════════════════════════════════════════════════ */ :root { --notte: #0b0725; --notte-2: #140c33; --indaco: #1b0f45; --viola: #42219a; --viola-vivo: #7b3ff2; --oro: #ffc63d; --oro-chiaro: #ffe98a; --oro-scuro: #f08a0c; --magenta: #ff3d7f; --verde: #2de1c2; --rosso: #ff5470; --testo: #f4f1ff; --testo-tenue:#a99ecb; --bordo: rgba(255,255,255,.10); --vetro: rgba(255,255,255,.045); --vetro-2: rgba(255,255,255,.085); --ombra: 0 18px 50px rgba(0,0,0,.45); --raggio: 18px; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); color: var(--testo); background: var(--notte); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; min-height: 100dvh; } /* Il fondo: due aloni fissi + gradiente. Fissi perché su un proiettore un fondo che si muove insieme allo scroll dà fastidio a chi guarda da lontano. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1100px 700px at 12% -10%, rgba(123,63,242,.38), transparent 60%), radial-gradient(900px 600px at 92% 8%, rgba(255,61,127,.18), transparent 60%), linear-gradient(160deg, var(--indaco) 0%, var(--notte-2) 45%, var(--notte) 100%); } h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.02em; } p { margin: 0 0 .6em; } a { color: var(--oro); } .tenue { color: var(--testo-tenue); } .centro { text-align: center; } .nascosto { display: none !important; } .oro { color: var(--oro); } .mono { font-variant-numeric: tabular-nums; } /* ── Marchio ─────────────────────────────────────────────────────────────── */ .marchio { display: flex; align-items: center; gap: .7rem; } .marchio img { width: 2.6rem; height: 2.6rem; border-radius: 22%; display: block; } .marchio .parola { line-height: .92; font-weight: 900; letter-spacing: -.03em; } .marchio .parola span { display: block; } .marchio .parola .r1 { font-size: .78em; color: #fff; opacity: .92; } .marchio .parola .r2 { font-size: 1.12em; color: var(--oro); background: linear-gradient(180deg, var(--oro-chiaro), var(--oro-scuro)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── Superfici ───────────────────────────────────────────────────────────── */ .scheda { background: var(--vetro); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem 1.1rem; } .scheda.forte { background: var(--vetro-2); } /* ── Bottoni ─────────────────────────────────────────────────────────────── */ button, .bottone { font: inherit; font-weight: 700; color: var(--testo); cursor: pointer; background: var(--vetro-2); border: 1px solid var(--bordo); border-radius: 14px; padding: .72rem 1.1rem; transition: transform .08s ease, filter .15s ease, background .15s ease; } button:hover:not(:disabled) { background: rgba(255,255,255,.14); } button:active:not(:disabled) { transform: translateY(1px) scale(.985); } button:disabled { opacity: .38; cursor: not-allowed; } button.primario { background: linear-gradient(160deg, var(--oro-chiaro), var(--oro) 45%, var(--oro-scuro)); color: #241206; border-color: transparent; box-shadow: 0 8px 24px rgba(255,166,20,.28); } button.viola { background: linear-gradient(160deg, #9a6bff, var(--viola-vivo)); border-color: transparent; } button.verde { background: linear-gradient(160deg, #4df0d4, #10a88f); color: #04241f; border-color: transparent; } button.rossa { background: linear-gradient(160deg, #ff7b90, #e02b4c); border-color: transparent; } button.piatta { background: transparent; } button.piccola { padding: .42rem .7rem; border-radius: 11px; font-size: .86rem; } button.larga { width: 100%; } input, select, textarea { font: inherit; color: var(--testo); width: 100%; background: rgba(0,0,0,.30); border: 1px solid var(--bordo); border-radius: 13px; padding: .72rem .85rem; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(255,198,61,.16); } select option { background: var(--indaco); } label.campo { display: block; margin-bottom: .8rem; } label.campo > span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--testo-tenue); margin-bottom: .3rem; font-weight: 700; } label.interruttore { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; cursor: pointer; } label.interruttore input { width: auto; accent-color: var(--oro); transform: scale(1.25); } /* ── Avvisi ──────────────────────────────────────────────────────────────── */ #avvisi { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.2rem; z-index: 90; display: flex; flex-direction: column; gap: .5rem; align-items: center; width: min(94vw, 30rem); pointer-events: none; } .avviso { background: rgba(18,10,45,.95); border: 1px solid var(--bordo); color: var(--testo); border-radius: 13px; padding: .7rem 1rem; box-shadow: var(--ombra); font-weight: 600; text-align: center; animation: su .25s ease; } .avviso.errore { border-color: var(--rosso); color: #ffd7de; } .avviso.ok { border-color: var(--verde); color: #d3fff7; } .avviso.via { opacity: 0; transform: translateY(8px); transition: .35s ease; } @keyframes su { from { opacity: 0; transform: translateY(10px); } } /* ═══════════════════════════════════════════════════════════════════════════ TELEFONO ═══════════════════════════════════════════════════════════════════════════ */ .telefono { padding: 0 0 2.5rem; } .telefono .guscio { width: min(100%, 30rem); margin: 0 auto; padding: 1rem 1rem 0; } .telefono header.barra { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 0 1.1rem; } .telefono header.barra .marchio { font-size: 1.05rem; } .telefono .squadra-attuale { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: .9rem; padding: .4rem .7rem; border-radius: 999px; background: var(--vetro-2); border: 1px solid var(--bordo); } .pallino { width: .8rem; height: .8rem; border-radius: 50%; flex: none; } .telefono .titolone { font-size: clamp(1.5rem, 7vw, 2.1rem); font-weight: 900; margin-bottom: .3rem; } .telefono .sotto { color: var(--testo-tenue); margin-bottom: 1.1rem; } .elenco-squadre { display: grid; gap: .6rem; margin: .9rem 0; } .riga-squadra { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; padding: .8rem .9rem; border-radius: 15px; } .riga-squadra .nome { font-weight: 800; flex: 1; } .riga-squadra .quanti { color: var(--testo-tenue); font-size: .85rem; font-weight: 600; } /* Il selettore del numero: il gesto centrale del gioco, quindi grande. */ .dado { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.1rem 0 .5rem; } .dado button { width: 4rem; height: 4rem; border-radius: 50%; font-size: 2rem; font-weight: 900; display: grid; place-items: center; padding: 0; flex: none; } .dado .numero { font-size: clamp(4.5rem, 26vw, 7rem); font-weight: 900; line-height: 1; min-width: 3.6ch; text-align: center; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff, var(--oro) 55%, var(--oro-scuro)); -webkit-background-clip: text; background-clip: text; color: transparent; } .scaletta { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: .4rem 0 1rem; } .scaletta button { padding: .4rem .72rem; border-radius: 11px; font-size: .92rem; min-width: 2.7rem; } .scaletta button[aria-pressed="true"] { background: var(--oro); color: #2a1503; border-color: transparent; } .stato-turno { display: flex; align-items: center; gap: .6rem; padding: .8rem .95rem; border-radius: 15px; background: var(--vetro-2); border: 1px solid var(--bordo); font-weight: 700; margin-bottom: .9rem; } .stato-turno .punto { width: .7rem; height: .7rem; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 0 rgba(255,198,61,.6); animation: battito 1.8s infinite; flex: none; } @keyframes battito { 70% { box-shadow: 0 0 0 12px rgba(255,198,61,0); } 100% { box-shadow: 0 0 0 0 rgba(255,198,61,0); } } .tuo-turno { border: 2px solid var(--oro); background: linear-gradient(160deg, rgba(255,198,61,.20), rgba(255,198,61,.05)); animation: pulsa 1.6s ease-in-out infinite; } @keyframes pulsa { 50% { box-shadow: 0 0 34px rgba(255,198,61,.35); } } .chip-risposte { display: flex; flex-wrap: wrap; gap: .4rem; } .chip { padding: .34rem .62rem; border-radius: 999px; font-size: .82rem; font-weight: 700; border: 1px solid var(--bordo); background: rgba(0,0,0,.22); } .chip.giusta { border-color: rgba(45,225,194,.55); color: #b7fff2; } .chip.sbagliata { border-color: rgba(255,84,112,.5); color: #ffc9d3; text-decoration: line-through; opacity: .8; } .chip.ripetuta { border-color: rgba(255,198,61,.5); color: #ffe6ae; } .mini-classifica { display: grid; gap: .35rem; } .mini-classifica .riga { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 11px; background: rgba(0,0,0,.18); } .mini-classifica .pos { width: 1.4rem; text-align: right; color: var(--testo-tenue); font-weight: 800; } .mini-classifica .nome { flex: 1; font-weight: 700; } .mini-classifica .pt { font-weight: 900; font-variant-numeric: tabular-nums; } .mini-classifica .riga.mia { background: rgba(255,198,61,.14); outline: 1px solid rgba(255,198,61,.35); } /* ═══════════════════════════════════════════════════════════════════════════ TABELLONE (proiettore) ═══════════════════════════════════════════════════════════════════════════ */ .tabellone { height: 100dvh; overflow: hidden; } .tabellone .palco { height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(1rem, 2.2vh, 2rem) clamp(1.2rem, 3vw, 3rem); gap: clamp(.8rem, 2vh, 1.6rem); } .tabellone header.testa { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .tabellone .marchio img { width: clamp(2.6rem, 4.4vh, 4rem); height: clamp(2.6rem, 4.4vh, 4rem); } .tabellone .marchio .parola { font-size: clamp(1.2rem, 2.6vh, 2rem); } .tabellone .passo { font-size: clamp(.85rem, 1.6vh, 1.15rem); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); text-align: right; } .tabellone .passo small { display: block; letter-spacing: .04em; color: var(--testo-tenue); text-transform: none; font-weight: 600; } .tabellone .corpo { min-height: 0; display: grid; gap: clamp(1rem, 2.4vw, 2rem); } .tabellone .corpo.due { grid-template-columns: 1.15fr .85fr; } .tabellone .colonna { min-height: 0; display: flex; flex-direction: column; gap: clamp(.6rem, 1.5vh, 1.1rem); } /* Ingresso: QR gigante */ .ingresso { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; height: 100%; } .qr-riquadro { background: #fff; padding: clamp(.7rem, 1.6vh, 1.3rem); border-radius: 22px; box-shadow: var(--ombra); display: grid; place-items: center; } .qr-riquadro img, .qr-riquadro canvas { display: block; width: clamp(15rem, 34vh, 26rem); height: auto; image-rendering: pixelated; } .ingresso .invito h2 { font-size: clamp(2rem, 6.5vh, 4.6rem); font-weight: 900; margin-bottom: .4rem; } .ingresso .invito .url { display: inline-block; font-size: clamp(1.1rem, 2.8vh, 2.1rem); font-weight: 800; background: var(--vetro-2); border: 1px solid var(--bordo); border-radius: 14px; padding: .45rem .9rem; margin-bottom: 1rem; word-break: break-all; } .griglia-squadre { display: grid; gap: clamp(.5rem, 1.2vh, .9rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); align-content: start; } .tessera { display: flex; align-items: center; gap: .7rem; padding: clamp(.5rem, 1.2vh, .85rem) .9rem; border-radius: 15px; background: var(--vetro); border: 1px solid var(--bordo); animation: entra .4s ease; } @keyframes entra { from { opacity: 0; transform: scale(.9); } } .tessera .nome { font-weight: 800; font-size: clamp(.95rem, 1.9vh, 1.35rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tessera .badge { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: .9rem; flex: none; } /* Domanda in corso */ .domanda { background: linear-gradient(150deg, rgba(255,198,61,.16), rgba(123,63,242,.14)); border: 1px solid rgba(255,198,61,.32); border-radius: 24px; padding: clamp(.9rem, 2.4vh, 1.8rem) clamp(1.1rem, 2.6vw, 2.2rem); } .domanda .categoria { font-size: clamp(.72rem, 1.4vh, 1rem); letter-spacing: .18em; text-transform: uppercase; color: var(--oro); font-weight: 800; } .domanda h2 { font-size: clamp(1.6rem, 5.2vh, 3.6rem); font-weight: 900; margin: .15rem 0; } .domanda .conta { font-size: clamp(.95rem, 2vh, 1.5rem); color: var(--testo-tenue); font-weight: 700; } .domanda .conta b { color: var(--oro); } /* Dichiarazioni coperte / scoperte */ .carte-dich { display: grid; gap: clamp(.5rem, 1.2vh, .9rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); align-content: start; } .carta-dich { border-radius: 18px; padding: clamp(.55rem, 1.4vh, 1rem); text-align: center; background: var(--vetro); border: 1px solid var(--bordo); position: relative; overflow: hidden; } .carta-dich .nome { font-weight: 800; font-size: clamp(.85rem, 1.7vh, 1.15rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .carta-dich .num { font-size: clamp(2rem, 6vh, 4rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; } .carta-dich.coperta .num { color: var(--testo-tenue); } .carta-dich.scoperta { animation: gira .5s ease; } .carta-dich.scoperta .num { background: linear-gradient(180deg,#fff,var(--oro) 60%, var(--oro-scuro)); -webkit-background-clip: text; background-clip: text; color: transparent; } @keyframes gira { from { transform: rotateY(90deg); opacity: 0; } } .carta-dich.attiva { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(255,198,61,.28), 0 0 40px rgba(255,198,61,.25); } .carta-dich .esito { font-size: clamp(.7rem, 1.4vh, .95rem); font-weight: 800; } .carta-dich .esito .g { color: var(--verde); } .carta-dich .esito .s { color: var(--rosso); } .carta-dich.conclusa { opacity: .62; } .striscia { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; } /* Squadra al microfono */ .al-microfono { border-radius: 24px; padding: clamp(.9rem, 2.4vh, 1.7rem) clamp(1rem, 2.4vw, 2rem); background: linear-gradient(150deg, rgba(255,198,61,.22), rgba(255,61,127,.10)); border: 2px solid var(--oro); display: flex; align-items: center; gap: 1.2rem; animation: pulsa 1.8s ease-in-out infinite; } .al-microfono .chi { flex: 1; min-width: 0; } .al-microfono .etichetta { font-size: clamp(.72rem, 1.4vh, 1rem); letter-spacing: .18em; text-transform: uppercase; color: var(--oro); font-weight: 800; } .al-microfono .nome { font-size: clamp(1.6rem, 4.6vh, 3.2rem); font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .contatore { text-align: center; flex: none; } .contatore .grande { font-size: clamp(2.2rem, 7vh, 5rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; } .contatore .etichetta { display: block; } .tabellone .risposte-flusso { display: flex; flex-wrap: wrap; gap: .45rem; align-content: start; overflow: hidden; } .tabellone .chip { font-size: clamp(.8rem, 1.6vh, 1.15rem); padding: .3rem .7rem; animation: entra .3s ease; } /* Classifica proiettata */ .classifica { display: flex; flex-direction: column; gap: clamp(.35rem, .9vh, .6rem); min-height: 0; overflow: hidden; } .classifica .riga { display: flex; align-items: center; gap: .8rem; padding: clamp(.4rem, 1vh, .7rem) .85rem; border-radius: 14px; background: var(--vetro); border: 1px solid var(--bordo); transition: transform .5s cubic-bezier(.2,.9,.25,1); } .classifica .pos { font-weight: 900; font-size: clamp(.9rem, 1.9vh, 1.4rem); color: var(--testo-tenue); width: 1.8ch; text-align: right; } .classifica .nome { flex: 1; font-weight: 800; font-size: clamp(.95rem, 2vh, 1.5rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .classifica .pt { font-weight: 900; font-size: clamp(1.1rem, 2.6vh, 2rem); font-variant-numeric: tabular-nums; } .classifica .delta { font-weight: 800; font-size: clamp(.8rem, 1.6vh, 1.1rem); min-width: 3ch; text-align: right; } .classifica .delta.piu { color: var(--verde); } .classifica .delta.meno { color: var(--rosso); } .classifica .riga.top1 { border-color: rgba(255,198,61,.5); background: linear-gradient(120deg, rgba(255,198,61,.16), var(--vetro)); } .tabellone footer.piede { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--testo-tenue); font-size: clamp(.75rem, 1.5vh, 1.05rem); font-weight: 600; } .tabellone footer.piede .qr-mini { display: flex; align-items: center; gap: .7rem; } .tabellone footer.piede .qr-mini img { width: clamp(2.6rem, 6vh, 4.4rem); height: auto; background: #fff; padding: 3px; border-radius: 8px; } /* Sovrapposizione col QR grande. `[hidden]` deve poter vincere: niente display inline nell'HTML, altrimenti l'overlay resta sempre a schermo. */ #qr-overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(6,3,20,.94); padding: 2rem; text-align: center; } #qr-overlay[hidden] { display: none; } #qr-overlay .qr-riquadro { margin: 0 auto 1.2rem; } #qr-overlay h2 { font-size: clamp(1.6rem, 5vh, 3.4rem); font-weight: 900; margin-bottom: .5rem; } #qr-overlay .url { display: inline-block; font-size: clamp(1.1rem, 2.6vh, 2rem); font-weight: 800; background: var(--vetro-2); border: 1px solid var(--bordo); border-radius: 14px; padding: .45rem .9rem; margin-bottom: 1rem; word-break: break-all; } /* ═══════════════════════════════════════════════════════════════════════════ PODIO — «grafica trionfante» ═══════════════════════════════════════════════════════════════════════════ */ /* height:100% e non 100dvh: il podio vive dentro la riga centrale del palco, che è già più bassa dello schermo. Con 100dvh i gradini finivano sotto il bordo e il primo classificato restava tagliato a metà. */ .podio-scena { position: relative; height: 100%; min-height: 0; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(.4rem,1.4vh,1.2rem) 0; gap: clamp(.4rem,1.4vh,1rem); overflow: hidden; } #coriandoli { position: fixed; inset: 0; z-index: 5; pointer-events: none; } .podio-scena > * { position: relative; z-index: 6; } /* Raggi rotanti dietro al vincitore. */ .podio-scena::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 46%; width: 220vmax; height: 220vmax; transform: translate(-50%,-50%); background: repeating-conic-gradient(from 0deg, rgba(255,198,61,.09) 0deg 7deg, transparent 7deg 14deg); animation: ruota 44s linear infinite; pointer-events: none; } @keyframes ruota { to { transform: translate(-50%,-50%) rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .podio-scena::before { animation: none; } .al-microfono, .tuo-turno, .stato-turno .punto, .gradino .corona { animation: none; } /* Le entrate non devono lasciare l'elemento invisibile se l'animazione non parte: opacità piena e nessuno spostamento. */ .gradino, .tessera, .carta-dich.scoperta, .tabellone .chip { animation: none; opacity: 1; } } .podio-titolo { text-align: center; } .podio-titolo .kicker { letter-spacing: .3em; text-transform: uppercase; color: var(--oro); font-weight: 800; font-size: clamp(.8rem, 1.8vh, 1.3rem); } .podio-titolo h1 { font-size: clamp(2.4rem, 9vh, 6.5rem); font-weight: 900; background: linear-gradient(180deg, #fff 10%, var(--oro) 55%, var(--oro-scuro)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 24px rgba(255,166,20,.35)); } .gradini { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: end; gap: clamp(.6rem, 2vw, 2rem); justify-items: center; min-height: 0; } .gradino { width: 100%; max-width: 22rem; display: flex; flex-direction: column; align-items: center; animation: sale .9s cubic-bezier(.2,.9,.25,1) backwards; } .gradino.g1 { animation-delay: .55s; } .gradino.g2 { animation-delay: .15s; } .gradino.g3 { animation-delay: .3s; } @keyframes sale { from { opacity: 0; transform: translateY(70px); } } .gradino .corona { font-size: clamp(1.8rem, 5vh, 3.4rem); line-height: 1; animation: fluttua 3s ease-in-out infinite; } @keyframes fluttua { 50% { transform: translateY(-9px); } } .gradino .medaglia { width: clamp(3.6rem, 9vh, 6.4rem); height: clamp(3.6rem, 9vh, 6.4rem); border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: clamp(1.3rem, 3.4vh, 2.4rem); color: #2a1503; margin-bottom: .4rem; box-shadow: 0 10px 30px rgba(0,0,0,.4); } .gradino.g1 .medaglia { background: linear-gradient(160deg,#fff6c9,#ffc63d 45%,#e08a00); } .gradino.g2 .medaglia { background: linear-gradient(160deg,#ffffff,#c8d2e0 45%,#8b97a8); } .gradino.g3 .medaglia { background: linear-gradient(160deg,#ffd9b0,#d08a45 45%,#8a5220); } .gradino .nome { font-weight: 900; text-align: center; line-height: 1.05; font-size: clamp(1.1rem, 3.2vh, 2.4rem); margin-bottom: .2rem; } .gradino.g1 .nome { font-size: clamp(1.5rem, 4.6vh, 3.4rem); } .gradino .punti { font-weight: 900; font-variant-numeric: tabular-nums; color: var(--oro); font-size: clamp(1.1rem, 3vh, 2.2rem); } .gradino .blocco { width: 100%; border-radius: 20px 20px 0 0; margin-top: .7rem; border: 1px solid rgba(255,255,255,.16); border-bottom: none; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.03)); display: grid; place-items: center; font-weight: 900; color: rgba(255,255,255,.5); font-size: clamp(1.6rem, 5vh, 3.4rem); } .gradino.g1 .blocco { height: clamp(6rem, 24vh, 15rem); background: linear-gradient(180deg, rgba(255,198,61,.34), rgba(255,198,61,.06)); border-color: rgba(255,198,61,.5); color: rgba(255,255,255,.7); } .gradino.g2 .blocco { height: clamp(4rem, 17vh, 11rem); } .gradino.g3 .blocco { height: clamp(3rem, 13vh, 8.5rem); } .podio-resto { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } .podio-resto .voce { display: flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px; background: var(--vetro); border: 1px solid var(--bordo); font-weight: 700; font-size: clamp(.8rem, 1.7vh, 1.15rem); } /* ═══════════════════════════════════════════════════════════════════════════ REGIA ═══════════════════════════════════════════════════════════════════════════ */ .regia { padding-bottom: 3rem; } .regia .guscio { width: min(100%, 78rem); margin: 0 auto; padding: 1rem clamp(.7rem, 2vw, 1.6rem); } .regia header.barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0 1rem; flex-wrap: wrap; } .schede { display: flex; gap: .4rem; flex-wrap: wrap; } .schede button[aria-selected="true"] { background: var(--oro); color: #2a1503; border-color: transparent; } .regia .due-colonne { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; align-items: start; } @media (max-width: 60rem) { .regia .due-colonne { grid-template-columns: 1fr; } } .regia .sezione { margin-bottom: 1rem; } .regia .sezione > h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--testo-tenue); margin-bottom: .5rem; } .fila { display: flex; gap: .5rem; flex-wrap: wrap; } .fila.stretta { gap: .35rem; } /* Griglia delle risposte valide: il pannello su cui lavora il conduttore. */ .valide { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); } .valide button { text-align: left; padding: .55rem .7rem; border-radius: 12px; font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: .5rem; } .valide button .pin { width: .7rem; height: .7rem; border-radius: 50%; flex: none; background: transparent; border: 1px solid var(--bordo); } .valide button.presa { opacity: .5; text-decoration: line-through; } .valide button.presa .pin { border-color: transparent; } .valide button:not(.presa):hover { background: rgba(45,225,194,.18); border-color: rgba(45,225,194,.5); } .riga-regia-squadra { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 12px; background: rgba(0,0,0,.2); border: 1px solid transparent; } .riga-regia-squadra.attiva { border-color: var(--oro); background: rgba(255,198,61,.14); } .riga-regia-squadra .nome { flex: 1; font-weight: 800; } .riga-regia-squadra .dich { font-weight: 800; color: var(--oro); font-variant-numeric: tabular-nums; } .riga-regia-squadra .conteggio { font-size: .82rem; color: var(--testo-tenue); font-variant-numeric: tabular-nums; } .storico-risposte { display: flex; flex-direction: column-reverse; gap: .3rem; max-height: 18rem; overflow: auto; } .storico-risposte .voce { display: flex; align-items: center; gap: .5rem; font-size: .88rem; padding: .3rem .5rem; border-radius: 9px; background: rgba(0,0,0,.18); } .lista-domande { display: grid; gap: .45rem; max-height: 60vh; overflow: auto; padding-right: .2rem; } .card-domanda { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 13px; background: rgba(0,0,0,.2); border: 1px solid var(--bordo); } .card-domanda .testo { flex: 1; min-width: 0; } .card-domanda .titolo { font-weight: 800; } .card-domanda .meta { font-size: .8rem; color: var(--testo-tenue); } .card-domanda.usata { opacity: .5; } .pillola { font-size: .72rem; font-weight: 800; padding: .12rem .5rem; border-radius: 999px; background: rgba(255,255,255,.1); } dialog { border: 1px solid var(--bordo); background: var(--indaco); color: var(--testo); border-radius: var(--raggio); padding: 1.2rem; width: min(94vw, 40rem); box-shadow: var(--ombra); } dialog::backdrop { background: rgba(5,2,18,.72); } @media (max-width: 46rem) { .tabellone .corpo.due { grid-template-columns: 1fr; } .ingresso { grid-template-columns: 1fr; justify-items: center; text-align: center; } }