/* =============================================================
   theme-bjc.css — il tema di bestjackpotcasino.com
   Un foglio solo, nessuna libreria, JavaScript nativo. I caratteri li serve
   il sito (css/caratteri.css, caricato prima di questo foglio).
   Tavolozza: oro dei montepremi su indaco profondo, inchiostro quasi nero.
   Ogni coppia testo-fondo e' risolta sul contrasto, non scelta a occhio
   (09_TEMI_E_FOGLI_DI_STILE.md, sezione 4-bis): l'inchiostro sta a 18,6:1 sul
   bianco, l'indaco a 11,4:1 nei due versi, l'oro porta solo testo inchiostro
   (10,0:1) e mai testo bianco (1,9:1), il grigio attenuato a 6,0:1.
   Pavimento tipografico: 14 px per tutto quello che un lettore legge.
   ============================================================= */

:root{
  /* inchiostro e fondi */
  --ink:#11131a; --ink-2:#2f3442; --muted:#5b6472;
  --paper:#ffffff; --bg:#f4f5f9; --line:#e3e6ef; --line-2:#cfd4e2;
  /* marchio */
  --brand:#312e81; --brand-2:#4338ca; --brand-soft:#eef0fb; --brand-ink:#272463;
  /* oro: il colore dei montepremi e dei pulsanti. Sopra ci va solo l'inchiostro */
  --gold:#f5b324; --gold-dark:#d9970f; --gold-soft:#fff8e6; --gold-line:#f0d9a0;
  /* stati */
  --mint:#0c7d46; --mint-soft:#e6f6ee; --mint-line:#bfe3cf;
  --danger:#d42020; --danger-soft:#fdecea; --danger-line:#f6c9c4;
  --warn:#8a5a00; --warn-soft:#fff4df; --warn-line:#f3d9a8;
  /* misure */
  --wrap:1200px; --col:300px;
  --r:14px; --r-sm:10px; --r-lg:22px; --pill:999px;
  --sh:0 1px 3px rgba(17,19,26,.06),0 6px 18px rgba(17,19,26,.05);
  --sh-lg:0 12px 34px rgba(17,19,26,.12);
  --display:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --num:'Space Grotesk',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
@media(min-width:961px){body{font-size:17px}}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--brand-2)}
h1,h2,h3,h4,h5,h6{font-family:var(--display);line-height:1.18;margin:0;letter-spacing:-.015em;
  overflow-wrap:break-word}
p,li,td,th,dd,dt{overflow-wrap:break-word}
hr{border:0;border-top:1px solid var(--line);margin:2em 0}
:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.bj-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.bj-skip{position:absolute;left:-9999px}
.bj-skip:focus{left:12px;top:12px;z-index:200;background:var(--paper);padding:10px 16px;border-radius:var(--r-sm);box-shadow:var(--sh-lg)}
.bj-eyebrow{font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand)}
.bj-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- pulsanti ---------- */
.bj-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.2;
  background:var(--gold);color:var(--ink);padding:13px 24px;min-height:46px;
  border:0;border-radius:var(--pill);cursor:pointer;text-decoration:none;text-align:center;
  box-shadow:0 2px 0 var(--gold-dark);transition:background .15s,transform .15s,box-shadow .15s}
.bj-btn:hover{background:var(--gold-dark);color:var(--ink);transform:translateY(-1px);box-shadow:0 3px 0 #b87e07}
.bj-btn--block{display:flex;width:100%}
.bj-btn--sm{font-size:.92rem;padding:10px 18px;min-height:44px}
.bj-btn--lg{font-size:1.14rem;padding:17px 34px;min-height:56px}
.bj-btn--ghost{background:transparent;color:var(--brand);border:1.5px solid var(--line-2);box-shadow:none}
.bj-btn--ghost:hover{background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand);box-shadow:none}

/* ---------- intestazione ---------- */
.bj-top{position:sticky;top:0;z-index:60;background:var(--brand);color:#fff;
  box-shadow:0 2px 14px rgba(17,19,26,.18)}
.bj-top .bj-wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.bj-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;
  font-size:1.05rem;color:#fff;text-decoration:none;letter-spacing:-.02em;flex-shrink:0}
