/* ==========================================================================
   betwinner India — styles.css
   Design contract: research/design.md (binding)
   Dark brand-true + Ashoka Chakra (gold Dharma wheel) signature.
   Token-driven · mobile-first · WCAG AA · ZERO web-font payload
     (system Indic stacks via [lang="hi|bn|ta|te"]). All 4 scripts are LTR.
   Gold = ACTION colour · Saffron/Peacock = SIGNATURE colour ·
   Green-leaf = legal ribbon only. They never compete on one element.
   ========================================================================== */

/* ----------------------------- TOKENS (design.md §1) ----------------------------- */
:root{
  --pad:clamp(16px,4vw,32px);
  /* palette — 6 named + derived */
  --ink:#0B1018;            /* page base (cool navy undertone — Ashoka-navy of the flag) */
  --gold:#FFCE06;           /* primary accent / CTA (verified betwinner gold) */
  --saffron:#FF9933;        /* India saffron — legal-ribbon + verified/legal accents */
  --peacock:#0E8A8A;        /* peacock-teal — secondary signature, success/verified, info */
  --paper:#ECF1F8;          /* body text on dark */
  --muted:#94A3B8;          /* secondary text / meta */

  /* derived */
  --ink-2:#121A28;          /* raised surface / cards */
  --ink-3:#1C2738;          /* elevated hover / active nav */
  --gold-deep:#E0B100;      /* CTA hover/active */
  --gold-soft:#FFD75A;      /* strong emphasis in body */
  --green-leaf:#1F8A4C;     /* Tiranga green band — legal ribbon only, never primary */
  --line:rgba(236,241,248,0.10);
  --line-gold:rgba(255,206,6,0.35);
  --line-saffron:rgba(255,153,51,0.40);
  --line-peacock:rgba(14,138,138,0.40);
  --danger:#E0584E;

  /* type scale (fluid clamp, design.md §2) */
  --fs-h1:clamp(2rem,1.4rem + 2.6vw,3.25rem);
  --fs-h2:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);
  --fs-h3:clamp(1.15rem,1rem + 0.5vw,1.4rem);
  --fs-body:clamp(1rem,0.97rem + 0.13vw,1.125rem);
  --fs-sm:0.875rem;

  /* rhythm (design.md §4) — single 8/12/16/24/32/48/64/96 scale */
  --s-section:clamp(48px,7vw,96px);
  --s-section-sm:clamp(32px,4vw,56px);
  --s1:8px;--s2:12px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:96px;
  --container:1240px;
  --radius:14px;
  --radius-sm:9px;
  --radius-pill:999px;
  --gap:clamp(16px,2vw,28px);

  /* legal ribbon: saffron → paper → green (Tiranga bands as one hairline) */
  --ribbon-spg:linear-gradient(90deg,var(--saffron) 0%,var(--saffron) 10%,rgba(236,241,248,.85) 50%,var(--green-leaf) 90%,var(--green-leaf) 100%);

  --shadow:0 10px 30px -12px rgba(0,0,0,0.7);
  --shadow-sm:0 4px 14px -6px rgba(0,0,0,0.6);
  --ease:cubic-bezier(.2,.7,.2,1);

  /* font stacks (system only — appended script family for Indic) */
  --font-latin:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-hi:"Noto Sans Devanagari","Nirmala UI",Mangal,var(--font-latin);
  --font-bn:"Noto Sans Bengali","Nirmala UI",Shonar Bangla,var(--font-latin);
  --font-ta:"Noto Sans Tamil","Nirmala UI",Latha,var(--font-latin);
  --font-te:"Noto Sans Telugu","Nirmala UI",Gautami,var(--font-latin);
}

/* ----------------------------- RESET / BASE ----------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--font-latin);font-size:var(--fs-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none;overflow-wrap:anywhere;word-break:break-word}
a:hover{text-decoration:underline}
p,li{overflow-wrap:anywhere}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
ul,ol{margin:0 0 1em;padding-inline-start:1.3em}
li{margin:0 0 .4em}

/* inline links in body text are underlined (a11y: not colour-only) */
.prose a,#seo-text a,.faq__a a,.review-card__body a,.review-form__msg a,.callout a,.footer-disclosure a,.footer-bottom a,.responsible__text a,.pay-note a,p a,li a,td a,blockquote a{text-decoration:underline;text-decoration-color:rgba(255,206,6,.45);text-underline-offset:2px}
.prose a:hover,#seo-text a:hover,.faq__a a:hover,.review-card__body a:hover,.callout a:hover,.footer-bottom a:hover,.pay-note a:hover,p a:hover,li a:hover,td a:hover,blockquote a:hover{text-decoration-color:var(--gold)}
.footer-nav a,.footer-legal .btn,.footer-col .btn{text-decoration:none !important}
/* nav/buttons/tiles stay non-underlined */
.nav a,.btn,.lang-switch__btn,.lang-switch__menu button,.cat-tile,.carousel__btn,.header-actions > .btn,.provider-tile,.pay-badge,.app-shot,.promo-card,.promo-strip,.store-link,.badge{text-decoration:none}

