body.host { overflow: hidden; font-size: clamp(14px, 1.25vw, 30px); }
.screen { position: absolute; top: 10px; left: 0; right: 0; bottom: 0; padding: 2.2vh 2.5vw 11.5vh; display: flex; flex-direction: column; }
.screen.hidden { display: none; }

/* ---------- LOBBY ---------- */
.lobby-head { display: flex; align-items: center; gap: 1.2vw; }
.logo { font-size: 4.2vw; line-height: 1; }
.lobby-head h1 { margin: 0; font-size: 3.4vw; font-weight: 900; letter-spacing: -.01em; }
.lobby-head h1 .it-g { color: var(--verde); }
.lobby-head h1 .it-r { color: var(--rosso); }
.subtitle { margin: .2em 0 0; font-size: 1.5vw; color: var(--grigio); font-weight: 600; }
/* container-type: size -> the QR can be sized on the real available height (cqh), whatever the header/browser chrome takes */
.lobby-main { flex: 1; display: flex; gap: 2.5vw; min-height: 0; margin-top: 2vh; container-type: size; }
.qr-card {
  /* text sizes limited by both width and height, so short/wide windows (browser chrome, 125% scaling) don't push content out */
  --f-step: clamp(13px, min(1.7vw, 3vh), 36px);
  --f-or: clamp(11px, min(1.1vw, 1.95vh), 24px);
  --f-url: clamp(14px, min(2.1vw, 3.7vh), 44px);
  --pad-y: 2.4vh;
  background: #fff; border-radius: 28px; box-shadow: var(--ombra); padding: var(--pad-y) 2vw; display: flex;
  flex-direction: column; align-items: center; justify-content: center; border: 6px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, var(--verde), #fff 50%, var(--rosso));
  background-origin: border-box; background-clip: padding-box, border-box; min-width: 0; min-height: 0; max-width: 58%;
  box-sizing: border-box;
}
.qr-card img {
  /* fallback for browsers without container query units */
  width: min(56vh, 44vw); height: min(56vh, 44vw);
  /* square QR = the smallest of: 56vh, 44vw, card height minus border, padding and the text below it */
  width: min(56vh, 44vw, calc(100cqh - 12px - 2 * var(--pad-y) - 1.2vh - 1.2 * (var(--f-step) + var(--f-or) + var(--f-url)) - .4 * var(--f-or) - 6px));
  height: min(56vh, 44vw, calc(100cqh - 12px - 2 * var(--pad-y) - 1.2vh - 1.2 * (var(--f-step) + var(--f-or) + var(--f-url)) - .4 * var(--f-or) - 6px));
  max-width: 100%; flex: 0 1 auto; min-height: 0; object-fit: contain; /* last-resort: shrink instead of overflowing */
  image-rendering: pixelated;
}
.join-steps { text-align: center; margin-top: 1.2vh; max-width: 100%; min-width: 0; line-height: 1.2; flex: none; }
.join-steps .step { font-size: var(--f-step); font-weight: 800; }
.join-steps .or { color: var(--grigio); font-size: var(--f-or); margin: .2em 0; }
.join-url {
  font-size: var(--f-url); font-weight: 900; color: var(--verde); font-family: Consolas, "Courier New", monospace;
  max-width: 100%; overflow-wrap: anywhere; word-break: normal;
}
#urlSelect { margin-top: 1vh; font-size: .8vw; max-width: 100%; flex: none; }
.players-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.count { font-size: 2.2vw; font-weight: 800; }
.count b { font-size: 4.5vw; color: var(--rosso); vertical-align: -0.12em; }
.chips { display: flex; flex-wrap: wrap; gap: .8vw; align-content: flex-start; overflow: hidden; flex: 1; padding-top: 1.5vh; }
.chip {
  background: #fff; border-radius: 999px; padding: .35em 1em; font-size: 1.6vw; font-weight: 800; box-shadow: var(--ombra);
  animation: pop .45s ease-out; cursor: pointer; border-left: 8px solid var(--verde);
}
.chip:nth-child(3n+2) { border-left-color: #cfcfcf; }
.chip:nth-child(3n) { border-left-color: var(--rosso); }
.chip.off { opacity: .45; }
.hint { color: var(--grigio); font-size: 1.4vw; font-weight: 600; margin: 1vh 0 0; }

/* ---------- PREPARATI ---------- */
#s-getready { align-items: center; justify-content: center; text-align: center; gap: 3vh; }
.gr-num { font-size: 4vw; font-weight: 900; }
#s-getready .cat-badge { font-size: 2.5vw; }
.gr-count {
  width: 22vh; height: 22vh; border-radius: 50%; background: var(--verde); color: #fff; font-size: 12vh; font-weight: 900;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--ombra); animation: pulse 1s infinite;
}

/* ---------- DOMANDA ---------- */
.q-top { display: flex; align-items: center; gap: 1.5vw; font-size: 1.7vw; font-weight: 800; }
.q-top .cat-badge { font-size: 1.5vw; }
.q-answers-count { margin-left: auto; background: #fff; padding: .3em .9em; border-radius: 14px; box-shadow: var(--ombra); }
.q-answers-count b { color: var(--rosso); font-size: 1.3em; }
.q-middle { display: flex; align-items: center; gap: 2.5vw; margin: 2.2vh 0; flex: 1; min-height: 0; }
.q-text {
  flex: 1; margin: 0; font-size: 3.3vw; line-height: 1.2; font-weight: 900; background: #fff; border-radius: 24px;
  padding: 2.5vh 2.5vw; box-shadow: var(--ombra); text-align: center; align-self: stretch; display: flex; align-items: center; justify-content: center;
}
.timer { position: relative; width: 17vh; height: 17vh; flex: none; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: #fff; stroke-width: 9; }
.timer .bg { stroke: #e5e7eb; }
.timer .fg { fill: none; stroke: var(--verde); stroke-linecap: round; stroke-dasharray: 283; transition: stroke .3s; }
.timer.warn .fg { stroke: var(--rosso); }
.timer span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 7vh; font-weight: 900; }
.timer.warn span { color: var(--rosso); animation: pulse .5s infinite; }
.correct-box {
  width: 17vh; height: 17vh; flex: none; border-radius: 50%; background: var(--verde); color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-weight: 900; box-shadow: var(--ombra); text-align: center; line-height: 1.05;
}
.correct-box b { font-size: 6vh; }
.correct-box small { font-size: 1.8vh; padding: 0 1vh; }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vh 1.2vw; }
.ans {
  display: flex; align-items: center; gap: 1.2vw; color: #fff; border-radius: 18px; padding: 2.2vh 1.5vw; min-height: 11vh;
  font-size: 2.3vw; font-weight: 800; box-shadow: 0 5px 0 rgba(0, 0, 0, .25); transition: opacity .4s, transform .4s; position: relative;
}
.ans .shape { font-size: 2.2vw; width: 3.4vw; height: 3.4vw; background: rgba(0, 0, 0, .18); border-radius: 12px; flex: none; }
.ans .letter { font-weight: 900; opacity: .85; }
.ans .txt { flex: 1; line-height: 1.15; }
.ans .cnt { font-size: 2.4vw; font-weight: 900; background: rgba(255, 255, 255, .25); border-radius: 12px; padding: 0 .5em; }
.ans.a0 { background: var(--a); } .ans.a1 { background: var(--b); } .ans.a2 { background: var(--c); } .ans.a3 { background: var(--d); }
.ans.dim { opacity: .28; transform: scale(.97); }
.ans.right { outline: 7px solid #fff; box-shadow: 0 0 0 12px var(--verde), 0 10px 25px rgba(0, 0, 0, .3); transform: scale(1.02); z-index: 1; }
.ans .tick { font-size: 2.8vw; }
.curiosita {
  background: #fffbe6; border: 3px dashed var(--c); border-radius: 18px; padding: 1.2vh 1.5vw; margin: -0.8vh 0 1.8vh;
  font-size: 1.75vw; line-height: 1.3; font-weight: 600; animation: fadeUp .5s ease-out;
}
.cur-title { font-weight: 900; color: #a16207; }
#s-question.revealed .q-text { font-size: 2.6vw; }

/* ---------- CLASSIFICA ---------- */
.rank-title { margin: 0 0 1.5vh; font-size: 3.2vw; font-weight: 900; text-align: center; }
.rank-title small { display: block; font-size: 1.4vw; color: var(--grigio); font-weight: 700; }
.rank-list { list-style: none; margin: 0 auto; padding: 0; width: min(78vw, 1500px); display: flex; flex-direction: column; gap: .8vh; }
.rank-list li {
  display: flex; align-items: center; gap: 1.5vw; background: #fff; border-radius: 16px; padding: .45vh 1.5vw; box-shadow: var(--ombra);
  font-size: 1.75vw; font-weight: 800; animation: fadeUp .4s ease-out both;
}
.rank-list .pos { width: 2.8vw; height: 2.8vw; border-radius: 50%; background: #eef2f7; display: flex; align-items: center; justify-content: center; font-weight: 900; flex: none; }
.rank-list li:nth-child(1) .pos { background: #f5c518; }
.rank-list li:nth-child(2) .pos { background: #c9ced6; }
.rank-list li:nth-child(3) .pos { background: #d9965b; color: #fff; }
.rank-list .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list .mv { font-size: 1.4vw; width: 3.5vw; text-align: center; }
.mv.up { color: var(--verde); } .mv.down { color: var(--rosso); }
.rank-list .gain { font-size: 1.5vw; color: var(--verde); width: 7vw; text-align: right; }
.rank-list .gain.zero { color: #c0c4cc; }
.rank-list .sc { width: 9vw; text-align: right; font-weight: 900; }

/* ---------- FINALE ---------- */
#s-final { align-items: center; }
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.final-title { margin: 0; font-size: 3.6vw; font-weight: 900; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 1.5vw; margin-top: 2vh; flex: 1; max-height: 58vh; }
.pod { width: 20vw; display: flex; flex-direction: column; align-items: center; text-align: center; animation: fadeUp .8s ease-out both; }
.pod .medal { font-size: 5vw; line-height: 1; }
.pod .pname { font-size: 2.4vw; font-weight: 900; margin: .2em 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .pscore { font-size: 1.6vw; font-weight: 800; color: var(--grigio); margin-bottom: .4em; }
.pod .block { width: 100%; border-radius: 18px 18px 0 0; display: flex; align-items: flex-start; justify-content: center; color: #fff; font-size: 5vw; font-weight: 900; padding-top: 1vh; box-shadow: var(--ombra); }
.pod.p1 .block { height: 30vh; background: var(--verde); }
.pod.p2 .block { height: 21vh; background: #9aa3ad; }
.pod.p3 .block { height: 14vh; background: var(--rosso); }
.pod.p1 { animation-delay: 1.4s; } .pod.p2 { animation-delay: .8s; } .pod.p3 { animation-delay: .2s; }
.final-rest { list-style: none; padding: 0; margin: 2vh 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .8vh 1vw; max-width: 90vw; }
.final-rest li { background: #fff; border-radius: 999px; padding: .3em 1em; font-size: 1.4vw; font-weight: 700; box-shadow: var(--ombra); }

/* ---------- COMANDI ---------- */
.controls { position: fixed; right: 2.5vw; bottom: 2.2vh; display: flex; gap: 1vw; z-index: 10; }
.controls .btn { font-size: 1.9vw; }
.toolbar { position: fixed; left: 2.5vw; bottom: 2.4vh; display: flex; align-items: center; gap: .6vw; z-index: 10; }
.toolbar button { font-size: 1.2vw; background: #fff; border: 0; border-radius: 10px; padding: .3em .55em; box-shadow: var(--ombra); cursor: pointer; }
.foot-url { font-size: 1.3vw; font-weight: 800; color: var(--grigio); background: rgba(255, 255, 255, .85); padding: .25em .7em; border-radius: 10px; }
.foot-url b { color: var(--verde); }
.banner { position: fixed; top: 10px; left: 0; right: 0; background: #fde68a; text-align: center; padding: .5em; font-weight: 700; z-index: 20; font-size: 1.1vw; }
.toast { position: fixed; top: 3vh; left: 50%; transform: translateX(-50%); background: var(--rosso); color: #fff; padding: .7em 1.4em; border-radius: 14px; font-weight: 800; z-index: 30; box-shadow: var(--ombra); max-width: 80vw; font-size: 1.2vw; }
.overlay { position: fixed; inset: 0; background: rgba(29, 36, 51, .6); display: flex; align-items: center; justify-content: center; z-index: 40; }
.overlay form { background: #fff; padding: 2em; border-radius: 20px; text-align: center; font-size: 1.4vw; }
.overlay input { font-size: 1.5em; padding: .3em; width: 8em; text-align: center; margin: .6em 0; border-radius: 10px; border: 2px solid #ccc; }