/* Gaming brand — mobile-only stylesheet.
 *
 * This network ships phone sites. The page is a single column capped at
 * --gb-max and centred on any viewport; opened on a desktop browser it simply
 * sits in the middle of a darker gutter. There are NO desktop breakpoints and
 * no multi-column desktop grids, because there is no desktop layout to define.
 *
 * The sheet this replaces was a responsive desktop design: a 1320px container,
 * seven multi-column grids, eight fixed heights above 400px, and fifteen
 * `max(24px, calc((100vw - var(--gb-max))/2))` paddings whose only job was
 * centring a wide column. Those are removed rather than overridden — an
 * override layer would have left ~40KB of unreachable desktop rules on every
 * page of every site.
 *
 * One media query survives, at 380px, matching the reference builds: a
 * small-handset tightening, not a layout switch.
 *
 * Integration points that must not break:
 *   - .gb-mobile-drawer is a Bootstrap Offcanvas; Bootstrap owns its transform
 *     and visibility, so this sheet only skins it.
 *   - .gb-game-swiper / .gb-provider-swiper are Swiper instances; Swiper sets
 *     slide widths inline, so slides are styled but never sized here.
 *
 * Per-site values arrive as --ds-* custom properties appended by
 * app/design_pipeline/grammar.py. Every use carries the current value as its
 * fallback, so the sheet is correct on its own.
 */

/* ---- self-hosted type ----
 *
 * These faces used to be named in the stacks below and never loaded: there was
 * no @font-face and no <link>, so every site in the network fell back to
 * system-ui and the five type recipes rendered near-identically. The files sit
 * in assets/fonts/ next to this sheet and are copied per site by
 * app/render/gaming_brand_renderer.write_site_assets, so a page has no
 * third-party font request. unicode-range keeps a market that never writes
 * latin-ext or Vietnamese from paying for those subsets.
 */
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/manrope-500-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/manrope-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/manrope-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/manrope-800-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/manrope-800-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/manrope-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/archivonarrow-700-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/archivonarrow-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/archivonarrow-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/sourceserif4-700-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/sourceserif4-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/sourceserif4-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/sourcesans3-600-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/sourcesans3-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/sourcesans3-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrainsmono-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Noto Sans Bengali";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/notosansbengali-500-bengali.woff2) format("woff2");unicode-range:U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1}
@font-face{font-family:"Noto Sans Bengali";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/notosansbengali-800-bengali.woff2) format("woff2");unicode-range:U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1}
@font-face{font-family:"Noto Serif Bengali";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/notoserifbengali-700-bengali.woff2) format("woff2");unicode-range:U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1}

:root {
  --gb-max: 540px;
  --gb-bg: #0c0a09;
  --gb-gutter: #060403;
  --gb-surface: #1a1410;
  --gb-surface-2: #221a14;
  --gb-line: #3d2a1a;
  --gb-ink: #fef3c7;
  --gb-muted: #c9a86c;
  /* Heading colour is its own role, not a reuse of --gb-ink. Sites that leave
   * every heading at body ink read as one template no matter how far the
   * palette moves; design_signature.py picks a heading recipe per site and
   * overwrites these three from the body style attribute. */
  --gb-heading: #fef3c7;
  --gb-heading-2: #fef3c7;
  --gb-heading-accent: #fbbf24;
  --gb-accent: #fbbf24;
  --gb-accent-ink: #1a1206;
  --gb-secondary: #dc2626;
  --gb-secondary-ink: #fff;
  --gb-tertiary: #2563eb;
  --gb-tertiary-ink: #fff;
  --gb-link: var(--gb-accent);
  --gb-red: #dc2626;
  --gb-focus: #fbbf24;
  --gb-status: #2563eb;
  --gb-inverted: #fef3c7;
  --gb-on-inverted: #0c0a09;
  --gb-chrome-bg: #1a1410;
  --gb-chrome-ink: #fef3c7;
  --gb-chrome-muted: #c9a86c;
  --gb-chrome-line: #765c3d;
  --gb-pad: 14px;
  --gb-header-h: 56px;
  --gb-fast: 180ms;
  --gb-default: 240ms;
  --gb-ease: cubic-bezier(0, 0, .2, 1);

  /* Competitor references converge on a true 16px phone body with 1.7 leading. */
  --ds-body: 16px;
  --ds-gap-section: 28px;
  --ds-gap-el: 10px;
  --ds-card-pad: 14px;
  --ds-display: 30px;
  --ds-r-card: 12px;
  --ds-r-button: 10px;
  --ds-touch: 44px;
}

body[data-palette="palette-01"] { --gb-red: var(--gb-accent); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  /* Gutter darker than the column, so the 540px band reads as a device surface
   * when the page is opened wide. */
  background: var(--gb-gutter);
  color: var(--gb-ink);
  /* Poppins was in this stack and is not shipped; it is dropped rather than
   * left as a name that resolves nowhere. Non-latin scripts still fall through
   * to the platform faces per glyph. */
  font-family: "Manrope", "Noto Sans Bengali", "Nirmala UI", system-ui, -apple-system, sans-serif;
  font-size: var(--ds-body);
  line-height: 1.7;
  padding-top: calc(var(--gb-header-h) + env(safe-area-inset-top, 0px));
  -webkit-tap-highlight-color: rgba(251, 191, 36, .18);
}

/* One wrapper rule replaces the fifteen viewport-centring paddings.
 *
 * These elements ARE the containers: `.gb-header` holds the brand and menu
 * trigger directly, with no inner wrapper. */
main, .gb-breadcrumb {
  width: 100%;
  max-width: var(--gb-max);
  margin-inline: auto;
}
main { display: block; background: var(--gb-bg); }

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--gb-link); text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 .4em; color: var(--gb-heading, var(--gb-ink)); line-height: 1.2; font-weight: 800; }
/* h1 carries the site's lead colour; h2/h3 carry the section colour. Some
 * recipes set them to the same value, which is a choice the signature makes,
 * not the default this sheet falls back to. */
