/* Recensioni Casinò Italia: the single stylesheet.
   Sections: self-hosted fonts; mockup v6's <style> copied verbatim (minus the rules for the
   mockup's own page switcher and labels); then the additions the build needs, marked below. */

/* Self-hosted variable fonts (latin subset). The url()s must stay identical to the
   <link rel="preload"> hrefs in src/templates/head.js (no ?v=), or each font downloads twice. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Roboto Condensed";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/roboto-condensed-latin-wght-normal.woff2) format("woff2")}

/* ===== mockup v6 ===== */
:root{
  --navy-950:#0A0F1C; --navy:#0C1221; --navy-800:#121928; --navy-700:#162334; --navy-600:#22324A;
  --red:#D40035; --red-dark:#8E0024; --yellow:#ECFE00; --yellow-600:#D4E400;
  --ink:#0F1728; --body:#2B3447; --muted:#5E6A80; --faint:#9AA3B2; --line:#E2E6EE; --soft:#F7F8FB; --bg:#F3F5F9;
  --green:#12A150; --green-bg:#E8F7EE; --red-bg:#FDECEF; --amber-bg:#FFF8DB;
  --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(12,18,33,.05),0 8px 24px rgba(12,18,33,.06);
  --head:"Roboto Condensed",system-ui,sans-serif; --sans:Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:var(--body);font:17px/1.72 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--red)}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;color:var(--ink);line-height:1.18;margin:0}
