/* =========================================================================
   mc-override.css — meilleurscasinos.net
   Famiglia di tema D: si carica SOPRA bootstrap.css, style.css e
   responsive.css, prima di layout-fix.css, su tutte le pagine, con il
   parametro di versione:
       <link href="/css/mc-override.css?v=2026101402" rel="stylesheet">

   Non tocca i fogli di base e non tocca il markup. I valori del sito
   stanno tutti in :root, in testa: fra due siti della famiglia cambia
   solo questo blocco.
   ========================================================================= */

:root{
  /* --- tavolozza, ricavata da style.css ---------------------------------- */
  --mc-primary:#6600cc;          /* viola del marchio */
  --mc-primary-dark:#4d0099;     /* viola scuro: hover e contorno di fuoco */
  --mc-primary-light:#e8d1ff;    /* viola chiaro: fondi tenui */
  --mc-accent:#dc0018;           /* rosso del tema (style.css): 7 a 1 su bianco */
  --mc-ambra:#ffb72b;            /* giallo della voce VIP */
  --mc-gold:#f2ba34;             /* oro delle stelle */
  --mc-trust:#1d7a46;            /* verde: conferme e fiducia */
  --mc-warn:#8a4b00;             /* ambra scura: avvertenze, 4,9:1 su bianco */

  --mc-ink:#231f20;              /* testo */
  --mc-muted:#565d68;            /* testo secondario, 5,9:1 su bianco */
  --mc-bg:#ffffff;
  --mc-surface:#f6f6f7;
  --mc-line:#e3e3e3;

  /* --- tipografia -------------------------------------------------------- */
  --mc-font:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mc-testo:16px;               /* corpo sul telefono */
  --mc-testo-ampio:17px;         /* corpo da 768 px */
  --mc-pavimento:14px;           /* niente di leggibile scende sotto */
  --mc-riga:1.7;
  --mc-battute:68ch;             /* lunghezza di riga leggibile */

  /* --- misure ------------------------------------------------------------ */
  --mc-radius:14px;
  --mc-radius-pill:24px;
  --mc-shadow:0 2px 10px rgba(35,31,32,.07);
  --mc-tocco:44px;               /* bersaglio minimo per il dito */
}

/* =========================================================================
   1. IL PAVIMENTO TIPOGRAFICO
   Nei fogli di base ci sono trentaquattro dichiarazioni sotto i 14 px:
   una a 9, tre a 10, tredici a 11, dieci a 12, sette a 13. Qui tutto
   quello che un lettore legge torna sopra il pavimento. Le etichette e i
   dati secchi delle schede restano dove sono, perché non sono prosa.
   ========================================================================= */

.casino-contant,
.casino-contant p,
.casino-contant li,
.casino-contant .text,
.casino-contant .text p,
.guide-text,
.guide-text p,
.guide-text li,
.overflow-text p,
.features-list li,
.key-features li{
  font-size:var(--mc-testo);
  line-height:var(--mc-riga);
}
@media (min-width:768px){
  .casino-contant,
  .casino-contant p,
  .casino-contant li,
  .casino-contant .text,
  .casino-contant .text p,
  .guide-text,
  .guide-text p,
  .guide-text li,
  .overflow-text p{font-size:var(--mc-testo-ampio)}
}

/* ---------- la colonna di lettura ----------------------------------------
   La prosa sta su una colonna di 68 battute. I riquadri e le avvertenze
   stanno sulla stessa misura, allargata di un respiro: un richiamo molto
   più largo del testo che interrompe non si legge come un richiamo, si
   legge come un'altra pagina. */
:root{--mc-colonna:76ch}

.guide-text > p,
.casino-contant .text > p,
.overflow-text > p{max-width:var(--mc-battute)}

/* un solo blocco di lettura invece di un limite per ogni elemento: così
   titoli, prosa e richiami condividono la stessa gabbia, e un elemento
   nuovo non nasce fuori misura perché nessuno ha aggiunto la sua riga */
.casino-contant .text{max-width:var(--mc-colonna)}
.mc-registro{max-width:none}

/* l'avvertenza di legge prende la misura dei richiami, non quella della
   prosa: la regola della colonna di lettura è più specifica e la
   restringeva a 68 battute del suo corpo, più piccolo. */
.casino-contant .text > p.mc-avvertenza,
.casino-footer p.mc-avvertenza{max-width:var(--mc-colonna)}

/* ---------- il respiro fra i paragrafi -----------------------------------
   Il tema lascia ai paragrafi un margine inferiore di pochi pixel: su una
   pagina di prosa lunga le righe si saldano e il lettore perde il segno. */
.casino-contant .text > p,
.guide-text > p{margin:0 0 1.15em}
.casino-contant .text > h2{margin:1.9em 0 .6em}
.casino-contant .text > h3{margin:1.6em 0 .5em}
.casino-contant .text > .mc-box{margin:1.6em 0}

/* Novantatré `h6` portano una frase intera: sono titoli, e un titolo non
   sta sotto il corpo che apre. Qui prendono la misura di un titolo di
   quarto livello e il peso che li distingue dalla prosa. */
.casino-contant h6,
.overflow-text h6,
.guide-text h6{
  font-size:var(--mc-testo);
  line-height:1.35;
  font-weight:700;
  color:var(--mc-ink);
  margin:1.4em 0 .5em;
}
@media (min-width:768px){
  .casino-contant h6,
  .overflow-text h6,
  .guide-text h6{font-size:18px}
}

/* i titoli non scendono mai sotto il pavimento, a nessuna larghezza */
h1,h2,h3,h4,h5,h6{font-size:max(var(--mc-pavimento),1em)}
h1{font-size:clamp(26px,4.2vw,38px);line-height:1.2}
h2{font-size:clamp(21px,3vw,28px);line-height:1.25}
h3{font-size:clamp(19px,2.4vw,23px);line-height:1.3}
.section-heading-1 h5{font-size:clamp(16px,2vw,19px);line-height:1.4}

