/* La porta del sito, faccia nuova.

   Si carica DOPO home.css e lo ridipinge, come tema-tv.css fa con le
   corse: stesso marchio, stessi indirizzi, stessa sessione. Cambia
   l'impaginazione - quattro sale allo stesso peso, niente preferenze per
   l'una o per l'altra - e il vestito: viola e oro, caratteri di sistema,
   tasti pieni come quelli delle corse.

   Per tornare alla faccia di prima basta togliere il link dalla pagina. */

:root {
  /* La colonna del contenuto. Serve in due posti - il corpo della pagina
     (.wrap) e l'imbottitura della barra in alto - e finche' era scritta a
     mano in tutti e due, sopra i 1440 la barra restava attaccata ai bordi
     dello schermo mentre le carte partivano anche 240 punti piu' dentro.

     E' stata tolta per sbaglio insieme ai colori viola (commit cc7a7fa), e
     senza di lei le due regole che la usano non valevano piu': dai 1000
     punti in su la barra aveva imbottitura zero - logo a x=0, ESCI
     incollato al bordo destro, barra alta 36 invece di 68 - e a 2560 .wrap
     non aveva piu' un massimo, con le carte delle sale larghe 594 invece
     di 314. Non cancellarla: nessun altro foglio la definisce. */
  --ca-colonna: 1440px;
  /* Gli stessi colori della pagina delle corse: un fondo solo per tutto il
     sito, cosi' le pagine non sembrano tre siti diversi. */
  --ca-fondo: #0b0f17;
  --ca-carta: #11161f;
  --ca-bordo: #1a2130;
  --ca-bordo-oro: #232c3d;
  --ca-tasto: #161d2a;
  --ca-testo: #e8edf5;
  --ca-spento: #aab4c6;
  --ca-spento2: #8a96ab;
  --ca-giallo: #f5c542;
  --ca-giallo-scuro: #1a1300;
}

/* Le luci al neon del vecchio sfondo: via, il fondo e' uno solo. Sono due
   cose diverse - il riquadro .luci e il velo fisso che base.css appoggia
   dietro al corpo - e vanno spente tutt'e due, se no in cima alla pagina
   resta un alone viola che non c'entra piu' niente. */
.pagina-home .luci { display: none; }
.pagina-home::before { display: none; }
.pagina-home .trama::before { display: none; }

.pagina-home {
  background: var(--ca-fondo);
  color: var(--ca-testo);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- la barra in alto ---------- */
/* Il logo spinge tutto il resto a destra col suo margin-right: auto, e
   quando la riga non basta piu' (schermo stretto, nome lungo, saldo da
   sette cifre) base.css la manda a capo. Senza il justify-content qui
   sotto restava quello di base.css, space-between, e il pezzo rimasto
   solo sulla seconda riga - di solito il tasto ESCI - finiva incollato al
   bordo SINISTRO, sotto il logo, lontano dal saldo a cui appartiene.
   Con flex-end quel che va a capo resta sotto il saldo, sulla destra. */
.pagina-home .topbar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: flex-end;
  padding: 12px 16px;
  background: var(--ca-fondo);
  border-bottom: 1px solid var(--ca-bordo);
  box-shadow: none;
}
/* La fila di lampadine sotto la barra: era il vestito vecchio, e con
   questo fondo sembra una ghirlanda di compleanno. Al suo posto una riga
   sola, che si accende d'oro al centro e sfuma ai bordi: chiude la barra
   senza gridare. */
