/* ==========================================================================
   khelo24bet.games — design system
   Brand colours from docs/facts.md (verified 2026-10-16).
   No hard-coded colours below the token block.
   ========================================================================== */

:root {
  /* Brand */
  --brand-blue: #2EA2DE;
  --brand-green: #35AD36;
  --accent: #FCB134;
  --accent-contrast: #121212;
  --grad: linear-gradient(90deg, #2EA2DE 0%, #35AD36 100%);

  /* Surfaces */
  --bg: #121212;
  --surface: #191919;
  --surface-2: #202020;
  --border: #2F2F2F;
  --panel: #261848;
  --panel-border: #3B2575;
  --provider-bg: #0E0E0E;

  /* Text */
  --text: #FFFFFF;
  --text-soft: #D3D9DE;
  --muted: #838E98;
  --link: #5CB8E8;
  --link-hover: #FFFFFF;

  /* Status */
  --success: #35AD36;
  --warning: #FCB134;
  --danger: #F07070;
  --focus: #FCB134;

  /* Entity groups (icon colour / icon tile) */
  --g-account: #2EA2DE;
  --g-account-bg: rgba(46, 162, 222, 0.14);
  --g-mobile: #35AD36;
  --g-mobile-bg: rgba(53, 173, 54, 0.14);
  --g-play: #B9A2FF;
  --g-play-bg: rgba(122, 88, 230, 0.20);
  --g-money: #FCB134;
  --g-money-bg: rgba(252, 177, 52, 0.14);
  --g-trust: #D3D9DE;
  --g-trust-bg: rgba(211, 217, 222, 0.10);

  /* Effects */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);
  --nav-fade: linear-gradient(90deg, rgba(25, 25, 25, 0) 0%, #191919 100%);
  --hero-glow: radial-gradient(60% 80% at 0% 0%, rgba(46, 162, 222, 0.16) 0%, rgba(18, 18, 18, 0) 70%),
               radial-gradient(50% 70% at 100% 0%, rgba(53, 173, 54, 0.12) 0%, rgba(18, 18, 18, 0) 70%);

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-2xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.875rem);
  --lh-tight: 1.2;
  --lh-base: 1.65;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  /* Shape & layout */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --maxw: 1160px;
  --maxw-prose: 760px;
  --tap: 44px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-soft);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { color: var(--text); line-height: var(--lh-tight); margin: 0 0 var(--sp-4); }
h1 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-md); }

p, ul, ol, table { margin: 0 0 var(--sp-4); }
ul, ol { padding-left: 1.25rem; }
li + li { margin-top: var(--sp-2); }
strong { color: var(--text); }

a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

img, svg { max-width: 100%; height: auto; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); }
.prose { max-width: var(--maxw-prose); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }

.skip-link {
  position: absolute; left: var(--sp-2); top: -100px; z-index: 100;
  background: var(--accent); color: var(--accent-contrast);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm); font-weight: 700;
}
.skip-link:focus { top: var(--sp-2); }

/* ---------- Icons ---------- */
.icon {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon .dot { fill: currentColor; stroke: none; }

.icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm); flex: none;
}
.g-account .icon-tile { color: var(--g-account); background: var(--g-account-bg); }
.g-mobile  .icon-tile { color: var(--g-mobile);  background: var(--g-mobile-bg); }
.g-play    .icon-tile { color: var(--g-play);    background: var(--g-play-bg); }
.g-money   .icon-tile { color: var(--g-money);   background: var(--g-money-bg); }
.g-trust   .icon-tile { color: var(--g-trust);   background: var(--g-trust-bg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-5);
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font-weight: 700; font-size: var(--fs-sm); text-decoration: none; letter-spacing: 0.02em;
  white-space: nowrap; cursor: pointer;
}
.btn-primary { background: var(--grad); color: var(--accent-contrast); }
.btn-primary:hover { color: var(--accent-contrast); filter: brightness(1.08); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { color: var(--text); border-color: var(--brand-blue); }
.btn-tertiary { background: transparent; color: var(--text); border-color: var(--border); }
.btn-tertiary:hover { color: var(--text); border-color: var(--brand-green); }
.btn-sm { min-height: 40px; padding: 0 var(--sp-4); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }

/* ---------- Header ---------- */
.site-header { background: var(--bg); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 64px; }

.brand { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--text); min-height: var(--tap); }
.brand:hover { color: var(--text); }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--grad); color: var(--accent-contrast); font-weight: 800; font-size: 0.95rem;
}
.brand-name { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.01em; }
.brand-name span { color: var(--accent); }
.brand-sub { display: none; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; margin-left: var(--sp-1); }

.header-cta { display: flex; gap: var(--sp-2); }