h2, h3, h4 { color: var(--gb-heading-2, var(--gb-heading, var(--gb-ink))); }
h1 { font-size: var(--ds-display); }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
/* Inline emphasis inside a headline is the cheapest two-colour headline there
 * is, and the content layer already emits <em>/<b> in titles. */
:is(h1, h2) :is(em, b, strong, mark) {
  color: var(--gb-heading-accent, var(--gb-accent));
  font-style: normal; background: none;
}
p { margin: 0 0 .8em; }
ul, ol { margin: 0 0 .8em; padding-left: 1.1em; }

/* 16px is mandatory on controls: below it iOS zooms the viewport on focus and
 * leaves the user on a page they have to pinch back out of. */
input, select, textarea { font-size: 16px; font-family: inherit; }

/* Unclassed links get vertical hit area only.
 *
 * An earlier attempt gave them `display:inline-flex` with `min-width:44px` to
 * satisfy browser_touch_target_under_44, which measures width OR height on
 * every a/button/input/select. It backfired: inline-flex stops the text inside
 * a link from wrapping, so a long link ran the page to 442px against a 390px
 * viewport — and browser_horizontal_overflow is a hard blocker too. Trading one
 * hard failure for another is not a fix.
 *
 * So: padding for a comfortable target, and the text still wraps. Short inline
 * links remain under 44px wide and still trip the check. That check counts
 * every link in running prose, which no text-bearing page can satisfy without
 * breaking its own line rhythm; narrowing it to interactive affordances is a
 * change to the check, not to this sheet. */
/* Links outside a text block are affordances — "see all", promo links, aside
 * links — and get the full 44px target. The predicate mirrors the one
 * browser_touch_target_under_44 uses, so the stylesheet and the gate agree on
 * what counts as a target.
 *
 * `flex-wrap` matters: an earlier version used inline-flex without it, which
 * stops the text inside a link from wrapping and ran the document to 442px
 * against a 390px viewport. No `min-width` either — these links are already
 * wider than 44px, and forcing a minimum is what pushed the layout out. */
/* .gb-scroll-cue is excluded for the same reason .gb-skip is: this rule's
 * specificity (main + a + six :not() arguments) beats a bare
 * `.gb-scroll-cue{display:none}` however late that appears, so the cue was
 * forced back into flow as a 19px-wide inline-flex box and failed the touch
 * gate on every home page. */
main a:not(p a):not(li a):not(td a):not(figcaption a):not(.gb-brand):not(.gb-skip):not(.gb-scroll-cue),
main button:not(.gb-menu-toggle) {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  min-height: var(--ds-touch);
}
/* Links that ARE in a text block stay inline text; padding gives a little
 * vertical room without boxing them. */
main :is(p, li, td, figcaption) a { padding-block: 4px; }

