/* ==========================================================
   Firefruit Sevens Classic – slot review (et)
   Mobile-first, no framework
   Palette taken from the game: ember background, furnace red,
   flame orange, jackpot gold + the three jackpot tier colours.
   ========================================================== */

:root{
  --ember:#1E0704;
  --ember-2:#2A0B06;
  --furnace:#4A1109;
  --red:#C21A0C;
  --flame:#FF6B1A;
  --gold:#FFC93C;
  --gold-deep:#E39A12;
  --cream:#FFF1DC;
  --muted:#E3C3A6;
  --line:rgba(255,201,60,.22);
  --super:#5B1A8C;
  --grand:#146030;
  --major:#1B3F94;

  --font-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --font-body:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --wrap:1180px;
  --header-h:60px;
  --sticky-h:0px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

body{
  margin:0;
  background:var(--ember);
  color:var(--cream);
  font:400 1rem/1.65 var(--font-body);
  overflow-x:hidden;
  padding-bottom:var(--sticky-h);
  position:relative;
}
/* blurred fire behind the whole page (fixed layer, works on iOS too) */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:#1E0704 url("../images/fire-bg.webp") center bottom/cover no-repeat;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
a:hover{color:#FFE08A}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 16px}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--gold);color:var(--ember);padding:8px 14px;border-radius:var(--r-sm);font-weight:700}
.skip:focus{left:8px}

/* ---------- typography ---------- */
h1,h2,h3{font-family:var(--font-display);line-height:1.08;margin:0 0 .5em;letter-spacing:.2px}
h1{font-size:clamp(2.1rem,7vw,3.9rem);font-weight:800;font-style:italic;
   background:linear-gradient(180deg,#FFE9A8 0%,var(--gold) 45%,var(--flame) 100%);
   -webkit-background-clip:text;background-clip:text;color:transparent;
   filter:drop-shadow(0 3px 0 rgba(90,10,0,.55))}
h2{font-size:clamp(1.65rem,4.6vw,2.35rem);font-weight:800;color:var(--cream);margin-top:.2em}
h3{font-size:clamp(1.3rem,3.4vw,1.6rem);font-weight:700;color:var(--gold);margin-top:1.6em}
p{margin:0 0 1em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:.7em 1.4em;border-radius:999px;border:0;cursor:pointer;
  font:700 1.05rem/1 var(--font-body);text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.btn--cta{
  color:#2A0905;
  background:linear-gradient(180deg,#FFE27A 0%,var(--gold) 45%,var(--gold-deep) 100%);
  box-shadow:0 4px 0 #9A5A06,0 8px 18px rgba(255,120,20,.25);
}
.btn--cta:hover{color:#2A0905;transform:translateY(-2px);box-shadow:0 6px 0 #9A5A06,0 12px 24px rgba(255,120,20,.35)}
.btn--cta:active{transform:translateY(2px);box-shadow:0 2px 0 #9A5A06}
.btn--ghost{color:var(--gold);background:transparent;box-shadow:inset 0 0 0 2px var(--gold)}
.btn--ghost:hover{background:rgba(255,201,60,.12);color:#FFE08A}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(30,7,4,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);gap:12px;flex-wrap:wrap}
.brand img{width:190px;height:auto}
.nav-toggle{
  width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--cream)
}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .2s ease}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0}
.nav-toggle-bars::before{top:-6px}.nav-toggle-bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}

.main-nav{display:none;width:100%;padding:4px 0 12px}
.main-nav.is-open{display:flex;flex-direction:column}
.main-nav a{color:var(--cream);text-decoration:none;font-weight:500;padding:10px 4px;border-top:1px solid rgba(255,201,60,.1)}
.main-nav a:hover{color:var(--gold)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:40px 0 56px;
  background:linear-gradient(180deg,#1A0503 0%,#240805 55%,#3A0C06 100%);
}
/* animated fire (canvas, see main.js) — lives only in this block */
.hero-fire{
  position:absolute;left:-4%;right:-4%;bottom:-6%;width:108%;height:78%;z-index:-1;
  filter:blur(14px) saturate(1.15);opacity:.95;pointer-events:none;
}
.hero::before{ /* dark veil at the top so the heading stays crisp */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,5,3,.92) 0%,rgba(26,5,3,.55) 38%,rgba(26,5,3,0) 70%);
}
.hero::after{ /* smooth hand-over to the rest of the page */
  content:"";position:absolute;left:0;right:0;bottom:0;height:40px;z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(30,7,4,.9));
}
.hero-inner{position:relative;text-align:left}
.hero h1{max-width:980px;text-wrap:balance}
.hero-grid{display:grid;gap:22px;align-items:center;margin-top:8px}
.hero-text{max-width:62ch;color:var(--cream);text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 18px rgba(26,5,3,.9)}
.hero-text p:first-child{font-size:1.1rem}
.hero-card{
  width:100%;max-width:340px;justify-self:center;padding:16px 18px 18px;border-radius:var(--r-lg);text-align:left;
  background:rgba(26,6,3,.82);border:1px solid rgba(255,201,60,.4);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 4px rgba(255,107,26,.12);
}
.hero-logo{
  width:100%;max-width:250px;height:auto;margin:-4px auto 8px;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);
}
.hero-stats{width:100%;border-collapse:collapse;font-size:.92rem}
.hero-stats th,.hero-stats td{padding:7px 0;border-bottom:1px dashed rgba(255,201,60,.2);vertical-align:baseline}
.hero-stats tr:last-child th,.hero-stats tr:last-child td{border-bottom:0}
.hero-stats th{font-weight:400;color:var(--muted);text-align:left;padding-right:10px}
.hero-stats td{text-align:right;font-weight:700;color:var(--cream);white-space:nowrap}
.hero-stats tr:nth-child(2) td,.hero-stats tr:nth-child(6) td{color:var(--gold)}
.hero-card-btn{width:100%;margin-top:14px}

/* ---------- demo cabinet ---------- */
.demo-section{padding:10px 0 8px}
.demo-cabinet{
  display:grid;gap:12px;
  grid-template-columns:1fr;
  grid-template-areas:"jp" "screen" "bar";
  padding:12px;border-radius:var(--r-lg);
  background:
    radial-gradient(80% 60% at 50% 0%,rgba(255,107,26,.35),transparent 70%),
    linear-gradient(180deg,#5A1409,#2A0B06);
  box-shadow:0 0 0 1px rgba(255,201,60,.25),0 20px 50px rgba(0,0,0,.45);
}
.demo-jackpots{grid-area:jp;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.jp{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6px 4px 8px;border-radius:12px;
  border:2px solid var(--gold);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.45),0 0 12px rgba(255,160,40,.25);
  text-align:center;
}
.jp--super{background:linear-gradient(180deg,#7A2BB5,var(--super))}
.jp--grand{background:linear-gradient(180deg,#1E8A45,var(--grand))}
.jp--major{background:linear-gradient(180deg,#2A5BC8,var(--major))}
.jp-name{font:800 .95rem/1 var(--font-display);color:#F3E6E6;letter-spacing:.5px}
.jp-val{font:800 1.55rem/1.05 var(--font-display);color:var(--gold);text-shadow:0 2px 0 #7A3A00}

.demo-screen{
  grid-area:screen;position:relative;aspect-ratio:4/3;
  border-radius:var(--r-md);overflow:hidden;background:#120302;
  border:3px solid var(--gold);
  box-shadow:0 0 0 2px #7A3A00,0 0 24px rgba(255,160,40,.45);
}
.demo-poster{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(.62)}
.demo-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:radial-gradient(60% 60% at 50% 50%,rgba(30,7,4,.15),rgba(30,7,4,.55));
  padding:12px;text-align:center;
}
.btn--demo{
  min-height:56px;padding:.8em 1.8em;font-size:1.15rem;
  color:#2A0905;
  background:linear-gradient(180deg,#FFE27A 0%,var(--gold) 45%,var(--gold-deep) 100%);
  box-shadow:0 5px 0 #9A5A06,0 0 0 6px rgba(255,201,60,.18),0 12px 30px rgba(0,0,0,.5);
}
.btn--demo:hover{transform:translateY(-2px) scale(1.02)}
.btn--demo:active{transform:translateY(2px)}
.demo-note{margin:0;font-size:.85rem;color:var(--cream);text-shadow:0 1px 3px #000}

.demo-bar{
  grid-area:bar;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  background:rgba(0,0,0,.28);border-radius:999px;padding:8px 10px;
}
.demo-bar div{text-align:center}
.demo-bar dt{font-size:.78rem;color:var(--muted)}
.demo-bar dd{margin:0;font:800 1.2rem/1.1 var(--font-display);color:var(--cream)}

/* ---------- playable demo (mid-page) ---------- */
.sym-sprite{position:absolute;width:0;height:0;overflow:hidden}
.slot{
  display:grid;gap:12px;margin:1.4em 0 .6em;padding:12px;border-radius:var(--r-lg);
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"jp" "field" "btns" "auto" "stats" "pay" "note";
  background:
    radial-gradient(90% 50% at 50% 0%,rgba(255,107,26,.4),transparent 70%),
    linear-gradient(180deg,#5A1409,#2A0B06);
  box-shadow:0 0 0 1px rgba(255,201,60,.3),0 18px 44px rgba(0,0,0,.45);
  scroll-margin-top:calc(var(--header-h) + 12px);
}
.slot-jps{grid-area:jp;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot .jp-val{font-size:1.25rem;transition:transform .2s,color .2s}
.slot .jp.is-hit{animation:jpHit .5s ease-in-out 4;box-shadow:0 0 0 3px #fff,0 0 26px var(--gold)}
@keyframes jpHit{50%{transform:scale(1.06)}}

.slot-field{
  grid-area:field;position:relative;width:100%;max-width:480px;justify-self:center;aspect-ratio:1;
  border:3px solid var(--gold);border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(180deg,#260805,#140302);
  box-shadow:0 0 0 2px #7A3A00,0 0 26px rgba(255,160,40,.45),inset 0 0 30px rgba(0,0,0,.6);
}
.slot-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.cell{display:grid;place-items:center;border-right:1px solid rgba(255,201,60,.14);transition:background-color .2s}
.cell:nth-child(3n){border-right:0}
.cell svg{width:80%;height:80%;overflow:visible}
.cell.spin svg{filter:blur(2.5px) brightness(1.1);animation:reelJitter .1s linear infinite}
@keyframes reelJitter{0%{transform:translateY(-10%)}100%{transform:translateY(10%)}}
.cell.land svg{animation:land .22s ease-out}
@keyframes land{0%{transform:translateY(-12%)}70%{transform:translateY(4%)}100%{transform:none}}
.cell.win{background:radial-gradient(circle,rgba(255,201,60,.32),transparent 70%)}
.cell.win svg{animation:winPulse .7s ease-in-out 3}
@keyframes winPulse{50%{transform:scale(1.1)}}
.slot-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.slot-lines polyline{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.9;filter:drop-shadow(0 0 3px #FF6B1A)}
.slot-banner{
  position:absolute;left:10px;right:10px;bottom:10px;margin:0;padding:8px 12px;border-radius:999px;
  background:rgba(30,7,4,.9);border:1px solid rgba(255,201,60,.5);text-align:center;
  font:800 1.2rem/1.2 var(--font-display);color:var(--gold);
  opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none
}
.slot-banner.show{opacity:1;transform:none}
.slot-banner.big{font-size:1.55rem;background:linear-gradient(180deg,#7A1206,#2A0905);box-shadow:0 0 24px rgba(255,201,60,.6)}
.slot-banner .reset{pointer-events:auto;margin-left:8px;padding:4px 12px;border-radius:999px;border:0;background:var(--gold);color:#2A0905;font:700 .85rem var(--font-body);cursor:pointer}
.slot-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(30,7,4,.55)}

.slot-btns{grid-area:btns;display:flex;align-items:center;justify-content:center;gap:24px}
.round-btn{
  width:52px;height:52px;border-radius:50%;border:3px solid var(--cream);background:#1A0503;color:var(--cream);
  display:grid;place-items:center;cursor:pointer;font:800 1.4rem/1 var(--font-body);transition:background-color .15s,color .15s,transform .15s
}
.round-btn:hover{transform:scale(1.06)}
.round-btn[aria-pressed="true"],.round-btn.is-active{background:var(--gold);border-color:var(--gold);color:#2A0905}
.auto-label{font-size:1.25rem}
.round-btn.is-active .auto-label{font-size:1rem}
.spin-btn{
  width:88px;height:88px;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:var(--cream);
  border:4px solid rgba(255,241,220,.85);
  background:radial-gradient(circle at 50% 35%,#4A0F07,#140302 70%);
  box-shadow:0 0 0 4px rgba(255,107,26,.35),0 8px 20px rgba(0,0,0,.5);transition:transform .15s,box-shadow .15s
}
.spin-btn:hover{transform:scale(1.04);box-shadow:0 0 0 6px rgba(255,160,40,.45),0 8px 20px rgba(0,0,0,.5)}
.spin-btn:disabled{opacity:.55;cursor:default;transform:none}
.slot.is-spinning .spin-btn svg{animation:spinIcon .6s linear infinite}
@keyframes spinIcon{to{transform:rotate(360deg)}}

.slot-auto{grid-area:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.slot-auto-title{font-size:.9rem;color:var(--muted)}
.slot-auto button{min-width:48px;min-height:40px;padding:0 10px;border-radius:999px;border:1px solid var(--gold);background:transparent;color:var(--gold);font:700 .95rem var(--font-body);cursor:pointer}
.slot-auto button:hover{background:var(--gold);color:#2A0905}

.slot-stats{
  grid-area:stats;display:grid;grid-template-columns:1fr;gap:8px;
  background:rgba(0,0,0,.3);border-radius:18px;padding:10px
}
.ss{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 6px}
.ss-label{font-size:.85rem;color:var(--muted)}
.ss-val{font:800 1.3rem/1.1 var(--font-display);color:var(--cream);white-space:nowrap}
.ss--bet{background:rgba(255,241,220,.06);border-radius:999px;padding:4px}
.ss--bet > div{display:flex;flex-direction:column;align-items:center}
.bet-btn{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,241,220,.12);color:var(--cream);font:700 1.5rem/1 var(--font-body);cursor:pointer}
.bet-btn:hover{background:rgba(255,201,60,.3)}
.bet-btn:disabled{opacity:.35;cursor:default}

.slot-pay{grid-area:pay;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(0,0,0,.2)}
.slot-pay summary{cursor:pointer;padding:12px 14px;font-weight:500;color:var(--gold)}
.slot-pay .table-wrap{margin:0 10px 10px}
.table--pay th,.table--pay td{padding:8px 10px;vertical-align:middle}
.pay-sym{display:inline-flex;align-items:center;gap:10px}
.table--pay .pay-ico{width:32px;height:32px;flex:0 0 32px}
.table--pay td:last-child{text-align:right;white-space:nowrap}
.table--pay th:last-child{text-align:right}
.table--pay td:nth-child(2){font:800 1.05rem/1 var(--font-display);color:var(--gold)}
.table--pay td:last-child{font-weight:700}
.slot-note{grid-area:note;margin:0;font-size:.8rem;line-height:1.5;color:var(--muted);text-align:center}

@media (min-width:600px){
  .slot-stats{grid-template-columns:1fr auto 1fr;align-items:center}
  .ss{flex-direction:column;gap:0;justify-content:center}
  .ss--bet{flex-direction:row;gap:10px;padding:4px 6px}
}
@media (min-width:860px){
  .slot{
    padding:18px;gap:16px;
    grid-template-columns:130px minmax(0,1fr) 100px;
    grid-template-areas:"jp field btns" "auto auto auto" "stats stats stats" "pay pay pay" "note note note";
  }
  .slot-jps{grid-template-columns:1fr;align-content:center;gap:12px}
  .slot .jp-val{font-size:1.35rem}
  .slot-btns{flex-direction:column;gap:18px}
}

/* ---------- casinos (compact, top 6 + load more) ---------- */
.casinos{padding:28px 0 26px}
.casinos-title{margin-bottom:14px}
.casino-grid{display:grid;grid-template-columns:1fr;gap:10px}
.casino-card{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"head head" "bonus bonus" "stats stats" "cta cta" "terms terms";
  align-items:center;gap:6px 12px;padding:14px;border-radius:var(--r-md);
  background:rgba(34,9,5,.82);border:1px solid rgba(255,201,60,.2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color .18s ease,transform .18s ease;
}
.casino-card:hover{border-color:rgba(255,201,60,.65);transform:translateY(-2px)}
.casino-card.is-revealed{animation:cardIn .35s ease-out both}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cc-head{grid-area:head;display:flex;align-items:center;gap:10px;min-width:0}
.cc-rank{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#FFE27A,var(--gold-deep));color:#2A0905;font:800 1rem/1 var(--font-display)}
.cc-name{margin:0;font-size:1.35rem;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-bonus{grid-area:bonus;margin:0;font:800 1.15rem/1.2 var(--font-display);color:var(--gold)}
.cc-stats{grid-area:stats;list-style:none;margin:2px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cc-stats li{display:inline-flex;gap:5px;align-items:baseline;padding:3px 10px;border-radius:999px;background:rgba(255,241,220,.07);font-size:.8rem}
.cc-stats span{color:var(--muted)}
.cc-stats strong{color:var(--cream);white-space:nowrap}
.casino-card .btn--cta{grid-area:cta;width:100%;min-height:44px;font-size:1rem}
.cc-terms{grid-area:terms;margin:0;text-align:center;font-size:.72rem;color:var(--muted)}
.casino-more{display:flex;justify-content:center;margin-top:14px}
.casino-more .btn{background:rgba(30,7,4,.6)}

/* ---------- layout + toc ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding-top:22px;padding-bottom:40px;
  background:rgba(24,6,3,.9);border-top:1px solid var(--line)}
.toc{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--ember-2);
}
.toc summary{
  cursor:pointer;list-style:none;padding:14px 16px;font:800 1.3rem/1 var(--font-display);color:var(--gold);
  display:flex;justify-content:space-between;align-items:center
}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .2s}
.toc[open] summary::after{transform:rotate(-135deg)}
.toc ol{margin:0;padding:0 16px 14px 36px;counter-reset:none}
.toc li{padding:3px 0;color:var(--muted);font-size:.95rem}
.toc a{color:var(--cream);text-decoration:none}
.toc a:hover,.toc a.is-active{color:var(--gold)}
.toc a.is-active{font-weight:700}

/* ---------- article ---------- */
.article{min-width:0}
.article > section{padding:26px 0;border-top:1px solid rgba(255,201,60,.14)}
.article > section:first-child{border-top:0;padding-top:0}
.article p,.article li{max-width:72ch}

.list-check,.list-jp,.feature-list,.pc ul{list-style:none;padding:0;margin:0 0 1.1em}
.list-check li{position:relative;padding:6px 0 6px 30px}
.list-check li::before{
  content:"";position:absolute;left:4px;top:.72em;width:12px;height:12px;border-radius:3px;
  background:var(--flame);box-shadow:0 0 0 3px rgba(255,107,26,.25);transform:rotate(45deg)
}
.list-jp li{
  margin:0 0 8px;padding:10px 14px 10px 16px;border-radius:var(--r-sm);
  border-left:6px solid;background:rgba(255,255,255,.04)
}
.list-jp .is-major{border-color:#3C74F0}
.list-jp .is-grand{border-color:#2CB05A}
.list-jp .is-super{border-color:#A04BE6}

.feature-list{display:grid;gap:8px}
.feature-list li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-sm);background:var(--ember-2);border:1px solid rgba(255,201,60,.14)}
.fi{flex:0 0 30px;height:30px;border-radius:50%;border:2px solid var(--gold);display:grid;place-items:center;font:800 .95rem/1 var(--font-display);color:var(--gold)}
.fi--jp::before{content:"777";font-size:.72rem;color:#FF4A2A}
.fi--fb::before{content:"€"}
.fi--tu::before{content:"";width:10px;height:14px;background:var(--gold);clip-path:polygon(60% 0,0 58%,45% 58%,35% 100%,100% 40%,55% 40%)}
.fi--au::before{content:"A"}

/* figures */
.fig{margin:1.2em 0 1.4em}
.fig img{border-radius:var(--r-md);border:2px solid rgba(255,201,60,.45);background:#120302;width:100%}
.fig figcaption{margin-top:.5em;font-size:.85rem;color:var(--muted)}
.fig--side{max-width:260px;margin-left:auto;margin-right:auto}
.fig--narrow{max-width:170px}

/* tables */
.table-wrap{margin:1em 0 1.3em;border-radius:var(--r-md);border:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--ember-2)}
.table th,.table td{padding:11px 14px;text-align:left;border-bottom:1px solid rgba(255,201,60,.12);vertical-align:top}
.table thead th{background:linear-gradient(180deg,var(--red),#8E1A0B);color:var(--cream);font-family:var(--font-display);font-size:1.1rem;font-weight:700}
.table tbody tr:last-child th,.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:rgba(255,201,60,.05)}
.table tbody th{font-weight:500;color:var(--muted)}
.table--kv td{color:var(--cream);font-weight:500}
.table--symbols tbody th{color:var(--cream);font-weight:700}
.table--symbols td:last-child{font:800 1.15rem/1 var(--font-display);color:var(--gold)}
.tier{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.8rem;font-weight:500}
.tier-high .tier{background:rgba(255,74,42,.2);color:#FFB09E}
.tier-mid .tier{background:rgba(255,201,60,.16);color:var(--gold)}
.tier-low .tier{background:rgba(255,241,220,.1);color:var(--muted)}

/* stacked table on small screens */
@media (max-width:599px){
  .table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table--stack,.table--stack tbody,.table--stack tr,.table--stack th,.table--stack td{display:block;width:100%}
  .table--stack tr{border-bottom:2px solid rgba(255,201,60,.25)}
  .table--stack tbody tr:last-child{border-bottom:0}
  .table--stack th,.table--stack td{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,201,60,.08)}
  .table--stack th::before,.table--stack td::before{content:attr(data-label);color:var(--muted);font-weight:400}
  .table--stack th{background:rgba(194,26,12,.25);color:var(--gold)!important;font-weight:700!important}
  .table--stack td{color:var(--cream)}
}

/* RTP meter */
.rtp-meter{margin:4px 0 20px}
.rtp-bar{height:18px;border-radius:999px;overflow:hidden;background:#120302;border:2px solid var(--gold)}
.rtp-fill{width:96.08%;height:100%;background:linear-gradient(90deg,var(--red),var(--flame) 70%,var(--gold))}
.rtp-legend{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:.85rem;color:var(--muted)}
.rtp-legend span:first-child{color:var(--gold);font-weight:700}

/* pros / cons */
.proscons{display:grid;gap:14px;margin:1.2em 0}
.pc{padding:16px 18px;border-radius:var(--r-md);background:var(--ember-2);border:1px solid var(--line)}
.pc-title{font:700 1.15rem/1.25 var(--font-display);margin-bottom:.6em}
.pc--pros{border-top:4px solid #2CB05A}
.pc--cons{border-top:4px solid var(--red)}
.pc--pros .pc-title{color:#7BE39B}
.pc--cons .pc-title{color:#FF9A86}
.pc li{position:relative;padding:6px 0 6px 28px}
.pc li::before{position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;line-height:20px;text-align:center}
.pc--pros li::before{content:"+";background:#1E8A45;color:#fff}
.pc--cons li::before{content:"−";background:var(--red);color:#fff}

.inline-cta{margin-top:.4em}
.verdict-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.2em}
.verdict-cta .btn{flex:1 1 180px}

/* FAQ */
.faq{display:grid;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--ember-2);overflow:hidden;transition:border-color .2s}
.faq-item[open]{border-color:rgba(255,201,60,.55)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover h3{color:var(--gold)}
.faq-item h3{margin:0;font:500 1.02rem/1.4 var(--font-body);color:var(--cream);transition:color .15s}
.faq-item summary::after{
  content:"+";flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--gold);color:var(--gold);font:700 1.2rem/1 var(--font-body);transition:transform .2s
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 16px 4px;color:var(--muted)}

/* footer */
.site-footer{border-top:1px solid var(--line);background:#160402;margin-top:0;padding:28px 0 32px;font-size:.88rem;color:var(--muted)}
.footer-inner{display:grid;gap:8px;justify-items:start}
.footer-inner img{width:170px}
.site-footer p{margin:0}
.age{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--red);color:var(--cream);font-weight:700;font-size:.8rem;margin-right:6px;vertical-align:middle}

/* sticky mobile CTA (does not cover content: body gets padding) */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(30,7,4,.96);border-top:1px solid rgba(255,201,60,.4);
  transform:translateY(110%);transition:transform .25s ease;
}
.sticky-cta.is-visible{transform:none}
.sticky-info{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.sticky-info strong{font-family:var(--font-display);font-size:1.1rem}
.sticky-info span{font-size:.78rem;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-cta .btn{min-height:44px;padding:.6em 1.1em;flex:0 0 auto;font-size:.95rem}
body.has-sticky{--sticky-h:74px}

/* ================= breakpoints ================= */
@media (min-width:600px){
  .casino-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .casino-card{grid-template-areas:"head head" "bonus bonus" "stats stats" "cta cta" "terms terms"}
  .proscons{grid-template-columns:1fr 1fr}
  .fig--side{float:right;width:40%;max-width:260px;margin:.3em 0 1em 22px}
  .fig--narrow{width:28%;max-width:170px}
  .article section::after{content:"";display:table;clear:both}
  h3{clear:both}
}

@media (min-width:860px){
  :root{--header-h:68px}
  .wrap{padding:0 24px}
  .brand img{width:230px}
  .nav-toggle{display:none}
  .main-nav,.main-nav.is-open{display:flex;flex-direction:row;width:auto;padding:0;gap:4px}
  .main-nav a{border:0;padding:8px 12px;border-radius:999px}
  .main-nav a:hover{background:rgba(255,201,60,.1)}
  .header-inner{flex-wrap:nowrap}

  .hero{padding:56px 0 72px}
  .hero-grid{grid-template-columns:minmax(0,1fr) 330px;gap:40px;margin-top:18px}
  .hero-text{justify-self:start}
  .hero-card{justify-self:end}
  .demo-cabinet{
    grid-template-columns:150px 1fr;
    grid-template-areas:"jp screen" "jp bar";
    padding:18px;gap:16px;
  }
  .demo-screen{aspect-ratio:16/9}
  .demo-jackpots{grid-template-columns:1fr;align-content:center;gap:12px}
  .jp{padding:8px 6px 10px}
  .jp-name{font-size:1.15rem}
  .jp-val{font-size:2rem}
  .btn--demo{font-size:1.3rem;min-height:62px}
  .casino-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .cc-bonus{min-height:2.4em}

  /* sticky CTA is mobile-only */
  .sticky-cta{display:none}
  body.has-sticky{--sticky-h:0px}
}

@media (min-width:1100px){
  .layout{grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
  .toc-wrap{position:sticky;top:calc(var(--header-h) + 20px);max-height:calc(100vh - var(--header-h) - 40px);overflow:auto}
}