/* =====================================================================
   APP - layout, componenti e animazioni.
   Dipende dalle variabili definite in theme.css.
   Nessuna dipendenza esterna: funziona offline.
   ===================================================================== */

/* ---------- Reset essenziale ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  color: var(--ink);
  /* Colore dei bordi delle grafiche: riempie le bande intorno al palco
     senza che si veda lo stacco. */
  background: var(--brand);
  overflow: hidden;                 /* totem: mai scroll */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

/* ---------- Palco ------------------------------------------------------
   Le grafiche sono 1080 x 1920 (9:16) e hanno punti precisi dove vanno
   timer, logo e pulsante. Il palco ha sempre quelle proporzioni, grande
   quanto lo schermo permette: su un tablet o in orizzontale restano due
   bande rosse ai lati o sopra e sotto, ma niente si disallinea.
   Dentro il palco si misura con --sw / --sh (1% della larghezza /
   altezza del palco) invece che con vmin / dvh, che sono dello schermo.
   ---------------------------------------------------------------------- */
:root {
  --stage-w: min(100vw, 56.25vh);        /* 56.25 = 100 * 9 / 16 */
  --stage-h: min(100vh, 177.7778vw);     /* 177.78 = 100 * 16 / 9 */
  --sw: calc(var(--stage-w) / 100);
  --sh: calc(var(--stage-h) / 100);
}
@supports (height: 100dvh) {
  :root {
    --stage-w: min(100vw, 56.25dvh);
    --stage-h: min(100dvh, 177.7778vw);
  }
}

.stage {
  position: fixed; inset: 0;
  margin: auto;                          /* centrato, senza transform: i figli fixed restano sullo schermo */
  width: var(--stage-w);
  height: var(--stage-h);
  background: var(--bg-gradient);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* Pagine senza niente da allineare alla grafica: tutto lo schermo */
.stage--free { width: 100%; height: 100%; background-size: cover; }

/* Le grafiche del cliente: una per la schermata iniziale, una per il gioco.
   Il logo e' gia' dentro l'immagine, per questo l'app non ne disegna uno. */
body.bg-start .stage { background-image: url("../images/background/bg_start.jpg"), var(--bg-gradient); }
body.bg-game  .stage { background-image: url("../images/background/bg_game.png"), var(--bg-gradient); }

/* ---------- Impaginazione generale ----------------------------------- */
.screen {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; flex-direction: column;
  padding: clamp(12px, calc(var(--sw) * 2.2), 34px);
  gap: clamp(8px, calc(var(--sw) * 1.4), 20px);
}
.stack { display: flex; flex-direction: column; align-items: center; }

.logo { max-height: clamp(46px, 9vmin, 132px); width: auto; object-fit: contain; }

.title    { font-size: clamp(26px, 5vmin, 64px); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.subtitle { font-size: clamp(13px, calc(var(--sw) * 2.6), 28px); color: var(--ink-soft); margin: 0; }

/* ---------- Schermata iniziale ----------------------------------------
   Lo sfondo del cliente contiene gia' logo, pulsante "TAP TO PLAY" e
   ventaglio di figurine: l'app non ci disegna sopra niente, rende solo
   tutto lo schermo toccabile e fa respirare il pulsante.
   ---------------------------------------------------------------------- */
.tap-area {
  position: fixed; inset: 0; z-index: 2;
  display: block;
  border: 0;
  cursor: pointer;
}
.tap-area:focus-visible { outline: 4px solid #fff; outline-offset: -8px; }

/* alone che pulsa sopra il pulsante disegnato nella grafica:
   le percentuali sono del palco, quindi combaciano su ogni schermo */
.tap-glow {
  position: absolute;
  left: 13.15%; top: 43.23%;
  width: 73.61%; height: 8.23%;
  z-index: 1;
  border-radius: 9999px;
  pointer-events: none;
  animation: tap-breathe 2.4s ease-in-out infinite;
}
@keyframes tap-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.55), 0 0 26px 4px rgba(255,255,255,.20); }
  50%      { box-shadow: 0 0 0 18px rgba(255,255,255,0), 0 0 44px 10px rgba(255,255,255,.42); }
}
/* riflesso che attraversa il pulsante */
.tap-glow::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  background-size: 260% 100%;
  animation: tap-shine 2.8s ease-in-out infinite;
}
@keyframes tap-shine {
  0%, 55% { background-position: 150% 0; }
  100%    { background-position: -60% 0; }
}

/* ---------- Schermata di gioco ----------------------------------------
   Le righe seguono le bande della grafica: in alto la fascia libera dove
   mettiamo timer e punteggio, poi la banda del logo Topps che va lasciata
   pulita, poi il tavolo.
   ---------------------------------------------------------------------- */