h1,h2,h3,h4{line-height:1.18;font-weight:800;letter-spacing:-.02em;margin:0 0 .5em;color:var(--paper)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:700}
p{margin:0 0 1em}
p:empty{display:none}
strong{color:var(--gold-soft);font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:2em 0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ----------------------------- LAYOUT (design.md §4) ----------------------------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.section{padding-block:var(--s-section)}
.section--sm{padding-block:var(--s-section-sm)}
/* `.section` owns block padding; inner blocks must NOT re-declare it (specificity trap). */
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-bottom:.6em}
.lead{font-size:1.12rem;color:var(--muted);max-width:64ch}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.section__head{margin-bottom:clamp(20px,3vw,36px);max-width:70ch;text-align:left}
.section__head p{color:var(--muted)}
.cv-auto{content-visibility:auto;contain-intrinsic-size:1px 600px}  /* skip render work off-screen */

/* ----------------------------- BUTTONS (design.md §5) ----------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.72em 1.25em;border-radius:var(--radius-sm);font-weight:700;font-size:.98rem;
  line-height:1.2;border:1px solid transparent;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .08s var(--ease);
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--gold);color:var(--ink)}            /* primary CTA — always gold */
.btn--gold:hover{background:var(--gold-deep);text-decoration:none}
.btn--ghost{background:transparent;color:var(--paper);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--line-gold);background:rgba(255,206,6,.06);text-decoration:none}
.btn--block{display:flex;width:100%}
.btn--sm{padding:.5em .85em;font-size:.85rem}

/* ----------------------------- SKIP LINK ----------------------------- */
.skip-link{position:absolute;inset-inline-start:0;top:-100px;z-index:200;background:var(--gold);color:var(--ink);padding:.7em 1.1em;font-weight:700;border-radius:0 0 var(--radius-sm) 0;transition:top .15s var(--ease)}
.skip-link:focus{top:0}

/* ==========================================================================
   18+ AGE BANNER STRIP (top of every page, scrolls away; header sticky below)
   ========================================================================== */
.age-banner{background:linear-gradient(90deg,rgba(255,153,51,.16),rgba(14,138,138,.12));border-bottom:1px solid var(--line);font-size:.8rem;color:var(--paper)}
.age-banner__inner{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:center;padding-block:7px;text-align:center}
.age-banner strong{color:var(--saffron)}
.age-banner__link{color:var(--gold);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   HEADER (sticky; shrink + shadow past threshold via .is-scrolled)
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,16,24,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:background .2s var(--ease),box-shadow .2s var(--ease),padding .2s var(--ease)}
.site-header.is-scrolled{background:rgba(11,16,24,.97);box-shadow:0 6px 20px -10px rgba(0,0,0,.7)}
.site-header__bar{display:flex;align-items:center;gap:14px;padding-block:12px}
.site-header.is-scrolled .site-header__bar{padding-block:8px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.1rem;color:var(--paper);flex-shrink:0}
.brand img{height:24px;width:auto}
.brand__mark{width:30px;height:30px;border-radius:8px;background:var(--gold);display:grid;place-items:center;color:var(--ink);font-weight:900;font-size:1rem}

/* nav */
.nav{display:flex;gap:2px;flex-wrap:wrap;margin-inline-end:auto}
.nav a{padding:.45em .7em;border-radius:var(--radius-sm);color:var(--paper);font-weight:600;font-size:.92rem;white-space:nowrap}
.nav a:hover{background:var(--ink-3);text-decoration:none}
.nav a[aria-current="page"]{color:var(--gold)}

.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-inline-start:auto}

/* ==========================================================================
   LANGUAGE SWITCHER (dropdown, 5 locales: EN/हिन्दी/বাংলা/தமிழ்/తెలుగు)
   ========================================================================== */