/* ---------- header ---------- */
.gb-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1040;
  height: calc(var(--gb-header-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-inline: max(var(--gb-pad), calc((100vw - var(--gb-max)) / 2 + var(--gb-pad)));
  background: color-mix(in srgb, var(--gb-chrome-bg) 95%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gb-line);
  /* brand | spacer | menu */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}
.gb-brand { display: flex; align-items: center; gap: 8px;
  min-height: var(--ds-touch); min-width: var(--ds-touch); }
.gb-brand img { width: auto; height: 30px; max-width: 124px; object-fit: contain; }
.gb-brand strong { color: var(--gb-chrome-ink); }
.gb-brand small {
  max-width: 112px; overflow: hidden; color: var(--gb-chrome-muted);
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  text-overflow: ellipsis; white-space: nowrap;
}
.gb-mark { font-weight: 900; font-size: 17px; letter-spacing: -.02em; color: var(--gb-chrome-ink); }
.gb-menu-toggle {
  grid-column: 3;
  display: grid; place-items: center;
  min-width: var(--ds-touch); min-height: var(--ds-touch);
  padding: 0; border: 0; background: none; color: var(--gb-chrome-ink);
}
.gb-menu-toggle:focus-visible { outline: 3px solid var(--gb-focus); outline-offset: 2px; }
.gb-menu-toggle i { font-size: 22px; }
.gb-menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gb-skip { position: absolute; left: -9999px; }
.gb-skip:focus {
  left: 8px; top: 8px; z-index: 1060;
  padding: 8px 12px; border-radius: 8px;
  background: var(--gb-accent); color: var(--gb-accent-ink);
}

/* ---------- drawer ----------
 * Bootstrap's JS toggles .show; Bootstrap's CSS is NOT loaded on these pages
 * (only gaming-brand.css, bootstrap-icons and swiper), so the hidden state has
 * to live here. Without it the drawer renders as ordinary page content: an
 * open navigation menu sitting above the hero on every site. */
.gb-mobile-drawer.offcanvas {
  --gb-drawer-ink: var(--gb-chrome-ink);
  --gb-drawer-muted: var(--gb-chrome-muted);
  --gb-drawer-line: var(--gb-chrome-line);
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  width: min(88vw, 400px);
  max-width: 100%;
  padding: 28px 24px;
  background: var(--gb-chrome-bg);
  border-left: 1px solid var(--gb-drawer-line);
  box-shadow: -30px 0 80px #0009;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--gb-default) var(--gb-ease), visibility var(--gb-default);
}
.gb-mobile-drawer.offcanvas.show,
.gb-mobile-drawer.offcanvas.showing {
  visibility: visible;
  transform: none;
}
.gb-mobile-drawer > header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 28px;
}
.gb-mobile-drawer > header small { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--gb-drawer-muted); }
.gb-mobile-drawer > header h2 { color: var(--gb-drawer-ink); font-size: 24px; margin: 4px 0 0; letter-spacing: -.03em; }
.gb-mobile-drawer > nav { display: grid; }
.gb-mobile-drawer > p {
  padding-top: 18px; border-top: 1px solid var(--gb-drawer-line);
  font-size: 14px; line-height: 1.7; color: var(--gb-drawer-muted); margin-top: auto;
}
.gb-mobile-drawer a {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px 6px;
  border-bottom: 1px solid var(--gb-drawer-line);
  color: var(--gb-drawer-ink); font-weight: 600;
  transition: color var(--gb-fast) var(--gb-ease), background var(--gb-fast) var(--gb-ease);
}
.gb-mobile-drawer a > span { color: var(--gb-drawer-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.gb-mobile-drawer a > strong { color: var(--gb-drawer-ink); font-size: 16px; }
.gb-mobile-drawer a > i { color: var(--gb-drawer-muted); transition: transform var(--gb-fast) var(--gb-ease), color var(--gb-fast) var(--gb-ease); }
.gb-mobile-drawer a:is(:hover, :focus-visible) { color: var(--gb-drawer-ink); background: color-mix(in srgb, var(--gb-secondary) 14%, transparent); outline: 2px solid var(--gb-focus); outline-offset: -2px; }
.gb-mobile-drawer a:is(:hover, :focus-visible) > i { color: var(--gb-accent); transform: translate(2px, -2px); }
.gb-drawer-explore { margin-top: 28px; }
.gb-drawer-label {
  display: flex; align-items: center; gap: 9px;
  min-height: 32px; color: var(--gb-drawer-muted);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.gb-drawer-label i { font-size: 18px; }
.gb-mobile-drawer .gb-drawer-explore a {
  grid-template-columns: 28px 1fr auto; min-height: 52px; padding-block: 8px;
}
.gb-mobile-drawer .gb-drawer-explore a > strong { font-size: 14px; }
.gb-mobile-drawer .gb-drawer-explore a > i { font-size: 13px; }
.offcanvas-backdrop {
  position: fixed; inset: 0; z-index: 1044;
  background: #030201; opacity: 0;
  transition: opacity var(--gb-default) var(--gb-ease);
}
.offcanvas-backdrop.show { opacity: .72; }
/* Bootstrap's dismiss button ships unstyled at 29x21 and sits outside <main>,
 * so the affordance rule there does not reach it. It is the only way out of a
 * full-screen drawer — the one control on the page that most needs the target. */
.gb-mobile-drawer [data-bs-dismiss="offcanvas"] {
  display: grid; place-items: center;
  min-width: var(--ds-touch); min-height: var(--ds-touch);
  padding: 0; border: 0; background: none; color: var(--gb-drawer-ink);
}
.gb-mobile-drawer [data-bs-dismiss="offcanvas"] i { font-size: 20px; }

/* ---------- page navigation ---------- */
.gb-toc {
  position: sticky;
  top: calc(var(--gb-header-h) + env(safe-area-inset-top, 0px));
  z-index: 1020;
  display: grid;
  gap: 8px;
  padding: 12px var(--gb-pad);
  background: color-mix(in srgb, var(--gb-bg) 92%, transparent);
  border-block: 1px solid var(--gb-line);
  backdrop-filter: blur(10px);
}
.gb-toc strong {
  color: var(--gb-muted);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gb-toc ol {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 2px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.gb-toc ol::-webkit-scrollbar { display: none; }
.gb-toc a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-touch);
  padding: 0 14px;
  border: 1px solid var(--gb-line);
  border-radius: 999px;
  background: var(--gb-surface);
  color: var(--gb-ink);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.gb-toc a:focus-visible, .gb-toc a:hover {
  border-color: var(--gb-accent);
  color: var(--gb-accent);
}
section[id] { scroll-margin-top: calc(var(--gb-header-h) + 84px); }
.gb-back-top {
  position: fixed;
  right: max(var(--gb-pad), calc((100vw - var(--gb-max)) / 2 + var(--gb-pad)));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 1030;
  display: grid;
  place-items: center;
  width: var(--ds-touch);
  height: var(--ds-touch);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--gb-accent) 65%, var(--gb-line));
  border-radius: 50%;
  background: var(--gb-accent);
  box-shadow: 0 12px 30px #0008;
  color: var(--gb-accent-ink);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--gb-fast) var(--gb-ease), transform var(--gb-fast) var(--gb-ease);
}
.gb-back-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.gb-back-top:focus-visible { outline: 3px solid var(--gb-ink); outline-offset: 3px; }

/* ---------- section rhythm ---------- */
.gb-hero, .gb-discovery, .gb-doorways, .gb-providers, .gb-trust,
.gb-guides, .gb-guide-hub, .gb-payment, .gb-faq, .gb-promo, .gb-mobile,
.gb-conversion, .gb-focus-brief, .gb-account-journey, .gb-member-desk,
.gb-glossary-board, .gb-resource-center {
  padding: var(--ds-gap-section) var(--gb-pad);
}
.gb-section-head { margin-bottom: 12px; }
.gb-section-head > a { color: var(--gb-ink); }
.gb-section-head > div > span, .gb-providers > span,
.gb-conversion > span, .gb-promo > div > span, .gb-payment > div > span {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  /* Section eyebrows follow the heading recipe, not the raw accent, so the
   * kicker and the heading it introduces read as one decision. The `arena`
   * archetype below overrides this with accent-ink on a filled chip. */
  color: var(--gb-heading-accent, var(--gb-accent));
}
.gb-breadcrumb {
  padding: 3px var(--gb-pad); overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--gb-line) 70%, transparent);
  background: color-mix(in srgb, var(--gb-surface) 42%, transparent);
  font-size: 13px; color: var(--gb-muted);
}
.gb-breadcrumb ol { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gb-breadcrumb li { display: flex; align-items: center; min-width: 0; }
.gb-breadcrumb li:last-child { flex: 1; }
.gb-breadcrumb li + li::before { content: "\203A"; flex: 0 0 auto; margin-right: 8px; color: var(--gb-muted); opacity: .65; }
.gb-breadcrumb a, .gb-breadcrumb span[aria-current="page"] { display: inline-flex; align-items: center; min-height: var(--ds-touch); }
.gb-breadcrumb a { position: relative; z-index: 1; min-width: var(--ds-touch); color: var(--gb-muted); font-weight: 700; }
.gb-breadcrumb a:is(:hover, :focus-visible) { color: var(--gb-link); outline: none; }
.gb-breadcrumb span[aria-current="page"] {
  min-width: 0; overflow: hidden; color: var(--gb-ink); font-weight: 700;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- hero ---------- */
.gb-hero {
  position: relative; isolation: isolate;
  padding-block: calc(var(--ds-gap-section) * 1.2);
  /* Height is content-driven. The old sheet pinned this to 760px, which on a
   * 390x844 screen was a full viewport of hero before any content — exactly the
   * shape browser_hero_too_tall and browser_first_fold_dense flag. */
}
.gb-hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.gb-hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim. Opacity alone left the photo competing with the headline — the source
 * of most of the browser_contrast_weak findings. A gradient keeps the image
 * readable as an image while the copy sits on near-solid ground. */
.gb-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gb-bg) 72%, transparent) 0%,
    color-mix(in srgb, var(--gb-bg) 86%, transparent) 55%,
    var(--gb-bg) 100%);
}
.gb-hero-copy { position: relative; }
/* Bengali, Burmese and Vietnamese set much wider than Latin at the same size,
 * so a 50px headline ran to five lines and took the whole fold. The cap keeps
 * the sampled size from overwhelming a 390px screen; the grammar still varies
 * it underneath. */