/* didascalie, note e date: sopra il pavimento, non sotto */
figcaption,
.mc-firma,
.mc-nota,
small,
.bonus small{font-size:var(--mc-pavimento);line-height:1.55;color:var(--mc-muted)}

/* =========================================================================
   2. L'AVVERTENZA DI LEGGE HA UNA CLASSE SUA
   Quando una norma vuole un messaggio percepibile, quel messaggio non
   eredita la misura dal piede in cui sta. La classe è esclusa con :not()
   dalle regole che rimpiccioliscono le note, perché una regola più
   specifica scritta più in basso la riporterebbe sotto il pavimento
   senza che nessuno se ne accorga.
   ========================================================================= */

.mc-avvertenza{
  font-size:15px!important;
  line-height:1.6;
  font-weight:600;
  color:var(--mc-ink);
  background:#fff8ec;
  border:1px solid #e8c88a;
  border-left:4px solid var(--mc-warn);
  border-radius:10px;
  padding:12px 16px;
  margin:18px 0;
  max-width:none;
}
.mc-avvertenza strong{color:var(--mc-warn)}
.mc-avvertenza a{color:var(--mc-primary-dark);text-decoration:underline}
.casino-footer .text p:not(.mc-avvertenza){font-size:var(--mc-pavimento)}

/* l'età minima del mercato, accanto all'avvertenza */
.mc-eta{
  display:inline-block;
  font-size:var(--mc-pavimento);
  font-weight:700;
  color:#fff;
  background:var(--mc-ink);
  border-radius:4px;
  padding:2px 7px;
  margin-right:6px;
}

/* =========================================================================
   3. LA DIVULGAZIONE DEL RAPPORTO COMMERCIALE
   Sta sopra la lista, non in una nota in fondo: chi legge sa prima di
   leggere che il link segna un rapporto commerciale e non una graduatoria.
   ========================================================================= */

.mc-divulgazione{
  font-size:var(--mc-pavimento);
  line-height:1.6;
  color:var(--mc-muted);
  background:var(--mc-surface);
  border:1px solid var(--mc-line);
  border-radius:10px;
  padding:11px 15px;
  margin:0 0 18px;
}
.mc-divulgazione b{color:var(--mc-ink)}
/* la divulgazione sta fuori da .text: il suo link non prendeva il colore del sito */
.mc-divulgazione a{color:var(--mc-primary-dark);text-decoration:underline}
.mc-divulgazione a:hover{text-decoration:none}

/* =========================================================================
   4. I RIQUADRI DI RICHIAMO
   Quattro stati, con il colore portato a contrasto e un segno che non
   dipende dal colore, per chi non lo distingue.
   ========================================================================= */

.mc-box{
  border:1px solid var(--mc-line);
  border-left:4px solid var(--mc-muted);
  border-radius:10px;
  background:var(--mc-bg);
  padding:14px 18px;
  margin:18px 0;
  font-size:var(--mc-testo);
  line-height:1.65;
}
.mc-box > :first-child{margin-top:0}
.mc-box > :last-child{margin-bottom:0}
.mc-box .mc-box-t{display:block;font-weight:700;color:var(--mc-ink);margin-bottom:6px}
.mc-box .mc-box-t:before{margin-right:7px;font-weight:700}