.screen--game {
  display: grid;
  /* fascia HUD 0-7.3%, logo 7.3-17.2% dell'altezza della grafica */
  grid-template-rows: calc(var(--sh) * 7.3) calc(var(--sh) * 9.9) minmax(0, 1fr) auto;
  row-gap: clamp(6px, var(--sw), 16px);   /* stacca il tavolo dalla riga di testo */
  padding: 0 clamp(10px, calc(var(--sw) * 2.2), 30px) clamp(8px, calc(var(--sw) * 1.2), 18px);
}
.screen--game .hud { align-self: center; }
.logo-band { pointer-events: none; }   /* spazio del logo nello sfondo */

/* ---------- Pulsanti -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: clamp(.7rem, 1.6vmin, 1.3rem) clamp(1.6rem, 4vmin, 3.4rem);
  border-radius: 999px;
  font-size: clamp(16px, 2.2vmin, 28px);
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  will-change: transform;
}
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; }

.btn--primary {
  color: var(--brand-deep);
  background: linear-gradient(180deg, #fff 0%, #E9F4FA 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 -3px 0 rgba(0,0,0,.08);
}
.btn--ghost {
  color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Pulsante "Gioca" che pulsa piano: invita al tocco sul totem */
.btn--pulse { animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 0 0 0 rgba(255,255,255,.38); }
  50%      { box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 0 0 22px rgba(255,255,255,0); }
}

/* ---------- Barra di gioco (logo + timer + mosse) --------------------- */
.hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(6px, calc(var(--sw) * 2), 28px);
  width: 100%;
}
.hud__side { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.hud__side--right { justify-content: flex-end; }

.pill {
  display: inline-flex; align-items: baseline; gap: .5em;
  padding: .45em 1.1em;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  font-size: clamp(11px, calc(var(--sw) * 2.1), 22px);
  color: var(--ink-soft);
  white-space: nowrap;
}
.pill b { font-size: 1.35em; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Timer circolare ------------------------------------------ */
.timer { position: relative; width: clamp(44px, calc(var(--sh) * 6.2), 104px); aspect-ratio: 1; flex: none; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.timer__track { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 7; }
.timer__bar {
  fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255,194,75,.55));
  transition: stroke .4s ease;
}
.timer__value {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: clamp(16px, calc(var(--sh) * 2.7), 44px);
  font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.timer.is-warning .timer__bar { stroke: #FF9F43; }
.timer.is-danger  .timer__bar { stroke: var(--ko); filter: drop-shadow(0 0 10px rgba(255,107,107,.7)); }
.timer.is-danger  { animation: tick 1s steps(1) infinite; }
@keyframes tick { 0%, 49% { transform: scale(1); } 50%, 100% { transform: scale(1.06); } }

/* ---------- Tavolo da gioco ------------------------------------------ */
.board-wrap { flex: 1; display: grid; place-items: center; min-height: 0; width: 100%; }

/* Le carte stanno in fila e vanno a capo da sole. Cosi' l'ultima fila,
   quando e' incompleta, resta centrata invece di accostarsi a sinistra.
   La larghezza del tavolo la calcola game.js, ed e' esattamente quella di
   una fila piena: nessuna riga puo' contenere piu' carte del previsto. */
.board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: var(--gap, 16px);
  perspective: 1600px;              /* prospettiva condivisa: il 3D resta coerente */
  perspective-origin: 50% 42%;
}

/* ---------- La carta -------------------------------------------------- */
.card {
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: var(--card-w, 100%);
  aspect-ratio: 1 / var(--card-ratio);
  padding: 0;
  transform-style: preserve-3d;
  /* ogni carta ha la sua prospettiva: gira sempre sul proprio asse,
     anche quelle ai bordi dello schermo */
  perspective: 1100px;
  /* entrata: le carte vengono distribuite sul tavolo */
  animation: deal .65s cubic-bezier(.2,.9,.3,1.05) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes deal {
  from { opacity: 0; transform: translate3d(0, 8vmin, -220px) rotateX(38deg) scale(.82); }
  to   { opacity: 1; transform: none; }
}

/* Strato che gestisce il sollevamento, indipendente dalla rotazione */
.card__lift {
  display: block;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .3s ease;
}
.card:not(.is-matched):not(.is-flipped):hover .card__lift { transform: translateY(-6px) scale(1.02); }
.card:not(.is-matched):active .card__lift { transform: scale(.97); }

/* Strato che ruota */
.card__inner {
  display: block;
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--flip-time) var(--flip-ease);
  will-change: transform;
}
.card.is-flipped .card__inner { transform: rotateY(180deg); }

/* Le due facce */
.card__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--card-bg);
  box-shadow:
     0 16px 34px rgba(60,0,3,.45),
     0 5px 12px  rgba(60,0,3,.38),
     inset 0 0 0 1px rgba(255,255,255,.10);
}
.card__face img { width: 100%; height: 100%; object-fit: cover; }
.card__face--front { transform: rotateY(180deg); }