.lang-switch{position:relative;z-index:70}
.lang-switch__btn{display:inline-flex;align-items:center;gap:.3em;border:1px solid var(--line);background:var(--ink-2);color:var(--paper);padding:.35em .65em;border-radius:var(--radius-pill);font-size:.82rem;font-weight:700}
.lang-switch__btn:hover{border-color:var(--line-gold)}
.lang-switch__btn[aria-expanded="true"]{border-color:var(--line-gold);color:var(--gold)}
.lang-switch__menu{position:absolute;inset-block-end:auto;top:calc(100% + 6px);inset-inline-end:0;min-width:160px;list-style:none;margin:0;padding:6px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);display:none;z-index:80}
.lang-switch[data-open="true"] .lang-switch__menu{display:block !important}
.lang-switch__menu[hidden]{display:none !important}
.lang-switch[data-open="true"] .lang-switch__menu[hidden]{display:block !important}
.lang-switch__menu li{margin:0}
.lang-switch__menu button{width:100%;text-align:start;padding:.5em .7em;border-radius:6px;color:var(--paper);font-weight:600;font-size:.88rem}
.lang-switch__menu button:hover{background:var(--ink-3);color:var(--gold)}
.lang-switch__menu button[aria-pressed="true"]{color:var(--gold)}

.nav-toggle{display:none;width:40px;height:40px;border-radius:var(--radius-sm);border:1px solid var(--line);color:var(--paper);font-size:1.2rem;place-items:center}
.nav-toggle[aria-expanded="true"]{background:var(--ink-3)}

/* ==========================================================================
   HERO  (full-bleed gradient + mandala texture + Ashoka Chakra; text-LCP)
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;
  min-height:clamp(420px,62vh,640px);
  background:#070b12;
  border-bottom:1px solid var(--line);
}
/* Full-bleed banner: scaled + blurred, then veiled */
.hero__bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 35%;
  transform:scale(1.08);
  filter:blur(7px) brightness(.62) saturate(1.12) contrast(1.02);
  will-change:transform;
}
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(105deg,rgba(6,10,16,.78) 0%,rgba(6,10,16,.52) 36%,rgba(6,10,16,.28) 70%,rgba(6,10,16,.4) 100%),
    linear-gradient(180deg,rgba(6,10,16,.12) 0%,rgba(6,10,16,.28) 50%,rgba(6,10,16,.62) 100%),
    radial-gradient(70% 55% at 88% 12%,rgba(255,206,6,.12),transparent 58%),
    radial-gradient(55% 45% at 12% 80%,rgba(255,153,51,.07),transparent 60%);
}
/* soft gold edge glow */
.hero__veil::after{
  content:"";position:absolute;inset:auto 0 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,206,6,.35),transparent);
}
/* mandala texture above veil, very light */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><g fill='none' stroke='%23FFCE06' stroke-width='0.7'><circle cx='32' cy='32' r='28'/><circle cx='32' cy='32' r='15'/><g transform='translate(32 32)'><ellipse rx='5' ry='24' cx='0' cy='0'/><ellipse rx='5' ry='24' cx='0' cy='0' transform='rotate(45)'/><ellipse rx='5' ry='24' cx='0' cy='0' transform='rotate(90)'/><ellipse rx='5' ry='24' cx='0' cy='0' transform='rotate(135)'/></g><circle cx='32' cy='32' r='4'/></g></svg>");
  background-size:64px 64px;
}
.hero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(20px,4vw,48px);align-items:center;
  padding-block:clamp(52px,8vw,108px);
  width:100%;
}
.hero__copy{max-width:40rem;min-width:0}
.hero__h1{margin-bottom:.4em;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero__h1 .hl{color:var(--gold)}
.hero__sub{font-size:1.08rem;color:var(--muted);margin-bottom:1.2em;text-shadow:0 1px 10px rgba(0,0,0,.28)}
.grey-line{display:inline-flex;align-items:center;gap:.5em;background:rgba(14,138,138,.18);border:1px solid var(--line-peacock);color:#9fdbdb;padding:.45em .85em;border-radius:var(--radius-pill);font-size:.82rem;font-weight:600;margin-bottom:1.2em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.grey-line::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--peacock);box-shadow:0 0 8px var(--peacock);flex:none}

.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:1.2em}
.hero__pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:.4em;background:rgba(16,22,32,.72);border:1px solid var(--line);color:var(--paper);padding:.3em .7em;border-radius:var(--radius-pill);font-size:.8rem;font-weight:600;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pill--gold{border-color:var(--line-gold);color:var(--gold)}
.pill--saffron{border-color:var(--line-saffron);color:#ffc59e}
.pill--peacock{border-color:var(--line-peacock);color:#9fdbdb}

/* sharp foreground banner (alongside blurred bg) */
.hero__media{position:relative;min-width:0}
.hero__media img{
  width:100%;height:auto;display:block;
  border-radius:var(--radius);border:1px solid rgba(255,206,6,.22);
  box-shadow:0 18px 48px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04) inset;
}

@media (prefers-reduced-motion:reduce){
  .hero__bg img{transform:scale(1.04);filter:blur(5px) brightness(.6) saturate(1.1)}
}

/* ----------------------------- ASHOKA CHAKRA (24-spoke gold wheel — design.md §3.1) -----------------------------
   Inline SVG (CSS-less) carrying gold strokes; this class only sets position/size/opacity.
   Optional slow rotation via .chakra--spin (disabled under reduced-motion + .lite). */
.chakra{position:absolute;inset-block-start:10px;inset-inline-end:14px;width:clamp(110px,13vw,180px);height:auto;opacity:.22;pointer-events:none;z-index:2;filter:drop-shadow(0 0 22px rgba(255,153,51,.4))}
.chakra--spin{animation:chakra-spin 120s linear infinite;transform-origin:50% 50%}
.chakra--inline{position:static;width:1em;height:1em;opacity:1;filter:none;display:inline-block;vertical-align:-.12em}
@keyframes chakra-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.chakra--spin{animation:none}}
html.lite .chakra--spin{animation:none}

/* ==========================================================================
   TRUST ROW
   ========================================================================== */
.trust{border-bottom:1px solid var(--line);background:var(--ink-2)}
.trust__row{display:flex;flex-wrap:wrap;gap:14px 26px;padding-block:18px}
.trust__item{display:flex;align-items:center;gap:.6em;font-size:.88rem;color:var(--paper);font-weight:600}
.trust__badge{min-width:38px;height:38px;border-radius:9px;display:grid;place-items:center;text-align:center;font-weight:800;font-size:.8rem;line-height:1.05;padding:4px}
.trust__badge--saffron{background:var(--saffron);color:#241200}
.trust__badge--peacock{background:var(--peacock);color:#021515}
.trust__badge--gold{background:var(--gold);color:var(--ink)}
.trust__badge--plain{background:var(--ink-3);color:var(--paper);border:1px solid var(--line)}
.trust__badge img{width:34px;height:auto}

/* ==========================================================================
   CATEGORY TILES
   ========================================================================== */
.grid-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--gap)}
.cat-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3em;padding:clamp(16px,2vw,24px) 14px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .18s var(--ease),transform .12s var(--ease),background .18s var(--ease)}
.cat-tile:hover{border-color:var(--line-gold);background:var(--ink-3);transform:translateY(-2px)}
.cat-tile__icon{display:grid;place-items:center;width:40px;height:40px;line-height:0;color:var(--gold)}.cat-tile__icon img,.cat-tile__icon svg{width:28px;height:28px;display:block}
.cat-tile__title{font-weight:800;font-size:1.02rem;margin:0;color:var(--paper)}
.cat-tile__sub{font-size:.8rem;color:var(--muted);margin:0}

