/* rainbetrussia.com — shared stylesheet for the Rainbet BP network.
   Built to match rainbet.com's live layout (measured 2026-09-15): 68px header, 250px fixed
   sidebar, 1200px main column, Montserrat 500. See ../design.md. Copy unchanged to every site
   EXCEPT the --font stack: the CJK fallback face is per-market (Noto Sans JP / KR / SC / TC),
   because none of them carries the others' script. Everything else is shared. */

:root {
  --bg: #0f1328;            /* page */
  --bg-header: #191e39;     /* header + sidebar */
  --bg-sidebar: #151b33;
  --bg-panel: #1a2140;      /* cards, tiles, groups */
  --bg-panel-2: #232a4d;    /* hover / raised */
  --bg-btn-2: #283152;      /* Login, icon buttons, arrows */
  --bg-input: #1b2140;
  --blue: #0b78d0;
  --blue-hover: #1a8ae6;
  --blue-soft: rgba(81, 175, 255, .15);
  --blue-line: rgba(133, 199, 255, .15);
  --blue-text: #51afff;
  --green: #3bbf57;
  --green-hover: #4ccf68;
  --yellow: #f5d34a;
  --purple: #8b5cf6;
  --text: #ffffff;
  --text-body: #e8e5ff;
  --text-soft: #b5b4ce;
  --text-muted: #8388a7;
  --line: rgba(255, 255, 255, .06);
  --r-sm: 4px; --r: 6px; --r-lg: 8px; --r-xl: 12px;
  --sidebar-w: 250px;
  --header-h: 68px;
  --maxw: 1200px;
  --font: "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

/* A subfolder build can serve a different script from its site's root: rainbetsingapore.com is
   English at the root and Simplified Chinese under /zh, and those pages load this same
   stylesheet. The --font above is set for the ROOT market, so without this the /zh build
   declared no CJK face at all and every Chinese character fell back to whatever the visitor's
   OS happened to supply - different on every machine, and invisible to every scripted check.
   Scope the face to the build's own <html lang> instead. Latin-script subfolders (/tl, /ms)
   need nothing. The matching Google Fonts <link> goes in that build's own index.html. */
:root:lang(zh) { --font: "Montserrat", "Noto Sans SC", -apple-system, "Segoe UI", Roboto, sans-serif; }
:root:lang(zh-TW), :root:lang(zh-HK) { --font: "Montserrat", "Noto Sans TC", -apple-system, "Segoe UI", Roboto, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text-body);
  font: 500 14px/1.75 var(--font); overflow-wrap: anywhere; line-break: strict;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { color: var(--text); margin: 0 0 .5em; line-height: 1.3; font-weight: 600; }
h1 { font-size: clamp(26px, 2.8vw, 35px); line-height: 1.2; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
strong { color: var(--text); font-weight: 600; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 12px 16px; text-align: left; }
th { color: var(--text-muted); font-weight: 500; }
tbody tr:nth-child(even) { background: var(--bg-panel); }
tbody td { color: var(--text); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================= app frame ================= */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 60; height: var(--header-h);
  background: var(--bg-header); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: var(--sidebar-w) 1fr;
}
.header__left { display: flex; align-items: center; gap: 10px; padding: 0 10px 0 14px; }
.burger { width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; border-radius: var(--r); }
.burger svg { width: 22px; height: 22px; color: var(--text-soft); }
.seg { display: inline-flex; background: var(--bg-btn-2); padding: 4px; border-radius: var(--r); gap: 2px; }
.seg a { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border-radius: var(--r-sm); font-size: 13px; color: var(--text-soft); min-width: 80px; white-space: nowrap; }
.seg a.is-active { background: var(--blue); color: var(--text); }
.header__main { display: flex; align-items: center; gap: 12px; padding: 0 32px 0 34px; max-width: calc(var(--maxw) + 66px); width: 100%; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.logo__mark { height: 30px; width: auto; display: block; }
.logo__geo { font-size: 11px; font-weight: 600; color: var(--text-soft); padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; }
.header__spacer { flex: 1; }
.header__right { display: flex; align-items: center; gap: 8px; }
.ibtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); background: var(--bg-btn-2); color: var(--text-soft); border: 0; cursor: pointer; }
.ibtn svg { width: 18px; height: 18px; }
.ibtn:hover { background: var(--bg-panel-2); color: var(--text); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: var(--r); font: 600 13px/1 var(--font); color: var(--text); cursor: pointer; white-space: nowrap; transition: background .15s; }
.btn--blue { background: var(--blue); } .btn--blue:hover { background: var(--blue-hover); }
.btn--navy { background: var(--bg-btn-2); } .btn--navy:hover { background: var(--bg-panel-2); }
.btn--green { background: var(--green); } .btn--green:hover { background: var(--green-hover); }
.btn--lg { height: 52px; padding: 0 26px; font-size: 14px; }
.btn svg { width: 16px; height: 16px; }
.btn-frame { display: inline-block; padding: 5px; border-radius: 10px; background: rgba(59, 191, 87, .18); border: 1px solid rgba(59, 191, 87, .35); }

/* ---------- sidebar ---------- */
.sidebar {
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto;
  background: var(--bg-sidebar); border-right: 1px solid var(--line); padding: 14px 10px 24px;
  scrollbar-width: thin; scrollbar-color: var(--bg-panel-2) transparent;
}
.raffle { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; }
.raffle > span:not([class]) { min-width: 0; }
.raffle__icon { width: 28px; height: 28px; flex: none; color: var(--yellow); }
.raffle__amt { font-size: 15px; font-weight: 700; font-style: italic; color: var(--text); line-height: 1.1; }
.raffle__lbl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 700; font-style: italic; color: var(--yellow); letter-spacing: .3px; }
.raffle__pill { margin-left: auto; flex: none; white-space: nowrap; font-size: 11px; font-weight: 700; font-style: italic; color: var(--yellow); border: 1px solid var(--yellow); border-radius: var(--r-sm); padding: 2px 8px; }
.races { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px 8px 14px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.race { text-align: center; position: relative; }
.race::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .04); }
.race__l { position: relative; font-size: 9px; font-weight: 700; font-style: italic; color: var(--text-muted); letter-spacing: .4px; }
.race__v { position: relative; font-size: 13px; font-weight: 700; font-style: italic; color: var(--text); }
.snav { list-style: none; margin: 0; padding: 0; }
.snav li { margin: 0; }
.snav a, .sgroup summary {
  display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 16px; border-radius: var(--r);
  font-size: 13px; color: var(--text); border: .8px solid transparent; margin-bottom: 4px;
}
.snav a:hover { background: rgba(255, 255, 255, .03); }
.snav a.is-active { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue-text); }
.snav svg { width: 18px; height: 18px; flex: none; color: var(--text-soft); }
.snav a.is-active svg { color: var(--blue-text); }
.sdiv { height: 1px; background: var(--line); margin: 10px 0 12px; }
.sgroup { margin-bottom: 6px; }
.sgroup summary { list-style: none; cursor: pointer; background: var(--bg-panel); position: relative; padding-right: 40px; white-space: nowrap; }
.sgroup summary svg { width: 18px; height: 18px; flex: none; color: var(--text-soft); }
.sgroup summary::-webkit-details-marker { display: none; }
.sgroup summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%);
  border-radius: var(--r-sm); background: var(--bg-btn-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5b4ce' stroke-width='2.5'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}
.sgroup[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.sgroup__list { list-style: none; margin: 0 0 4px; padding: 0 0 0 4px; }
.sgroup__list a { height: 40px; padding: 0 12px; }
.sgroup__list a svg { width: 22px; height: 22px; }
.sitem__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.sitem__big { font-size: 13px; font-weight: 700; color: var(--text); }
.sitem__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--text-soft); }
.tag { margin-left: auto; flex: none; white-space: nowrap; font-size: 10px; font-weight: 700; font-style: italic; letter-spacing: .4px; padding: 3px 6px; border-radius: var(--r-sm); border: 1px solid; }
.tag--purple { color: #c9b6ff; border-color: #7c5cff; }
.tag--green { color: #9be8a8; border-color: var(--green); font-family: "Montserrat", monospace; }
.tag--blue { color: var(--blue-text); border-color: var(--blue); }
.slang { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px; font-size: 13px; color: var(--text-soft); }
.slang svg { width: 18px; height: 18px; }

/* ---------- main column ---------- */
.main { min-width: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.section { padding: 28px 0; }
.section--pad { padding: 44px 0; }
.section--panel { background: var(--bg-sidebar); }

/* ---------- hero ---------- */
.hero { position: relative; padding: 28px 0; overflow: hidden; border-bottom: 1px solid var(--line);
  background: radial-gradient(900px 340px at 30% 20%, rgba(59, 110, 245, .22), transparent 60%),
              radial-gradient(700px 300px at 85% 80%, rgba(139, 92, 246, .16), transparent 60%),
              #141a36; }
.hero::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.035'%3E%3Ccircle cx='60' cy='80' r='120'/%3E%3Ccircle cx='330' cy='300' r='160'/%3E%3Ccircle cx='250' cy='60' r='60'/%3E%3C/g%3E%3C/svg%3E"); opacity: 1; pointer-events: none; }
.hero__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; min-height: 287px; }
.hero__lead { color: var(--text-soft); font-size: 14px; max-width: 480px; margin: 12px 0 18px; }
.hero__cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero__or { color: var(--text-muted); font-size: 13px; }
.coins { display: inline-flex; align-items: center; gap: 10px; height: 62px; padding: 0 16px; border-radius: 10px; background: var(--bg-btn-2); border: 1px solid var(--line); }
.coins__row { display: inline-flex; }
.coin { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 var(--font); color: #0f1328; margin-left: -6px; border: 2px solid var(--bg-btn-2); }
.coin:first-child { margin-left: 0; }
.coin--btc { background: #f7931a; } .coin--eth { background: #8c9eff; } .coin--sol { background: #4ad2a4; } .coin--usdt { background: #26a17b; color: #fff; } .coin--xrp { background: #d7dce8; }
.coins svg { width: 14px; height: 14px; color: var(--text-soft); }
.hero__note { font-size: 12px; color: var(--text-muted); margin: 14px 0 0; }
.hero__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bigcard { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-panel); box-shadow: var(--shadow); aspect-ratio: 370 / 290; }
.bigcard img { width: 100%; height: 100%; object-fit: cover; }
.bigcard__label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; height: 52px; padding: 0 20px; background: rgba(59, 98, 184, .78); font-size: 17px; font-weight: 600; color: var(--text); }
.bigcard__label svg { width: 20px; height: 20px; }
.bigcard__label .arrow { margin-left: 8px; opacity: .7; width: 16px; height: 16px; }

/* ---------- live wins / strips ---------- */
.strip { display: flex; align-items: flex-start; gap: 12px; padding: 22px 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip__pill { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r); background: var(--bg-btn-2); font-size: 13px; font-weight: 600; color: var(--text); align-self: flex-start; margin-top: 2px; }
.strip__pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.mini { flex: none; width: 107px; text-align: center; }
.mini img { width: 107px; height: 143px; object-fit: cover; border-radius: var(--r-lg); }
.mini__n { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini__s { display: block; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- section head + arrows ---------- */
.sechead { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.sechead svg { width: 22px; height: 22px; color: var(--blue-text); flex: none; }
.sechead h2 { margin: 0; font-size: 18px; }
.sechead__link { font-size: 14px; color: var(--text-muted); margin-left: 4px; }
.sechead__link:hover { color: var(--text); }
.arrows { margin-left: auto; display: inline-flex; gap: 4px; }
.arrows button { width: 40px; height: 32px; border: 0; border-radius: var(--r); background: var(--bg-btn-2); color: var(--text-soft); cursor: pointer; display: grid; place-items: center; }
.arrows button:first-child { opacity: .5; }
.arrows svg { width: 14px; height: 14px; }

/* ---------- tile rows ---------- */
.tiles { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 7 * 12px) / 8); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.tiles::-webkit-scrollbar { display: none; }
.tiles--6 { grid-auto-columns: calc((100% - 5 * 12px) / 6); }
.tile { scroll-snap-align: start; display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-panel); transition: transform .15s; position: relative; }
.tile:hover { transform: translateY(-4px); }
.tile img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.tile__badge { position: absolute; top: 8px; right: 8px; font-size: 9px; font-weight: 700; letter-spacing: .5px; padding: 3px 7px; border-radius: var(--r-sm); background: rgba(255,255,255,.9); color: #1a2140; }
.tile__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 10px; text-align: center; background: linear-gradient(to top, rgba(10,13,30,.9), transparent); }
.tile__name { display: block; font-size: 13px; font-weight: 800; color: var(--text); line-height: 1.15; text-transform: uppercase; letter-spacing: .2px; }
.tile__sub { display: block; font-size: 9px; font-weight: 600; color: var(--text-soft); margin-top: 3px; text-transform: uppercase; letter-spacing: .6px; }
/* The real Rainbet tiles carry the game name baked into the art (unlike the generated
   placeholders they replaced, which left the lower third empty). Rendering .tile__cap's
   text on top of them prints the name twice, overlapping. The art is the label now; the
   gradient stays because rainbet.com's own tiles darken toward the bottom. The name is
   still in each img's alt text. */
.tile__name, .tile__sub { display: none; }
/* Same duplication on the mini strip, confirmed on screen: the 107px art already reads
   "SWEET BONANZA 1000 / PRAGMATIC PLAY" and .mini__n repeated it underneath, ellipsised
   to "Sweet Bonanza...". rainbet.com's own tiles carry no caption either. */
.mini__n, .mini__s { display: none; }

/* ---------- partners ---------- */
.partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.partner { position: relative; height: 140px; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(90deg, #2b3a7a, #1d2a5e 60%, #172250); display: flex; align-items: center; padding: 0 20px; }
.partner img { position: absolute; right: 0; top: 0; height: 100%; width: 45%; object-fit: cover; opacity: .9; }
.partner__t { position: relative; }
.partner__k { font-size: 13px; color: #9fc0ff; margin: 0; }
.partner__n { font-size: 20px; font-weight: 600; color: var(--text); margin: 0; }

/* ---------- rewards ---------- */
.rewards { padding: 40px 0 48px; background: radial-gradient(600px 300px at 20% 10%, rgba(59,110,245,.10), transparent 60%), var(--bg); }
.rewards h2 { text-align: center; font-size: 30px; font-weight: 600; margin-bottom: 30px; }
.rewards__panel { background: var(--bg-sidebar); border-radius: var(--r-xl); padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.rewlist { display: grid; gap: 12px; }
.rew { display: flex; align-items: center; gap: 22px; background: var(--bg-panel-2); border-radius: var(--r-lg); padding: 18px 24px; border-bottom: 3px solid transparent; }
.rew--on { border-bottom-color: var(--green); }
.rew__ico { width: 56px; height: 56px; border-radius: var(--r-lg); display: grid; place-items: center; flex: none; }
.rew__ico svg { width: 26px; height: 26px; color: #fff; }
.rew__ico--green { background: #2ea44f; } .rew__ico--purple { background: #7c3aed; } .rew__ico--gold { background: #b7791f; } .rew__ico--red { background: #dc2626; }
.rew h3 { margin: 0; font-size: 18px; }
.rew p { margin: 4px 0 0; color: var(--text-soft); font-size: 14px; }
.ranks { text-align: center; }
.ranks h3 { font-size: 26px; font-weight: 600; margin-bottom: 40px; }
.diamonds { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 30px; }
.diamond { width: 110px; height: 110px; position: relative; }
.diamond svg { width: 100%; height: 100%; }
.diamond--sm { width: 80px; height: 80px; opacity: .6; }
.diamond__l { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-top: 10px; }
.diamond--sm .diamond__l { font-size: 11px; color: var(--text-muted); }

/* ---------- help ---------- */
.help { padding: 44px 0; background: var(--bg-sidebar); }
.help h2 { text-align: center; font-size: 30px; margin-bottom: 30px; }
.help__panel { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 20px; display: grid; grid-template-columns: 350px 1fr; gap: 20px; background: var(--bg); }
.help__green { border-radius: var(--r-lg); background: linear-gradient(160deg, #1f6b3a, #12472a 60%, #0f3a22); border: 1px solid #2ea44f; display: grid; place-items: center; min-height: 420px; padding: 24px; text-align: center; }
.help__green .logo__mark { height: 34px; margin-bottom: 40px; }
.help__green svg { width: 150px; height: 150px; color: #fff; opacity: .95; }
.help__faq { background: var(--bg-sidebar); border-radius: var(--r-lg); padding: 24px; }
.faq details { background: var(--bg-panel-2); border-radius: var(--r); margin-bottom: 10px; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 20px; font-size: 14px; font-weight: 600; color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--text-soft); border-bottom: 2px solid var(--text-soft); transform: rotate(-45deg); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 20px 16px; font-size: 13px; color: var(--text-soft); }
.faq__a p:last-child { margin: 0; }
.help__msg { display: flex; gap: 10px; margin-top: 16px; }
.help__msg .fake-input { flex: 1; height: 46px; border-radius: var(--r); background: var(--bg-panel-2); display: flex; align-items: center; padding: 0 16px; color: var(--text-muted); font-size: 13px; }

/* ---------- payments strip ---------- */
.pay { padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pay__grid { display: flex; align-items: center; gap: 28px; }
.pay__shield { width: 54px; height: 54px; color: var(--green); flex: none; }
.pay h2 { font-size: 18px; margin-bottom: 4px; }
.pay p { margin: 0; color: var(--text-soft); font-size: 14px; max-width: 640px; }
.pay__logos { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.paylogo { height: 30px; padding: 0 12px; border-radius: var(--r-sm); background: #fff; color: #1a2140; font: 800 12px/30px var(--font); letter-spacing: .3px; }
.paylogo--dark { background: #1f2a55; color: #fff; }

/* ---------- SEO accordion ---------- */
.seo { padding: 32px 0; }
.seo details { background: var(--bg-panel); border-radius: var(--r-lg); }
.seo summary { list-style: none; cursor: pointer; display: flex; align-items: center; padding: 16px 18px; font-size: 14px; font-weight: 600; color: var(--text); }
.seo summary::-webkit-details-marker { display: none; }
.seo summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--text-soft); border-bottom: 2px solid var(--text-soft); transform: rotate(45deg); transition: transform .15s; }
.seo details[open] summary::after { transform: rotate(-135deg); }
.seo__body { padding: 8px 24px 28px; max-width: 860px; }
.seo__body h2 { font-size: 20px; margin-top: 1.6em; }
.seo__body h2:first-child { margin-top: .4em; }
.seo__body h3 { font-size: 16px; margin-top: 1.3em; }
.seo__body p, .seo__body li { color: var(--text-soft); font-size: 14px; line-height: 1.85; }
.seo__body a { color: var(--blue-text); }
.seo__body a:hover { text-decoration: underline; }
.seo__body table { margin: 12px 0 20px; border-radius: var(--r); overflow: hidden; }
.seo__body thead th { background: var(--bg-panel-2); }
.seo__body tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }

/* ---------- footer ---------- */
.footer { background: var(--bg-sidebar); border-top: 1px solid var(--line); padding: 36px 0 28px; font-size: 13px; color: var(--text-soft); }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.footer p { margin: 0 0 .7em; }
.footer h4 { font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text); margin-bottom: 12px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 8px; }
.footer a:hover { color: var(--text); }
.footer__bottom { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 22px; }
.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r); font-size: 12px; font-weight: 600; color: var(--text-soft); background: var(--bg-panel); }
.badge svg { width: 14px; height: 14px; }
.footer__copy { margin-left: auto; color: var(--text-muted); }

/* ---------- floating support ---------- */
.fab { position: fixed; right: 32px; bottom: 28px; width: 46px; height: 46px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(11,120,208,.45); z-index: 70; }
.fab svg { width: 22px; height: 22px; }
.fab:hover { background: var(--blue-hover); }

/* ================= responsive ================= */
@media (max-width: 1100px) {
  .tiles { grid-auto-columns: calc((100% - 5 * 12px) / 6); }
  .partners { grid-template-columns: repeat(2, 1fr); }
  .rewards__panel, .help__panel { grid-template-columns: 1fr; }
  .help__green { min-height: 260px; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .header { display: flex; align-items: center; gap: 4px; padding: 0 10px 0 4px; }
  .header__left { padding: 0; flex: none; }
  .seg { display: none; }
  .header__main { padding: 0; gap: 8px; flex: 1; min-width: 0; }
  .logo { flex: none; white-space: nowrap; }
  .logo__mark { height: 24px; }
  .logo__geo { white-space: nowrap; }
  .header__right { flex: none; gap: 6px; }
  .header__right .btn { height: 38px; padding: 0 12px; font-size: 12px; }
  .ibtn--search, .ibtn--gift, .ibtn--chat { display: none; }
  .sidebar { position: fixed; left: 0; top: var(--header-h); width: var(--sidebar-w); transform: translateX(-100%); transition: transform .2s; z-index: 55; box-shadow: var(--shadow); }
  .sidebar.is-open { transform: none; }
  .wrap { padding: 0 16px; }
  .hero__grid { grid-template-columns: 1fr; }
  .tiles { grid-auto-columns: 140px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .pay__grid { flex-wrap: wrap; } .pay__logos { margin-left: 0; justify-content: flex-start; }
  .fab { right: 16px; bottom: 16px; }
}
@media (max-width: 520px) {
  .logo__geo { display: none; }
  .logo__mark { height: 22px; }
  .hero__cards, .partners, .footer__top { grid-template-columns: 1fr; }
  .rewards h2, .help h2 { font-size: 24px; }
  .diamonds { gap: 12px; }
}

/* hero quick links (brand + modifier pages) */
.hero__note a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; }
.hero__note a:hover { color: var(--text); }

/* ================= inner pages (generated by tools/build_site.py) ================= */
.crumbs { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.crumbs a { color: var(--text-soft); }
.crumbs a:hover { color: var(--text); }
.phero { position: relative; padding: 32px 0 28px; border-bottom: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(900px 340px at 30% 20%, rgba(59, 110, 245, .22), transparent 60%),
              radial-gradient(700px 300px at 85% 80%, rgba(139, 92, 246, .16), transparent 60%), #141a36; }
.phero__grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.phero__grid--img { grid-template-columns: 1.2fr .8fr; }
.phero h1 { margin-bottom: 4px; }
.phero .hero__lead { max-width: 720px; }
.phero__img img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.pbody { padding: 12px 0 8px; }
.seo__body--page { max-width: 860px; padding: 8px 0 12px; }
.seo__body--page h2 { font-size: 22px; margin-top: 1.8em; }
.seo__body--page h2:first-child { margin-top: .6em; }
.seo__body--page h3 { font-size: 17px; margin-top: 1.4em; }
.seo__body--page p, .seo__body--page li { font-size: 14.5px; line-height: 1.9; }
.seo__body--page ul, .seo__body--page ol { margin-bottom: 1.2em; }
.seo__body--page table { margin: 14px 0 22px; border-radius: var(--r); overflow: hidden; }
.seo__body--page thead th { background: var(--bg-panel-2); }
.seo__body--page tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }
.seo__body--page .note { background: var(--bg-panel); border-left: 3px solid var(--blue); border-radius: var(--r); padding: 12px 16px; font-size: 14px; }
.seo__body--page .steps-list { counter-reset: s; list-style: none; padding: 0; }
.seo__body--page .steps-list li { position: relative; padding-left: 44px; margin-bottom: 12px; }
.seo__body--page .steps-list li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.help--page { padding: 32px 0; }
.help--page h2 { font-size: 24px; margin-bottom: 20px; text-align: left; }
.help--page .help__faq { max-width: 860px; padding: 8px 0 0; background: transparent; }
.pcta { background: linear-gradient(90deg, var(--bg-panel), var(--bg-panel-2)); border-radius: var(--r-xl); padding: 28px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.pcta h2 { margin: 0 0 4px; font-size: 20px; }
.pcta p { margin: 0; font-size: 14px; color: var(--text-soft); }
.pcta .btn-frame { margin-left: auto; }
@media (max-width: 900px) { .phero__grid--img { grid-template-columns: 1fr; } .pcta .btn-frame { margin-left: 0; } }

/* >>> langsw — rb_langswitch.py owns this block, do not edit by hand */
.langsw { position: relative; }
.langsw > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: var(--r); background: var(--bg-btn-2); color: var(--text-soft); font: 600 12px/1 var(--font); cursor: pointer; white-space: nowrap; }
.langsw > summary::-webkit-details-marker { display: none; }
.langsw > summary:hover { background: var(--bg-panel-2); color: var(--text); }
.langsw > summary:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 2px; }
.langsw > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.langsw[open] > summary { background: var(--bg-panel-2); color: var(--text); }
.langsw[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.langsw__globe { width: 16px; height: 16px; flex: none; }
.langsw__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 70; min-width: 190px; padding: 6px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.langsw__opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--r); font-size: 13px; color: var(--text-soft); }
a.langsw__opt:hover { background: var(--bg-panel-2); color: var(--text); }
.langsw__opt[aria-current] { background: var(--blue-soft); color: var(--text); font-weight: 600; cursor: default; }
.langsw__name { flex: 1; white-space: nowrap; }
.langsw__tag { font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; }
.langsw__opt[aria-current] .langsw__tag { color: var(--blue-text); border-color: var(--blue-line); }
@media (max-width: 900px) { .langsw > summary { height: 38px; padding: 0 9px; } }
@media (max-width: 520px) { .langsw__globe { display: none; } .langsw > summary { padding: 0 8px; } }
/* <<< langsw */

/* >>> tapsize — rb_tapsize.py owns this block, do not edit by hand */
@media (max-width: 900px) {
  /* Header row. 68px of header, so 44px controls fit with room to spare. */
  .burger { width: 44px; height: 44px; }
  .header__right { gap: 8px; }
  .header__right .btn { height: 44px; }
  .langsw > summary { height: 44px; }
  .logo { padding: 11px 0; }          /* touch area only — the wordmark stays 22px */

  /* Drawer navigation: this is the entire mobile nav. */
  .snav a, .sgroup summary, .slang { height: 44px; }

  /* Tile rows already scroll-snap under a finger, so the arrows are a redundant 40x32
     target. Hiding them is a better outcome than enlarging them. */
  .arrows { display: none; }

  /* Footer lists: 16px rows 8px apart. Turning the dead gap into tappable padding makes
     each row contiguous, which removes the mis-tap gap as well as the small target. */
  .footer li { margin-bottom: 0; }
  .footer li a { display: block; padding: 14px 0; }
  .footer__bottom a { display: inline-block; padding: 14px 0; }

  /* "See all" sits alone at the end of a section head; pad it out in both directions.
     Hiding .arrows above collapsed the row to content height, so it needs the vertical
     padding too. */
  .sechead__link { display: inline-block; padding: 10px 8px; margin-left: 0; }

  /* A link that is the whole of its footer paragraph — the support address — behaves like
     a list row, not like prose, so it can take the same padding without disturbing text. */
  .footer__top p > a:only-child { display: inline-block; padding: 14px 0; }
}
/* <<< tapsize */

/* >>> scripts — fonts for the builds whose script Montserrat does not cover (added 2026-10-13)
   Same rule as the :lang(zh) overrides above: the build's own <html lang> selects the face, and
   the matching Google Fonts <link> sits in that build's own index.html. Montserrat stays first
   so the brand, game names and figures keep the network's Latin face. Montserrat carries
   Cyrillic itself, so the Russian build needs nothing here. */
:root:lang(hi) { --font: "Montserrat", "Noto Sans Devanagari", -apple-system, "Segoe UI", Roboto, sans-serif; }
:root:lang(ur) { --font: "Montserrat", "Noto Naskh Arabic", -apple-system, "Segoe UI", Tahoma, sans-serif; }
/* Devanagari hangs from a head line and stacks marks above and below it; the Latin 1.75 clips
   nothing but reads tight, and headings set at 1.2 collide. */
:root:lang(hi) body { line-height: 1.85; }
:root:lang(hi) h1, :root:lang(hi) h2, :root:lang(hi) h3 { line-height: 1.45; }
/* <<< scripts */

/* >>> rtl — right-to-left builds (Urdu, /ur). Scoped to [dir="rtl"], so a left-to-right build
   on the same domain is untouched. Flex and grid mirror by themselves; this block covers only
   what was written with a physical left or right. */
[dir="rtl"] body { line-height: 1.95; }
/* letter-spacing splits the joins between Arabic letters, and there is no italic in the script */
[dir="rtl"] *, [dir="rtl"] *::before, [dir="rtl"] *::after { letter-spacing: 0 !important; font-style: normal !important; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.6; }
/* running prose is set in Nastaliq, the hand Urdu is read in; the interface stays in Naskh,
   whose compact line fits the fixed-height rows Nastaliq would be clipped by */
[dir="rtl"] .hero__lead, [dir="rtl"] .seo__body p, [dir="rtl"] .seo__body li, [dir="rtl"] .faq__a p, [dir="rtl"] .pcta p {
  font-family: "Montserrat", "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif; line-height: 2.5;
}
[dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.4em; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
[dir="rtl"] .sidebar { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .raffle__pill, [dir="rtl"] .tag, [dir="rtl"] .arrows, [dir="rtl"] .pay__logos,
[dir="rtl"] .footer__copy, [dir="rtl"] .pcta .btn-frame { margin-left: 0; margin-right: auto; }
[dir="rtl"] .faq summary::after, [dir="rtl"] .seo summary::after { margin-left: 0; margin-right: auto; }
[dir="rtl"] .sgroup summary { padding-right: 0; padding-left: 40px; }
[dir="rtl"] .sgroup summary::after { right: auto; left: 8px; }
[dir="rtl"] .coin { margin-left: 0; margin-right: -6px; }
[dir="rtl"] .coin:first-child { margin-right: 0; }
[dir="rtl"] .bigcard__label .arrow { margin-left: 0; margin-right: 8px; transform: scaleX(-1); }
[dir="rtl"] .btn svg { transform: scaleX(-1); }
[dir="rtl"] .sechead__link { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .tile__badge { right: auto; left: 8px; }
[dir="rtl"] .partner img { right: auto; left: 0; }
[dir="rtl"] .fab { right: auto; left: 32px; }
[dir="rtl"] .crumbs li + li::before { content: "‹"; margin-right: 0; margin-left: 6px; }
[dir="rtl"] .seo__body--page .note { border-left: 0; border-right: 3px solid var(--blue); }
[dir="rtl"] .seo__body--page .steps-list li { padding-left: 0; padding-right: 44px; }
[dir="rtl"] .seo__body--page .steps-list li::before { left: auto; right: 0; }
[dir="rtl"] .help--page h2 { text-align: right; }
[dir="rtl"] .langsw__menu { right: auto; left: 0; }
@media (max-width: 900px) {
  [dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(100%); border-left: 0; }
  [dir="rtl"] .sidebar.is-open { transform: none; }
  [dir="rtl"] .pay__logos { margin-right: 0; }
  [dir="rtl"] .pcta .btn-frame { margin-right: 0; }
  [dir="rtl"] .fab { left: 16px; }
  [dir="rtl"] .sechead__link { margin-right: 0; }
}
/* <<< rtl */