@font-face { font-family: Montserrat; font-weight: 500; font-display: swap; src: url("/font/Montserrat-500.ttf") format("truetype"); }
@font-face { font-family: Montserrat; font-weight: 600; font-display: swap; src: url("/font/Montserrat-600.ttf") format("truetype"); }
@font-face { font-family: Montserrat; font-weight: 800; font-display: swap; src: url("/font/Montserrat-800.ttf") format("truetype"); }

:root {
  --sfondo: #0d0820;
  --sfondo-2: #150d33;
  --vetro: rgba(255, 255, 255, 0.06);
  --vetro-bordo: rgba(255, 255, 255, 0.1);
  --testo: #f4f1ff;
  --testo-2: #b8afd9;
  --viola: #7c5cff;
  --azzurro: #2ec5ff;
  --rosa: #ff5c8a;
  --giallo: #ffd166;
  --verde: #34d399;
  --rosso: #f43f5e;
  --gradiente: linear-gradient(135deg, var(--viola), var(--azzurro));
  --raggio: 18px;
  --ombra: 0 12px 40px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  color: var(--testo);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124, 92, 255, 0.35), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(46, 197, 255, 0.2), transparent 60%),
    var(--sfondo);
  background-attachment: fixed;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
h1, h2, h3 { font-weight: 800; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--testo-2); margin-bottom: 10px; }
small { color: var(--testo-2); }

.pagina { max-width: 960px; margin: 0 auto; padding: 12px 16px 48px; }
.blocco { margin: 18px 0; }
.riga { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.nota { color: var(--testo-2); font-size: 0.9rem; margin: 10px 0; }
.etichetta { font-size: 0.75rem; padding: 4px 10px; border-radius: 99px; background: var(--vetro); color: var(--testo-2); }

/* ---------- Bottoni ---------- */
.bottone {
  appearance: none; border: 0; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 14px; font-weight: 800; font-size: 0.95rem;
  background: var(--gradiente); color: #fff; box-shadow: 0 6px 20px rgba(124, 92, 255, 0.35);
  transition: transform 0.12s ease, filter 0.2s ease, opacity 0.2s;
}
.bottone:hover { filter: brightness(1.1); }
.bottone:active { transform: scale(0.97); }
.bottone:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
.bottone--grande { width: 100%; padding: 16px; font-size: 1.05rem; margin-top: 14px; }
.bottone--piccolo { padding: 8px 14px; font-size: 0.85rem; }
.bottone--secondario { background: var(--vetro); box-shadow: none; border: 1px solid var(--vetro-bordo); }
.bottone--whatsapp { background: #25d366; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3); }
.icona {
  appearance: none; border: 1px solid var(--vetro-bordo); background: var(--vetro); cursor: pointer;
  width: 36px; height: 36px; border-radius: 12px; display: inline-grid; place-items: center; font-size: 1rem;
}
.icona:disabled { opacity: 0.35; }
.indietro { appearance: none; border: 0; background: none; color: var(--testo-2); cursor: pointer; padding: 6px 0; font-weight: 600; }

/* ---------- Avatar ---------- */
.avatar {
  --c: var(--viola);
  width: 34px; height: 34px; flex: none; border-radius: 50%; display: inline-grid; place-items: center;
  font-weight: 800; font-size: 0.95rem; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 45%), var(--c);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}
.avatar--mini { width: 22px; height: 22px; font-size: 0.7rem; }
.avatar--vuoto { background: var(--vetro); color: var(--testo-2); box-shadow: none; border: 2px dashed var(--vetro-bordo); }
.avatar--online { position: relative; }
.avatar--online::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--verde); box-shadow: 0 0 0 2px var(--sfondo), 0 0 10px var(--verde);
}