/* Riflesso di luce che scorre sulla carta mentre gira */
.card__gloss {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
              transparent 35%,
              rgba(255,255,255,.45) 50%,
              transparent 65%);
  background-size: 280% 100%;
  background-position: 140% 0;
  opacity: 0;
  mix-blend-mode: screen;
}
.card.is-turning .card__gloss { animation: gloss var(--flip-time) ease-out; }
@keyframes gloss {
  0%   { background-position: 140% 0; opacity: 0; }
  35%  { opacity: .9; }
  100% { background-position: -60% 0; opacity: 0; }
}

/* Il tocco: un onda che parte dal dito */
.card__ripple {
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  transform: scale(0); opacity: 0;
  pointer-events: none;
}
.card.is-turning .card__ripple { animation: ripple .55s ease-out; }
@keyframes ripple {
  from { transform: scale(0);  opacity: .7; }
  to   { transform: scale(26); opacity: 0; }
}

/* Coppia sbagliata: le carte tremano prima di tornare giu */
.card.is-wrong .card__lift { animation: shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translateX(-3%) rotate(-1.2deg); }
  20%, 80% { transform: translateX( 4%) rotate( 1.4deg); }
  30%, 50%, 70% { transform: translateX(-5%) rotate(-1.8deg); }
  40%, 60% { transform: translateX( 5%) rotate( 1.8deg); }
}

/* Coppia trovata: la carta salta, si accende e resta con la cornice d oro */
.card.is-matched { cursor: default; }
.card.is-matched .card__lift { animation: pop .7s cubic-bezier(.22,1.2,.36,1) forwards; }
@keyframes pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14) translateY(-2%); }
  100% { transform: scale(1.02); }
}
/* Doppio anello: scuro all'interno, bianco all'esterno. Le figurine sono
   chiare e il tavolo e' rosso: un solo colore sparirebbe da una parte o
   dall'altra, due si vedono su qualunque carta. */
.card.is-matched .card__face--front {
  animation: matched-glow 2.6s ease-in-out .7s infinite;
}
@keyframes matched-glow {
  0%, 100% {
    box-shadow: 0 0 0 3px var(--ko), 0 0 0 7px rgba(255,255,255,.92),
                0 0 22px 6px rgba(255,255,255,.35), 0 12px 28px rgba(60,0,3,.4);
  }
  50% {
    box-shadow: 0 0 0 3px var(--ko), 0 0 0 7px rgba(255,255,255,.92),
                0 0 40px 12px rgba(255,255,255,.65), 0 12px 28px rgba(60,0,3,.4);
  }
}

/* Anello che si espande al momento dell abbinamento */
.card.is-matched .card__inner::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--card-radius);
  border: 3px solid var(--accent);
  transform: translateZ(2px);
  animation: ring .7s ease-out forwards;
  pointer-events: none;
}
@keyframes ring {
  from { opacity: .95; transform: translateZ(2px) scale(1); }
  to   { opacity: 0;   transform: translateZ(2px) scale(1.45); }
}

/* Carte non abbinate a fine partita: sbiadiscono per far risaltare le altre */
.board.is-over .card:not(.is-matched) { filter: grayscale(.55) brightness(.72); transition: filter .6s ease; }

/* ---------- Conto alla rovescia iniziale ------------------------------ */
.countdown {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: rgba(12, 2, 3, .55);
  backdrop-filter: blur(6px);
  font-size: clamp(80px, 22vmin, 300px);
  font-weight: 900;
  letter-spacing: -.05em;
  text-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.countdown b { display: block; animation: count-in .9s cubic-bezier(.2,1.2,.3,1); }
@keyframes count-in {
  0%   { opacity: 0; transform: scale(2.4); filter: blur(14px); }
  35%  { opacity: 1; transform: scale(1);   filter: blur(0); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.86); }
}

