/* ============================================================
   DailyBet777 — Client app
   Maximal glass + clay on the brand cream/gold base
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* brand */
  --navy-900: #0b1430;
  --navy-800: #101a3a;
  --navy-700: #1c2a56;
  --navy-600: #24356b;
  --navy-500: #324a8c;
  --gold-300: #f0dca6;
  --gold-400: #e7c764;
  --gold-500: #d4af37;
  --gold-600: #c79a3a;
  --gold-700: #9c7a22;
  --gold-soft: #f7efd9;
  --green: #2f9e62;
  --green-d: #1f7a49;
  --red: #cf4d4d;
  --red-d: #a93838;
  --ink: #1a2138;
  --ink-2: #3a4258;
  --ink-3: #6b7186;
  --ink-faint: #9aa0b2;
  --line: #e4ddcd;
  --line-2: #eee8db;

  /* tweakable accents */
  --accent: var(--gold-500);
  --accent-deep: var(--gold-700);
  --accent-2: #2f9e62;        /* secondary accent (wins / live) */
  --accent-grad: linear-gradient(135deg, var(--gold-400), var(--gold-600));

  /* tweakable depth */
  --glass-blur: 24px;
  --glass-alpha: .66;
  --clay: 1;                  /* clay depth multiplier */

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 32px;

  --glass-inset: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.28);
  --maxw: 480px;
  font-synthesis: none;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(38% 30% at 84% 4%, rgba(214,176,74,.55), transparent 62%),
    radial-gradient(40% 36% at 100% 52%, rgba(206,166,72,.34), transparent 64%),
    radial-gradient(46% 40% at -4% 86%, rgba(54,86,170,.24), transparent 66%),
    radial-gradient(40% 30% at 8% 12%, rgba(54,86,170,.16), transparent 60%),
    linear-gradient(155deg, #efe7d6 0%, #e7ddc8 52%, #ddd0b6 100%);
  background-attachment: fixed;
  overflow: hidden;
}
.serif { font-family: 'Marcellus', serif; font-weight: 400; }

/* ---------- floating background motifs ---------- */
.bg-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .5; mix-blend-mode: screen; animation: float 14s ease-in-out infinite; }
.orb.o1 { width: 320px; height: 320px; top: -80px; right: -60px; background: radial-gradient(circle, rgba(231,199,100,.9), transparent 70%); }
.orb.o2 { width: 280px; height: 280px; bottom: 6%; left: -90px; background: radial-gradient(circle, rgba(54,86,170,.7), transparent 70%); animation-delay: -5s; }
.orb.o3 { width: 200px; height: 200px; top: 42%; right: -50px; background: radial-gradient(circle, rgba(212,175,55,.7), transparent 70%); animation-delay: -9s; }
[data-motif="off"] .bg-orbs { display: none; }
@keyframes float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-16px,22px) scale(1.06); } }

/* ============================================================
   App shell — phone-style, responsive
   ============================================================ */
.app {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--maxw);
  height: 100dvh; max-height: 100dvh;
  margin: 0 auto;
  display: flex; flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 60%);
}
@media (min-width: 540px) {
  body { display: grid; place-items: center; padding: 22px; }
  .app {
    height: min(900px, calc(100dvh - 44px));
    border-radius: 40px;
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 50px 110px -34px rgba(11,20,48,.62), var(--glass-inset);
    overflow: hidden;
  }
  .app::after { /* device gloss */
    content: ''; position: absolute; inset: 0; border-radius: 40px; pointer-events: none; z-index: 60;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.22);
  }
}

/* scroll region */
.screen-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 16px 120px;
}
.screen-scroll::-webkit-scrollbar { display: none; }

.screen { display: none; }
.screen.active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .screen.active { animation: screenIn .42s cubic-bezier(.22,.7,.3,1); }
}
@keyframes screenIn { from { transform: translateY(10px); } to { transform: translateY(0); } }

/* ============================================================
   Top bar
   ============================================================ */
.topbar {
  position: relative; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 12px;
}
.tb-logo img { height: 54px; width: auto; display: block; filter: drop-shadow(0 3px 8px rgba(120,90,20,.35)); }
.tb-spacer { flex: 1; }
.balance-pill {
  display: flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 6px 0 14px; border-radius: 99px; cursor: pointer;
  background: linear-gradient(150deg, rgba(255,255,255,.82), rgba(255,255,255,.55));
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 10px 24px -12px rgba(20,34,78,.4), var(--glass-inset);
  transition: transform .12s;
}
.balance-pill:active { transform: scale(.97); }
.balance-pill .bp-coin { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px rgba(199,154,58,.5); }
.balance-pill .bp-coin svg { width: 13px; height: 13px; color: var(--navy-900); }
.balance-pill .bp-amt { font-weight: 800; font-size: 15px; color: var(--ink); letter-spacing: .2px; }
.balance-pill .bp-add {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-grad); color: var(--navy-900);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 10px -2px rgba(199,154,58,.6);
}
.balance-pill .bp-add svg { width: 16px; height: 16px; }
.icon-btn {
  position: relative; width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer; border: 1px solid rgba(255,255,255,.75);
  background: linear-gradient(150deg, rgba(255,255,255,.8), rgba(255,255,255,.5));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 10px 22px -12px rgba(20,34,78,.4), var(--glass-inset);
  color: var(--ink-2); transition: transform .12s;
}
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.avatar {
  width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0; cursor: pointer; overflow: hidden;
  display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #fff;
  background: linear-gradient(150deg, var(--navy-600), var(--navy-900));
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 10px 22px -12px rgba(20,34,78,.6), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .12s;
}
.avatar:active { transform: scale(.94); }

/* ============================================================
   Cards — glass + clay primitives
   ============================================================ */
.glass {
  position: relative;
  background: linear-gradient(158deg, rgba(255,255,255,calc(var(--glass-alpha) + .12)), rgba(255,255,255,var(--glass-alpha)));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: var(--r-md);
  box-shadow: 0 22px 50px -26px rgba(20,34,78,.42), var(--glass-inset);
}
.glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.4), transparent 42%); }

/* clay = puffy soft tile */
.clay {
  border-radius: var(--r-md);
  background: linear-gradient(150deg, #fbf7ec, #efe6d2);
  box-shadow:
    calc(8px * var(--clay)) calc(10px * var(--clay)) calc(22px * var(--clay)) -8px rgba(140,110,50,.4),
    calc(-6px * var(--clay)) calc(-6px * var(--clay)) calc(16px * var(--clay)) -6px rgba(255,255,255,.95),
    inset 0 1px 0 rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.6);
}

/* section heads */
.sec-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 2px 12px; }
.sec-head h2 { font-family: 'Marcellus', serif; font-size: 19px; color: var(--ink); letter-spacing: .3px; white-space: nowrap; }
.sec-head .see { font-size: 12.5px; font-weight: 700; color: var(--accent-deep); cursor: pointer; display: flex; align-items: center; gap: 3px; flex-shrink: 0; white-space: nowrap; }
.sec-head .see svg { width: 14px; height: 14px; }

/* ============================================================
   Home — wallet hero
   ============================================================ */
.wallet-hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  padding: 20px 20px 18px;
  color: #fff;
  background:
    radial-gradient(70% 70% at 86% -10%, rgba(231,199,100,.45), transparent 60%),
    radial-gradient(60% 80% at 0% 120%, rgba(44,95,209,.4), transparent 60%),
    linear-gradient(155deg, var(--navy-700), var(--navy-900));
  box-shadow: 0 30px 60px -28px rgba(11,20,48,.7), inset 0 1px 0 rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.16);
}
.wallet-hero::after { content: ''; position: absolute; right: -30px; top: -30px; width: 160px; height: 160px;
  border-radius: 50%; background: radial-gradient(circle, rgba(231,199,100,.3), transparent 70%); pointer-events: none; }
.wh-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.wh-label { font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-400); }
.wh-id { font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: 1px; }
.wh-amt { position: relative; z-index: 1; margin-top: 8px; font-family: 'Marcellus', serif; font-size: 40px; letter-spacing: .5px; display: flex; align-items: baseline; gap: 6px; }
.wh-amt .cur { font-size: 24px; color: var(--gold-400); }
.wh-actions { position: relative; z-index: 1; margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.wh-act {
  height: 60px; border-radius: 16px; cursor: pointer; border: 1px solid rgba(255,255,255,.16);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25); transition: transform .12s, background .15s;
}
.wh-act:active { transform: scale(.95); }
.wh-act .wa-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-grad); color: var(--navy-900); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 10px -3px rgba(199,154,58,.6); }
.wh-act .wa-ico svg { width: 17px; height: 17px; }
.wh-act.alt .wa-ico { background: linear-gradient(140deg, #4a6bd0, #2c4ea0); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 10px -3px rgba(44,78,160,.7); }

/* ---------- banner carousel ---------- */
.carousel { position: relative; margin-top: 16px; border-radius: var(--r-md); overflow: hidden;
  box-shadow: 0 22px 44px -24px rgba(20,34,78,.5), var(--glass-inset); border: 1px solid rgba(255,255,255,.6); }
.carousel-track { display: flex; transition: transform .5s cubic-bezier(.22,.7,.3,1); }
.carousel-track .slide { min-width: 100%; aspect-ratio: 16/6; position: relative; }
.carousel-track .slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-track .slide.promo { display: flex; align-items: center; padding: 0 22px; color: #fff;
  background: radial-gradient(80% 120% at 100% 0%, rgba(231,199,100,.5), transparent 55%), linear-gradient(135deg, var(--navy-700), var(--navy-900)); }
.carousel-track .slide.promo .pr-k { font-size: 10.5px; font-weight: 800; letter-spacing: 2px; color: var(--gold-400); text-transform: uppercase; }
.carousel-track .slide.promo .pr-h { font-family: 'Marcellus', serif; font-size: 22px; margin-top: 4px; line-height: 1.15; }
.carousel-dots { position: absolute; bottom: 9px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.carousel-dots i { width: 6px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.5); transition: all .3s; }
.carousel-dots i.on { width: 18px; background: var(--gold-400); }

/* ---------- quick games row ---------- */
.qg-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.qg {
  border-radius: var(--r-md); padding: 13px 6px 11px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform .12s;
}
.qg:active { transform: scale(.95) translateY(1px); }
.qg .qg-ico { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(150deg, #fff, #f0e7d4);
  box-shadow: calc(6px * var(--clay)) calc(7px * var(--clay)) calc(16px * var(--clay)) -6px rgba(140,110,50,.45),
    inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 6px rgba(180,150,80,.18); }
.qg .qg-ico svg { width: 25px; height: 25px; color: var(--accent-deep); }
.qg .qg-name { font-size: 11px; font-weight: 700; color: var(--ink-2); letter-spacing: .2px; }

/* ============================================================
   Market cards (matka markets)
   ============================================================ */
.market-list { display: flex; flex-direction: column; gap: 13px; }
.market {
  position: relative; overflow: hidden;
  border-radius: var(--r-md); padding: 11px 13px;
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  background: linear-gradient(158deg, rgba(255,255,255,.78), rgba(255,255,255,.6));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%); backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 18px 40px -24px rgba(20,34,78,.4), var(--glass-inset);
  cursor: pointer; transition: transform .14s, box-shadow .2s;
}
.market:active { transform: scale(.99); }
.market::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent-grad); }
.market.closed::before { background: linear-gradient(180deg, #c3b9a4, #a99e84); }
.mk-name { font-family: 'Marcellus', serif; font-size: 15px; color: var(--ink); letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-result { margin-top: 4px; font-size: 19px; font-weight: 800; letter-spacing: 3px; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
/* Open/Close/Result times wrap onto multiple lines on narrow cards instead of
   overflowing (R13-7); each item stays intact via white-space:nowrap below. */
.mk-times { font-size: 10px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .2px; }
.mk-times b { color: var(--ink-2); font-weight: 700; }
/* Fixed-height right column so the badge + action stay vertically aligned across
   live / closed / play states (R20-3): badge 24 + gap 9 + 42px button = 75px. */
.mk-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; min-height: 58px; }
/* Non-interactive "Market closed" label replacing the old Chart button (R20-2). */
.mk-closed { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--red-d); background: rgba(207,77,77,.10); border: 1px solid rgba(207,77,77,.22); white-space: nowrap; }
.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 9px; border-radius: 99px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
}
.badge .bd-dot { width: 6px; height: 6px; border-radius: 50%; }
.badge.live { color: var(--green-d); background: rgba(47,158,98,.14); border: 1px solid rgba(47,158,98,.3); }
.badge.live .bd-dot { background: var(--green); box-shadow: 0 0 0 0 rgba(47,158,98,.6); animation: pulse 1.6s infinite; }
.badge.closed { color: var(--red-d); background: rgba(207,77,77,.12); border: 1px solid rgba(207,77,77,.28); }
.badge.closed .bd-dot { background: var(--red); }
.badge.soon { color: var(--gold-700); background: rgba(212,175,55,.16); border: 1px solid rgba(212,175,55,.4); }
.badge.soon .bd-dot { background: var(--gold-600); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47,158,98,.5); } 70% { box-shadow: 0 0 0 7px rgba(47,158,98,0); } 100% { box-shadow: 0 0 0 0 rgba(47,158,98,0); } }
.play-btn {
  height: 32px; padding: 0 13px; border-radius: 11px; border: none; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 11.5px; letter-spacing: .4px; color: var(--navy-900);
  display: flex; align-items: center; gap: 7px;
  background: var(--accent-grad);
  box-shadow: 0 10px 22px -8px rgba(199,154,58,.7), inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .12s, filter .15s;
}
.play-btn svg { width: 12px; height: 12px; }
.play-btn:active { transform: scale(.95); }
.play-btn.dim { background: linear-gradient(150deg, #d8cdb6, #c2b69c); color: var(--navy-800); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }

/* ============================================================
   Game board / Jantri
   ============================================================ */
.sub-head { position: relative; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 16px 16px 8px; }
.back-btn { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
  background: linear-gradient(150deg, rgba(255,255,255,.82), rgba(255,255,255,.55)); border: 1px solid rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 22px -12px rgba(20,34,78,.4), var(--glass-inset);
  color: var(--ink); transition: transform .12s; }
.back-btn:active { transform: scale(.92); }
.back-btn svg { width: 20px; height: 20px; }
.sub-title { flex: 1; }
.sub-title h1 { font-family: 'Marcellus', serif; font-size: 19px; color: var(--ink); letter-spacing: .3px; }
.sub-title p { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

.timer-chip { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 12px;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900)); color: #fff; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 22px -12px rgba(11,20,48,.6), inset 0 1px 0 rgba(255,255,255,.18); }
.timer-chip svg { width: 15px; height: 15px; color: var(--gold-400); }
.timer-chip .tc-time { font-weight: 800; font-size: 14px; letter-spacing: .5px; font-variant-numeric: tabular-nums; color: var(--gold-300); }

/* game type tabs */
.gt-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px 6px; scrollbar-width: none; }
.gt-tabs::-webkit-scrollbar { display: none; }
.gt-tab { flex-shrink: 0; height: 38px; padding: 0 16px; border-radius: 99px; cursor: pointer; border: 1px solid rgba(255,255,255,.6);
  font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap;
  background: linear-gradient(150deg, rgba(255,255,255,.7), rgba(255,255,255,.45));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; align-items: center;
  box-shadow: var(--glass-inset); transition: all .16s; }
.gt-tab.on { color: var(--navy-900); background: var(--accent-grad); border-color: var(--gold-600);
  box-shadow: 0 10px 22px -8px rgba(199,154,58,.6), inset 0 1px 0 rgba(255,255,255,.6); }

/* number grid */
.num-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; }
.num-grid.jodi { grid-template-columns: repeat(5, 1fr); }
.num-cell {
  position: relative; aspect-ratio: 1; border-radius: 16px; cursor: pointer; user-select: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(150deg, #fdfaf2, #efe6d2);
  box-shadow: calc(5px * var(--clay)) calc(6px * var(--clay)) calc(14px * var(--clay)) -6px rgba(140,110,50,.4),
    inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 6px rgba(180,150,80,.16);
  border: 1px solid rgba(255,255,255,.6); transition: transform .1s, box-shadow .18s;
}
.num-cell:active { transform: scale(.93); }
.num-cell .nc-num { font-family: 'Marcellus', serif; font-size: 24px; color: var(--ink); letter-spacing: 1px; }
.num-grid.jodi .num-cell .nc-num { font-size: 19px; }
.num-cell .nc-pts { font-size: 10px; font-weight: 800; color: var(--ink-faint); min-height: 12px; }
.num-cell.sel {
  background: var(--accent-grad);
  box-shadow: 0 10px 22px -6px rgba(199,154,58,.7), inset 0 1px 0 rgba(255,255,255,.7);
  border-color: var(--gold-600);
}
.num-cell.sel .nc-num { color: var(--navy-900); }
.num-cell.sel .nc-pts { color: var(--navy-800); }
.num-cell.sel::after { content: ''; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--navy-900); display: grid; place-items: center; }
.num-cell.sel .nc-tick { position: absolute; top: 9px; right: 9px; width: 10px; height: 10px; color: var(--gold-400); z-index: 1; }

