/* Hugo Casino EU — foglio di stile unico.
 *
 * Riprende la struttura del sito di partenza: sidebar fissa da 220px, area
 * principale con margine corrispondente, sidebar a scomparsa sotto i 1024px e
 * barra di navigazione in basso su telefono. Stessa palette (#E94E1B su fondo
 * scuro), stesse misure.
 *
 * Cosa NON riprende, e perche': il sito di partenza caricava Tailwind da
 * cdn.tailwindcss.com, Font Awesome da cdnjs e Poppins da Google Fonts. Il
 * primo e' la build di sviluppo di Tailwind, che compila il CSS nel browser a
 * ogni caricamento: blocca il rendering e non va usata in produzione. Tutte e
 * tre sono dipendenze che, se non rispondono, lasciano la pagina senza stile o
 * col menu pieno di quadrati vuoti. Qui non ce n'e' nessuna: le icone e le
 * bandiere sono SVG dentro il documento e i caratteri sono quelli di sistema.
 */

:root {
  --sfondo: #121212;
  --sidebar: #1a1111;
  --arancio: #e94e1b;
  --arancio-chiaro: #ff5e2b;
  --scheda: #1e1a19;
  --scheda-2: #262020;
  --bordo: #332827;
  --testo: #ece6e4;
  --testo-tenue: #9a8b86;
  --testo-menu: #8a7a75;
  --larghezza-sidebar: 220px;
  --lettura: 46rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 400 1.0313rem/1.72 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
body.bloccato { overflow: hidden; }

a { color: var(--arancio-chiaro); text-underline-offset: .18em; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--arancio-chiaro); outline-offset: 2px; border-radius: 3px; }

.ico { width: 20px; height: 20px; flex: 0 0 auto; }

.salta {
  position: absolute; left: -9999px; z-index: 200;
  background: var(--arancio); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 .5rem 0; text-decoration: none;
}
.salta:focus { left: 0; top: 0; }

/* ── sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--larghezza-sidebar);
  background: var(--sidebar);
  height: 100vh;
  position: fixed; left: 0; top: 0; z-index: 100;
  border-right: 1px solid var(--bordo);
  display: flex; flex-direction: column;
  overflow-y: auto;
  transition: transform .3s ease;
}
.sidebar-testa {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.15rem .75rem;
}
.marchio { display: block; line-height: 0; text-decoration: none; }
.logo-sidebar { width: 150px; height: auto; max-width: 100%; }
.marchio-testa { display: block; line-height: 0; text-decoration: none; }
.logo-testa { width: 104px; height: auto; }
.chiudi-sidebar {
  display: none;
  background: none; border: 0; color: var(--testo-tenue);
  cursor: pointer; padding: .35rem;
}

.sidebar-bottoni { padding: .25rem 1rem 1.1rem; display: grid; gap: .5rem; }
.btn-reg, .btn-log {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .68rem .9rem; border-radius: .5rem;
  font-size: .9rem; font-weight: 600; text-decoration: none;
}
.btn-reg { background: var(--arancio); color: #fff; }
.btn-reg:hover { background: var(--arancio-chiaro); color: #fff; }
.btn-log { border: 1px solid var(--bordo); color: var(--testo); }
.btn-log:hover { border-color: var(--arancio); color: #fff; }

.menu { display: flex; flex-direction: column; gap: 1.35rem; padding-bottom: 1.5rem; flex: 1 1 auto; }
.nav-gruppo { display: flex; flex-direction: column; }
/* L'intestazione di sezione: e' cio' che trasforma nove voci uguali in tre
   blocchi leggibili a colpo d'occhio, e riempie la colonna senza aggiungere
   voci finte. */
.nav-titolo {
  margin: 0 0 .35rem; padding: 0 1.25rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: #5f5350;
}
.nav-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .72rem 1.25rem;
  color: var(--testo-menu); text-decoration: none;
  font-size: .875rem; transition: color .2s, background .2s;
  border-left: 3px solid transparent;
}
.nav-item .ico { color: var(--arancio); }
.nav-item:hover { color: var(--arancio); background: rgba(255,255,255,.02); }
.nav-item.attivo {
  color: #fff; background: rgba(233,78,27,.09);
  border-left-color: var(--arancio);
}

.velo {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.6);
}

/* ── area principale ─────────────────────────────────────────────────────── */
.main-wrapper {
  margin-left: var(--larghezza-sidebar);
  width: calc(100% - var(--larghezza-sidebar));
  transition: margin-left .3s ease, width .3s ease;
}

.testa {
  height: 4.25rem;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.5rem;
  background: rgba(26,17,17,.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--bordo);
  position: sticky; top: 0; z-index: 50;
}
.apri-sidebar {
  display: none;
  background: none; border: 1px solid var(--bordo); border-radius: 50%;
  width: 2.4rem; height: 2.4rem;
  align-items: center; justify-content: center;
  color: var(--testo); cursor: pointer;
}


