/* Vista TV: palco fisso 1920×1080 scalato per adattarsi a qualunque schermo 16:9. */
:root {
  --ink: #1a1240;
  --gold: #ffd23f;
  --pink: #ff4fa3;
  --cyan: #2ec4ff;
  --ok: #2fd67b;
  --ko: #ff8c42;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #000; }
body {
  font-family: "Nunito", "Varela Round", "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
body.avviata { cursor: none; }

#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-template-rows: 110px 1fr 150px;
  background:
    radial-gradient(1200px 700px at 25% 15%, #4a2fb0 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 100%, #8a1f7a 0%, transparent 60%),
    linear-gradient(160deg, #241563, #140c38);
}
#stage > * { position: relative; z-index: 1; }
#raggi {
  position: absolute !important; z-index: 0 !important; inset: -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.035) 0 10deg, transparent 10deg 20deg);
  animation: gira 140s linear infinite; pointer-events: none;
}
@keyframes gira { to { transform: rotate(360deg); } }

.emo, .ill, .f { font-family: var(--emoji); font-weight: 400; }

/* ---------- barra alta ---------- */
#topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 56px; }
#manche-label { font-size: 42px; font-weight: 900; display: flex; gap: 22px; align-items: center; }
#manche-label .prog { opacity: .7; font-weight: 800; }
#logo {
  font-size: 40px; font-weight: 900; letter-spacing: 3px;
  background: linear-gradient(90deg, var(--gold), var(--pink), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#logo span { font-size: 28px; }
.x2 { background: var(--gold); color: var(--ink); padding: 6px 26px; border-radius: 999px; font-weight: 900; }

/* ---------- area centrale ---------- */
#main {
  grid-column: 1; grid-row: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; padding: 0 20px 0 60px; text-align: center;
}
.entra { animation: entra .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes entra { from { opacity: 0; transform: translateY(40px) scale(.96); } }

.attesa { font-size: 64px; font-weight: 800; opacity: .8; }

/* titolo */
.titolo-big {
  font-size: 150px; font-weight: 900; line-height: 1;
  background: linear-gradient(90deg, var(--gold), var(--pink), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 0 rgba(0,0,0,.25));
}
.sottotitolo { font-size: 56px; font-weight: 800; opacity: .9; }
.cards { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; }
.card {
  background: rgba(255,255,255,.1); border: 6px solid var(--c); border-radius: 40px;
  padding: 24px 44px; font-size: 60px; font-weight: 900; color: var(--c); min-width: 280px;
}
.card .emo { display: block; font-size: 90px; }

/* manche */
.manche-big { font-size: 190px; font-weight: 900; line-height: 1; animation: zoom .7s cubic-bezier(.2, 1.6, .4, 1); text-shadow: 0 12px 0 rgba(0,0,0,.25); }
.manche-big.finale { color: var(--gold); }
.manche-sub { font-size: 72px; font-weight: 800; }
@keyframes zoom { from { transform: scale(.2); opacity: 0; } }
.squadre { display: flex; gap: 60px; align-items: center; }
.squadre .vs { font-size: 70px; font-weight: 900; opacity: .7; }
.squadre .sq { background: rgba(255,255,255,.12); border-radius: 40px; padding: 26px 50px; font-size: 64px; font-weight: 900; }

/* intro turno */
.tocca { font-size: 96px; font-weight: 800; }
.nome-big {
  font-size: 230px; font-weight: 900; line-height: 1; color: var(--c);
  text-shadow: 0 12px 0 rgba(0,0,0,.3);
  animation: rimbalzo .8s cubic-bezier(.2, 1.8, .4, 1);
}
.nome-big.coop { font-size: 150px; }
@keyframes rimbalzo { from { transform: scale(.3) rotate(-6deg); opacity: 0; } }

/* domanda */
.q-head { display: flex; gap: 20px; align-items: center; justify-content: center; font-size: 40px; font-weight: 800; }
.chi { background: var(--c); color: var(--ink); padding: 8px 34px; border-radius: 999px; font-weight: 900; }
.formato { background: rgba(255,255,255,.14); padding: 8px 28px; border-radius: 999px; }
.q-testo {
  font-size: 80px; font-weight: 900; line-height: 1.12; max-width: 1450px;
  display: flex; align-items: center; gap: 40px; justify-content: center; text-wrap: balance;
}
.q-testo.lungo { font-size: 64px; }
.q-testo .ill { font-size: 170px; line-height: 1; }
.q-testo.piccolo { font-size: 44px; font-weight: 800; opacity: .9; }
.q-testo.piccolo .ill { font-size: 70px; }
.istruzioni { font-size: 50px; font-weight: 800; opacity: .9; }
.suono-icona { font-size: 130px; animation: pulsa 1s ease-in-out infinite; font-family: var(--emoji); }
@keyframes pulsa { 50% { transform: scale(1.15); } }

.opzioni { display: grid; gap: 34px; width: 100%; max-width: 1480px; justify-content: center; }
.opz {
  position: relative; border-radius: 40px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  background: var(--oc); box-shadow: 0 12px 0 rgba(0,0,0,.28);
  transition: transform .25s, opacity .35s, box-shadow .25s, filter .35s;
}
.c0 { --oc: #ff6b6b; } .c1 { --oc: #3a86ff; } .c2 { --oc: #ffbe0b; } .c3 { --oc: #9b5de5; }

.opzioni.img { grid-auto-flow: column; grid-auto-columns: 380px; }
.img .opz { flex-direction: column; height: 390px; background: #fff; color: var(--ink); border: 12px solid var(--oc); }
.img .emo { font-size: 210px; line-height: 1.12; }
.img .lbl { font-size: 44px; }

.opzioni.vf { grid-template-columns: 520px 520px; }
.vf .opz { flex-direction: column; height: 330px; }
.vf .emo { font-size: 160px; line-height: 1.1; }
.vf .lbl { font-size: 76px; }

.opzioni.txt.n4 { grid-template-columns: 1fr 1fr; }
.opzioni.txt.n3 { grid-template-columns: repeat(3, 1fr); }
.opzioni.txt.n2 { grid-template-columns: repeat(2, 1fr); }
.txt .opz { min-height: 150px; padding: 20px 40px 20px 120px; font-size: 56px; justify-content: flex-start; text-align: left; line-height: 1.1; }
.txt.n3 .opz, .txt.n2 .opz { flex-direction: column; justify-content: center; text-align: center; padding: 26px 24px; min-height: 230px; gap: 14px; }
.txt .c2 { color: var(--ink); }
.lettera {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
  width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink);
  font-size: 46px; display: grid; place-items: center;
}
.txt.n3 .lettera, .txt.n2 .lettera { position: static; transform: none; }

.opz.scelta { transform: scale(1.06); box-shadow: 0 0 0 12px #fff, 0 0 70px rgba(255,255,255,.8); }
.opz.spenta { opacity: .25; transform: scale(.93); }
.opz.errata { opacity: .5; filter: grayscale(.7); transform: scale(.95); }
.opz.giusta { transform: scale(1.08); box-shadow: 0 0 0 14px var(--ok), 0 0 90px var(--ok); animation: festa .7s; }
@keyframes festa { 30% { transform: scale(1.18) rotate(-2deg); } 60% { transform: scale(1.05) rotate(2deg); } }
.badge-esito {
  position: absolute; top: -34px; right: -34px; width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center; font-size: 60px; color: #fff; box-shadow: 0 6px 0 rgba(0,0,0,.25);
}
.giusta .badge-esito { background: var(--ok); }
.errata .badge-esito { background: var(--ko); }

/* cooperativa */
.coop-riga { display: flex; gap: 22px; align-items: center; justify-content: center; }
.el {
  position: relative; width: 270px; height: 330px; background: #fff; color: var(--ink); border-radius: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 12px 0 rgba(0,0,0,.28);
}
.el .emo { font-size: 170px; line-height: 1.1; }
.el .lbl { font-size: 40px; font-weight: 900; }
.el .num {
  position: absolute; top: -26px; left: -20px; width: 80px; height: 80px; border-radius: 50%;
  background: var(--pink); color: #fff; font-size: 50px; font-weight: 900; display: grid; place-items: center;
}
.el.ok .num { background: var(--ok); }
.freccia { font-size: 64px; font-weight: 900; opacity: .85; }

/* esito */
.banner {
  font-size: 130px; font-weight: 900; line-height: 1; padding: 18px 70px; border-radius: 44px;
  display: flex; align-items: baseline; gap: 36px; box-shadow: 0 14px 0 rgba(0,0,0,.25);
  animation: pop .55s cubic-bezier(.2, 1.8, .4, 1);
}
.banner small { font-size: 58px; }
.banner.ok { background: var(--ok); }
.banner.ko { background: var(--ko); }
@keyframes pop { from { transform: scale(.2); opacity: 0; } }
.spiegazione { font-size: 44px; font-weight: 800; background: rgba(255,255,255,.12); padding: 14px 34px; border-radius: 26px; max-width: 1400px; }

/* scommesse */
#bets-slot { display: flex; gap: 18px; align-items: center; justify-content: center; font-size: 36px; font-weight: 800; min-height: 64px; }
#bets-slot .lbl { opacity: .75; }
.bet { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.1); padding: 6px 24px; border-radius: 999px; }
.bet .n { color: var(--c); }
.bet .d { font-family: var(--emoji); font-size: 40px; }
.bet .d.vuoto { opacity: .35; }
.bet.vinta { background: var(--ok); }
.bet.vinta .n { color: #fff; }
.bet.persa { opacity: .45; }
.bet.nuova { animation: pop .4s cubic-bezier(.2, 1.8, .4, 1); }

/* fine */
.classifica { display: flex; flex-direction: column; gap: 22px; width: 1150px; }
.riga-cl {
  display: grid; grid-template-columns: 110px 1fr 200px; align-items: center; gap: 20px;
  background: rgba(255,255,255,.1); border-left: 16px solid var(--c); border-radius: 30px;
  padding: 14px 34px; font-size: 64px; font-weight: 900; animation: entra .6s both;
}
.riga-cl .med { font-family: var(--emoji); font-size: 76px; }
.riga-cl .p { text-align: right; color: var(--gold); }
.riga-cl:first-child { font-size: 80px; background: rgba(255,210,63,.18); }

/* ---------- mascotte ---------- */
#lato { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 26px; padding-bottom: 6px; }
#fumetto {
  position: relative; background: #fff; color: var(--ink); font-size: 38px; font-weight: 900; line-height: 1.15;
  padding: 22px 28px; border-radius: 34px; max-width: 320px; text-align: center; box-shadow: 0 10px 0 rgba(0,0,0,.25);
}
#fumetto::after { content: ""; position: absolute; left: 50%; bottom: -26px; margin-left: -18px; border: 18px solid transparent; border-top: 16px solid #fff; border-bottom: 0; }
#fumetto:empty { visibility: hidden; }
#fumetto.pop { animation: pop .45s cubic-bezier(.2, 1.8, .4, 1); }
#mascotte-wrap.salta { animation: salta .6s; }
@keyframes salta { 30% { transform: translateY(-40px) scale(1.05, .95); } 60% { transform: translateY(0) scale(.95, 1.05); } }

.mascotte { position: relative; width: 230px; height: 210px; animation: fluttua 3s ease-in-out infinite; }
@keyframes fluttua { 50% { transform: translateY(-12px); } }
.m-ciuffo { position: absolute; left: 50%; top: -34px; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; background: var(--pink); }
.m-ciuffo::after { content: ""; position: absolute; left: 16px; top: 30px; width: 6px; height: 20px; background: #10988c; }
.m-corpo {
  position: absolute; inset: 0; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
  background: radial-gradient(circle at 35% 30%, #86f7ec, #1fc8b8 55%, #10988c);
  box-shadow: inset -14px -18px 0 rgba(0,0,0,.12), 0 16px 0 rgba(0,0,0,.25);
}
.m-occhio { position: absolute; top: 58px; width: 54px; height: 62px; background: #fff; border-radius: 50%; animation: blink 5s infinite; }
.m-occhio.sx { left: 52px; } .m-occhio.dx { right: 52px; }
.m-pupilla { position: absolute; width: 24px; height: 28px; background: var(--ink); border-radius: 50%; left: 15px; top: 20px; transition: all .25s; }
.m-guancia { position: absolute; top: 124px; width: 36px; height: 18px; border-radius: 50%; background: rgba(255, 90, 170, .55); }
.m-guancia.sx { left: 28px; } .m-guancia.dx { right: 28px; }
.m-bocca { position: absolute; left: 50%; top: 128px; transform: translateX(-50%); transition: all .25s; }
.umore-felice .m-bocca { width: 76px; height: 38px; border: 9px solid var(--ink); border-top: 0; border-radius: 0 0 40px 40px; }
.umore-triste .m-bocca { top: 142px; width: 64px; height: 28px; border: 9px solid var(--ink); border-bottom: 0; border-radius: 40px 40px 0 0; }
.umore-triste .m-pupilla { top: 28px; }
.umore-wow .m-bocca { width: 48px; height: 54px; background: var(--ink); border-radius: 50%; top: 126px; }
.umore-wow .m-occhio { transform: scale(1.12); }
.umore-pensa .m-bocca { width: 46px; height: 10px; background: var(--ink); border-radius: 6px; top: 148px; transform: translateX(-20%) rotate(-8deg); }
.umore-pensa .m-pupilla { top: 6px; left: 24px; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* ---------- classifica in basso ---------- */
#scoreboard { grid-column: 1 / -1; grid-row: 3; display: flex; gap: 26px; justify-content: center; align-items: center; padding: 0 40px 26px; }
.gioc {
  position: relative; display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.08); border: 5px solid transparent; border-radius: 999px;
  padding: 10px 14px 10px 22px; font-size: 40px; font-weight: 800; opacity: .8;
  transition: all .3s;
}
.gioc .nome { color: var(--c); }
.gioc .punti { background: rgba(0,0,0,.35); border-radius: 999px; padding: 2px 24px; min-width: 100px; text-align: center; font-size: 44px; font-weight: 900; }
.gioc.attivo { border-color: var(--c); background: rgba(255,255,255,.18); opacity: 1; transform: translateY(-8px); box-shadow: 0 0 40px rgba(255,255,255,.25); }
.gioc.bump .punti { animation: bump .7s; }
@keyframes bump { 30% { transform: scale(1.4); background: var(--ok); } }
.piu { position: absolute; right: 10px; top: -20px; font-size: 44px; font-weight: 900; color: var(--gold); animation: sale 1.4s forwards; pointer-events: none; }
@keyframes sale { to { transform: translateY(-80px); opacity: 0; } }

/* ---------- effetti ---------- */
#fx { position: absolute !important; inset: 0; pointer-events: none; z-index: 50 !important; }
.conf { position: absolute; top: -50px; width: 22px; height: 34px; border-radius: 5px; animation: cade linear forwards; }
@keyframes cade { to { transform: translateY(1200px) rotate(900deg); } }
.toast {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  background: #fff; color: var(--ink); font-size: 96px; font-weight: 900; padding: 20px 70px; border-radius: 50px;
  box-shadow: 0 14px 0 rgba(0,0,0,.3); animation: toast 1.8s forwards;
}
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- overlay di avvio (non nel palco) ---------- */
#avvio { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(10, 6, 30, .93); }
#avvio .box { text-align: center; max-width: 90vw; }
#avvio h1 { font-size: clamp(32px, 6vw, 90px); }
#avvio p { font-size: clamp(16px, 2.2vw, 34px); margin: 20px 0; line-height: 1.4; }
#avvio .piccolo { font-size: clamp(12px, 1.4vw, 20px); opacity: .7; }
#avvio button {
  font: inherit; font-size: clamp(24px, 4vw, 60px); font-weight: 900; padding: .3em 1.4em; border: 0; border-radius: 999px;
  background: var(--gold); color: var(--ink); cursor: pointer;
}
body.preview #avvio, body.avviata #avvio { display: none; }

#avvio input {
  font: inherit; font-size: clamp(24px, 4vw, 60px); font-weight: 900; width: 6em; text-align: center; letter-spacing: .15em;
  padding: .15em .4em; border-radius: 20px; border: 4px solid var(--gold); background: #fff; color: var(--ink); margin-bottom: 10px;
}

/* ---------- riconoscimento gesti ---------- */
#rileva {
  position: absolute !important; z-index: 40 !important; left: 50%; top: 18px; transform: translateX(-50%) scale(.8);
  display: flex; align-items: center; gap: 22px; padding: 12px 30px; border-radius: 999px;
  background: rgba(10, 6, 30, .85); border: 4px solid var(--c); font-size: 42px; font-weight: 900;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
#rileva.vis { opacity: 1; transform: translateX(-50%) scale(1); }
#rileva .r-chi { color: var(--c); }
#rileva .val { font-family: var(--emoji), sans-serif; }
#rileva .barra { width: 200px; height: 18px; border-radius: 9px; background: rgba(255,255,255,.2); overflow: hidden; }
#rileva .barra span { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--gold); transition: width .12s linear; }
.opz.mira { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(255,255,255,.55), 0 12px 0 rgba(0,0,0,.28); }
.opz.mira::after {
  content: ""; position: absolute; left: 8%; bottom: 14px; height: 14px; border-radius: 7px;
  width: calc(var(--p) * 84%); background: var(--gold); box-shadow: 0 0 12px var(--gold);
}

/* calibrazione */
.cal-riga { display: flex; gap: 30px; }
.cal-num {
  width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.12); font-size: 76px; font-weight: 900; font-family: var(--emoji), sans-serif;
}
.cal-num.ora { background: var(--gold); color: var(--ink); animation: pulsa 1s ease-in-out infinite; }
.cal-num.fatto { background: var(--ok); }

/* ---------- video della camera ---------- */
#camtv {
  position: absolute !important; z-index: 30 !important; right: 30px; top: 110px; width: 330px; height: 186px;
  border-radius: 18px; overflow: hidden; border: 4px solid rgba(255,255,255,.6); background: #000; box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
#camtv[hidden] { display: none; }
#camtv video, #camtv canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
#camtv.grande { left: 50px; top: 150px; right: auto; width: 1040px; height: 585px; border: 6px solid var(--gold); }
#stage.con-video #main { padding-left: 1110px; padding-right: 0; gap: 18px; }
#stage.con-video #main .nome-big { font-size: 100px !important; }
#stage.con-video #main .tocca { font-size: 50px; }
#stage.con-video #main .sottotitolo { font-size: 36px; }
#stage.con-video #main .istruzioni { font-size: 32px; }
#stage.con-video .cal-riga { flex-wrap: wrap; justify-content: center; gap: 14px; }
#stage.con-video .cal-num { width: 90px; height: 90px; font-size: 52px; }
.cal-visto { font-size: 54px; font-weight: 900; background: #fff; color: var(--ink); padding: 16px 30px; border-radius: 28px; animation: pop .45s cubic-bezier(.2, 1.8, .4, 1); }
.cal-visto b { color: #d6336c; font-family: var(--emoji), "Nunito", sans-serif; }
.cal-visto small { font-size: 28px; opacity: .7; }