/* ============================================================
   Bet slip (bottom drawer)
   ============================================================ */
.betslip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 50;
  transform: translateY(calc(100% - 70px)); transition: transform .42s cubic-bezier(.22,.7,.3,1);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,243,233,.92));
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,.85); border-radius: 26px 26px 0 0;
  box-shadow: 0 -22px 60px -24px rgba(11,20,48,.5), inset 0 1px 0 rgba(255,255,255,.9);
}
.betslip.open { transform: translateY(0); }
.bs-handle { padding: 12px 18px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.bs-handle .grip { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 99px; background: rgba(120,100,60,.3); }
.bs-handle .bs-count { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--navy-900);
  background: var(--accent-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.bs-handle .bs-meta { flex: 1; }
.bs-handle .bs-meta .l1 { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.bs-handle .bs-meta .l2 { font-size: 15px; font-weight: 800; color: var(--ink); }
.bs-handle .bs-chev { color: var(--ink-3); transition: transform .3s; }
.betslip.open .bs-handle .bs-chev { transform: rotate(180deg); }
.bs-body { max-height: 46vh; overflow-y: auto; padding: 0 18px 18px; scrollbar-width: none; }
.bs-body::-webkit-scrollbar { display: none; }
.bs-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.bs-item .bi-num { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-family: 'Marcellus', serif; font-size: 18px; color: var(--navy-900);
  background: linear-gradient(150deg, var(--gold-300), var(--gold-500)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.bs-item .bi-info .t { font-size: 13px; font-weight: 700; color: var(--ink); }
.bs-item .bi-info .s { font-size: 11px; color: var(--ink-3); }
.bs-item .bi-pts input { width: 64px; height: 36px; border-radius: 10px; border: 1px solid var(--line); text-align: center; font-family: inherit; font-weight: 800; font-size: 14px; color: var(--ink); background: rgba(255,255,255,.7); }
.bs-item .bi-pts input:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(212,175,55,.16); }
.bs-item .bi-del { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; color: var(--red); background: rgba(207,77,77,.1); border: none; }
.bs-item .bi-del svg { width: 16px; height: 16px; }
.bs-foot { display: flex; align-items: center; gap: 12px; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.bs-total { flex-shrink: 0; }
.bs-total .l { font-size: 11px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.bs-total .v { font-family: 'Marcellus', serif; font-size: 26px; color: var(--ink); }
.bs-total .v .cur { color: var(--accent-deep); font-size: 18px; }

/* ============================================================
   Generic buttons
   ============================================================ */
.cta {
  height: 54px; border-radius: 16px; border: none; cursor: pointer; width: 100%;
  font-family: inherit; font-weight: 800; font-size: 15px; letter-spacing: .3px; color: var(--navy-900);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--accent-grad);
  box-shadow: 0 16px 34px -12px rgba(199,154,58,.75), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .12s, filter .15s;
}
.cta svg { width: 19px; height: 19px; }
.cta:active { transform: scale(.98); }
.cta.flex1 { flex: 1; }
.cta.ghost { background: linear-gradient(150deg, rgba(255,255,255,.8), rgba(255,255,255,.55)); color: var(--ink); border: 1px solid rgba(255,255,255,.8); box-shadow: var(--glass-inset), 0 10px 22px -14px rgba(20,34,78,.4); }
.cta.navy { background: linear-gradient(150deg, var(--navy-700), var(--navy-900)); color: #fff; box-shadow: 0 16px 34px -14px rgba(11,20,48,.7), inset 0 1px 0 rgba(255,255,255,.16); }

/* ============================================================
   Wallet / transactions
   ============================================================ */
.txn-list { display: flex; flex-direction: column; gap: 2px; }
.txn { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 13px 14px; border-radius: 14px; transition: background .15s; }
.txn:active { background: rgba(255,255,255,.4); }
.txn .tx-ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
.txn .tx-ico svg { width: 19px; height: 19px; }
.txn.cr .tx-ico { background: rgba(47,158,98,.13); color: var(--green-d); }
.txn.dr .tx-ico { background: rgba(207,77,77,.12); color: var(--red-d); }
.txn.bet .tx-ico { background: rgba(212,175,55,.16); color: var(--gold-700); }
.txn .tx-info .t { font-size: 14px; font-weight: 700; color: var(--ink); }
.txn .tx-info .s { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.txn .tx-amt { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.txn.cr .tx-amt { color: var(--green-d); }
.txn.dr .tx-amt, .txn.bet .tx-amt { color: var(--red-d); }

/* amount input + chips */
.amt-display { text-align: center; padding: 26px 0 18px; }
.amt-display .ad-cur { font-family: 'Marcellus', serif; font-size: 30px; color: var(--accent-deep); vertical-align: top; }
.amt-display .ad-val { font-family: 'Marcellus', serif; font-size: 60px; color: var(--ink); letter-spacing: 1px; }
.amt-display .ad-hint { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.chip-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.chip { height: 46px; border-radius: 14px; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 14px; color: var(--ink-2);
  border: 1px solid rgba(255,255,255,.7); background: linear-gradient(150deg, #fbf7ec, #efe6d2);
  box-shadow: calc(4px * var(--clay)) calc(5px * var(--clay)) calc(12px * var(--clay)) -6px rgba(140,110,50,.4), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .1s; }
.chip:active { transform: scale(.94); }
.chip.on { color: var(--navy-900); background: var(--accent-grad); border-color: var(--gold-600); box-shadow: 0 8px 18px -6px rgba(199,154,58,.6), inset 0 1px 0 rgba(255,255,255,.6); }

.pay-row { display: flex; flex-direction: column; gap: 10px; }
.pay { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 14px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(158deg, rgba(255,255,255,.74), rgba(255,255,255,.56)); border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--glass-inset), 0 14px 30px -22px rgba(20,34,78,.4); }
.pay .pay-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(150deg, #fff, #f0e7d4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 14px -6px rgba(140,110,50,.4); color: var(--accent-deep); }
.pay .pay-ico svg { width: 22px; height: 22px; }
.pay .pay-info .t { font-size: 14px; font-weight: 700; color: var(--ink); }
.pay .pay-info .s { font-size: 11.5px; color: var(--ink-3); }
.pay .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; }
.pay.on { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(212,175,55,.16), var(--glass-inset); }
.pay.on .radio { border-color: var(--gold-500); }
.pay.on .radio::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-grad); }

/* ============================================================
   My bids
   ============================================================ */
.seg-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 15px; margin: 6px 0 14px;
  background: linear-gradient(150deg, rgba(255,255,255,.6), rgba(255,255,255,.42)); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--glass-inset); }
.seg { flex: 1; height: 40px; border-radius: 11px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; color: var(--ink-3); border: none; background: transparent; transition: all .18s; }
.seg.on { color: var(--navy-900); background: linear-gradient(150deg, #fff, #f3ebd8); box-shadow: 0 6px 14px -6px rgba(140,110,50,.4), inset 0 1px 0 rgba(255,255,255,.9); }

.bid-card { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 14px; border-radius: var(--r-md); margin-bottom: 11px;
  background: linear-gradient(158deg, rgba(255,255,255,.76), rgba(255,255,255,.58)); border: 1px solid rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-inset), 0 16px 36px -24px rgba(20,34,78,.4); }
.bid-card .bc-num { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-family: 'Marcellus', serif; font-size: 22px; color: var(--navy-900);
  background: linear-gradient(150deg, var(--gold-300), var(--gold-500)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 14px -6px rgba(199,154,58,.5); }
.bid-card .bc-info .t { font-size: 14px; font-weight: 700; color: var(--ink); }
.bid-card .bc-info .s { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; display: flex; gap: 8px; }
.bid-card .bc-right { text-align: right; }
.bid-card .bc-right .pts { font-weight: 800; font-size: 15px; color: var(--ink); }
.bid-card .bc-right .st { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; margin-top: 4px; }
.bid-card .bc-right .st.won { color: var(--green-d); }
.bid-card .bc-right .st.lost { color: var(--red-d); }
.bid-card .bc-right .st.pend { color: var(--gold-700); }
/* R16: My Bettings grouped into per-game categories */
.bet-cat { margin-bottom: 18px; }
.bet-cat-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 2px 9px; }
.bet-cat-name { font-size: 13px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--gold-700); }
.bet-cat-meta { font-size: 11.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }

/* result chart */
.chart-card { padding: 16px; border-radius: var(--r-md); margin-bottom: 12px;
  background: linear-gradient(158deg, rgba(255,255,255,.76), rgba(255,255,255,.58)); border: 1px solid rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-inset), 0 16px 36px -24px rgba(20,34,78,.4); }
.chart-card .cc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.chart-card .cc-name { font-family: 'Marcellus', serif; font-size: 16px; color: var(--ink); }
.chart-card .cc-date { font-size: 11px; color: var(--ink-3); }
.chart-card .cc-result { display: flex; align-items: center; justify-content: center; gap: 8px; }
.chart-card .cc-result .pan { font-size: 13px; font-weight: 800; color: var(--ink-2); letter-spacing: 1px; }
.chart-card .cc-result .ank { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-family: 'Marcellus', serif; font-size: 24px; color: var(--navy-900);
  background: var(--accent-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 18px -8px rgba(199,154,58,.6); }
.chart-card .cc-result .dash { color: var(--ink-faint); font-weight: 800; }

/* ============================================================
   Profile
   ============================================================ */
.profile-hero { display: flex; align-items: center; gap: 15px; padding: 20px; border-radius: var(--r-lg); margin-top: 4px;
  background: radial-gradient(80% 90% at 90% -20%, rgba(231,199,100,.4), transparent 55%), linear-gradient(155deg, var(--navy-700), var(--navy-900));
  color: #fff; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 30px 60px -28px rgba(11,20,48,.7), inset 0 1px 0 rgba(255,255,255,.18); }
.profile-hero .ph-av { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-weight: 800; font-size: 26px; color: var(--navy-900); flex-shrink: 0;
  background: var(--accent-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 20px -6px rgba(199,154,58,.6); overflow: hidden; }
/* R16: uploaded profile photo fills the avatar tile (profile + edit screens). */
.ph-av-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-hero .ph-info { flex: 1; }
.profile-hero .ph-name { font-family: 'Marcellus', serif; font-size: 22px; }
.profile-hero .ph-phone { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 2px; }
.profile-hero .ph-kyc { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--green); padding: 4px 9px; border-radius: 99px; background: rgba(47,158,98,.16); border: 1px solid rgba(47,158,98,.3); white-space: nowrap; }
.profile-hero .ph-kyc svg { width: 12px; height: 12px; }

.menu-list { margin-top: 16px; border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(158deg, rgba(255,255,255,.74), rgba(255,255,255,.56)); border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-inset), 0 16px 36px -24px rgba(20,34,78,.4); }
.menu-item { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 15px 16px; cursor: pointer; border-bottom: 1px solid var(--line-2); transition: background .15s; }
.menu-item:last-child { border-bottom: none; }
.menu-item:active { background: rgba(255,255,255,.5); }
.menu-item .mi-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--accent-deep);
  background: linear-gradient(150deg, #fff, #f0e7d4); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 5px 12px -6px rgba(140,110,50,.4); }
.menu-item .mi-ico svg { width: 19px; height: 19px; }
.menu-item .mi-label { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.menu-item .mi-sub { font-size: 11px; color: var(--ink-3); }
.menu-item .mi-chev { color: var(--ink-faint); }
.menu-item .mi-chev svg { width: 18px; height: 18px; }
.menu-item.danger .mi-ico { color: var(--red-d); background: rgba(207,77,77,.1); box-shadow: none; }
.menu-item.danger .mi-label { color: var(--red-d); }

/* stat row */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 14px; }
.stat { padding: 15px 12px; border-radius: var(--r-md); text-align: center;
  background: linear-gradient(150deg, #fbf7ec, #efe6d2); border: 1px solid rgba(255,255,255,.6);
  box-shadow: calc(5px * var(--clay)) calc(6px * var(--clay)) calc(14px * var(--clay)) -7px rgba(140,110,50,.4), inset 0 1px 0 rgba(255,255,255,.9); }
.stat .sv { font-family: 'Marcellus', serif; font-size: 24px; color: var(--ink); }
.stat .sl { font-size: 10.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }

/* ============================================================
   Bottom nav
   ============================================================ */
.bottom-nav {
  position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; height: 66px;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  border-radius: 22px; padding: 0 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(248,243,233,.74));
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 22px 50px -20px rgba(11,20,48,.45), inset 0 1px 0 rgba(255,255,255,.9);
}
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; color: var(--ink-3); position: relative; height: 100%; justify-content: center; transition: color .18s; padding: 0 1px; min-width: 0; }
.nav-item svg { width: 23px; height: 23px; }
.nav-item .nl { font-size: 9px; font-weight: 700; letter-spacing: 0; white-space: nowrap; max-width: 100%; }
.nav-item.on { color: var(--accent-deep); }
.nav-item.on:not(.center)::before { content: ''; position: absolute; top: -1px; width: 26px; height: 3px; border-radius: 99px; background: var(--accent-grad); box-shadow: 0 2px 8px rgba(199,154,58,.6); }
.nav-item.center { position: relative; justify-content: flex-end; padding-bottom: 9px; overflow: visible; }
/* cradle: a raised glass bump the FAB sits in */
.nav-item.center::after { content: ''; position: absolute; top: -21px; left: 50%; transform: translateX(-50%); width: 70px; height: 70px; border-radius: 50%; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,243,233,.8));
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 -7px 16px -9px rgba(11,20,48,.22); }
.nav-item.center .nc-fab { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--navy-900);
  background: var(--accent-grad); border: 3px solid rgba(255,255,255,.85); box-shadow: 0 12px 26px -8px rgba(199,154,58,.8), inset 0 1px 0 rgba(255,255,255,.6); transition: transform .14s; }
.nav-item.center .nc-fab svg { width: 26px; height: 26px; }
.nav-item.center:active .nc-fab { transform: translateX(-50%) scale(.92); }
.nav-item.center .nl { position: relative; z-index: 1; margin: 0; color: var(--accent-deep); }

/* ============================================================
   Toast
   ============================================================ */
.toast-wrap { position: absolute; left: 0; right: 0; bottom: 96px; z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; font-size: 13.5px; font-weight: 700; color: var(--ink);
  background: linear-gradient(150deg, rgba(255,255,255,.94), rgba(246,242,234,.9)); border: 1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 20px 44px -18px rgba(11,20,48,.5), inset 0 1px 0 rgba(255,255,255,1);
  animation: toastIn .4s cubic-bezier(.22,.7,.3,1); max-width: 90%; }
.toast .ti { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.toast .ti svg { width: 16px; height: 16px; }
.toast.ok .ti { background: rgba(47,158,98,.16); color: var(--green-d); }
.toast.info .ti { background: rgba(212,175,55,.18); color: var(--gold-700); }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* empty state */
.empty { text-align: center; padding: 50px 20px; }
.empty .em-ic { width: 76px; height: 76px; border-radius: 24px; margin: 0 auto 16px; display: grid; place-items: center; color: var(--gold-600);
  background: linear-gradient(150deg, #fbf7ec, #efe6d2); box-shadow: calc(6px * var(--clay)) calc(8px * var(--clay)) calc(18px * var(--clay)) -7px rgba(140,110,50,.4), inset 0 1px 0 rgba(255,255,255,.9); }
.empty .em-ic svg { width: 34px; height: 34px; }
.empty h3 { font-family: 'Marcellus', serif; font-size: 19px; color: var(--ink); }
.empty p { font-size: 13px; color: var(--ink-3); margin-top: 6px; }

/* utility */
.spacer-sm { height: 8px; } .spacer-md { height: 16px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.field-label { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3); margin: 0 2px 8px; }
.glass-input { width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); font-family: inherit; font-size: 15px; color: var(--ink);
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.glass-input:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(212,175,55,.16); background: rgba(255,255,255,.85); }
/* Custom per-number amount field on the generator tabs — subtle gold tint so it
   reads as the stake input, distinct from the white digits box above it. */
.amt-input { background: rgba(212,175,55,.07); border-color: rgba(212,175,55,.38); }

/* ============================================================
   AUTH (login / register)
   ============================================================ */
body.on-auth .app { background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.05) 30%, transparent 60%); }
.auth-wrap { position: relative; min-height: calc(100dvh - 24px); display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 24px 4px 30px; }
/* T1 guest "Back to games" — pinned top-left so it never crowds the centered card */
.auth-back { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 8px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--ink-3); cursor: pointer; padding: 7px 12px 7px 8px; border-radius: 999px;
  background: rgba(255,255,255,.55); border: 1px solid var(--line); box-shadow: 0 4px 14px -8px rgba(40,30,10,.4); }
