/* bk8-cambodia.com — design system.
 *
 * Not a casino template. Every token below was read off BK8's own live platform
 * (bk8masd.com, /en-kh/ and /km-kh/) or off the Cambodian consumer apps this
 * audience uses daily, so the page reads as an extension of the operator rather
 * than a reskin of something generic.
 *
 * The three decisions that matter, and why:
 *   1. WHITE ground. BK8's served HTML literally inlines `html{background:#fff}`
 *      with black text and #f3f5f6 surfaces. The instinctive dark-casino look
 *      would resemble nothing the brand actually ships.
 *   2. Khmer leading. Khmer ink boxes measure 1.30-1.64em against Latin's 0.96em,
 *      so stacked subscripts collide at the 1.2-1.35 line-heights a Latin-only
 *      designer reaches for. Body runs 1.7, headings never below 1.3, and nothing
 *      that can hold Khmer gets a fixed height — min-height plus padding instead.
 *   3. One signature effect. BK8 has no gradients, no glow and no card shadows in
 *      its chrome; it has exactly one — a pulsing orange ring on the primary CTA.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Ground and surfaces — measured from BK8's computed styles */
  --ground: #ffffff;
  --surface: #f3f5f6;
  --surface-2: #dbe9f0;
  --sunken: #eef1f3;
  --line: #e2e7ea;
  --line-2: #eef1f3;

  --ink: #0f161f;
  --ink-2: #414d5a;
  --mute: #65707d;

  /* Brand — BK8's own values */
  --brand: #ff8a00;              /* primary CTA + active states */
  --brand-dark: #e07600;
  --brand-ring: rgba(255, 138, 0, .26);
  --blue: #0071e3;               /* secondary / informational — as a FILL */
  --blue-dark: #005ec0;
  --link: #006ddf;               /* the same blue as TEXT: #0071e3 lands at 4.29 on
                                    the #f3f5f6 surface, just under the 4.5 floor */
  --red: #cb011b;                /* mobile JOIN half */
  --fill-blue: #0071e3;          /* fills that carry a white label — theme-fixed:
                                    white reads 4.70 here and 5.90 on --fill-red */
  --fill-red: #cb011b;
  --gold: #fcb615;               /* BK8 logo gold */
  --navy: #013b7a;
  --navy-deep: #03153d;
  --gold-lt: #ffdc46;

  /* Semantics. Cambodian convention: green up, red down; red is a CTA colour
     here, not a warning, so status red is deliberately distinct from --red. */
  --up: #028235;
  --down: #c4121f;
  --warn: #b07c1e;

  --on-brand: #03153d;           /* label colour ON the orange fill */
  --shadow-cta: 0 0 0 0 var(--brand-ring);
  --radius-0: 0;
  --radius-1: 5px;               /* primary button, header pills */
  --radius-2: 10px;              /* secondary button */
  --wrap: 1200px;

  /* Latin first, Khmer as fallback in ONE stack — the pattern every Cambodian
     bank and telco ships. Inside a Khmer sentence "BK8", "$1.50" and "2026" fall
     to the Latin face automatically, which is what a local reader expects.
     "Khmer OS" covers older Cambodian Windows machines, as ACLEDA's stack does. */
  --font: "Figtree", "Kantumruy Pro", "Khmer OS System", "Khmer OS",
          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: "Figtree", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ACLEDA — the country's largest domestic bank — ships prefers-color-scheme
       with rgb(9,21,33); half this market is on iPhones with system dark mode. */
    --ground: #091521;
    --surface: #14202c;
    --surface-2: #1b2b3a;
    --sunken: #0d1926;
    --line: #24333f;
    --line-2: #1a2733;
    --ink: #eef1f3;
    --ink-2: #b9c4cd;
    --mute: #8b98a5;
    --brand: #ff9a24;
    --brand-dark: #ff8a00;
    --blue: #4aa3ff;
    --blue-dark: #2b8ae8;
    --red: #ef4457;
    --up: #38c172;
    --down: #ef4457;
    --link: #6fb7ff;
    --on-brand: #1a1206;
  }
}
:root[data-theme="dark"] {
  --ground: #091521;
  --surface: #14202c;
  --surface-2: #1b2b3a;
  --sunken: #0d1926;
  --line: #24333f;
  --line-2: #1a2733;
  --ink: #eef1f3;
  --ink-2: #b9c4cd;
  --mute: #8b98a5;
  --brand: #ff9a24;
  --brand-dark: #ff8a00;
  --blue: #4aa3ff;
  --blue-dark: #2b8ae8;
  --red: #ef4457;
  --up: #38c172;
  --down: #ef4457;
  --link: #6fb7ff;
  --on-brand: #1a1206;
}

