/* Roboto incluso nel progetto: il totem la usa anche se non è installata */
@font-face { font-family: 'Roboto'; font-weight: 300; src: url('assets/fonts/Roboto-Light.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 400; src: url('assets/fonts/Roboto-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 700; src: url('assets/fonts/Roboto-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 900; src: url('assets/fonts/Roboto-Black.ttf') format('truetype'); }

:root {
  /* Colori campionati dal gradiente ufficiale IREN (assets/gradiente-iren.webp) */
  --giallo: #fecb15;
  --arancio: #ee7207;
  --rosso: #e40616;
  --blu: #1760a8;
  --verde: #129839;
  --sfondo: #eeeded;
  --testo: #1d1d1b;
  --stops: #fecb15 0%, #f9b212 12%, #ee7207 28%, #e63b14 42%, #e40616 50%, #ad4052 58%, #665486 66%, #28589d 70%, #09659a 75%, #058072 85%, #129839 95%, #179c3d 100%;
  --grad: linear-gradient(90deg, var(--stops));
  --grad-testo: var(--grad);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  background: #222;
  overflow: hidden;
  font-family: Roboto, 'Segoe UI', Arial, sans-serif;
  color: var(--testo);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* Palco fisso 1080x1920, scalato per stare nello schermo */
#stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 1080px; height: 1920px;
  transform-origin: center center;
  background: var(--sfondo);
  overflow: hidden;
}

.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; }
.screen.active { display: flex; }

.grad-text {
  background: var(--grad-testo);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---- Onda e logo in fondo (PROVVISORI: vedi DA-DECIDERE.md) ---- */
.wave { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; }
.wave svg { width: 100%; height: 100%; display: block; }
.logo-placeholder {
  position: absolute; left: 50%; bottom: 200px; transform: translateX(-50%);
  width: 300px; height: 110px;
  border: 3px dashed #999; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #4d4d4d; font-size: 22px; text-align: center; line-height: 1.2;
}

/* ---- HOME ---- */
#home { justify-content: center; text-align: center; padding: 0 90px; }
#home h1 { font-size: 112px; line-height: 1.12; font-weight: 700; margin-bottom: 140px; }
#home h2 { font-size: 66px; font-weight: 700; letter-spacing: 1px; line-height: 1.2; margin-bottom: 110px; }
.btn-gioca {
  font-size: 56px; font-weight: 700; padding: 50px 80px; cursor: pointer;
  background: #fff; color: var(--testo); border-radius: 100px;
  border: 8px solid transparent;
  background-image: linear-gradient(#fff, #fff), var(--grad);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  transition: transform .15s;
}
.btn-gioca:active { transform: scale(.96); }
#home .nota { position: absolute; bottom: 440px; left: 90px; right: 90px; font-size: 28px; color: #444; }

/* ---- GIOCO ---- */
#gioco { padding-top: 130px; }
#gioco h1 { font-size: 96px; font-weight: 700; margin-bottom: 40px; }
#timer { font-size: 110px; font-weight: 700; margin-bottom: 60px; font-variant-numeric: tabular-nums; }
#timer.urgente { color: var(--rosso); }
#griglia {
  display: grid; grid-template-columns: repeat(4, 220px); grid-template-rows: repeat(3, 290px);
  gap: 36px 28px;
}
.carta { perspective: 900px; cursor: pointer; }
.carta-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .45s;
}
.carta.girata .carta-inner { transform: rotateY(180deg); }
.faccia {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 20px; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.retro {
  background: #fff; border: 8px solid transparent; text-align: center;
  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, var(--stops));
  background-origin: border-box; background-clip: padding-box, border-box;
  font-size: 30px; font-weight: 700; line-height: 1.15; padding: 14px;
}
.retro img, .fronte img { width: 100%; height: 100%; object-fit: cover; }
.fronte {
  transform: rotateY(180deg); background: #fff; font-size: 120px;
  border: 8px solid transparent;
  background-image: linear-gradient(#fff, #fff), var(--grad);
  background-origin: border-box; background-clip: padding-box, border-box;
}
.carta.trovata .fronte { opacity: .9; }

/* Overlay risultato */

/* ---- GRAZIE ---- */
#grazie { padding-top: 230px; text-align: center; }
#grazie h1 { font-size: 100px; font-weight: 700; line-height: 1.15; margin-bottom: 70px; }
#grazie p { font-size: 50px; line-height: 1.4; max-width: 820px; margin-bottom: 70px; }
#grazie .qr-box {
  width: 420px; height: 420px; background: #fff; border-radius: 24px; padding: 24px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center;
}
#grazie .qr-box img { width: 100%; height: 100%; }
#grazie .ritorno { margin-top: 60px; font-size: 30px; color: #444; }

/* Zona admin invisibile, in alto a destra */
#admin-zone { position: absolute; top: 0; right: 0; width: 160px; height: 160px; z-index: 50; }

/* =====================================================================
   MOVIMENTO (solo transform e opacity: leggero per il mini PC del totem)
   ===================================================================== */
:root { --ease: cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes rise  { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop   { from { opacity: 0; transform: scale(.88); }       to { opacity: 1; transform: none; } }
@keyframes respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* Entrata dei testi: partono nascosti SOLO finché l'animazione gira (fill backwards) */
.screen.active .anim      { animation: rise .6s var(--ease) var(--d, 0s) backwards; }
.screen.active .anim-fade { animation: fade .5s ease-out var(--d, 0s) backwards; }
.screen.active .anim-pop  { animation: pop .6s var(--ease) var(--d, 0s) backwards; }

/* Home: titolo a parole. Ogni parola ha il suo pezzo di gradiente (calcolato da JS) */
h1.split.grad-text { background: none; color: inherit; -webkit-text-fill-color: currentColor; }
.w {
  display: inline-block;
  background-image: var(--grad-testo);
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.screen.active .w { animation: rise .55s var(--ease) calc(.1s + var(--i) * .14s) backwards; }

/* Pulsante: entra, poi respira piano (parte quando l'entrata è finita) */
.screen.active .btn-gioca {
  animation:
    rise .6s var(--ease) 1.1s backwards,
    respira 2.6s ease-in-out 1.8s infinite;
}

/* Carte distribuite dal mazzo al centro, girando al volo */
@keyframes deal {
  from { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.85); }
  to   { opacity: 1; transform: none; }
}
@keyframes dealflip { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } }

#griglia.dealing .carta       { animation: deal var(--deal-dur, 520ms) var(--ease) calc(var(--k) * var(--stagger, 90ms)) backwards; }
#griglia.dealing .carta-inner { animation: dealflip var(--deal-dur, 520ms) ease-in-out calc(var(--k) * var(--stagger, 90ms)) backwards; }

/* Coppia giusta: pulsazione sulle due carte (dopo che si è completata la rotazione) */
@keyframes pulsa { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.1); } }
.carta.trovata { animation: pulsa .42s ease-out .4s; }

/* Coppia sbagliata: scossa laterale breve sulle due carte */
@keyframes scossa {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-12px); } 40% { transform: translateX(12px); }
  60% { transform: translateX(-8px); }  80% { transform: translateX(8px); }
}
.carta.sbagliata { animation: scossa .4s ease-in-out .35s; }