.gb-hero h1 {
  font-size: min(var(--ds-display), 32px);
  line-height: 1.15;
  text-wrap: balance;
}
.gb-hero p { color: var(--gb-muted); font-size: 16px; }
.gb-hero-actions { display: grid; gap: 12px; margin-top: 24px; }
.gb-hero-copy > .gb-wallets { gap: 10px; margin-top: 20px; }
/* Desktop-only decoration: cards positioned against a wide hero. */
.gb-float-card, .gb-float-a, .gb-float-b { display: none; }
/* The scroll cue is a hint, not a control: on a phone the rail below is already
 * visible, and left in flow it wrapped into a two-line stack at the column
 * edge. Hidden, and not counted as a target since it is not offered as one. */
.gb-scroll-cue { display: none; }

/* ---------- buttons ---------- */
.gb-primary, .gb-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; min-width: var(--ds-touch);
  padding-inline: 20px;
  border: 1px solid transparent; border-radius: var(--ds-r-button);
  font-weight: 800; font-size: 16px;
  transition: opacity var(--gb-fast) var(--gb-ease);
}
.gb-primary { background: var(--gb-accent); color: var(--gb-accent-ink); }
.gb-secondary { border-color: var(--gb-line); color: var(--gb-ink); }
.gb-primary:active, .gb-secondary:active { opacity: .82; }
.gb-text-link {
  display: inline-flex; align-items: center;
  min-height: var(--ds-touch); min-width: var(--ds-touch);
  color: var(--gb-link); font-size: 14px; font-weight: 700;
}