.auth-back svg { width: 16px; height: 16px; }
.auth-back:active { transform: scale(.96); }
.auth-brand { text-align: center; }
.auth-brand img { height: 40px; width: auto; filter: drop-shadow(0 4px 14px rgba(120,90,20,.4)); }
.auth-card { padding: 8px 22px 24px; border-radius: var(--r-lg); }
.auth-tabs { display: flex; gap: 6px; padding: 5px; margin: 14px 0 4px; border-radius: 15px;
  background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.7); }
.atab { flex: 1; height: 42px; border: none; border-radius: 11px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px; color: var(--ink-3); background: transparent; transition: all .18s; }
.atab.on { color: var(--navy-900); background: var(--accent-grad); box-shadow: 0 8px 18px -8px rgba(199,154,58,.6), inset 0 1px 0 rgba(255,255,255,.6); }
.auth-head { padding: 18px 2px 4px; }
.auth-head h1 { font-family: 'Marcellus', serif; font-size: 26px; color: var(--ink); }
.auth-head p { font-size: 13px; color: var(--ink-3); margin-top: 5px; }
.af-form { display: flex; flex-direction: column; gap: 15px; margin-top: 14px; }
.af-field { display: flex; flex-direction: column; }
.ai-wrap { position: relative; display: flex; align-items: center; }
.ai-lead { position: absolute; left: 14px; font-size: 14px; font-weight: 700; color: var(--ink-2); pointer-events: none; }
.ai-lead.ai-ico { color: var(--ink-faint); }
.ai-lead svg { width: 18px; height: 18px; }
.ai-eye { position: absolute; right: 10px; width: 34px; height: 34px; border: none; background: transparent; cursor: pointer; color: var(--ink-faint); display: grid; place-items: center; }
.ai-eye svg { width: 19px; height: 19px; }
.af-tlink { font-size: 12.5px; font-weight: 700; color: var(--accent-deep); cursor: pointer; }
.af-agree { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.af-agree input { position: absolute; opacity: 0; width: 0; height: 0; }
.af-agree .box { width: 20px; height: 20px; border-radius: 7px; flex-shrink: 0; margin-top: 1px; border: 1.5px solid var(--line); background: rgba(255,255,255,.7); display: grid; place-items: center; transition: all .15s; }
.af-agree .box svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.5); transition: all .15s; }
.af-agree input:checked + .box { background: var(--accent-grad); border-color: var(--gold-600); }
.af-agree input:checked + .box svg { opacity: 1; transform: scale(1); }
.af-switch { text-align: center; font-size: 13.5px; color: var(--ink-3); margin-top: 18px; }
.af-switch a { font-weight: 800; color: var(--accent-deep); cursor: pointer; }
.af-secure { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px; color: var(--ink-faint); margin-top: 18px; }
.af-secure svg { width: 14px; height: 14px; color: var(--green); }

/* ============================================================
   HOME market card (gali jodi)
   ============================================================ */