/* ---------- Testata ---------- */
.testata { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 8px; }
.testata__marchio { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; }
.testata__logo { width: 34px; height: 34px; border-radius: 10px; }
.testata__io { display: flex; align-items: center; gap: 8px; }
.testata__nome { font-weight: 600; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Accesso ---------- */
.accesso { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; text-align: center; }
.accesso__logo { width: 84px; height: 84px; border-radius: 24px; box-shadow: 0 10px 40px rgba(124, 92, 255, 0.5); animation: galleggia 4s ease-in-out infinite; }
.accesso__titolo { font-size: clamp(2.2rem, 9vw, 3.4rem); margin-top: 18px; background: var(--gradiente); -webkit-background-clip: text; background-clip: text; color: transparent; }
.accesso__sotto { margin: 4px 0 26px; color: var(--testo-2); letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.8rem; }
.accesso__scatola { width: min(420px, 100%); padding: 22px; border-radius: 24px; background: var(--vetro); border: 1px solid var(--vetro-bordo); box-shadow: var(--ombra); backdrop-filter: blur(10px); }
.accesso__testo { margin: 0 0 6px; line-height: 1.5; color: var(--testo-2); }
.accesso__codice {
  margin: 14px 0; padding: 18px; border-radius: 16px; font-weight: 800; font-size: clamp(1.6rem, 8vw, 2.2rem); letter-spacing: 0.08em;
  background: rgba(0, 0, 0, 0.35); border: 1px dashed rgba(124, 92, 255, 0.6); user-select: all;
}
.accesso__scatola .riga { justify-content: center; }
.accesso__nota { font-size: 0.85rem; color: var(--testo-2); margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }
@keyframes galleggia { 50% { transform: translateY(-8px) rotate(-3deg); } }

/* ---------- Sala ---------- */
.presenze { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.presenza {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 99px; flex: none;
  background: var(--vetro); border: 1px solid var(--vetro-bordo);
}
.presenza b { display: block; font-size: 0.9rem; }
.presenza small { font-size: 0.75rem; }
.schede { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.3); width: fit-content; }
.scheda { appearance: none; border: 0; background: none; padding: 8px 18px; border-radius: 10px; cursor: pointer; font-weight: 700; color: var(--testo-2); }
.scheda--attiva { background: var(--vetro); color: var(--testo); box-shadow: inset 0 0 0 1px var(--vetro-bordo); }

.griglia-giochi { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 16px; }
.gioco-card {
  --a: var(--viola); --b: var(--azzurro);
  position: relative; overflow: hidden; padding: 16px; border-radius: 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--a) 22%, transparent), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--vetro-bordo); box-shadow: var(--ombra);
  display: flex; flex-direction: column; gap: 8px;
}
.gioco-card--arena { --a: #ff5c8a; --b: #ffb02e; }
.gioco-card--carte { --a: #7c5cff; --b: #c084fc; }
.gioco-card--chiladetto { --a: #2ec5ff; --b: #34d399; }
.gioco-card__arte {
  height: 120px; border-radius: 16px; display: grid; place-items: center; font-size: 64px; margin-bottom: 6px;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.35), transparent 40%), linear-gradient(135deg, var(--a), var(--b));
  box-shadow: inset 0 -20px 40px rgba(0, 0, 0, 0.25);
}
.gioco-card__arte span { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35)); animation: galleggia 3.5s ease-in-out infinite; }
.gioco-card h3 { font-size: 1.2rem; }
.gioco-card p { margin: 0; color: var(--testo-2); line-height: 1.45; font-size: 0.92rem; flex: 1; }
.gioco-card .riga { margin-top: 6px; }
.gioco-card .riga .bottone:first-child { flex: 1; }

.partita-aperta {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; margin-bottom: 8px;
  background: var(--vetro); border: 1px solid var(--vetro-bordo);
}
.partita-aperta__icona { font-size: 1.6rem; }
.partita-aperta__testo { flex: 1; min-width: 0; }
.partita-aperta__testo b { display: block; }
.partita-aperta__testo small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.classifica { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.classifica li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--vetro); }
.classifica__io { box-shadow: inset 0 0 0 1px var(--viola); }
.classifica__pos { width: 28px; text-align: center; font-weight: 800; }
.classifica__nome { flex: 1; font-weight: 600; }
.classifica li b { font-size: 1.05rem; }