.mc-box.is-info{border-left-color:var(--mc-primary);background:#faf5ff}
.mc-box.is-info .mc-box-t{color:var(--mc-primary-dark)}
.mc-box.is-info .mc-box-t:before{content:"\2139"}

.mc-box.is-attenzione{border-left-color:var(--mc-warn);background:#fff8ec}
.mc-box.is-attenzione .mc-box-t{color:var(--mc-warn)}
.mc-box.is-attenzione .mc-box-t:before{content:"\26A0"}

.mc-box.is-conferma{border-left-color:var(--mc-trust);background:#f2faf5}
.mc-box.is-conferma .mc-box-t{color:var(--mc-trust)}
.mc-box.is-conferma .mc-box-t:before{content:"\2713"}

.mc-box.is-mercato{border-left-color:var(--mc-accent);background:#fff5f7}
.mc-box.is-mercato .mc-box-t{color:#a1002d}
.mc-box.is-mercato .mc-box-t:before{content:"\25C6"}

/* =========================================================================
   5. LE SCHEDE SOLO INFORMATIVE
   Per l'opzione C a livello di scheda: il marchio resta visibile, il
   pulsante no. L'etichetta dice perché, invece di lasciare il lettore
   davanti a una scheda muta.
   ========================================================================= */

.btn-informativo{
  display:inline-block;
  font-size:var(--mc-pavimento);
  font-weight:600;
  color:var(--mc-muted);
  background:var(--mc-surface);
  border:1px dashed var(--mc-line);
  border-radius:var(--mc-radius-pill);
  padding:10px 16px;
  text-align:center;
  cursor:default;
}
.mc-informativo-nota{
  font-size:var(--mc-pavimento);
  color:var(--mc-muted);
  margin-top:6px;
  display:block;
}

/* =========================================================================
   6. LA TABELLA DI UN REGISTRO UFFICIALE
   Quarantotto righe per l'Alberta, ottantaquattro marchi per l'Ontario:
   la tabella scorre dentro il suo riquadro e l'intestazione resta visibile.
   ========================================================================= */

.mc-registro{
  border:1px solid var(--mc-line);
  border-radius:10px;
  margin:18px 0;
  max-width:100%;
}
/* scorre la tabella, non il contenitore: due meccanismi sovrapposti fanno
   sporgere il riquadro oltre la finestra senza che la pagina scorra, e il
   controllo del browser lo segnala come sforamento */
.mc-registro table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  width:100%;max-width:100%;
  border-collapse:collapse;margin:0;
}
/* niente larghezza minima: la tabella si stringe e le parole vanno a capo,
   invece di sporgere oltre la finestra */
.mc-registro th,.mc-registro td{word-break:normal;overflow-wrap:break-word;hyphens:auto}
.mc-registro th,
.mc-registro td{
  font-size:var(--mc-pavimento);
  line-height:1.5;
  text-align:left;
  padding:9px 12px;
  border-bottom:1px solid var(--mc-line);
  vertical-align:top;
}
.mc-registro thead th{
  position:sticky;top:0;
  background:var(--mc-surface);
  color:var(--mc-ink);
  font-weight:700;
  border-bottom:2px solid var(--mc-line);
}
.mc-registro tbody tr:last-child td{border-bottom:0}
.mc-registro caption{
  caption-side:top;
  font-size:var(--mc-pavimento);
  color:var(--mc-muted);
  text-align:left;
  padding:11px 12px;
  background:var(--mc-bg);
  border-bottom:1px solid var(--mc-line);
}

/* =========================================================================
   7. CONTRASTO E BERSAGLI
   ========================================================================= */

/* bianco su viola: 8,6 a 1. Il pulsante del tema resta com'è, ma il
   contorno di fuoco e lo stato premuto diventano visibili. */
.btn-primary,
.play-now .btn-primary{background-color:var(--mc-primary);border-color:var(--mc-primary-dark);color:#fff}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{background-color:var(--mc-primary-dark);border-color:var(--mc-primary-dark);color:#fff}

/* i link di prosa si distinguono dal testo anche senza il colore */
.casino-contant .text a,
.guide-text a{color:var(--mc-accent);text-decoration:underline}
.simple-link{color:var(--mc-primary);text-decoration:underline}
.casino-contant .text a:hover,
.guide-text a:hover{text-decoration:none}

/* ogni voce di menu e ogni pulsante sono raggiungibili con il dito */
.navbar-nav > li > a,
.btn,
.play-now a{min-height:var(--mc-tocco);display:inline-flex;align-items:center;justify-content:center}

/* il fuoco si vede, su qualunque fondo */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible{outline:3px solid var(--mc-primary-dark);outline-offset:2px;border-radius:3px}

/* chi ha chiesto meno movimento non lo riceve */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* =========================================================================
   8. IL VOTO A STELLE
   Le stelle sono un segno, non un dato: il valore sta scritto accanto,
   in testo che passa il contrasto. Senza quel numero il voto non esiste
   per chi legge con un lettore di schermo.
   ========================================================================= */

.casino-rating .first-star,
.casino-rating .second-star,
.casino-rating .third-star,
.casino-rating .fourth-star,
.casino-rating .fifth-star,
.rating-td .fa-star,
.rating-td .fa-star-half-o,
.rating-td .fa-star-o{color:var(--mc-gold)}
.mc-voto{font-size:var(--mc-pavimento);color:var(--mc-muted);margin-left:6px;white-space:nowrap}
.mc-voto b{color:var(--mc-ink);font-size:var(--mc-testo)}

/* =========================================================================
   9. IL PIÈ DI PAGINA
   È quello del tema (.casino-footer): le sue regole sono nella sezione 12.
   ========================================================================= */



/* il pulsante che riapre il banner del consenso: è una strada, non una nota */
.cc-reopen{
  background:none;border:0;padding:0;
  font-size:var(--mc-pavimento);
  color:var(--mc-primary-dark);
  text-decoration:underline;
  cursor:pointer;
}

/* =========================================================================
   10. LA FINESTRA DEI TERMINI DEL BONUS
   Il velo non intercetta i clic e non copre il banner del consenso; la
   finestra si chiude con il pulsante e con Esc.
   ========================================================================= */

.popup-overlay{pointer-events:none}
.popup-overlay.open,
.popup-overlay[aria-hidden="false"]{pointer-events:auto}
.popup-content{
  font-size:var(--mc-pavimento);
  line-height:1.6;
  max-height:84vh;overflow-y:auto;
  border-radius:var(--mc-radius);
}
.popup-content p,.popup-content em{font-size:var(--mc-pavimento)}
.popup-content strong{display:block;font-size:var(--mc-testo);color:var(--mc-ink);margin-bottom:6px}
.popup-content em{display:block;margin-top:10px;color:var(--mc-muted);font-style:normal}
.popup-content .close{min-width:var(--mc-tocco);min-height:var(--mc-tocco);display:flex;align-items:center;justify-content:center}

/* =========================================================================
   11. LA FIRMA E LE BRICIOLE
   ========================================================================= */

.mc-briciole{font-size:var(--mc-pavimento);color:var(--mc-muted);margin:0 0 14px}
.mc-briciole a{color:var(--mc-primary-dark)}
.mc-briciole ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.mc-briciole li:not(:last-child):after{content:"\2023";margin-left:8px;color:var(--mc-line)}
.mc-firma{
  display:block;
  border-top:1px solid var(--mc-line);
  margin-top:26px;padding-top:12px;
}

/* l'elenco di un registro di marche: più leggibile di una tabella a una colonna */
.mc-elenco-registro{
  list-style:none;margin:0;padding:12px 14px;
  columns:3;column-gap:28px;
}
.mc-elenco-registro li{
  font-size:var(--mc-pavimento);line-height:1.6;
  break-inside:avoid;padding:2px 0;
}
.mc-elenco-registro a{color:var(--mc-primary-dark);text-decoration:underline;font-weight:600}
@media (max-width:767px){.mc-elenco-registro{columns:1}}
@media (min-width:768px) and (max-width:991px){.mc-elenco-registro{columns:2}}


/* =========================================================================
   LE FIGURE
   Nome, barra e numero: non si disegnano, si scrivono in HTML. Un SVG ha una
   larghezza propria e rimpicciolisce il testo insieme alla geometria; qui il
   testo resta testo, va a capo da solo e sta alla sua misura a ogni larghezza.
   La larghezza della barra sta in una classe, perché `style-src 'self'` non
   ammette lo `style=` in linea. Centouno classi costano due kilobyte.
   ========================================================================= */

figure.vis{margin:22px 0;max-width:none}
.gr{border:1px solid var(--mc-line);border-radius:var(--mc-radius);padding:16px 18px;background:var(--mc-bg);box-sizing:border-box;max-width:100%;overflow:hidden}
.gr__asse{font-size:var(--mc-pavimento);color:var(--mc-muted);margin:0 0 12px}
.gr__riga{display:flex;align-items:center;gap:10px;margin:0 0 9px;max-width:100%;box-sizing:border-box}
.gr__riga:last-child{margin-bottom:0}
.gr__nome{flex:1 1 clamp(100px,26%,230px);max-width:100%;box-sizing:border-box;font-size:var(--mc-pavimento);line-height:1.4;color:var(--mc-ink)}
.gr__pista{flex:1 1 60px;min-width:0;height:17px;background:var(--mc-surface);border-radius:9px;overflow:hidden}
.gr__barra{display:block;height:100%;background:var(--mc-primary);border-radius:9px}
.gr__barra--debole{background:var(--mc-line)}
.gr__cifra{flex:0 1 auto;font-size:var(--mc-pavimento);font-weight:700;color:var(--mc-ink);white-space:nowrap;min-width:0;text-align:right}
figure.vis figcaption{font-size:var(--mc-pavimento);line-height:1.55;color:var(--mc-muted);margin-top:9px}

/* sul telefono il nome prende la sua riga e la barra resta piena */
@media (max-width:820px){
  .gr__riga{flex-wrap:wrap;gap:4px 10px}
  .gr__nome{flex:1 1 100%}
  .gr__pista{flex:1 1 auto}
}

/* le larghezze */
.gr-w-0{width:0%}
.gr-w-1{width:1%}
.gr-w-2{width:2%}
.gr-w-3{width:3%}
.gr-w-4{width:4%}
.gr-w-5{width:5%}
.gr-w-6{width:6%}
.gr-w-7{width:7%}
.gr-w-8{width:8%}
.gr-w-9{width:9%}
.gr-w-10{width:10%}
.gr-w-11{width:11%}
.gr-w-12{width:12%}
.gr-w-13{width:13%}
.gr-w-14{width:14%}
.gr-w-15{width:15%}
.gr-w-16{width:16%}
.gr-w-17{width:17%}
.gr-w-18{width:18%}
.gr-w-19{width:19%}
.gr-w-20{width:20%}
.gr-w-21{width:21%}
.gr-w-22{width:22%}
.gr-w-23{width:23%}
.gr-w-24{width:24%}
.gr-w-25{width:25%}
.gr-w-26{width:26%}
.gr-w-27{width:27%}
.gr-w-28{width:28%}
.gr-w-29{width:29%}
.gr-w-30{width:30%}
.gr-w-31{width:31%}
.gr-w-32{width:32%}
.gr-w-33{width:33%}
.gr-w-34{width:34%}
.gr-w-35{width:35%}
.gr-w-36{width:36%}
.gr-w-37{width:37%}
.gr-w-38{width:38%}
.gr-w-39{width:39%}
.gr-w-40{width:40%}
.gr-w-41{width:41%}
.gr-w-42{width:42%}
.gr-w-43{width:43%}
.gr-w-44{width:44%}
.gr-w-45{width:45%}
.gr-w-46{width:46%}
.gr-w-47{width:47%}
.gr-w-48{width:48%}
.gr-w-49{width:49%}
.gr-w-50{width:50%}
.gr-w-51{width:51%}
.gr-w-52{width:52%}
.gr-w-53{width:53%}
.gr-w-54{width:54%}
.gr-w-55{width:55%}
.gr-w-56{width:56%}
.gr-w-57{width:57%}
.gr-w-58{width:58%}
.gr-w-59{width:59%}
.gr-w-60{width:60%}
.gr-w-61{width:61%}
.gr-w-62{width:62%}
.gr-w-63{width:63%}
.gr-w-64{width:64%}
.gr-w-65{width:65%}
.gr-w-66{width:66%}
.gr-w-67{width:67%}
.gr-w-68{width:68%}
.gr-w-69{width:69%}
.gr-w-70{width:70%}
.gr-w-71{width:71%}
.gr-w-72{width:72%}
.gr-w-73{width:73%}
.gr-w-74{width:74%}
.gr-w-75{width:75%}
.gr-w-76{width:76%}
.gr-w-77{width:77%}
.gr-w-78{width:78%}
.gr-w-79{width:79%}
.gr-w-80{width:80%}
.gr-w-81{width:81%}
.gr-w-82{width:82%}
.gr-w-83{width:83%}
.gr-w-84{width:84%}
.gr-w-85{width:85%}
.gr-w-86{width:86%}
.gr-w-87{width:87%}
.gr-w-88{width:88%}
.gr-w-89{width:89%}
.gr-w-90{width:90%}
.gr-w-91{width:91%}
.gr-w-92{width:92%}
.gr-w-93{width:93%}
.gr-w-94{width:94%}
.gr-w-95{width:95%}
.gr-w-96{width:96%}
.gr-w-97{width:97%}
.gr-w-98{width:98%}
.gr-w-99{width:99%}
.gr-w-100{width:100%}

/* =========================================================================
   LE SCHEDE DELLE TRUFFE
   Immagine, nome, come funziona, perché non regge. L'immagine sta sopra
   il testo sul telefono e di fianco sullo schermo largo; non porta
   informazione, quindi il suo testo alternativo descrive la scena e la
   pagina resta comprensibile senza.
   ========================================================================= */

.ar-fiche{
  border:1px solid var(--mc-line);
  border-left:4px solid var(--mc-accent);
  border-radius:var(--mc-radius);
  background:var(--mc-bg);
  padding:18px 20px;
  margin:26px 0;
}
.ar-fiche > h3{margin:0 0 4px;font-size:clamp(18px,2.2vw,21px);line-height:1.3;color:var(--mc-ink)}
.ar-fiche__type{
  display:inline-block;font-size:var(--mc-pavimento);font-weight:700;
  color:#a1002d;background:#fff5f7;border:1px solid #f3c6d2;
  border-radius:11px;padding:2px 10px;margin:0 0 12px;
}
.ar-fiche__corps{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.ar-fiche__corps > figure{flex:0 0 clamp(200px,30%,260px);margin:0;min-width:0}
.ar-fiche__corps > figure img{width:100%;height:auto;border-radius:10px;display:block;border:1px solid var(--mc-line)}
.ar-fiche__corps > figure figcaption{font-size:var(--mc-pavimento);color:var(--mc-muted);line-height:1.5;margin-top:6px}
.ar-fiche__texte{flex:1 1 300px;min-width:0}
.ar-fiche__texte > p{margin:0 0 .9em;max-width:none}
.ar-fiche__texte > p:last-child{margin-bottom:0}
.ar-fiche__texte b{color:var(--mc-ink)}
@media (max-width:600px){
  .ar-fiche__corps{flex-direction:column}
  .ar-fiche__corps > figure{flex:1 1 auto;width:100%;max-width:420px;align-self:center}
}

/* l'indice delle quattro pagine */
.ar-grille{display:flex;flex-wrap:wrap;gap:16px;margin:22px 0}
.ar-grille > a{
  flex:1 1 260px;min-width:0;text-decoration:none;
  border:1px solid var(--mc-line);border-radius:var(--mc-radius);
  padding:16px 18px;background:var(--mc-bg);
  transition:box-shadow .2s,transform .2s;
}
.ar-grille > a:hover{transform:translateY(-2px);box-shadow:var(--mc-shadow)}
.ar-grille b{display:block;color:var(--mc-primary-dark);font-size:var(--mc-testo);margin-bottom:5px}
.ar-grille span{display:block;color:var(--mc-muted);font-size:var(--mc-pavimento);line-height:1.55}

/* Targa del quadro regolamentare nelle schede dei marchi: prende il posto
   della cifra del bonus, che per i marchi Casino Rewards non è verificata
   (registro, 12-ott-2026: non pubblicare un importo non visto sulla landing). */
.bnpr-cadre{background:var(--mc-surface,#f6f6f7);border-radius:10px;padding:9px 14px;font-size:15px;font-weight:600;color:var(--mc-ink,#231f20);line-height:1.35}
.bnpr-cadre small{display:block;font-size:13px;font-weight:400;color:var(--mc-muted,#565d68);margin-top:3px}
.bnpr-province{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#fff;background:#1d7a46;border-radius:11px;padding:3px 9px;margin-right:4px}
.bnpr-province.is-offshore{background:#565d68}

/* Tabella «En bref» in testa alle recensioni */
.mc-bref{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.mc-bref caption{text-align:left;font-weight:700;font-size:17px;color:var(--mc-ink);padding:0 0 8px}
.mc-bref th,.mc-bref td{border:1px solid var(--mc-line,#e6e6e8);padding:8px 12px;text-align:left;vertical-align:top;line-height:1.45}
.mc-bref th{width:34%;background:var(--mc-surface);font-weight:600;color:var(--mc-ink)}
@media (max-width:560px){.mc-bref th{width:44%}}

/* =========================================================================
   12. IL TEMA DEL SITO: INTESTAZIONE, MENU, PIÈ DI PAGINA, NOS FAVORIS
   L'intestazione e il piè di pagina sono quelli di style.css, con le sue
   classi: logo a sinistra, voci a icona, VIP in giallo, logo grigio nel
   piede. Qui c'è solo quello che il tema non aveva: le tendine, il menu sul
   telefono senza jQuery, il contrasto, la banda «Nos favoris» con gli
   operatori e la colonna laterale.
   ========================================================================= */

/* le voci restano blocchi con l'icona sopra l'etichetta: la regola dei
   bersagli (sezione 7) le faceva diventare flex */
.casino-header .navbar-nav > li > a{display:block;min-height:0}
.casino-header .navbar-brand img{display:block;width:213px;max-width:100%;height:auto}
.casino-header .nav li a i{line-height:35px}
.casino-header .nav li a span{display:block}

/* VIP: il giallo del tema resta, la scritta passa al nero: il bianco sul
   giallo sta a 1,7 a 1. Al passaggio il tema riempie di rosso, e lì il
   bianco torna. */
.casino-header .nav li.vip-area > a,
.casino-header .nav li.vip-area > a i{color:#231f20}
.casino-header .nav li.vip-area > a:hover,
.casino-header .nav li.vip-area > a:focus,
.casino-header .nav li.vip-area > a:hover i,
.casino-header .nav li.vip-area > a:focus i{color:#fff}

/* chi ha chiesto meno movimento non vede il riempimento animato del tema:
   il rosso arriva subito, altrimenti il bianco resterebbe sul bianco */
@media (prefers-reduced-motion:reduce){
  .casino-header .nav > li > a:hover,
  .casino-header .nav > li > a:focus{background:var(--mc-accent);color:#fff}
}

/* la freccia delle voci con tendina */
.casino-header .nav > li.dropdown > a span:after{
  content:"\f107";font-family:"FontAwesome";font-weight:normal;margin-left:6px}

/* le tendine */
.casino-header .nav > li.dropdown{position:relative}
.casino-header .nav .dropdown-menu{
  min-width:240px;padding:6px 0;margin:0;
  border:1px solid #e3e3e3;border-top:3px solid var(--mc-accent);
  border-radius:0 0 10px 10px;box-shadow:0 10px 22px rgba(35,31,32,.14)}
.casino-header .nav .dropdown-menu li{float:none;width:auto;border:0}
.casino-header .nav .dropdown-menu li a{
  float:none;display:block;width:auto;min-width:0;
  padding:9px 18px;text-align:left;text-transform:none;
  font-size:15px;font-weight:600;line-height:1.4;
  color:#313131;background:#fff;white-space:normal;transition:none}
.casino-header .nav .dropdown-menu li a:after{content:none}
.casino-header .nav .dropdown-menu li a:hover,
.casino-header .nav .dropdown-menu li a:focus{background:#fafafa;color:var(--mc-accent)}
@media (min-width:768px){
  .casino-header .nav > li.dropdown:hover > .dropdown-menu,
  .casino-header .nav > li.dropdown:focus-within > .dropdown-menu{display:block}
}

/* il menu sul telefono: si apre con il pulsante rosso del tema */
.casino-header .navbar-toggle{cursor:pointer}
@media (max-width:767px){
  .casino-header{position:relative;z-index:990}
  header .navbar-collapse{
    max-width:290px;width:290px;z-index:990;background:#fff;
    border:1px solid #e3e3e3;box-shadow:0 12px 26px rgba(35,31,32,.18);
    max-height:calc(100vh - 110px);overflow-y:auto}
  .casino-header .nav li a{min-width:0}
  .casino-header .nav .dropdown-menu{
    position:static;float:none;display:none;min-width:0;
    box-shadow:none;border:0;border-radius:0;padding:0 0 6px;background:#fff}
  .casino-header .nav li.dropdown.open > .dropdown-menu{display:block}
  .casino-header .nav li.dropdown.open > a,
  .casino-header .nav li.dropdown.open > a i{background:var(--mc-accent);color:#fff}
  .casino-header .nav .dropdown-menu li{display:block}
  html:not(.js) .casino-header .nav .dropdown-menu{display:block}
  html:not(.js) header .navbar-collapse.collapse{display:block;position:static;max-width:none;width:auto;box-shadow:none}
  .casino-header .nav .dropdown-menu li a{padding:8px 12px 8px 48px;font-size:15px}
}

/* ---------- la banda «Nos favoris» -------------------------------------
   È la banda viola del tema, prima del piè di pagina, con tre operatori
   invece del vecchio banner. Il fondo pieno sotto l'immagine serve al
   contrasto del testo bianco, anche dove l'immagine non arriva. */
.newsletter-wrap.mc-favoris{background-color:#3d007a;padding:44px 0 40px;margin-top:10px}
.newsletter-wrap.mc-favoris .container{position:relative;z-index:1}
.newsletter-wrap.mc-favoris .text{float:none;text-align:left;margin:0 0 18px}
.newsletter-wrap.mc-favoris .text p.mc-favoris__t{color:#fff;font-weight:800;font-size:clamp(22px,2.6vw,28px);line-height:1.2;margin:0 0 6px}
.newsletter-wrap.mc-favoris .text p{color:#fff;font-size:15px;line-height:1.55;margin:0;float:none}
.mc-favoris__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mc-favoris__lista > li{background:#fff;border-radius:15px;padding:14px 16px 16px;text-align:center;display:flex;flex-direction:column;gap:8px;min-width:0}
.mc-favoris__logo{display:block}
.mc-favoris__logo img{display:block;width:100%;max-width:200px;height:auto;margin:0 auto}
.mc-favoris__nome{font-weight:800;font-size:16px;line-height:1.3;color:#231f20;margin:0}
.mc-favoris__licenza{font-size:14px;line-height:1.4;color:#565d68;margin:0}
.mc-favoris__lista .btn{width:100%;font-size:16px;margin-top:auto;display:flex}
.newsletter-wrap.mc-favoris .mc-favoris__nota{color:#fff;font-size:14px;line-height:1.5;margin:14px 0 0;float:none}
@media (max-width:767px){.mc-favoris__lista{grid-template-columns:1fr}}

/* ---------- la colonna laterale ----------------------------------------
   Sullo schermo largo la prosa sta su 76 battute e a destra restava un
   vuoto: lì vanno i tre operatori della pagina, fermi mentre si legge.
   Sotto i 992 px la colonna sparisce: c'è la banda in fondo. */
.mc-colonne{display:flex;gap:44px;align-items:flex-start;justify-content:space-between}
.mc-colonne > .text{flex:1 1 0;min-width:0;width:auto;float:none}
.mc-laterale{flex:0 0 300px;width:300px;position:sticky;top:18px;margin-bottom:43px}
.mc-laterale__box{border:1px solid #e3e3e3;border-radius:15px;background:#fff;padding:16px 16px 14px}
.casino-contant .mc-laterale__t{font-weight:800;font-size:17px;line-height:1.3;margin:0 0 10px;color:#231f20}
.mc-laterale ol{list-style:none;margin:0;padding:0}
.mc-laterale ol > li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:6px 12px;align-items:center;padding:12px 0;border-top:1px solid #e3e3e3}
.mc-laterale ol > li:first-child{border-top:0;padding-top:2px}
.mc-laterale__logo img{display:block;width:96px;height:auto;border-radius:8px;border:1px solid #e3e3e3}
.mc-laterale__nome{display:block;font-weight:800;font-size:15px;line-height:1.3;color:#231f20}
.mc-laterale__licenza{display:block;font-size:14px;line-height:1.35;color:#565d68}
.mc-laterale ol > li .btn{grid-column:1 / -1;width:100%;font-size:15px;padding:10px 12px;display:flex}
.casino-contant .mc-laterale__nota{font-size:14px;line-height:1.45;color:#565d68;margin:10px 0 6px}
.mc-laterale .simple-link{float:none;display:inline-block;width:auto;font-size:14px}
@media (max-width:991px){.mc-colonne{display:block}.mc-laterale{display:none}}

/* ---------- il piè di pagina del tema ----------------------------------
   Logo grigio al centro, la riga dei link con le stanghette, i testi
   grigi. Il grigio del tema (rgba 0,0,0,.3) stava a 2,1 a 1: qui passa a
   un grigio che si legge. */
.casino-footer{border-top:1px solid #e3e3e3;padding:48px 0 36px;background:#fff}
.casino-footer .footer-logo{margin-bottom:22px}
.casino-footer .footer-logo a{margin-bottom:12px}
.casino-footer .footer-logo img{display:block;width:213px;max-width:100%;height:auto}
.casino-footer .footer-logo p{font-size:14px;color:#231f20}
.casino-footer .ft-nav{margin:0 0 16px}
.casino-footer .ft-nav li{line-height:2}
.casino-footer .ft-nav li a{font-size:14px;color:#2b2b2b;text-transform:none}
.casino-footer .ft-nav.mc-ft-mercati li a{font-weight:600;color:#3d434c}
.casino-footer .ft-nav.mc-ft-mercati li:first-child{border-width:0 1px 0 0;font-size:14px;font-weight:700;color:#3d434c}
.casino-footer .text{float:none;max-width:900px;margin:0 auto 6px}
.casino-footer .text p{float:none;font-size:14px;line-height:1.65;font-weight:600;color:#5b6370;margin:0 0 14px}
.casino-footer .text p strong{color:#3d434c}
.casino-footer .text a{color:var(--mc-accent);text-decoration:underline}
.casino-footer .mc-aiuti{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px}
.casino-footer .mc-aiuti li{font-size:14px;line-height:1.6;font-weight:600;color:#3d434c}
.casino-footer .mc-avvertenza{text-align:left;margin:6px auto 18px}
.casino-footer .brand-list{margin:4px 0 12px}
.casino-footer .brand-list img{display:inline-block;height:39px;width:auto}
.casino-footer .cc-reopen{font-size:14px;color:var(--mc-primary)}
@media (max-width:767px){
  .casino-footer .ft-nav li{padding:0 10px}
}

/* =========================================================================
   13. LE SCHEDE DEL TEMA (.hr-trc-single)
   Le schede a tre per riga del vecchio sito: logo grande sopra la linea
   grigia con la freccia, poi i dati, poi il pulsante viola. Le colonne
   prendono la stessa altezza, e il pulsante sta sempre in fondo.
   ========================================================================= */
.mc-schede{clear:both;float:left;width:100%;margin:0 0 26px}
.mc-schede > h2{margin:.4em 0 .5em}
.mc-schede > p{max-width:var(--mc-battute)}
.mc-griglia{display:flex;flex-wrap:wrap;margin-top:8px}
.mc-griglia > [class*="col-"]{float:none;display:flex;margin-bottom:24px}
.mc-griglia .hr-trc-single{display:flex;flex-direction:column;margin-bottom:0;position:relative;overflow:hidden}
.mc-griglia .hr-trc-single:hover{box-shadow:0 8px 20px rgba(35,31,32,.10)}
.hr-trc-single .casino-name{padding:26px 20px 30px;text-align:center}
.hr-trc-single .casino-name a{display:block;padding:0;margin:0}
.hr-trc-single .casino-name img{float:none;display:block;width:auto;max-width:220px;height:auto;max-height:110px;margin:0 auto}
.hr-trc-single.logo-scuro .casino-name{background:#14233a}
.mc-griglia .hr-trc-content{flex:1 1 auto;display:flex;flex-direction:column;float:none;padding:18px 20px 20px}
.mc-griglia .play-now{float:none;margin-top:auto}
.casino-contant .mc-scheda-nome{font-weight:800;font-size:19px;line-height:1.3;color:#231f20;margin:4px 0 10px;text-align:center}
.casino-contant .mc-scheda-cadre{text-align:center;margin:0 0 16px}
.casino-contant .mc-scheda-cadre i{color:var(--mc-accent);margin-right:4px}
.casino-contant .mc-scheda-nota{font-size:14px;line-height:1.45;color:#565d68;margin:10px 0 0;text-align:center}
.casino-contant .mc-schede-nota{font-size:14px;line-height:1.55;color:#565d68;max-width:none;margin:0}
.mc-griglia .play-now .btn{display:flex;flex-direction:column;justify-content:center;min-height:52px}
.mc-griglia .play-now .btn span{opacity:.85;font-size:13px}
.mc-rango{position:absolute;top:12px;left:12px;z-index:1;width:34px;height:34px;line-height:34px;border-radius:50%;
  background:var(--mc-accent);color:#fff;font-weight:800;font-size:15px;text-align:center}

/* la classifica: la barra del tema, la testa della scheda, le spunte */
.mc-classifica{clear:both;float:left;width:100%;margin:4px 0 30px}
.mc-classifica > h2{margin:.2em 0 .45em}
.mc-classifica > p,.mc-classifica > .mc-box{max-width:var(--mc-colonna)}
.mc-classifica > h3{margin:1.4em 0 .4em}
.table-heading.mc-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;
  border-top:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;padding:12px 0;margin:6px 0 18px;float:none}
.casino-contant .mc-barra-t{margin:0;font-size:20px;font-weight:800;line-height:1.3;color:#231f20}
.mc-barra-t em{color:var(--mc-accent);margin-right:10px}
.table-heading.mc-barra ul{float:none;display:flex;flex-wrap:wrap;gap:4px 18px}
.table-heading.mc-barra ul li{margin-left:0;color:#565d68;font-size:13px}
.table-heading.mc-barra ul li em{color:var(--mc-accent)}
.casino-contant .mc-scheda-testa{display:flex;align-items:baseline;justify-content:center;gap:12px;
  border-bottom:1px solid #e3e3e3;padding-bottom:10px;margin-bottom:12px;float:none;text-align:center}
.casino-contant .mc-scheda-testa .mc-scheda-nome{margin:0}
.hr-trc-content .mc-scheda-testa .simple-link{float:none;width:auto;font-size:14px}
.mc-scheda-cadre .bnpr-province{display:inline-block;margin-top:6px}
.mc-griglia .key-features{float:none;margin:0 0 16px}
.mc-griglia .key-features .features-list{padding-left:0}
.mc-griglia .key-features .features-list li{float:none;width:auto;font-size:15px;font-weight:700;margin-bottom:6px}
.mc-griglia .key-features .features-list li:before{margin-right:8px}

/* le chiamate all'azione delle revue */
.mc-cta-revue{display:flex;align-items:center;gap:18px 24px;flex-wrap:wrap;
  border:1px solid #e3e3e3;border-radius:15px;background:#fff;padding:16px 20px;margin:0 0 26px;max-width:none}
.mc-cta-revue .mc-cta-logo{flex:0 0 auto;display:block;padding:0;margin:0}
.mc-cta-revue .mc-cta-logo img{display:block;width:170px;height:auto;border-radius:10px}
.mc-cta-revue.logo-scuro .mc-cta-logo{background:#14233a;border-radius:10px}
.mc-cta-corpo{flex:1 1 220px;min-width:0}
.casino-contant .mc-cta-nome{font-weight:800;font-size:20px;line-height:1.25;margin:0 0 8px;color:#231f20}
.mc-cta-revue .mc-scheda-cadre{text-align:left;margin:0}
.mc-cta-azione{flex:0 1 260px;float:none;width:auto;min-width:220px}
.mc-cta-azione .btn{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:54px;font-size:17px}
.mc-cta-azione .btn span{opacity:.85;font-size:13px}
.casino-contant .mc-cta-linea{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:6px 0 24px}
.mc-cta-linea .btn{display:inline-flex;padding:12px 22px;font-size:16px}
.casino-contant .mc-cta-linea > span{font-size:14px;color:#565d68}
@media (max-width:600px){
  .mc-cta-revue{flex-direction:column;align-items:stretch;text-align:center}
  .mc-cta-revue > *,
  .mc-cta-alt .mc-cta-azione{flex:0 0 auto;min-width:0}
  .mc-cta-revue .mc-cta-logo img{margin:0 auto}
  .mc-cta-revue .mc-scheda-cadre{text-align:center}
  .mc-cta-azione{flex:1 1 auto}
}

/* dentro .text il tema e la sezione 7 colorano e sottolineano ogni link, e
   la regola del corpo ingrandisce ogni paragrafo: i pulsanti e le righe
   delle schede tornano alla loro misura */
.casino-contant .text .btn,
.casino-contant .text .btn:hover,
.casino-contant .text .btn:focus{color:#fff;text-decoration:none}
.casino-contant .text .simple-link{color:var(--mc-primary)}
.casino-contant .text p.mc-cta-nome{font-size:20px;line-height:1.25;margin:0 0 8px;font-weight:800}
.casino-contant .text p.mc-scheda-nome{font-size:19px;line-height:1.3}
.casino-contant .text p.mc-scheda-cadre{font-size:15px;line-height:1.35}
.casino-contant .text p.mc-scheda-nota{font-size:14px;line-height:1.45}
.casino-contant .text .mc-cta-linea > span{font-size:14px}
.casino-contant .text .mc-griglia .key-features .features-list li{font-size:15px;line-height:1.5}
.casino-contant .text .mc-griglia{margin-left:-15px;margin-right:-15px}

/* le alternative in fondo alle revue: righe compatte, una sotto l'altra */
.mc-cta-alt{padding:12px 16px;margin:0 0 14px;gap:12px 20px}
.mc-cta-alt .mc-cta-logo img{width:130px}
.casino-contant .text .mc-cta-alt p.mc-cta-nome{font-size:18px;margin:0 0 6px}
.mc-cta-alt .simple-link{display:inline-block;margin-top:6px}
.mc-cta-alt .mc-cta-azione{flex-basis:220px}
@media (max-width:600px){
  .mc-cta-revue.mc-cta-alt > *,
  .mc-cta-revue.mc-cta-alt .mc-cta-azione{flex:0 0 auto}
}

/* =========================================================================
   14. I RIQUADRI DELLE PAGINE INFORMATIVE
   «Un opérateur sérieux ?» a metà pagina, tre casinò verificati in fondo.
   Il bordo rosso a sinistra li separa dalla prosa senza farli sembrare
   un'avvertenza.
   ========================================================================= */
.mc-riquadro,.mc-mini{clear:both;border-left:4px solid var(--mc-accent);background:#fafafa;
  border-radius:0 15px 15px 0;padding:16px 18px 6px;margin:1.8em 0}
.casino-contant .text p.mc-riquadro-t{font-weight:800;font-size:20px;line-height:1.3;color:#231f20;margin:0 0 4px}
.casino-contant .text p.mc-riquadro-frase{font-size:15px;line-height:1.55;color:#3d434c;margin:0 0 14px;max-width:none}
.mc-riquadro .mc-cta-revue,.mc-mini .mc-cta-revue{margin-bottom:12px}

/* le catture di gioco delle due revue di machine a sous */
.mc-figura{margin:4px 0 22px}
.mc-figura img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid #e3e3e3}
.casino-contant .mc-figura figcaption{font-size:14px;line-height:1.5;color:#565d68;margin-top:8px}
.mc-bref caption{caption-side:top}

/* la scritta per i lettori di schermo del pulsante del menu: bianca sul rosso */
.casino-header .navbar-toggle .sr-only{color:#fff}