.bj-brand img{height:36px;width:auto}
.bj-brand .bj-brand-t{white-space:nowrap}
.bj-brand .bj-brand-t b{color:var(--gold)}
.bj-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.bj-nav > li{position:relative;list-style:none}
.bj-nav ul{list-style:none;margin:0;padding:0}
.bj-nav{list-style:none;margin:0;padding:0}
.bj-nav > li > a,.bj-nav > li > button{display:flex;align-items:center;gap:6px;min-height:44px;
  padding:0 13px;color:#fff;font-size:.95rem;font-family:var(--body);font-weight:500;
  text-decoration:none;background:none;border:0;cursor:pointer;border-radius:var(--r-sm)}
.bj-nav > li > a:hover,.bj-nav > li > button:hover,.bj-nav > li.open > button{background:rgba(255,255,255,.14);color:#fff}
.bj-nav .bj-sub{position:absolute;top:100%;left:0;min-width:248px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);padding:8px;
  display:none;z-index:70}
.bj-nav li.open > .bj-sub{display:block}
.bj-nav .bj-sub a{display:block;padding:9px 12px;min-height:40px;color:var(--ink-2);font-size:.93rem;
  text-decoration:none;border-radius:var(--r-sm)}
.bj-nav .bj-sub a:hover{background:var(--brand-soft);color:var(--brand-ink)}
.bj-nav .bj-caret{font-size:.7rem;opacity:.85}
.bj-burger{display:none;margin-left:auto;background:rgba(255,255,255,.14);border:0;color:#fff;
  min-width:46px;min-height:44px;border-radius:var(--r-sm);font-size:1.3rem;cursor:pointer;line-height:1}
.js .bj-nav{display:flex}