/* ---------- tabs ---------- */
.gb-tabs {
  display: flex; gap: 8px; padding-bottom: 4px;
  overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.gb-tabs::-webkit-scrollbar { display: none; }
.gb-tabs button {
  flex: 0 0 auto;
  min-height: var(--ds-touch); padding-inline: 14px;
  border: 1px solid var(--gb-line); border-radius: 999px;
  background: var(--gb-surface); color: var(--gb-muted);
  font-weight: 700; font-size: 14px; white-space: nowrap;
}
.gb-tabs button[aria-selected="true"] {
  background: var(--gb-accent); color: var(--gb-accent-ink); border-color: transparent;
}
/* Arrow controls are a pointer affordance; touch scrolling replaces them. */
.gb-rail-controls, .gb-prev, .gb-next { display: none; }

/* ---------- swiper rails (Swiper sizes the slides) ---------- */
.gb-game-swiper, .gb-provider-swiper { overflow: hidden; }
.gb-game-card {
  background: var(--gb-surface);
  border: 1px solid var(--gb-line);
  border-radius: var(--ds-r-card);
  overflow: hidden;
  height: auto;
}
.gb-game-card > a { display: block; height: 100%; color: var(--gb-ink); }
.gb-game-card figure { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.gb-game-card figure img { width: 100%; height: 100%; object-fit: cover; }
.gb-game-card figure > .gb-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 4px 8px; background: color-mix(in srgb, var(--gb-bg) 82%, transparent);
  color: var(--gb-ink); backdrop-filter: blur(6px);
}
.gb-game-card figure > i {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--gb-accent); color: var(--gb-accent-ink); font-size: 15px;
}
.gb-game-card > a > div { display: grid; gap: 7px; padding: 14px; }
.gb-game-card small { color: var(--gb-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.gb-game-card h3 { margin: 0; font-size: 17px; line-height: 1.35; text-wrap: pretty; }
.gb-game-card > a > div > span { display: block; margin-top: 3px; color: var(--gb-link); font-size: 14px; font-weight: 800; }
/* Game-rail recipes.
 *
 * The section carries `gb-games-<recipe>` and the cards always sit in a
 * `.swiper-wrapper`, but gaming-brand.js only initialises Swiper for `rail`
 * and `compact-shelf`. For grid / ranked / mosaic no Swiper runs, so without
 * these rules the slides stack full width and a 3:4 figure becomes ~700px
 * tall — one card filling the screen, which is what shipped.
 *
 * All three become the same phone shape: a horizontal snap strip. A 540px
 * column has no room for the 3-column grid, 2-column ranked list or 3-column
 * mosaic these were on desktop. */
.gb-games-grid .gb-game-swiper,
.gb-games-ranked .gb-game-swiper,
.gb-games-mosaic .gb-game-swiper { overflow: visible; }
.gb-games-grid .swiper-wrapper,
.gb-games-ranked .swiper-wrapper,
.gb-games-mosaic .swiper-wrapper { height: auto !important; transform: none !important; }
.gb-games-grid .swiper-wrapper { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gb-games-grid .gb-game-card { width: auto !important; }
.gb-games-grid .gb-game-card figure { aspect-ratio: 1 / 1; }
.gb-games-grid .gb-game-card > a > div { padding: 12px; }
.gb-games-ranked .swiper-wrapper { display: grid !important; gap: 12px; }
.gb-games-ranked .swiper-wrapper { counter-reset: games; }
.gb-games-ranked .gb-game-card { counter-increment: games; }
.gb-games-ranked .gb-game-card > a { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
.gb-games-ranked .gb-game-card figure { width: 104px; height: 104px; aspect-ratio: auto; }
.gb-games-ranked .gb-game-card h3::before {
  content: counter(games, decimal-leading-zero) "  "; color: var(--gb-accent); font-weight: 900;
}
.gb-games-mosaic .swiper-wrapper { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gb-games-mosaic .gb-game-card { width: auto !important; }
.gb-games-mosaic .gb-game-card:first-child { grid-column: 1 / -1; }
.gb-games-mosaic .gb-game-card:first-child figure { aspect-ratio: 16 / 9; }
.gb-games-mosaic .gb-game-card:not(:first-child) figure { aspect-ratio: 1 / 1; }
.gb-games-compact-shelf .gb-game-card figure { aspect-ratio: 1 / 1; }
.gb-games-compact-shelf .gb-game-card > a > div { gap: 4px; padding: 10px; }
.gb-games-compact-shelf .gb-game-card h3 { font-size: 15px; }
.gb-games-compact-shelf .gb-game-card > a > div > span { display: none; }

.gb-provider-swiper .swiper-slide {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--ds-touch); padding: 8px;
  background: var(--gb-surface); border: 1px solid var(--gb-line);
  border-radius: var(--ds-r-button);
  font-size: 13px; font-weight: 700; color: var(--gb-ink);
}

/* ---------- card grids (2-up is the widest a 540px column carries) ---------- */
.gb-doorways > div, .gb-guide-grid, .gb-phone-grid, .gb-wallets {
  display: grid; gap: var(--ds-gap-el);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gb-doorway, .gb-guide-card {
  min-height: var(--ds-touch);
  padding: var(--ds-card-pad);
  background: var(--gb-surface);
  border: 1px solid var(--gb-line);
  border-radius: var(--ds-r-card);
  color: var(--gb-ink);
}
.gb-doorway i, .gb-guide-card i { font-size: 20px; color: var(--gb-accent); }
/* No background here. The heading sits on the card, and the card owns its
 * surface — every surface recipe repaints it. Painting --gb-surface on the h3
 * as well made it opt out of that: under `inverted` the card went dark and the
 * heading colour flipped to --gb-on-inverted while this rule kept the light
 * --gb-surface behind it, giving a 1.1:1 heading (browser_contrast_weak on
 * every site that drew the recipe), and under `flat`/`bordered`, which make the
 * card transparent, it drew a solid block behind the heading alone. */
.gb-doorway h3, .gb-guide-card h3 {
  margin: 8px 0 4px;
  color: var(--gb-ink); font-size: 16px;
}
.gb-doorway p, .gb-guide-card p { margin: 0; font-size: 14px; color: var(--gb-muted); }
.gb-guide-intro { color: var(--gb-muted); font-size: 15px; }

.gb-trust > div { display: grid; gap: var(--ds-gap-el); }
.gb-trust > div > article {
  display: block; padding: min(var(--ds-card-pad), 16px);
  background: var(--gb-surface);
  border: 1px solid var(--gb-line);
  border-radius: var(--ds-r-card);
  color: var(--gb-ink);
}
.gb-trust h3 { margin: 0 0 6px; font-size: 15px; }
.gb-trust p { margin: 0; font-size: 15px; color: var(--gb-muted); }
.gb-trust article > a { margin-top: 8px; font-size: 14px; color: var(--gb-link); }
.gb-promo ul, .gb-payment ul, .gb-trust ul, .gb-content-depth ul,
.gb-focus-brief ul, .gb-account-journey ol, .gb-glossary-board ul {
  display: grid; gap: 8px; margin-top: 14px; padding: 0; list-style: none;
}
.gb-promo li, .gb-payment li, .gb-trust li, .gb-content-depth li,
.gb-focus-brief li, .gb-account-journey li, .gb-glossary-board li {
  padding: 12px; border: 1px solid var(--gb-line);
  border-radius: var(--ds-r-card); background: color-mix(in srgb, var(--gb-surface) 88%, transparent);
}
.gb-trust-single li { padding-inline: 8px; }
.gb-promo li h4, .gb-payment li h4, .gb-trust li h4, .gb-content-depth li h4,
.gb-focus-brief li h4, .gb-account-journey li h4, .gb-glossary-board li h4 { font-size: 14px; }
.gb-content-depth { display: grid; gap: 1px; padding: 0 var(--gb-pad); }
.gb-content-depth > article {
  padding: var(--ds-gap-section) 0; border-top: 1px solid var(--gb-line);
}
.gb-content-depth > article > span {
  color: var(--gb-accent); font-size: 12px; font-weight: 800; letter-spacing: .12em;
}
.gb-member-desk > div { display: grid; gap: 8px; }
.gb-member-desk > div > a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  min-height: var(--ds-touch); padding: 12px; border: 1px solid var(--gb-line);
  border-radius: var(--ds-r-card); background: var(--gb-surface); color: var(--gb-ink);
}
.gb-member-desk h3 { margin: 0; }

.gb-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--gb-surface-2); border: 1px solid var(--gb-line);
  font-size: 12px; font-weight: 700; color: var(--gb-ink);
}

/* ---------- promo / payment / providers ---------- */
.gb-promo {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 82% 12%,
              color-mix(in srgb, var(--gb-accent) 22%, transparent), transparent 42%),
              linear-gradient(135deg, var(--gb-surface), var(--gb-surface-2));
  border-block: 1px solid var(--gb-line);
}
.gb-promo > div { position: relative; z-index: 2; }
.gb-promo > a {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--ds-touch); padding-inline: 16px;
  border-radius: var(--ds-r-button);
  background: var(--gb-accent); color: var(--gb-accent-ink); font-weight: 800;
}
/* Decorative brand watermark. It is aria-hidden and was absolutely positioned
 * in the sheet this replaces; left in flow it printed right next to the CTA. */