/* ── selettore lingua ────────────────────────────────────────────────────── */
.lingue { position: relative; margin-left: auto; }
.bandiera {
  width: 1.5rem; height: 1rem; border-radius: 2px; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14);
  display: block;
}
.lingua-attuale {
  display: flex; align-items: center; gap: .5rem;
  background: var(--scheda); border: 1px solid var(--bordo); border-radius: .45rem;
  padding: .4rem .65rem; color: var(--testo); cursor: pointer;
  font: inherit; font-size: .85rem;
}
.lingua-attuale:hover { border-color: var(--arancio); }
.lingua-sigla { font-weight: 600; letter-spacing: .02em; }
.lingua-pannello {
  position: absolute; right: 0; top: calc(100% + .45rem);
  background: var(--scheda-2); border: 1px solid var(--bordo);
  border-radius: .55rem; padding: .3rem;
  min-width: 11rem; z-index: 60;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.lingua-pannello[hidden] { display: none; }
.lingua-voce {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: .35rem;
  color: var(--testo-tenue); text-decoration: none; font-size: .88rem;
}
.lingua-voce:hover { background: rgba(255,255,255,.05); color: #fff; }
.lingua-voce.attiva { color: #fff; font-weight: 600; }

/* ── contenuto ───────────────────────────────────────────────────────────── */
main { padding: 2.5rem 1.5rem 4rem; }
.pagina { max-width: var(--lettura); }

h1 { font-size: clamp(1.85rem, 1.15rem + 2.3vw, 2.75rem); line-height: 1.16; letter-spacing: -.02em; margin: 0 0 1.2rem; }
h2 { font-size: clamp(1.32rem, 1.08rem + .85vw, 1.68rem); line-height: 1.26; letter-spacing: -.01em; margin: 2.6rem 0 .85rem; }
h3 { font-size: 1.12rem; margin: 1.7rem 0 .55rem; }
p, ul, ol { margin: 0 0 1.1rem; }
ul, ol { padding-left: 1.3rem; }
li { margin-bottom: .42rem; }
strong { color: #fff; }

.risposta {
  background: var(--scheda);
  border-left: 4px solid var(--arancio);
  border-radius: 0 .5rem .5rem 0;
  padding: 1.05rem 1.3rem; margin: 0 0 2rem;
}
.risposta p { margin: 0; font-size: 1.06rem; color: #fff; }

/* Tabelle con intestazioni vere: e' cio' che le rende leggibili da uno screen
   reader e citabili da un motore generativo. Scorrono nel proprio contenitore,
   cosi' la pagina non scorre mai in orizzontale su telefono. */
.tabella { overflow-x: auto; margin: 0 0 1.4rem; border-radius: .4rem; }
table { border-collapse: collapse; width: 100%; min-width: 28rem; font-size: .93rem; }
th, td { padding: .68rem .8rem; border-bottom: 1px solid var(--bordo); text-align: left; vertical-align: top; }
thead th { background: var(--scheda-2); color: #fff; font-weight: 600; }
tbody tr:hover { background: var(--scheda); }

.faq { margin-top: 3rem; }
.faq details { background: var(--scheda); border: 1px solid var(--bordo); border-radius: .5rem; margin-bottom: .55rem; }
.faq summary { cursor: pointer; padding: .92rem 1.05rem; font-weight: 600; color: #fff; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--arancio); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 1.05rem .3rem; color: var(--testo-tenue); }

.pagina a[rel~="sponsored"] {
  color: #fff; font-weight: 600; text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--arancio);
}
.pagina a[rel~="sponsored"]:hover { box-shadow: inset 0 -1.4em 0 var(--arancio); }

/* ── piè di pagina ───────────────────────────────────────────────────────── */
.pie {
  border-top: 1px solid var(--bordo);
  background: var(--sidebar);
  padding: 2.4rem 1.5rem 3rem;
  font-size: .88rem; color: var(--testo-tenue);
}
.pie-eta { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1.05rem; }
.badge-eta {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem;
  border: 2px solid var(--arancio); color: var(--arancio); border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .82rem;
}
.pie-eta p, .pie-affiliazione { margin: 0 0 1.05rem; max-width: 62rem; }
.pie-link { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-bottom: .9rem; }
.pie-link a { color: var(--testo-tenue); }
.pie-copy { color: #6d5c57; font-size: .82rem; margin: 0; }

/* ── barra inferiore su telefono ─────────────────────────────────────────── */
.barra-basso { display: none; }

@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.aperta { transform: translateX(0); }
  .chiudi-sidebar { display: block; }
  .main-wrapper { margin-left: 0; width: 100%; }
  .apri-sidebar { display: inline-flex; }
  .velo[hidden] { display: none; }

  main { padding: 1.75rem 1.1rem 5.5rem; }
  .pie { padding-bottom: 6rem; }

  .barra-basso {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
    background: var(--sidebar); border-top: 1px solid var(--bordo);
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
  }
  .voce-basso {
    display: flex; flex-direction: column; align-items: center; gap: .18rem;
    background: none; border: 0; cursor: pointer;
    color: var(--testo-menu); text-decoration: none;
    font: inherit; font-size: .66rem; padding: .35rem .2rem;
  }
  .voce-basso .ico { width: 19px; height: 19px; }
  .voce-basso:hover, .voce-basso:focus-visible { color: var(--arancio); }
}

@media (min-width: 1024px) {
  .velo { display: none; }
}

/* La pagina legale in cui ci si trova. Privacy, termini e gioco responsabile
   non compaiono nel menu laterale, quindi il pie' e' l'unico posto dove si
   puo' dire al lettore dove si trova. */
.pie-link a[aria-current="page"] { color: var(--arancio); font-weight: 600; }

/* ── blocco in fondo alla sidebar ────────────────────────────────────────── */
/* Eta' minima e gioco responsabile raggiungibili da ogni pagina senza scorrere
   fino in fondo. Prima stavano solo nel pie', e su telefono "solo nel pie'"
   vuol dire in pratica assente. */
.sidebar-piede {
  margin-top: auto;
  display: flex; align-items: flex-start; gap: .6rem;
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid var(--bordo);
  font-size: .74rem; line-height: 1.45; color: #6f615d;
}
.sidebar-piede p { margin: 0; }
.sidebar-piede a { color: var(--testo-menu); }
.sidebar-piede a:hover { color: var(--arancio); }
.badge-eta.piccolo { width: 1.9rem; height: 1.9rem; font-size: .68rem; border-width: 1.5px; }

/* La riga sotto il logo. Piccola, non urlata: deve chiarire cos'e' il sito
   senza competere col marchio. */
.marchio-nota {
  display: block; margin-top: .3rem;
  font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
  color: #6f615d; line-height: 1.3;
}

/* ── pulsanti nella testata ──────────────────────────────────────────────── */
/* Gli stessi due della sidebar, accanto al selettore di lingua. Sono generati
   dalla stessa funzione: due copie divergerebbero al primo cambio di etichetta
   o di rel, ed e' il rel che qui non puo' sbagliarsi (sponsored, non nofollow). */
.testa-azioni { display: flex; gap: .5rem; margin-left: auto; }
.testa-azioni .btn-reg, .testa-azioni .btn-log { padding: .45rem .85rem; font-size: .84rem; }
.testa-azioni .ico { width: 17px; height: 17px; }
.lingue { margin-left: 0; }

/* Su schermo stretto la testata deve contenere hamburger, logo, due pulsanti e
   lingua: le etichette dei pulsanti spariscono e restano le icone, che e' cio'
   che si fa quando lo spazio finisce, invece di lasciare che la riga vada a capo. */
@media (max-width: 47rem) {
  .testa-azioni .btn-reg span, .testa-azioni .btn-log span { display: none; }
  .testa-azioni .btn-reg, .testa-azioni .btn-log { padding: .45rem .6rem; }
}
@media (max-width: 30rem) {
  .testa-azioni .btn-log { display: none; }
  .logo-testa { width: 82px; }
}

/* ── indice del blog ──────────────────────────────────────────────────────
 *
 * L'indice e' l'unica pagina piu' larga della colonna di lettura: le schede
 * hanno bisogno di stare affiancate, mentre il testo di un articolo no. Per
 * questo .schede annulla il max-width di .pagina invece di ereditarlo.
 *
 * La griglia e' auto-fill con un minimo in rem, non un numero fisso di
 * colonne: passa da tre a due a una da sola secondo lo spazio disponibile,
 * quindi non serve nessun media query per il telefono e non c'e' una soglia
 * sbagliata da scoprire su un dispositivo che non abbiamo.
 */
.pagina:has(.schede) { max-width: none; }

.schede {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.1rem;
  margin-top: 1.6rem;
}

.scheda {
  display: flex;
  flex-direction: column;
  background: var(--scheda);
  border: 1px solid var(--bordo);
  border-radius: .55rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s;
}
.scheda:hover, .scheda:focus-visible {
  border-color: var(--arancio);
  transform: translateY(-2px);
}

/* aspect-ratio invece di un'altezza fissa: l'immagine e' 1200x675 e la scheda
 * mantiene quel rapporto a qualsiasi larghezza, quindi la griglia non salta
 * mentre le immagini caricano. */
.scheda-media { aspect-ratio: 16 / 9; background: var(--scheda-2); }
.scheda-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.scheda-corpo { padding: 1rem 1.05rem 1.15rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }

.scheda-sez {
  align-self: flex-start;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--arancio);
  border: 1px solid var(--bordo);
  border-radius: .25rem;
  padding: .12rem .45rem;
}

.scheda-titolo { margin: 0; font-size: 1.06rem; line-height: 1.35; color: #fff; }
.scheda-testo { margin: 0; font-size: .92rem; color: var(--testo-tenue); line-height: 1.5; }
.scheda-data { margin-top: auto; font-size: .8rem; color: var(--testo-menu); }