.pagina-home .topbar::after {
  bottom: -1px; height: 1px;
  background-image: linear-gradient(90deg, transparent, #232c3d 18%, #f5c54266 50%, #232c3d 82%, transparent);
  background-size: auto;
  opacity: 1;
  animation: none;
}

.pagina-home .logo { margin-right: auto; }
.pagina-home .logo img { height: 26px; width: auto; display: block; }
/* Il nome e' l'unica cosa che puo' allungarsi senza limite: si accorcia
   lui con i puntini, cosi' non manda a capo la barra per colpa sua. */
.pagina-home .chi-sei {
  color: var(--ca-spento2); font: 600 12px/1 system-ui, sans-serif;
  min-width: 0; max-width: 38%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pagina-home .etichetta-saldo { display: none; }
/* Il saldo: una pastiglia sola, con la sua scritta dentro. Prima erano
   due pezzi staccati - la parola SALDO da una parte, la cifra
   dall'altra - con i caratteri del vestito vecchio. */
.pagina-home .saldo {
  display: inline-flex; align-items: baseline; gap: 7px;
  border: 1px solid var(--ca-bordo-oro); border-radius: 999px;
  padding: 9px 16px; background: var(--ca-tasto);
  font: 800 15px/1 system-ui, sans-serif; color: var(--ca-giallo);
  font-variant-numeric: tabular-nums;
  text-shadow: none; letter-spacing: 0;
}
.pagina-home .saldo::before {
  content: 'SALDO';
  font: 800 9px/1 system-ui, sans-serif; letter-spacing: 1.4px; color: var(--ca-spento2);
}
/* Niente simbolo di valuta dopo la cifra: sono crediti caricati
   dall'agente, non euro, e crediti() (admin/comune.php) li scrive nudi
   apposta. Con l'euro qui la barra diceva "1.234,56 €" e dieci centimetri
   sotto il jackpot, stampato dalla stessa funzione, diceva "1.234,56". */
.pagina-home .topbar .btn,
.pagina-home .topbar .btn-sm {
  border-radius: 9px; border: 0;
  padding: 9px 16px;
  background: var(--ca-giallo); color: var(--ca-giallo-scuro);
  font: 800 12px/1 system-ui, sans-serif; letter-spacing: 1px;
  box-shadow: none;
}
.pagina-home .topbar .btn-ghost {
  background: transparent; border: 1px solid var(--ca-bordo); color: var(--ca-spento);
}
/* Sui telefoni la barra si stringe invece di andare a capo: logo un po'
   piu' basso, pastiglia del saldo piu' magra, tasto piu' corto. Cosi' a
   320 punti saldo e ESCI stanno ancora sulla stessa riga. */
@media (max-width: 480px) {
  .pagina-home .topbar { gap: 8px; padding: 10px 12px; }
  .pagina-home .logo img { height: 22px; }
  .pagina-home .saldo { padding: 7px 11px; gap: 5px; font-size: 14px; }
  .pagina-home .topbar .btn,
  .pagina-home .topbar .btn-sm { padding: 8px 12px; font-size: 11px; }
}

.pagina-home .wrap { max-width: var(--ca-colonna); margin: 0 auto; padding: 0; }

/* ---------- l'apertura ---------- */
.ca-apre { text-align: center; padding: 18px 18px 4px; }
.ca-apre .ca-occhiello { font: 800 9px/1 system-ui, sans-serif; letter-spacing: 3px; color: var(--ca-giallo); }
.ca-apre h1 { margin: 9px 0 0; font: 800 23px/1.15 system-ui, sans-serif; letter-spacing: -.2px; color: var(--ca-testo); }
.ca-apre h1 em { font-style: normal; color: var(--ca-giallo); }
.ca-apre p { margin: 7px 0 0; color: var(--ca-spento); font-size: 13px; }
/* Sul telefono le frasi lunghe si tolgono: la pagina diventava un rotolo. */
.ca-lunga { display: none; }

/* ---------- la striscia del jackpot ---------- */
.ca-jack {
  margin: 14px 16px 0; padding: 11px 14px;
  border: 1px solid var(--ca-bordo-oro); border-radius: 12px;
  background: linear-gradient(100deg, #161d2a, var(--ca-tasto) 70%);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ca-jack small { display: block; color: var(--ca-giallo); font: 800 9px/1 system-ui, sans-serif; letter-spacing: 2px; }
.ca-jack b { display: block; margin-top: 5px; font: 800 21px/1 system-ui, sans-serif; color: var(--ca-giallo); font-variant-numeric: tabular-nums; }
.ca-jack span { color: var(--ca-spento); font-size: 11px; text-align: right; }

/* ---------- i titoletti ---------- */
.ca-tit { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 16px 8px; }
.ca-tit h2 { margin: 0; font: 800 15px/1 system-ui, sans-serif; color: var(--ca-testo); }
.ca-tit span { color: var(--ca-spento2); font-size: 11px; }

/* ---------- le quattro sale ----------
   Sul telefono sono righe: immagine stretta a sinistra, testo a destra.
   Sul computer diventano quattro carte affiancate, immagine grande sopra. */
.ca-sale { display: grid; gap: 10px; padding: 0 16px; }
.ca-sala {
  display: grid; grid-template-columns: 104px 1fr; align-items: stretch;
  border: 1px solid var(--ca-bordo); border-radius: 14px; overflow: hidden;
  background: var(--ca-carta);
  color: inherit; text-decoration: none;
}
.ca-sala .ca-arte { position: relative; min-height: 92px; overflow: hidden; background: #0f0a1e; }
.ca-sala .ca-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-sala .ca-bollo {
  position: absolute; left: 6px; top: 6px; white-space: nowrap;
  background: var(--ca-giallo); color: var(--ca-giallo-scuro);
  font: 800 8px/1 system-ui, sans-serif; letter-spacing: .8px;
  padding: 4px 6px; border-radius: 3px;
}
/* Il bollo giallo pieno vuol dire "aperta". Quello tenue vuol dire "si
   entra ma il banco e' chiuso": stesso posto, colore diverso, cosi' non
   si scambia con un APERTA a colpo d'occhio. */
.ca-sala .ca-bollo.tenue {
  background: #241a3f; color: var(--ca-giallo);
  border: 1px solid var(--ca-bordo-oro); padding: 3px 5px;
}
.ca-sala .ca-dentro { padding: 11px 12px; display: flex; flex-direction: column; justify-content: center; }
.ca-sala h3 { margin: 0; font: 800 16px/1.2 system-ui, sans-serif; }
.ca-sala p { margin: 3px 0 0; color: var(--ca-spento); font-size: 12px; }
.ca-sala ul { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; padding: 0; }
.ca-sala li { border-radius: 999px; padding: 5px 9px; background: #1a2130; color: var(--ca-spento); font: 600 11px/1 system-ui, sans-serif; }
.ca-sala .ca-tasto {
  align-self: flex-start; margin-top: 10px; padding: 9px 18px; border-radius: 9px;
  background: var(--ca-giallo); color: var(--ca-giallo-scuro);
  font: 800 12px/1 system-ui, sans-serif; letter-spacing: 1px;
}
.ca-sala .ca-tasto.spento { background: #2a3242; color: #8a96ab; }
/* Spento vuol dire "non si entra" (casino' e poker). Tenue vuol dire "si
   entra ma non si gioca": e' il GUARDA delle corse a banco chiuso, che
   deve essere chiaramente diverso dal giallo pieno della sala aperta e
   altrettanto chiaramente vivo, perche' la carta e' un link. */
.ca-sala .ca-tasto.tenue {
  background: transparent; border: 1px solid var(--ca-bordo-oro);
  color: var(--ca-giallo); padding: 8px 17px;
}
.ca-sala.ca-chiusa { cursor: default; }

/* ---------- i tre numeri ----------
   Una fascia sola, senza titolo e senza didascalie: il numero grande
   davanti e due parole sotto. Prima c'era scritto "In numeri" con
   accanto "adesso", e nessuna delle due diceva niente. */
.ca-numeri {
  /* Tre riquadri staccati, con lo stesso spazio e gli stessi angoli delle
     carte qui sopra: prima erano incollati dentro una cornice sola e,
     sotto quattro carte separate, sembravano un'altra pagina. */
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 14px 16px 0;
}
.ca-numeri div {
  border: 1px solid var(--ca-bordo); border-radius: 14px;
  background: var(--ca-carta); padding: 16px 8px; text-align: center;
}
.ca-numeri b {
  display: block;
  font: 800 26px/1 system-ui, sans-serif; color: var(--ca-giallo);
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.ca-numeri small {
  display: block; margin-top: 6px;
  font: 600 11px/1.3 system-ui, sans-serif; color: var(--ca-spento);
}

/* ---------- il piede ---------- */
/* I margini laterali restano auto: home.css tiene la nota larga al massimo
   640 punti ed e' l'auto che la centra. Scrivendo "18px 0 0" la
   scorciatoia li azzerava tutti e due, e da 641 punti in su la nota - con
   la sua riga di separazione - si incollava a sinistra mentre il footer
   sotto restava centrato. */
.pagina-home .nota-piede {
  margin: 18px auto 0; border-top: 1px solid var(--ca-bordo);
  padding: 14px 16px 6px; text-align: center;
  color: #5d6778; font: 10.5px/1.5 system-ui, sans-serif;
}
.pagina-home .nota-piede strong { color: var(--ca-spento2); }
.pagina-home footer {
  padding: 4px 16px 22px; text-align: center;
  color: #5d6778; font: 800 9px/1 system-ui, sans-serif; letter-spacing: 2px;
  background: transparent; border: 0;
}

/* ---------- sul computer ---------- */
@media (min-width: 1000px) {
  /* L'imbottitura della barra segue la colonna del contenuto invece di
     essere un numero fisso: fino a 1440 vale 56 punti come prima, sopra i
     1440 cresce insieme al margine che centra .wrap, cosi' logo e ESCI
     restano incolonnati con la striscia del jackpot e con le carte. */
  .pagina-home .topbar { padding: 16px max(56px, calc((100% - var(--ca-colonna)) / 2 + 56px)); }
  .pagina-home .logo img { height: 34px; }
  .ca-apre { padding: 56px 20px 14px; }
  .ca-apre h1 { font-size: 46px; }
  .ca-apre p { font-size: 16px; max-width: 660px; margin-left: auto; margin-right: auto; }
  .ca-corta { display: none; }
  .ca-lunga { display: block; }
  .ca-jack { margin: 24px 56px 0; padding: 20px 26px; border-radius: 14px; }
  .ca-jack b { font-size: 30px; }
  .ca-tit { padding: 34px 56px 14px; }
  .ca-tit h2 { font-size: 22px; }
  /* Quante sale ci sono, tanto sono larghe: una riga sola, tutte uguali. */
  .ca-sale { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 0 56px; }
  /* Due righe: l'immagine alta quanto deve, il testo che si prende tutto
     il resto. Senza 'auto 1fr' lo spazio avanzato finiva nella riga
     dell'immagine, e in quattro carte affiancate ogni testo partiva a
     un'altezza diversa. */
  .ca-sala { grid-template-columns: 1fr; grid-template-rows: auto 1fr; border-radius: 18px; }
  .ca-sala .ca-arte { height: 200px; }
  .ca-sala .ca-bollo { left: 12px; top: 12px; font-size: 10px; padding: 6px 10px; border-radius: 4px; }
  /* Quattro carte in fila hanno righe di lunghezza diversa: il testo parte
     sempre in alto e il tasto si appoggia sempre in fondo, cosi' i quattro
     nomi sono su una riga sola e i quattro tasti su un'altra. Prima il
     blocco era centrato e ogni carta cominciava a un'altezza diversa. */
  .ca-sala .ca-dentro { padding: 20px; justify-content: flex-start; }
  .ca-sala .ca-tasto { margin-top: auto; }
  .ca-sala h3 { font-size: 23px; }
  .ca-sala p { font-size: 13.5px; }
  .ca-sala li { font-size: 12px; padding: 7px 13px; }
  /* Il tasto si appoggia in fondo alla carta: quattro tasti alla stessa
     altezza, qualunque lunghezza abbiano le righe sopra. */
  .ca-sala .ca-tasto { margin-top: auto; padding: 13px 24px; font-size: 14px; border-radius: 10px; }
  .ca-sala ul { margin-bottom: 16px; }
  .ca-numeri { margin: 24px 56px 0; gap: 24px; }
  .ca-numeri div { padding: 26px 16px; border-radius: 18px; }
  .ca-numeri b { font-size: 40px; }
  .ca-numeri small { font-size: 13px; margin-top: 8px; }
  .pagina-home .nota-piede { margin-top: 34px; padding: 26px 56px 8px; }
  .pagina-home footer { padding-bottom: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .pagina-home * { animation: none !important; transition: none !important; }
}