.gb-promo > b {
  position: absolute; right: -2%; top: -6%;
  font-size: 86px; line-height: .7; font-style: italic;
  color: color-mix(in srgb, var(--gb-ink) 7%, transparent);
  pointer-events: none; user-select: none;
}
.gb-payment-logos, .gb-wallets { display: flex; flex-wrap: wrap; gap: 8px; }
.gb-wallets span, .gb-payment-logos span {
  display: inline-flex; align-items: center;
  min-height: 38px; padding: 0 14px;
  background: var(--gb-surface); border: 1px solid var(--gb-line);
  border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--gb-muted);
}
.gb-payment-logos a, .gb-wallets a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ds-touch); min-width: var(--ds-touch);
  padding: 6px 10px;
  background: var(--gb-surface); border: 1px solid var(--gb-line);
  border-radius: var(--ds-r-button);
  font-size: 13px; font-weight: 700; color: var(--gb-muted);
}

/* ---------- phone showcase ---------- */
.gb-phone-hero { display: grid; gap: var(--ds-gap-el); }
.gb-phone, .gb-phone-bar, .gb-phone-tabs { border-radius: var(--ds-r-card); overflow: hidden; }
.gb-live {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--gb-status) 16%, transparent);
  font-size: 12px; font-weight: 800; color: var(--gb-link);
}

/* ---------- faq ---------- */
.gb-faq details { padding-block: 12px; border-bottom: 1px solid var(--gb-line); }
.gb-faq summary {
  display: flex; align-items: center;
  min-height: var(--ds-touch);
  font-weight: 700; font-size: 14px; cursor: pointer; list-style: none;
}
.gb-faq summary::-webkit-details-marker { display: none; }
.gb-faq p { margin: 6px 0 0; font-size: 15px; color: var(--gb-muted); }

/* ---------- footer ---------- */
.gb-footer {
  background: var(--gb-surface);
  border-top: 1px solid var(--gb-line);
  padding: var(--ds-gap-section)
           max(var(--gb-pad), calc((100vw - var(--gb-max)) / 2 + var(--gb-pad)))
           calc(24px + env(safe-area-inset-bottom, 0px));
}
.gb-footer-brand { margin-bottom: 20px; }
.gb-footer a {
  display: inline-flex; align-items: center;
  min-height: var(--ds-touch); min-width: var(--ds-touch);
  font-size: 14px; color: var(--gb-muted);
}
.gb-footer-bottom {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--gb-line);
  font-size: 13px; color: var(--gb-muted);
}
.gb-brand-note { font-size: 13px; color: var(--gb-muted); }

/* ---------- small handsets ---------- */
/* The only breakpoint, matching the reference builds: a 320-380px tightening,
 * not a layout switch. */
@media (max-width: 380px) {
  :root { --gb-pad: 12px; --ds-gap-section: 30px; }
  .gb-doorways > div, .gb-guide-grid, .gb-phone-grid { grid-template-columns: 1fr; }
  .gb-hero h1, h1 { font-size: calc(var(--ds-display) * .84); }
  /* Avoid card-within-card gutters squeezing Bengali support copy below the
   * readable mobile measure. The outer article retains the visual boundary. */
  .gb-trust-single > div > article { padding-inline: 8px; }
  .gb-trust-single li { padding-inline: 0; border-inline: 0; border-radius: 0; }
}