/* ------------------------------------------------------------------- fonts */
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Kantumruy Pro";
  src: url("/fonts/kantumruy.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-display: swap;
  font-style: normal;
  unicode-range: U+1780-17FF, U+19E0-19FF, U+200B, U+25CC;
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  /* 1.7, not 1.5: Khmer subscripts and upper vowels physically overlap below it. */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-break: break-word;         /* safety net for Khmer strings without U+200B */
}
body.nav-open, body.modal-open { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.3;               /* floor for Khmer; never go under this */
  text-wrap: balance;
}
h1 { font-size: clamp(29px, 5.4vw, 46px); line-height: 1.22; letter-spacing: -.022em; }
h2 { font-size: clamp(23px, 3.4vw, 31px); }
h3 { font-size: clamp(18px, 2.2vw, 21px); font-weight: 700; }
p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 7px; }
strong, b { font-weight: 700; }
.num, table td.n, table th.n { font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: var(--on-brand); padding: 12px 18px; font-weight: 800;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ promobar */
/* The offer, above everything, on every page. */
.promobar {
  background: var(--navy-deep);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.promobar .wrap {
  display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
  min-height: 46px; padding-top: 7px; padding-bottom: 7px;
}
.pb-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-deep); background: var(--gold-lt);
  padding: 3px 7px; border-radius: 3px; flex: none;
}
.pb-txt { color: rgba(255, 255, 255, .88); }
.pb-big { font-weight: 800; color: var(--gold-lt); }
.pb-go {
  margin-left: auto; flex: none;
  background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: 13px;
  padding: 9px 16px; border-radius: var(--radius-1); text-decoration: none;
  min-height: 40px; display: inline-flex; align-items: center;
}
.pb-go:hover { background: var(--brand-dark); color: var(--on-brand); }

/* -------------------------------------------------------------------- header */
.head {
  position: sticky; top: 0; z-index: 80;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.head .wrap {
  display: flex; align-items: center; gap: 12px;
  min-height: 62px; padding-top: 8px; padding-bottom: 8px;
}
.logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 900; font-size: 20px; letter-spacing: -.03em;
  color: var(--ink); text-decoration: none; flex: none;
}
.logo .mark {
  background: var(--navy-deep); color: #fff;
  padding: 6px 10px; border-radius: var(--radius-1); line-height: 1.3;
}
.logo .mark b { color: var(--gold); }
.logo .kh {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mute); border-left: 1px solid var(--line); padding-left: 8px; line-height: 1.5;
}

.mainnav { display: none; margin-left: 6px; }
.mainnav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.mainnav a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 11px; font-size: 14px; color: var(--ink-2); text-decoration: none;
  border-bottom: 2.4px solid transparent; min-height: 42px;
}
.mainnav a:hover { color: var(--brand); }
.mainnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 600; }
.newpill {
  font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--fill-red); color: #fff; padding: 2px 5px; border-radius: 3px; line-height: 1.5;
}

