/* Geisha's Revenge Slots — production stylesheet (mobile-first) */
:root{
  --bg:#140109;--surface:#20040f;--surface-2:#2c0817;--ink:#f7ecEf;--ink-soft:#d9c3cc;
  --line:#4a1226;--gold:#e8c163;--gold-2:#f4d98a;--red:#c31432;--red-2:#e03252;
  --ok:#3fae6b;--no:#d5566b;--radius:14px;--maxw:1120px;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
  --gutter:clamp(20px,5vw,32px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;overflow-x:hidden}
body.no-scroll{overflow:hidden;position:fixed;width:100%;left:0;right:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25;font-weight:700;color:#fff}
h1{font-size:1.7rem;margin:.2rem 0 .6rem}
h2{font-size:1.35rem;margin:1.8rem 0 .7rem;color:var(--gold-2)}
h3{font-size:1.1rem;margin:1.2rem 0 .5rem;color:var(--gold)}
p{margin:.6rem 0}
.container,
.site-container{
  width:min(100%,var(--maxw));
  margin-inline:auto;
  padding-inline:max(var(--gutter),var(--safe-l)) max(var(--gutter),var(--safe-r));
  box-sizing:border-box;
}
.page-intro{padding-top:0;padding-bottom:0}
.section{padding:14px 0}

/* Skip link */
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:#fff;color:#000;padding:8px;z-index:200}

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(20,1,9,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding-top:var(--safe-t)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff}
.brand img{width:38px;height:35px;border-radius:8px}
.brand span{font-size:.98rem}
.nav-desktop{display:none}
.burger{display:inline-flex;flex-direction:column;gap:4px;background:transparent;border:1px solid var(--line);border-radius:10px;padding:9px 10px;cursor:pointer}
.burger span{width:22px;height:2px;background:var(--gold-2);display:block}

/* Mobile menu overlay */
.menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:.2s;z-index:90}
.menu-backdrop.open{opacity:1;visibility:visible}
.menu-panel{position:fixed;top:0;right:0;height:100%;width:min(86%,360px);background:var(--surface);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .25s ease;z-index:100;overflow-y:auto;
  padding:calc(16px + var(--safe-t)) 18px calc(24px + var(--safe-b))}
.menu-panel.open{transform:translateX(0)}
.menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.menu-close{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:6px 10px;font-size:1.1rem;cursor:pointer}
.menu-group{margin:12px 0}
.menu-group b{display:block;color:var(--gold);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.menu-group a{display:block;color:var(--ink);padding:9px 6px;border-bottom:1px solid rgba(255,255,255,.05)}
.menu-group a:hover{color:var(--gold-2);text-decoration:none}

/* Hero */
.hero{position:relative;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface-2),var(--bg))}
.hero-in{padding:22px 0 18px}
.eyebrow{color:var(--gold);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.lead{color:var(--ink-soft);font-size:1.02rem}

/* Trust strip */
.trust{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.trust .chip{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.8rem;color:var(--ink-soft)}
.trust .chip b{color:var(--gold-2)}

/* Figures / screenshots */
figure{margin:16px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px}
figure img{border-radius:10px;margin:0 auto}
figcaption{color:var(--ink-soft);font-size:.85rem;margin-top:8px;text-align:center}

/* Quick facts */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.facts .f{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.facts .f small{display:block;color:var(--gold);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.facts .f b{font-size:1rem;color:#fff}

/* Tables — shell > scroll > table (only scroll area moves horizontally) */
.table-shell{width:100%;max-width:100%;margin:16px 0;box-sizing:border-box}
.table-scroll,.table-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.table-shell table,.table-scroll table,.table-container table{border-collapse:collapse;width:100%;min-width:520px}
caption{caption-side:top;text-align:left;padding:10px 12px;color:var(--gold-2);font-weight:600}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;font-size:.92rem}
thead th{background:var(--surface-2);color:var(--gold)}
tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
td img{width:44px;height:auto;display:inline-block}

/* Pros/Cons */
.pc{display:grid;grid-template-columns:1fr;gap:12px;margin:14px 0}
.pc .col{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.pc ul{list-style:none;margin:0;padding:0}
.pc li{padding:6px 0 6px 26px;position:relative}
.pc li::before{position:absolute;left:0;top:8px;width:16px;height:16px;background-size:cover;content:""}
.pc .pros li::before{background-image:url(/assets/img/icon-plus.png)}
.pc .cons li::before{background-image:url(/assets/img/icon-minus.png)}

/* Cards / related / casino */
.cards{display:grid;grid-template-columns:1fr;gap:12px;margin:14px 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
.card h3{margin:.1rem 0 .3rem}
.casino{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:14px 0}
.casino img{width:96px;height:auto;border-radius:10px}

/* Buttons / CTA */
.btn{display:inline-block;padding:12px 20px;border-radius:12px;font-weight:700;text-align:center;cursor:pointer;border:1px solid transparent}
.btn:hover{text-decoration:none}
.btn-aff{background:linear-gradient(180deg,var(--red-2),var(--red));color:#fff;box-shadow:0 6px 18px rgba(195,20,50,.35)}
.btn-demo{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#2a0410}
.btn-nav{background:var(--surface-2);color:var(--gold-2);border-color:var(--line)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.cta-row .btn{flex:1 1 auto;min-width:160px}

/* Demo box */
.demo{position:relative;text-align:center;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:14px 0;background:#000}
.demo .badge{position:absolute;top:8px;right:8px;width:52px;height:52px;z-index:3;opacity:.9}
.demo .ov{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:1}
.demo .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2}
.demo iframe{width:100%;min-height:520px;border:0;display:block}

/* FAQ accordion */
.faq{margin:14px 0}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:10px 0;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:14px 44px 14px 14px;position:relative;font-weight:600;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:12px;font-size:1.4rem;color:var(--gold-2)}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 14px 14px;color:var(--ink-soft)}

/* Breadcrumb */
.crumbs{font-size:.82rem;color:var(--ink-soft);padding:10px 0}
.crumbs a{color:var(--gold-2)}
.crumbs span{opacity:.6;margin:0 6px}

/* Editorial / methodology */
.byline{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:0 0 8px;background:var(--surface)}
.byline-author{margin:0 0 6px;font-size:.95rem}
.byline-label{color:var(--ink-soft);font-weight:600;margin-right:6px}
.byline-desc{margin:0 0 8px;color:var(--ink-soft);font-size:.88rem;line-height:1.55}
.byline-date{margin:0;color:var(--gold);font-size:.82rem}
.ednote{background:var(--surface-2);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;padding:12px 14px;margin:18px 0}
.ednote b{display:block;color:var(--gold-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.ednote p{margin:0;color:var(--ink-soft);font-size:.92rem}
.pullquote{margin:20px 0;padding:14px 18px;border-left:3px solid var(--red-2);background:rgba(195,20,50,.08);border-radius:0 12px 12px 0;color:#fff;font-size:1.02rem;font-style:italic;line-height:1.5}
.fit-block .pros h3,.fit-block .cons h3{font-size:1rem}
.note{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:12px 14px;margin:16px 0;color:var(--ink-soft);font-size:.92rem}
.method{background:var(--surface);border:1px dashed var(--line);border-radius:12px;padding:14px;margin:18px 0;font-size:.9rem;color:var(--ink-soft)}
.method b{color:var(--gold-2)}
.eeat-foot{border-top:1px solid var(--line);padding-top:16px;margin-top:8px}
.eeat-row{margin:0 0 14px}
.eeat-row:last-child{margin-bottom:0}
.eeat-row b{display:block;color:var(--gold);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.eeat-row p{margin:0;color:var(--ink-soft);font-size:.88rem;line-height:1.55}
.eeat-row time{color:var(--gold-2)}
.not-found{color:var(--ink-soft);font-style:italic}

/* Related */
.related ul{display:grid;grid-template-columns:1fr;gap:8px;list-style:none;padding:0;margin:10px 0}
.related a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink)}
.related a:hover{color:var(--gold-2);text-decoration:none}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:var(--surface);margin-top:24px;padding:22px 0 calc(90px + var(--safe-b))}
.foot-grid{display:grid;grid-template-columns:1fr;gap:16px}
.foot-grid b{color:var(--gold);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:6px}
.foot-grid a{display:block;color:var(--ink-soft);padding:9px 0;font-size:.9rem}
.disclaimer{color:var(--ink-soft);font-size:.8rem;border-top:1px solid var(--line);margin-top:16px;padding-top:12px}

/* Sticky mobile CTA — same horizontal gutters as page content */
.sticky-cta{
  position:fixed;
  left:max(var(--gutter),var(--safe-l));
  right:max(var(--gutter),var(--safe-r));
  bottom:0;
  z-index:70;
  display:flex;
  gap:8px;
  width:auto;
  max-width:calc(100% - max(var(--gutter),var(--safe-l)) - max(var(--gutter),var(--safe-r)));
  padding:8px 0 calc(8px + var(--safe-b));
  background:rgba(20,1,9,.96);
  border-top:1px solid var(--line);
  box-sizing:border-box;
}
.sticky-cta .btn{flex:1;padding:12px 8px;font-size:.95rem;min-height:44px}

/* Responsive up */
@media(min-width:768px){
  :root{--gutter:32px}
  h1{font-size:2.2rem}h2{font-size:1.7rem}
  .facts{grid-template-columns:repeat(4,1fr)}
  .pc{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:repeat(3,1fr)}
  .related ul{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1024px){
  .nav-desktop{display:flex;gap:18px}
  .nav-desktop a{color:var(--ink);font-size:.92rem;font-weight:600}
  .nav-desktop a:hover{color:var(--gold-2);text-decoration:none}
  .burger{display:none}
  .sticky-cta{display:none}
  .site-footer{padding-bottom:22px}
  .related ul{grid-template-columns:repeat(3,1fr)}
}

/* ===== MOBILE GUTTER FIX (wins over everything) ===== */
@media (max-width:767px){
  main,
  .page-intro,
  .hero,
  .hero-in,
  .section,
  .article-header,
  .content,
  .crumbs,
  .cta-row,
  .trust,
  .media-block,
  .spec-card,
  .table-scroll,
  .table-shell,
  .casino,
  figure{
    box-sizing:border-box;
  }

  .site-container,
  .container,
  .article-container,
  .page-intro,
  .section__inner,
  .content-container,
  .header-in,
  #main.site-container,
  #main.container{
    width:100%;
    max-width:100%;
    padding-left:20px!important;
    padding-right:20px!important;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
  }

  .crumbs,
  h1,
  .lead,
  .hero p,
  .cta-row,
  .trust,
  .hero figure,
  .hero img,
  .media-block,
  .spec-card,
  .table-scroll,
  .table-shell{
    max-width:100%;
  }

  html,
  body{
    overflow-x:hidden;
  }

  .sticky-cta{
    left:20px!important;
    right:20px!important;
    width:auto!important;
    max-width:calc(100% - 40px)!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}