/* ---------- Stanza ---------- */
.stanza {
  margin-top: 10px; padding: 18px; border-radius: 24px; border: 1px solid var(--vetro-bordo); box-shadow: var(--ombra);
  background: linear-gradient(160deg, color-mix(in srgb, var(--a) 20%, transparent), rgba(255, 255, 255, 0.03));
  display: flex; flex-direction: column; gap: 14px;
}
.stanza__titolo { display: flex; gap: 14px; align-items: center; }
.stanza__titolo p { margin: 4px 0 0; color: var(--testo-2); font-size: 0.9rem; }
.stanza__icona { font-size: 44px; width: 72px; height: 72px; flex: none; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(135deg, var(--a), var(--b)); }
.posti { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.posto { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); font-weight: 600; }
.posto--vuoto { color: var(--testo-2); font-weight: 500; opacity: 0.6; }
.corona { margin-left: auto; }
.opzioni { display: grid; gap: 8px; }
.regolatore { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); }
.regolatore__comandi { display: flex; align-items: center; gap: 10px; }
.regolatore__comandi b { min-width: 24px; text-align: center; font-size: 1.1rem; }

.risultato { margin: 10px 0; padding: 18px; border-radius: 24px; text-align: center; background: linear-gradient(160deg, rgba(255, 209, 102, 0.18), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(255, 209, 102, 0.35); animation: entra 0.5s ease; }
.risultato h2 { color: var(--giallo); font-size: 1.3rem; text-transform: none; letter-spacing: 0; }
.risultato__frase { font-weight: 600; margin: 12px 0 0; }
.podio { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-top: 14px; }
.podio__posto { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; }
.podio__posto--1 { order: 2; }
.podio__posto--2 { order: 1; }
.podio__posto--3 { order: 3; }
.podio__posto b { font-size: 0.85rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podio__base { width: 100%; border-radius: 12px 12px 0 0; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; background: var(--vetro); }
.podio__posto--1 .podio__base { height: 76px; background: linear-gradient(180deg, #ffd166, #f59e0b); color: #3b2300; }
.podio__posto--2 .podio__base { height: 54px; background: linear-gradient(180deg, #e5e7eb, #9ca3af); color: #1f2937; }
.podio__posto--3 .podio__base { height: 40px; background: linear-gradient(180deg, #fdba74, #c2410c); color: #3b1d00; }
@keyframes entra { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

/* ---------- Avvisi, caricamento ---------- */
#avvisi { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 50; display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); pointer-events: none; }
.avviso { padding: 12px 16px; border-radius: 14px; background: rgba(21, 13, 51, 0.92); border: 1px solid var(--vetro-bordo); box-shadow: var(--ombra); font-weight: 600; text-align: center; animation: entra 0.3s ease; transition: opacity 0.4s, transform 0.4s; backdrop-filter: blur(8px); }
.avviso--errore { border-color: rgba(244, 63, 94, 0.6); }
.avviso--festa { border-color: rgba(255, 209, 102, 0.7); background: linear-gradient(135deg, rgba(124, 92, 255, 0.9), rgba(46, 197, 255, 0.9)); }
.avviso--via { opacity: 0; transform: translateY(-10px); }
.banda { position: sticky; top: 0; z-index: 10; text-align: center; padding: 8px; background: var(--rosso); font-weight: 700; font-size: 0.9rem; }
.carica { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--testo-2); }
.rotella { width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--vetro-bordo); border-top-color: var(--azzurro); animation: gira 0.8s linear infinite; }
.rotella--piccola { width: 14px; height: 14px; border-width: 2px; display: inline-block; }
@keyframes gira { to { transform: rotate(360deg); } }
.barra-tempo { height: 6px; border-radius: 99px; background: var(--vetro); overflow: hidden; margin: 8px 0; }
.barra-tempo__riempimento { height: 100%; width: 100%; background: var(--gradiente); border-radius: inherit; }
.barra-tempo--urgente .barra-tempo__riempimento { background: linear-gradient(90deg, var(--rosso), #fb923c); }
.barra-tempo--vuota { opacity: 0.3; }

/* ---------- Gioco: contenitore ---------- */
.gioco { max-width: 960px; margin: 0 auto; padding: 10px 12px calc(16px + env(safe-area-inset-bottom)); min-height: 100vh; min-height: 100dvh; }
/* la prima riga di ogni gioco lascia spazio al pulsante per uscire */
.arena__hud, .carte__punti, .cld__testa { padding-right: 44px; }
.esci-partita {
  position: fixed; top: max(10px, env(safe-area-inset-top)); right: 10px; z-index: 20; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--vetro-bordo); background: rgba(13, 8, 32, 0.8); color: var(--testo-2); cursor: pointer; font-size: 0.9rem;
}

/* ---------- DG Arena ---------- */
.arena { display: flex; flex-direction: column; align-items: center; gap: 8px; touch-action: none; user-select: none; -webkit-user-select: none; }
.arena__hud { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; }
.arena__chip { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px; background: var(--vetro); border: 1px solid var(--vetro-bordo); font-size: 0.8rem; font-weight: 600; transition: opacity 0.3s; }
.arena__chip .avatar { width: 24px; height: 24px; font-size: 0.7rem; }
.arena__chip b { color: var(--giallo); letter-spacing: 1px; }
.arena__chip--io { border-color: var(--giallo); }
.arena__chip--fuori { opacity: 0.4; text-decoration: line-through; }
.arena__info { font-size: 0.85rem; font-weight: 700; color: var(--testo-2); }
.arena__info--allarme { color: var(--rosso); animation: lampeggia 0.8s steps(2) infinite; }
@keyframes lampeggia { 50% { opacity: 0.4; } }
.arena__cornice { position: relative; width: 100%; display: flex; justify-content: center; }
.arena__tela { border-radius: 14px; box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.35), 0 20px 60px rgba(0, 0, 0, 0.6); background: #120a2a; }
.arena__sovra { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.arena__grande { font-size: clamp(3rem, 16vw, 7rem); font-weight: 800; color: #fff; text-shadow: 0 6px 30px rgba(124, 92, 255, 0.9), 0 2px 0 rgba(0, 0, 0, 0.4); animation: pop 0.45s ease; }
.arena__grande--piccolo { font-size: clamp(1.4rem, 6vw, 2.4rem); padding: 0 16px; }
.arena__sotto { font-weight: 800; font-size: 1.1rem; color: var(--giallo); }
@keyframes pop { from { transform: scale(1.6); opacity: 0; } }
.arena__mie { display: flex; gap: 14px; font-weight: 700; font-size: 0.95rem; min-height: 22px; flex-wrap: wrap; justify-content: center; }
.arena__morto { color: var(--testo-2); font-weight: 600; }
.arena__comandi { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 0; }
.levetta { width: 136px; height: 136px; border-radius: 50%; position: relative; touch-action: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)); border: 2px solid var(--vetro-bordo); }
.levetta__pomello { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--gradiente); box-shadow: 0 6px 20px rgba(124, 92, 255, 0.5); transition: transform 0.05s; }
.bottone-bomba { width: 96px; height: 96px; border-radius: 50%; border: 0; font-size: 40px; touch-action: none; background: radial-gradient(circle at 35% 30%, #ff8fab, var(--rosso)); box-shadow: 0 8px 28px rgba(244, 63, 94, 0.55), inset 0 -6px 0 rgba(0, 0, 0, 0.2); }
.bottone-bomba--premuto { transform: scale(0.92); box-shadow: 0 4px 14px rgba(244, 63, 94, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.2); }

/* ---------- Carte contro il Team ---------- */
.carte { display: flex; flex-direction: column; gap: 12px; }
.carte__punti { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.carte__chip { display: flex; align-items: center; gap: 6px; flex: none; padding: 4px 10px 4px 4px; border-radius: 99px; background: var(--vetro); border: 1px solid var(--vetro-bordo); font-size: 0.82rem; font-weight: 600; }
.carte__chip .avatar { width: 24px; height: 24px; font-size: 0.7rem; }
.carte__chip--giudice { border-color: var(--giallo); }
.nera__carta { padding: 20px; border-radius: 20px; background: linear-gradient(160deg, #1d1d2b, #0a0a12); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--ombra); animation: entra 0.4s ease; }
.nera__carta small { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; }
.nera__testo { font-weight: 800; font-size: clamp(1.15rem, 4.5vw, 1.5rem); line-height: 1.35; margin: 8px 0 0; }
.nera__vuoto { color: var(--testo-2); }
.nera__riempito { color: var(--giallo); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.carte__anteprima { padding: 14px; border-radius: 16px; background: rgba(255, 209, 102, 0.08); border: 1px dashed rgba(255, 209, 102, 0.5); }
.carte__anteprima .nera__testo { font-size: 1rem; margin: 0; }
.mano { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.bianca {
  appearance: none; border: 0; cursor: pointer; text-align: left; min-height: 120px; padding: 14px; border-radius: 16px;
  background: #fbfaff; color: #1a1033; font-weight: 700; font-size: 0.92rem; line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bianca:hover { transform: translateY(-3px); }
.bianca--scelta { transform: translateY(-6px) rotate(-1.5deg); box-shadow: 0 0 0 3px var(--giallo), 0 14px 30px rgba(0, 0, 0, 0.45); }
.carte__scrivi { width: 100%; min-height: 96px; padding: 14px; border-radius: 16px; border: 0; resize: vertical; font: inherit; font-weight: 700; color: #1a1033; background: #fbfaff; }
.carte__attesa { padding: 20px; border-radius: 18px; text-align: center; font-weight: 700; background: var(--vetro); border: 1px solid var(--vetro-bordo); }
.carte__titoletto { font-size: 1rem; }
.giocate { display: grid; gap: 10px; }
.giocata { appearance: none; border: 0; text-align: left; padding: 14px; border-radius: 16px; background: #fbfaff; color: #1a1033; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); animation: entra 0.35s ease both; }
.giocata .nera__testo { font-size: 1rem; margin: 0; color: #1a1033; }
.giocata .nera__riempito { color: #6d28d9; }
.giocata--sceglibile { cursor: pointer; }
.giocata--sceglibile:hover { box-shadow: 0 0 0 3px var(--viola), 0 10px 26px rgba(0, 0, 0, 0.4); }
.giocata:disabled { cursor: default; }
.giocata--vincente { box-shadow: 0 0 0 4px var(--giallo), 0 14px 34px rgba(255, 209, 102, 0.35); transform: scale(1.02); }
.giocata__autore { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 700; font-size: 0.85rem; color: #4c1d95; }
.giocata__autore .avatar { width: 24px; height: 24px; font-size: 0.7rem; }

/* ---------- Chi l'ha detto? ---------- */
.chiladetto { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.cld__testa { display: flex; justify-content: space-between; font-weight: 700; color: var(--testo-2); }
.cld__testa b { color: var(--giallo); }
.cld__frase { position: relative; margin: 6px 0; padding: 26px 22px 20px; border-radius: 22px; font-size: clamp(1.1rem, 4.6vw, 1.45rem); font-weight: 700; line-height: 1.4; background: linear-gradient(160deg, rgba(46, 197, 255, 0.16), rgba(255, 255, 255, 0.04)); border: 1px solid var(--vetro-bordo); box-shadow: var(--ombra); animation: entra 0.4s ease; }
.cld__frase small { display: block; margin-top: 12px; font-size: 0.8rem; font-weight: 600; }
.cld__virgolette { position: absolute; top: -18px; left: 14px; font-size: 4rem; line-height: 1; color: var(--azzurro); font-family: Georgia, serif; }
.cld__domanda { margin: 4px 0; font-weight: 800; text-align: center; color: var(--testo-2); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; }
.cld__opzioni { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cld__opzione {
  --c: var(--base, var(--viola));
  appearance: none; border: 0; cursor: pointer; min-height: 76px; padding: 12px; border-radius: 18px; font-weight: 800; font-size: 1rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff;
  background: linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 60%, #000));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--c) 40%, transparent), inset 0 -4px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.12s ease, opacity 0.3s, filter 0.3s;
}
.cld__opzione:active { transform: scale(0.97); }
.cld__opzione:disabled { cursor: default; }
.cld__opzione--mia { box-shadow: 0 0 0 3px #fff, 0 8px 22px color-mix(in srgb, var(--c) 40%, transparent); }
.chiladetto .cld__opzione:disabled:not(.cld__opzione--mia):not(.cld__opzione--giusta) { opacity: 0.55; }
.cld__opzione--giusta { --c: var(--verde); opacity: 1; animation: pop 0.4s ease; }
.cld__opzione--sbagliata { --c: var(--rosso); }
.cld__chi { display: flex; gap: 2px; }
.cld__esito { text-align: center; font-weight: 800; font-size: 1.2rem; color: var(--giallo); margin: 4px 0; }
.cld__classifica { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.cld__classifica li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: var(--vetro); }
.cld__classifica li > span:not(.avatar) { flex: 1; font-weight: 600; }

@media (min-width: 720px) {
  .pagina { padding-top: 24px; }
  .cld__opzione { min-height: 90px; font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}