/* BK8's own header carries a live clock with the GMT offset. */
.clock {
  display: none; margin-left: auto; font-family: var(--font-num);
  font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.head-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.clock + .head-actions { margin-left: 14px; }
.h-login {
  font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  padding: 9px 10px; min-height: 42px; display: none; align-items: center;
}
.h-login:hover { color: var(--brand); }
.h-join {
  background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: 14px;
  padding: 10px 18px; border-radius: var(--radius-1); text-decoration: none;
  min-height: 42px; display: inline-flex; align-items: center;
  animation: ring 2.6s ease-out infinite;
}
.h-join:hover { background: var(--brand-dark); color: var(--on-brand); animation: none; }
/* BK8's one signature effect: an expanding ring on the primary CTA. */
@keyframes ring {
  0%   { box-shadow: 0 0 0 0 var(--brand-ring); }
  70%  { box-shadow: 0 0 0 17px rgba(255, 138, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 138, 0, 0); }
}

.nav-toggle {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--blue); padding: 8px; margin-left: -8px;
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 24px; height: 24px; }
#nav-panel {
  border-top: 1px solid var(--line); background: var(--ground);
  max-height: 74vh; overflow: auto; overscroll-behavior: contain;
}
#nav-panel .wrap { padding-top: 10px; padding-bottom: 18px; }
.navgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 10px; list-style: none; margin: 0; padding: 0; }
.navgrid li { margin-bottom: 0; }
.navgrid a {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 10px; min-height: 46px;
  color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500;
  border-radius: var(--radius-1);
}
.navgrid a:hover, .navgrid a:focus-visible { background: var(--surface); color: var(--brand); }
.navgrid .g {
  grid-column: 1 / -1; margin-top: 12px; padding: 0 10px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--mute);
}

/* ------------------------------------------------ mobile split action bar */
/* The loudest thing on BK8's phone layout, sitting directly under the hero:
   two full-bleed halves, zero radius, butted edge to edge. Reproduced exactly. */
