/* ============================================================
   DollaroBet - Pagina di ingresso (sala slot)
   Colori accesi, luci al neon e animazioni.
   ============================================================ */

/* ---------- Luci di sfondo ---------- */
.luci {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 12% 8%, color-mix(in srgb, var(--neon-rosa) 30%, transparent), transparent 70%),
    radial-gradient(42vw 42vw at 88% 12%, color-mix(in srgb, var(--neon-ciano) 24%, transparent), transparent 70%),
    radial-gradient(46vw 46vw at 50% 105%, color-mix(in srgb, var(--oro) 22%, transparent), transparent 70%);
  animation: respiroLuci 10s ease-in-out infinite alternate;
}
@keyframes respiroLuci {
  from { opacity: .7; transform: scale(1); }
  to   { opacity: 1;  transform: scale(1.1); }
}
/* la topbar non va elencata qui: deve restare sticky come in base.css */
.wrap, footer { position: relative; z-index: 1; }

/* ---------- Trama viola sotto le sezioni ----------
   La trama sta su uno pseudo-elemento: se il PNG non c'e' resta
   esattamente lo sfondo di prima, senza buchi ne' riquadri vuoti. */
.trama { position: relative; }
.trama::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: url(../img/home/trama-viola.png);
  background-repeat: repeat;
  background-size: 240px 240px;
  opacity: .12;
}
/* il contenuto sale sopra la trama */
.trama > * { position: relative; z-index: 1; }
/* nelle sezioni senza cornice la trama sfuma ai bordi, cosi' non si vede lo stacco */
.eroe.trama::before,
.vetrina-home.trama::before {
  -webkit-mask-image: radial-gradient(75% 70% at 50% 45%, #000 35%, transparent 100%);
  mask-image: radial-gradient(75% 70% at 50% 45%, #000 35%, transparent 100%);
}

/* ---------- Fregio fra una sezione e l'altra ---------- */
.fregio {
  display: block;
  width: min(100%, 620px);
  height: auto;
  margin: 32px auto 4px;
  opacity: .8;
  pointer-events: none;
}

/* ---------- Blocco di apertura ---------- */
.eroe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 26px;
  text-align: center;
  padding: 40px 10px 30px;
}
.eroe-testo { flex: 1 1 380px; min-width: 0; }

/* il cabinato disegnato: a destra sul largo, sotto al testo sul telefono.
   Base del flex e tetto tenuti uguali: altrimenti il max-width annullerebbe
   la base dichiarata e resterebbero due misure in contraddizione. */
.cabinato-foto {
  flex: 0 1 300px;
  align-self: center;
  width: 100%;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .6))
          drop-shadow(0 0 30px color-mix(in srgb, var(--neon-viola) 45%, transparent));
  animation: fluttuaCabinato 6s ease-in-out infinite alternate;
}
@keyframes fluttuaCabinato {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}
/* da qui in su testo a sinistra e disegno a fianco */
@media (min-width: 900px) {
  .eroe {
    flex-wrap: nowrap;
    gap: 40px;
    text-align: left;
    padding: 50px 10px 40px;
  }
  .eroe p { margin-left: 0; }
  /* base e tetto crescono insieme, come sotto i 900px */
  .cabinato-foto { flex-basis: 340px; max-width: 340px; }
}

