/* =========================================================
   TIM x FIN - Gioco engagement fiera
   Layout per tablet 16:10 in orientamento orizzontale.
   Schermate = sfondi a piena pagina; gli unici elementi
   HTML sovrapposti sono i pulsanti e il video.
   ========================================================= */

:root {
  --tim-navy: #001135;
  --tim-blue: #008BD2;
  --tim-red: #E40521;
  --tim-white: #FFFFFF;

  /* Stage virtuale 16:10: tutte le posizioni dei pulsanti
     sono espresse in percentuale su questa area. */
  --stage-ratio: 1.6;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--tim-navy);
  font-family: "TIM Sans", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* -------- Palco 16:10 centrato (letterbox se necessario) -------- */
#stage {
  position: fixed;
  inset: 0;
  margin: auto;
  /* Mantiene la proporzione 16:10 a prescindere dal device */
  width: min(100vw, calc(100vh * var(--stage-ratio)));
  height: min(100vh, calc(100vw / var(--stage-ratio)));
  background: var(--tim-navy);
  overflow: hidden;
}

/* -------- Schermate -------- */
.screen {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  /* Fade out: l'opacita' sfuma, poi la schermata viene nascosta
     (visibility ritardata di tutta la durata del fade). */
  transition: opacity 2s ease, visibility 0s linear 2s;
}

.screen.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  /* Fade in: in primo piano e visibile da subito mentre l'opacita' sale. */
  transition: opacity 2s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .screen {
    transition: none;
  }
}

.screen--home {
  background-image: url("../img/bg-home.jpg");
}

.screen--genres {
  background-image: url("../img/bg-genres.jpg");
}

.screen--game {
  background: var(--tim-navy);
}

.screen--win {
  background-image: url("../img/bg-win.jpg");
}

.screen--lose {
  background-image: url("../img/bg-lose.jpg");
}

/* -------- Pulsante GIOCA ORA (home) -------- */
.start-btn {
  position: absolute;
  left: 50%;
  top: 70.5%;
  transform: translateX(-50%);
  min-width: 34%;
  padding: 1.7vh 3vh;
  border: 0;
  border-radius: 999px;
  background: var(--tim-white);
  color: var(--tim-red);
  font-family: "TIM Sans", sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 4.6vh, 56px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.start-btn:active {
  transform: translateX(-50%) scale(0.97);
}

/* Pressione: rimpicciolisce e diventa ciano con testo bianco. */
.start-btn.is-pressed {
  transform: translateX(-50%) scale(0.9);
  background: var(--tim-blue);
  color: var(--tim-white);
}

/* -------- Pulsanti genere (icona bianca + pillola) -------- */
.genre-btn {
  position: absolute;
  width: 26%;
  height: 26%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1.6vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.18s ease;
}

.genre-btn:active {
  transform: scale(0.97);
}

/* Pressione: la pillola del genere si rimpicciolisce e diventa ciano. */
.genre-btn.is-pressed {
  transform: scale(0.9);
}

.genre-btn.is-pressed .genre-btn__label {
  background: var(--tim-blue);
  color: var(--tim-white);
}

.genre-btn__icon {
  width: auto;
  height: 58%;
  max-width: 80%;
  object-fit: contain;
  pointer-events: none;
}

.genre-btn__label {
  width: 100%;
  padding: 1.2vh 1vh;
  border-radius: 999px;
  background: var(--tim-white);
  color: var(--tim-red);
  font-family: "TIM Sans", sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 3vh, 40px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  transition: background-color 0.18s ease, color 0.18s ease;
}

/* Griglia 3 colonne x 2 righe; la cella centrale bassa e' il pesce nello sfondo */
.genre-btn--hit-italia { left: 4.4%;  top: 8%; }
.genre-btn--rock       { left: 37%;   top: 8%; }
.genre-btn--dance      { left: 69.6%; top: 8%; }
.genre-btn--pop        { left: 4.4%;  top: 42%; }
.genre-btn--classici   { left: 69.6%; top: 42%; }

/* -------- Schermata gioco: video -------- */
.video-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tim-navy);
}

#quiz-video {
  width: 92%;
  height: 92%;
  /* Il video sorgente e' 16:9 dentro un riquadro 16:10: 'cover' lo fa
     riempire tutto il frame ritagliando un po' ai lati, eliminando le
     bande nere sopra/sotto che si avrebbero con 'contain'. */
  object-fit: cover;
  background: #000;
}