/* ==========================================================================
   CAROUSEL  (scroll-snap + JS arrows/keyboard/swipe + IO lazy)
   ========================================================================== */
.carousel{position:relative;padding-block:var(--s6);padding-inline:var(--pad);max-width:var(--container);margin-inline:auto;width:100%;min-width:0}
.carousel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.carousel__title{margin:0}
.carousel__nav{display:flex;gap:6px;flex-shrink:0}
.carousel__btn{width:38px;height:38px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--ink-2);color:var(--paper);font-size:1.2rem;line-height:1;display:grid;place-items:center}
.carousel__btn:hover:not(:disabled){border-color:var(--line-gold);color:var(--gold)}
.carousel__btn:disabled{opacity:.35;cursor:not-allowed}
.carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:200px;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent;padding-bottom:8px;scroll-padding-inline:4px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.carousel__track::-webkit-scrollbar{height:6px}
.carousel__track::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:3px}
.carousel__track:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:var(--radius)}

/* ==========================================================================
   GAME CARD + ACCORDION  (expand on click; inner /play must not toggle)
   ========================================================================== */
.game-card{scroll-snap-align:start;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s var(--ease),transform .12s var(--ease);min-width:0;width:200px;max-width:100%}
.game-card:hover{border-color:var(--line-gold);transform:translateY(-2px)}
.game-card__media{position:relative;aspect-ratio:16/10;background:var(--ink-3);overflow:hidden;flex:none}
.game-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s var(--ease)}
.game-card:hover .game-card__media img{transform:scale(1.04)}
.game-card__tag{position:absolute;inset-block-start:8px;inset-inline-start:8px;background:rgba(11,16,24,.85);color:var(--saffron);font-size:.72rem;font-weight:700;padding:.2em .5em;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.04em;z-index:1}
.game-card__body{padding:12px 14px;display:flex;flex-direction:column;gap:.5em;flex:1;min-width:0}
.game-card__title{font-size:.95rem;font-weight:800;margin:0;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-card__expand{align-self:flex-start;color:var(--gold);font-size:.82rem;font-weight:700;padding:0}
.game-card__expand:hover{text-decoration:underline}
/* CSS-driven labels so i18n swaps cleanly via data-i18n (no JS textContent) */
.game-card__close-label{display:none}
.game-card[data-open="true"] .game-card__expand-label{display:none}
.game-card[data-open="true"] .game-card__close-label{display:inline}
.game-card__desc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease)}
.game-card[data-open="true"] .game-card__desc{grid-template-rows:1fr}
.game-card__desc-inner{overflow:hidden}
.game-card__desc p{margin:0 0 .6em;font-size:.85rem;color:var(--muted);line-height:1.55}
.game-card__cta{margin-top:auto}