.splitbar { display: grid; grid-template-columns: 1fr 1fr; }
.splitbar a {
  min-height: 46px; display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; text-transform: uppercase;
  font-size: 14.7px; font-weight: 600; letter-spacing: .02em;
  border-radius: var(--radius-0); padding: 8px 10px; text-align: center;
}
.splitbar .join { background: var(--fill-red); }
.splitbar .login { background: var(--fill-blue); }
.splitbar .join:hover { background: #b00117; }
.splitbar .login:hover { background: var(--blue-dark); }

/* ------------------------------------------------------------------- ticker */
.ticker {
  background: var(--surface); border-bottom: 1px solid var(--line);
  font-size: 13.5px; overflow: hidden;
}
.ticker .wrap { display: flex; align-items: center; gap: 10px; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
.ticker .chip {
  flex: none; background: var(--fill-blue); color: #fff; font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px;
}
.ticker p { margin: 0; color: var(--ink-2); }
.ticker a { font-weight: 600; }

/* --------------------------------------------------------------------- hero */
.hero { background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; }
.hero-art { position: absolute; inset: 0; z-index: 0; }
.hero-art svg { width: 100%; height: 100%; }
.hero .wrap { position: relative; z-index: 1; padding-top: 34px; padding-bottom: 34px; }
.hero .kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-lt); margin-bottom: 12px;
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero .lead {
  margin: 14px 0 0; color: rgba(255, 255, 255, .84); font-size: 16.5px; max-width: 56ch;
}
.hero-offer {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin-top: 20px; padding: 14px 18px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 220, 70, .3);
  border-radius: var(--radius-2);
}
.hero-offer .big {
  font-size: clamp(26px, 5vw, 36px); font-weight: 900; color: var(--gold-lt);
  line-height: 1.25; letter-spacing: -.02em;
}
.hero-offer .sm { font-size: 14px; color: rgba(255, 255, 255, .8); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 22px;
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.5;
  text-decoration: none; cursor: pointer; border: 0;
  background: var(--brand); color: var(--on-brand); border-radius: var(--radius-1);
}
.btn:hover { background: var(--brand-dark); color: var(--on-brand); }
.btn-lg { font-size: 16.5px; padding: 15px 30px; min-height: 54px; }
.btn-ring { animation: ring 2.6s ease-out infinite; }
.btn-ring:hover { animation: none; }
.btn-2 { background: var(--fill-blue); color: #fff; border-radius: var(--radius-2); }
.btn-2:hover { background: var(--blue-dark); color: #fff; }
.btn-ghost {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); border-radius: var(--radius-2);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn-out {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line); border-radius: var(--radius-2);
}
.btn-out:hover { background: var(--surface); color: var(--brand); }

/* -------------------------------------------------------------------- shell */
.shell { display: grid; gap: 28px; padding: 30px 0 46px; }
.crumbs { font-size: 13px; color: var(--mute); padding-top: 16px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.crumbs a { color: var(--mute); }
.crumbs a:hover { color: var(--brand); }

.lead-in { font-size: 17.5px; color: var(--ink-2); max-width: 68ch; }
article > section { padding-top: 30px; scroll-margin-top: 76px; }
article > section > h2 { margin-bottom: 12px; }
article p, article li { max-width: 74ch; }

/* --------------------------------------------------------------------- toc */
.toc { background: var(--surface); border-radius: var(--radius-2); padding: 18px 20px; }
.toc h2 { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; }
.toc ol { columns: 2; column-gap: 26px; margin: 0; padding-left: 18px; font-size: 14.5px; }
.toc li { break-inside: avoid; margin-bottom: 5px; }

/* ------------------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 20px 0; }
.stat { background: var(--surface); border-radius: var(--radius-2); padding: 16px 18px; }
.stat b { display: block; font-size: 25px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.3; }
.stat span { font-size: 13px; color: var(--mute); }

/* --------------------------------------------------------------- game tiles */
/* BK8 ships 230x155 landscape tiles at zero radius and prints the RTP on each —
   a house convention that doubles as a trust signal, so it is reproduced. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; margin: 20px 0; }
.tile {
  background: var(--surface); border-radius: var(--radius-0); overflow: hidden;
  text-decoration: none; color: var(--ink); display: flex; flex-direction: column;
}
.tile:hover { color: var(--ink); }
.tile:hover .tile-art { filter: brightness(1.08); }
.tile-art { aspect-ratio: 230 / 155; background: var(--navy); position: relative; transition: filter .18s; }
.tile-art svg { width: 100%; height: 100%; }
.tile-badge {
  position: absolute; top: 7px; left: 7px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--fill-red); color: #fff; padding: 3px 6px; border-radius: 3px;
}
.tile-badge.new { background: var(--fill-blue); }
.tile-meta { padding: 9px 10px 11px; }
.tile-meta b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.tile-meta span { display: block; font-size: 11.5px; color: var(--mute); line-height: 1.5; }
.tile-rtp { font-family: var(--font-num); font-size: 11.5px; color: var(--up); font-weight: 600; }

/* -------------------------------------------------------------- promo cards */
/* 990x320 (~3.1:1), deep navy ground, gold accents, the figure set inline in the
   headline — and no button inside the card, exactly as BK8 builds them. */
.promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 20px 0; }
.promo {
  position: relative; overflow: hidden; border-radius: var(--radius-2);
  background: radial-gradient(120% 140% at 78% 30%, #04326e 0%, var(--navy-deep) 62%);
  color: #fff; padding: 20px 22px; min-height: 148px;
  display: flex; flex-direction: column; justify-content: center;
}
.promo-art { position: absolute; inset: 0; opacity: .9; }
.promo > * { position: relative; z-index: 1; }
.promo .h { font-size: 20px; font-weight: 900; line-height: 1.3; letter-spacing: -.015em; }
.promo .h em { font-style: normal; color: var(--gold-lt); }
.promo .s { font-size: 13.5px; color: rgba(255, 255, 255, .78); margin-top: 6px; }

/* ------------------------------------------------------------ payment grid */
.pays { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 20px 0; }
.pay {
  background: var(--surface); border-radius: var(--radius-2); padding: 14px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  color: var(--ink); text-decoration: none; min-height: 96px; justify-content: center;
}
.pay:hover { background: var(--surface-2); color: var(--ink); }
.pay svg { width: 40px; height: 40px; }
.pay b { font-size: 13px; font-weight: 700; line-height: 1.4; }
.pay span { font-size: 11px; color: var(--mute); line-height: 1.45; }

/* -------------------------------------------------------------- trust tiles */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 20px 0; }
.trust-i { background: var(--surface); border-radius: var(--radius-2); padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start; }
.trust-i svg { width: 22px; height: 22px; flex: none; margin-top: 3px; color: var(--brand); }
.trust-i b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.45; }
.trust-i span { font-size: 13px; color: var(--mute); }

