/* ==========================================================
   Notte dei Ricercatori 2026 – stile "cielo notturno da palco"
   ========================================================== */
:root {
  --notte: #14123A;
  --notte-scura: #0B0A26;
  --crema: #FFF7E6;
  --crema-tenue: rgba(255, 247, 230, 0.62);
  --lampone: #FF4F87;
  --menta: #2EE6A8;
  --oro: #FFC83D;
  --cielo: #5AC8FA;
  --lilla: #B388FF;
  --arancio: #FF8A3D;
  --rosso: #FF5A5A;
  --font: "Fredoka", "Nunito", "Arial Rounded MT Bold", "Segoe UI", sans-serif;
  --pannello-l: 0px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  background: radial-gradient(ellipse at 50% 120%, #2A2670 0%, var(--notte) 45%, var(--notte-scura) 100%);
  color: var(--crema);
  overflow: hidden;
  user-select: none;
}
kbd {
  font: inherit; font-size: 0.85em;
  background: rgba(255,247,230,0.14);
  border: 1px solid rgba(255,247,230,0.3);
  border-bottom-width: 3px;
  border-radius: 6px; padding: 0 0.45em;
}
.nascosto { display: none !important; }

/* Stelle di sfondo */
#stelle { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#stelle i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--crema); opacity: 0.35;
  animation: scintilla 4s ease-in-out infinite;
}
@keyframes scintilla { 50% { opacity: 0.9; transform: scale(1.4); } }
#coriandoli { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

/* ---------- Pannelli squadra laterali ---------- */
.squadra {
  position: fixed; top: 0; bottom: 0; width: 200px; z-index: 5;
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 8px; padding: 24px 12px;
  transition: transform 0.25s;
}
body.modo-squadre .squadra { display: flex; }
body.modo-squadre { --pannello-l: 200px; }
.squadra-a { left: 0; background: linear-gradient(180deg, rgba(255,79,135,0.22), rgba(255,79,135,0.05)); border-right: 4px solid var(--lampone); }
.squadra-b { right: 0; background: linear-gradient(180deg, rgba(46,230,168,0.22), rgba(46,230,168,0.05)); border-left: 4px solid var(--menta); }
.squadra-nome { font-size: 1.35rem; font-weight: 600; text-align: center; outline: none; line-height: 1.15; }
.squadra-nome:focus { background: rgba(255,247,230,0.1); border-radius: 8px; }
.squadra-punti { font-size: 5.5rem; font-weight: 700; line-height: 1; }
.squadra-a .squadra-punti { color: var(--lampone); }
.squadra-b .squadra-punti { color: var(--menta); }
.squadra-tasto { font-size: 0.9rem; color: var(--crema-tenue); }
.squadra.attiva { transform: scale(1.04); box-shadow: inset 0 0 60px rgba(255,255,255,0.08); }
.squadra.esclusa { opacity: 0.35; filter: grayscale(1); }
.squadra-punti.salto { animation: salto 0.5s; }
@keyframes salto { 30% { transform: scale(1.35) rotate(-4deg); } }

/* ---------- Palco ---------- */
#palco {
  position: fixed; top: 0; bottom: 64px;
  left: var(--pannello-l); right: var(--pannello-l);
  z-index: 2; transition: left 0.25s, right 0.25s;
}
.schermo {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; padding: 40px 56px; text-align: center;
}
.schermo.attivo { display: flex; }
.frase-grande { font-size: clamp(2rem, 5vw, 4.6rem); font-weight: 600; line-height: 1.15; max-width: 22ch; margin: 0; }
.spiegazione { font-size: clamp(1.1rem, 2vw, 1.7rem); color: var(--crema-tenue); max-width: 46ch; margin: 0; line-height: 1.35; }
.istruzioni { font-size: 1rem; color: var(--crema-tenue); margin: 0; }
.titolo-round { font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 600; margin: 0; }
.rivelazione {
  font-size: clamp(2rem, 4.5vw, 4rem); font-weight: 700; color: var(--oro);
  animation: sboccia 0.45s cubic-bezier(.2,1.4,.4,1);
}
.rivelazione small { display: block; font-size: 0.45em; font-weight: 400; color: var(--crema-tenue); margin-top: 8px; }
@keyframes sboccia { from { transform: scale(0.4); opacity: 0; } }