/* ==========================================================================
   PROMO / BONUS CARDS + STRIP GALLERY
   ========================================================================== */
.promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap);align-items:stretch}
.promo-card{position:relative;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,2vw,26px);overflow:hidden;display:flex;flex-direction:column;gap:.7em;height:100%;min-height:100%}
.promo-card::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;height:3px;width:100%;background:linear-gradient(90deg,var(--gold),transparent)}
.promo-card__eyebrow{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--saffron)}
.promo-card__title{font-size:1.2rem;font-weight:800;margin:0}
.promo-card__body{color:var(--muted);font-size:.92rem;flex:1 1 auto}
.promo-card__meta{font-size:.8rem;color:var(--muted)}
.promo-card__actions{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:8px;min-height:5.75rem;padding-top:.35em}
.promo-card__actions .btn{width:auto}

.promo-gallery{display:grid;gap:14px;padding-inline:var(--pad);max-width:var(--container);margin-inline:auto;width:100%;margin-block:var(--s5)}
.promo-strip{display:block;position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--ink-2)}
.promo-strip img{width:100%;height:auto;display:block}
.promo-strip:hover{border-color:var(--line-gold)}

/* ==========================================================================
   PROVIDERS  (text tiles; real <img> only where a logo exists)
   ========================================================================== */
.providers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;padding-inline:var(--pad);max-width:var(--container);margin-inline:auto;width:100%}
.provider-tile{display:flex;align-items:center;justify-content:center;text-align:center;min-height:74px;padding:14px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);font-weight:800;font-size:.95rem;color:var(--paper);transition:border-color .18s var(--ease),transform .12s var(--ease)}
.provider-tile:hover{border-color:var(--line-gold);transform:translateY(-2px)}
.provider-tile img{max-height:44px;width:auto}
.provider-tile--logo{padding:12px;background:transparent;border-color:transparent}.provider-tile--logo img{filter:none;max-height:40px;width:auto;margin-inline:auto}

/* ==========================================================================
   PAYMENTS  (ok = peacock / nodirect = red)
   ========================================================================== */