/* ------------------------------------------------------------------- table */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-2); background: var(--surface); position: relative; margin: 20px 0; }
.scroll.has-more::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 92%, #000));
}
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line-2); line-height: 1.6; }
thead th {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mute); background: color-mix(in srgb, var(--line-2) 60%, transparent);
}
tbody tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
.up { color: var(--up); font-weight: 700; }
.down { color: var(--down); font-weight: 700; }

/* --------------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 15px 34px 15px 0; position: relative;
  font-weight: 700; font-size: 15.5px; line-height: 1.55;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 22px;
  width: 9px; height: 9px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute);
  transform: rotate(45deg); transition: transform .18s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:focus-visible { outline-offset: -3px; }
.faq .a { padding: 0 0 16px; color: var(--ink-2); max-width: 74ch; }

/* ------------------------------------------------------------------ CTA strip */
.ctastrip {
  background: var(--surface); border-radius: var(--radius-2); padding: 22px 24px; margin: 26px 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
}
.ctastrip .t { flex: 1 1 300px; }
.ctastrip b { display: block; font-size: 18px; font-weight: 800; line-height: 1.4; letter-spacing: -.01em; }
.ctastrip p { margin: 5px 0 0; font-size: 14.5px; color: var(--ink-2); max-width: 62ch; }
.ctastrip .btn { flex: none; }

/* ---------------------------------------------------------------- offer rail */
.cols { display: grid; gap: 28px; }
.rail { display: grid; gap: 16px; align-content: start; }
.offer {
  background: radial-gradient(130% 120% at 80% 12%, #04326e 0%, var(--navy-deep) 64%);
  color: #fff; border-radius: var(--radius-2); padding: 22px 20px;
}
.offer .k { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-lt); }
.offer .big { font-size: 33px; font-weight: 900; line-height: 1.2; letter-spacing: -.025em; margin: 8px 0 2px; color: #fff; }
.offer .sub { font-size: 14px; color: rgba(255, 255, 255, .8); margin-bottom: 15px; }
.offer ul { list-style: none; padding: 0; margin: 0 0 17px; font-size: 13.5px; }
.offer li { display: flex; gap: 8px; align-items: flex-start; color: rgba(255, 255, 255, .88); margin-bottom: 7px; }
.offer li::before { content: "✓"; color: var(--gold-lt); font-weight: 900; flex: none; }
.offer .btn { width: 100%; }
.railbox { background: var(--surface); border-radius: var(--radius-2); padding: 18px 20px; }
.railbox h2 { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; }
.railbox ul { list-style: none; padding: 0; margin: 0; font-size: 14.5px; }
.railbox li { margin-bottom: 2px; }
.railbox a { display: block; padding: 8px 0; color: var(--ink); text-decoration: none; min-height: 40px; line-height: 1.6; }
.railbox a:hover { color: var(--brand); }

/* ------------------------------------------------------------------ related */
.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 8px; }
.related a {
  background: var(--surface); border-radius: var(--radius-2); padding: 15px 17px;
  text-decoration: none; color: var(--ink); display: block;
}
.related a:hover { background: var(--surface-2); color: var(--ink); }
.related b { display: block; font-size: 15px; font-weight: 700; line-height: 1.45; }
.related span { font-size: 13px; color: var(--mute); line-height: 1.55; }