/* Overlay risultato: dissolvenza veloce */

/* Se il sistema chiede meno movimento: niente spostamenti, restano dissolvenze e feedback */
@media (prefers-reduced-motion: reduce) {
  .screen.active .anim, .screen.active .anim-pop, .screen.active .w { animation: fade .3s ease-out var(--d, 0s) backwards; }
  .screen.active .btn-gioca { animation: fade .3s ease-out 0s backwards; }
  #griglia.dealing .carta { animation: fade .3s ease-out calc(var(--k) * 30ms) backwards; }
  #griglia.dealing .carta-inner { animation: none; }
  .carta.sbagliata { animation: none; outline: 6px solid var(--rosso); outline-offset: -6px; border-radius: 20px; }
}

/* =====================================================================
   ALLINEAMENTO ALLE TAVOLE (8 ott): posizioni, pesi e bordi come nel grafico
   ===================================================================== */
:root { --grad-v: linear-gradient(180deg, var(--stops)); }

/* 01 Home: contenuti ancorati in alto come nella tavola, non centrati */
#home { justify-content: flex-start; padding-top: 190px; }
#home h1 { margin-bottom: 220px; }
#home h2 { font-size: 72px; margin-bottom: 190px; }
.btn-gioca { min-width: 700px; font-size: 60px; font-weight: 400; line-height: 1.25; padding: 44px 70px; }
#home .nota { bottom: 520px; }