/* ---------- Menu ---------- */
#menu { justify-content: center; gap: 36px; }
.menu-testa h1 { font-size: clamp(2.4rem, 6vw, 5rem); margin: 0; font-weight: 700; line-height: 1; }
.menu-evento { margin: 0 0 10px; font-size: 1.3rem; color: var(--oro); font-weight: 500; }
.menu-opzioni { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; }
.opzione { display: flex; align-items: center; gap: 14px; font-size: 1.1rem; color: var(--crema-tenue); }
.seg { display: flex; border: 2px solid rgba(255,247,230,0.25); border-radius: 999px; overflow: hidden; }
.seg button {
  font: inherit; font-size: 1.05rem; font-weight: 500; color: var(--crema);
  background: transparent; border: 0; padding: 8px 20px; cursor: pointer;
}
.seg button.sel { background: var(--crema); color: var(--notte); }
.menu-giochi { display: grid; grid-template-columns: repeat(3, minmax(220px, 300px)); gap: 18px; }
.gioco-card {
  font: inherit; color: var(--crema); text-align: left; cursor: pointer;
  background: rgba(255,247,230,0.06); border: 2px solid transparent;
  border-left: 10px solid var(--c); border-radius: 18px; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform 0.15s, background 0.15s;
}
.gioco-card:hover, .gioco-card:focus-visible { transform: translateY(-3px); background: rgba(255,247,230,0.12); outline: none; border-color: var(--c); }
/* Card spenta: durante "Caricamento contenuti…" o se il gioco non ha contenuti attivi */
.gioco-card:disabled { opacity: 0.5; cursor: wait; transform: none; background: rgba(255,247,230,0.06); border-color: transparent; }
.gioco-card b { font-size: 1.5rem; font-weight: 600; }
.gioco-card small { font-size: 1rem; color: var(--crema-tenue); line-height: 1.3; }
.menu-nota { color: var(--crema-tenue); margin: 0; }

/* ---------- Vero o Falso ---------- */
.vf-lati { position: absolute; inset: 0; display: flex; pointer-events: none; }
.vf-lato {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding-bottom: 30px; font-size: 2.2rem; font-weight: 700; opacity: 0.35;
  transition: opacity 0.3s, background 0.3s;
}
.vf-lato span { font-size: 1rem; font-weight: 400; color: var(--crema-tenue); }
.vf-vero { color: var(--menta); }
.vf-falso { color: var(--lampone); }
.vf-lato.vince { opacity: 1; }
.vf-vero.vince { background: linear-gradient(90deg, rgba(46,230,168,0.35), transparent); }
.vf-falso.vince { background: linear-gradient(-90deg, rgba(255,79,135,0.35), transparent); }
.vf-lato.perde { opacity: 0.12; }
#vf-frase { position: relative; z-index: 1; }
.vf-esito { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.vf-risposta { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 700; animation: sboccia 0.4s cubic-bezier(.2,1.4,.4,1); }
.vf-risposta.vero { color: var(--menta); }
.vf-risposta.falso { color: var(--lampone); }

/* ---------- Zoom ---------- */
#zoom { gap: 18px; }
.zoom-cornice {
  width: min(78vh, 90%); aspect-ratio: 4/3; overflow: hidden; border-radius: 22px;
  border: 6px solid rgba(255,247,230,0.15); background: #000; position: relative;
}
.zoom-cornice img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--ox, 50%) var(--oy, 50%); will-change: transform; }
.zoom-errore { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 30px; color: var(--crema-tenue); font-size: 1.2rem; }
.zoom-hud { display: flex; align-items: center; gap: 22px; width: min(78vh, 90%); }
.zoom-punti b { font-size: 3rem; color: var(--oro); font-weight: 700; }
.zoom-punti span { margin-left: 6px; color: var(--crema-tenue); }
.zoom-barra { flex: 1; height: 14px; border-radius: 999px; background: rgba(255,247,230,0.12); overflow: hidden; }
.zoom-barra div { height: 100%; width: 100%; background: linear-gradient(90deg, var(--cielo), var(--oro)); transition: width 0.25s linear; }
.zoom-stato { font-size: 1.1rem; color: var(--crema-tenue); min-width: 90px; text-align: right; }
.zoom-stato.pausa { color: var(--oro); font-weight: 600; }