/* ---------- briciole, testa di pagina, firma ---------- */
.bj-crumb{font-size:.88rem;color:var(--muted);padding:16px 0 0}
.bj-crumb a{color:var(--muted)}
.bj-crumb a:hover{color:var(--brand)}
.bj-head{padding:14px 0 6px}
.bj-head h1{font-size:clamp(1.85rem,4.1vw,2.85rem);font-weight:700;margin:.18em 0 .3em}
.bj-head .bj-lead{font-size:1.1rem;color:var(--ink-2);margin:0;max-width:66ch}
.bj-keyart{margin:18px 0 0;max-width:320px}
.bj-keyart img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
.bj-marchi{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;
  background:#1b2030;border-radius:10px;padding:18px 20px;margin:22px 0}
.bj-marchi img{height:44px;width:auto;max-width:100%;object-fit:contain}
.bj-marchi--tessere{gap:14px 16px;justify-content:flex-start}
.bj-marchi--tessere img{height:104px}
@media (max-width:420px){.bj-marchi--tessere img{height:84px}}
.bj-byline{font-size:.9rem;color:var(--muted);margin:14px 0 0;
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.bj-byline b{color:var(--ink-2);font-family:var(--display);font-weight:600}
.bj-byline .bj-age{display:inline-flex;align-items:center;background:var(--ink);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.82rem;padding:3px 9px;border-radius:6px}

/* ---------- impaginazione a due colonne ---------- */
.bj-main{padding:0 0 10px}
.bj-cols{display:grid;grid-template-columns:minmax(0,1fr) var(--col);gap:38px;align-items:start}
.bj-content{min-width:0}
/* Una pagina senza colonna (mercati, legali) centra la misura invece di
   lasciare un terzo di schermo vuoto a destra. */
.bj-main > .bj-wrap > .bj-content{max-width:900px;margin-left:auto;margin-right:auto}
@media(max-width:991px){
  .bj-cols{grid-template-columns:minmax(0,1fr);gap:0}
  .bj-side{display:none}
}

/* ---------- prosa ---------- */
.bj-post > p,.bj-post > ul,.bj-post > ol,.bj-post > dl{max-width:76ch}
.bj-post h2{font-size:clamp(1.42rem,2.6vw,1.78rem);font-weight:700;margin:1.9em 0 .45em;
  padding-left:13px;border-left:4px solid var(--gold)}
.bj-post h2:first-child{margin-top:1em}
.bj-post h3{font-size:1.18rem;font-weight:600;margin:1.5em 0 .35em}
.bj-post h4{font-size:1.02rem;font-weight:600;margin:1.3em 0 .3em;color:var(--ink-2)}
.bj-post p{margin:.75em 0}
.bj-post ul,.bj-post ol{padding-left:1.35em;margin:.7em 0}
.bj-post li{margin:.45em 0}
.bj-post blockquote{margin:1.3em 0;padding:14px 20px;border-left:4px solid var(--brand);
  background:var(--brand-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink-2)}
.bj-post blockquote p:first-child{margin-top:0}
.bj-post blockquote p:last-child{margin-bottom:0}
.bj-post dl{margin:.8em 0}
.bj-post dt{font-family:var(--display);font-weight:600;margin-top:.8em}
.bj-post dd{margin:.15em 0 0 1.2em;color:var(--ink-2)}

/* ---------- tabelle ---------- */
.bj-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.3em 0;border:1px solid var(--line);
  border-radius:var(--r);background:var(--paper)}
.bj-t{width:100%;border-collapse:collapse;font-size:.96rem;min-width:520px}
.bj-t caption{text-align:left;padding:14px 16px 0;font-size:.9rem;color:var(--muted)}
.bj-t th,.bj-t td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.bj-t thead th{background:var(--brand);color:#fff;font-family:var(--display);font-weight:600;
  font-size:.88rem;letter-spacing:.02em;border-bottom:0;position:sticky;top:0}
.bj-t tbody tr:nth-child(even){background:#fbfcfe}
.bj-t tbody tr:last-child td{border-bottom:0}
.bj-t .n{text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums;white-space:nowrap}
.bj-t .bj-t-brand{font-family:var(--display);font-weight:600}
.bj-facts{width:100%;border-collapse:collapse;margin:1em 0}
.bj-facts th,.bj-facts td{border:1px solid var(--line);padding:10px 14px;text-align:left;font-size:.96rem}
.bj-facts th{background:#f8f9fc;width:38%;font-family:var(--display);font-weight:600}

/* ---------- il numero grosso: il montepremi ---------- */
.bj-amount{font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;line-height:1;color:var(--ink)}
.bj-amount--xl{font-size:clamp(2.3rem,6vw,3.6rem)}
.bj-amount--l{font-size:clamp(1.7rem,3.6vw,2.3rem)}
.bj-amount .cur{font-size:.55em;vertical-align:.28em;color:var(--muted);margin-right:.1em}

/* ---------- la scala dei livelli (Mini · Minor · Major · Mega) ---------- */
.bj-tiers{display:grid;gap:10px;margin:1.4em 0}
.bj-tier{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--line-2);
  border-radius:var(--r-sm);padding:13px 16px}
.bj-tier .lv{font-family:var(--display);font-weight:700;font-size:.98rem}
.bj-tier .ds{font-size:.92rem;color:var(--muted);min-width:0}
.bj-tier .sd{font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap;font-size:1.02rem}
.bj-tier--mini{border-left-color:#9aa3b5}
.bj-tier--minor{border-left-color:#6a7488}
.bj-tier--major{border-left-color:var(--brand-2)}
.bj-tier--mega{border-left-color:var(--gold);background:var(--gold-soft)}
.bj-tier--mega .sd{color:var(--ink)}
/* Sul telefono la scala dei livelli si impila: il nome del livello e la cifra
   stanno su una riga, la descrizione sotto. A tre colonne, con la cifra che non
   si spezza, una rete con nomi lunghi sbordava fino a 472 px su una finestra di
   320 (wowpot, netent-jackpots, europalace-review). */
@media (max-width:560px){
  .bj-tier{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:11px 13px}
  .bj-tier .lv{grid-column:1}
  /* una cifra sola non si spezza, ma «£2,000,000 / $2,000,000 / €2,000,000»
     e' lungo 290 px e su una finestra da 320 deve andare a capo */
  .bj-tier .sd{grid-column:2;grid-row:1;font-size:.98rem;white-space:normal;
    overflow-wrap:anywhere}
  .bj-tier .ds{grid-column:1/-1;grid-row:2}
}
/* Sotto i 400 px il nome del livello e la cifra non stanno sulla stessa riga:
   una cifra che non si spezza piu' un nome lungo fanno 352 px da soli. */
@media (max-width:400px){
  .bj-tier{grid-template-columns:minmax(0,1fr)}
  .bj-tier .lv,.bj-tier .sd,.bj-tier .ds{grid-column:1;grid-row:auto}
  .bj-wrap{padding:0 14px}
  .bj-post dd,.bj-post dt,.bj-post li,.bj-post p{overflow-wrap:anywhere}
  .bj-market-nav{gap:2px}
  .bj-market-nav a{padding:0 8px;font-size:.92rem}
}

/* ---------- riquadri di richiamo ---------- */
.bj-box{border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin:1.4em 0;
  background:var(--paper);font-size:.98rem}
.bj-box > :first-child{margin-top:0}
.bj-box > :last-child{margin-bottom:0}
.bj-box h3,.bj-box h4{font-size:1.04rem;margin:0 0 .4em}
.bj-box--info{background:var(--brand-soft);border-color:#d5daf4}
.bj-box--ok{background:var(--mint-soft);border-color:var(--mint-line)}
.bj-box--warn{background:var(--warn-soft);border-color:var(--warn-line)}
.bj-box--warn h3,.bj-box--warn h4{color:var(--warn)}
.bj-box--danger{background:var(--danger-soft);border-color:var(--danger-line)}
.bj-box--gold{background:var(--gold-soft);border-color:var(--gold-line)}
.bj-box--law{background:#f8f9fc;border-left:4px solid var(--brand);border-radius:0 var(--r) var(--r) 0}
.bj-box--law cite{font-style:normal;color:var(--muted);font-size:.9rem;display:block;margin-top:.5em}

/* divulgazione: sta in testa al contenuto, vicino alle offerte */
.bj-disc{display:flex;gap:12px;align-items:flex-start;background:var(--gold-soft);
  border:1px solid var(--gold-line);border-radius:var(--r);padding:13px 18px;margin:18px 0;
  font-size:.92rem;color:var(--ink-2)}
.bj-disc .ic{flex-shrink:0;font-size:1.1rem;line-height:1.4}
.bj-disc b{color:var(--ink)}

/* la frase sui mercati, accanto alle offerte */
.bj-markets{background:#f8f9fc;border:1px solid var(--line);border-radius:var(--r);
  padding:13px 18px;margin:18px 0;font-size:.9rem;color:var(--ink-2)}

/* ---------- la classifica degli operatori ---------- */
.bj-ranklead{margin:26px 0 14px}
.bj-ranklead h2{font-size:clamp(1.45rem,2.8vw,1.9rem);font-weight:700;margin:0 0 .25em}
.bj-ranklead p{margin:0;color:var(--muted);font-size:.98rem;max-width:72ch}
.bj-rank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 10px;
  list-style:none;padding:0}
.bj-rank--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bj-rcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;position:relative;height:100%}
.bj-rcard--top{border-color:var(--gold-line);box-shadow:0 4px 20px rgba(245,179,36,.18)}
.bj-rcard .hd{display:flex;align-items:center;gap:13px;padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.bj-rcard .rk{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.92rem;display:flex;align-items:center;justify-content:center}
.bj-rcard--top .rk{background:var(--gold);color:var(--ink)}
.bj-rcard .lg{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;height:64px;
  background:#fbfcfe;border-radius:var(--r-sm);padding:4px}
.bj-rcard .lg img{width:100%;max-width:148px;height:auto}
.bj-rcard--dark .lg{background:#1b2030}
.bj-rcard .bd{padding:14px 18px 0;flex:1}
.bj-rcard .nm{font-family:var(--display);font-weight:700;font-size:1.1rem;margin:0 0 .35em}
.bj-rcard .nm a{color:var(--ink);text-decoration:none}
.bj-rcard .nm a:hover{color:var(--brand)}
.bj-rcard .cadre{background:var(--brand-soft);border:1px solid #d5daf4;border-radius:var(--r-sm);
  padding:9px 12px;font-size:.86rem;color:var(--brand-ink);margin:0 0 12px}
.bj-rcard .cadre b{font-family:var(--display)}
.bj-rcard .feat{list-style:none;margin:0 0 14px;padding:0;font-size:.92rem;color:var(--ink-2)}
.bj-rcard .feat li{position:relative;padding-left:21px;margin:.4em 0}
.bj-rcard .feat li:before{content:"\2713";position:absolute;left:0;top:0;color:var(--mint);font-weight:700}
.bj-rcard .ft{padding:0 18px 16px;margin-top:auto}
.bj-rcard .note{font-size:.8rem;color:var(--muted);margin:9px 0 0;text-align:center;line-height:1.5}
.bj-rcard .rev{display:block;text-align:center;font-size:.88rem;margin:9px 0 0}
.bj-rcard .jplist{font-size:.86rem;color:var(--muted);margin:0 0 12px}
.bj-rcard .jplist b{color:var(--ink-2);font-family:var(--display);font-weight:600}
@media(max-width:991px){.bj-rank{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.bj-rank,.bj-rank--2{grid-template-columns:minmax(0,1fr)}}

/* righe compatte: in fondo alle guide, e per gli operatori senza recensione */
.bj-rows{list-style:none;margin:1.4em 0;padding:0;display:grid;gap:10px}
.bj-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:14px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px}
.bj-row .lg{height:48px;display:flex;align-items:center;justify-content:center;background:#fbfcfe;border-radius:7px;padding:3px}
.bj-row .lg img{width:100%;max-width:92px;height:auto}
.bj-row--dark .lg{background:#1b2030}
.bj-row .nm{font-family:var(--display);font-weight:600;font-size:.98rem;margin:0}
.bj-row .li{font-size:.84rem;color:var(--muted);margin:2px 0 0}
@media(max-width:560px){
  .bj-row{grid-template-columns:72px minmax(0,1fr);row-gap:10px}
  .bj-row .bj-btn{grid-column:1/-1}
}

/* ---------- la colonna laterale ---------- */
.bj-side{position:sticky;top:84px}
.bj-side .bj-side-h{font-family:var(--display);font-weight:700;font-size:.84rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.bj-side-op{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
.bj-side-op li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;box-shadow:var(--sh)}
.bj-side-op .lg{height:66px;display:flex;align-items:center;justify-content:center;
  background:#fbfcfe;border-radius:7px;margin-bottom:11px;padding:4px}
.bj-side-op .lg img{width:100%;max-width:150px;height:auto}
.bj-side-op li.dark .lg{background:#1b2030}
.bj-side-op .nm{font-family:var(--display);font-weight:700;font-size:1rem;margin:0 0 3px}
.bj-side-op .li{font-size:.84rem;color:var(--muted);margin:0 0 11px}
.bj-side-op .note{font-size:.76rem;color:var(--muted);margin:7px 0 0;text-align:center}
.bj-side-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin-bottom:20px;font-size:.92rem}
.bj-side-card h3{font-size:1rem;margin:0 0 .5em}
.bj-side-card ul{margin:0;padding-left:1.1em}
.bj-side-card li{margin:.3em 0}

/* ---------- la banda prima del piede ---------- */
.bj-band{background:var(--brand);color:#fff;padding:34px 0;margin-top:42px}
.bj-band h2{color:#fff;font-size:clamp(1.3rem,2.4vw,1.6rem);margin:0 0 4px}
.bj-band .sub{color:#c8cbe8;font-size:.95rem;margin:0 0 20px}
.bj-band-op{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bj-band-op li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);padding:15px;display:flex;flex-direction:column}
.bj-band-op .lg{height:70px;display:flex;align-items:center;justify-content:center;
  background:#fbfcfe;border-radius:7px;margin-bottom:11px;padding:5px}
.bj-band-op .lg img{width:100%;max-width:156px;height:auto}
.bj-band-op li.dark .lg{background:#1b2030}
.bj-band-op .nm{font-family:var(--display);font-weight:700;font-size:1.02rem;margin:0 0 3px;color:#fff}
.bj-band-op .li{font-size:.85rem;color:#c8cbe8;margin:0 0 12px}
.bj-band-op .bj-btn{margin-top:auto}
.bj-band-op .note{font-size:.76rem;color:#b3b7da;margin:8px 0 0;text-align:center}
@media(max-width:860px){.bj-band-op{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.bj-band-op{grid-template-columns:minmax(0,1fr)}}

/* ---------- il pulsante grande in fondo alla recensione ---------- */
.bj-cta{background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:var(--r-lg);
  padding:26px;margin:2em 0 1.2em;text-align:center}
.bj-cta h2{font-size:1.4rem;margin:0 0 .35em;padding:0;border:0}
.bj-cta p{margin:0 0 18px;color:var(--ink-2);max-width:62ch;margin-left:auto;margin-right:auto}
.bj-cta .note{font-size:.84rem;color:var(--muted);margin:12px 0 0}

/* riquadro dell'offerta in testa alla recensione */
.bj-revhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 24px;margin:18px 0;box-shadow:var(--sh)}
.bj-revhead .lg{width:176px;height:98px;display:flex;align-items:center;justify-content:center;
  background:#fbfcfe;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px}
.bj-revhead .lg img{width:100%;height:auto}
.bj-revhead--dark .lg{background:#1b2030}
.bj-revhead .cadre{font-size:.92rem;color:var(--brand-ink);background:var(--brand-soft);
  border:1px solid #d5daf4;border-radius:var(--r-sm);padding:10px 14px;margin:0 0 8px}
.bj-revhead .meta{font-size:.9rem;color:var(--muted);margin:0}
.bj-revhead .act{text-align:center}
.bj-revhead .act .note{font-size:.78rem;color:var(--muted);margin:8px 0 0}
@media(max-width:760px){
  .bj-revhead{grid-template-columns:minmax(0,1fr);text-align:left}
  .bj-revhead .lg{width:132px}
  .bj-revhead .act{text-align:left}
}

/* riga «Vedi l'offerta» dopo la sezione dell'offerta */
.bj-inline-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--paper);border:1px dashed var(--gold-line);border-radius:var(--r);
  padding:14px 18px;margin:1.4em 0}
.bj-inline-cta p{margin:0;font-size:.95rem;color:var(--ink-2)}
.bj-inline-cta p b{font-family:var(--display)}

/* ---------- pro e contro, verdetto ---------- */
.bj-pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.5em 0}
.bj-pc .c{border:1px solid var(--line);border-radius:var(--r);padding:16px 20px}
.bj-pc .pros{background:var(--mint-soft);border-color:var(--mint-line)}
.bj-pc .cons{background:var(--danger-soft);border-color:var(--danger-line)}
.bj-pc h3{font-size:1.04rem;margin:0 0 .5em}
.bj-pc ul{margin:0;padding-left:1.15em}
.bj-pc li{margin:.4em 0;font-size:.95rem}
@media(max-width:700px){.bj-pc{grid-template-columns:1fr}}
.bj-verdict{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:24px 28px;margin:1.6em 0}
.bj-verdict h2,.bj-verdict h3{color:#fff;margin:0 0 .45em;padding:0;border:0;font-size:1.22rem}
.bj-verdict p{color:#d9dce6;margin:.5em 0}
.bj-verdict p:last-child{margin-bottom:0}
.bj-verdict .bj-score{display:inline-block;background:var(--gold);color:var(--ink);
  font-family:var(--display);font-weight:700;padding:3px 12px;border-radius:var(--pill);font-size:.95rem}

/* ---------- griglie di schede: guide, giochi, reti ---------- */
.bj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:1.3em 0;
  list-style:none;padding:0}
.bj-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bj-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bj-gcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;display:flex;flex-direction:column;box-shadow:var(--sh);
  transition:transform .15s,box-shadow .15s}
.bj-gcard:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.bj-gcard .tag{font-family:var(--display);font-size:.76rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand)}
.bj-gcard h3{font-size:1.1rem;margin:8px 0 7px}
.bj-gcard h3 a{color:var(--ink);text-decoration:none}
.bj-gcard h3 a:hover{color:var(--brand)}
.bj-gcard p{color:var(--muted);font-size:.93rem;margin:0 0 12px;flex:1}
.bj-gcard .go{font-family:var(--display);font-weight:600;font-size:.92rem}
.bj-gcard .fig{font-family:var(--num);font-weight:700;font-size:1.5rem;margin:0 0 4px;color:var(--ink)}
@media(max-width:980px){.bj-grid,.bj-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.bj-grid,.bj-grid--2,.bj-grid--4{grid-template-columns:minmax(0,1fr)}}

/* la scheda di una rete di jackpot */
.bj-net{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--gold);
  border-radius:var(--r);padding:18px 22px;margin:1.3em 0}
.bj-net h3{font-size:1.14rem;margin:0 0 .3em}
.bj-net .by{font-size:.88rem;color:var(--muted);margin:0 0 .7em}
.bj-net dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:.6em 0 0;font-size:.93rem}
.bj-net dt{font-family:var(--display);font-weight:600;color:var(--ink-2)}
.bj-net dd{margin:0}

/* ---------- domande frequenti: il markup del kit (details.ed-faq) ---------- */
.ed-faq{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  margin:10px 0;overflow:hidden}
.ed-faq > summary{cursor:pointer;padding:15px 48px 15px 18px;font-family:var(--display);
  font-weight:600;font-size:1.02rem;position:relative;list-style:none;min-height:46px;
  display:flex;align-items:center}
.ed-faq > summary::-webkit-details-marker{display:none}
.ed-faq > summary:after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--brand);line-height:1}
.ed-faq[open] > summary:after{content:"\2212"}
.ed-faq[open] > summary{border-bottom:1px solid var(--line)}
.ed-faq .ed-faq-a{padding:14px 18px;font-size:.98rem;color:var(--ink-2)}
.ed-faq .ed-faq-a > :first-child{margin-top:0}
.ed-faq .ed-faq-a > :last-child{margin-bottom:0}
.ed-faq-list{margin:1.3em 0}

/* ---------- striscia del gioco responsabile ---------- */
.bj-rg{background:var(--danger-soft);border:1px solid var(--danger-line);border-radius:var(--r);
  padding:15px 20px;margin:1.6em 0;font-size:.92rem;color:#8d1a14}
.bj-rg b{color:#75120d}
.bj-rg a{color:#8d1a14}

/* ---------- figure e grafici (visivi.py prende i colori da qui) ---------- */
.vis{margin:1.5em 0}
.vis figcaption{font-size:.88rem;color:var(--muted);margin-top:8px}
.vis svg{max-width:100%;height:auto;display:block}
.v-ink{fill:var(--ink)}
.v-muted{fill:var(--muted)}
.v-line{stroke:var(--line-2)}
.v-brand{fill:var(--brand)}
.v-gold{fill:var(--gold)}
.v-mint{fill:var(--mint)}
.v-danger{fill:var(--danger)}
.v-soft{fill:var(--brand-soft)}
.v-paper{fill:var(--paper)}
.gr{display:grid;gap:9px;margin:1.4em 0}
.gr-r{display:grid;grid-template-columns:minmax(96px,26%) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:.93rem}
.gr-l{color:var(--ink-2)}
.gr-t{height:17px;background:var(--line);border-radius:5px;overflow:hidden}
.gr-b{height:100%;background:var(--brand);border-radius:5px}
.gr-b--gold{background:var(--gold)}
.gr-b--mint{background:var(--mint)}
.gr-b--muted{background:#9aa3b5}
.gr-v{font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:520px){.gr-r{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}.gr-t{grid-column:1/-1}}

/* ---------- piè di pagina ---------- */
.bj-foot{background:var(--ink);color:#c3c8d4;padding:44px 0 26px;margin-top:0}
.bj-foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;
  padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)}
.bj-foot h2{font-family:var(--display);color:#fff;font-size:.95rem;margin:0 0 13px;letter-spacing:.02em}
.bj-foot ul{list-style:none;margin:0;padding:0}
.bj-foot a{color:#c3c8d4;font-size:.92rem;text-decoration:none}
.bj-foot a:hover{color:#fff;text-decoration:underline}
.bj-foot li{margin-bottom:8px}
.bj-foot .about{font-size:.92rem;line-height:1.7}
.bj-foot .about b{color:#fff}
.bj-foot .about a,.bj-foot .rg a{text-decoration:underline;text-underline-offset:2px;color:#e7eaf5}
.bj-foot .about a:hover,.bj-foot .rg a:hover{color:#fff}
.bj-foot .rg{font-size:.9rem;line-height:1.7;margin-top:18px;color:#c3c8d4}
.bj-foot .rg b{color:#fff}
.bj-foot .marks{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}
.bj-foot .marks img{height:26px;width:auto;opacity:.9}
.bj-foot .age{display:inline-flex;align-items:center;background:var(--gold);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:.9rem;padding:3px 10px;border-radius:6px}
.bj-foot .bottom{padding-top:20px;font-size:.88rem;color:#9aa1b2;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:10px}
.bj-foot .bottom a{color:#9aa1b2;font-size:.88rem}
.bj-foot .markets{font-size:.88rem;color:#9aa1b2;margin:16px 0 0;line-height:1.65}
@media(max-width:900px){.bj-foot .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bj-foot .cols{grid-template-columns:1fr}}

/* ---------- la pagina 404 ---------- */
.bj-404{text-align:center;padding:56px 0}
.bj-404 .n{font-family:var(--num);font-weight:700;font-size:clamp(3.4rem,11vw,6rem);
  color:var(--gold);line-height:1;letter-spacing:-.04em}
.bj-404 h1{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:.4em 0 .5em}
.bj-404 p{color:var(--ink-2);max-width:56ch;margin:0 auto 24px}

/* ---------- le pagine di mercato: guscio ridotto ---------- */
.bj-top--market{position:static}
.bj-top--market .bj-brand{cursor:default}
.bj-market-nav{list-style:none;margin:0;padding:0;margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.bj-market-nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;color:#fff;
  font-size:.93rem;text-decoration:none;border-radius:var(--r-sm)}
.bj-market-nav a:hover{background:rgba(255,255,255,.14);color:#fff}
/* sotto i 560 px il marchio e la navigazione del mercato vanno a capo invece
   di spingersi fuori: il logo e piu largo della scritta che portava prima */
@media (max-width:560px){
  .bj-top--market .bj-wrap{flex-wrap:wrap;row-gap:2px;padding-top:6px;padding-bottom:6px}
  .bj-top--market .bj-market-nav{margin-left:0;width:100%}
}
@media (max-width:400px){
  .bj-brand img{height:30px}
}
.bj-reg{margin:1.5em 0}
.bj-reg .bj-t{min-width:460px}

/* ---------- intestazione a telefono ---------- */
@media(max-width:1060px){
  .bj-nav > li > a,.bj-nav > li > button{padding:0 10px;font-size:.92rem}
}
@media(max-width:900px){
  .bj-burger{display:block}
  .bj-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--brand);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 14px 16px;
    box-shadow:0 10px 26px rgba(17,19,26,.26);max-height:76vh;overflow-y:auto}
  .js .bj-nav{display:none}
  .bj-nav.open,.js .bj-nav.open{display:flex}
  .bj-top{position:relative}
  .bj-nav > li{width:100%}
  .bj-nav > li > a,.bj-nav > li > button{width:100%;justify-content:space-between;padding:0 12px}
  .bj-nav .bj-sub{position:static;display:none;box-shadow:none;border:0;background:rgba(255,255,255,.07);
    margin:4px 0 8px;padding:4px}
  .bj-nav li.open > .bj-sub{display:block}
  .bj-nav .bj-sub a{color:#eceefb;display:block}
  .bj-nav .bj-sub a:hover{background:rgba(255,255,255,.12);color:#fff}
  .bj-market-nav{flex-direction:column;width:100%;margin-left:0}
}

/* ---------- banner del consenso (js/cookie-consent.js) ----------
   «Accept» e «Reject» allo stesso livello: stessa forma, stesso colore, stessa
   evidenza, alti almeno 44 px. Il colore sta anche sul paragrafo, perché un tema
   che colora «p» lo scriverebbe scuro sul fondo scuro. Finché questo foglio
   dichiara «position:fixed» sul banner, lo script non inietta nessuno stile suo. */
.cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;flex-wrap:wrap;
  gap:12px 22px;align-items:center;justify-content:center;padding:15px 18px;
  background:var(--ink);color:#fff;font-size:14px;line-height:1.55;
  border-top:3px solid var(--gold);box-shadow:0 -4px 18px rgba(17,19,26,.4)}
.cc-banner .cc-text{margin:0;max-width:780px;color:#fff;font-size:14px;line-height:1.55}
.cc-banner a{color:var(--gold);text-decoration:underline}
.cc-banner .cc-btns{display:flex;gap:12px}
.cc-banner .cc-btn{min-height:44px;min-width:124px;padding:9px 20px;border:2px solid #fff;
  border-radius:var(--pill);background:#fff;color:var(--ink);font-family:var(--display);
  font-weight:700;font-size:15px;cursor:pointer}
.cc-banner .cc-btn:hover{background:#e7eaf2}
@media(max-width:640px){.cc-banner .cc-btns{width:100%}.cc-banner .cc-btn{flex:1;min-width:0}}
/* la tabella dei cookie: contenuto dell'informativa, non un dato secco */
.bj-cookie-t .bj-t{min-width:480px}

/* ---------- utilità ---------- */
.bj-mt0{margin-top:0}
.bj-tc{text-align:center}
.bj-small{font-size:.9rem}
.bj-nowrap{white-space:nowrap}
.bj-sec{padding:6px 0 2px}
.bj-sec-h{margin:2em 0 .8em}
.bj-sec-h h2{font-size:clamp(1.42rem,2.6vw,1.78rem);margin:0 0 .25em;padding:0;border:0}
.bj-sec-h p{margin:0;color:var(--muted);font-size:.98rem;max-width:72ch}