.payments-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;padding-inline:var(--pad);max-width:var(--container);margin-inline:auto;width:100%}
.pay-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45em;text-align:center;min-height:88px;padding:14px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius)}
.pay-badge img{max-height:40px;width:auto}
.pay-badge__name{font-weight:800;font-size:.9rem;color:var(--paper)}
.pay-badge__status{font-size:.8rem;font-weight:700;padding:.1em .5em;border-radius:var(--radius-pill)}
.pay-badge__status--ok{color:#3DD6B3;background:rgba(14,138,138,.22)}
.pay-badge__status--nodirect{color:#FF7A6E;background:rgba(224,88,78,.18)}
.pay-note{margin-top:18px;margin-inline:auto;padding-inline:var(--pad);color:var(--muted);font-size:.86rem;max-width:min(70ch,var(--container));width:100%;box-sizing:border-box}
.pay-note strong{color:var(--gold-soft)}

/* ==========================================================================
   APP BLOCK
   ========================================================================== */
.app-block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center}
.app-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.app-shot img{width:100%;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.app-store-row{display:flex;flex-wrap:wrap;gap:10px;margin:1em 0}
.store-link{display:inline-flex;align-items:center;gap:.5em;padding:.6em 1em;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--ink-3);color:var(--paper);font-weight:700;font-size:.88rem}
.store-link:hover{border-color:var(--line-gold);text-decoration:none}
.store-link strong{color:var(--gold)}

/* ==========================================================================
   BADGES  (verified/legal = saffron/peacock; licence = gold outline)
   ========================================================================== */
.badge{display:inline-flex;align-items:center;gap:.35em;padding:.2em .6em;border-radius:var(--radius-pill);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;line-height:1.4}
.badge--verified{color:var(--saffron);background:rgba(255,153,51,.12);border:1px solid var(--line-saffron)}
.badge--info{color:var(--peacock);background:rgba(14,138,138,.14);border:1px solid var(--line-peacock)}
.badge--licence{color:var(--gold);background:transparent;border:1px solid var(--line-gold)}

/* ==========================================================================
   LEGAL ZONE
   ========================================================================== */
.honesty{position:relative;background:linear-gradient(180deg,#0e1726,#0a0f18 70%);border-block:1px solid var(--line);overflow:hidden}
.honesty::before{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><g fill='none' stroke='%23ECF1F8' stroke-width='0.7'><circle cx='32' cy='32' r='28'/><circle cx='32' cy='32' r='15'/><g transform='translate(32 32)'><ellipse rx='5' ry='24' cx='0' cy='0'/><ellipse rx='5' ry='24' cx='0' cy='0' transform='rotate(45)'/><ellipse rx='5' ry='24' cx='0' cy='0' transform='rotate(90)'/><ellipse rx='5' ry='24' cx='0' cy='0' transform='rotate(135)'/></g><circle cx='32' cy='32' r='4'/></g></svg>");background-size:64px 64px}
.honesty__ribbon{height:6px;width:100%;background:var(--ribbon-spg);background-size:100% 100%}
.honesty__panel{position:relative;z-index:2;background:rgba(11,16,24,.55);border:1px solid var(--line-saffron);border-radius:var(--radius);padding:clamp(20px,3vw,34px)}
.honesty__title{display:flex;align-items:center;gap:.5em;color:var(--paper)}
.honesty__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:1.2em}
.fact{background:rgba(11,16,24,.4);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px}
.fact__label{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--saffron);margin-bottom:.3em}
.fact__value{font-weight:700;color:var(--paper);font-size:.95rem}
.responsible__text{margin-top:1.2em;color:#dbe7f2;font-size:.9rem}
.responsible__text strong{color:var(--gold-soft)}

/* ==========================================================================
   FAQ  (native <details>, zero JS, FAQPage JSON-LD)
   ========================================================================== */
.faq{display:grid;gap:10px;width:100%;max-width:none}
.faq__item{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.faq__item[open]{border-color:var(--line-gold)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;padding:16px 18px;font-weight:700;color:var(--paper);cursor:pointer}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"+";font-size:1.3rem;font-weight:800;color:var(--gold);transition:transform .2s var(--ease);flex:none}
.faq__item[open] .faq__q::after{content:"−"}
.faq__q:focus-visible{outline-offset:-3px}
.faq__a{padding:0 18px 16px;color:var(--muted);font-size:.95rem;line-height:1.6}
.faq__a p:last-child{margin-bottom:0}

/* ==========================================================================
   SEO TEXT  (#seo-text, 68ch measure)
   ========================================================================== */
#seo-text .seo-body{max-width:none;width:100%;color:var(--muted);font-size:.98rem}
#seo-text > .container > h2,#seo-text .section__head{max-width:none}
#faq .section__head{max-width:none}
#seo-text h2,#seo-text h3{color:var(--paper)}
#seo-text .keyword-pack{display:flex;flex-wrap:wrap;gap:8px;margin-top:1em}
.kw-chip{font-size:.8rem;color:var(--muted);background:var(--ink-2);border:1px solid var(--line);padding:.25em .6em;border-radius:var(--radius-pill)}

/* ==========================================================================
   REVIEWS  (static cards + review form stub)
   ========================================================================== */
.reviews__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.reviews__score{font-size:2.2rem;font-weight:900;color:var(--gold);line-height:1}
.reviews__meta{color:var(--muted);font-size:.9rem}
.reviews__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--gap)}
.review-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:.5em}
.review-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.review-card__name{font-weight:800;color:var(--paper)}
.review-card__who{font-size:.8rem;color:var(--muted)}
.review-stars{color:var(--gold);font-size:.9rem;letter-spacing:1px}
.review-card__body{color:var(--muted);font-size:.9rem;line-height:1.55}
.review-card__date{font-size:.8rem;color:var(--muted)}

/* review form */
.review-form{display:grid;gap:14px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,2vw,26px);max-width:680px}
.review-form__row{display:grid;grid-template-columns:1fr 160px;gap:14px}
.field{display:grid;gap:5px;font-size:.85rem;font-weight:700;color:var(--muted)}
.field__label{font-size:.8rem}
.field__input{font:inherit;font-weight:500;color:var(--paper);background:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.6em .7em;width:100%}
.field__input:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--line-gold)}
.field__error{color:var(--danger);font-size:.8rem;font-weight:600}
.field--invalid .field__input{border-color:var(--danger)}
.hp{position:absolute;left:-9999px;top:-9999px}   /* honeypot — hidden from users, not bots */
.review-form__msg{margin:0;font-weight:700;color:var(--peacock)}