/* ---------------------------------------------------------------- stickybar */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--navy-deep); color: #fff;
  transform: translate3d(0, 110%, 0); transition: transform .26s ease;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .22);
}
.stickybar.is-up { transform: translate3d(0, 0, 0); }
.stickybar .wrap { display: flex; align-items: center; gap: 12px; min-height: 60px; padding-top: 9px; padding-bottom: 9px; }
.sb-t { font-size: 13.5px; line-height: 1.5; flex: 1 1 auto; }
.sb-t b { color: var(--gold-lt); font-weight: 800; }
.sb-close {
  appearance: none; background: none; border: 0; color: rgba(255, 255, 255, .55);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 8px; min-width: 40px; min-height: 40px; flex: none;
}
.sb-close:hover { color: #fff; }

/* -------------------------------------------------------------------- exit */
.exit {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  background: rgba(3, 21, 61, .74); padding: 18px; overflow: auto;
}
.exit-card {
  background: var(--ground); color: var(--ink); border-radius: var(--radius-2);
  max-width: 460px; width: 100%; padding: 28px 26px; position: relative;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
.exit-close {
  position: absolute; top: 8px; right: 8px; appearance: none; background: none; border: 0;
  font-size: 24px; line-height: 1; color: var(--mute); cursor: pointer;
  min-width: 44px; min-height: 44px;
}
.exit-close:hover { color: var(--ink); }
.exit .k { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.exit h2 { font-size: 25px; margin: 8px 0 10px; }
.exit p { color: var(--ink-2); font-size: 15px; }
.exit .exit-go { width: 100%; margin-top: 6px; }
.exit .fine { font-size: 12px; color: var(--mute); margin: 12px 0 0; }

/* ------------------------------------------------------------- slot machine */
.slot {
  --sl-hot: #e03131; --sl-gold: #fcb615; --sl-goldDark: #b8820c;
  --sl-green: #2f9e44; --sl-ink: #0f161f;
  background: radial-gradient(130% 130% at 50% 0%, #04326e 0%, var(--navy-deep) 66%);
  border-radius: var(--radius-2); padding: 18px; color: #fff; margin: 22px 0;
}
.sl-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sl-meter { min-width: 0; }
.sl-meter-r { text-align: right; }
.sl-lab { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); line-height: 1.6; }
.sl-meter b, .sl-stake b { font-family: var(--font-num); font-size: 19px; font-weight: 800; color: var(--gold-lt); font-variant-numeric: tabular-nums; line-height: 1.4; }
.sl-window {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  background: rgba(0, 0, 0, .3); border-radius: 6px; padding: 6px; position: relative;
}
.sl-reel { overflow: hidden; height: 96px; background: var(--ground); border-radius: 4px; }
.sl-strip { will-change: transform; }
.sl-cell { height: 96px; display: grid; place-items: center; }
.sl-cell svg { width: 54px; height: 54px; }
.sl-line { position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: rgba(255, 220, 70, .55); transform: translateY(-1px); pointer-events: none; }
.sl-msg { font-size: 13.5px; color: rgba(255, 255, 255, .82); margin: 12px 0; min-height: 42px; line-height: 1.6; }
.sl-controls { display: flex; align-items: center; gap: 8px; }
.sl-bet {
  appearance: none; background: rgba(255, 255, 255, .12); border: 0; color: #fff;
  min-width: 44px; min-height: 44px; border-radius: var(--radius-1);
  font-size: 20px; font-weight: 700; cursor: pointer; line-height: 1;
}
.sl-bet:hover { background: rgba(255, 255, 255, .22); }
.sl-stake { text-align: center; min-width: 74px; }
.sl-spin {
  appearance: none; border: 0; margin-left: auto; cursor: pointer;
  background: var(--brand); color: var(--on-brand); font-family: inherit; font-size: 16px; font-weight: 800;
  padding: 12px 30px; min-height: 48px; border-radius: var(--radius-1); line-height: 1.5;
}
.sl-spin:hover { background: var(--brand-dark); }
.sl-spin:disabled { opacity: .55; cursor: default; }
.sl-cta { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .16); }
.sl-cta-h { font-size: 14.5px; font-weight: 700; margin: 0 0 10px; line-height: 1.55; }
.sl-cta-btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--gold-lt); color: var(--navy-deep); font-weight: 800; font-size: 14.5px;
  min-height: 48px; padding: 11px 18px; border-radius: var(--radius-1); text-decoration: none; line-height: 1.5;
}
.sl-cta-btn:hover { background: #ffe66b; color: var(--navy-deep); }

/* --------------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs button {
  appearance: none; background: none; border: 0; cursor: pointer; font-family: inherit;
  padding: 11px 14px; min-height: 44px; font-size: 14.5px; color: var(--ink-2);
  border-bottom: 2.4px solid transparent; line-height: 1.5;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 600; }
.tabs button:hover { color: var(--brand); }

/* ------------------------------------------------------------------- notice */
.notice {
  background: var(--surface); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-2) var(--radius-2) 0; padding: 16px 20px; margin: 22px 0;
}
.notice b { display: block; margin-bottom: 4px; font-size: 15px; }
.notice p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
mark.todo { background: var(--gold-lt); color: var(--navy-deep); padding: 0 4px; border-radius: 2px; font-weight: 700; }

