/* 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 ol li {
  display: flex;
  align-items: center;
  min-width: 0;
  }

.gb-breadcrumb ol li:last-child {
  flex: 1;
  }

.gb-breadcrumb ol 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;
  }

/* Sibling game shortcuts under the trail. Own row (the trail already eats the
 * width with an ellipsised page title) and scrolls sideways inside the bar, so
 * a long local game name can never widen the document. Chips keep the 44px
 * target the rest of the chrome uses — they are navigation, not prose links. */
.gb-breadcrumb-games {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  }

.gb-breadcrumb-games::-webkit-scrollbar {
  display: none;
  }

.gb-breadcrumb-games li {
  flex: 0 0 auto;
  display: flex;
  }

.gb-breadcrumb-games a {
  justify-content: center;
  padding-inline: 12px;
  border: 1px solid color-mix(in srgb, var(--gb-line) 85%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gb-surface) 70%, transparent);
  font-size: 12px;
  white-space: nowrap;
  }

/* First chip is the market's lead game kind (cockfight on vn, cricket on
 * bd/pk) — see nav_priority_kinds. It carries the accent so the local hook is
 * the one thing that reads first in the bar. */
.gb-breadcrumb-games li:first-child a {
  border-color: color-mix(in srgb, var(--gb-accent) 45%, transparent);
  background: color-mix(in srgb, var(--gb-accent) 12%, transparent);
  color: var(--gb-ink);
  }

.gb-breadcrumb-games a:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--gb-link) 55%, transparent);
  color: var(--gb-link);
  }

/* ---------- 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 ---------- */
/* Long-script guide copy needs a readable column at common 390-430px handset
 * widths;
  two padded cards otherwise leave only about 130px for the body. */
@media (max-width: 480px) {
  :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=arena theme=light density=balanced signature=769536e30a979186 n=67 --- */
:root {
  --gb-max:532.6px;
  --ds-gap-section:24px;
  --ds-gap-el:8px;
  --ds-card-pad:12px;
  --ds-display:56px;
  --ds-body:16.5px;
  --ds-r-card:19.2px;
  --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
}