/* ==========================================================================
   TABLES (display:grid → stacked cards ≤768, ZERO horizontal scroll on mobile)
   ========================================================================== */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:480px}
thead th{background:var(--ink-3);color:var(--gold);font-weight:800;text-align:inline-start;padding:12px 14px;border-bottom:1px solid var(--line);position:sticky;top:0}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--paper);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(236,241,248,.02)}
td .ok{color:var(--peacock);font-weight:700}
td .no{color:var(--danger);font-weight:700}

/* ==========================================================================
   CALLOUT (definition box / snippet bait on promo-code + legal)
   ========================================================================== */
.callout{background:rgba(255,206,6,.05);border:1px solid var(--line-gold);border-inline-start:3px solid var(--gold);border-radius:var(--radius);padding:clamp(16px,2vw,24px);max-width:760px}
.callout__q{font-weight:800;color:var(--paper);font-size:1.05rem;margin:0 0 .4em}
.callout__a{color:var(--muted);margin:0}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:#080c12;border-top:1px solid var(--line)}
.footer-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,2.1fr) minmax(0,1.15fr);gap:clamp(24px,3vw,40px);padding-block:clamp(32px,4vw,52px);align-items:start}
.footer-col h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;color:var(--gold);margin-bottom:.9em}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col a{color:var(--muted);font-size:.88rem;text-decoration:none}
.footer-col a:hover{color:var(--paper)}
.footer-brand .brand{margin-bottom:.7em}
.footer-brand p{color:var(--muted);font-size:.86rem;max-width:42ch}
.footer-badges{display:flex;gap:10px;align-items:center;margin-top:.8em;flex-wrap:wrap}
.footer-badges img{height:34px;width:auto}
.footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.footer-nav a{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:42px;padding:.55em .7em;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--ink-2);color:var(--paper);font-weight:600;font-size:.82rem;line-height:1.25;
  text-decoration:none;transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease),transform .12s var(--ease)
}
.footer-nav a:hover{border-color:var(--line-gold);background:var(--ink-3);color:var(--gold);transform:translateY(-1px)}
.footer-nav a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.footer-legal p{color:var(--muted);font-size:.88rem;margin:0 0 .55em;line-height:1.55}
.footer-legal .licence{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;color:var(--paper);margin-bottom:1em}
.footer-legal .footer-cta{display:flex;flex-direction:column;gap:10px;margin-top:.4em;max-width:240px}
.footer-legal .footer-cta .btn{width:100%;justify-content:center;text-decoration:none}
.footer-disclosure{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:18px}
.footer-disclosure p{margin:0;color:var(--muted);font-size:.82rem;max-width:none}
.footer-disclosure strong{color:var(--paper)}
.footer-bottom{padding-block:18px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;align-items:center}
.footer-bottom p{margin:0;color:var(--muted);font-size:.8rem}
.footer-bottom .licence{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}
@media (min-width:900px){
  .footer-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ==========================================================================
   REVEAL ON SCROLL  (disabled under reduced-motion / .lite)
   ========================================================================== */
[data-reveal]{opacity:0;transition:opacity .45s var(--ease)}
[data-reveal].in{opacity:1}
.carousel[data-reveal]{transform:none}

/* ==========================================================================
   LITE MODE  (html.lite): hero img → gradient, animations off, all CTAs kept
   ========================================================================== */
html.lite .hero{
  background:
    radial-gradient(100% 80% at 80% 0%,rgba(255,153,51,.18),transparent 60%),
    radial-gradient(80% 70% at 100% 0%,rgba(255,206,6,.14),transparent 55%),
    linear-gradient(180deg,#0d1422,var(--ink));
  min-height:0;
}
html.lite .hero__bg,html.lite .hero__veil,html.lite .hero__media{display:none}
html.lite .chakra--spin{display:none}
html.lite .hero::before,html.lite .honesty::before{display:none}
html.lite [data-reveal]{opacity:1;transform:none;transition:none}
html.lite *{animation-duration:.001ms !important;transition-duration:.06s !important}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
}

/* ==========================================================================
   INDIC SCRIPTS (system stacks via [lang], all LTR, line-height 1.8 — ZERO web fonts)
   Script family leads so OS picks installed glyphs; Latin falls through to system.
   ========================================================================== */
[lang="hi"],[lang="hi"] body{font-family:var(--font-hi);line-height:1.8}
[lang="bn"],[lang="bn"] body{font-family:var(--font-bn);line-height:1.8}
[lang="ta"],[lang="ta"] body{font-family:var(--font-ta);line-height:1.8}
[lang="te"],[lang="te"] body{font-family:var(--font-te);line-height:1.8}
/* keep numerics/brand tokens on Latin where helpful */
[lang="hi"] .trust__badge,[lang="hi"] .footer-bottom .licence,[lang="hi"] table,
[lang="bn"] .trust__badge,[lang="bn"] .footer-bottom .licence,[lang="bn"] table,
[lang="ta"] .trust__badge,[lang="ta"] .footer-bottom .licence,[lang="ta"] table,
[lang="te"] .trust__badge,[lang="te"] .footer-bottom .licence,[lang="te"] table{font-family:ui-monospace,SFMono-Regular,Menlo,var(--font-latin)}

/* ==========================================================================
   RESPONSIVE  (360 / 768 / 1440 — design.md §6)
   ========================================================================== */
@media (min-width:600px){
  .grid-cats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .footer-nav-col{grid-column:1/-1}
  .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-legal .footer-cta{max-width:none}
}
@media (max-width:860px){
  .hero__inner{grid-template-columns:1fr;padding-block:clamp(40px,10vw,72px)}
  .hero{min-height:clamp(380px,58vh,560px)}
  .hero__bg img{filter:blur(6px) brightness(.58) saturate(1.12);transform:scale(1.1);object-position:center 30%}
  .hero__copy{max-width:none;order:1}
  .hero__media{order:2}
  .app-block{grid-template-columns:1fr}
  .site-header__bar{gap:10px}
  .brand{min-width:0;flex:0 1 auto}
  .brand img{width:auto;height:auto;max-width:150px;max-height:20px}
  .header-actions{gap:6px}
  .header-actions .btn--gold{padding:.5em .75em;font-size:.85rem}
}
@media (min-width:768px){
  .carousel__track{grid-auto-columns:220px}
  .game-card{width:220px}
  .grid-cats{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (max-width:768px){
  /* mobile nav: drawer toggled by body.nav-open
     Overlay is on body; header creates a stacking context (sticky z-index),
     so raise the whole header above the dimmer or the drawer looks inactive. */
  .nav-toggle{display:grid}
  body.nav-open .site-header{z-index:70}
  .promo-card__actions{align-items:center;width:100%}
  .promo-card__actions .btn{min-width:min(100%,220px);justify-content:center;text-align:center}
  .nav{position:fixed;inset-block-start:0;inset-inline-start:0;height:100dvh;width:min(82vw,320px);flex-direction:column;gap:2px;background:#0a0f17;border-inline-end:1px solid var(--line);padding:72px 14px 24px;transform:translateX(-105%);transition:transform .28s var(--ease);z-index:2;overflow-y:auto;margin:0;pointer-events:auto}
  body.nav-open .nav{transform:none;box-shadow:var(--shadow)}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;pointer-events:auto}
  .nav a{padding:.7em .8em;font-size:1rem;border-radius:var(--radius-sm)}
  .nav a[aria-current="page"]{background:var(--ink-3)}

  /* tables reflow to stacked cards — NEVER horizontal scroll */
  .table-wrap{border:0;overflow:visible}
  table{min-width:0}
  thead{display:none}
  tbody tr{display:block;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px}
  tbody td{display:block;border:0;padding:6px 14px}
  tbody td::before{content:attr(data-label) " ";font-weight:800;color:var(--gold);font-size:.8rem}
  tbody tr:nth-child(even){background:var(--ink-2)}

  .reviews__score{font-size:1.8rem}
  .review-form__row{grid-template-columns:1fr}
}
@media (min-width:1024px){
  .carousel__track{grid-auto-columns:230px}
  .game-card{width:230px}
}
@media (max-width:560px){
  .header-actions .btn--ghost[data-lite-toggle]{font-size:.78rem}
  .hero__cta .btn{flex:1 1 auto}
  .app-shots{grid-template-columns:repeat(3,1fr);gap:8px}
  .lang-switch__btn{padding:.3em .5em;font-size:.8rem}
  .brand{font-size:1rem}
  .brand img{max-width:122px;max-height:18px}
  .header-actions .btn--gold{padding:.45em .65em}
}
@media (max-width:360px){
  :root{--fs-h1:1.85rem}
  .container{padding-inline:14px}
  .carousel__track{grid-auto-columns:168px}
  .game-card{width:168px}
}

.eyebrow--saffron{color:var(--saffron)}

/* Back to top */
.back-to-top{
  position:fixed;inset-inline-end:clamp(14px,3vw,24px);inset-block-end:clamp(14px,3vw,24px);
  z-index:45;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-gold);
  background:var(--gold);color:#0a0f17;font-size:1.25rem;font-weight:800;line-height:1;
  display:grid;place-items:center;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s var(--ease),background .15s var(--ease);
  cursor:pointer
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.back-to-top:hover{background:var(--gold-deep)}
.back-to-top:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .back-to-top{transition:none}
}