.market { grid-template-columns: 1fr auto auto; }
.mk-mid { text-align: center; padding: 0 4px; }
.mk-jodi { font-family: 'Marcellus', serif; font-size: 30px; line-height: 1; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.market.closed .mk-jodi { color: var(--ink-3); }
.mk-jodi-l { font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; }
.mk-times span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.mk-times svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ============================================================
   GAME — header bits
   ============================================================ */
.balance-pill.sm { height: 38px; padding: 0 14px; }
.balance-pill.sm .bp-coin { width: 20px; height: 20px; }
.dot-live { color: var(--green-d); font-weight: 800; font-size: 10.5px; letter-spacing: .3px; }
.dot-closed { color: var(--red-d); font-weight: 800; font-size: 10.5px; letter-spacing: .3px; }
.sub-title p b { color: var(--ink); font-weight: 700; }

.limit-banner { display: flex; align-items: center; gap: 10px; margin: 4px 16px 8px; padding: 11px 14px; border-radius: 14px;
  background: linear-gradient(150deg, rgba(212,175,55,.16), rgba(212,175,55,.08)); border: 1px solid rgba(212,175,55,.4);
  color: var(--gold-700); font-size: 12.5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.limit-banner svg { width: 18px; height: 18px; flex-shrink: 0; }
.limit-banner b { color: var(--gold-700); }
.game-body { padding: 4px 16px 10px; }

/* coin bar */
.coin-bar { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 6px 0 14px; scrollbar-width: none; }
.coin-bar::-webkit-scrollbar { display: none; }
.coin-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); flex-shrink: 0; }
.coin { flex-shrink: 0; height: 36px; padding: 0 15px; border-radius: 99px; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 13px; color: var(--ink-2);
  border: 1px solid rgba(255,255,255,.6); background: linear-gradient(150deg, #fbf7ec, #efe6d2);
  box-shadow: calc(3px * var(--clay)) calc(4px * var(--clay)) calc(10px * var(--clay)) -5px rgba(140,110,50,.4), inset 0 1px 0 rgba(255,255,255,.9); transition: transform .1s; }
.coin:active { transform: scale(.94); }
.coin.on { color: var(--navy-900); background: var(--accent-grad); border-color: var(--gold-600); box-shadow: 0 8px 16px -6px rgba(199,154,58,.6), inset 0 1px 0 rgba(255,255,255,.6); }
.coin-custom { flex-shrink: 0; display: flex; align-items: center; gap: 2px; height: 36px; padding: 0 12px 0 13px; border-radius: 99px; border: 1px dashed rgba(199,154,58,.6);
  background: linear-gradient(150deg, #fbf7ec, #efe6d2); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); transition: all .15s; }
.coin-custom .cc-cur { font-size: 13px; font-weight: 800; color: var(--ink-3); }
.coin-custom .coin-input { width: 86px; height: 100%; border: none; background: transparent; font-family: inherit; font-weight: 800; font-size: 14px; color: var(--ink); }
.coin-custom .coin-input:focus { outline: none; }
.coin-custom .coin-input::placeholder { color: var(--ink-faint); font-weight: 700; }
.coin-custom .coin-input::-webkit-outer-spin-button, .coin-custom .coin-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.coin-custom.on { border-style: solid; border-color: var(--gold-600); background: var(--accent-grad); box-shadow: 0 8px 16px -6px rgba(199,154,58,.6), inset 0 1px 0 rgba(255,255,255,.6); }
.coin-custom.on .cc-cur { color: var(--navy-900); }
.coin-custom.on .coin-input { color: var(--navy-900); }
.coin-custom.on .coin-input::placeholder { color: var(--navy-800); }
.coin-hint { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }

/* jodi grid 10-wide */
.jodi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
@media (min-width: 400px) { .jodi-grid { grid-template-columns: repeat(10, 1fr); gap: 6px; } }
.jcell { position: relative; aspect-ratio: 1; border-radius: 12px; cursor: pointer; border: 1px solid rgba(255,255,255,.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(150deg, #fdfaf2, #efe6d2);
  box-shadow: calc(3px * var(--clay)) calc(4px * var(--clay)) calc(9px * var(--clay)) -5px rgba(140,110,50,.38), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 4px rgba(180,150,80,.14);
  transition: transform .1s; }
.jcell:active { transform: scale(.9); }
.jcell .jn { font-family: 'Marcellus', serif; font-size: 16px; color: var(--ink); }
.jcell .jc { font-size: 8.5px; font-weight: 800; color: var(--ink-faint); min-height: 10px; line-height: 1; }
.jcell.sel { background: var(--accent-grad); border-color: var(--gold-600); box-shadow: 0 8px 16px -5px rgba(199,154,58,.7), inset 0 1px 0 rgba(255,255,255,.7); }
.jcell.sel .jn { color: var(--navy-900); }
.jcell.sel .jc { color: var(--navy-800); }

/* single rows (andar/bahar) */
.single-block { margin-top: 18px; }
.single-head { text-align: center; font-size: 12.5px; font-weight: 800; letter-spacing: .3px; color: var(--ink-2); margin-bottom: 10px; text-transform: uppercase; }
.single-head .hi { color: var(--gold-700); font-family: 'Marcellus', serif; font-weight: 400; text-transform: none; letter-spacing: 0; }
.single-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.scell { position: relative; aspect-ratio: 1; border-radius: 11px; cursor: pointer; border: 1px solid rgba(255,255,255,.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #fdfaf2, #efe6d2);
  box-shadow: calc(3px * var(--clay)) calc(4px * var(--clay)) calc(9px * var(--clay)) -5px rgba(140,110,50,.36), inset 0 1px 0 rgba(255,255,255,.9); transition: transform .1s; }
.scell:active { transform: scale(.9); }
.scell .sn { font-family: 'Marcellus', serif; font-size: 17px; color: var(--ink); }
.scell .sc { font-size: 8px; font-weight: 800; color: var(--ink-faint); min-height: 9px; line-height: 1; }
.scell.sel { background: linear-gradient(140deg, var(--navy-600), var(--navy-900)); border-color: var(--navy-700); box-shadow: 0 8px 16px -5px rgba(11,20,48,.5), inset 0 1px 0 rgba(255,255,255,.2); }
.scell.sel .sn { color: #fff; }
.scell.sel .sc { color: var(--gold-300); }

/* ---- per-number inline stake inputs (jantri-style bet entry) ---- */
.amt-hint { font-size: 11px; color: var(--ink-faint); text-align: center; margin: 2px 0 12px; font-weight: 600; }
.jcell, .scell { aspect-ratio: auto; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 5px; cursor: default; }
.jcell .jn, .scell .sn { font-size: 16px; line-height: 1; font-weight: 600; }
/* the stake input fills the whole cell width so the grid reads as a solid sheet */
.jcell .cbet, .scell .cbet { width: 100%; max-width: none; box-sizing: border-box; text-align: center; font-size: 13.5px; font-weight: 800; color: var(--ink); border: 1px solid rgba(0,0,0,.16); border-radius: 8px; background: rgba(255,255,255,.96); padding: 5px 2px; outline: none; }
.jcell .cbet::placeholder, .scell .cbet::placeholder { color: var(--ink-faint); opacity: .45; }
.cbet:focus { border-color: var(--gold-600); box-shadow: 0 0 0 2px rgba(199,154,58,.3); }
.jcell.sel { background: rgba(244,196,48,.16); box-shadow: inset 0 0 0 1.5px var(--gold-600); }
.scell.sel { background: rgba(11,20,48,.08); box-shadow: inset 0 0 0 1.5px var(--navy-600); }
.jcell.sel .jn, .scell.sel .sn { color: var(--ink); }
.jcell:active, .scell:active { transform: none; }
/* R21: a number whose cross-mode total exceeds the per-number limit — shaded red
   so the user can spot + lower/remove it. Wins over .sel via later source order. */
.jcell.over, .scell.over { background: rgba(207,77,77,.16); box-shadow: inset 0 0 0 1.5px var(--red, #cf4d4d); }
.jcell.over .jn, .scell.over .sn { color: var(--red-d, #b23b3b); }
.gen-item.over { background: rgba(207,77,77,.10); box-shadow: inset 0 0 0 1.5px rgba(207,77,77,.45); }
.gen-item.over .gi-num { color: var(--red-d, #b23b3b); font-weight: 800; }

/* generator card (crossing/notono/open) */
.gen-card { padding: 16px; border-radius: var(--r-md); display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(158deg, rgba(255,255,255,.7), rgba(255,255,255,.52)); border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-inset), 0 16px 36px -24px rgba(20,34,78,.4); }
.joda-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ink); user-select: none; }
.joda-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.joda-toggle .box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line); background: rgba(255,255,255,.8); display: grid; place-items: center; transition: all .15s; }
.joda-toggle .box svg { width: 12px; height: 12px; color: #fff; opacity: 0; transform: scale(.5); transition: all .15s; }
.joda-toggle input:checked + .box { background: var(--accent-grad); border-color: var(--gold-600); }
.joda-toggle input:checked + .box svg { opacity: 1; transform: scale(1); }
.joda-toggle .muted { color: var(--ink-faint); font-weight: 500; }
.preview { font-size: 12.5px; color: var(--green-d); padding: 10px 12px; border-radius: 10px; background: rgba(47,158,98,.1); border: 1px solid rgba(47,158,98,.2); line-height: 1.5; }
.preview.muted { color: var(--ink-faint); background: rgba(0,0,0,.03); border-color: var(--line-2); }
.preview b { color: var(--green-d); }
.preview.muted b { color: var(--ink-3); }
.gen-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.gen-add, .gen-clear { height: 46px; border-radius: 13px; cursor: pointer; border: none; font-family: inherit; font-weight: 800; font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 7px; transition: transform .12s; }
.gen-add svg, .gen-clear svg { width: 16px; height: 16px; }
.gen-add { color: var(--navy-900); background: var(--accent-grad); box-shadow: 0 10px 22px -10px rgba(199,154,58,.7), inset 0 1px 0 rgba(255,255,255,.6); }
.gen-clear { color: var(--red-d); background: rgba(207,77,77,.12); border: 1px solid rgba(207,77,77,.3); }
.gen-add:active, .gen-clear:active { transform: scale(.96); }

/* generated bid list */
.gen-list { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.gen-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 14px;
  background: linear-gradient(158deg, rgba(255,255,255,.74), rgba(255,255,255,.56)); border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--glass-inset), 0 12px 26px -20px rgba(20,34,78,.4); }
.gen-item .gi-num { font-family: 'Marcellus', serif; font-size: 19px; color: var(--ink); min-width: 30px; }
.gen-item .gi-type { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.gen-item .gi-amt { font-weight: 800; font-size: 13.5px; color: var(--green-d); }
.gen-item .gi-del { width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, #d9605b, #b23a36); box-shadow: 0 4px 10px -4px rgba(178,58,54,.6); }
.gen-item .gi-del svg { width: 14px; height: 14px; }

/* ============================================================
   GAME footer bar (Total | Play)
   ============================================================ */
/* Docked action bar above the nav. A top fade in the page-cream colour lets the
   number grid scroll CLEANLY out of view under the bar instead of colliding. */
.game-foot { position: absolute; left: 0; right: 0; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 45; display: none; gap: 10px; align-items: stretch;
  padding: 22px 16px 12px;
  background: linear-gradient(180deg, rgba(231,221,200,0) 0%, rgba(231,221,200,.86) 38%, rgba(231,221,200,.99) 100%); }
.game-foot.show { display: flex; }
.gf-total { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 0 12px; height: 58px; border: none; cursor: pointer; text-align: left; border-radius: 18px;
  background: linear-gradient(150deg, #2c3c72, #16224f); color: #fff;
  box-shadow: 0 16px 32px -16px rgba(11,20,48,.7), inset 0 1px 0 rgba(255,255,255,.16); transition: transform .14s, background .2s; }
.gf-total:active { transform: scale(.98); }
.gf-count { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 15px; background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); flex-shrink: 0; }
.gf-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.gf-l { font-size: 10px; opacity: .82; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.gf-v { font-family: 'Marcellus', serif; font-size: 22px; white-space: nowrap; }
.gf-play { width: 42%; min-width: 132px; flex-shrink: 0; height: 58px; border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 16px; letter-spacing: .4px; color: var(--navy-900); border-radius: 18px;
  display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent-grad);
  box-shadow: 0 16px 32px -14px rgba(199,154,58,.8), inset 0 1px 0 rgba(255,255,255,.6); transition: transform .14s, filter .15s; }
.gf-play svg { width: 19px; height: 19px; }
.gf-play:active { transform: scale(.97); filter: brightness(.97); }
/* With bids: the Total Bid pill goes red/active so the running stake stands out. */
.game-foot.has .gf-total { background: linear-gradient(150deg, #d65a55, #a8302c); }
.game-foot.has .gf-count { background: rgba(255,255,255,.26); }
/* Closed market: grey the pill + block the Play button (no bids can be placed). */
.game-foot.closed .gf-total { background: linear-gradient(150deg, #6c7180, #4b4f5d); }
.game-foot.closed .gf-play { pointer-events: none; filter: grayscale(.5) brightness(.92); cursor: not-allowed; opacity: .7; }

/* ============================================================
   Review sheet
   ============================================================ */
.sheet-scrim { position: absolute; inset: 0; z-index: 55; background: rgba(11,20,48,.34); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s; }
.sheet-scrim.on { opacity: 1; visibility: visible; }
.bet-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 56; transform: translateY(102%); visibility: hidden; pointer-events: none; transition: transform .42s cubic-bezier(.22,.7,.3,1), visibility 0s linear .42s;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,243,233,.95)); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  border-radius: 26px 26px 0 0; border-top: 1px solid rgba(255,255,255,.85); box-shadow: 0 -22px 60px -24px rgba(11,20,48,.5); padding-bottom: env(safe-area-inset-bottom); }
.bet-sheet.open { transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform .42s cubic-bezier(.22,.7,.3,1), visibility 0s; }
.sheet-handle { display: flex; justify-content: center; padding: 9px 0 2px; }
.sheet-handle .grip { width: 38px; height: 4px; border-radius: 99px; background: rgba(120,100,60,.3); }
.sheet-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 20px 8px; }
.sheet-top h3 { font-family: 'Marcellus', serif; font-size: 19px; color: var(--ink); white-space: nowrap; }
.sheet-x { width: 32px; height: 32px; border-radius: 9px; border: none; cursor: pointer; color: var(--ink-3); background: rgba(0,0,0,.05); display: grid; place-items: center; }
.sheet-x::before { content: '✕'; font-size: 15px; }
.sheet-body { max-height: 42vh; overflow-y: auto; padding: 0 20px 8px; scrollbar-width: none; }
.sheet-body::-webkit-scrollbar { display: none; }
.sheet-grp { margin-bottom: 14px; }
.sheet-grp-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--gold-700); margin-bottom: 8px; }
/* R16: 2-column grid (number chips | amount). The amount hugs the right edge and
   the chip group wraps freely so a grouped slip never clips. */
.sheet-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.sheet-row .sr-nums { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet-row .sr-chip { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-family: 'Marcellus', serif; font-size: 17px; color: var(--navy-900);
  background: linear-gradient(150deg, var(--gold-300), var(--gold-500)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
/* legacy single-number pill (kept for any other consumer) */
.sheet-row .sr-num { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-family: 'Marcellus', serif; font-size: 17px; color: var(--navy-900);
  background: linear-gradient(150deg, var(--gold-300), var(--gold-500)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.sheet-row .sr-amt { font-weight: 800; font-size: 14px; color: var(--ink); justify-self: end; text-align: right; white-space: nowrap; }
.sheet-row .sr-del { width: 30px; height: 30px; border-radius: 8px; border: none; cursor: pointer; color: var(--red); background: rgba(207,77,77,.1); display: grid; place-items: center; }
.sheet-row .sr-del svg { width: 15px; height: 15px; }
.sheet-foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px 18px; border-top: 1px solid var(--line); }

/* ============================================================
   RESULT CHART (matrix)
   ============================================================ */
.chart-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 16px 2px 12px; font-size: 12px; color: var(--ink-2); }
.chart-legend span { display: flex; align-items: center; gap: 7px; }
.chart-legend .lg { width: 13px; height: 13px; border-radius: 4px; }
.chart-legend .lg.done { background: rgba(47,158,98,.3); border: 1px solid var(--green); }
.chart-legend .lg.pend { background: rgba(207,77,77,.22); border: 1px solid var(--red); }
.chart-legend .auto-ref { margin-left: auto; display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.chart-legend .auto-ref input { width: 16px; height: 16px; accent-color: var(--gold-600); }
.chart-legend .auto-ref b { color: var(--accent-deep); }
.chart-scroll { overflow-x: auto; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--glass-inset), 0 16px 36px -24px rgba(20,34,78,.4); -webkit-overflow-scrolling: touch; }
.chart-scroll::-webkit-scrollbar { height: 6px; }
.chart-scroll::-webkit-scrollbar-thumb { background: rgba(160,140,90,.4); border-radius: 99px; }
.chart-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 460px; background: linear-gradient(158deg, rgba(255,255,255,.7), rgba(255,255,255,.55)); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.chart-table th, .chart-table td { padding: 11px 8px; text-align: center; font-size: 13px; }
.chart-table thead th { font-family: 'Marcellus', serif; font-size: 12.5px; letter-spacing: .3px; color: var(--navy-900); background: var(--accent-grad); position: sticky; top: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.chart-table thead th:first-child { border-top-left-radius: var(--r-md); }
.chart-table thead th:last-child { border-top-right-radius: var(--r-md); }
.chart-table th.date { position: sticky; left: 0; z-index: 2; font-weight: 800; }
.chart-table tbody th.date { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 800; color: var(--ink-2); background: linear-gradient(150deg, #fbf7ec, #efe6d2); border-right: 1px solid var(--line); }
.chart-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.3); }
.chart-table td { border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.chart-table td.done { color: var(--green-d); font-weight: 800; }
.chart-table td.pend { color: var(--red); font-weight: 700; letter-spacing: 1px; opacity: .8; }
/* monthly grid: a day with no declared result renders as an empty cell with a
   faint dash placeholder so the row stays readable. */
.chart-table td.blank { color: var(--ink-faint); }
.chart-table td.blank::after { content: '·'; opacity: .5; }
.chart-notes { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(255,255,255,.6), rgba(255,255,255,.42)); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--glass-inset); }
.chart-notes div { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-2); }
.chart-notes svg { width: 15px; height: 15px; color: var(--gold-700); flex-shrink: 0; }
.chart-notes b { color: var(--ink); }

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.note-list { display: flex; flex-direction: column; gap: 11px; margin-top: 6px; }
.note-item { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 14px; border-radius: var(--r-md);
  background: linear-gradient(158deg, rgba(255,255,255,.74), rgba(255,255,255,.56)); border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-inset), 0 14px 30px -22px rgba(20,34,78,.4); }
.note-item.unread { background: linear-gradient(158deg, rgba(255,251,240,.86), rgba(250,244,230,.7)); border-color: rgba(212,175,55,.4); }
.note-item .ni-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
.note-item .ni-ico svg { width: 20px; height: 20px; }
.ni-ico.win { background: rgba(212,175,55,.18); color: var(--gold-700); }
.ni-ico.gold { background: rgba(212,175,55,.18); color: var(--gold-700); }
.ni-ico.green { background: rgba(47,158,98,.14); color: var(--green-d); }
.ni-ico.blue { background: rgba(58,95,206,.14); color: #3a5fce; }
.note-item .ni-info .t { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.note-item .ni-info .s { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.note-item .ni-info .ni-time { font-size: 10.5px; font-weight: 600; color: var(--gold-700); margin-top: 5px; letter-spacing: .2px; }
.note-item .ni-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(207,77,77,.15); }

/* ============================================================
   MARKET BARS (bettings / winnings list)
   ============================================================ */
.mbar-list { display: flex; flex-direction: column; gap: 11px; margin-top: 2px; }
.mbar { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 15px 16px 15px 18px; border-radius: var(--r-md); cursor: pointer; overflow: hidden;
  background: linear-gradient(158deg, color-mix(in srgb, var(--tint) 16%, rgba(255,255,255,.78)), color-mix(in srgb, var(--tint) 8%, rgba(255,255,255,.6)));
  border: 1px solid rgba(255,255,255,.7); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-inset), 0 16px 36px -24px rgba(20,34,78,.4); transition: transform .14s; }
.mbar:active { transform: scale(.99); }
.mbar-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tint); box-shadow: 0 0 14px -2px var(--tint); }
.mbar-info { display: flex; flex-direction: column; gap: 5px; }
.mbar-name { font-family: 'Marcellus', serif; font-size: 18px; color: var(--ink); letter-spacing: .2px; }
.mbar-time { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.mbar-time svg { width: 13px; height: 13px; color: color-mix(in srgb, var(--tint) 70%, var(--ink-2)); }
.mbar-chev { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-3); background: rgba(255,255,255,.5); }
.mbar-chev svg { width: 17px; height: 17px; }

/* detail table */
.dtl-table { min-width: 520px; }
.dtl-table th { font-size: 11.5px; }
.dtl-table td { font-size: 12.5px; padding: 11px 6px; }
.dt-type { font-size: 11px; font-weight: 700; color: var(--gold-700); }
.dt-num { font-family: 'Marcellus', serif; font-size: 16px; color: var(--ink); }
.dt-win { color: var(--green-d); font-weight: 800; }
.dt-zero { color: var(--ink-faint); }
.dt-st { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.dt-st.win { color: var(--green-d); background: rgba(47,158,98,.14); }
.dt-st.loss { color: var(--red-d); background: rgba(207,77,77,.12); }
.dt-st.pending { color: var(--gold-700); background: rgba(212,175,55,.16); }
.dt-empty { padding: 30px 12px; color: var(--ink-3); font-size: 13px; }

/* ============================================================
   PROFILE additions
   ============================================================ */
.ph-av-wrap { position: relative; flex-shrink: 0; }
.ph-edit { position: absolute; right: -3px; bottom: -3px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--navy-900); cursor: pointer;
  display: grid; place-items: center; color: var(--navy-900); background: var(--accent-grad); box-shadow: 0 4px 10px -3px rgba(199,154,58,.7); }
.ph-edit svg { width: 13px; height: 13px; }
.bell-dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px rgba(255,255,255,.9); }

.acct-card { margin-top: 16px; padding: 6px 18px 16px; }
.acct-field { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.acct-field:last-child { border-bottom: none; }
.acct-field .field-label { margin: 0 0 6px; }
.acct-val { font-size: 15px; font-weight: 600; color: var(--ink); }
.acct-val.ref { display: flex; align-items: center; justify-content: space-between; font-family: 'Marcellus', serif; letter-spacing: 1px; color: var(--accent-deep); }
.copy-btn { height: 30px; padding: 0 14px; border-radius: 9px; border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 11.5px; letter-spacing: .3px; color: var(--navy-900);
  background: var(--accent-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 10px -4px rgba(199,154,58,.6); }
.cta.danger-btn { background: linear-gradient(150deg, #d9605b, #b23a36); color: #fff; box-shadow: 0 14px 30px -14px rgba(178,58,54,.7), inset 0 1px 0 rgba(255,255,255,.2); height: 50px; font-size: 13.5px; }
.cta.ghost { height: 50px; font-size: 13.5px; }
.cta.ghost svg, .cta.danger-btn svg { width: 17px; height: 17px; }

/* ============================================================
   FORGOT / OTP
   ============================================================ */
.auth-head.centered { text-align: center; }
.af-otp { display: flex; flex-direction: column; gap: 15px; margin-top: 14px; }
.af-otp-head { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 2px 0 14px; text-align: center; }
.af-otp-head b { color: var(--ink); white-space: nowrap; }
.af-resend { font-size: 12.5px; color: var(--ink-3); text-align: center; margin-top: 12px; }
.af-resend a { color: var(--gold-700); cursor: pointer; font-weight: 600; }
.otp-boxes { display: flex; gap: 10px; }
.otp-cell { flex: 1; min-width: 0; width: 0; height: 58px; border-radius: 14px; border: 1px solid var(--line); text-align: center; font-family: 'Marcellus', serif; font-size: 24px; color: var(--ink); background: rgba(255,255,255,.65); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.otp-cell:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(212,175,55,.16); background: rgba(255,255,255,.9); }

/* ============================================================
   HOME — notice marquee
   ============================================================ */
.notice-bar { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; padding: 0 14px 0 12px; height: 42px; border-radius: 13px; cursor: pointer; overflow: hidden;
  background: var(--accent-grad); box-shadow: 0 10px 22px -10px rgba(199,154,58,.6), inset 0 1px 0 rgba(255,255,255,.6); }
.notice-bar .nb-ic { display: grid; place-items: center; width: 24px; height: 24px; color: var(--navy-900); flex-shrink: 0; }
.notice-bar .nb-ic svg { width: 18px; height: 18px; }
.nb-track { flex: 1; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.nb-track span { display: inline-block; padding-left: 100%; font-size: 13px; font-weight: 700; color: var(--navy-900); animation: marquee 22s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* Latest Result highlight */
.latest-card { position: relative; overflow: hidden; margin-top: 16px; padding: 18px 20px 20px; border-radius: var(--r-lg); text-align: center;
  background: radial-gradient(70% 90% at 50% -10%, rgba(231,199,100,.4), transparent 60%), linear-gradient(160deg, var(--navy-700), var(--navy-900));
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 30px 60px -28px rgba(11,20,48,.7), inset 0 1px 0 rgba(255,255,255,.18); }
.latest-card .lc-glow { position: absolute; left: 50%; top: -40px; width: 200px; height: 200px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(231,199,100,.4), transparent 70%); pointer-events: none; }
.latest-card .lc-label { position: relative; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-400); }
.latest-card .lc-label svg { width: 15px; height: 15px; }
.latest-card .lc-jodi { position: relative; font-family: 'Marcellus', serif; font-size: 56px; line-height: 1.05; color: var(--gold-300); text-shadow: 0 4px 24px rgba(231,199,100,.5); margin-top: 4px; }
.latest-card .lc-name { position: relative; font-size: 15px; font-weight: 800; letter-spacing: 4px; color: #fff; }
/* R16: result date + time (hh:mm:ss) under the game name on the latest-result card */
.latest-card .lc-dt { position: relative; font-size: 11.5px; font-weight: 600; letter-spacing: .3px; color: rgba(255,255,255,.62); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* market old->new boxes + users badge + fast tag */
/* R24: ONE-LINE card at every width — name+times | Yday→Today | status+action all
   sit in a single 3-column row (the left/name column flexes + truncates via
   min-width:0 + ellipsis). Columns widen a touch on larger screens. */
.market {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "times times times" "left ob right";
  column-gap: 8px; row-gap: 3px;
}
.market .mk-times { grid-area: times; }
.market .mk-left { grid-area: left; min-width: 0; align-self: center; }
.market .mk-ob { grid-area: ob; justify-self: center; } /* centered between the two equal flex columns */
.market .mk-right { grid-area: right; align-items: flex-end; justify-self: end; }
@media (min-width: 460px) {
  .market { column-gap: 12px; }
}
.mk-ob { display: flex; align-items: center; gap: 5px; }
.ob-box { width: 33px; height: 36px; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(150deg, #fdfaf2, #efe6d2); border: 1px solid rgba(255,255,255,.6);
  box-shadow: calc(3px * var(--clay)) calc(4px * var(--clay)) calc(9px * var(--clay)) -5px rgba(140,110,50,.36), inset 0 1px 0 rgba(255,255,255,.9); }
.ob-box .ob-l { font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--ink-faint); }
.ob-box .ob-v { font-family: 'Marcellus', serif; font-size: 15px; line-height: 1; color: var(--ink); }
.ob-box.new { background: var(--accent-grad); border-color: var(--gold-600); box-shadow: 0 8px 16px -6px rgba(199,154,58,.6), inset 0 1px 0 rgba(255,255,255,.6); }
.ob-box.new .ob-l { color: var(--navy-800); }
.ob-box.new .ob-v { color: var(--navy-900); }
.ob-arr { color: var(--ink-faint); display: grid; place-items: center; }
.ob-arr svg { width: 11px; height: 11px; }
.users-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 10px; font-weight: 800; color: var(--green-d); background: rgba(47,158,98,.13); border: 1px solid rgba(47,158,98,.28); white-space: nowrap; }
.users-badge svg { width: 12px; height: 12px; }
.play-btn { min-width: 0; }

/* ============================================================
   MORE hub grid
   ============================================================ */
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 4px; }
.more-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 8px; border-radius: var(--r-md); cursor: pointer; border: 1px solid rgba(255,255,255,.6);
  background: linear-gradient(150deg, #fbf7ec, #efe6d2);
  box-shadow: calc(5px * var(--clay)) calc(6px * var(--clay)) calc(15px * var(--clay)) -7px rgba(140,110,50,.42), inset 0 1px 0 rgba(255,255,255,.9); transition: transform .12s; }
.more-tile:active { transform: scale(.95); }
.more-tile .mt-ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: var(--accent-deep);
  background: linear-gradient(150deg, #fff, #f0e7d4); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 14px -6px rgba(140,110,50,.4); }
.more-tile .mt-ico svg { width: 24px; height: 24px; }
.more-tile .mt-label { font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-align: center; line-height: 1.25; }

/* ============================================================
   STATEMENT table
   ============================================================ */
.st-table { min-width: 460px; }
.st-table th { font-size: 11.5px; }
.st-table td { font-size: 12px; padding: 11px 8px; text-align: left; }
.st-table td.st-date { color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.st-table td.st-desc { color: var(--ink); font-weight: 600; }
.st-table td.st-cr { color: var(--green-d); font-weight: 800; text-align: right; white-space: nowrap; }
.st-table td.st-dr { color: var(--red-d); font-weight: 800; text-align: right; white-space: nowrap; }
.st-table td.st-bal { color: var(--ink-2); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.st-table thead th:nth-child(3), .st-table thead th:nth-child(4) { text-align: right; }

/* ============================================================
   COMMISSION
   ============================================================ */
.comm-hero { position: relative; overflow: hidden; padding: 22px 20px; border-radius: var(--r-lg); text-align: center; color: #fff; margin-top: 4px;
  background: radial-gradient(70% 90% at 50% -10%, rgba(231,199,100,.4), transparent 60%), linear-gradient(160deg, var(--navy-700), var(--navy-900));
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 30px 60px -28px rgba(11,20,48,.7), inset 0 1px 0 rgba(255,255,255,.18); }
.comm-hero .ch-glow { position: absolute; left: 50%; top: -40px; width: 200px; height: 200px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(231,199,100,.35), transparent 70%); pointer-events: none; }
.comm-hero .ch-label { position: relative; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-400); }
.comm-hero .ch-amt { position: relative; font-family: 'Marcellus', serif; font-size: 46px; line-height: 1.1; margin-top: 2px; }
.comm-hero .ch-amt .cur { font-size: 26px; color: var(--gold-400); vertical-align: top; }
.comm-hero .ch-sub { position: relative; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255,255,255,.6); margin-top: 4px; }
.comm-hero .ch-sub svg { width: 14px; height: 14px; }
.comm-hero .ch-code { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border: 1px dashed rgba(231,199,100,.5); }
.comm-hero .ch-code .cc-l { display: block; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.55); }
.comm-hero .ch-code .cc-v { display: block; font-family: 'Marcellus', serif; font-size: 18px; letter-spacing: 1.5px; color: var(--gold-300); margin-top: 2px; }
.comm-hero .ch-code .cc-copy { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 10px; font-size: 12px; font-weight: 800; color: var(--navy-900); background: var(--accent-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); flex-shrink: 0; }
.comm-hero .ch-code .cc-copy svg { width: 14px; height: 14px; }
.comm-list { display: flex; flex-direction: column; gap: 10px; }
.comm-item { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 13px 15px; border-radius: var(--r-md);
  background: linear-gradient(158deg, rgba(255,255,255,.74), rgba(255,255,255,.56)); border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-inset), 0 14px 30px -22px rgba(20,34,78,.4); }
.comm-item .comm-av { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(150deg, var(--navy-600), var(--navy-900)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.comm-item .comm-info .t { font-size: 14px; font-weight: 700; color: var(--ink); }
.comm-item .comm-info .s { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.comm-item .comm-amt { font-weight: 800; font-size: 15px; color: var(--green-d); }

/* ============================================================
   TERMS
   ============================================================ */
.terms-list { display: flex; flex-direction: column; gap: 11px; margin-top: 2px; }
.term-item { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: flex-start; padding: 15px 16px; border-radius: var(--r-md);
  background: linear-gradient(158deg, rgba(255,255,255,.74), rgba(255,255,255,.56)); border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-inset), 0 14px 30px -22px rgba(20,34,78,.4); }
.term-item .term-n { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-family: 'Marcellus', serif; font-size: 15px; color: var(--navy-900); background: var(--accent-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); flex-shrink: 0; }
.term-item .term-t { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.term-item .term-d { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; margin-top: 3px; }

/* ============================================================
   NEW: declare banner, modal sheet content, celebration
   ============================================================ */
.declare-banner { width: 100%; display: flex; align-items: center; gap: 13px; padding: 14px 16px; margin: 2px 0 14px; border-radius: var(--r-md); cursor: pointer; border: none; text-align: left;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900)); color: #fff; box-shadow: 0 16px 34px -16px rgba(11,20,48,.6), inset 0 1px 0 rgba(255,255,255,.16); }
.declare-banner .db-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--navy-900); background: var(--accent-grad); flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.declare-banner .db-ic svg { width: 20px; height: 20px; }
.declare-banner .db-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.declare-banner .db-tx b { font-size: 14px; }
.declare-banner .db-tx span { font-size: 11.5px; color: rgba(255,255,255,.6); }
.declare-banner .db-go { color: var(--gold-400); }
.declare-banner .db-go svg { width: 20px; height: 20px; }

/* declare sheet */
.dec-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-bottom: 14px; }
.dec-hint svg { width: 15px; height: 15px; color: var(--gold-700); flex-shrink: 0; margin-top: 1px; }
.dec-list { display: flex; flex-direction: column; gap: 10px; }
.dec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.55); border: 1px solid var(--line-2); }
.dec-mk { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--ink); }
.dec-dot { width: 9px; height: 9px; border-radius: 50%; }
.dec-inp { width: 70px; height: 46px; border-radius: 12px; border: 1px solid var(--line); text-align: center; font-family: 'Marcellus', serif; font-size: 22px; color: var(--ink); background: rgba(255,255,255,.8); }
.dec-inp:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(212,175,55,.16); }

/* rules sheet */
.rule-list { display: flex; flex-direction: column; gap: 11px; }
.rule-row { padding: 13px 15px; border-radius: 14px; background: rgba(255,255,255,.55); border: 1px solid var(--line-2); }
.rule-h { display: flex; align-items: center; justify-content: space-between; }
.rule-t { font-size: 14px; font-weight: 800; color: var(--ink); }
.rule-rate { font-size: 13px; font-weight: 800; color: var(--green-d); font-variant-numeric: tabular-nums; }
.rule-d { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 5px; }
.rule-note { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 12px; color: var(--gold-700); }
.rule-note svg { width: 16px; height: 16px; flex-shrink: 0; }

/* receipt */
.rcp-top { text-align: center; padding: 6px 0 16px; }
.rcp-tick { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, var(--green), var(--green-d)); box-shadow: 0 12px 26px -8px rgba(47,158,98,.6), inset 0 1px 0 rgba(255,255,255,.4); }
.rcp-tick svg { width: 32px; height: 32px; }
.rcp-h { font-family: 'Marcellus', serif; font-size: 21px; color: var(--ink); }
.rcp-id { font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; letter-spacing: .3px; }
.rcp-list { display: flex; flex-direction: column; gap: 7px; max-height: 150px; overflow-y: auto; scrollbar-width: none; margin-bottom: 14px; }
.rcp-list::-webkit-scrollbar { display: none; }
.rcp-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 9px 13px; border-radius: 11px; background: rgba(255,255,255,.5); border: 1px solid var(--line-2); }
.rcp-num { font-family: 'Marcellus', serif; font-size: 17px; color: var(--ink); min-width: 28px; }
.rcp-type { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.rcp-amt { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.rcp-more { text-align: center; font-size: 12px; color: var(--ink-3); padding: 4px; }
.rcp-summary { padding: 14px 16px; border-radius: 14px; background: linear-gradient(150deg, #fbf7ec, #efe6d2); border: 1px solid rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.rcp-summary > div { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 13px; color: var(--ink-2); }
.rcp-summary > div span { color: var(--ink-3); }
.rcp-summary > div b { color: var(--ink); font-weight: 700; }
.rcp-bal { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 10px !important; }
.rcp-bal b { font-family: 'Marcellus', serif; font-size: 18px; color: var(--accent-deep) !important; }

/* celebration overlay */
.celebrate { position: absolute; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 24px;
  background: rgba(11,20,48,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.celebrate.on { display: flex; animation: fadeIn .3s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.cel-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cft { position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px; opacity: .9; animation: drop linear infinite; }
@keyframes drop { 0% { transform: translateY(-20px) rotate(0); } 100% { transform: translateY(900px) rotate(540deg); } }
.cel-card { position: relative; width: 100%; max-width: 340px; text-align: center; padding: 30px 24px 24px; border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,243,233,.96)); border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 40px 90px -30px rgba(11,20,48,.7), inset 0 1px 0 rgba(255,255,255,1); animation: popUp .5s cubic-bezier(.2,.9,.3,1.3); }
@keyframes popUp { from { transform: scale(.8) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.cel-trophy { width: 76px; height: 76px; border-radius: 24px; margin: 0 auto 14px; display: grid; place-items: center; color: var(--navy-900);
  background: var(--accent-grad); box-shadow: 0 16px 34px -10px rgba(199,154,58,.7), inset 0 1px 0 rgba(255,255,255,.6); }
.cel-trophy svg { width: 40px; height: 40px; }
.cel-k { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-700); }
.cel-amt-big { font-family: 'Marcellus', serif; font-size: 52px; line-height: 1.1; color: var(--ink); margin-top: 2px; }
.cel-amt-big .cur { font-size: 30px; color: var(--accent-deep); vertical-align: top; }
.cel-sub { font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }
.cel-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.cel-row { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 8px 12px; border-radius: 11px; background: rgba(47,158,98,.08); border: 1px solid rgba(47,158,98,.18); }
.cel-num { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-family: 'Marcellus', serif; font-size: 15px; color: var(--navy-900); background: linear-gradient(150deg, var(--gold-300), var(--gold-500)); }
.cel-mk { font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: left; }
.cel-amt { font-weight: 800; font-size: 13.5px; color: var(--green-d); }

/* ============================================================
   NEW: custom amount input
   ============================================================ */
.custom-amt { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 0 16px; height: 52px; border-radius: 14px;
  background: rgba(255,255,255,.62); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.custom-amt:focus-within { border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(212,175,55,.16); background: rgba(255,255,255,.85); }
.ca-cur { font-family: 'Marcellus', serif; font-size: 20px; color: var(--accent-deep); }
.ca-input { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--ink); }
.ca-input:focus { outline: none; }
.ad-hint.err { color: var(--red-d); font-weight: 700; }
.cta.disabled { opacity: .5; pointer-events: none; }

/* ============================================================
   NEW: bank/upi, kyc, edit profile, support, responsible
   ============================================================ */
.vchip { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 800; color: var(--green-d); }
.vchip svg { width: 10px; height: 10px; }
.bk-menu { width: 34px; height: 34px; border-radius: 10px; border: none; cursor: pointer; color: var(--red); background: rgba(207,77,77,.1); display: grid; place-items: center; }
.bk-menu svg { width: 16px; height: 16px; }
.bk-primary { font-size: 11px; font-weight: 700; color: var(--gold-700); margin: -4px 0 4px 14px; }

.kyc-hero { text-align: center; padding: 22px; border-radius: var(--r-lg); margin-bottom: 16px; color: #fff;
  background: radial-gradient(80% 90% at 50% -10%, rgba(231,199,100,.3), transparent 55%), linear-gradient(155deg, var(--navy-700), var(--navy-900));
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 30px 60px -28px rgba(11,20,48,.7); }
.kyc-hero.ok { background: radial-gradient(80% 90% at 50% -10%, rgba(47,158,98,.4), transparent 55%), linear-gradient(155deg, #1f7a49, #145232); }
.kyc-hero .kh-ic { width: 60px; height: 60px; border-radius: 20px; margin: 0 auto 12px; display: grid; place-items: center; color: var(--navy-900); background: var(--accent-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.kyc-hero.ok .kh-ic { background: rgba(255,255,255,.16); color: #fff; }
.kyc-hero .kh-ic svg { width: 32px; height: 32px; }
.kyc-hero .kh-status { font-family: 'Marcellus', serif; font-size: 24px; }
.kyc-hero .kh-sub { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 4px; }
.kyc-steps { display: flex; flex-direction: column; gap: 10px; }
.kyc-step { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 14px; border-radius: var(--r-md);
  background: linear-gradient(158deg, rgba(255,255,255,.74), rgba(255,255,255,.56)); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--glass-inset); }
.kyc-step .ks-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--ink-3); background: rgba(0,0,0,.04); }
.kyc-step.done .ks-ic { color: #fff; background: linear-gradient(150deg, var(--green), var(--green-d)); }
.kyc-step .ks-ic svg { width: 20px; height: 20px; }
.kyc-step .ks-info .t { font-size: 14px; font-weight: 700; color: var(--ink); }
.kyc-step .ks-info .s { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.ks-badge { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--green-d); background: rgba(47,158,98,.14); }
.ks-badge svg { width: 15px; height: 15px; }
.ks-btn { height: 34px; padding: 0 16px; border-radius: 10px; border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 12.5px; color: var(--navy-900); background: var(--accent-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }

.ep-av { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
.ep-cam { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.7); cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 12.5px; color: var(--ink-2); background: linear-gradient(150deg, rgba(255,255,255,.8), rgba(255,255,255,.55)); box-shadow: var(--glass-inset); }
.ep-cam svg { width: 15px; height: 15px; color: var(--accent-deep); }
.ep-locked { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-faint); margin: 6px 0 0 2px; }
.ep-locked svg { width: 12px; height: 12px; }
.glass-input:disabled { opacity: .7; }

/* support chat */
.chat-feed { display: flex; flex-direction: column; gap: 12px; padding: 8px 0 12px; max-height: 50vh; overflow-y: auto; scrollbar-width: none; }
.chat-feed::-webkit-scrollbar { display: none; }
.chat-row { display: flex; gap: 9px; align-items: flex-end; }
.chat-row.me { justify-content: flex-end; }
.chat-av { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--navy-900); background: var(--accent-grad); flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.chat-av svg { width: 17px; height: 17px; }
.chat-bub { max-width: 76%; padding: 11px 14px 18px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; position: relative; }
.chat-bub.bot { background: linear-gradient(158deg, rgba(255,255,255,.82), rgba(255,255,255,.64)); border: 1px solid rgba(255,255,255,.7); color: var(--ink); border-bottom-left-radius: 5px; box-shadow: var(--glass-inset); }
.chat-bub.me { background: var(--accent-grad); color: var(--navy-900); border-bottom-right-radius: 5px; box-shadow: 0 8px 18px -8px rgba(199,154,58,.5); }
.chat-time { position: absolute; right: 12px; bottom: 5px; font-size: 9px; opacity: .55; font-weight: 600; }
.chat-quicks { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; }
.chat-quicks::-webkit-scrollbar { display: none; }
.chat-quick { flex-shrink: 0; height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.7); cursor: pointer; font-family: inherit; font-weight: 700; font-size: 12px; color: var(--ink-2); background: rgba(255,255,255,.55); white-space: nowrap; }
.chat-input { display: flex; gap: 9px; align-items: center; }
.chat-input .glass-input { flex: 1; }
.chat-send { width: 50px; height: 50px; border-radius: 14px; border: none; cursor: pointer; color: var(--navy-900); background: var(--accent-grad); display: grid; place-items: center; box-shadow: 0 10px 22px -10px rgba(199,154,58,.6), inset 0 1px 0 rgba(255,255,255,.6); flex-shrink: 0; }
.chat-send svg { width: 20px; height: 20px; }

/* support — direct contact action buttons (WhatsApp / Telegram / Call Now) */
.support-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.support-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 16px; cursor: pointer; text-align: left; border-radius: var(--r-md);
  background: linear-gradient(158deg, rgba(255,255,255,.82), rgba(255,255,255,.62)); border: 1px solid rgba(255,255,255,.78);
  box-shadow: var(--glass-inset), 0 14px 30px -22px rgba(20,34,78,.4); transition: transform .14s, box-shadow .18s; }
.support-btn:active { transform: scale(.985); }
.support-btn .sb-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--navy-900); background: var(--accent-grad); flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.support-btn .sb-ico svg { width: 22px; height: 22px; }
.support-btn .sb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.support-btn .sb-t { font-size: 15px; font-weight: 800; color: var(--ink); }
.support-btn .sb-s { font-size: 12px; color: var(--ink-3); }
.support-btn .sb-chev { color: var(--ink-3); flex-shrink: 0; display: grid; place-items: center; }
.support-btn .sb-chev svg { width: 18px; height: 18px; }

/* responsible gaming */
.rg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rg-t { font-size: 15px; font-weight: 800; color: var(--ink); }
.rg-s { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.switch { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.sw-track { position: absolute; inset: 0; border-radius: 99px; background: var(--line); transition: .2s; box-shadow: inset 0 1px 3px rgba(0,0,0,.12); }
.sw-track::before { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; left: 3px; top: 3px; background: #fff; transition: .2s; box-shadow: 0 2px 5px rgba(0,0,0,.25); }
.switch input:checked + .sw-track { background: var(--accent-grad); }
.switch input:checked + .sw-track::before { transform: translateX(20px); }
.rg-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rg-opt { height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,.7); cursor: pointer; font-family: inherit; font-weight: 700; font-size: 12px; color: var(--ink-2); background: rgba(255,255,255,.55); }
.rg-opt.on { color: var(--navy-900); background: var(--accent-grad); border-color: var(--gold-600); box-shadow: 0 6px 14px -6px rgba(199,154,58,.5); }
.rg-help { display: flex; gap: 9px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md); background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.7); font-size: 12px; color: var(--ink-2); line-height: 1.55; }
.rg-help svg { width: 16px; height: 16px; color: var(--gold-700); flex-shrink: 0; margin-top: 1px; }

/* withdrawal tracking */
.wd-card { padding: 15px 16px; border-radius: var(--r-md); margin-bottom: 12px; background: linear-gradient(158deg, rgba(255,255,255,.74), rgba(255,255,255,.56)); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--glass-inset), 0 14px 30px -22px rgba(20,34,78,.4); }
.wd-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.wd-amt { font-family: 'Marcellus', serif; font-size: 22px; color: var(--ink); }
.wd-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.wd-badge { height: 24px; padding: 0 11px; border-radius: 99px; display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.wd-badge.requested { color: var(--gold-700); background: rgba(212,175,55,.16); }
.wd-badge.processing { color: #3a5fce; background: rgba(58,95,206,.13); }
.wd-badge.done { color: var(--green-d); background: rgba(47,158,98,.14); }
.wt-pipe { display: flex; align-items: center; }
.wt-step { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.wt-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--line); color: #fff; }
.wt-dot svg { width: 14px; height: 14px; }
.wt-step.on .wt-dot { background: linear-gradient(150deg, var(--green), var(--green-d)); }
.wt-lbl { font-size: 10px; font-weight: 700; color: var(--ink-3); }
.wt-step.on .wt-lbl { color: var(--ink); }
.wt-line { flex: 1; height: 2px; background: var(--line); margin: 0 4px 18px; }

/* lang toggle */
.lang-toggle { width: 44px; height: 40px; border-radius: 13px; border: 1px solid rgba(255,255,255,.75); cursor: pointer; font-family: 'Marcellus', serif; font-size: 15px; color: var(--accent-deep);
  background: linear-gradient(150deg, rgba(255,255,255,.8), rgba(255,255,255,.5)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--glass-inset); flex-shrink: 0; }

/* game subbar (balance + rate) */
.game-subbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 6px; }
.gsb-rate { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--green-d); }
.gsb-rate svg { width: 14px; height: 14px; }

/* onboarding */
.ob-wrap { min-height: calc(100dvh - 24px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 26px; position: relative; }
.ob-skip { position: absolute; top: 18px; right: 6px; border: none; background: transparent; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; color: var(--ink-3); }
.ob-art { width: 130px; height: 130px; border-radius: 40px; display: grid; place-items: center; color: var(--navy-900); margin-bottom: 28px;
  background: var(--accent-grad); box-shadow: 0 30px 60px -20px rgba(199,154,58,.7), inset 0 2px 0 rgba(255,255,255,.6); animation: popUp .5s cubic-bezier(.2,.9,.3,1.3); }
.ob-art svg { width: 64px; height: 64px; }
.ob-dots { display: flex; gap: 7px; margin-bottom: 18px; }
.ob-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--line); transition: all .3s; }
.ob-dots i.on { width: 22px; background: var(--accent-grad); }
.ob-t { font-family: 'Marcellus', serif; font-size: 28px; color: var(--ink); }
.ob-d { font-size: 14px; color: var(--ink-3); line-height: 1.6; margin: 10px 0 30px; max-width: 320px; }
.ob-wrap .cta { max-width: 320px; }

/* ============================================================
   NEW: account selection rows + chooser
   ============================================================ */
.acct-select { display: flex; flex-direction: column; gap: 10px; }
.acct-row { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 14px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(158deg, rgba(255,255,255,.72), rgba(255,255,255,.54)); border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--glass-inset), 0 12px 26px -22px rgba(20,34,78,.4); transition: border-color .15s, box-shadow .15s; }
.acct-row .pay-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(150deg, #fff, #f0e7d4); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 14px -6px rgba(140,110,50,.4); color: var(--accent-deep); }
.acct-row .pay-ico svg { width: 22px; height: 22px; }
.acct-row .pay-info .t { font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.acct-row .pay-info .s { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.acct-row .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex-shrink: 0; }
.acct-row.on { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(212,175,55,.16), var(--glass-inset); }
.acct-row.on .radio { border-color: var(--gold-500); }
.acct-row.on .radio::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-grad); }
.acct-empty { padding: 16px; border-radius: 14px; background: rgba(255,255,255,.5); border: 1px dashed var(--line); font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 9px; }
.acct-empty svg { width: 16px; height: 16px; color: var(--gold-700); flex-shrink: 0; }
.vchip.pend { color: var(--gold-700); }
.vchip.pend::before { content: '⏱ '; }

.chooser { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choose-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px; border-radius: var(--r-md); cursor: pointer; border: 1px solid rgba(255,255,255,.7);
  background: linear-gradient(150deg, #fbf7ec, #efe6d2); box-shadow: calc(5px*var(--clay)) calc(6px*var(--clay)) calc(14px*var(--clay)) -7px rgba(140,110,50,.4), inset 0 1px 0 rgba(255,255,255,.9); transition: transform .12s; }
.choose-tile:active { transform: scale(.96); }
.choose-tile .ct-ic { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; color: var(--accent-deep); background: linear-gradient(150deg, #fff, #f0e7d4); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 14px -6px rgba(140,110,50,.4); }
.choose-tile .ct-ic svg { width: 26px; height: 26px; }
.choose-tile .ct-t { font-size: 14px; font-weight: 800; color: var(--ink); }
.choose-tile .ct-s { font-size: 11px; color: var(--ink-3); }

/* ============================================================
   Fast Results — draggable FAB
   ============================================================ */
.fast-fab { position: absolute; z-index: 44; display: none; width: 62px; height: 62px; border-radius: 50%; cursor: grab; border: 2px solid rgba(255,255,255,.85); padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 1px; touch-action: none; user-select: none;
  color: var(--navy-900); background: radial-gradient(120% 120% at 30% 20%, #f0dca6, var(--gold-500) 65%, var(--gold-600));
  box-shadow: 0 14px 30px -8px rgba(199,154,58,.8), 0 4px 10px -2px rgba(11,20,48,.3), inset 0 1px 0 rgba(255,255,255,.7); transition: box-shadow .2s, transform .1s; }
.fast-fab.show { display: flex; }
.fast-fab:active { cursor: grabbing; }
.fast-fab.dragging { transform: scale(1.08); box-shadow: 0 22px 44px -10px rgba(199,154,58,.9), 0 6px 14px -2px rgba(11,20,48,.4), inset 0 1px 0 rgba(255,255,255,.8); }
.fast-fab .ff-ic { display: grid; place-items: center; }
.fast-fab .ff-ic svg { width: 21px; height: 21px; }
.fast-fab .ff-lbl { font-size: 8px; font-weight: 800; line-height: 1; text-align: center; letter-spacing: .2px; text-transform: uppercase; }
.fast-fab .ff-pulse { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--gold-500); animation: ffpulse 2s ease-out infinite; pointer-events: none; }
@keyframes ffpulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fast-fab .ff-pulse { animation: none; opacity: 0; } }

/* ============================================================
   Loading overlay + spinners
   ============================================================ */
.app-loader { position: absolute; inset: 0; z-index: 92; display: none; align-items: center; justify-content: center;
  background: rgba(244,238,225,.55); -webkit-backdrop-filter: blur(7px) saturate(150%); backdrop-filter: blur(7px) saturate(150%); animation: fadeIn .2s; }
.app-loader.on { display: flex; }
.loader-card { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 26px 32px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,243,233,.92)); border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 30px 70px -24px rgba(11,20,48,.5), inset 0 1px 0 rgba(255,255,255,1); animation: popUp .35s cubic-bezier(.2,.9,.3,1.2); }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(199,154,58,.2); border-top-color: var(--gold-500); animation: spin .8s linear infinite; }
.loader-msg { font-size: 13.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* inline button spinner */
.btn-spin { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(20,34,78,.25); border-top-color: var(--navy-900); animation: spin .7s linear infinite; }
.cta.navy .btn-spin, .declare-banner .btn-spin { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
.btn-loading { pointer-events: none; opacity: .92; }

/* ============ KEDARBOOK-style deposit payment page ============ */
.kb-demo { margin: 8px 0 0; padding: 10px 13px; border-radius: 12px; background: rgba(244,196,48,.16); border: 1px solid rgba(244,196,48,.5); font-size: 12px; color: #5b5343; line-height: 1.4; }
.kb-pay { margin-top: 12px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 14px 34px -16px rgba(11,20,48,.4); border: 1px solid rgba(0,0,0,.06); }
.kb-head { background: linear-gradient(180deg, #21317e 0%, #1a2660 100%); color: #fff; padding: 16px 16px 22px; border-radius: 0 0 26px 26px; }
.kb-brand { text-align: center; font-family: 'Marcellus', serif; font-size: 26px; letter-spacing: .5px; color: #f5b324; font-weight: 700; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.kb-amtrow { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.kb-amt span { opacity: .85; margin-right: 6px; font-size: 14px; } .kb-amt b { font-size: 22px; font-weight: 800; }
.kb-timer { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; opacity: .95; }
.kb-apps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 6px; }
.kb-app { width: 26px; height: 26px; border-radius: 50%; display: inline-block; box-shadow: 0 2px 5px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3); }
.kb-handle { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 8px 0 4px; font-size: 16px; font-weight: 800; }
.kb-scan { text-align: center; font-size: 12.5px; font-weight: 700; opacity: .9; margin-bottom: 4px; }
.kb-qr { background: #fff; border-radius: 14px; padding: 10px; width: 200px; margin: 8px auto 6px; text-align: center; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }
.kb-qr-top { color: #444; font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.kb-qr img { width: 100%; height: auto; display: block; border-radius: 6px; }
.kb-qrnote { text-align: center; font-size: 11px; font-weight: 700; color: #ffe9b0; opacity: .9; margin-top: 2px; }
.kb-limits { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-top: 8px; opacity: .92; }
.kb-instr { text-align: center; font-size: 12px; line-height: 1.45; margin: 12px 4px 0; opacity: .92; }
.kb-bank { position: relative; background: #fff; color: #1a1a1a; border-left: 5px solid #f5a623; border-radius: 12px; padding: 14px 16px; margin: 14px 0 2px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); }
.kb-copyall { position: absolute; top: 12px; right: 12px; background: none; border: none; color: #1a2660; cursor: pointer; padding: 2px; }
.kb-bf { margin-top: 12px; } .kb-bf:first-of-type { margin-top: 0; }
.kb-bf label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; color: #8a8a8a; text-transform: uppercase; margin-bottom: 2px; }
.kb-bv { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #333; word-break: break-all; }
.kb-cp { background: none; border: none; color: #1a2660; cursor: pointer; padding: 2px; display: inline-flex; }
.kb-cp.light { color: #fff; opacity: .9; }
.kb-body { padding: 16px; }
.kb-input { width: 100%; box-sizing: border-box; height: 46px; border: 1px solid #cfd4e6; border-radius: 9px; padding: 0 14px; font-size: 14px; color: #222; outline: none; background: #fff; }
.kb-input:focus { border-color: #21317e; box-shadow: 0 0 0 3px rgba(33,49,126,.12); }
.kb-file { position: relative; display: flex; align-items: center; height: 46px; border: 1px solid #cfd4e6; border-radius: 9px; padding: 0 14px; margin-top: 12px; cursor: pointer; color: #8a8fa6; background: #f6f7fb; }
.kb-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kb-file-ph { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-clip { color: #21317e; }
.kb-bonus { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 12px 0; font-size: 13px; font-weight: 700; color: #222; cursor: pointer; }
.kb-bonus input { width: 16px; height: 16px; accent-color: #21317e; }
.kb-submit { width: 100%; height: 48px; border: none; border-radius: 9px; background: linear-gradient(180deg, #2a3a8c, #1a2660); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: 1px; cursor: pointer; box-shadow: 0 10px 22px -10px rgba(26,38,96,.7); }
.kb-submit:active { transform: translateY(1px); }
.kb-submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: grayscale(.3); }
.kb-note { font-size: 10.5px; color: #d23; line-height: 1.45; margin-top: 12px; }
.kb-note b { font-weight: 800; }
.kb-warn { text-align: center; font-size: 12px; font-weight: 700; color: #d23; margin-top: 10px; line-height: 1.4; }
.kb-empty { text-align: center; padding: 16px; font-size: 13px; opacity: .85; }

/* ============ Activity (Wallet → Filter) page ============ */
.act-filters { display: flex; flex-direction: column; gap: 9px; margin: 2px 0 14px; }
.act-frow { display: flex; align-items: center; gap: 10px; }
.act-fl { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-3); width: 50px; flex-shrink: 0; }
.seg-tabs.flex { flex: 1; margin: 0; overflow-x: auto; scrollbar-width: none; }
.seg-tabs.flex::-webkit-scrollbar { display: none; }
.act-list { display: flex; flex-direction: column; gap: 9px; }
.act-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(158deg, rgba(255,255,255,.74), rgba(255,255,255,.54)); border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--glass-inset), 0 12px 26px -20px rgba(20,34,78,.4); }
.act-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.act-ico svg { width: 18px; height: 18px; }
.act-ico.cr { background: rgba(47,158,98,.14); color: var(--green-d); }
.act-ico.dr { background: rgba(207,77,77,.13); color: var(--red-d); }
.act-ico.bonus { background: rgba(199,154,58,.16); color: var(--gold-700); }
.act-info { flex: 1; min-width: 0; }
.act-t { font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.3; }
.act-s { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; word-break: break-word; }
.act-amt { font-weight: 800; font-size: 14px; white-space: nowrap; flex-shrink: 0; }
.act-amt.cr { color: var(--green-d); }
.act-amt.dr { color: var(--red-d); }
.act-badge { font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.st-pend { background: rgba(214,160,40,.2); color: #936a10; }
.st-ok { background: rgba(47,158,98,.16); color: var(--green-d); }
.st-rej { background: rgba(207,77,77,.15); color: var(--red-d); }
.st-done { background: rgba(54,86,170,.13); color: #3a5aa8; }
.act-empty { text-align: center; padding: 30px 16px; font-size: 13px; color: var(--ink-3); }

/* ============================================================
   Round 8 — results banner, market card v2, quick chips, chat,
   docked Fast-Result button
   ============================================================ */

/* 5.1 results reference banner */
.results-banner { position: relative; margin: 12px 0 4px; padding: 16px 18px 14px; border-radius: 18px; cursor: pointer; text-align: center;
  background: linear-gradient(155deg, #11183a, #1d2742 58%, #2a3658); color: #f5edda; overflow: hidden;
  box-shadow: 0 14px 30px -12px rgba(11,20,48,.55), inset 0 1px 0 rgba(255,255,255,.08); }
.results-banner .rb-crown { color: #f4c430; margin-bottom: 2px; }
.results-banner .rb-crown svg { width: 22px; height: 22px; }
.results-banner .rb-name { font-family: 'Marcellus', serif; font-size: 19px; letter-spacing: .8px; color: #f4c430; }
.results-banner .rb-sub { font-size: 12.5px; margin-top: 3px; color: #e8ddc2; }
.results-banner .rb-upd { font-size: 11px; margin-top: 6px; color: #b9ad8d; letter-spacing: .3px; }
.results-banner .rb-upd b { color: #f0e6cb; }

/* 5.2–5.4 market card v2 */
.mk-chart { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--gold-700, #b8860b); cursor: pointer; }
.mk-chart svg { width: 12px; height: 12px; }
.play-btn.lg { display: inline-flex; align-items: center; gap: 5px; min-width: 60px; height: 30px; padding: 0 11px; border-radius: 10px; font-weight: 800; font-size: 11px; }
.play-btn.lg svg { width: 12px; height: 12px; }
/* T24: bolder "Play Now" CTA on LIVE markets — larger hit area, heavier weight
   and a soft pulsing gold glow that draws the eye to the live board. */
.play-btn.lg.live-cta { min-width: 78px; height: 30px; padding: 0 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .3px;
  animation: playGlow 1.8s ease-in-out infinite; }
.play-btn.lg.live-cta svg { width: 13px; height: 13px; }
@keyframes playGlow {
  0%   { box-shadow: 0 8px 18px -8px rgba(199,154,58,.7),  inset 0 1px 0 rgba(255,255,255,.65), 0 0 0 0 rgba(199,154,58,.5); }
  70%  { box-shadow: 0 10px 22px -8px rgba(199,154,58,.85), inset 0 1px 0 rgba(255,255,255,.65), 0 0 0 8px rgba(199,154,58,0); }
  100% { box-shadow: 0 8px 18px -8px rgba(199,154,58,.7),  inset 0 1px 0 rgba(255,255,255,.65), 0 0 0 0 rgba(199,154,58,0); }
}
@media (prefers-reduced-motion: reduce) { .play-btn.lg.live-cta { animation: none; } }

/* 6.1 quick auto-select amount chips */
.qa-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.qa-row::-webkit-scrollbar { display: none; }
.qa-chip { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1.5px solid rgba(178,150,82,.45); background: rgba(255,255,255,.65); color: #5b5343; font-weight: 800; font-size: 13px; cursor: pointer; transition: all .15s; }
.qa-chip.on { background: linear-gradient(150deg, #f4c430, #d9a416); border-color: #c9971f; color: #2a2107; box-shadow: 0 6px 14px -6px rgba(201,151,31,.8); }
.coin-line { display: flex; align-items: center; gap: 8px; }

/* 2.1 Fast Result docked above the nav (no dragging, no banner overlap) */
.fast-fab.docked { left: auto !important; top: auto !important; right: 10px !important; bottom: calc(96px + env(safe-area-inset-bottom)) !important; cursor: pointer; width: 56px; height: 56px; }

/* 8.2 global chat */
.chat-room { display: flex; flex-direction: column; height: calc(100vh - 250px); min-height: 320px; border-radius: 18px; overflow: hidden;
  background: rgba(255,255,255,.55); border: 1px solid rgba(178,150,82,.28); box-shadow: 0 14px 34px -18px rgba(11,20,48,.35); }
.chat-list { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-empty { margin: auto; text-align: center; color: var(--ink-3, #8b7f63); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chat-empty svg { width: 26px; height: 26px; opacity: .6; }
.chat-msg { display: flex; }
.chat-msg.mine { justify-content: flex-end; }
.cm-bubble { max-width: 78%; padding: 8px 12px 6px; border-radius: 14px 14px 14px 4px; background: #fff; border: 1px solid rgba(178,150,82,.22); box-shadow: 0 3px 10px -6px rgba(11,20,48,.25); }
.chat-msg.mine .cm-bubble { border-radius: 14px 14px 4px 14px; background: linear-gradient(160deg, #fdf3d3, #f7e3a6); border-color: rgba(201,151,31,.4); }
.cm-user { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; color: var(--gold-700, #b8860b); margin-bottom: 2px; text-transform: uppercase; }
.cm-body { font-size: 13.5px; line-height: 1.45; color: #2c2718; word-break: break-word; white-space: pre-wrap; }
.cm-time { font-size: 9.5px; color: #a39777; text-align: right; margin-top: 3px; }
.chat-compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid rgba(178,150,82,.25); background: rgba(255,255,255,.7); }
.chat-compose input { flex: 1; height: 44px; border-radius: 12px; border: 1.5px solid rgba(178,150,82,.4); background: #fff; padding: 0 14px; font-size: 14px; color: #2c2718; outline: none; }
.chat-compose input:focus { border-color: #c9971f; }
.chat-send { width: 44px; height: 44px; border-radius: 12px; border: none; cursor: pointer; display: grid; place-items: center; color: #2a2107;
  background: linear-gradient(150deg, #f4c430, #d9a416); box-shadow: 0 6px 14px -6px rgba(201,151,31,.8); }
.chat-send svg { width: 18px; height: 18px; }
.chat-send:active { transform: scale(.94); }
.chat-muted { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 12.5px; color: #8a5d2e; background: rgba(244,196,48,.18); border-top: 1px solid rgba(201,151,31,.35); }
.chat-muted svg { width: 15px; height: 15px; flex-shrink: 0; }
/* coin-bar v2: chips row stacked above the manual amount line (overrides the
   legacy single-row flex layout) */
.coin-bar { flex-direction: column; align-items: stretch; gap: 6px; overflow: visible; }
.chat-muted[hidden] { display: none !important; }