/* ---------- Timeline ---------- */
#timeline { gap: 22px; }
.timer-cerchio {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  font-size: 2rem; font-weight: 700; color: var(--oro);
  background: conic-gradient(var(--oro) calc(var(--p, 1) * 100%), rgba(255,247,230,0.12) 0);
}
.timer-cerchio span { background: var(--notte); width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; }
.timer-cerchio.urgente { color: var(--rosso); background: conic-gradient(var(--rosso) calc(var(--p, 1) * 100%), rgba(255,247,230,0.12) 0); animation: pulsa 0.5s infinite alternate; }
@keyframes pulsa { to { transform: scale(1.08); } }
.tl-linea { display: flex; align-items: center; gap: 14px; width: 100%; }
.tl-etichetta { writing-mode: vertical-rl; transform: rotate(180deg); color: var(--crema-tenue); font-size: 1rem; }
.tl-carte { flex: 1; display: flex; gap: 14px; justify-content: center; align-items: stretch; position: relative; }
.tl-carte::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; background: rgba(255,247,230,0.15); border-radius: 4px; z-index: 0; }
.tl-carta {
  position: relative; z-index: 1; flex: 1; max-width: 220px; min-height: 150px;
  background: rgba(255,247,230,0.08); border: 3px solid rgba(255,247,230,0.2); border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; cursor: pointer; font-size: 1.35rem; font-weight: 600; line-height: 1.2;
  transition: transform 0.35s, border-color 0.2s, background 0.35s;
}
.tl-carta .tl-icona { font-size: 2.6rem; }
.tl-carta .tl-anno { font-size: 1rem; font-weight: 400; color: var(--oro); display: none; }
.tl-carta.scelta { border-color: var(--oro); transform: translateY(-10px); }
.tl-carta.giusta { background: rgba(46,230,168,0.25); border-color: var(--menta); }
.tl-carta.sbagliata { background: rgba(255,79,135,0.25); border-color: var(--lampone); }
#timeline.risolto .tl-anno { display: block; }

/* ---------- Emoji ---------- */
.emoji-riga { font-size: clamp(5rem, 13vw, 11rem); margin: 0; line-height: 1.1; letter-spacing: 0.08em; animation: sboccia 0.5s cubic-bezier(.2,1.4,.4,1); }
.emoji-aiuto { font-size: 1.5rem; color: var(--crema-tenue); margin: 0; }

