/* ==========================================================================
   Pokokpedia — design system
   A casino/poker REFERENCE work, not a soft lifestyle blog. The structure is
   the one casino.org and casinopedia use: dark authoritative chrome (header,
   footer, breadcrumb rail) wrapped around a light, dense, high-contrast
   reading column.

   Ink-navy carries the authority, card-red is the single action colour, and
   gold appears only on things that assert a fact — ratings, badges, the
   verified rule. Deliberately NOT the previous botanical/green identity.

   Type: Archivo (condensed-ish grotesque) for headings against IBM Plex Sans
   for body, plus IBM Plex Mono for every figure. All three reference sites
   run a single sans; setting the game maths in tabular mono is the one thing
   none of them does, and it is the most "reference work" gesture available.

   Equal polish in en / ms / zh — the CJK tree gets its own face + leading.
   ========================================================================== */

:root{
  /* ---- chrome: masthead, footer, table headers ---- */
  --navy-deep:#141C2E;       /* navy masthead — institutional, not black */
  --navy:#243252;            /* breadcrumb rail, secondary dark */

  /* ---- vermilion: the ONE saturated brand hue, used narrowly ----------
     All three reference sites run exactly one — casinopedia #762CE8,
     casino.org #3002B2, pokerology #BD0908. ---- */
  --accent:#E03A16;
  --accent-deep:#BC2E0F;     /* pressed / link hover */
  --accent-dark:#8E2109;     /* text on tint, high contrast */
  --accent-light:#F08A6B;    /* on dark grounds only */
  --accent-tint:#FDEDE7;     /* pale wash: active nav, chips, callouts */

  /* ---- brass: VALUE JUDGEMENTS ONLY — ratings, rank medals, verified.
     Never a surface, never a CTA. This is the rule all three follow. ---- */
  --gold:#D89B1E;
  --gold-deep:#B07C14;
  --gold-tint:#FCF3DC;

  /* ---- surfaces: cool grey. NEVER cream — that is the softness relapse. */
  --surface:#F4F5F7;         /* page ground + table zebra */
  --surface-2:#E9EBEF;       /* banded sections */
  --paper:#FFFFFF;           /* the reading column */

  /* ---- ink + lines ---- */
  --ink:#1A1E26;
  --ink-2:#3E4553;
  --mute:#666D79;            /* meta, breadcrumbs, T&Cs micro-copy */
  --line:#D2D7DE;            /* every hairline, 1px, everywhere */
  --line-2:#E7EAEF;

  /* ---- layout: reference-book measure, not blog-narrow ---- */
  --max:1240px;
  --narrow:820px;
  --radius:6px;
  --radius-sm:4px;
  --radius-pill:999px;       /* the language toggle and breadcrumbs only */
  --shadow:none;             /* separation is hairlines + tint, not elevation */
  --shadow-lift:0 2px 4px rgba(20,22,28,.07),0 10px 22px rgba(20,22,28,.08);

  /* ---- type: condensed grotesque headings over a SERIF body ------------
     Nothing else in this market sets body copy in a serif, and it is the
     fastest way to read as a reference work rather than an affiliate site.
     Mono carries every figure so game maths lines up in columns. ---- */
  --font-display:"Archivo Narrow","Archivo",system-ui,-apple-system,sans-serif;
  --font-body:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --font-num:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --font-cjk:"Noto Serif SC","Songti SC","Noto Sans SC","PingFang SC",serif;
  --fs-body:16.5px;
  --lh-body:1.58;
  --lh-body-cjk:1.85;
  --lh-head:1.22;
  --lh-head-cjk:1.45;

}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-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(--surface);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* ---- Simplified Chinese: matched face, more leading, no italics ---- */
body.lang-zh{font-family:var(--font-cjk);line-height:var(--lh-body-cjk);font-weight:400}
body.lang-zh h1,body.lang-zh h2,body.lang-zh h3,body.lang-zh h4,
body.lang-zh .wm b{font-family:var(--font-cjk);font-weight:700;line-height:var(--lh-head-cjk)}
body.lang-zh i,body.lang-zh em{font-style:normal;font-weight:700}
body.lang-zh .prose li{line-height:var(--lh-body-cjk)}
/* the Latin brand name keeps the Latin face even inside the zh tree */
body.lang-zh .wm b,body.lang-zh .brand{font-family:var(--font-display)}

img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
h1,h2,h3,h4,h5{font-family:var(--font-display);line-height:var(--lh-head);
  color:var(--ink);margin:0 0 .5em;text-wrap:balance}