h2{font-size:30px;margin:64px 0 16px;padding-left:16px;position:relative;scroll-margin-top:80px}
h2::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:5px;border-radius:3px;background:var(--red)}
h3{font-size:21px;margin:34px 0 8px}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.2em;padding-left:22px}
li{margin-bottom:6px}
li::marker{color:var(--red)}
.col{max-width:800px;margin:0 auto;padding:0 20px}
.wide{max-width:1080px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 15px/1 var(--head);text-transform:uppercase;letter-spacing:.6px;text-decoration:none;border-radius:10px;padding:14px 22px;white-space:nowrap;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-y{background:var(--yellow);color:var(--navy)}
.btn-y:hover{background:var(--yellow-600)}
.btn-n{background:var(--navy);color:#fff}
.btn-sm{padding:10px 15px;font-size:13.5px}
.small{font-size:13px;color:var(--muted)}

/* ===== chrome (calm, from v5) ===== */
header.site{background:var(--navy);position:sticky;top:0;z-index:20}
header.site .wide{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
nav.main{display:flex;gap:26px}
nav.main a{color:#C9D1DF;font:500 15px var(--sans);text-decoration:none}
nav.main a:hover{color:var(--yellow)}

.hero{background:radial-gradient(700px 320px at 95% -10%,rgba(212,0,53,.38),transparent 60%),linear-gradient(180deg,var(--navy-800),var(--navy));color:#B8C1D1;padding:22px 0 30px}
.crumbs{font-size:13px;color:#7F8AA0;margin-bottom:22px}
.crumbs a{color:#B8C1D1;text-decoration:none}
.hero-id{display:flex;gap:18px;align-items:center}
.logo{width:76px;height:76px;border-radius:16px;background:var(--red);display:grid;place-items:center;padding:10px;flex:none;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 8px 24px color-mix(in srgb,var(--brand,var(--red)) 35%,transparent);color:#fff;font:800 24px/1 var(--head);letter-spacing:.5px}
.logo img{max-width:100%;max-height:100%;object-fit:contain}
.hero h1{color:#fff;font-size:38px}
.rate{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13.5px;color:#8C97AD}
.rate .num{background:var(--yellow);color:var(--navy);font:800 16px/1 var(--head);border-radius:7px;padding:5px 7px}
.stars{color:var(--yellow);letter-spacing:1.5px}
.hero-offer{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px;padding:18px 20px;border-radius:var(--r);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.hero-offer .o{font:600 12px var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--yellow)}
.hero-offer .o b{display:block;color:#fff;font:800 25px/1.2 var(--head);letter-spacing:0;text-transform:none;margin-top:4px}
.hero-offer .o b span{color:var(--yellow)}

.byline{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--muted);padding:22px 0 24px;border-bottom:1px solid var(--line);margin-bottom:30px;line-height:1.5}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--navy-600),var(--navy));color:#fff;display:grid;place-items:center;font:700 14px var(--head);flex:none}
.byline a{color:var(--ink);font-weight:600;text-decoration:none}
.lead{font-size:19px;color:var(--ink);line-height:1.6}

/* ===== rich blocks (v2 look) ===== */
.block{margin:28px 0}

/* in breve */
.verdict{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;background:var(--navy);color:#C9D1DF;border-radius:var(--r);padding:26px 28px;margin:28px 0}
.verdict h4{color:#fff;font-size:21px;margin-bottom:8px}
.ring{width:108px;height:108px;border-radius:50%;background:conic-gradient(var(--yellow) 0 94%,rgba(255,255,255,.1) 94% 100%);display:grid;place-items:center}
.ring div{width:86px;height:86px;border-radius:50%;background:var(--navy);display:grid;place-items:center;text-align:center;font:800 30px/1 var(--head);color:#fff}
.ring small{display:block;font:500 11px var(--sans);color:#8C97AD;margin-top:4px}
.verdict ul{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:6px}
.verdict li{padding-left:24px;position:relative;font-size:15.5px;margin:0}
.verdict li::before{content:"→";position:absolute;left:0;color:var(--yellow);font-weight:700}

/* toc (reviews): the boxed list from mockup v6, two columns, one on phones */
.toc{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;margin:28px 0}
.toc .cap{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;background:var(--soft);border-bottom:1px solid var(--line);font:800 17px var(--head);color:var(--ink)}
.toc .cap span{font:500 13px var(--sans);color:var(--muted)}
.toc ol{list-style:none;margin:0;padding:16px 20px 10px;columns:2;column-gap:28px;counter-reset:t}
.toc li{counter-increment:t;break-inside:avoid;margin:0 0 8px;font-size:15.5px;display:flex;gap:10px;align-items:center}
.toc li::before{content:counter(t,decimal-leading-zero);font:800 12.5px/1 var(--head);color:#fff;background:var(--red);border-radius:6px;padding:4px 5px;min-width:24px;text-align:center}
.toc a{color:var(--body);text-decoration:none}
.toc a:hover{color:var(--red);text-decoration:underline}

/* scores */
.scores{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.score-row{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;font-size:14.5px;font-weight:600;color:var(--ink)}
.score-row b{font:800 16px var(--head)}
.bar{grid-column:1/-1;height:8px;border-radius:999px;background:#E6EAF1;overflow:hidden}
.bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--red),#FF4D6D)}

/* pros cons */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pc > div{border-radius:var(--r-sm);padding:20px 22px}
.pc .pros{background:var(--green-bg)}
.pc .cons{background:var(--red-bg)}
.pc h4{font-size:18px;margin-bottom:12px}
.pc ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15.5px}
.pc li{padding-left:30px;position:relative;margin:0}
.pc .pros li::before{content:"✓";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;display:grid;place-items:center;font-weight:700}
.pc .cons li::before{content:"✕";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;display:grid;place-items:center;font-weight:700}

/* facts */
.facts{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.facts th,.facts td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:0}
.facts th{width:38%;background:var(--soft);color:var(--muted);font-weight:600}
.facts td{color:var(--ink);font-weight:500}
.chip{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:13.5px;margin:2px 4px 2px 0;color:var(--ink);font-weight:500;line-height:1.5}
.facts .chip{background:var(--bg)}

/* offer */
.offer{display:grid;grid-template-columns:1.1fr 1fr;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.offer .l{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:center}
.offer .l .eb{font:700 12px var(--sans);letter-spacing:1.4px;text-transform:uppercase;opacity:.85}
.offer .l .big{font:800 36px/1.05 var(--head);margin:8px 0}
.offer .l .big span{color:var(--yellow)}
.offer .l .btn{align-self:flex-start;margin-top:14px}
.offer .r{padding:18px 22px;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;align-content:center;background:#fff}
.offer .r div{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:600;line-height:1.3}
.offer .r b{display:block;font:800 19px var(--head);color:var(--ink);text-transform:none;letter-spacing:0;margin-top:3px}
.code{font-family:ui-monospace,Menlo,monospace!important;background:var(--amber-bg);border:1.5px dashed #E0B800;border-radius:6px;padding:1px 8px;display:inline-block;font-size:15px!important}

.callout{border-radius:var(--r-sm);padding:16px 18px 16px 54px;position:relative;font-size:16px;line-height:1.6}
.callout::before{position:absolute;left:18px;top:15px;font-size:20px}
.callout.warn{background:var(--amber-bg);border:1px solid #F3E2A0}
.callout.warn::before{content:"⚠️"}
.callout.info{background:#EEF3FF;border:1px solid #D7E2FF}
.callout.info::before{content:"🛡️"}
.callout.tip{background:var(--green-bg);border:1px solid #C9EBD6}
.callout.tip::before{content:"💡"}
.callout b{color:var(--ink)}
.callout ul{margin:6px 0 0;padding-left:18px}

/* games */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.tile{background:var(--navy);color:#fff;border-radius:var(--r-sm);padding:16px 10px;text-align:center}
.tile .e{font-size:24px;line-height:1.2}
.tile b{display:block;font:800 22px var(--head);color:var(--yellow);margin-top:4px}
.tile span{font-size:12.5px;color:#A5AFC0}
.shot{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin:0;box-shadow:var(--shadow)}
.shot figcaption{font-size:13px;color:var(--muted);padding:9px 14px;background:var(--soft)}
.providers{display:flex;flex-wrap:wrap;gap:8px}
.providers .chip{padding:7px 13px;box-shadow:0 1px 2px rgba(12,18,33,.05)}
.providers .chip.more{border-style:dashed;color:var(--muted)}

/* payments */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
table.data{width:100%;border-collapse:collapse;font-size:15px;min-width:540px}
table.data th{background:var(--navy);color:#fff;font:700 12.5px var(--sans);text-transform:uppercase;letter-spacing:.6px;text-align:left;padding:12px 16px}
table.data td{padding:12px 16px;border-top:1px solid var(--line);color:var(--ink)}
table.data tr:nth-child(even) td{background:var(--soft)}
.pm{display:flex;align-items:center;gap:10px;font-weight:600}
.pm i{width:36px;height:24px;border-radius:5px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:700;color:var(--navy-600)}
.speed{display:inline-block;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:700;white-space:nowrap}
.speed.fast{background:var(--green-bg);color:var(--green)}
.speed.mid{background:var(--amber-bg);color:#9A7A00}

/* author page review list */
.alts{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.alt{display:grid;grid-template-columns:52px 1fr auto auto;gap:16px;align-items:center;padding:14px 18px;border-top:1px solid var(--line)}
.alt:first-child{border-top:0}
.pl{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;color:#fff;font:800 14px var(--head);flex:none;overflow:hidden}
.pl img{max-height:100%;padding:6px}
.alt b{display:block;color:var(--ink);font-size:16px}
.alt span{font-size:13.5px;color:var(--muted)}
.alt .sc{font:800 15px var(--head);background:var(--navy);color:var(--yellow);border-radius:7px;padding:5px 8px}

/* faq */
.faq details{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:10px;background:#fff}
.faq summary{list-style:none;cursor:pointer;padding:16px 54px 16px 18px;font:700 16.5px var(--sans);color:var(--ink);position:relative}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:8px;background:var(--red-bg);display:grid;place-items:center;font-size:18px;color:var(--red)}
.faq details[open]{border-color:#F3C6CF}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 18px 16px;margin:0;font-size:16px}

/* author */
.author-box{display:grid;grid-template-columns:76px 1fr;gap:18px;align-items:start;border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-top:56px;box-shadow:var(--shadow)}
.author-box .avatar{width:76px;height:76px;font-size:24px}
.author-box .role{font-size:12.5px;color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.author-box h4{margin:2px 0 6px;font-size:21px}
.author-box p{font-size:15px;margin-bottom:8px;color:var(--muted)}
.author-box .links a{font-size:14.5px;font-weight:600;margin-right:14px}

/* footer (calm) */
footer.site{background:var(--navy-950);color:#8C97AD;font-size:14px;padding:42px 0 28px}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot-top p{max-width:360px;margin:12px 0 0}
.foot-links{display:grid;gap:8px;text-align:right}
.foot-links a{color:#C9D1DF;text-decoration:none;margin-left:18px}
.foot-legal{border-top:1px solid rgba(255,255,255,.08);margin-top:28px;padding-top:18px;font-size:12.5px;line-height:1.6}
.foot-legal b{color:#fff;background:var(--red);border-radius:4px;padding:1px 6px;margin-right:6px}

/* ===== homepage ===== */
.home-head{background:radial-gradient(700px 320px at 0% 0%,rgba(212,0,53,.28),transparent 60%),var(--navy);color:#B8C1D1;padding:44px 0 40px}
.home-head h1{color:#fff;font-size:44px;max-width:820px}
.home-head h1 span{color:var(--yellow)}
.home-head .byline{border:0;padding:16px 0 14px;margin:0;color:#8C97AD}
.home-head .byline a{color:#fff}
.home-head .lead{color:#C9D1DF;max-width:760px;margin:0}
.toplist{margin:30px auto 8px}
.row{display:grid;grid-template-columns:40px 132px 1fr 210px 170px;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 22px;margin-bottom:12px;position:relative}
.row.first{border:2px solid var(--yellow);box-shadow:0 12px 32px rgba(12,18,33,.12);margin-top:14px}
.row.first::after{content:"SCELTA DELLA REDAZIONE";position:absolute;top:-12px;left:22px;background:var(--yellow);color:var(--navy);font:800 11.5px var(--head);letter-spacing:1.2px;padding:4px 10px;border-radius:6px}
.row .n{font:800 28px var(--head);color:#C8CFDB;text-align:center}
.row.first .n{color:var(--red)}
.row .lg{height:72px;border-radius:12px;display:grid;place-items:center;color:#fff;font:800 15px var(--head);padding:10px 18px;overflow:hidden}
.row .lg img{max-height:100%;object-fit:contain}
.row .nm{font:800 21px var(--head);color:var(--ink)}
.row .sc{display:flex;align-items:center;gap:8px;margin:3px 0 5px;font-size:13px;color:var(--muted)}
.row .sc b{background:var(--navy);color:var(--yellow);font:800 14px var(--head);padding:3px 7px;border-radius:6px}
.row .sc .st{color:#F5A400;letter-spacing:1px}
.row ul{list-style:none;margin:0;padding:0;font-size:13.5px}
.row ul li{margin:0}
.row ul li::before{content:"✓ ";color:var(--green);font-weight:800}
.row .bn{text-align:center;border-left:1px dashed var(--line);border-right:1px dashed var(--line);padding:0 12px}
.row .bn .e{font:700 11px var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.row .bn b{display:block;font:800 20px/1.15 var(--head);color:var(--ink);margin:3px 0}
.row .bn span{font-size:12.5px;color:var(--muted)}
.row .cta{display:grid;gap:7px;text-align:center}
.row .cta a.rev{font-size:13px;font-weight:600;color:var(--ink)}

.rc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:22px 0;box-shadow:var(--shadow)}
.rc-head{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px 20px;background:var(--soft);border-bottom:1px solid var(--line)}
.rc-head .rk{font:800 28px var(--head);color:var(--red);width:28px;text-align:center}
.rc-head .pl{width:96px;height:52px;border-radius:10px}
.rc-head h3{margin:0;font-size:22px}
.rc-head .mt{font-size:13.5px;color:var(--muted)}
.rc-head .lft{display:flex;align-items:center;gap:14px}
.rc-bonus{display:inline-block;background:linear-gradient(90deg,var(--red-bg),#fff);border-left:3px solid var(--red);border-radius:0 8px 8px 0;padding:8px 14px;font:800 18px var(--head);color:var(--ink);margin:18px 20px 4px}
.rc-bonus span{color:var(--red)}
.rc-body{padding:12px 20px 2px}
.rc-body p{font-size:16.5px}
.rc-best{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px;border-top:1px dashed var(--line);font-size:15px}
.rc-best b{color:var(--red)}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pick{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.pick .tag{align-self:flex-start;font:800 11.5px var(--head);letter-spacing:1.2px;text-transform:uppercase;background:var(--red-bg);color:var(--red);padding:4px 9px;border-radius:6px}
.pick .pl{width:100%;height:62px;margin:12px 0 10px;font-size:16px}
.pick b{font:800 20px var(--head);color:var(--ink)}
.pick p{font-size:14.5px;margin:4px 0 12px;flex:1;color:var(--muted)}
.def{background:var(--navy);color:#C9D1DF;border-radius:var(--r-sm);padding:20px 24px;font-size:16.5px}
.def b{color:var(--yellow);display:block;font:800 13px var(--head);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:6px}
.safety{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.safety > div{border-radius:var(--r);padding:22px}
.safety .ok{background:var(--green-bg)}
.safety .bad{background:var(--red-bg)}
.safety h4{font-size:18px;margin-bottom:12px}
.safety ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15.5px}
.safety li{padding-left:30px;position:relative;margin:0}
.safety .ok li::before{content:"✓";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;display:grid;place-items:center;font-weight:700}
.safety .bad li::before{content:"!";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;font-size:12px;display:grid;place-items:center;font-weight:800}
.criteria{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.crit{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;position:relative;box-shadow:var(--shadow)}
.crit .pct{position:absolute;right:16px;top:16px;font:800 20px var(--head);color:var(--red)}
.crit .e{width:42px;height:42px;border-radius:11px;background:var(--navy);display:grid;place-items:center;font-size:20px;margin-bottom:10px}
.crit b{font:800 17px var(--head);color:var(--ink);display:block;margin-bottom:4px}
.crit p{font-size:14px;margin:0;color:var(--muted);line-height:1.5}

@media (max-width:900px){
  .row{grid-template-columns:32px 110px 1fr;gap:14px}
  .row .bn{grid-column:2/-1;border:0;text-align:left;padding:0}
  .row .cta{grid-column:1/-1}
  .row .lg{height:60px}
}
@media (max-width:640px){
  h2{font-size:26px;margin-top:52px}
  .hero h1{font-size:28px}
  .logo{width:60px;height:60px;font-size:20px}
  .scores,.pc,.offer,.safety,.criteria,.picks{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .toc ol{columns:1}
  .verdict{grid-template-columns:1fr}
  .alt{grid-template-columns:52px 1fr auto}
  .alt .btn{grid-column:1/-1}
  .rc-head{grid-template-columns:1fr}
  .rc-head .pl{display:none}
  .foot-links{text-align:left}
  .foot-links > div{display:flex;flex-wrap:wrap;gap:6px 16px}
  .foot-links a{margin:0}
}

/* ===== additions (not in v6) ===== */

/* Every <img> carries width/height attributes (v6's had none). Without this, max-width shrinks
   the width but the height attribute keeps the full height, stretching logos and screenshots. */
img{height:auto}

/* score ring (.verdict): v6 fills a fixed 94%. The fill follows the score instead,
   from --p set inline by the template (<div class="ring" style="--p:91%">). */
.ring{background:conic-gradient(var(--yellow) 0 var(--p),rgba(255,255,255,.1) var(--p) 100%)}

/* star ratings (review hero, homepage toplist): v6's text stars (★★★★½) rounded every score to a half
   star and took their widths from a fallback font. The template writes two identical rows of five SVG
   stars (blocks/common.js): <span class="stars" role="img" aria-label="Voto 9.4 su 10" style="--fill:94%">
   <svg class="off">…</svg><svg class="on">…</svg></span>. The coloured row lies on the grey one, clipped
   to --fill (the score × 10%), so the last star is cut where the score falls. The sizes match v6's glyphs:
   yellow on the navy hero (v6's .stars colour), gold on the white toplist rows (v6's .row .sc .st). */
.stars{position:relative;display:inline-block;flex:none;width:75px;height:12.5px;letter-spacing:0}
.stars svg{position:absolute;inset:0;width:100%;height:100%}
.stars .off{color:rgba(255,255,255,.28)}
.stars .on{clip-path:inset(0 calc(100% - var(--fill)) 0 0)}
.row .sc .stars{width:70px;height:11.7px;color:#F5A400}
.row .sc .stars .off{color:#DDE2EA}

/* withdrawal speed pills: v6 styles fast (green) and mid (amber); the data also allows slow */
.speed.slow{background:var(--red-bg);color:var(--red)}
/* v6's fast and mid pill text is below WCAG AA on its tint (3.04:1 and 3.82:1). Same hues, darker:
   fast #0B7A3B on --green-bg is 4.91:1, mid #7A6000 on --amber-bg 5.63:1 (slow is 4.78:1 as it is). */
.speed.fast{color:#0B7A3B}
.speed.mid{color:#7A6000}

/* homepage: v6 sets margin-top:30px inline on the first intro paragraph after the toplist. This gives
   the same 30px gap (it collapses with the last row's 12px margin), with or without an intro. */
.toplist + main{margin-top:30px}

/* homepage comparison table: each casino name links to its review. v6 shows the names in ink bold,
   so the link keeps that colour and only adds the underline. */
table.data td a{color:var(--ink)}

/* homepage picks: v6's `.pl img{max-height:100%}` does nothing in the full-width pick tile. The grid
   row is auto, so the percentage resolves against the image itself, and a logo overflows the 62px
   tile and is cut off. A definite row lets the logo take the tile's height; object-fit keeps a logo
   wider than the tile from stretching once max-width narrows it. */
.pick .pl{grid-template-rows:100%}
.pick .pl img{width:auto;height:100%;object-fit:contain}

/* homepage definition box: it is navy, and the default red link would be about 3.4:1 on it */
.def a{color:#fff;text-decoration:underline}

/* mobile menu: <details class="menu"><summary aria-label="Menu">icons</summary><nav>links</nav></details>
   in the header. It replaces nav.main under 820px with no JavaScript; the panel drops below the header. */
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;width:42px;height:42px;margin-right:-8px;border-radius:10px;display:grid;place-items:center;color:#fff}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover,.menu[open] summary{background:var(--navy-700)}
.menu summary svg{display:block;width:24px;height:24px}
.menu .ic-close,.menu[open] .ic-menu{display:none}
.menu[open] .ic-close{display:block}
.menu nav{position:absolute;top:100%;left:0;right:0;background:var(--navy-800);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 16px 32px rgba(12,18,33,.28);padding:4px 20px 10px}
.menu nav a{display:block;padding:13px 0;color:#C9D1DF;font:500 16px var(--sans);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.06)}
.menu nav a:last-child{border-bottom:0}
.menu nav a:hover{color:var(--yellow)}
/* mobile menu: the reviews item (site.js `reviews: true`) wraps its link and the reviews as indented links,
   always shown: <div class="grp"><a>Recensioni</a><ul class="sub"><li><a>Rabona Casino</a></li>…</ul></div> */
.menu nav .grp{border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:8px}
.menu nav .grp > a{border-bottom:0;padding-bottom:6px}
.menu nav .sub{list-style:none;margin:0 0 0 2px;padding:0;border-left:2px solid rgba(255,255,255,.1)}
.menu nav .sub li{margin:0}
.menu nav .sub a{padding:8px 0 8px 16px;font-size:15px;color:#A5AFC0;border-bottom:0}
.menu nav .sub a:hover{color:var(--yellow)}

/* desktop "Recensioni" dropdown: <div class="dd"><a>Recensioni<svg class="chev"></a><div class="dd-panel">
   <ul><li><a><span class="dd-lg">logo</span><span class="dd-nm">name</span><span class="dd-sc">9.4</span></a></li>…
   </ul></div></div> in nav.main. CSS only: it opens on hover and on keyboard focus (Tab to "Recensioni", then
   on through the reviews). The nav and the item fill the header's height and the panel hangs from its bottom
   edge, so the pointer never crosses a gap that would close it. The 300px panel opens under the item, which
   sits well left of the header's right edge, so it is never cut off (nav.main shows from 821px up). */
nav.main{align-self:stretch;align-items:center}
.dd{position:relative;align-self:stretch;display:flex;align-items:center}
.dd > a{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.dd .chev{width:12px;height:12px;flex:none;transition:transform .15s}
.dd-panel{display:none;position:absolute;top:100%;left:-14px;z-index:30;padding-top:6px}
.dd-panel ul{list-style:none;margin:0;padding:6px;width:300px;background:var(--navy-800);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-sm);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.dd-panel li{margin:0}
nav.main .dd-panel a{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:7px 8px;border-radius:8px;color:#C9D1DF;font:600 14.5px/1.3 var(--sans)}
nav.main .dd-panel a:hover{background:var(--navy-700);color:#fff}
.dd-lg{width:52px;height:30px;border-radius:6px;display:grid;grid-template-rows:100%;place-items:center;padding:4px 6px;overflow:hidden;color:#fff;font:800 11px var(--head);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.dd-lg img{width:auto;height:100%;object-fit:contain}
.dd-sc{font:800 13px/1 var(--head);color:var(--yellow);background:rgba(255,255,255,.07);border-radius:6px;padding:4px 6px}
/* Open on hover and while focus is anywhere in the item. A click leaves focus on "Recensioni" (it jumps to
   #recensioni on the homepage), which would keep the panel open over the page after the pointer leaves, so
   mouse focus there (focus but not :focus-visible) does not count. A browser without :focus-visible drops
   that rule and keeps the :focus-within one. */
.dd:hover > .dd-panel,.dd:focus-within > .dd-panel{display:block}
.dd:hover .chev,.dd:focus-within .chev{transform:rotate(180deg)}
.dd:not(:hover) > a:focus:not(:focus-visible) + .dd-panel{display:none}
.dd:not(:hover) > a:focus:not(:focus-visible) .chev{transform:none}
@media (prefers-reduced-motion:no-preference){
  .dd-panel ul{animation:dd-in .14s ease-out}
}
@keyframes dd-in{from{opacity:0;transform:translateY(-4px)}}

/* simple pages: <div class="page-head"><div class="col">crumbs, <h1>, <p class="small">Aggiornato il …</p></div></div> */
.page-head{background:var(--soft);border-bottom:1px solid var(--line);padding:22px 0 30px;margin-bottom:34px}
.page-head .crumbs{color:var(--muted)}
.page-head .crumbs a{color:var(--body)}
.page-head h1{font-size:38px}
.page-head .small{margin:10px 0 0}
/* the gap above the footer: v6 left 72px under the closing .rg note, which spec v2 removed. A review
   ends on the author box (no bottom margin); the homepage, simple and author pages end on a paragraph
   or a block, so 52px plus its own margin gives about the same gap */
.hero + main{padding-bottom:72px}
.toplist + main,.page-head + main{padding-bottom:52px}

/* author page: <div class="author-hero"><img> <div><h1>name</h1><div class="role">role</div><p>bio…</p><div class="links">LinkedIn</div></div></div> */
.author-hero{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:start}
.author-hero img{width:120px;height:120px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow)}
.author-hero h1{font-size:38px;margin:0 0 6px}
.author-hero .role{font-size:12.5px;color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:14px}
.author-hero p{margin-bottom:.8em}
.author-hero .links a{font-weight:600}

/* the author photo inside the byline and author-box avatars (v6 had "RT" initials there) */
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}

/* 404: <main class="col notfound"><h1>, the intro, then <ul> of links home and to every review */
.notfound{padding-top:56px;padding-bottom:80px}
.notfound h1{font-size:40px;margin-bottom:16px}
.notfound ul{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.notfound li{margin:0}
.notfound li a{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;box-shadow:0 1px 2px rgba(12,18,33,.05)}
.notfound li a:hover{border-color:var(--red);color:var(--red)}

/* ===== review style v2 (spec 2026-10-20-review-style-v2) ===== */

/* the site logo (spec v2 "The site logo"): src/assets/img/logo.svg inline in the header and the footer
   (<a class="brand"><svg role="img" viewBox="0 0 270 48">). A fixed size, so the header never reflows:
   40px tall, 36px on phones, where it sits next to the menu button. */
.brand svg{display:block;width:225px;height:40px}

/* homepage hero (spec v2 "Homepage images"): the H1, byline and lead on the left; on the right the
   "Casinò del mese" card over the decorative art. The art (480×400) leaves its middle free for the
   card: its top 150px show above the card, the rest peeks out around it. It starts at the column gap,
   so nothing in it reaches the text; it reaches 100px past the column on the right, which fits the
   screen from 1240px up. Below that it would be cut off, so it is hidden and the card loses its top
   room. Under 900px the card follows the lead. */
.home-head{overflow:hidden}
.home-head .wide{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:center}
/* the yellow phrase stays on one line, so no lone "i" ends a line; balance evens out the rest */
.home-head h1{text-wrap:balance}
.home-head h1 span{white-space:nowrap}
.motm{position:relative;padding:146px 0 34px}
.motm-art{position:absolute;top:0;left:-40px;width:480px;height:400px;max-width:none;pointer-events:none}
.motm-card{position:relative;background:rgba(18,25,40,.94);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:18px 20px 20px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.motm-tag{margin:0;font:800 12px/1.2 var(--head);letter-spacing:1.4px;text-transform:uppercase;color:var(--yellow)}
.motm-id{display:flex;align-items:center;gap:14px;margin:12px 0 16px;line-height:1.3}
/* the logo tile's row is definite, so the logo takes its height (as .pick .pl and .cl) */
.motm-lg{width:104px;height:60px;border-radius:10px;display:grid;grid-template-rows:100%;place-items:center;padding:8px 12px;flex:none;overflow:hidden;color:#fff;font:800 15px var(--head)}
.motm-lg img{width:auto;height:100%;object-fit:contain}
.motm-nm{color:#fff;font:600 14.5px var(--sans);text-decoration:none}
.motm-nm:hover{text-decoration:underline}
.motm-id b{display:block;color:#fff;font:800 22px/1.15 var(--head);margin:3px 0 2px}
.motm-id b span{color:var(--yellow)}
.motm-x{display:block;font-size:13.5px;color:#9AA6BC}
.motm .btn{display:flex;width:100%}

/* review cards: the casino's homepage screenshot (introShot) as a thumbnail beside the summary. Phone
   (portrait) and desktop (landscape) screenshots share one 4:3 frame, cropped from the top. */
.rc-shot{float:right;width:200px;height:150px;object-fit:cover;object-position:top;margin:4px 0 12px 22px;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow)}
.rc-body::after{content:"";display:block;clear:both}

/* callouts: titled like the references' green "Consiglio utile" and red "Fai attenzione!" boxes.
   <div class="block callout tip|warn|info"><p class="ct">title</p>html</div>. The title is a <p>, so
   heading levels never skip. Title colours on their tints: tip #0B7A3B on --green-bg 4.91:1, warn --red
   on --red-bg 4.78:1; the body text is --body (over 11:1 on both). */
.callout .ct{margin:0 0 4px;font:800 18px/1.3 var(--head);color:var(--ink)}
.callout.tip{background:var(--green-bg);border:1px solid #BFE5CD}
.callout.tip .ct{color:#0B7A3B}
.callout.warn{background:var(--red-bg);border:1px solid #F5C5CF}
.callout.warn .ct{color:var(--red)}
.callout > :last-child{margin-bottom:0}

/* a portrait screenshot in a centred phone frame: <figure class="block shot phone"><img><figcaption>.
   The bezel is the image's own border, so the figure drops the card frame of .shot. */
.shot.phone{max-width:300px;margin-left:auto;margin-right:auto;border:0;border-radius:0;box-shadow:none;overflow:visible}
.shot.phone img,.shots img.phone{border:10px solid var(--navy-950);border-radius:34px;background:var(--navy-950);box-shadow:0 0 0 1px var(--navy-600),0 14px 32px rgba(12,18,33,.2)}
.shot.phone figcaption{background:none;text-align:center;padding:10px 0 0}

/* 2–3 screenshots in a row: <figure class="block shots"><div class="strip"><img>…</div><figcaption>
   (.block already zeroes the figure's side margins) */
.shots .strip{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:18px;align-items:start;justify-items:center}
.shots img{border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow)}
/* min(): a percentage keeps the image from setting its column's minimum width, so two phone shots side by
   side on a phone (two 1fr columns) shrink to fit instead of pushing the page sideways */
.shots img.phone{max-width:min(240px,100%)}
.shots figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:12px}

/* facts table: a long e-mail address or licence number wraps inside its cell, so the table never grows wider
   than a phone screen (anywhere, unlike break-word, also lowers the cell's minimum width) */
.facts td{overflow-wrap:anywhere}

/* table block: the first cell of each row is its header (<th scope="row">), in ink on the row colour;
   the caption sits under the table */
table.data th[scope=row]{background:transparent;color:var(--ink);font:600 15px var(--sans);text-transform:none;letter-spacing:0;border-top:1px solid var(--line)}
table.data tr:nth-child(even) th[scope=row]{background:var(--soft)}
table.data caption{caption-side:bottom;text-align:left;font-size:13px;color:var(--muted);padding:9px 16px;background:var(--soft);border-top:1px solid var(--line)}

/* compare tables: <table class="data cmp">, one row per casino, this casino first (tr.me, tinted).
   The row header holds a small logo tile (.cl) and the name; other casinos link to their review. */
table.cmp td{text-align:center}
table.cmp th{text-align:center}
table.cmp th:first-child,table.cmp th[scope=row]{text-align:left}
table.cmp td.nd{color:var(--muted)}
/* th[scope=row] in the selector, so it outranks the even-row tint of table.data (the first row is even) */
table.cmp tr.me th[scope=row],table.cmp tr.me td{background:var(--amber-bg)}
.cmp-c{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;text-decoration:none;white-space:nowrap}
a.cmp-c:hover{color:var(--red);text-decoration:underline}
/* the tile's row is definite, so the logo takes its height (as .pick .pl) and object-fit keeps its shape */
.cl{width:84px;height:42px;border-radius:8px;display:grid;grid-template-rows:100%;place-items:center;padding:5px 8px;flex:none;overflow:hidden;color:#fff;font:800 13px var(--head)}
.cl img{width:auto;height:100%;object-fit:contain}

/* Keyboard focus: navy on light surfaces (yellow on white is ~1.1:1), yellow on the dark v6 surfaces
   and on the red offer card (navy on --red-dark is ~1.9:1). The 2px offset leaves a gap of the
   surface colour, so a yellow .btn-y there still shows its yellow ring. */
:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
header.site :focus-visible,footer.site :focus-visible,.hero :focus-visible,.home-head :focus-visible,.verdict :focus-visible,.def :focus-visible,.offer .l :focus-visible{outline-color:var(--yellow)}

@media (max-width:1239px){
  .motm{padding:0}
  .motm-art{display:none}
}
@media (max-width:1100px){
  .home-head h1{font-size:38px}
}
@media (max-width:900px){
  .home-head .wide{grid-template-columns:1fr;gap:0}
  .motm{margin-top:24px;max-width:440px}
}
/* The header switches to the menu below 820px: from about 760px down, the logo and the four nav links no longer fit on one line. */
@media (max-width:820px){
  nav.main{display:none}
  .menu{display:block}
}
@media (max-width:640px){
  .brand svg{width:203px;height:36px}
  .home-head h1{font-size:32px}
  .motm-card{padding:16px 16px 18px}
  .motm-id{margin:10px 0 14px}
  .motm-lg{width:92px;height:54px}
  .motm-id b{font-size:20px}
  .rc-shot{float:none;width:100%;height:180px;margin:2px 0 14px}
  .page-head h1,.author-hero h1{font-size:28px}
  .author-hero{grid-template-columns:1fr;gap:16px}
  .notfound{padding-top:40px}
  .notfound h1{font-size:30px}
  .shots .strip{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:12px}
  .shot.phone img,.shots img.phone{border-width:7px;border-radius:24px}
}

/* Phones: larger reading text (owner feedback, 2026-10-20). Body copy is 18px, a step above the desktop
   17px (34–41 characters a line from 360 to 430px wide), and the text people read through keeps its
   place below it: lists and boxes 17px, tables 16.5px, captions, card lists, byline and footer
   14.5–15px. Uppercase labels and badges grow a little or keep their size. */
@media (max-width:640px){
  body{font-size:18px}
  .lead{font-size:20px}
  .rc-body p,.callout,.faq details p,.def{font-size:18px}
  .faq summary{font-size:17.5px}
  .pc ul,.verdict li,.facts,.toc li,.safety ul,.author-box p,.pick p,.crit p{font-size:17px}
  table.data,table.data th[scope=row]{font-size:16.5px}
  .score-row,.byline,.row ul,.rc-head .mt,.motm-x,.motm-nm,.author-box .links a,footer.site{font-size:15px}
  .crumbs,.rate,.chip,.small,.row .bn span,.row .cta a.rev,.shot figcaption,.shots figcaption,table.data caption,.foot-legal{font-size:14.5px}
  .speed,.tile span,.toc .cap span{font-size:13.5px}
  table.data th,.author-box .role{font-size:13px}
  .row .bn .e,.pick .tag{font-size:12px}
}

/* back to top: <a class="totop" href="#top">, fixed bottom right on every page, no JS. Where the browser
   has scroll-driven animations it fades in over the first 200–400px of scrolling and stays hidden on a
   page too short to scroll; elsewhere it is always shown. Red focus ring: it can sit over the navy footer. */
.totop{position:fixed;right:16px;bottom:16px;z-index:25;width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--yellow);display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 18px rgba(12,18,33,.28)}
.totop:hover{background:var(--red);color:#fff}
.totop:focus-visible{outline-color:var(--red)}
.totop svg{display:block}
/* room under the footer's last line, so the button never covers it at the end of the page */
footer.site{padding-bottom:78px}
@supports (animation-timeline:scroll()){
  .totop{opacity:0;visibility:hidden;animation:totop auto linear both;animation-timeline:scroll(root);animation-range:200px 400px}
}
@keyframes totop{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}