/* 02-03 Gioco: titolo tutto a gradiente, "TIMER" leggero, griglia più grande */
#timer { font-size: 96px; font-weight: 400; margin-bottom: 70px; }
#griglia { grid-template-columns: repeat(4, 228px); grid-template-rows: repeat(3, 310px); gap: 30px 24px; }
.retro, .fronte {
  background-image: linear-gradient(#fff, #fff), var(--grad-v);
}
.retro { font-size: 32px; }

/* 04 Grazie: titolo più piccolo e più in alto, QR leggermente più piccolo */
#grazie { padding-top: 150px; }
#grazie h1 { font-size: 80px; margin-bottom: 90px; }
#grazie p { max-width: 780px; text-wrap: balance; }
#grazie .qr-box { width: 380px; height: 380px; }

/* Logo e onda: dimensioni e posizione come nelle tavole */
.logo-placeholder { width: 240px; height: 110px; bottom: 215px; }
.logo-img { position: absolute; left: 50%; bottom: 215px; transform: translateX(-50%); width: 240px; height: auto; }
.wave.has-img { height: auto; }
.wave.has-img img { width: 100%; height: auto; display: block; }


/* =====================================================================
   FILE FORNITI DAL GRAFICO (SVG): titoli a gradiente e pulsante
   ===================================================================== */
.asset-titolo { display: block; width: 900px; max-width: 94%; height: auto; margin: 0 auto; }
#gioco .asset-titolo { width: 820px; }
.btn-gioca.btn-img { background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; border-radius: 0; }
.btn-gioca.btn-img img { display: block; width: 720px; max-width: 94%; height: auto; margin: 0 auto; }

/* Schermata di gioco: titolo, timer e griglia a posizione fissa (non dipendono dall'altezza del titolo) */
#gioco h1 { margin: 0; }
#gioco .asset-titolo { width: auto; max-width: 94%; max-height: 170px; }
#timer { position: absolute; top: 330px; left: 0; right: 0; text-align: center; margin: 0; }
#griglia { position: absolute; top: 480px; left: 50%; transform: translateX(-50%); }


/* =====================================================================
   ASSET DEL GRAFICO a grandezza naturale (1x sul canvas 1080x1920)
   ===================================================================== */
.asset { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.asset-host { max-width: none !important; font-size: 0; line-height: 0; }
#home h1.asset-host { margin-bottom: 180px; }
#home h2.asset-host { margin-bottom: 170px; }
#gioco .asset { max-height: none; width: auto; }
#grazie h1.asset-host { margin-bottom: 120px; }
#grazie p.asset-host { margin-bottom: 100px; }
.btn-gioca.btn-img img { width: auto; max-width: 100%; }

/* Carte: le immagini del grafico hanno già bordo e angoli, qui niente cornice */
.faccia.solo-img { background: none !important; border: 0 !important; border-radius: 0; padding: 0; overflow: visible; }
.faccia.solo-img img { width: 100%; height: 100%; object-fit: fill; display: block; }
#griglia { grid-template-columns: repeat(4, 224px); grid-template-rows: repeat(3, 312px); }

/* Logo e onda originali a grandezza naturale */
.logo-img { width: auto; bottom: 165px; }
.logo-placeholder { bottom: 165px; }


/* Timer ad anello (scelto tra le 5 prove) */
#gioco { padding-top: 110px; }
#timer {
  position: absolute; top: 250px; left: 0; right: 0; width: 220px; height: 220px; margin: 0 auto;
  text-align: center;
}
#timer svg { width: 100%; height: 100%; display: block; }
#timer-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 92px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--testo);
}
@keyframes battito { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
#timer.urgente svg { animation: battito 1s ease-in-out infinite; }
#timer.urgente #timer-num { color: var(--rosso); }
#griglia { top: 505px; }


/* Esito: messaggio in alto, uguale per vittoria e sconfitta */
.carta { position: relative; }
.gt { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; display: inline-block; }
.msg { position: absolute; left: 0; right: 0; top: 262px; text-align: center; z-index: 20; }
.msg b { display: block; font-size: 104px; font-weight: 700; line-height: 1.1; }
.msg b.gt { display: inline-block; }
.msg span { display: block; margin-top: 22px; font-size: 46px; color: var(--testo); }

/* Home: nota in grassetto */
#home .nota { font-weight: 700; }