h1{font-size:37px;font-weight:700;letter-spacing:-.01em}
h2{font-size:26px;font-weight:700;letter-spacing:-.006em}
h3{font-size:19px;font-weight:700}
/* Figures are set in tabular mono wherever they line up or get compared. */
.num,td.num,.stat-n{font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-weight:500;letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.wrap.narrow{max-width:var(--narrow)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);
  color:#fff;font-weight:700;padding:10px 16px;border-radius:0 0 4px 0}
.skip-link:focus{left:0;text-decoration:none}

/* ---------- notice strip ----------
   Sits ABOVE the masthead as a thin carmine rule. The 18+ line is a legal
   obligation, not decoration, so it stays loud. */
.notice{background:var(--accent);color:#FFF1F2;font-size:12px;font-weight:600;
  letter-spacing:.01em}
.notice .wrap{min-height:34px;display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap}

/* ---------- masthead ----------
   The single biggest change from the previous identity: a permanent dark band.
   No editorial or lifestyle site wears one — casino.org runs a fixed violet
   masthead, pokerology a dark slate hero. That band alone does most of the
   work of reading "gaming reference" rather than "blog". */
.site-head{background:var(--navy-deep);border-bottom:2px solid var(--accent);
  position:sticky;top:0;z-index:20}
.site-head .wrap{min-height:66px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brandmark{flex:0 0 auto}
.wm{display:flex;flex-direction:column;line-height:1.08}
.wm b{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-.022em}
.wm-a{color:#FFFFFF}
.wm-b{color:var(--gold)}
.wm small{font-size:10.5px;color:#8A929E;font-weight:500;letter-spacing:.055em;
  text-transform:uppercase;margin-top:2px}
.mainnav{display:flex;gap:0;margin-left:10px;flex-wrap:wrap;min-width:0}
.mainnav a{font-family:var(--font-display);font-size:13.5px;font-weight:600;
  letter-spacing:.045em;text-transform:uppercase;color:#C3C9D2;padding:22px 13px;
  border-radius:0;white-space:nowrap;border-bottom:3px solid transparent;
  margin-bottom:-3px}
.mainnav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.mainnav a[aria-current="page"]{color:#fff;border-bottom-color:var(--gold);
  background:rgba(255,255,255,.05)}
.head-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex:0 0 auto}

/* ---------- language switcher (header + footer) ---------- */
/* Grid, not flex: the three labels have very different natural widths — "EN"
   and "MS" are two narrow Latin glyphs while "中文" is two full-width CJK ones.
   Under flex + min-width the Latin items sat at the floor and the CJK item
   overflowed it, so the pills came out uneven. `grid-auto-columns:1fr` sizes
   every column to the widest, which is the only thing that keeps them equal
   as the label set changes. */
.lang-switch{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;
  align-items:stretch;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-pill);
  padding:3px;gap:2px}
.ls-item{display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;min-height:30px;padding:0 10px;font-size:12.5px;font-weight:600;
  letter-spacing:.03em;
  border-radius:var(--radius-pill);color:#C3C9D2;white-space:nowrap}
/* CJK needs no tracking and sits optically low against Latin caps at the same
   size — nudge it back onto the same baseline. */
.ls-item[lang="zh-Hans"]{letter-spacing:0;font-size:12px}
.ls-item:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
.ls-item.is-active{background:var(--accent);color:#fff;cursor:default}
.foot-lang{margin-top:14px;padding:4px;background:rgba(0,0,0,.16);
  border-color:rgba(255,255,255,.22)}
.foot-lang .ls-item{color:#EFE4CE}
.foot-lang .ls-item:hover{background:rgba(255,255,255,.12);color:#fff}
.foot-lang .ls-item.is-active{background:var(--accent-light);color:var(--navy-deep)}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--font-display);font-weight:700;
  border-radius:var(--radius);padding:11px 22px;font-size:14px;border:0;
  letter-spacing:.03em;
  cursor:pointer;text-align:center;line-height:1.2}
.btn:hover{text-decoration:none}
/* Carmine is the ONE action colour, and the CTA is the only object on the page
   allowed to be a solid colour field. Hover is a colour swap — no lift, no
   growing shadow; the reference sites all avoid elevation. */
.btn-cta{display:inline-block;background:var(--accent);color:#fff;font-family:var(--font-display);
  font-weight:700;font-size:14px;letter-spacing:.03em;line-height:1.2;padding:12px 26px;
  border-radius:2px;border:0;text-align:center}
.btn-cta:hover{background:var(--accent-deep);color:#fff;text-decoration:none}
.btn-ghost{background:var(--paper);border:1px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--surface)}
.menu-toggle{display:none;width:42px;height:42px;font-size:19px;line-height:1;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-sm);color:#fff;cursor:pointer}

/* ---------- breadcrumbs ----------
   A rail, not a stray line of text. Scroll-safe on narrow screens the way
   casinopedia handles it, so a deep path never widens the page. */
.crumbs{font-size:12.5px;color:#98A0AC;background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.08)}
.crumbs .wrap{padding-top:0;padding-bottom:0}
.crumbs ol{list-style:none;display:flex;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  gap:7px;margin:0;padding:9px 0;white-space:nowrap}
.crumbs ol::-webkit-scrollbar{display:none}
.crumbs li::after{content:"›";margin-left:7px;color:#5B6472}
.crumbs li:last-child{color:#fff}
.crumbs li:last-child::after{content:""}
.crumbs a{color:#98A0AC}
.crumbs a:hover{color:#fff}

/* ---------- page sections ---------- */
.section{padding:34px 0}
.section.tint{background:var(--accent-tint)}
.section.paper{background:var(--paper)}
.sec-bar{margin:36px 0 14px}
.sec-bar h2{display:flex;align-items:center;gap:10px;margin:0;font-size:22px}
.sec-bar .bar{width:3px;height:26px;border-radius:0;background:var(--accent);
  display:inline-block;flex:0 0 auto}

/* ---------- hero ---------- */
.hero{background:var(--paper);border-bottom:1px solid var(--line)}
.hero .wrap{padding:34px 22px 30px}
.hero h1{font-size:36px;margin:10px 0 12px;color:var(--ink);letter-spacing:-.022em}
.hero .lead{font-size:17.5px;color:var(--ink-2);max-width:44em;margin:0 0 18px;
  line-height:1.55}
/* Eyebrow, not a pill: uppercase carmine with a rule under it reads as a
   category marker in a reference work; a rounded chip reads as a blog tag. */
/* Rule ABOVE the eyebrow rather than below — reads masthead, not blog tag. */
.kicker{display:inline-block;font-family:var(--font-display);font-size:11.5px;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);background:none;padding:6px 0 0;border-radius:0;
  border-top:2px solid var(--accent)}

/* ---------- prose ---------- */
.prose{font-size:16px;color:var(--ink)}
.prose p{margin:0 0 1.1em}
.prose h2{margin:1.6em 0 .5em;border-bottom:1px solid var(--line);
  padding-bottom:.28em}
.prose h3{margin:1.4em 0 .4em}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:1.4em}
.prose li{margin:0 0 .45em}
.prose a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--accent-light)}
.prose a:hover{color:var(--navy);text-decoration-color:var(--gold)}
.prose strong{color:var(--navy-deep);font-weight:800}
.prose blockquote{margin:1.4em 0;padding:14px 18px;border-left:4px solid var(--accent-light);
  background:var(--accent-tint);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--ink-2)}

/* ---------- in-article figure ----------
   Decorative palette art, interleaved between sections so a 2,000-word
   reference page is not an unbroken wall of type.

   Rules encoded here rather than left to the template:
     * `margin:1.8em 0` with an explicit ZERO on left/right. The UA default for
       <figure> is `1em 40px`, and 40px of horizontal margin under `width:100%`
       is 80px of horizontal overflow on a 375px phone — the classic way a
       decorative image fails the 390px overflow check.
     * width:100% + an intrinsic 1200x675 in the markup, so the box is reserved
       before the bytes arrive and CLS stays at 0.
     * a hairline and a surface ground, matching every other panel on the site.
       No shadow: separation here is a keyline and a tint.
   Only tokens that exist in :root are used. A var() that does not resolve
   drops its whole declaration silently, which is how a figure ends up with no
   border and nobody notices. */
.prose .art-fig{margin:1.8em 0;padding:0;max-width:100%}
.prose .art-fig img{width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
@media (max-width:640px){
  .prose .art-fig{margin:1.4em 0}
}

/* ---------- cards ---------- */
/* Panels, not floating cards. Separation is a hairline and a tint — the
   reference sites are shadowless, and elevation is what made the old design
   read "app". Hover swaps the keyline instead of lifting. */
.card{background:var(--paper);border:1px solid var(--line);border-radius:0;
  padding:20px}
.card:hover{border-color:var(--ink)}
.cards{display:grid;gap:1px;grid-template-columns:repeat(var(--cols,3),1fr);
  background:var(--line);border:1px solid var(--line)}
.cards>.card{border:0;border-radius:0}

/* ---------- difficulty / level indicator ----------
   Was a rounded "growth" chip from the tree metaphor. Now a squared brass
   label — brass because it is a value judgement, which is the only thing
   brass is allowed to mean on this site. */
.growth{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gold-deep);background:var(--gold-tint);padding:4px 9px;
  border:1px solid #E8D9AE;border-radius:var(--radius-sm)}
.growth i{width:6px;height:6px;border-radius:0;background:#E0CFA0;
  display:inline-block;font-style:normal}
.growth i.on{background:var(--gold)}

/* ---------- leaf divider (tree metaphor, decorative) ---------- */
/* Was a diagonal two-tone leaf stripe. Now a flat carmine rule with a brass
   hairline under it — a masthead rule, not decoration. */
.leafline{height:3px;border:0;background:var(--accent);
  box-shadow:0 1px 0 var(--gold)}
hr.leafline{margin:32px 0}

/* ---------- table of contents ---------- */
/* Boxed index, not a tinted panel. */
.toc{background:var(--paper);border:1px solid var(--ink);border-radius:0;
  padding:14px 18px;margin:0 0 26px}
.toc summary{font-family:var(--font-display);font-weight:700;color:var(--ink);
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"▾";float:right;color:var(--accent)}
.toc[open] summary::after{content:"▴"}
.toc ol{margin:12px 0 0;padding-left:1.3em}
.toc li{margin:.3em 0}

/* ---------- navbox (long link lists stay in the DOM, just collapsed) ---------- */
.navbox{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  margin:28px 0}
.navbox summary{display:flex;align-items:center;gap:10px;cursor:pointer;padding:13px 18px;
  font-family:var(--font-display);font-weight:800;color:var(--navy-deep);list-style:none}
.navbox summary::-webkit-details-marker{display:none}
.navbox summary::after{content:"▾";margin-left:auto;color:var(--accent)}
.navbox[open] summary::after{content:"▴"}
.nb-count{font-size:12px;font-weight:700;color:var(--accent-dark);background:var(--accent-tint);
  padding:2px 9px;border-radius:var(--radius-pill)}
.navbox-list{padding:4px 18px 18px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px}
.nb-group{display:flex;gap:12px;padding:7px 0;border-top:1px solid var(--line-2);width:100%}
.nb-letter{flex:0 0 34px;color:var(--accent-dark);font-weight:800}
.nb-links{display:flex;flex-wrap:wrap;gap:6px 14px}

/* ---------- hub article list ---------- */
.hub-articles{list-style:none;margin:0 0 24px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.hub-articles li{border-bottom:1px dashed var(--line);padding:8px 0}
.hub-articles a{font-weight:600}

/* ---------- related block ---------- */
.related-inline{background:var(--accent-tint);border:1px solid #DCE9C6;
  border-radius:var(--radius);padding:16px 20px;margin:28px 0}
.related-inline h3{margin:0 0 8px;font-size:15px;color:var(--accent-dark)}
.related-inline ul{margin:0;padding-left:1.2em}
.related-inline li{margin:.25em 0}

/* ---------- byline ---------- */
/* A rule above and below, the way a reference work credits a contributor —
   not a blog author card. The avatar is the only round thing on this site,
   which is what makes it read as a person rather than a UI element. */
.byline{display:flex;align-items:center;gap:12px;margin:0 0 26px;padding:12px 0;
  font-family:var(--font-display);font-size:13px;color:var(--mute);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.byline .avatar{border-radius:50%;background:var(--accent-tint);flex:0 0 auto}
.byline b{display:block;font-weight:700;color:var(--ink);font-size:15px}
.byline b a{color:var(--ink)}
.byline b a:hover{color:var(--accent-deep)}
.byline small{font-size:12.5px;letter-spacing:.01em}
.byline time{font-family:var(--font-num);font-size:12px}

/* ---------- avatar + initials fallback ----------
   Portraits are a separate delivery. Until the PNG exists the chip stands in,
   so a bylined page is never waiting on an image to be correct. */
.avatar{border-radius:50%;object-fit:cover;background:var(--surface-2)}
.avatar-ini{display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--navy-deep);color:var(--gold);
  font-family:var(--font-display);font-weight:700;letter-spacing:.04em;
  line-height:1;flex:0 0 auto;user-select:none}

/* ---------- author profile ---------- */
.author-hero{background:var(--surface-2);border-bottom:1px solid var(--line);
  padding:34px 0 30px}
.author-hero .ah{display:flex;gap:22px;align-items:flex-start}
.author-hero h1{font-size:32px;margin:0 0 4px}
.author-hero .ah-role{font-family:var(--font-display);font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);
  margin:0 0 10px}
.author-hero .ah-bio{margin:0;max-width:44em;color:var(--ink-2)}
@media(max-width:560px){
  .author-hero .ah{flex-direction:column;gap:14px}
  .author-hero h1{font-size:26px}
}

/* Specialism chips. Brass border because they are a claim about the person. */
.kchips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 26px}
.kchip{font-family:var(--font-display);font-size:12px;font-weight:600;
  letter-spacing:.03em;color:var(--navy);background:var(--gold-tint);
  border:1px solid #E8D9AE;border-radius:var(--radius-sm);padding:4px 10px}

/* Editorial-team index: the same hairline panel grid the rest of the site uses. */
.team{display:grid;gap:1px;grid-template-columns:repeat(2,1fr);
  background:var(--line);border:1px solid var(--line);margin:0 0 30px}
.team-card{display:flex;gap:16px;background:var(--paper);padding:20px;
  align-items:flex-start;color:inherit}
.team-card:hover{background:var(--accent-tint);text-decoration:none}
.team-card b{display:block;font-family:var(--font-display);font-size:17px;
  color:var(--ink);line-height:1.3}
.team-card .tc-role{display:block;font-family:var(--font-display);font-size:11.5px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent-dark);margin:3px 0 7px}
.team-card .tc-spec{display:block;font-size:14px;color:var(--ink-2)}
.team-card .tc-more{display:block;margin-top:9px;font-family:var(--font-display);
  font-size:12.5px;font-weight:700;color:var(--accent-deep)}
@media(max-width:700px){.team{grid-template-columns:1fr}}

/* ---------- tables (mobile: min-width on the TABLE beats column tricks) ---- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 26px;
  border:1px solid var(--ink);border-radius:0;background:var(--paper)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
th,td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;
  vertical-align:top;font-variant-numeric:tabular-nums}
/* Ink header row: this is what makes a rules table read as a reference table
   rather than a styled div. */
thead th{background:var(--navy-deep);color:#fff;font-weight:600;font-size:12px;
  letter-spacing:.07em;text-transform:uppercase;
  font-family:var(--font-display);white-space:nowrap;vertical-align:middle}
tbody tr:nth-child(even){background:var(--surface)}
tbody tr:last-child td{border-bottom:0}
/* Any cell that is mostly a figure gets tabular mono so columns align. */
td:first-child{font-weight:600}
.chip{display:inline-block;background:var(--gold-tint);color:var(--gold-deep);
  border:1px solid #E8D9AE;font-family:var(--font-display);font-size:11px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--radius-sm)}

/* ---------- FAQ ---------- */
/* Ruled rows, borrowed from casino.org's glossary (`border-b first:border-t`)
   — a stack of bordered cards reads as a blog; ruled rows read as an index. */
.faq details{background:var(--paper);border:0;border-bottom:1px solid var(--line);
  border-radius:0;padding:14px 2px;margin:0}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{font-family:var(--font-display);font-weight:600;color:var(--ink);
  cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}

/* ---------- A–Z glossary ----------
   Ruled rows again, for the same reason the FAQ block above uses them: a stack
   of bordered cards reads as a blog, ruled rows read as an index. The FAQ's own
   <details> idiom is deliberately NOT reused here — a reader scanning 168 terms
   should not have to open 168 disclosures, and a collapsed definition is invisible
   to Ctrl+F. <dl>/<dt>/<dd> is the correct element for a term list and the sheet
   carried no rules for it at all, so these are the minimum needed to make it read
   as a reference index rather than as unstyled markup.
   The category tag is set in the display face at caption size and in muted ink so
   it reads as metadata beside the term, never as part of the definition. */
.gloss{margin:0 0 30px;border-bottom:1px solid var(--line)}
.gloss dt{border-top:1px solid var(--line);padding:13px 2px 0;
  font-family:var(--font-display);font-size:17px;font-weight:700;
  color:var(--navy-deep)}
.gloss dd{margin:0;padding:4px 2px 13px;color:var(--ink-2)}
.gl-cat{margin-left:7px;font-family:var(--font-display);font-size:11.5px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);
  white-space:nowrap}

/* A–Z jump index. Letters with no entries stay VISIBLE and greyed rather than
   being dropped: the unbroken run from A to Z is what makes the page read as a
   complete reference, and a silently missing X looks like a broken build. The
   inactive chips are <span>, so there is no link that goes nowhere. */
.azdex{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;padding:12px;
  background:var(--paper);border:1px solid var(--ink)}
.azdex a,.azdex span{display:flex;align-items:center;justify-content:center;
  min-width:36px;min-height:36px;padding:0 6px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-family:var(--font-display);
  font-size:15px;font-weight:700;line-height:1}
.azdex a{color:var(--accent-dark);background:var(--accent-tint);border-color:#F3C9BB;
  text-decoration:none}
.azdex a:hover{background:var(--accent);border-color:var(--accent);color:#fff;
  text-decoration:none}
.azdex span{color:#A6ACB6;background:var(--surface-2);border-style:dashed;
  cursor:default}

/* ---------- footer ---------- */
.site-foot{background:var(--navy-deep);color:#B9C0CA;margin-top:56px;
  border-top:3px solid var(--accent)}
.site-foot .leafline{margin:0}
/* auto-fit rather than a fixed count: the footer gained a fifth column when
   the /casinos/ hub landed, and a hard 1.6fr+1fr*3 wrapped it onto a second
   row with one orphan. This adapts to however many columns survive link_ok. */
.site-foot .wrap{display:grid;
  grid-template-columns:minmax(210px,1.5fr) repeat(auto-fit,minmax(140px,1fr));
  gap:30px 26px;padding-top:38px;padding-bottom:32px}
/* footer link columns are gated by H.link_ok — when none survive, the about
   column must not sit in a 1-of-4 grid slot with three empty cells beside it */
.site-foot .wrap.solo{grid-template-columns:1fr}
.site-foot h5{font-family:var(--font-display);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.site-foot a{display:block;color:#EFE4CE;font-size:14px;padding:4px 0}
.site-foot a:hover{color:#fff}
.site-foot .about-col p{font-size:13.5px;color:#D8C9AC;margin:12px 0 0;max-width:38em}
.site-foot .brand .wm-a{color:var(--accent-light)}
.site-foot .brand .wm-b{color:#F3E6CE}
.site-foot .brand .wm small{color:#C3B296}
.foot-note{border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;color:#C3B296;
  padding:16px 22px;max-width:var(--max);margin:0 auto;text-align:center}
/* utility links in the legal bar must stay inline — they inherit display:block */
.foot-note a{display:inline;color:#D8C9AC}

/* ---------- 404 ---------- */
.notfound{padding:56px 0 40px;text-align:center}
.notfound .nf-mark{margin:0 auto 12px}
.notfound h1{font-size:64px;color:var(--accent);margin:0 0 6px}
.nf-block{max-width:34em;margin:0 auto 26px;padding-bottom:22px;
  border-bottom:1px dashed var(--line)}
.nf-block:last-child{border-bottom:0}
.nf-block h2{font-size:20px;margin:0 0 6px}
.nf-block p{color:var(--ink-2);margin:0 0 14px}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .site-foot .wrap{grid-template-columns:1fr 1fr;gap:26px}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .menu-toggle{display:block}
  .mainnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--navy-deep);
    border-bottom:3px solid var(--accent);padding:8px 18px 12px;flex-direction:column;gap:0;
    box-shadow:var(--shadow)}
  .mainnav.open{display:flex}
  .site-head .wrap{position:relative;min-height:64px;gap:12px}
  .mainnav a{padding:12px 14px;font-size:15px}
  h1{font-size:28px}.hero h1{font-size:30px}
  .hub-articles{grid-template-columns:1fr}
}
/* At <=560px the header runs brand + language toggle + hamburger on one row.
   Measured at 390px that came to ~413px and clipped the 中文 chip, so every
   element in the row shrinks here. Keep this in sync if the wordmark changes. */
@media(max-width:560px){
  .wrap{padding:0 16px}
  .notice{font-size:12px}
  .notice .wrap{justify-content:center;text-align:center;gap:4px}
  .site-head .wrap{gap:8px}
  .brand{gap:7px}
  .brandmark{width:32px;height:32px}
  .wm b{font-size:19px}
  .wm small{display:none}
  .head-right{gap:8px}
  .cards,.site-foot .wrap{grid-template-columns:1fr}
  h1{font-size:25px}.hero h1{font-size:26px}
  .hero .wrap{padding:30px 16px 26px}
  .notfound h1{font-size:48px}
  .lang-switch{padding:2px}
  .ls-item{min-width:34px;min-height:30px;padding:0 7px;font-size:12.5px}
  .menu-toggle{width:40px;height:40px}
}
/* last-resort guard: nothing in the shell may push the page sideways.
   `clip` (not `hidden`) so position:sticky keeps working. */
@supports(overflow:clip){body{overflow-x:clip}}

/* ---- hero art -------------------------------------------------------- */
/* Art sits beside the copy on wide screens and BELOW it on narrow ones, so
   the h1 and lead always own the mobile fold. Height is capped rather than
   left to the image's aspect ratio, which is what usually pushes content
   down. width/height are set on the tag too, so no layout shift. */
.hero .hero-inner{display:flex;align-items:center;gap:28px}
.hero .hero-copy{flex:1 1 auto;min-width:0}
.hero .hero-art{flex:0 0 300px;width:300px;height:auto;max-height:220px;
  object-fit:contain;border-radius:var(--radius);align-self:center}
@media (max-width:860px){
  .hero .hero-inner{flex-direction:column;align-items:stretch;gap:18px}
  .hero .hero-art{order:2;flex:0 0 auto;width:100%;max-height:150px;
    object-fit:cover}
}
@media (max-width:560px){
  .hero .hero-art{max-height:120px}
}


/* --- external sources ----------------------------------------------------- */
/* The gold rule needs room: at the old padding the bullets and the wrapped
   second line of a long label sat almost on top of it. */
.sources{margin:36px 0 0;padding:20px 28px;
  background:var(--surface);border-left:3px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0}
.sources h2{margin:0 0 8px;font-size:.95rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-2);font-family:var(--font-display)}
.sources ul{margin:0;padding-left:1.25em}
.sources li{font-size:.9rem;margin:.3em 0}

/* Money pages: keep the h1 and lead, drop the hero's vertical spend so the
   toplist's first CTA clears a 375x667 fold. */
.hero-compact{padding:20px 0 0}
.hero-compact .hero-copy{max-width:none}
.hero-compact h1{margin-bottom:8px}
.hero-compact .lead{margin-bottom:0}


/* `.page-meta` is the byline's counterpart on the 27 pages that carry a freshness date
   but NO author — templates/page.py ships no persona there on purpose. The class was
   emitted with no rule anywhere in this file, so those 27 "Updated <date>" lines rendered
   as default unstyled body text while the other 123 pages showed a framed byline. Found
   2026-08-22 by qa_seo's used-but-never-defined check.
   It borrows the byline's typography and its rules above and below so the two read as the
   same device, and NOT its flex/avatar layout, which assumes a person. */
.page-meta{
  margin:0 0 26px;padding:12px 0;
  font-family:var(--font-display);font-size:13px;color:var(--mute);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.page-meta time{font-family:var(--font-num);font-size:12px}
.money-page .page-meta{padding:8px 0;margin-bottom:8px}

/* Compact byline on money pages — same information, less vertical spend. */
.hero-compact ~ * .byline,
.money-page .byline{align-items:center;padding:8px 0;margin-bottom:8px}
.money-page .byline .avatar{width:34px;height:34px}
.money-page .byline small{font-size:.76rem;line-height:1.35}
.money-page .hero-compact{padding-top:14px}
.money-page h1{font-size:1.6rem;line-height:1.2;margin-bottom:4px}
.money-page .lead{font-size:1rem;line-height:1.45}
@media (min-width:561px){
  .money-page h1{font-size:2rem}
  .money-page .byline .avatar{width:52px;height:52px}
}

/* --- affiliate toplist ---------------------------------------------------
   SPECIFICITY. The toplist renders inside <div class="prose">, and
   `.prose a` (0,1,1) beats `.tl-cta` (0,1,0) — so the CTA was inheriting the
   body-link colour and an underline, which made white-on-vermilion text read
   as dark red on red. Every rule that a `.prose` or `.site-foot` element rule
   could outrank is therefore scoped through `.toplist`. Do not "simplify"
   these selectors back to a single class.

   Layout follows the wendgames ranked-table: rank, logo, operator, action.
   Rows are BANDED, not floating cards — one hairline between them and a zebra
   wash, which is what makes six rows read as a ranked table rather than as a
   stack of unrelated boxes. It is also shorter, and row 1's CTA has to clear a
   375x667 fold, so the compactness is load-bearing.

   COLOUR DISCIPLINE (rules 15-22). Vermilion is the reserved action colour and
   appears on the CTA and nowhere else in this component. Brass marks things
   that ASSERT A FACT: the rank medals and the #1 band. Fact chips therefore
   sit on paper with a hairline and a brass dot rather than taking a fill,
   because a filled chip next to a filled CTA reads as a second action.

   Nothing here renders a score, a star, a payout time or a badge. There is no
   scoring system behind this site and there must never look like there is. */
.toplist{margin:0 0 36px;padding:18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.toplist .tl-h{margin:0 0 12px;font-family:var(--font-display);
  font-size:1.35rem;letter-spacing:.01em}

/* Column labels. Same grid as a row, so the labels sit over the columns they
   name. Hidden below 620px, where the row stacks and the columns stop
   existing. aria-hidden in the markup — this is scaffolding, not content. */
.toplist .tl-head{display:grid;
  grid-template-columns:2.5rem 128px minmax(0,1fr) auto;
  align-items:end;gap:16px;padding:0 14px 7px;
  font-family:var(--font-display);font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.toplist .tl-hpos{text-align:center}
.toplist .tl-hop{grid-column:2/4}
.toplist .tl-hact{min-width:148px}

.toplist .tl-list{list-style:none;margin:0;padding:0;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.toplist .tl-row{display:grid;
  grid-template-columns:2.5rem 128px minmax(0,1fr) auto;
  align-items:center;gap:16px;padding:11px 14px;
  border-top:1px solid var(--line-2);transition:background .12s ease-out}
.toplist .tl-row:first-child{border-top:0}
/* Zebra. Subtle, and the band is what carries the eye across a wide row from
   the logo to the CTA. */
.toplist .tl-row:nth-child(even){background:var(--surface)}
/* #1 gets a real treatment: brass band, brass wash, a filled medal and a
   taller logo lane. All positional — it says "ranked first", not "best". */
.toplist .tl-row:first-child{background:var(--gold-tint);
  box-shadow:inset 4px 0 0 var(--gold)}
.toplist .tl-row:hover,.toplist .tl-row:focus-within{background:var(--accent-tint)}

/* Rank medal. A disc reads as a position marker where a bare numeral reads as
   a list bullet, and it survives the zebra and the brass wash behind it. */
.toplist .tl-pos{display:flex;align-items:center;justify-content:center;
  width:2.1rem;height:2.1rem;margin:0 auto;border-radius:var(--radius-pill);
  background:var(--paper);border:1px solid var(--gold);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:.98rem;font-weight:700;color:var(--gold-deep);line-height:1}
.toplist .tl-row:first-child .tl-pos{background:var(--gold);
  border-color:var(--gold-deep);color:var(--navy-deep)}

/* Logo lane. The marks are 150x80 and 405x162 — different aspect ratios, so
   they are normalised on HEIGHT inside a fixed tile. The paper tile also gives
   every mark the same ground, which matters once the row behind it is zebra'd
   or brass-washed. */
.toplist .tl-mark{display:flex;align-items:center;justify-content:center;
  height:54px;padding:5px 8px;background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--radius-sm)}
.toplist .tl-row:first-child .tl-mark{height:62px;border-color:var(--gold)}
.toplist .tl-logo{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain}
.toplist .tl-wordmark{font-family:var(--font-display);font-weight:800;
  font-size:1rem;letter-spacing:.01em;color:var(--navy-deep);text-align:center}

/* min-width:0 lets the operator column shrink instead of starving the row and
   wrapping one character per line - the brand-card flex-starvation bug. */
.toplist .tl-body{display:flex;flex-direction:column;justify-content:center;
  gap:3px;min-width:0}
.toplist .tl-name{min-width:0;font-family:var(--font-display);font-weight:700;
  font-size:1.1rem;letter-spacing:.01em;color:var(--ink);
  overflow-wrap:anywhere;line-height:1.22}
.toplist .tl-offer{display:block;font-family:var(--font-num);font-size:.82rem;
  font-weight:400;color:var(--ink-2);margin-top:2px}
.toplist .tl-desc{font-size:.84rem;color:var(--mute);line-height:1.4}

/* Fact chips. Empty renders NOTHING — no element, no placeholder — so a brand
   with nothing verified is simply a shorter row. See brand_facts.py. */
.toplist .tl-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.toplist .tl-chip{display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-pill);font-family:var(--font-display);
  font-size:.74rem;font-weight:600;letter-spacing:.01em;color:var(--ink-2);
  line-height:1.5;white-space:nowrap}
.toplist .tl-chip::before{content:"";flex:0 0 auto;width:5px;height:5px;
  border-radius:var(--radius-pill);background:var(--gold)}

.toplist a.tl-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:148px;padding:.68em 1.3em;
  background:var(--accent);color:#fff;font-weight:700;font-size:.95rem;
  font-family:var(--font-display);letter-spacing:.02em;text-align:center;
  text-decoration:none;border-radius:var(--radius);white-space:nowrap;
  padding-block:.68em;transition:background .12s ease-out}
.toplist a.tl-cta:hover,.toplist a.tl-cta:focus{background:var(--accent-deep);
  color:#fff;text-decoration:none}
.toplist a.tl-cta:focus-visible{outline:2px solid var(--navy-deep);
  outline-offset:2px}
.toplist .tl-note{margin:12px 0 0;font-size:.82rem;color:var(--ink-2);
  line-height:1.5}

@media (max-width:620px){
  /* Stack so the CTA gets a full-width tap target rather than being squeezed
     to a sliver by a long brand name. Logo and rank share the top line.

     THE FOLD BUDGET IS SPENT. Measured on /ms/poker/apps/, the tightest page
     in the set: the masthead, breadcrumb, h1, lead and byline put the top of
     this component at y=556, which leaves 111px for row 1's CTA to clear
     667px. Every number below is inside that 111px:

         toplist padding-top   8
         list border           1
         row padding-top       6
         logo lane            36
         row gap               7
         CTA (tap target)     44   = 102, CTA bottom ~658

     Do not add vertical spend here without re-running _foldgate.py, and do not
     assume there is slack: the 9px left over is the entire margin. The Malay
     tree is the binding case because its h1 and lead run longest. */
  .toplist{padding:8px}
  .toplist .tl-head{display:none}
  .toplist .tl-row{grid-template-columns:1.9rem 78px minmax(0,1fr);
    row-gap:7px;column-gap:10px;padding:6px 9px}
  .toplist .tl-pos{width:1.85rem;height:1.85rem;font-size:.9rem}
  /* Row 1 keeps the brass band and the filled medal for emphasis but NOT a
     taller logo lane — 4px of extra tile on row 1 is 4px straight off the
     fold margin, and the band already does the work. */
  .toplist .tl-mark{height:36px;padding:2px 4px}
  .toplist .tl-row:first-child .tl-mark{height:36px}
  .toplist .tl-name{font-size:1rem}
  /* 44px MINIMUM TOUCH TARGET. This CTA computed to ~39px: font-size .95rem = 15.2px,
     line-height comes from --font-display (--lh-head 1.22) = 18.5px, plus .66em padding
     each side = 20.1px. Five pixels under the 44x44 CSS-px floor (Apple HIG, WCAG 2.5.5),
     on the one control on the site that earns money. min-height fixes it regardless of
     what the font metrics do; padding alone cannot be relied on to reach it. */
  .toplist a.tl-cta{grid-column:1/-1;min-width:0;width:100%;padding:.66em 1em;min-height:44px}
  /* Chips and descriptors are DESKTOP ONLY. A single chip line is ~24px and
     the margin above is 9px, so populating brand_facts.py would push row 1's
     CTA under the fold on the day the data arrives — the failure would look
     like a data change, not a layout change, and nobody would connect the two.
     Hiding them here makes the mobile fold independent of the data. */
  .toplist .tl-facts,.toplist .tl-desc{display:none}
}

/* The footer sets `.site-foot a{display:block;padding:4px 0}` to stack its link
   columns. That rule (0,1,1) outranks `.ls-item` (0,1,0), so the language
   toggle's anchors lost their inline-flex centring and their horizontal
   padding while the active <span> kept both - three items, two different box
   models, visibly misaligned. Scope it back through .foot-lang. */
.site-foot .foot-lang{display:inline-grid;grid-auto-flow:column;
  grid-auto-columns:1fr;align-items:stretch}
.site-foot .foot-lang .ls-item{display:inline-flex;align-items:center;
  justify-content:center;min-width:46px;min-height:30px;padding:0 10px;
  font-size:12.5px;line-height:1;border-radius:var(--radius-pill)}
.site-foot .foot-lang .ls-item[lang="zh-Hans"]{letter-spacing:0;font-size:12px}
@media (max-width:540px){
  .site-foot .foot-lang .ls-item{min-width:38px;padding:0 8px}
}


/* --- sticky mobile action bar --------------------------------------------------
   Rendered by helpers.toplist(), so it exists on exactly the 36 pages that carry a
   lineup and on no others — the scoping is structural, not a page list some future
   edit can fall out of sync with.

   MOBILE ONLY. On desktop the toplist CTA is never far from the viewport, and a fixed
   bar there would just cover content.

   COLOUR DISCIPLINE (rules 15-22): vermilion is the reserved action colour and this is
   an action, so it takes the fill. Nothing here renders a score, a star, a payout time
   or a badge, and it names one operator only — the one already ranked first in the
   lineup, so the bar cannot disagree with the table above it.

   Specificity: scoped through .tl-sticky's own id-free class chain but declared AFTER
   the .prose rules, because `.prose a` (0,1,1) outranks a bare class and would
   otherwise repaint this link in the body-link colour with an underline — the exact
   bug the toplist comment above documents. */
.tl-sticky{display:none}
@media(max-width:700px){
  .tl-sticky{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;gap:10px;padding:8px 12px;
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -6px 18px -12px rgba(20,28,46,.45)
  }
  .tl-sticky .tl-sk-label{
    flex:1 1 auto;min-width:0;font-size:.8rem;line-height:1.25;color:var(--ink-2);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap
  }
  .tl-sticky a.tl-sk-cta{
    flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;padding:.6em 1.15em;
    background:var(--accent);color:#fff;text-decoration:none;
    font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.02em;
    border-radius:var(--radius);white-space:nowrap
  }
  .tl-sticky a.tl-sk-cta:hover,.tl-sticky a.tl-sk-cta:focus{
    background:var(--accent-deep);color:#fff;text-decoration:none
  }
  .tl-sticky a.tl-sk-cta:focus-visible{outline:2px solid var(--navy-deep);outline-offset:2px}
  /* the bar is ~60px; keep it off the footer and off the last line of prose */
  body:has(.tl-sticky){padding-bottom:68px}
}