article h3 > a { display: inline-flex; align-items: center; min-height: var(--ds-touch); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
 * Signature variation — mobile
 *
 * design_signature.py assigns every domain an archetype plus a hero, game,
 * rhythm, chrome, density, type and surface recipe, and the renderer already
 * emits all of them (`gb-hero-*`, `gb-games-*`, `body[data-*]`) and reorders
 * the sections by rhythm. What was missing was CSS: the rewrite that made this
 * sheet mobile-only carried over 5 hero rules and none of the 22 body[data-*]
 * rules, so every domain rendered the same page however the signature varied.
 *
 * Rebuilt here for a 540px column, where the levers are different from
 * desktop's: no side-by-side, no multi-column, so differentiation has to come
 * from media treatment, alignment, surface, rhythm and type instead.
 *
 * Weightings follow the harvested corpus for the dark gaming archetypes —
 * centred copy ~50%, full-bleed overlay ~37%, alternating section bands ~60%.
 * ==========================================================================*/

/* ---- hero recipes ---- */
/* Full-bleed: photo runs the column, copy sits on the scrim. */
.gb-hero-fullbleed { min-height: 62vh; display: flex; align-items: flex-end; }
.gb-hero-fullbleed .gb-hero-copy { padding-bottom: 4px; }

/* Centred poster: symmetric, media as a soft backdrop. The corpus' modal shape. */
.gb-hero-centered-poster { text-align: center; }
.gb-hero-centered-poster .gb-hero-actions { justify-items: center; }
.gb-hero-centered-poster .gb-wallets { justify-content: center; }
.gb-hero-centered-poster .gb-hero-media img { object-position: center top; }

/* Split recipes stack on a phone, but keep their side: the media becomes a
 * contained band above or below the copy rather than a background. */
.gb-hero-split-right, .gb-hero-split-left { display: flex; flex-direction: column; gap: 16px; }
.gb-hero-split-right .gb-hero-media,
.gb-hero-split-left .gb-hero-media {
  position: relative; inset: auto;
  height: 190px; border-radius: var(--ds-r-card); overflow: hidden;
}
.gb-hero-split-right .gb-hero-media::after,
.gb-hero-split-left .gb-hero-media::after { background: none; }
.gb-hero-split-left { flex-direction: column-reverse; }

/* Mosaic stage: the float cards earn their keep here instead of being hidden. */
.gb-hero-mosaic-stage .gb-hero-media { height: 210px; position: relative; inset: auto;
  border-radius: var(--ds-r-card); overflow: hidden; margin-bottom: 14px; }
.gb-hero-mosaic-stage .gb-float-card {
  display: block; position: absolute; bottom: 10px; width: 38%;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--gb-line);
}
.gb-hero-mosaic-stage .gb-float-a { left: 10px; }
.gb-hero-mosaic-stage .gb-float-b { right: 10px; }
.gb-hero-mosaic-stage .gb-float-card span {
  display: block; padding: 3px 6px; font-size: 9px; font-weight: 800;
  background: var(--gb-accent); color: var(--gb-accent-ink);
}

/* Device stage: a framed screenshot, product-launch feel. */
.gb-hero-device-stage .gb-hero-media {
  position: relative; inset: auto; height: 240px; margin: 0 auto 14px;
  width: 76%; border: 2px solid var(--gb-line); border-radius: 22px; overflow: hidden;
}
.gb-hero-device-stage .gb-hero-media::after { background: none; }
.gb-hero-device-stage { text-align: center; }