/* ---------- Schermata finale ------------------------------------------ */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 5vmin;
  background: rgba(12, 2, 3, .66);
  backdrop-filter: blur(14px);
  animation: fade-in .45s ease both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.result {
  text-align: center;
  max-width: min(92vw, 680px);
  padding: clamp(22px, 5vmin, 56px);
  border-radius: clamp(18px, 3vmin, 34px);
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  animation: result-in .6s cubic-bezier(.2,1.1,.3,1) both;
}
@keyframes result-in {
  from { opacity: 0; transform: translateY(34px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.result__badge {
  width: clamp(66px, 11vmin, 128px); aspect-ratio: 1;
  margin: 0 auto clamp(12px, 2vmin, 24px);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 10px rgba(255,255,255,.20), 0 14px 34px rgba(0,0,0,.4);
  animation: badge-in .55s cubic-bezier(.2,1.4,.35,1) .12s both;
}
.result--lose .result__badge { background: var(--accent-deep); box-shadow: 0 0 0 10px rgba(224,138,0,.2), 0 14px 34px rgba(0,0,0,.35); }
.result__badge svg { width: 56%; height: 56%; fill: var(--brand); }
@keyframes badge-in { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }

.result__title { font-size: clamp(28px, 5.6vmin, 62px); font-weight: 900; margin: 0 0 .25em; letter-spacing: -.02em; }
.result__text  { font-size: clamp(15px, 2.4vmin, 26px); color: var(--ink-soft); margin: 0 0 clamp(16px, 3vmin, 34px); }
.result__stats { display: flex; justify-content: center; gap: clamp(10px, 2vmin, 22px); flex-wrap: wrap; margin-bottom: clamp(16px, 3vmin, 32px); }

/* Coriandoli */
#confetti { position: fixed; inset: 0; z-index: 45; pointer-events: none; }

/* ---------- Menu di servizio (discreto, per lo staff) -----------------
   In basso a destra: lontano dalle carte e dal punteggio, cosi' nessun
   visitatore ci finisce sopra per sbaglio.
   ---------------------------------------------------------------------- */
.menu { position: fixed; bottom: 0; right: 0; z-index: 60; padding: 14px; }
.menu__toggle {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-faint);
  opacity: .25;
  transition: opacity .2s ease, background-color .2s ease;
}
.menu__toggle:hover, .menu.is-open .menu__toggle { opacity: 1; background: var(--glass); }
.menu__toggle svg { width: 20px; height: 20px; fill: currentColor; }
.menu__panel {
  position: absolute; right: 14px; bottom: 62px;
  min-width: 190px;
  padding: 8px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 44px rgba(0,0,0,.5);
  transform-origin: bottom right;
  animation: menu-in .18s ease both;
}
@keyframes menu-in { from { opacity: 0; transform: scale(.9) translateY(6px); } to { opacity: 1; transform: none; } }
.menu__panel a {
  display: flex; align-items: center; gap: .7em;
  padding: .7em .9em;
  border-radius: 9px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
}
.menu__panel a:hover { background: var(--glass); color: var(--ink); }
.menu__panel svg { width: 16px; height: 16px; fill: currentColor; opacity: .8; }
[hidden] { display: none !important; }

/* ---------- Form impostazioni ----------------------------------------- */
.panel {
  width: min(92vw, 620px);
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--glass-border);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  overflow: hidden;
}
.panel__head {
  padding: 16px 24px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  font-size: 19px; font-weight: 700;
  display: flex; align-items: center; gap: .6em;
}
.panel__head svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.panel__body { padding: 24px; display: flex; flex-direction: column; gap: 20px; }

.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.field input {
  width: 100%;
  padding: 12px 16px;
  font-size: 17px;
  color: var(--ink);
  background: rgba(0,0,0,.3);
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus { outline: none; border-color: var(--brand-bright); box-shadow: 0 0 0 3px rgba(41,169,224,.25); }
.field input:disabled { color: var(--ink-faint); }
.hint { font-size: 13px; color: var(--ink-faint); margin: 6px 0 0; }

.alert {
  padding: 12px 16px; border-radius: 11px;
  background: rgba(255,107,107,.16);
  border: 1px solid rgba(255,107,107,.4);
  font-size: 15px;
}
.divider { height: 1px; background: var(--glass-border); }
.note { margin: 0; font-size: 14px; color: var(--ink-soft); }
.note.is-error { color: #FFB4B4; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn--block { width: 100%; }
.btn--sm { font-size: 16px; padding: .8rem 1.4rem; }
.btn--ok { background: var(--ok); color: var(--brand-deep); }

/* ---------- Scorciatoie ------------------------------------------------ */
.center { text-align: center; }
.scroll-y { overflow-y: auto; }

/* Chi ha attivato "riduci animazioni" vede comunque un gioco funzionante */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
  }
}