.insegna-luminosa {
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--oro) 55%, transparent);
  background: color-mix(in srgb, var(--oro) 10%, transparent);
  color: var(--oro-chiaro);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: 2px;
  /* recupera lo spazio aggiunto dopo l'ultima lettera: cosi' il testo resta centrato */
  text-indent: 2px;
}
/* l'alone sta su uno pseudo-elemento con ombra fissa: lampeggia l'opacita', niente ridisegno */
.insegna-luminosa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 26px color-mix(in srgb, var(--oro) 70%, transparent);
  opacity: 0;
  animation: lampeggio 2.2s ease-in-out infinite;
}
@keyframes lampeggio {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

.eroe h1 {
  margin-top: 16px;
  font-size: clamp(2rem, 9vw, 4.6rem);
  line-height: 1.1;
  letter-spacing: 1px;
  text-shadow: 0 0 30px color-mix(in srgb, var(--neon-viola) 50%, transparent);
}
.eroe h1 .brillante {
  font-style: normal;
  background: linear-gradient(90deg, var(--neon-rosa), var(--oro) 40%, var(--neon-ciano) 70%, var(--neon-rosa));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* l'alone viola dell'h1 si dipingerebbe sopra le lettere ritagliate */
  text-shadow: none;
  animation: scorriColori 12s linear infinite;
}
@keyframes scorriColori {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}
/* Alto contrasto: lo sfondo viene neutralizzato, il testo deve tornare pieno */
@media (forced-colors: active) {
  .eroe h1 .brillante {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

.eroe p {
  max-width: 640px;
  margin: 14px auto 0;
  color: var(--testo-soft);
  line-height: 1.6;
}

.btn-grande {
  display: inline-block;
  margin-top: 24px;
  padding: 17px 48px;
  font-size: 1.1rem;
  letter-spacing: 1.5px;
  text-indent: 1.5px;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--oro) 35%, transparent);
  animation: pulsante 2.4s ease-in-out infinite;
}
@keyframes pulsante {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-5px) scale(1.03); }
}
/* col mouse sopra il pulsare si ferma, altrimenti coprirebbe il sollevamento del bottone */
.btn-grande:hover:not(:disabled) {
  animation: none;
  transform: translateY(-5px) scale(1.03);
  /* l'alone cresce col bottone: prima si stringeva, sembrava che si spegnesse */
  box-shadow: 0 16px 44px color-mix(in srgb, var(--oro) 50%, transparent);
}

/* ---------- Le due carte gioco ---------- */
.vetrina-home {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
  margin-top: 34px;
}
.gioco {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
  /* la copertina arriva a filo del bordo: il riempimento sta nel corpo */
  padding: 0;
  /* la trama sta sotto al gradiente della carta: se manca il PNG resta il gradiente.
     Alfa e passo uguali a .come e .striscia-numeri: la trama si vede allo stesso
     modo in tutte le sezioni. Il fondo pieno sotto e' quasi identico al gradiente,
     quindi abbassare l'alfa cambia solo quanta trama passa, non il colore. */
  background-color: #12082a;
  background-image:
    linear-gradient(180deg, rgba(23, 13, 51, .84), rgba(15, 8, 36, .88)),
    url(../img/home/trama-viola.png);
  background-repeat: no-repeat, repeat;
  background-size: auto, 240px 240px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* copertina dipinta in cima alla carta */
.copertina {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  /* se l'immagine non c'e' resta questo fondo, non un buco bianco:
     l'onerror nell'HTML nasconde la sola <img>, mai tutta la copertina,
     cosi' le due carte restano alte uguali */
  background: linear-gradient(160deg, #2a1258, #10062b);
}
.copertina img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
/* velatura scura: scurisce la foto e la fonde col testo che sta sotto */
.copertina::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 5, 24, .30) 0%,
    rgba(10, 5, 24, .12) 42%,
    rgba(10, 5, 24, .72) 82%,
    rgba(15, 8, 36, .96) 100%);
}

.corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 22px 26px;
}
.gioco h2 { font-size: 1.6rem; margin: 0 0 8px; }
/* lo stacco prima della pillola sta qui: la pillola si allinea in fondo con margin-top auto */
.gioco p { color: var(--testo-soft); font-size: .92rem; line-height: 1.5; margin-bottom: 18px; }

.gioco.vivo {
  border-color: var(--oro-scuro);
  box-shadow: 0 0 34px -12px var(--oro);
}
.gioco.vivo::before {
  content: "";
  position: absolute;
  inset: -45% -12%;
  background: conic-gradient(from 0deg, transparent 0 70%, color-mix(in srgb, var(--oro) 38%, transparent) 82%, transparent 92%);
  animation: giroLuce 5s linear infinite;
}
@keyframes giroLuce { to { transform: rotate(1turn); } }
.gioco.vivo > * { position: relative; z-index: 1; }
.gioco.vivo:hover {
  transform: translateY(-6px);
  border-color: var(--oro);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .6), 0 0 40px -8px var(--oro);
}
/* transizione e non animazione: uscendo col mouse la copertina rientra morbida */
.gioco.vivo:hover .copertina img { transform: scale(1.06); }