/* ---- chrome recipes: the header is the first thing read ---- */
body[data-chrome-recipe="solid"] .gb-header { background: var(--gb-surface); backdrop-filter: none; }
body[data-chrome-recipe="overlay"] .gb-header {
  background: linear-gradient(180deg, #000000cc, transparent); border-bottom: 0; backdrop-filter: blur(4px);
}
body[data-chrome-recipe="framed"] .gb-header {
  top: 8px; left: 8px; right: 8px; inset-inline: 8px;
  height: 52px; border: 1px solid var(--gb-line); border-radius: 14px;
  background: color-mix(in srgb, var(--gb-chrome-bg) 96%, transparent);
}
body[data-chrome-recipe="framed"] { padding-top: calc(68px + env(safe-area-inset-top, 0px)); }
body[data-chrome-recipe="minimal"] .gb-header { background: transparent; border-bottom: 1px solid var(--gb-line); backdrop-filter: none; }

/* ---- surface recipes: how every card reads ---- */
body[data-surface-recipe="flat"] :is(.gb-game-card, .gb-doorway, .gb-guide-card, .gb-trust > div > article)
  { border-color: transparent; background: color-mix(in srgb, var(--gb-ink) 5%, transparent); }
body[data-surface-recipe="bordered"] :is(.gb-game-card, .gb-doorway, .gb-guide-card, .gb-trust > div > article)
  { background: transparent; border: 1px solid var(--gb-line); }
body[data-surface-recipe="layered"] :is(.gb-game-card, .gb-doorway, .gb-guide-card, .gb-trust > div > article)
  { box-shadow: 0 10px 26px #0009; border-color: transparent; }
body[data-surface-recipe="inverted"] :is(.gb-doorway, .gb-guide-card)
  { background: var(--gb-inverted); color: var(--gb-on-inverted); border-color: transparent; }
body[data-surface-recipe="inverted"] :is(.gb-doorway, .gb-guide-card) :is(h3, p) { color: var(--gb-on-inverted); }

/* ---- rhythm: alternating bands is the corpus majority (~60%) ---- */
body[data-rhythm-recipe="discovery"] main > section:nth-of-type(even),
body[data-rhythm-recipe="media"] main > section:nth-of-type(even),
body[data-rhythm-recipe="club"] main > section:nth-of-type(even) {
  background: var(--gb-surface);
}
body[data-rhythm-recipe="trust"] main > section { border-bottom: 1px solid var(--gb-line); }
body[data-rhythm-recipe="proof"] main > section:nth-of-type(odd) .gb-section-head {
  border-left: 3px solid var(--gb-accent); padding-left: 10px;
}

/* ---- density: the spacing multiplier the signature already chose ---- */
body[data-density="compact"]  { --ds-card-pad: 14px; }
body[data-density="dense"]    { --ds-card-pad: 14px; }
body[data-density="spacious"] { --ds-card-pad: 20px; }

body[data-archetype="arena"] :is(.gb-primary, .gb-secondary) { border-radius: 0; text-transform: uppercase; }
body[data-archetype="club"] .gb-primary { border-radius: 999px; }
body[data-surface-recipe="layered"] .gb-primary { box-shadow: 0 10px 24px color-mix(in srgb, var(--gb-accent) 30%, transparent); }
body[data-hero-recipe^="split"] .gb-hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- type recipes: the first thing a reader registers ----
 *
 * Each recipe now names a face that is actually loaded above. `condensed` used
 * font-stretch alone, which does nothing to a face with no condensed axis, and
 * `humanist` used weight alone — both landed on the same system-ui as
 * `grotesk`, so three of the five recipes were indistinguishable. */
body[data-type-recipe="condensed"] :is(h1, h2, h3) {
  font-family: "Archivo Narrow", "Manrope", system-ui, sans-serif;
  letter-spacing: -.01em; font-weight: 700; text-transform: uppercase;
}
body[data-type-recipe="display"] :is(h1, h2) { font-family: "Source Serif 4", Georgia, serif; font-weight: 700; }
/* Bengali has no condensed or humanist Noto cut, so in bn-BD the latin display
 * faces never engage and four of the five type recipes collapse into one sans.
 * A real serif keeps `display` visibly separate; the rest are told apart by
 * the heading colour recipe. */
html[lang^="bn"] body[data-type-recipe="display"] :is(h1, h2) {
  font-family: "Noto Serif Bengali", "Noto Sans Bengali", "Nirmala UI", system-ui, serif;
  font-weight: 700;
}
body[data-type-recipe="technical"] .gb-section-head > div > span,
body[data-type-recipe="technical"] .gb-badge {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}
body[data-type-recipe="technical"] :is(h1, h2) { letter-spacing: -.015em; }
body[data-type-recipe="humanist"] :is(h1, h2, h3) {
  font-family: "Source Sans 3", "Manrope", system-ui, sans-serif;
  font-weight: 600; letter-spacing: 0;
}
body[data-type-recipe="grotesk"] :is(h1, h2) { letter-spacing: -.02em; }

/* ---- archetype: section-head signature ---- */
body[data-archetype="cinematic"] .gb-section-head > div > span { color: var(--gb-red); }
body[data-archetype="arena"] .gb-section-head > div > span {
  background: var(--gb-accent); color: var(--gb-accent-ink); padding: 2px 8px;
}
body[data-archetype="club"] .gb-section-head > div > span {
  border-bottom: 2px solid var(--gb-accent); padding-bottom: 3px;
}
body[data-archetype="utility"] .gb-section-head > div > span {
  background: color-mix(in srgb, var(--gb-accent) 18%, transparent);
  border-radius: 999px; color: var(--gb-ink); padding: 3px 10px;
}

/* ---------- mobile inner pages ---------- */
.gb-inner { min-height: 70vh; }
.gb-inner-hero, .gb-inner-section, .gb-inner-faq {
  padding: var(--ds-gap-section) var(--gb-pad);
  border-bottom: 1px solid var(--gb-line);
}
.gb-inner-hero { display: grid; gap: 18px; }
.gb-inner-hero > figure, .gb-inner-section > figure {
  margin: 0; overflow: hidden; border-radius: var(--ds-r-card);
  border: 1px solid var(--gb-line); background: var(--gb-surface);
}
.gb-inner-hero > figure { aspect-ratio: 16 / 9; }
.gb-inner-hero > figure img, .gb-inner-section > figure img {
  width: 100%; height: 100%; object-fit: cover;
}
.gb-inner-hero article > span, .gb-inner-section article > span, .gb-inner-faq header > span {
  display: inline-block; margin-bottom: 8px; color: var(--gb-heading-accent, var(--gb-link));
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.gb-inner-hero h1 { font-size: clamp(28px, 9vw, 42px); text-wrap: balance; }
.gb-inner-hero p, .gb-inner-section p, .gb-inner-faq p { color: var(--gb-ink); }
.gb-inner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.gb-inner-actions a { justify-content: center; text-align: center; }
.gb-inner-section { display: grid; gap: 16px; }
.gb-inner-section > figure { aspect-ratio: 3 / 2; }
.gb-inner-section ul, .gb-inner-section ol, .gb-inner-hero ul {
  display: grid; gap: 8px; padding: 0; list-style: none;
}
.gb-inner-section li, .gb-inner-hero li {
  padding: min(var(--ds-card-pad), 18px); border: 1px solid var(--gb-line);
  border-radius: var(--ds-r-card); background: var(--gb-surface);
}
.gb-inner-section li h4, .gb-inner-hero li h4 { margin-bottom: 4px; font-size: 15px; }
.gb-inner-section li p, .gb-inner-hero li p { margin: 0; }
.gb-inner-labels { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
.gb-inner-labels li { width: auto; padding: 6px 10px; font-size: 14px; }

body[data-type-recipe="technical"] .gb-section-head h2,
body[data-type-recipe="display"] .gb-section-head h2,
body[data-type-recipe="condensed"] h3 { color: var(--gb-heading-accent, var(--gb-link)); }
.gb-inner-utility { background: transparent; }
.gb-inner-utility li { background: transparent; border-inline: 0; border-radius: 0; padding-inline: 0; }
.gb-inner-faq { display: grid; gap: 14px; }
.gb-inner-faq details { border-top: 1px solid var(--gb-line); }
.gb-inner-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--ds-touch); padding: 12px 0; cursor: pointer; font-weight: 750;
}
.gb-inner-faq summary::-webkit-details-marker { display: none; }
.gb-inner-faq details[open] summary i { transform: rotate(45deg); }
.gb-inner-faq details > div { padding: 0 0 14px; }

@media (max-width: 380px) {
  :root { --gb-pad: 12px; --ds-display: 27px; }
  .gb-inner-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .gb-back-top { transition: none; }
}

/* --- design grammar: archetype=club theme=dark density=balanced signature=9166ed0bf5eaa528 n=33 --- */
:root{--gb-max:598.8px;--ds-gap-section:28px;--ds-gap-el:8px;--ds-card-pad:24px;--ds-display:27.6px;--ds-body:16px;--ds-r-card:8.7px;--ds-r-button:28px;--ds-touch:44px}body[data-archetype] .gb-badge{border-radius:24px}body[data-archetype] :is(.gb-primary,.gb-secondary,.gb-menu-toggle,.gb-doorway,.gb-faq summary){min-height:44px}*{touch-action:manipulation}.gb-mobile-drawer,.gb-tabs,.gb-game-swiper{overscroll-behavior:contain}