/* The Gastropig — Non-Gamstop guide. Base + components.
   Palette: teal brand, ONE reserved accent (orange) used only on CTAs. */
:root{
  --ink:#14212e; --muted:#5c6a78; --line:#e6eaef; --bg:#f4f6f8; --card:#fff;
  --brand:#0f766e; --brand-d:#0b3f45; --brand-2:#12908a;
  --cta:#f97316; --cta-d:#ea6a0c; --cta-ink:#ffffff;      /* reserved: CTAs only */
  --hero1:#0a1f2b; --hero2:#0e5b56; --hero-glow:#1ba39a;
  --gold:#eab308; --ok:#0f766e; --bad:#dc2626;
  --radius:14px; --shadow:0 6px 22px rgba(16,32,40,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.65;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.wrap,.container{max-width:1060px;margin:0 auto;padding:0 20px}
a{color:var(--brand)}
img{max-width:100%}
h1,h2,h3,h4{line-height:1.25;color:var(--ink)}
h2{font-size:1.5rem;margin:2.2rem 0 .6rem;scroll-margin-top:90px}
h3{font-size:1.15rem;margin:1.4rem 0 .4rem}

/* ---------- responsible-gambling topbar (replaces advertiser disclosure) ---------- */
.topbar{background:#08161e;color:#cdd8dd}
.disclosure{max-width:1060px;margin:0 auto;padding:.45rem 20px;font-size:.78rem;display:flex;gap:.6rem;align-items:center;justify-content:center;text-align:center}
.disclosure .age{background:var(--cta);color:#fff;font-weight:800;border-radius:5px;padding:.05rem .4rem;font-size:.72rem}
.disclosure a{color:#fff}
.disc-short{display:none}

/* ---------- header + mega nav ---------- */
.hdr{background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.hdr-in{display:flex;align-items:center;gap:1.2rem;padding:.6rem 20px}
.logo{font-weight:800;font-size:1.25rem;letter-spacing:.02em;text-decoration:none;color:var(--brand-d)}
.logo b{color:var(--cta)}
.nav-links{display:flex;align-items:center;gap:.3rem;margin-left:auto}
.nav-item{position:relative}
.nav-row{display:flex;align-items:center}
.nav-top{padding:.55rem .7rem;text-decoration:none;color:var(--ink);font-weight:700;font-size:.92rem;border-radius:8px}
.nav-top:hover{background:var(--bg)}
.caret{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.7rem;padding:.2rem}
.submenu{position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.8rem;display:none;z-index:50}
.submenu--wide{min-width:520px}
.nav-item:hover .submenu,.nav-item.open .submenu{display:block}
.submenu-cols{display:flex;gap:1.4rem}
.submenu-h{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:.2rem 0 .4rem;font-weight:700}
.submenu a{display:block;padding:.28rem .3rem;text-decoration:none;color:var(--ink);font-size:.9rem;border-radius:6px}
.submenu a:hover{color:var(--brand);background:var(--bg)}
.state-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.join-btn{margin-left:.4rem;background:var(--cta);color:var(--cta-ink)!important;text-decoration:none;font-weight:800;padding:.55rem 1rem;border-radius:9px;font-size:.92rem}
.join-btn:hover{background:var(--cta-d)}
.burger{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;margin-left:auto;color:var(--ink)}

/* ---------- comparison table ---------- */
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);margin:1.2rem 0}
.op-table{border-collapse:collapse;width:100%;min-width:820px;font-size:.9rem}
.op-table thead th{position:sticky;top:0;background:var(--brand-d);color:#eaf5f3;text-align:left;padding:.7rem .6rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.op-table td{padding:.7rem .6rem;border-top:1px solid var(--line);vertical-align:middle}
.op-table tbody tr:nth-child(even){background:#fafcfc}
.op-table tbody tr.is-top{background:linear-gradient(90deg,#fff6ee,#fff)!important;box-shadow:inset 4px 0 0 var(--cta)}
.rank-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--bg);color:var(--muted);font-weight:800;font-size:.85rem}
tr.is-top .rank-badge{background:var(--cta);color:#fff}
.op-logo{display:block;width:104px;height:52px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px}
.op-card .op-logo{width:122px;height:60px}
.logo-chip{display:inline-flex;align-items:center;justify-content:center;width:104px;height:52px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:800;font-size:.82rem;text-align:center;padding:0 .3rem;letter-spacing:.01em}
.op-bonus{font-weight:700;color:var(--brand-d)}
.rating{display:inline-flex;align-items:center;gap:.2rem;font-weight:800;background:#fff7e0;color:#8a6d00;border:1px solid #f2e2a8;border-radius:7px;padding:.1rem .4rem;font-size:.85rem}
.rating::before{content:"★";color:var(--gold)}
.tag-warn{color:var(--bad);font-size:.72rem;font-weight:700;display:block}
.btn{display:inline-block;background:var(--cta);color:var(--cta-ink)!important;text-decoration:none;font-weight:800;padding:.6rem .9rem;border-radius:9px;text-align:center;min-width:118px;min-height:44px;line-height:1.55;white-space:nowrap}
.btn:hover{background:var(--cta-d)}
.btn.sm{padding:.45rem .8rem;min-width:0}

/* ---------- mobile card rows (shown ≤760px; table hidden) ---------- */
.op-cards{display:none}
.op-card2{position:relative;border:1px solid var(--line);border-radius:16px;background:#fff;padding:1.1rem 1rem .95rem;margin:.9rem 0;text-align:center;box-shadow:var(--shadow)}
.op-card2.is-top{border:2px solid var(--cta);background:linear-gradient(180deg,#fff8ef,#fff)}
.oc-rank{position:absolute;top:.7rem;left:.85rem;font-weight:800;font-size:1.05rem;color:var(--brand)}
.op-card2.is-top .oc-rank{color:var(--cta)}
.oc-logo{width:156px;height:88px;margin:.1rem auto .7rem;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fff}
.oc-logo img{max-width:80%;max-height:62%;object-fit:contain}
.oc-badge{display:inline-block;background:var(--brand-d);color:#fff;font-weight:800;font-size:.68rem;letter-spacing:.03em;text-transform:uppercase;padding:.3rem .7rem;border-radius:6px;margin-bottom:.55rem}
.oc-name{font-size:1.25rem;font-weight:800;margin:.1rem 0 .25rem}
.oc-blurb{color:var(--muted);margin:0 0 .85rem}
.oc-cta{display:block;width:100%;font-size:1rem;padding:.8rem}
.oc-fine{font-size:.72rem;color:var(--muted);margin-top:.6rem}

/* ---------- EEAT pages (authors, methodology, legal) ---------- */
.eeat p,.eeat ul,.eeat table.data{max-width:820px}
.eeat h2{margin-top:1.7rem}
.author-card{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;margin:.6rem 0;box-shadow:var(--shadow)}
.author-card > div{flex:1}
.avatar{flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:800;font-size:1.15rem;display:flex;align-items:center;justify-content:center}

/* ---------- table of contents ---------- */
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.3rem;margin:1.4rem 0}
.toc strong{display:block;margin-bottom:.4rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.toc ol{margin:0;padding-left:1.2rem;columns:2;column-gap:2rem}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

/* ---------- data tables ---------- */
table.data{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.92rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table.data th,table.data td{padding:.6rem .7rem;border-top:1px solid var(--line);text-align:left;vertical-align:top}
table.data thead th{background:var(--bg);border-top:0;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}

/* ---------- review cards ---------- */
.op-card{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;margin:1.3rem 0 .4rem;box-shadow:var(--shadow)}
.op-card .op-logo,.op-card .logo-chip{flex:0 0 auto}
.op-body{flex:1}
.op-body h3{margin:.1rem 0 .3rem}
.op-card .op-meta{color:var(--muted);font-size:.85rem}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:.4rem 0 1.4rem}
.proscons h4{margin:.2rem 0 .3rem;font-size:.9rem}
.pros,.cons{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem 1rem}
.pros{border-left:4px solid var(--ok)}
.cons{border-left:4px solid var(--bad)}
.proscons ul{margin:.2rem 0;padding-left:1.1rem;font-size:.9rem}

/* ---------- generic grids/cards/callouts ---------- */
.grid{display:grid;gap:1rem;margin:1rem 0}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem}
.card h4{margin:.1rem 0 .4rem}
.card a{text-decoration:none;font-weight:700}
.callout{border-radius:12px;padding:1rem 1.2rem;margin:1.2rem 0;background:#eefaf8;border:1px solid #c9ece7}
.callout.warn{background:#fff7ee;border-color:#f5d9b8}
.callout.tax{background:#eef3fb;border-color:#cddcf3}
.rg-block{background:#08161e;color:#dbe6ea;border-radius:var(--radius);padding:1.2rem 1.4rem;margin:1.6rem 0}
.rg-block h3{color:#fff;margin:.1rem 0 .4rem}
.rg-block a{color:#fff}

/* ---------- FAQ ---------- */
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem 1.1rem;margin:.55rem 0}
.faq summary{font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--cta);font-weight:800;margin-right:.5rem}
.faq details[open] summary::before{content:"–"}

/* ---------- footer ---------- */
.foot{background:#0a1922;color:#a9b6bd;margin-top:2.5rem;padding:2.4rem 0 3rem;font-size:.9rem}
.mega{font-weight:800;letter-spacing:.04em;color:#12303a;line-height:.9;margin-bottom:1rem;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1.4rem;margin-bottom:1.4rem}
.foot h4{color:#fff;font-size:.9rem;margin:0 0 .5rem}
.foot a{display:block;color:#a9b6bd;text-decoration:none;padding:.16rem 0}
.foot a:hover{color:#fff}
.badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.badges span{border:1px solid #2b3d47;border-radius:999px;padding:.15rem .6rem;font-size:.72rem}
.foot-legal{border-top:1px solid #1d2d36;padding-top:1rem;font-size:.8rem;color:#8ea0a8}
.foot-legal p{margin:.4rem 0}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;display:none;background:#08161e;padding:.5rem;z-index:60}
.sticky-cta a{display:block;max-width:520px;margin:0 auto;background:var(--cta);color:#fff;text-decoration:none;font-weight:800;text-align:center;padding:.7rem;border-radius:10px}

@media(max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav-links{position:fixed;inset:56px 0 auto 0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);padding:.6rem 20px 1rem;display:none;gap:.2rem;box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-item{width:100%}
  .submenu,.submenu--wide{position:static;min-width:0;box-shadow:none;border:0;padding:.2rem 0 .6rem .8rem;display:none}
  .nav-item.open .submenu{display:block}
  .submenu-cols{flex-direction:column;gap:.6rem}
  .burger{display:block}
  .join-btn{margin:.4rem 0 0}
  .toc ol{columns:1}
  .proscons{grid-template-columns:1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .disc-full{display:none}.disc-short{display:inline}
  .sticky-cta{display:block}
  .foot{padding-bottom:4.5rem}
}