@font-face { font-family: Cinzel; font-weight: 600; font-display: swap; src: url(/fonts/cinzel-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: Cinzel; font-weight: 800; font-display: swap; src: url(/fonts/cinzel-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 500; font-display: swap; src: url(/fonts/source-sans-3-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap; src: url(/fonts/source-sans-3-latin-700-normal.woff2) format("woff2"); }

:root {
  --bg: #1e4714; --deep: #123410; --gold: #d9b75a; --gold-soft: #e0c97a; --cream: #f4ecd2;
  --ink: #16330f; --lime: #b9e84a; --ogre: #6fa81c; --blue: #2b4f9e; --red: #e8745a;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--cream); font-family: "Source Sans 3", system-ui, sans-serif; font-weight: 500; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
.title { font-family: Cinzel, serif; font-weight: 800; }
.gold { color: var(--gold-soft); }

/* Riquadro cielo con la cornice intrecciata del manifesto */
.sky { background: linear-gradient(#6fb3e6, #bfe0f4); color: var(--ink); font-family: Cinzel, serif; font-weight: 800; text-align: center; line-height: 1.15;
  border: var(--frame) solid var(--gold); outline: calc(var(--frame) / 2) solid var(--blue); outline-offset: calc(var(--frame) * -1.8); }

/* ---------- Telefono ---------- */
.phone { --frame: 4px; min-height: 100dvh; max-width: 480px; margin: 0 auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.phone .logo { width: 56%; align-self: center; }
.phone .logo.big { width: 82%; margin-top: 4dvh; }
.phone .meta { display: flex; justify-content: space-between; color: var(--gold-soft); font-size: 18px; font-weight: 700; }
.phone .sky { font-size: clamp(20px, 6vw, 26px); padding: 22px 16px; }
.phone .answers { flex: 1; display: grid; grid-auto-rows: 1fr; gap: 10px; min-height: 280px; }
.phone .answer { display: flex; align-items: center; gap: 14px; padding: 8px 16px; text-align: left; background: var(--deep); border: 2px solid var(--gold); font-size: 21px; font-weight: 700; line-height: 1.15; }
.phone .answer i { font: 800 24px Cinzel, serif; color: var(--gold-soft); }
.phone .answer:active:not(:disabled) { background: var(--ogre); }
.phone .answer:disabled { opacity: .45; cursor: default; }
.phone .answer.picked { opacity: 1; background: var(--gold); border-color: var(--gold); color: var(--ink); }
.phone .answer.picked i { color: var(--ink); }
.phone .note { text-align: center; color: var(--gold-soft); font-size: 18px; min-height: 24px; }
.phone .center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.phone .cast { width: 100%; border: 3px solid var(--gold); display: block; }
.phone h1 { font: 800 30px/1.15 Cinzel, serif; }
.phone .big-num { font: 800 84px/1 Cinzel, serif; }
.phone .ok { color: var(--lime); }
.phone .ko { color: var(--red); }
.phone .line { font-size: 20px; }
.phone form { display: flex; flex-direction: column; gap: 12px; margin-top: 3dvh; }
.phone input { background: var(--cream); color: var(--ink); border: 2px solid var(--gold); border-radius: 0; padding: 15px; font-size: 20px; width: 100%; }
.phone .cta { background: var(--gold); color: var(--ink); border: 0; padding: 15px; font-size: 21px; font-weight: 700; }
.phone .cta:disabled { opacity: .6; }
.phone .error { color: #ffc9b8; min-height: 24px; text-align: center; font-size: 18px; }
.phone .small { font-size: 15px; text-align: center; opacity: .8; }

/* ---------- Schermo del cinema: tutto in unità proporzionali a un 16:9 ---------- */
.screen { --u: min(1vw, 1.7778vh); --frame: calc(var(--u) * .45); height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: none; }
.stage { width: calc(var(--u) * 100); height: calc(var(--u) * 56.25); padding: calc(var(--u) * 2.4) calc(var(--u) * 3.2); display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); font-size: calc(var(--u) * 2.6); }
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--gold-soft); font-size: calc(var(--u) * 2); }
.top img { height: calc(var(--u) * 6); }
.top b { color: #fff; font-size: calc(var(--u) * 3); }
.top .right { text-align: right; }
.stage .sky { font-size: calc(var(--u) * 3.8); padding: calc(var(--u) * 2.6) calc(var(--u) * 3); }
.grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.3); }
.opt { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 1.5); padding: 0 calc(var(--u) * 1.8); background: var(--deep); border: calc(var(--u) * .2) solid var(--gold); font-size: calc(var(--u) * 2.9); font-weight: 700; overflow: hidden; }
.opt > * { position: relative; }
.opt i { font: 800 calc(var(--u) * 3.3) Cinzel, serif; color: var(--gold-soft); }
.opt .fill { position: absolute; inset: 0 auto 0 0; background: #2f6b22; animation: grow 1s ease-out; }
@keyframes grow { from { width: 0; } }
.opt .pct { margin-left: auto; color: var(--gold-soft); }
.opt.right { border-color: var(--lime); outline: calc(var(--u) * .35) solid var(--lime); }
.opt.right .fill { background: var(--ogre); }
.opt.right .pct { color: #fff; }
.opt.dim { opacity: .55; }
.progress { text-align: center; color: var(--gold-soft); font-size: calc(var(--u) * 2.1); }
.progress b { color: #fff; font-size: calc(var(--u) * 2.8); }
.bar { height: calc(var(--u) * 1.1); background: var(--deep); border: calc(var(--u) * .12) solid var(--gold); }
.bar span { display: block; height: 100%; background: #8fc31f; transition: width .3s; }
.lobby { flex-direction: row; align-items: center; gap: calc(var(--u) * 4); }
.lobby .left { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 1.8); align-items: center; text-align: center; }
.lobby .badge { font: 600 calc(var(--u) * 2.1) Cinzel, serif; letter-spacing: .12em; color: var(--gold-soft); }
.lobby .logo { width: calc(var(--u) * 42); }
.lobby .cta { font: 800 calc(var(--u) * 3.8)/1.15 Cinzel, serif; }
.lobby .count { color: var(--gold-soft); font-size: calc(var(--u) * 2.6); }
.lobby .count b { color: #fff; font-size: calc(var(--u) * 4); }
.lobby .qr { background: #fff; width: calc(var(--u) * 36); height: calc(var(--u) * 36); padding: calc(var(--u) * .8); border: calc(var(--u) * .5) solid var(--gold); outline: calc(var(--u) * .25) solid var(--blue); }
.lobby .qr img { width: 100%; height: 100%; display: block; }
.rank-title { text-align: center; font: 800 calc(var(--u) * 4.2) Cinzel, serif; color: var(--gold-soft); }
.rank { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 1fr); grid-auto-flow: column; gap: calc(var(--u) * .9) calc(var(--u) * 3); }
.rank div { display: flex; align-items: center; gap: calc(var(--u) * 1.4); border-bottom: calc(var(--u) * .15) solid var(--gold); font-size: calc(var(--u) * 3); font-weight: 700; }
.rank i { font: 800 calc(var(--u) * 3) Cinzel, serif; color: var(--gold-soft); width: calc(var(--u) * 4); }
.rank b { margin-left: auto; color: var(--lime); }
.rank .first { color: var(--lime); }

/* ---------- Console regia ---------- */
.regia { max-width: 760px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.regia h1 { font: 800 26px Cinzel, serif; color: var(--gold-soft); }
.regia .panel { background: var(--deep); border: 1px solid var(--gold); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.regia .panel.stats { flex-direction: row; gap: 28px; font-size: 18px; flex-wrap: wrap; }
.regia .stats b { font-size: 28px; color: #fff; }
.regia .answer-line.right { color: var(--lime); font-weight: 700; }
.regia .main-btn { background: var(--gold); color: var(--ink); border: 0; padding: 22px; font-size: 24px; font-weight: 700; }
.regia .main-btn:disabled { opacity: .5; cursor: default; }
.regia .danger { align-self: flex-start; background: none; border: 1px solid var(--red); color: var(--red); padding: 8px 14px; }
.regia input { background: var(--cream); color: var(--ink); border: 0; padding: 14px; font-size: 18px; }
.regia form { display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.regia a { color: var(--gold-soft); }
.regia .error { color: #ffc9b8; min-height: 22px; }