.pillola {
  display: inline-block;
  margin-top: auto;
  align-self: center;
  padding: 10px 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--oro-chiaro), var(--oro) 45%, var(--oro-scuro));
  color: #2b1c00;
  font-weight: 900;
  font-size: .84rem;
  letter-spacing: 1.2px;
  text-indent: 1.2px;
}
.pillola.spenta {
  background: transparent;
  border: 1px solid var(--bordo);
  color: var(--testo-soft);
}
/* sbiadisce solo copertina e pillola: il testo resta leggibile */
.gioco.in-arrivo .copertina img { filter: grayscale(.4); opacity: .8; }
.gioco.in-arrivo .pillola { opacity: .5; }

/* ---------- Come funziona ---------- */
.come {
  margin-top: 34px;
  padding: 30px 20px 34px;
  border: 1px solid var(--bordo);
  border-radius: var(--radius);
  text-align: center;
  /* trama sotto al gradiente: se il PNG non c'e' resta il solo gradiente.
     Stessa alfa e stesso passo delle altre sezioni con trama */
  background-color: #12082a;
  background-image:
    linear-gradient(180deg, rgba(36, 21, 73, .84), rgba(15, 8, 36, .88)),
    url(../img/home/trama-viola.png);
  background-repeat: no-repeat, repeat;
  background-size: auto, 240px 240px;
}
.come h2 {
  font-size: 1.6rem;
  color: var(--oro);
  text-shadow: 0 0 18px color-mix(in srgb, var(--oro) 35%, transparent);
}
.come-intro {
  margin: 8px auto 24px;
  max-width: 560px;
  color: var(--testo-soft);
  font-size: .92rem;
}
/* sul telefono una o due tessere per riga, dal tablet in su sempre tre:
   cosi' le sei tessere fanno due righe piene e non restano orfane in fondo */
.tessere {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 16px;
}
@media (min-width: 700px) {
  .tessere {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}
.tessera {
  padding: 18px 14px 20px;
  border: 1px solid var(--bordo);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(36, 21, 73, .7), rgba(15, 8, 36, .7));
  transition: transform .18s ease, border-color .18s ease;
}
.tessera:hover { transform: translateY(-4px); border-color: var(--oro-scuro); }
/* le misure stanno anche nell'HTML: il posto resta occupato mentre carica */
.tessera img {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 10px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
}
.tessera h3 {
  font-size: 1.02rem;
  color: var(--oro-chiaro);
  margin-bottom: 6px;
}
.tessera p {
  color: var(--testo-soft);
  font-size: .86rem;
  line-height: 1.5;
}
/* sui telefoni stretti si guadagna spazio ai lati: due tessere per riga invece di una.
   Sta dopo le regole qui sopra, altrimenti quelle piu' in basso rivincerebbero. */
@media (max-width: 470px) {
  .come { padding: 24px 12px 28px; }
  .tessera { padding: 16px 8px 18px; }
}

/* ---------- Numeri ---------- */
.striscia-numeri {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}
.striscia-numeri div {
  flex: 1 1 150px;
  /* senza tetto l'ultimo riquadro che va a capo si prenderebbe tutta la riga */
  max-width: 260px;
  text-align: center;
  padding: 18px 10px;
  border: 1px solid var(--bordo);
  border-radius: var(--radius);
  /* trama sotto al gradiente di prima: senza il PNG resta solo il gradiente.
     Stessa alfa e stesso passo delle altre sezioni con trama */
  background-color: rgba(10, 5, 24, .6);
  background-image:
    linear-gradient(180deg, rgba(36, 21, 73, .84), rgba(15, 8, 36, .88)),
    url(../img/home/trama-viola.png);
  background-repeat: no-repeat, repeat;
  background-size: auto, 240px 240px;
}
.striscia-numeri strong {
  display: block;
  font-size: 1.9rem;
  color: var(--oro);
  text-shadow: 0 0 18px color-mix(in srgb, var(--oro) 40%, transparent);
}
.striscia-numeri span {
  display: block;
  font-size: .8rem;
  letter-spacing: 1.4px;
  text-indent: 1.4px;
  text-transform: uppercase;
  color: var(--testo-soft);
}