/* -------- Countdown sul video (in alto a destra) -------- */
.video-countdown {
  position: absolute;
  top: 7%;
  right: 7%;
  width: 8%;
  aspect-ratio: 1 / 1;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tim-red);
  color: var(--tim-white);
  font-family: "TIM Sans", sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 4.6vh, 56px);
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.video-countdown.is-visible {
  display: flex;
}

/* -------- Pulsanti risposta (veri pulsanti HTML stile TIM) -------- */
.answers {
  position: absolute;
  /* Margine laterale per staccare i pulsanti dai bordi sx/dx */
  left: 8%;
  right: 8%;
  bottom: 4.5%;
  display: flex;
  gap: 2.2%;
  justify-content: center;
  align-items: stretch;
  visibility: hidden;
  pointer-events: none;
}

.answers.is-visible {
  visibility: visible;
  pointer-events: auto;
}

/* Ingresso dei pulsanti: entrano da sinistra uno per volta, con un
   rimbalzo orizzontale (overshoot) prima di fermarsi in posizione.
   fill-mode 'backwards' tiene il pulsante fuori scena durante il ritardo
   e lo rilascia a fine animazione, cosi' il transform di :active resta valido. */
@keyframes answer-enter-left {
  0%   { opacity: 0; transform: translateX(-160%); }
  55%  { opacity: 1; transform: translateX(7%); }   /* overshoot a destra */
  72%  { transform: translateX(-3.5%); }            /* rimbalzo indietro */
  86%  { transform: translateX(1.5%); }
  100% { opacity: 1; transform: translateX(0); }
}

.answers.is-visible .answer {
  animation: answer-enter-left 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Stagger: entrano uno per volta partendo da destra, poi centro, poi sinistra */
.answers.is-visible .answer:nth-child(3) { animation-delay: 0s; }
.answers.is-visible .answer:nth-child(2) { animation-delay: 0.8s; }
.answers.is-visible .answer:nth-child(1) { animation-delay: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .answers.is-visible .answer {
    animation: none;
  }
}

.answer {
  flex: 1 1 0;
  min-width: 0;
  /* Stacca i pulsanti dal fondo: ~80% della loro altezza (~8vh). */
  margin-bottom: 6.5vh;
  border: 0;
  border-radius: 999px;
  background: var(--tim-white);
  color: var(--tim-red);
  padding: 1.6vh 2vh;
  cursor: pointer;
  font-family: "TIM Sans", sans-serif;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centra i flex item (titolo/artista): su iOS il solo text-align non basta. */
  align-items: center;
  gap: 0.4vh;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease, color 0.18s ease;
}

.answer:active {
  transform: scale(0.97);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* Pressione: rimpicciolisce e diventa ciano con testo bianco. */
.answer.is-pressed {
  transform: scale(0.9);
  background: var(--tim-blue);
  color: var(--tim-white);
}

.answer.is-pressed .answer__artist {
  color: var(--tim-white);
}

.answer:disabled {
  cursor: default;
}

.answer__title {
  font-weight: 900;
  font-size: clamp(14px, 2.4vh, 30px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.answer__artist {
  font-weight: 700;
  font-size: clamp(11px, 1.9vh, 24px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--tim-red);
  opacity: 0.92;
  transition: color 0.18s ease;
}

/* -------- Pulsante home (schermate esito) -------- */
.home-button {
  position: absolute;
  right: 3%;
  top: 4%;
  width: 4.5%;
  aspect-ratio: 1 / 1;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.18s ease;
}

.home-button:active {
  transform: scale(0.92);
}

/* Pressione: pop di rimpicciolimento coerente con gli altri pulsanti. */
.home-button.is-pressed {
  transform: scale(0.88);
}

.home-button svg {
  width: 100%;
  height: 100%;
  fill: var(--tim-white);
}

/* -------- Overlay di avvio (richiede gesture per fullscreen/audio) -------- */
.boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--tim-navy);
  color: var(--tim-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 2.4vh;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.boot-overlay.is-hidden {
  display: none;
}

/* -------- Avviso orientamento (solo se non in landscape) -------- */
.orientation-warning {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8vw;
  background: var(--tim-navy);
  color: var(--tim-white);
  font-weight: 700;
  font-size: 3.2vw;
  line-height: 1.4;
}

@media (orientation: portrait) {
  .orientation-warning {
    display: flex;
  }
}