/* ====================== LEDWALL 16:9 ====================== */
html, body { overflow: hidden; background: #000; }

#stageWrap {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

/* Lo stage è 1920x1080 logici, scalato via JS per riempire lo schermo 16:9 */
#stage {
  position: relative;
  width: 1920px; height: 1080px;
  transform-origin: center center;
  background:
    radial-gradient(1400px 700px at 82% -8%, rgba(123,47,247,.30), transparent 60%),
    radial-gradient(1200px 700px at -8% 112%, rgba(255,45,117,.24), transparent 55%),
    linear-gradient(160deg, var(--bg-0), var(--bg-1) 60%, var(--bg-2));
  overflow: hidden;
}

#screen { position: absolute; inset: 0; padding: 70px 90px 120px; }

/* Barra brand in basso */
#brandbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 60px; font-weight: 800; letter-spacing: .12em;
  background: rgba(0,0,0,.28); border-top: 1px solid var(--border);
  font-size: 26px;
}
.bb-logo { font-size: 30px; }
.bb-left { display: flex; align-items: center; gap: 14px; color: var(--accent); }
.bb-right { color: var(--txt-dim); font-size: 22px; letter-spacing: .04em; }

.overlay-msg {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700; color: var(--txt-dim);
  background: rgba(0,0,0,.6); z-index: 50;
}

/* ---------- Utility di layout ---------- */
.full { position: absolute; inset: 70px 90px 120px; display: flex; flex-direction: column; }
.center { align-items: center; justify-content: center; text-align: center; }
.eyebrow { font-size: 30px; letter-spacing: .35em; font-weight: 700; color: var(--accent); text-transform: uppercase; }
.fade-in { animation: fade .5s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- IDLE ---------- */
.idle-title { font-size: 120px; font-weight: 900; line-height: 1.02; letter-spacing: -.02em;
  background: linear-gradient(120deg, #fff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.idle-sub { margin-top: 22px; font-size: 34px; color: var(--txt-dim); font-weight: 600; }

/* ---------- QR ---------- */
.qr-wrap { display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: center; height: 100%; }
.qr-left { display: flex; flex-direction: column; gap: 26px; }
.qr-kicker { font-size: 34px; letter-spacing: .3em; color: var(--accent); font-weight: 800; text-transform: uppercase; }
.qr-head { font-size: 96px; font-weight: 900; line-height: 1.02; letter-spacing: -.02em; }
.qr-head .hl { background: linear-gradient(120deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qr-steps { margin-top: 10px; display: flex; flex-direction: column; gap: 18px; font-size: 34px; font-weight: 600; color: var(--txt); }
.qr-step { display: flex; align-items: center; gap: 20px; }
.qr-step .n { width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; font-size: 30px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.qr-url { margin-top: 8px; font-size: 30px; color: var(--txt-dim); }
.qr-url b { color: var(--accent); }
.qr-card { background: #fff; border-radius: 36px; padding: 40px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.qr-card img { display: block; width: 560px; height: 560px; }
.qr-count { margin-top: 26px; text-align: center; font-size: 30px; font-weight: 800; color: var(--txt); }
.qr-count b { color: var(--gold); font-size: 40px; }

/* ---------- QUESTION / LIVE / REVEAL ---------- */
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.q-counter { font-size: 30px; font-weight: 800; color: var(--txt-dim); letter-spacing: .06em; }
.q-text { font-size: 64px; font-weight: 900; line-height: 1.08; letter-spacing: -.015em; margin-top: 8px; }
.q-media { margin: 22px auto 0; max-height: 360px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); display: flex; justify-content: center; }
.q-media img, .q-media video { max-height: 360px; max-width: 100%; object-fit: contain; }

.q-options { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.q-options.cols-1 { grid-template-columns: 1fr; }
.opt {
  position: relative; display: flex; align-items: center; gap: 26px;
  padding: 30px 34px; border-radius: 20px; font-size: 42px; font-weight: 800;
  background: var(--surface-2); border: 2px solid var(--border); overflow: hidden;
  transition: all .3s ease;
}
.opt .tag { width: 64px; height: 64px; flex: none; border-radius: 14px; display: grid; place-items: center;
  font-size: 36px; font-weight: 900; color: #fff; }
.opt .label { flex: 1; }
.opt[data-k="0"] .tag { background: var(--opt-a); }
.opt[data-k="1"] .tag { background: var(--opt-b); }
.opt[data-k="2"] .tag { background: var(--opt-c); }
.opt[data-k="3"] .tag { background: var(--opt-d); }
.opt[data-k="4"] .tag { background: var(--opt-e); }
.opt[data-k="5"] .tag { background: var(--opt-f); }

/* barra di riempimento per modalità live/reveal */
.opt .fill { position: absolute; inset: 0; width: 0%; z-index: 0;
  background: rgba(255,255,255,.10); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.opt .tag, .opt .label, .opt .pct { position: relative; z-index: 1; }
.opt .pct { font-size: 38px; font-weight: 900; color: var(--txt); min-width: 130px; text-align: right; }

.opt.correct { border-color: var(--green); background: rgba(31,214,95,.16); box-shadow: 0 0 0 4px rgba(31,214,95,.25); }
.opt.correct .fill { background: rgba(31,214,95,.22); }
.opt.wrong { opacity: .45; filter: grayscale(.3); }

/* Timer ring */
.timer { position: relative; width: 120px; height: 120px; flex: none; }
.timer svg { transform: rotate(-90deg); }
.timer .track { stroke: rgba(255,255,255,.12); }
.timer .bar { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; }
.timer .num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; font-weight: 900; }

.live-stat { display: flex; align-items: center; gap: 18px; font-size: 30px; font-weight: 800; }
.live-stat .big { font-size: 46px; color: var(--gold); }

/* banner reveal */
.reveal-banner { margin-top: 18px; text-align: center; }
.reveal-banner .ttl { font-size: 40px; font-weight: 800; color: var(--green); letter-spacing: .06em; }
.reveal-banner .ans { font-size: 58px; font-weight: 900; margin-top: 6px; }
.reveal-banner .cnt { font-size: 34px; color: var(--txt-dim); margin-top: 8px; }
.reveal-banner .cnt b { color: var(--gold); font-size: 44px; }

/* ---------- WINNERS ---------- */
.win-wrap { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; }
.win-title { font-size: 150px; font-weight: 900; letter-spacing: -.02em; line-height: 1;
  background: linear-gradient(110deg, var(--gold), #fff 45%, var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 30px rgba(255,210,63,.35)); animation: winpop .7s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes winpop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.win-eyebrow { font-size: 36px; letter-spacing: .4em; color: var(--gold); font-weight: 800; text-transform: uppercase; }
.win-list { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; max-width: 1500px; }
.win-card { min-width: 320px; padding: 34px 44px; border-radius: 26px; text-align: center;
  background: linear-gradient(160deg, rgba(255,210,63,.18), rgba(255,45,117,.12));
  border: 2px solid rgba(255,210,63,.5); box-shadow: 0 20px 60px rgba(0,0,0,.4); animation: fade .6s both; }
.win-card .rank { font-size: 30px; font-weight: 900; color: var(--gold); }
.win-card .name { font-size: 56px; font-weight: 900; margin: 6px 0; }
.win-card .meta { font-size: 28px; color: var(--txt-dim); font-weight: 700; }

/* confetti */
#confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti-piece { position: absolute; top: -20px; width: 14px; height: 22px; opacity: .9;
  animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(1200px) rotate(720deg); opacity: .9; } }