.riga-ricarica { text-align: center; margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  .luci, .insegna-luminosa, .insegna-luminosa::before, .eroe h1 .brillante, .btn-grande,
  .gioco.vivo::before, .cabinato-foto { animation: none; }
  /* niente ingrandimento della copertina col mouse sopra la card */
  .copertina img { transition: none; }
  .gioco.vivo:hover .copertina img { transform: none; }
  .tessera { transition: none; }
  .tessera:hover { transform: none; }
}


/* ---------- righe di servizio della home ---------- */
.nota-ingresso,
.sotto-titolo {
  max-width: 320px;
  margin: 12px auto 0;
  font-size: .88rem;
  color: var(--testo-soft);
}

.nota-piede {
  max-width: 640px;
  margin: 26px auto 0;
  text-align: center;
  font-size: .86rem;
  color: var(--testo-soft);
}

@media (min-width: 900px) {
  /* col testo allineato a sinistra anche queste righe partono da sinistra */
  .nota-ingresso,
  .sotto-titolo { margin-left: 0; margin-right: 0; }
}


/* Il titolo della sezione e' un'immagine: si adatta alla larghezza e non
   supera mai la sua misura vera. Se il file non c'e', resta il testo
   alternativo, che il browser disegna con lo stile del titolo. */
.titolo-immagine {
  margin: 0 auto 18px;
  line-height: 0;
}
.titolo-immagine img {
  display: block;
  /* al centro anche quando il testo dell'eroe e' allineato a sinistra */
  margin: 0 auto;
  width: 100%;
  /* in cima l'insegna si prende piu' spazio: e' il titolo della pagina */
  max-width: 760px;
  height: auto;
}
/* l'insegna e' gia' alta di suo: l'eroe non deve aggiungere altro vuoto */
.eroe h1.titolo-immagine { margin: 0; }
.eroe:has(.titolo-immagine) { padding: 18px 10px 10px; }


/* Chi sei, in piccolo, accanto al saldo e al tasto ESCI: prima era un titolone
   "Ciao nome" in mezzo alla pagina, al posto del nome del sito. */
.chi-sei {
  /* da qui in poi tutto sta a destra, attaccato: nome, saldo, ESCI */
  margin-left: auto;
  font-size: .78rem;
  letter-spacing: .6px;
  color: var(--testo-soft);
  white-space: nowrap;
}
/* Da quando la home e' la porta del sito, ENTRA e' l'unica cosa da toccare:
   con .btn-sm restava alto ventinove punti, sotto i quarantaquattro che un
   pollice trova al primo colpo. Cresce solo lui, e solo da sloggati: ESCI
   deve restare piccolo accanto al nome. */
.pagina-home:not(.con-accesso) #accesso {
  min-height: 44px;
  padding-inline: 22px;
  display: inline-flex;
  align-items: center;
  font-size: .9rem;
}

/* l'etichetta del saldo non deve spingere piu' niente: ci pensa .chi-sei */
.pagina-home .topbar > .etichetta-saldo { margin-left: 0; }


/* Sul telefono la barra deve stare su una riga sola: l'etichetta SALDO e'
   superflua accanto alla cifra, e il tasto ESCI non deve finire da solo sotto
   il marchio. */
@media (max-width: 560px) {
  .pagina-home .topbar { gap: 8px; }
  .pagina-home .topbar > .etichetta-saldo { display: none; }
  .pagina-home .saldo { padding: 4px 10px; font-size: .85rem; }
  .pagina-home .chi-sei { font-size: .72rem; }
  .pagina-home .topbar .btn-sm { padding: 6px 11px; font-size: .76rem; }
}