:root{
  --bg:#090909;
  --bg-soft:#0f0f10;
  --panel:#151516;
  --panel-2:#1c1c1e;
  --wine:#6e1018;
  --wine-dark:#3d080d;
  --red:#a71924;
  --gold:#d1aa55;
  --gold-soft:#e6ca87;
  --cream:#eee8dc;
  --white:#f7f7f5;
  --muted:#aaa7a1;
  --line:#2a2927;
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--cream);font:16px/1.75 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{width:min(calc(100% - 32px),var(--max));margin-inline:auto}
.narrow{max-width:820px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:#111;padding:10px 14px;z-index:99}.skip-link:focus{left:12px;top:12px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(9,9,9,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{min-height:78px;display:flex;align-items:center;gap:28px}
.brand{display:inline-flex;flex-direction:column;line-height:.95;min-width:164px}.brand-top{font-size:.78rem;letter-spacing:.25em;color:var(--gold-soft)}.brand-bottom{font-size:1.25rem;font-weight:800;letter-spacing:.08em;color:var(--white)}
.site-nav{margin-left:auto;display:flex;gap:22px;align-items:center}.site-nav a{font-size:.94rem;color:#ddd}.site-nav a:hover,.text-link:hover{color:var(--gold-soft)}
.nav-toggle{display:none;margin-left:auto;background:transparent;color:var(--white);border:1px solid var(--line);border-radius:8px;padding:9px 12px}
.hero{padding:78px 0 64px;background:radial-gradient(circle at 10% 20%,rgba(110,16,24,.35),transparent 38%),linear-gradient(180deg,#0b0b0c,#090909)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center}.hero h1{font-size:clamp(2.5rem,5vw,4.8rem);line-height:1.02;margin:.15em 0 .35em;color:var(--white);letter-spacing:-.04em}.lead{font-size:1.16rem;color:#cbc7c0;max-width:760px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:700;color:var(--gold)}
.hero-media img,.content-split img{border-radius:18px;border:1px solid var(--line);box-shadow:0 20px 70px rgba(0,0,0,.35)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:10px;font-weight:700}.btn-primary{background:var(--gold);color:#141414}.btn-secondary{border:1px solid var(--gold);color:var(--gold-soft)}
.section{padding:72px 0}.section-alt{background:var(--bg-soft);border-block:1px solid #151515}.prose-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:48px}.section h2{font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.16;color:var(--white);margin:0 0 18px}.section h3{font-size:1.2rem;color:var(--white);margin-top:0}.section p{color:#c9c5be}.text-link{color:var(--gold-soft);font-weight:700}.external::after{content:" ↗"}
.card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:24px}.card-list{align-self:start}.card-list>a{display:block;padding:14px 0;border-top:1px solid var(--line)}.card-list span{display:block;color:var(--muted);font-size:.9rem;margin-top:4px}
.content-split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}.content-split.reverse figure{order:2}.content-split.reverse>div{order:1}
.cards{display:grid;gap:18px}.cards.three{grid-template-columns:repeat(3,1fr)}.cards.two{grid-template-columns:repeat(2,1fr)}.section-heading{max-width:760px;margin-bottom:28px}
.rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}.ranking-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.ranking-list li{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}.ranking-list span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--wine);color:#fff;font-size:.8rem;font-weight:700}
.section-cta{margin-top:24px}.guide-links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.guide-links a{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.guide-links span{display:block;font-weight:800;color:var(--white);margin-bottom:5px}.guide-links small{display:block;color:var(--muted);line-height:1.5}
.reference-section{background:linear-gradient(180deg,rgba(110,16,24,.1),transparent)}
.site-footer{border-top:1px solid var(--line);background:#070707;padding:58px 0 24px}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:36px}.site-footer h2{font-size:1rem;color:var(--gold-soft);margin:0 0 12px}.site-footer a:not(.brand){display:block;color:#bdb8b0;margin:7px 0}.site-footer p{color:#99948c;max-width:360px}.footer-bottom{border-top:1px solid var(--line);margin-top:34px;padding-top:20px;color:#817d77;font-size:.9rem}.footer-brand{margin-bottom:18px}
@media (max-width:900px){.site-nav{display:none;position:absolute;top:78px;left:16px;right:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;flex-direction:column;align-items:stretch}.site-nav.is-open{display:flex}.nav-toggle{display:block}.hero-grid,.prose-grid,.content-split,.rank-grid{grid-template-columns:1fr}.content-split.reverse figure,.content-split.reverse>div{order:initial}.cards.three,.guide-links{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.wrap{width:min(calc(100% - 24px),var(--max))}.hero{padding:52px 0}.section{padding:54px 0}.cards.three,.cards.two,.guide-links,.ranking-list,.footer-grid{grid-template-columns:1fr}.hero h1{font-size:2.6rem}.hero-actions{flex-direction:column}.btn{width:100%}}

/* =========================================================
   GLOBAL ARTICLE LAYOUT
   Shared by /poker-online/, /bandarqq/ and future inner pages
   ========================================================= */
.narrow-wide{max-width:1040px}
.breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:24px;
  color:var(--muted);
  font-size:.9rem;
}
.breadcrumbs a{color:var(--gold-soft)}
.breadcrumbs span{color:var(--muted)}

.article-hero{
  padding:52px 0 34px;
  background:
    radial-gradient(circle at 12% 18%,rgba(110,16,24,.28),transparent 36%),
    linear-gradient(180deg,#0b0b0c,#090909);
}
.article-hero h1{
  font-size:clamp(2.35rem,5vw,4.4rem);
  line-height:1.06;
  letter-spacing:-.035em;
  color:var(--white);
  margin:.2em 0 .32em;
}
.article-cover,
.article-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:46px;
  align-items:center;
}
.article-cover img,
.article-hero-grid img,
.hero-media img{
  width:100%;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:0 20px 70px rgba(0,0,0,.35);
}

.article-section{padding-top:42px}
.article-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:46px;
  align-items:start;
}
.article-body,
.article-content{
  min-width:0;
}
.article-body h2,
.article-content h2{
  margin:2.1em 0 .65em;
  font-size:clamp(1.55rem,2.7vw,2.15rem);
  line-height:1.2;
  color:var(--white);
}
.article-body h3,
.article-content h3{
  margin:1.65em 0 .55em;
  color:var(--white);
}
.article-body p,
.article-content p,
.article-body li,
.article-content li{
  color:#c9c5be;
}
.article-body a,
.article-content a{
  color:var(--gold-soft);
  text-decoration:underline;
  text-decoration-color:rgba(230,202,135,.3);
  text-underline-offset:3px;
}
.article-body ul,
.article-content ul,
.article-body ol,
.article-content ol{
  padding-left:1.35rem;
}
.article-body li+li,
.article-content li+li{
  margin-top:.5rem;
}

.article-sidebar{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.sticky-card,
.sidebar-card{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
}
.sticky-card{
  position:sticky;
  top:100px;
}
.sidebar-title{
  margin:0 0 12px;
  color:var(--white);
  font-weight:800;
}
.sidebar-card ul{
  margin:0;
  padding-left:1.15rem;
}
.sidebar-card li{
  color:#bbb6ae;
  margin:.45rem 0;
}
.sidebar-card a{
  display:block;
  color:var(--gold-soft);
  padding:7px 0;
  border-top:1px solid rgba(255,255,255,.05);
}

.callout{
  margin:30px 0;
  padding:22px 24px;
  border:1px solid var(--line);
  border-left:4px solid var(--gold);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(209,170,85,.07),var(--panel));
}
.callout strong{color:var(--white)}
.callout p:last-child{margin-bottom:0}

.article-inline-media,
.article-media{
  margin:34px 0;
}
.article-inline-media img,
.article-media img{
  width:100%;
  border-radius:16px;
  border:1px solid var(--line);
}
.article-inline-media figcaption,
.article-media figcaption{
  margin-top:9px;
  color:var(--muted);
  font-size:.88rem;
}

.steps-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin:26px 0;
}
.steps-grid>*{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px;
}
.term-list{
  display:grid;
  gap:10px;
  margin:24px 0;
}
.term-list>*{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 18px;
}
.next-reading,
.related-box{
  margin-top:44px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
}
.next-reading h2,
.related-box h2{
  margin-top:0;
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.related-grid a{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:17px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#111113;
  color:var(--gold-soft);
  text-decoration:none;
}
.related-grid span{
  color:var(--muted);
  font-size:.9rem;
  line-height:1.5;
}

/* Compatibility aliases for the first BandarQQ draft */
.container{
  width:min(calc(100% - 32px),var(--max));
  margin-inline:auto;
}
.main-nav{
  margin-left:auto;
  display:flex;
  gap:22px;
  align-items:center;
}
.main-nav a{
  font-size:.94rem;
  color:#ddd;
}
.main-nav a:hover,
.main-nav a[aria-current="page"]{
  color:var(--gold-soft);
}

/* Mark current page in the shared navigation */
.site-nav a[aria-current="page"]{
  color:var(--gold-soft);
}

/* Mobile article layouts */
@media (max-width:900px){
  .article-cover,
  .article-hero-grid,
  .article-layout{
    grid-template-columns:1fr;
  }
  .article-sidebar{
    order:2;
  }
  .sticky-card{position:static}
  .related-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .main-nav{
    width:100%;
    margin:16px 0 0;
    flex-wrap:wrap;
  }
}
@media (max-width:620px){
  .container{width:min(calc(100% - 24px),var(--max))}
  .article-hero{padding:38px 0 24px}
  .article-hero h1{font-size:2.45rem}
  .article-section{padding-top:26px}
}

.hero-copy{min-width:0}