/* ------------------------------------------------------------------- footer */
.foot { background: var(--surface); border-top: 1px solid var(--line); margin-top: 24px; padding: 34px 0 26px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.foot h2 { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 1px; }
.foot a { color: var(--ink-2); text-decoration: none; display: inline-block; padding: 7px 0; line-height: 1.6; }
.foot a:hover { color: var(--brand); }
.foot-bottom { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 20px; color: var(--mute); font-size: 13px; }
.foot-bottom p { max-width: 90ch; }
.age {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--ink); color: var(--ground); font-size: 11px; font-weight: 900;
}
.foot-legal { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; }
.paylogos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.paylogos span {
  font-size: 11.5px; font-weight: 600; color: var(--mute);
  background: var(--ground); border-radius: 4px; padding: 6px 9px; line-height: 1.5;
}

/* Telegram is a first-class support channel in this market — every major
   Cambodian bank and telco keeps a contact affordance on screen at all times. */
.tg {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
  width: 52px; height: 52px; border-radius: 50%;
  background: #229ED9; color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(34, 158, 217, .42); text-decoration: none;
  margin-bottom: env(safe-area-inset-bottom);
}
.tg:hover { background: #1b87ba; color: #fff; }
.tg svg { width: 26px; height: 26px; }

/* --------------------------------------------------------------- breakpoints */
@media (min-width: 700px) {
  .wrap { padding: 0 22px; }
  .splitbar { display: none; }
  .h-login { display: inline-flex; }
  .navgrid { grid-template-columns: repeat(3, 1fr); }
  .hero .wrap { padding-top: 52px; padding-bottom: 52px; }
  .stat b { font-size: 29px; }
}
@media (min-width: 1000px) {
  .mainnav { display: block; }
  .nav-toggle { display: none; }
  #nav-panel { display: none !important; }
  .clock { display: block; }
  .head .wrap { min-height: 70px; }
  .cols { grid-template-columns: minmax(0, 1fr) 318px; gap: 40px; }
  .rail > .offer { position: sticky; top: 86px; }
  .hero .wrap { padding-top: 66px; padding-bottom: 66px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .stickybar { transition: none; }
}

@media print {
  .promobar, .head, .stickybar, .exit, .tg, .splitbar, .ticker, .ctastrip, .rail { display: none !important; }
  body { font-size: 11pt; }
}