/* ---------- Main navigation: scrollable tab bar, no JS needed ---------- */
.site-nav { background: var(--surface); border-bottom: 1px solid var(--border); position: relative; }
.site-nav::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 32px;
  background: var(--nav-fade); pointer-events: none;
}
.site-nav ul {
  display: flex; gap: var(--sp-1); list-style: none; margin: 0; padding: 0 var(--sp-6) 0 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav li + li { margin-top: 0; }
.site-nav a {
  display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-3);
  color: var(--muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 600;
  white-space: nowrap; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li { margin-top: 0; }
.breadcrumbs li + li::before { content: "/"; margin: 0 var(--sp-2); color: var(--border); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs [aria-current="page"] { color: var(--text-soft); }

/* ---------- Sections ---------- */
main { display: block; }
.section { padding: var(--sp-7) 0; border-top: 1px solid var(--border); }
.section-head { max-width: var(--maxw-prose); margin-bottom: var(--sp-5); }
.section-head p { color: var(--text-soft); }
.eyebrow {
  display: inline-block; margin-bottom: var(--sp-2);
  color: var(--accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.more-link { font-weight: 700; }

/* ---------- Hero ---------- */
.hero { padding: var(--sp-7) 0 var(--sp-6); background: var(--hero-glow); }
.hero-lead { font-size: var(--fs-md); color: var(--text-soft); max-width: var(--maxw-prose); }
.hero p { max-width: var(--maxw-prose); }
.hero-note { font-size: var(--fs-sm); color: var(--muted); max-width: var(--maxw-prose); }

/* Supporting-page hero (smaller than the homepage hero) */
.page-hero { padding: var(--sp-5) 0 var(--sp-6); background: var(--hero-glow); }
.page-hero p { max-width: var(--maxw-prose); }

/* ---------- On-this-page list ---------- */
.toc { margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); max-width: var(--maxw-prose); }
.toc-title { display: block; color: var(--text); font-weight: 700; margin-bottom: var(--sp-2); }
.toc ol { margin: 0; columns: 2 220px; column-gap: var(--sp-6); }
.toc li { break-inside: avoid; }
.toc a { display: inline-block; padding: var(--sp-1) 0; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 1.75rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.45em; width: 0.5rem; height: 0.85rem;
  border: solid var(--success); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.checklist.warn li::before { content: "!"; border: 0; transform: none; top: 0; left: 0.35rem; color: var(--danger); font-weight: 800; width: auto; height: auto; }

/* ---------- Trust strip ---------- */
.trust-strip { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 0; padding: 0; }
.trust-strip li + li { margin-top: 0; }
.trust-strip li {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-soft); font-size: var(--fs-sm); font-weight: 600;
}
.trust-strip li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); }

/* ---------- Quick-access grid ---------- */
.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.qa-grid li + li { margin-top: 0; }
.qa-card {
  display: flex; align-items: flex-start; gap: var(--sp-3); height: 100%;
  padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); text-decoration: none; color: var(--text-soft);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.qa-card:hover { color: var(--text-soft); border-color: var(--brand-blue); transform: translateY(-2px); }
.qa-card[aria-current="page"] { border-color: var(--accent); }
.qa-label { display: block; color: var(--text); font-weight: 700; line-height: var(--lh-tight); margin-bottom: var(--sp-1); }
.qa-desc { display: block; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }

/* ---------- Task module cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--sp-4); }
.card {
  display: flex; flex-direction: column;
  padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
}
.card-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.card-head h3 { margin: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card .more-link { margin-top: auto; padding-top: var(--sp-2); }

/* ---------- Steps ---------- */
.steps { list-style: none; counter-reset: step; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.steps > li { counter-increment: step; position: relative; margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-4) 4rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.steps > li::before {
  content: counter(step); position: absolute; left: var(--sp-4); top: var(--sp-4);
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--grad); color: var(--accent-contrast); font-weight: 800;
}
.steps h3 { margin-bottom: var(--sp-1); font-size: var(--fs-base); }
.steps p { margin: 0; font-size: var(--fs-sm); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin-bottom: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: 0; min-width: 560px; }
caption { caption-side: bottom; text-align: left; padding: var(--sp-2) var(--sp-4); color: var(--muted); font-size: var(--fs-xs); }
th, td { text-align: left; vertical-align: top; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
thead th { background: var(--surface-2); color: var(--text); font-weight: 700; white-space: nowrap; }
tbody th { color: var(--text); font-weight: 600; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

.status { display: inline-block; padding: 0 var(--sp-2); border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.status-ok { color: var(--success); border: 1px solid var(--success); }
.status-warn { color: var(--warning); border: 1px solid var(--warning); }

/* ---------- Callouts ---------- */
.callout {
  padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-4);
  border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--panel); color: var(--text-soft);
}
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout-title { display: block; color: var(--text); font-weight: 700; margin-bottom: var(--sp-1); }

.amount { color: var(--accent); font-weight: 800; }
.dated { display: inline-block; color: var(--muted); font-size: var(--fs-xs); }

/* ---------- Two-column split ---------- */
.split { display: grid; gap: var(--sp-5); }
/* Grid children default to min-width:auto; without this a nested table-wrap stretches the column past the viewport */
.split > *, .card-grid > *, .footer-grid > * { min-width: 0; }

/* ---------- FAQ accordion (works without JS) ---------- */
.faq { max-width: var(--maxw-prose); }
.faq details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: var(--sp-3); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: var(--tap); padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none;
  color: var(--text); font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary h3 { margin: 0; font-size: var(--fs-base); }
.faq .faq-a { padding: 0 var(--sp-4) var(--sp-4); }
.faq .faq-a p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--sp-7); background: var(--surface); border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.footer-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); padding-top: var(--sp-6); padding-bottom: var(--sp-5); }
.footer-about { grid-column: 1 / -1; max-width: 560px; }
.footer-brand { color: var(--text); font-weight: 800; font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.footer-heading { color: var(--text); font-weight: 700; margin-bottom: var(--sp-2); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li + li { margin-top: 0; }
.footer-col a { display: inline-flex; align-items: center; min-height: 36px; color: var(--muted); text-decoration: none; }
.footer-col a:hover { color: var(--text); text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-4); padding-bottom: var(--sp-5); border-top: 1px solid var(--border); color: var(--muted); }
.footer-bottom p { margin: 0; }
.badge-18 {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: var(--sp-2);
  border: 2px solid var(--danger); border-radius: 50%; color: var(--text); font-size: var(--fs-xs); font-weight: 800; vertical-align: middle;
}

/* Headings that follow a grid inside a section need breathing room */
.section .container > h2:not(:first-child),
.section .container > h3:not(:first-child) { margin-top: var(--sp-6); }

/* ---------- Figures and banners ---------- */
.figure { margin: 0 0 var(--sp-4); }
.figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.figure figcaption { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.figure-phone img { max-width: 300px; margin: 0 auto; border: 0; background: none; }
.figure-phone figcaption { text-align: center; }

/* ---------- Sports tiles and chips ---------- */
.sport-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--sp-3); list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.sport-tiles li + li { margin-top: 0; }
.sport-tile { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; font-size: var(--fs-xs); font-weight: 600; color: var(--text-soft); line-height: 1.3; }
.sport-tile img { width: 64px; height: 64px; border-radius: 16px; }
.chip-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.chip-list li + li { margin-top: 0; }
.chip-list li { padding: var(--sp-1) var(--sp-3); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: var(--fs-sm); color: var(--text-soft); }

/* ---------- Provider logos ---------- */
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--sp-3); list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.provider-grid li + li { margin-top: 0; }
.provider { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--sp-3); height: 100%; margin: 0; padding: var(--sp-4) var(--sp-3) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--provider-bg); text-align: center; }
.provider img { width: auto; max-width: 100%; height: 40px; object-fit: contain; }
.provider figcaption { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }

/* ---------- Game thumbnails ---------- */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr)); gap: var(--sp-3); list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.game-grid li + li { margin-top: 0; }
.game-card { height: 100%; margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.game-card img { display: block; width: 100%; height: auto; aspect-ratio: 520 / 420; object-fit: cover; }
.game-card figcaption { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); font-weight: 600; color: var(--text); line-height: 1.35; }
.tag-live { display: inline-block; margin-left: var(--sp-1); padding: 0 6px; border-radius: 999px; background: var(--danger); color: var(--accent-contrast); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; vertical-align: middle; }

/* ---------- Footer channels ---------- */
.social { display: flex; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.social li + li { margin-top: 0; }
.footer-col .social a { justify-content: center; width: var(--tap); min-height: var(--tap); border: 1px solid var(--border); border-radius: 50%; background: var(--surface-2); color: var(--text); }
.footer-col .social a:hover { border-color: var(--brand-blue); text-decoration: none; }
.footer-phone { margin: 0; color: var(--muted); }
.footer-col .footer-phone a { min-height: 32px; color: var(--text); font-weight: 700; }

/* ---------- Responsive ---------- */@media (min-width: 640px) {
  .brand-sub { display: inline; }
}
@media (min-width: 900px) {
  .hero { padding: var(--sp-8) 0 var(--sp-7); }
  .section { padding: var(--sp-8) 0; }
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .footer-about { grid-column: span 2; }
}
@media (max-width: 380px) {
  .header-cta .btn { padding: 0 var(--sp-3); }
  .brand-name { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .qa-card { transition: none; }
  .qa-card:hover { transform: none; }
}