/* ============================================================================
   MEGA QUIZ - il vestito (ART_STYLE.md). La struttura comune sta in stile.css
   e non si tocca; qui c'e' lo studio TV: cartellone con le lampadine,
   pulsantiera A/B/C/D, timer della domanda, luci della puntata, QR della fine.
   ========================================================================== */

/* Bungee ha un solo peso: dichiarandolo per tutta la gamma 100-900 il browser
   non lo "ingrassa" da solo quando stile.css chiede 900 (il grassetto finto di
   un carattere da insegna si impasta e non si legge). */
@font-face {
  font-family: "Bungee";
  src: url("font/Bungee-400.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --mq-a: #2E7BFF;          /* blu elettrico */
  --mq-b: #FF2E88;          /* magenta luci */
  --mq-c: #FF9F1C;          /* arancio */
  --mq-d: #25E2F2;          /* ciano */
  --mq-oro: #FFC93C;
  --mq-ok: #2FE27A;
  --mq-ko: #FF3B5C;
  --mq-indaco: #140A3A;
  --mq-pannello: #22125C;
}
body { font-synthesis: none; }

/* Le schermate dello scheletro prendono l'indaco dello studio invece del nero. */
.schermata { background: rgba(16, 8, 46, .88); }
/* il menu lascia vedere il cartellone che "va in onda" (la vetrina), ma
   sfocato e piu' scuro al centro: il titolo deve staccarsi dalla domanda dietro */
#schermataMenu {
  background: radial-gradient(ellipse at center, rgba(16, 8, 46, .74) 0%, rgba(16, 8, 46, .58) 50%, rgba(16, 8, 46, .32) 100%);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#schermataMenu .titolo { text-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 0 28px rgba(46, 123, 255, .8), 0 0 6px rgba(0, 0, 0, .9); }
.titolo .riga2 { text-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 0 30px rgba(255, 201, 60, .7); }
#conto span { text-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 40px var(--mq-a), 0 0 90px var(--mq-b); }
.voce .valore.pulsa { color: var(--mq-oro); }
/* il numero della domanda in ciano: sul telefono stretto "3/10" e "396" uno
   accanto all'altro, dello stesso colore, si leggevano come un numero solo */
#voce_domanda .valore { color: var(--mq-d); text-shadow: 0 0 10px rgba(37, 226, 242, .55); }
#voce_domanda { margin-right: 4px; }

/* ------------------------------------------------------------- impianto */
.mq {
  position: relative;
  width: 100%; max-width: 560px; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(8px, 1.3vh, 14px);
  padding: 0 2px;
}

/* ------------------------------------------------------- barra del tempo */
.mq-tempo {
  flex: 0 0 auto; position: relative; overflow: hidden;
  height: clamp(9px, 1.25vh, 13px); border-radius: 99px;
  background: rgba(8, 3, 26, .75);
  box-shadow: inset 0 0 0 1.5px rgba(74, 47, 160, .9), 0 0 14px rgba(37, 226, 242, .18);
}
.mq-tempo-pieno {
  position: absolute; inset: 0; border-radius: 99px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--mq-d) 0%, #7FE7FF 45%, var(--mq-oro) 100%);
  box-shadow: 0 0 12px rgba(37, 226, 242, .7);
}
.mq-tempo.allarme .mq-tempo-pieno {
  background: linear-gradient(90deg, var(--mq-ko), #FF7A3C);
  box-shadow: 0 0 16px rgba(255, 59, 92, .9);
  animation: mqBarraPulsa .5s ease-in-out infinite alternate;
}
@keyframes mqBarraPulsa { from { filter: brightness(1); } to { filter: brightness(1.6); } }

/* ------------------------------------------------------------ cartellone */
.mq-cartellone {
  position: relative; flex: 1 1 0;
  min-height: 132px; max-height: 340px;
  margin-top: 30px;                       /* spazio per il medaglione col marchio */
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(46, 123, 255, .45), transparent 62%),
    radial-gradient(ellipse at 50% 120%, rgba(255, 46, 136, .28), transparent 60%),
    linear-gradient(180deg, #2B1773 0%, #170B4A 100%);
  box-shadow:
    inset 0 0 0 2px rgba(46, 123, 255, .9),
    inset 0 0 34px rgba(46, 123, 255, .25),
    0 0 0 3px var(--mq-oro),
    0 0 26px rgba(255, 46, 136, .35),
    0 18px 40px rgba(0, 0, 0, .5);
  perspective: 900px;
}
.mq-cartellone.pop { animation: mqPop .42s cubic-bezier(.2, 1.6, .35, 1); }
@keyframes mqPop { 0% { transform: scale(1); } 30% { transform: scale(1.035); } 100% { transform: scale(1); } }

/* il marchio FRD, come il logo dello show, a cavallo del bordo */
.mq-medaglione {
  position: absolute; z-index: 3; left: 50%; top: -30px;
  width: 60px; height: 60px; margin-left: -30px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fff 0%, #f1ecff 60%, #cfc4ff 100%);
  box-shadow: 0 0 0 3px var(--mq-oro), 0 0 0 6px rgba(46, 123, 255, .85), 0 0 26px rgba(255, 201, 60, .7), 0 8px 18px rgba(0, 0, 0, .5);
  display: grid; place-items: center;
}
.mq-medaglione img { width: 92%; height: 92%; display: block; }

.mq-testa {
  position: absolute; z-index: 2; left: 20px; right: 20px; top: 14px; height: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  pointer-events: none;
}
.mq-chip {
  --cat: var(--mq-a);
  display: inline-flex; align-items: center; gap: 5px; max-width: calc(50% - 36px);
  padding: 3px 9px 3px 6px; border-radius: 99px;
  background: color-mix(in srgb, var(--cat) 30%, #140A3A);
  box-shadow: inset 0 0 0 1.5px var(--cat), 0 0 10px color-mix(in srgb, var(--cat) 50%, transparent);
  font-family: var(--font-titolo); font-size: 10.5px; letter-spacing: .04em; line-height: 1;
  color: #fff; white-space: nowrap; transition: opacity .2s;
}
.mq-chip .ico { font-size: 13px; line-height: 1; font-family: system-ui, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.mq-chip .nome { overflow: hidden; text-overflow: ellipsis; }
.mq-chip[hidden] { display: inline-flex; opacity: 0; }
/* i secondi della domanda, in alto a destra sul cartellone */
.mq-secondi {
  min-width: 2.2em; padding: 3px 7px; border-radius: 99px; text-align: center;
  font-family: var(--font-titolo); font-size: 13px; line-height: 1; letter-spacing: .02em;
  color: var(--mq-d); background: rgba(8, 3, 26, .7);
  box-shadow: inset 0 0 0 1.5px rgba(37, 226, 242, .7), 0 0 10px rgba(37, 226, 242, .35);
  white-space: nowrap;
}
.mq-secondi.allarme {
  color: #fff; background: var(--mq-ko);
  box-shadow: inset 0 0 0 1.5px #FFC2CD, 0 0 14px rgba(255, 59, 92, .9);
  animation: mqSecondi .5s ease-in-out infinite alternate;
}
@keyframes mqSecondi { from { transform: scale(1); } to { transform: scale(1.18); } }

.mq-domanda {
  position: absolute; z-index: 1; left: 22px; right: 22px; top: 42px; bottom: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  transform-origin: 50% 50%; backface-visibility: hidden;
}
.mq-testo {
  margin: 0; width: 100%; max-height: 100%;
  font-weight: 800; font-size: 22px; line-height: 1.22; letter-spacing: .005em;
  color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 0 18px rgba(46, 123, 255, .35);
  overflow-wrap: break-word; hyphens: auto;
}
/* dietro al menu la domanda d'esempio resta in sottofondo: il titolo del gioco viene prima */
.mq.in-vetrina .mq-testo { opacity: .4; }   /* sul testo: il contenitore ha le animazioni del giro */
/* sotto le domande d'opinione: nessuna risposta e' sbagliata */
.mq-nota {
  margin: 0; max-width: 34ch; font-size: clamp(11.5px, 1.6vh, 15px); font-weight: 700; line-height: 1.3;
  color: var(--mq-oro); text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.mq-nota[hidden] { display: none; }
.mq-testo.titolone {
  font-family: var(--font-titolo); font-weight: 400; letter-spacing: .06em; color: var(--mq-oro);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 24px rgba(255, 201, 60, .65);
}

/* le lampadine: "chaser" a tre fasi come le insegne dei teatri */
.mq-lampadine { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.mq-lampadine i {
  --lamp-on: #FFD45C; --lamp-glow: rgba(255, 201, 60, .85);
  position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: rgba(120, 96, 40, .55);
  animation: mqLamp var(--giro, 1.5s) steps(1, end) infinite;
  animation-delay: calc(var(--k) * var(--giro, 1.5s) / -3);
}
@keyframes mqLamp {
  0%      { background: var(--lamp-on); box-shadow: 0 0 6px 2px var(--lamp-glow); }
  33.333% { background: rgba(120, 96, 40, .55); box-shadow: none; }
}
.mq-cartellone[data-luci="giusta"] { --giro: .27s; }
.mq-cartellone[data-luci="giusta"] .mq-lampadine i { --lamp-on: #7CFFAE; --lamp-glow: rgba(47, 226, 122, .95); }
.mq-cartellone[data-luci="sbagliata"] { --giro: .5s; }
.mq-cartellone[data-luci="sbagliata"] .mq-lampadine i { --lamp-on: #FF6A82; --lamp-glow: rgba(255, 59, 92, .95); }
.mq-cartellone[data-luci="combo"] { --giro: .18s; }
.mq-cartellone[data-luci="combo"] .mq-lampadine i { --lamp-on: hsl(calc(var(--h) * 1deg) 100% 64%); --lamp-glow: hsl(calc(var(--h) * 1deg) 100% 60% / .95); }
.mq-cartellone[data-luci="allarme"] { --giro: .36s; }
.mq-cartellone[data-luci="allarme"] .mq-lampadine i { --lamp-on: #FF5C74; --lamp-glow: rgba(255, 59, 92, .9); }
.mq-cartellone[data-luci="vetrina"] { --giro: 1.1s; }
.mq-ferma .mq-lampadine i, .mq-ferma .mq-molt.fuoco::before { animation-play-state: paused; }

/* --------------------------------------------- misuratore serie / moltiplicatore */
.mq-serie {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  height: clamp(30px, 4.3vh, 42px); padding: 0 2px;
}
.mq-molt {
  --lv: var(--mq-d);
  position: relative; isolation: isolate;
  flex: 0 0 auto; min-width: 62px; height: 100%;
  display: grid; place-items: center; border-radius: 12px;
  background: rgba(10, 4, 34, .78);
  box-shadow: inset 0 0 0 1.5px var(--lv), 0 0 12px color-mix(in srgb, var(--lv) 45%, transparent);
  font-family: var(--font-titolo); font-size: clamp(17px, 2.7vh, 24px); line-height: 1;
  color: var(--lv); text-shadow: 0 0 10px var(--lv);
}
.mq-molt[data-x="1"] { --lv: #8E84C9; text-shadow: none; }
.mq-molt[data-x="2"] { --lv: var(--mq-d); }
.mq-molt[data-x="3"] { --lv: var(--mq-oro); color: #fff; }
.mq-molt.sale { animation: mqSale .5s cubic-bezier(.2, 1.8, .35, 1); }
@keyframes mqSale { 0% { transform: scale(1); } 35% { transform: scale(1.4) rotate(-4deg); } 100% { transform: scale(1); } }
/* al massimo (x3) il moltiplicatore prende fuoco */
.mq-molt.fuoco::before {
  content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: 30%; height: 150%;
  border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse at 50% 85%, #FFF3B0 0%, var(--mq-oro) 22%, var(--mq-c) 48%, rgba(255, 46, 136, .55) 70%, transparent 78%);
  filter: blur(3px);
  animation: mqFiamma .16s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
}
@keyframes mqFiamma { from { transform: scaleY(.88) scaleX(1.02); opacity: .85; } to { transform: scaleY(1.08) scaleX(.95); opacity: 1; } }
/* le dieci luci della puntata, una per domanda */
.mq-luci {
  flex: 1 1 auto; height: 100%;
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; align-items: center;
}
.mq-luci i {
  position: relative; height: 44%; border-radius: 5px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(185, 176, 232, .22);
  transition: background .15s, box-shadow .15s;
}
.mq-luci i.giusta { background: var(--mq-ok); box-shadow: 0 0 9px var(--mq-ok), inset 0 1px 0 rgba(255, 255, 255, .5); }
.mq-luci i.opinione { background: var(--mq-oro); box-shadow: 0 0 9px var(--mq-oro), inset 0 1px 0 rgba(255, 255, 255, .5); }
.mq-luci i.sbagliata { background: var(--mq-ko); box-shadow: 0 0 9px var(--mq-ko), inset 0 1px 0 rgba(255, 255, 255, .4); }
.mq-luci i.scaduta { background: rgba(255, 59, 92, .35); box-shadow: inset 0 0 0 1.5px var(--mq-ko); }
.mq-luci i.attuale { box-shadow: inset 0 0 0 2px #fff, 0 0 10px rgba(255, 255, 255, .6); animation: mqAttuale .7s ease-in-out infinite alternate; }
@keyframes mqAttuale { from { opacity: .55; } to { opacity: 1; } }
.mq-luci i.nuova { animation: mqLuce .35s cubic-bezier(.2, 1.8, .35, 1); }
@keyframes mqLuce { 0% { transform: scaleY(2.2); filter: brightness(2); } 100% { transform: none; } }
.mq-luci.spegne i { transition: background .4s, box-shadow .4s; }

/* ------------------------------------------------- la pulsantiera A/B/C/D */
.mq-risposte { flex: 0 0 auto; display: grid; grid-template-columns: 1fr; gap: clamp(7px, 1.05vh, 11px); }
.mq-risp {
  --col: var(--mq-a); --lettera-testo: #fff;
  appearance: none; border: 0; cursor: pointer; font-family: inherit;
  position: relative; display: flex; align-items: center; gap: 11px;
  height: clamp(48px, 7.4vh, 70px); padding: 0 14px 0 8px; border-radius: 16px;
  text-align: left; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--col) 34%, #22125C) 0%, color-mix(in srgb, var(--col) 16%, #140A3A) 100%);
  box-shadow:
    inset 0 0 0 2px var(--col),
    inset 0 1px 0 rgba(255, 255, 255, .25),
    0 5px 0 color-mix(in srgb, var(--col) 40%, #05010f),
    0 0 16px color-mix(in srgb, var(--col) 40%, transparent);
  transition: transform .07s ease, box-shadow .07s ease, filter .15s, opacity .2s;
  touch-action: manipulation;
}
.mq-risp:nth-child(2) { --col: var(--mq-b); }
.mq-risp:nth-child(3) { --col: var(--mq-c); --lettera-testo: #2A1400; }
.mq-risp:nth-child(4) { --col: var(--mq-d); --lettera-testo: #04252B; }
.mq-lettera {
  flex: 0 0 auto; width: clamp(30px, 4.5vh, 42px); height: clamp(30px, 4.5vh, 42px); border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--col) 55%, #fff), var(--col) 60%);
  color: var(--lettera-testo); font-family: var(--font-titolo); font-size: clamp(14px, 2.2vh, 19px); line-height: 1;
  box-shadow: 0 0 10px color-mix(in srgb, var(--col) 70%, transparent), inset 0 -2px 0 rgba(0, 0, 0, .2);
}
.mq-rtesto {
  flex: 1 1 auto; min-width: 0; max-height: 100%; overflow: hidden;
  font-weight: 800; font-size: 17px; line-height: 1.15;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  overflow-wrap: break-word; hyphens: auto;
}
.mq-risp:disabled { cursor: default; }
.mq-risp[hidden] { display: none; }
.mq-risp.premuto { transform: translateY(4px) scale(.985); box-shadow: inset 0 0 0 2px var(--col), 0 1px 0 color-mix(in srgb, var(--col) 40%, #05010f), 0 0 22px var(--col); filter: brightness(1.25); }
.mq-risp.giusta {
  --col: var(--mq-ok); --lettera-testo: #04230F;
  background: linear-gradient(180deg, #5CF29A 0%, #23C866 100%); color: #04230F; text-shadow: none;
  box-shadow: inset 0 0 0 2px #B6FFD2, 0 5px 0 #0D6E35, 0 0 30px rgba(47, 226, 122, .9);
  animation: mqGiusta .45s cubic-bezier(.2, 1.7, .35, 1);
}
@keyframes mqGiusta { 0% { transform: scale(.96); } 40% { transform: scale(1.045); } 100% { transform: scale(1); } }
.mq-risp.sbagliata {
  --col: var(--mq-ko); --lettera-testo: #fff;
  background: linear-gradient(180deg, #FF6A82 0%, #D81E42 100%);
  box-shadow: inset 0 0 0 2px #FFC2CD, 0 5px 0 #6E0A1E, 0 0 26px rgba(255, 59, 92, .9);
  animation: mqTrema .38s linear;
}
@keyframes mqTrema {
  0%, 100% { transform: translateX(0); } 15% { transform: translateX(-9px) rotate(-1deg); } 30% { transform: translateX(8px) rotate(1deg); }
  45% { transform: translateX(-6px); } 60% { transform: translateX(5px); } 75% { transform: translateX(-3px); } 90% { transform: translateX(2px); }
}
.mq-risp.rivela {              /* dopo un errore: ecco qual era quella giusta */
  --col: var(--mq-ok); --lettera-testo: #04230F;
  animation: mqRivela .35s ease-in-out 2 alternate;
  box-shadow: inset 0 0 0 3px var(--mq-ok), 0 5px 0 #0D6E35, 0 0 28px rgba(47, 226, 122, .85);
}
@keyframes mqRivela { from { filter: brightness(1); } to { filter: brightness(1.7); } }
.mq-risp.scelta {             /* la risposta d'opinione: scelta, non giusta */
  --col: var(--mq-oro); --lettera-testo: #2A1400;
  background: linear-gradient(180deg, #FFD978 0%, #F2A81E 100%); color: #2A1400; text-shadow: none;
  box-shadow: inset 0 0 0 2px #FFF1C2, 0 5px 0 #7A4E06, 0 0 28px rgba(255, 201, 60, .85);
  animation: mqGiusta .45s cubic-bezier(.2, 1.7, .35, 1);
}
.mq-risp.spenta { opacity: .38; filter: saturate(.5); }
.mq-risp.vuota .mq-rtesto { opacity: 0; }

/* --------------------------------------- la schermata di fine: QR e ritorno */
.mq-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mq-qr canvas {
  display: block; width: clamp(96px, 27vw, 140px); height: auto; border-radius: 12px;
  image-rendering: pixelated; background: #fff;
  box-shadow: 0 0 0 3px var(--mq-oro), 0 0 22px rgba(255, 201, 60, .45), 0 10px 24px rgba(0, 0, 0, .45);
}
.mq-qr-testo { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--testo); }
.mq-ritorno { margin-top: -4px; min-height: 1.4em; }
@media (max-height: 680px) {
  .mq-qr canvas { width: 92px; }
  .mq-qr-testo { font-size: 11.5px; }
}
@media (max-height: 600px) {        /* 320x568: la fine sta tutta, anche con la riga del ritorno */
  .mq-qr canvas { width: 82px; }
  .mq-qr { gap: 4px; }
}

/* ------------------------------------------------------------- per misura */
@media (max-height: 640px) {
  .mq-cartellone { margin-top: 26px; min-height: 118px; }
  .mq-medaglione { width: 50px; height: 50px; margin-left: -25px; top: -25px; }
  .mq-testa { top: 11px; left: 16px; right: 16px; }
  .mq-domanda { top: 34px; left: 16px; right: 16px; bottom: 12px; }
  .mq-chip { font-size: 9.5px; }
  .mq-secondi { font-size: 11.5px; }
}
@media (max-width: 350px) {
  .mq-chip { max-width: calc(50% - 28px); font-size: 8.5px; letter-spacing: 0; padding-right: 7px; }
  .mq-chip .ico { font-size: 11px; }
  .mq-risp { gap: 9px; padding-right: 10px; }
}
/* schermo largo (TV, PC): cartellone grande e pulsantiera 2x2 */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .mq { max-width: 1040px; gap: clamp(10px, 1.6vh, 18px); }
  .mq-cartellone { max-height: 420px; margin-top: 36px; border-radius: 30px; }
  .mq-medaglione { width: 74px; height: 74px; margin-left: -37px; top: -37px; }
  .mq-testa { top: 18px; left: 30px; right: 30px; }
  .mq-chip { font-size: 13px; }
  .mq-secondi { font-size: 17px; }
  .mq-chip .ico { font-size: 16px; }
  .mq-domanda { top: 50px; left: 40px; right: 40px; bottom: 26px; }
  .mq-lampadine i { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
  .mq-serie { height: 44px; max-width: 760px; width: 100%; margin: 0 auto; }
  .mq-risposte { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .mq-risp { height: clamp(64px, 9vh, 96px); border-radius: 20px; padding: 0 20px 0 12px; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mq-lampadine i { animation-duration: 3s; }
  .mq-molt.fuoco::before { animation: none; }
}