/* ---------- Memory ---------- */
#memory { gap: 18px; }
.memory-turno { font-size: 1.5rem; font-weight: 600; min-height: 1.6em; }
.memory-griglia { display: grid; grid-template-columns: 36px repeat(4, 1fr); gap: 10px; width: min(88vh, 92%); }
.memory-coord { display: grid; place-items: center; color: var(--crema-tenue); font-weight: 600; font-size: 1.2rem; }
.memory-tessera {
  aspect-ratio: 4/3; perspective: 900px; cursor: pointer;
}
.memory-tessera .interno { position: relative; width: 100%; height: 100%; transition: transform 0.45s; transform-style: preserve-3d; }
.memory-tessera.aperta .interno, .memory-tessera.trovata .interno { transform: rotateY(180deg); }
.memory-tessera .lato {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px;
  font-size: clamp(0.9rem, 1.5vw, 1.3rem); font-weight: 600; line-height: 1.15;
}
.memory-tessera .fronte { background: linear-gradient(135deg, var(--lilla), #6A3FD6); color: var(--notte); font-size: 1.6rem; }
.memory-tessera .retro { background: var(--crema); color: var(--notte); transform: rotateY(180deg); flex-direction: column; gap: 4px; }
.memory-tessera .retro .icona { font-size: 2rem; }
.memory-tessera.trovata .retro { background: var(--menta); }
.memory-tessera.trovata-b .retro { background: var(--menta); }
.memory-tessera.trovata-a .retro { background: var(--lampone); color: var(--crema); }
.memory-tessera.trovata { cursor: default; opacity: 0.85; }

/* ---------- Ricercatore misterioso ---------- */
#misterioso { justify-content: flex-start; padding-top: 50px; }
.mist-testa { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
/* Nome svelato accanto alla silhouette (sostituisce la casella "punti in palio") */
.mist-testa .rivelazione { text-align: left; font-size: clamp(1.8rem, 4vw, 3.6rem); line-height: 1.05; }
.mist-silhouette {
  width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center;
  font-size: 5rem; font-weight: 700; color: var(--notte);
  background: radial-gradient(circle at 35% 30%, #FFD980, var(--arancio));
  box-shadow: 0 0 60px rgba(255,138,61,0.35);
}
.mist-silhouette.svelato { font-size: 2.5rem; }
.mist-punti b { font-size: 4rem; color: var(--oro); font-weight: 700; display: block; line-height: 1; }
.mist-punti span { color: var(--crema-tenue); }
.mist-indizi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; width: min(900px, 100%); }
.mist-indizi li {
  background: rgba(255,247,230,0.07); border-left: 8px solid var(--arancio); border-radius: 0 16px 16px 0;
  padding: 14px 22px; font-size: clamp(1.2rem, 2.3vw, 1.9rem); text-align: left; line-height: 1.3;
  animation: entra 0.4s cubic-bezier(.2,1.2,.4,1);
}
@keyframes entra { from { transform: translateX(-40px); opacity: 0; } }

/* ---------- Barra conduttore ---------- */
#barra {
  position: fixed; left: 0; right: 0; bottom: 0; height: 64px; z-index: 10;
  display: flex; align-items: center; gap: 18px; padding: 0 20px;
  background: rgba(11,10,38,0.92); border-top: 1px solid rgba(255,247,230,0.1);
  font-size: 1rem; color: var(--crema-tenue);
}
#barra button {
  font: inherit; font-weight: 600; color: var(--notte); background: var(--crema);
  border: 0; border-radius: 999px; padding: 8px 20px; cursor: pointer;
}
#btn-prossimo { margin-left: auto; background: var(--oro); }
#barra-suggerimento { flex: 1; }
/* Origine dei contenuti: "Contenuti dal server" oppure, in oro, "Contenuti locali" */
#barra-origine { font-size: 0.85rem; white-space: nowrap; }
#barra-origine:not(:empty)::before { content: "●"; margin-right: 6px; font-size: 0.7em; vertical-align: 1px; }
#barra-origine.locali { color: var(--oro); }

/* ---------- Aiuto ---------- */
#aiuto { position: fixed; inset: 0; z-index: 100; background: rgba(11,10,38,0.85); display: grid; place-items: center; }
.aiuto-box { background: var(--notte); border: 2px solid rgba(255,247,230,0.2); border-radius: 22px; padding: 30px 40px; max-width: 640px; }
.aiuto-box h3 { margin: 0 0 16px; font-size: 1.6rem; }
.aiuto-box table { border-collapse: collapse; font-size: 1.05rem; }
.aiuto-box td { padding: 6px 14px 6px 0; text-align: left; vertical-align: top; }
.aiuto-box p { color: var(--crema-tenue); margin: 16px 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Schermi bassi (proiettori 1024x768, portatili 1366x768): il Misterioso si compatta
   così i cinque indizi e il nome restano sopra la barra del conduttore */
@media (max-height: 820px) {
  #misterioso { padding-top: 24px; gap: 14px; }
  .mist-silhouette { width: 110px; height: 110px; font-size: 3.6rem; }
  .mist-silhouette.svelato { font-size: 1.9rem; }
  .mist-indizi { gap: 8px; }
  .mist-indizi li { padding: 10px 18px; font-size: clamp(1.1rem, 2vw, 1.6rem); }
}
@media (max-width: 1100px) {
  .menu-giochi { grid-template-columns: repeat(2, 1fr); }
  .squadra { width: 140px; } body.modo-squadre { --pannello-l: 140px; }
  .squadra-punti { font-size: 3.5rem; }
}