:root {
  color-scheme: dark;
  --bg: #060402;
  --bg-2: #0c0805;
  --surface: #130e0a;
  --surface-2: #1b130d;
  --surface-3: #251911;
  --line: rgba(255,255,255,.075);
  --line-2: rgba(255,255,255,.12);
  --text: #f3f3ee;
  --muted: #8d8d97;
  --muted-2: #9a9aa6;
  --lime: #f3b63f;
  --lime-2: #d9901f;
  --lime-deep: #9d5b0c;
  --lime-ink: #1b0f03;
  --lime-glow: rgba(243,182,63,.35);
  --violet: #b97822;
  --violet-2: #f2c45f;
  --violet-glow: rgba(185,120,34,.4);
  --gold: #f5c542;
  --silver: #c9ccd6;
  --bronze: #d08a4b;
  --danger: #ff5c7a;
  --success: #6ee7a8;
  --radius: 18px;
  --e-2: 0 20px 50px rgba(0,0,0,.35);
  --ink-2: #c9c9cf;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font-body: Manrope, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Jura, Manrope, ui-sans-serif, sans-serif;
  --font-num: "Chakra Petch", Jura, ui-sans-serif, sans-serif;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100vw; overflow-x: hidden; background: var(--bg); }
body { width: 100%; max-width: 100vw; margin: 0; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; background: var(--bg); }
button, input { font: inherit; }
button, a { -webkit-user-select: none; user-select: none; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.is-hidden { display: none !important; }
.tap { transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .16s ease, background-color .16s ease, border-color .16s ease; }
.tap:active { transform: scale(.96); transition-duration: .07s; }
/* Pressed feedback for every interactive control (touch has no hover) */
button:not(:disabled):active, .lobby-cat:active, .classic-back:active, .hero-arrow:active { filter: brightness(1.12); }
/* Keyboard focus: brand ring instead of the UA blue */
:focus-visible { outline: 2px solid rgba(243,182,63,.7); outline-offset: 2px; }
/* Форму кольца задаёт радиус самого элемента: общий border-radius:4px делал
   прямоугольную рамку вокруг круглой центральной кнопки. */
.nav-center:focus-visible { border-radius: 50%; outline-offset: 6px; }
.balance-pill:focus-visible, .lobby-cat:focus-visible, .chip:focus-visible, .hero-cta:focus-visible, .jackpot-play:focus-visible { border-radius: 999px; }
.avatar-wrap:focus-visible, .p-avatar:focus-visible { border-radius: 50%; }
.btn-primary:focus-visible, .classic-play:focus-visible, .streak-claim:focus-visible, .achievement-claim:focus-visible, .jackpot-play:focus-visible { outline-color: #fff; }
button, a, .tap, .chip, .lobby-cat { touch-action: manipulation; }
input:focus-visible { outline-offset: 0; }

.ambient { position: fixed; pointer-events: none; filter: blur(80px); opacity: .18; z-index: 0; border-radius: 50%; }
.ambient-a { width: 300px; height: 300px; top: -140px; right: -120px; background: var(--violet); }
.ambient-b { width: 220px; height: 220px; bottom: 18%; left: -140px; background: var(--lime); opacity: .06; }

/* ---------- Typography helpers ---------- */
.eyebrow { display: block; color: var(--muted); font-family: var(--font-display); font-size: 10px; line-height: 1.2; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow.accent { color: var(--lime); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 12px; }
/* The heading takes the slack so every control -- the "see all" link and the
   injected shelf arrows -- stays grouped against the right edge instead of
   being scattered across a wide desktop header by space-between. */
.section-head > h2 { flex: none; }
.section-head h2 { margin: 0 auto 0 0; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.section-head h2 .count { margin-left: 6px; color: var(--muted-2); font-style: normal; font-size: 12px; letter-spacing: 0; }
.text-button { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; border: 0; background: transparent; color: var(--lime); cursor: pointer; padding: 8px 4px; font-size: 12px; font-weight: 700; }
.text-button .i8 { font-size: 12px; }
.text-button .short { display: none; }
.icon-button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; font-size: 16px; }
.subtle { color: var(--muted); font-size: 12px; }
.block { margin-top: 26px; }
.footnote { margin: 22px 4px 0; color: var(--muted-2); font-size: 10px; text-align: center; }
.coin-mark { display: inline-block; width: 16px; height: 16px; flex: none; border: 2px solid var(--lime); transform: rotate(45deg) scale(.82); border-radius: 3px; position: relative; }
.coin-mark::after { content: ""; position: absolute; inset: 3px; background: var(--lime); border-radius: 1px; }
.coin-mark.big { width: 30px; height: 30px; border-width: 3px; border-radius: 5px; }
.coin-mark.big::after { inset: 6px; border-radius: 2px; }

/* ---------- Boot ---------- */
.boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; z-index: 100; background: radial-gradient(circle at 50% 30%, rgba(185,120,34,.14), transparent 45%), var(--bg); }
.brand-lockup { display: grid; justify-items: center; gap: 14px; }
.brand-lockup-mark { width: 100%; height: auto; max-width: 132px; filter: drop-shadow(0 10px 26px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(243,182,63,.22)); }
.brand-lockup-word { display: block; width: 100%; height: auto; }
.brand-lockup-tag  { display: block; width: 86%; height: auto; opacity: .82; }
.boot-logo { width: min(64vw, 250px); animation: bootPulse 2s ease-in-out infinite; }
@keyframes bootPulse { 50% { transform: scale(1.03); opacity: .86; } }   /* opacity, not a per-frame filter on a 146 KB PNG */
.boot-bar { width: 140px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.08); }
.boot-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--lime); animation: bootBar 1.3s ease-in-out infinite; }
@keyframes bootBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
.boot span { color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.boot-retry { min-height: 42px; padding: 0 22px; border: 0; border-radius: 10px; color: var(--lime-ink); background: var(--lime); font-weight: 800; cursor: pointer; }

/* ---------- Gate (login) ---------- */
.gate { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; background: var(--bg); }
.gate-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 18%, rgba(185,120,34,.22), transparent 42%), radial-gradient(circle at 80% 90%, rgba(243,182,63,.08), transparent 40%); }
.gate-card { position: relative; width: min(100%, 400px); padding: 26px 22px 22px; border: 1px solid var(--line-2); border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.gate-lang { position: absolute; top: 14px; right: 14px; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.gate-lang button, .lang-switch button { min-width: 40px; min-height: 30px; padding: 5px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-family: var(--font-display); font-size: 11px; font-weight: 700; cursor: pointer; }
.gate-lang button.active, .lang-switch button.active { background: var(--lime); color: var(--lime-ink); }
.gate-logo { width: min(68%, 232px); margin: 6px auto 22px; }
.gate-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.05); }
.gate-tabs button { min-height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.gate-tabs button.active { background: rgba(243,182,63,.12); color: var(--lime); box-shadow: inset 0 0 0 1px rgba(243,182,63,.4), inset 0 -2px 0 rgba(243,182,63,.7); }
.gate-form { margin-top: 12px; }
.gate-form .btn { margin-top: 6px; min-height: 50px; }
/* Кнопка дизейблится только на время запроса, поэтому спиннер точен без JS. */
.gate-form .btn-primary:disabled { position: relative; opacity: 1; color: transparent; filter: saturate(.75) brightness(.92); }
.gate-form .btn-primary:disabled::before { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(26,13,3,.28); border-top-color: #1a0d03; animation: cardSpin .7s linear infinite; }
.gate-form .btn-primary:disabled::after { display: none; }
@media (prefers-reduced-motion: reduce) { .gate-form .btn-primary:disabled::before { animation: none; border-top-color: rgba(26,13,3,.6); } }
.gate-note { margin: 16px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; text-align: center; text-wrap: balance; }
.gate-form input:focus { border-color: rgba(243,182,63,.5); caret-color: var(--lime); }
.gate-form input::placeholder { color: rgba(255,255,255,.5); }
.gate-verify-copy { margin: 4px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }
.gate-error { display: none; margin: 10px 0 0; padding: 9px 12px; border: 1px solid rgba(255,92,122,.35); border-radius: 10px; background: rgba(255,92,122,.08); color: #ff9db0; font-size: 12px; line-height: 1.45; }
.gate-error.show { display: block; }
.gate-form input[aria-invalid="true"] { border-color: rgba(255,92,122,.6); }
.gate-link { display: block; width: 100%; margin-top: 10px; padding: 8px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-align: center; cursor: pointer; }
@media (hover:hover) { .gate-link:hover { color: var(--text); } }

/* ---------- Support entry points ---------- */
/* Floating help button - MOBILE ONLY (the desktop rail carries its own pill).
   Fades out while the page scrolls so it never fights the content, and the
   profile screen hides it entirely (its list already leads with support). */
.support-fab { position: fixed; z-index: 70; right: 12px; bottom: calc(84px + var(--safe-bottom)); display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(243,182,63,.35); border-radius: 50%; background: linear-gradient(180deg, #202a08, #10140a); color: var(--lime); text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 20px rgba(243,182,63,.14); transition: opacity .25s, transform .25s; }
.support-fab .i8 { font-size: 21px; }
.support-fab:active { transform: scale(.94); }
.support-fab.scrolling { opacity: 0; transform: translateY(8px); pointer-events: none; }
.support-fab { display: none !important; }
@media (min-width: 1024px) { .support-fab { display: none; } }
@media (max-width: 1023px) { .app { padding-bottom: calc(110px + var(--safe-bottom)); } }
/* Profile: the support row leads the settings list and carries the accent */
.settings-row.support-row { background: linear-gradient(90deg, rgba(243,182,63,.09), transparent 65%); text-decoration: none; }
.settings-row.support-row > .i8:first-child, .settings-row.support-row b { color: var(--lime); }
/* Desktop rail: a full-width support pill on its own line above RU/EN */
.rail-item.support-rail { flex: 1 1 100%; min-height: 38px; white-space: nowrap; color: var(--lime); text-decoration: none; margin-bottom: 6px; border: 1px solid rgba(243,182,63,.22); background: rgba(243,182,63,.05); }
@media (hover:hover) { .rail-item.support-rail:hover { background: rgba(243,182,63,.1); color: var(--lime); } }
/* Cashier sheets: a quiet text link under the primary action */
.sheet-support { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; padding: 8px; color: rgba(243,182,63,.85); font-size: 12px; font-weight: 600; text-decoration: none; }
@media (hover:hover) { .sheet-support:hover { color: var(--lime); } }
.sheet-support .i8 { font-size: 15px; }
.usdt-panel .sheet-support { margin-top: 4px; }
.gate-telegram-state { display: grid; justify-items: center; gap: 12px; padding: 10px 0 6px; text-align: center; }
.gate-telegram-state b { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.gate-telegram-state p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; min-height: 1em; }
.gate-spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(243,182,63,.2); border-top-color: var(--lime); animation: cardSpin .9s linear infinite; }
.gate-telegram-state.failed .gate-spinner { display: none; }
.gate-telegram[hidden] { display: none; }
/* Brand marks keep their own colours, so they sit as images rather than masks. */
.brand-mark { display: block; flex: none; border-radius: 50%; }
.gate-telegram { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 12px; border: 1px solid var(--line-2); border-radius: 12px; color: var(--text); font-size: 12px; font-weight: 700; }

/* ---------- App shell ---------- */
.app { position: relative; z-index: 1; width: 100%; max-width: 720px; min-width: 0; min-height: 100dvh; overflow-x: hidden; margin: 0 auto; padding-bottom: calc(100px + var(--safe-bottom)); }
.topbar { position: sticky; top: 0; z-index: 50; min-height: calc(62px + var(--safe-top)); padding: calc(9px + var(--safe-top)) 12px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(7,7,9,.86); border-bottom: 1px solid transparent; backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%); }
.topbar.scrolled { border-bottom-color: var(--line); }
.identity { flex: 0 1 auto; max-width: calc(50% - 74px); border: 0; padding: 0; background: transparent; display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; cursor: pointer; }
.avatar-wrap { position: relative; flex: none; }
.avatar, .profile-avatar { display: block; flex: none; overflow: hidden; border-radius: 50%; background: var(--surface-2) url(/miniapp/avatar-default.png?v=2) center / cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--lime), 0 0 18px var(--lime-glow); }
.avatar { width: 36px; height: 36px; }
.avatar.has-photo, .profile-avatar.has-photo { background-size: cover; background-position: center; }
.level-badge { position: absolute; right: -4px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 6px; background: var(--lime); color: var(--lime-ink); font-family: var(--font-num); font-size: 10px; font-weight: 700; box-shadow: 0 0 0 2px var(--bg); }
.avatar-wrap.large .level-badge { right: -2px; bottom: 0; min-width: 24px; height: 24px; font-size: 12px; border-radius: 8px; }
.identity-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.identity-copy small { color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.identity-copy b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
/* The wordmark is centred on the bar itself, independent of the side blocks. */
.wordmark { position: absolute; left: 50%; top: calc(50% + var(--safe-top) / 2); display: flex; flex-direction: column; align-items: center; gap: 3px; transform: translate(-50%, -50%); }
.wordmark-logo { height: 11px; width: auto; display: block; }
.wordmark-tag { height: 4px; width: auto; display: block; opacity: .85; }
.balance-pill { flex: 0 1 auto; max-width: calc(50% - 74px); margin-left: auto; display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; border: 1px solid rgba(243,182,63,.28); border-radius: 12px; padding: 4px 4px 4px 9px; background: rgba(243,182,63,.06); cursor: pointer; font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--lime); box-shadow: inset 0 0 20px rgba(243,182,63,.05); }
.balance-pill > span:nth-child(2) { flex: none; white-space: nowrap; }
.balance-pill small { flex: none; color: rgba(243,182,63,.6); font-size: 9px; font-weight: 700; }
.balance-pill .coin-mark { flex: none; width: 13px; height: 13px; }
.balance-pill.gain { animation: balanceGain .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes balanceGain { 35% { transform: scale(1.07); box-shadow: 0 0 22px rgba(243,182,63,.35); } }
.balance-plus { display: grid; place-items: center; width: 24px; height: 24px; margin-left: 1px; flex: none; border-radius: 8px; background: var(--lime); color: var(--lime-ink); font-size: 14px; line-height: 1; box-shadow: 0 0 14px var(--lime-glow); }

main { width: 100%; min-width: 0; padding: 0 14px; }
.screen { display: none; width: 100%; min-width: 0; padding: 12px 0 32px; }
.screen > section { min-width: 0; }
.screen.active { display: block; }
@keyframes screenIn { from { opacity: 0; transform: translateY(12px); } }
.screen.active > *:nth-child(1) { animation: screenIn .3s cubic-bezier(.22,.9,.3,1) both; }
.screen.active > *:nth-child(2) { animation: screenIn .34s cubic-bezier(.22,.9,.3,1) .04s both; }
.screen.active > *:nth-child(3) { animation: screenIn .38s cubic-bezier(.22,.9,.3,1) .08s both; }
.screen.active > *:nth-child(n+4) { animation: screenIn .42s cubic-bezier(.22,.9,.3,1) .11s both; }
.notice { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 10px; border: 1px solid rgba(243,182,63,.2); border-radius: 12px; background: rgba(243,182,63,.05); color: #c8c9cf; font-size: 11px; }
.notice span { padding: 2px 6px; border-radius: 5px; background: var(--lime); color: var(--lime-ink); font-weight: 900; letter-spacing: .08em; font-size: 9px; }
.notice em { font-style: normal; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.panel-head > div { min-width: 0; }
.panel-head h2 { margin: 5px 0 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.page-title { padding: 10px 4px 14px; }
.page-title h1 { max-width: 430px; margin: 8px 0 8px; font-family: var(--font-display); font-size: clamp(22px, 6.4vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: .02em; }
.page-title p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* ---------- Buttons ---------- */
.btn { border: 0; border-radius: 12px; padding: 12px 16px; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.btn:disabled { cursor: default; opacity: .6; }
.btn-primary { background: linear-gradient(180deg, #fadf79, var(--lime) 60%, var(--lime-2)); color: var(--lime-ink); box-shadow: 0 8px 26px rgba(243,182,63,.18), inset 0 1px rgba(255,255,255,.5); }
.btn-secondary { background: #fff; color: #111; }
.btn-ghost { border: 1px solid var(--line-2); background: rgba(255,255,255,.05); color: var(--text); }
.btn-full { width: 100%; }

/* ---------- Streak card ---------- */
.streak-card { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 12px 12px 10px; overflow: hidden; }
.streak-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 0% 50%, rgba(243,182,63,.14), transparent 45%); }
.streak-box { display: grid; place-items: center; }
.lootbox { position: relative; width: 60px; height: 60px; display: grid; place-items: center; }
.lootbox::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle, var(--lime-glow), transparent 68%); filter: blur(6px); animation: lootGlow 2.6s ease-in-out infinite; }
.lootbox svg { position: relative; z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); animation: lootFloat 3.4s ease-in-out infinite; }
@keyframes lootFloat { 50% { transform: translateY(-3px); } }
.lootbox.claimed svg { animation: lootJolt .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes lootJolt { 30% { transform: scale(1.18) rotate(-6deg); } 60% { transform: scale(.96) rotate(3deg); } }
.claim-burst { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.claim-burst i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 3px; background: var(--lime); box-shadow: 0 0 8px var(--lime-glow); animation: coinPop .75s cubic-bezier(.17,.67,.35,1) var(--d, 0ms) both; }
@keyframes coinPop { 0% { opacity: 1; transform: translate(-50%,-50%) scale(0) rotate(0); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -60px))) scale(1) rotate(200deg); } }
.streak-week .d.just i { animation: dayStamp .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes dayStamp { 40% { transform: scale(1.3); } }
@keyframes lootGlow { 50% { opacity: .55; transform: scale(1.08); } }
.streak-copy { min-width: 0; display: grid; gap: 2px; }
.streak-copy .eyebrow { font-size: 9px; letter-spacing: .14em; }
.streak-day { display: block; color: var(--lime); font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.streak-copy p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.streak-claim { justify-self: start; min-height: 40px; margin-top: 6px; padding: 8px 16px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.streak-claim:disabled { opacity: .45; filter: grayscale(.35); cursor: default; }
.streak-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.streak-week .d { display: grid; justify-items: center; gap: 4px; color: var(--muted-2); font-family: var(--font-num); font-size: 10px; font-weight: 700; }
.streak-week .d i { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.03); font-size: 10px; font-style: normal; }
.streak-week .d.done { color: var(--lime); }
.streak-week .d.done i { border-color: var(--lime); color: var(--lime); }
.streak-week .d.today { color: var(--lime); }
.streak-week .d.today i { border-color: var(--lime); box-shadow: 0 0 14px var(--lime-glow); position: relative; }
.streak-week .d.today i::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime-glow); }
.streak-week .d.gift i { border-color: rgba(250,213,97,.6); color: var(--violet-2); background: rgba(185,120,34,.14); box-shadow: 0 0 14px var(--violet-glow); }
.streak-week .d.gift.done i { color: var(--lime); }
@media (max-width: 400px) {
  .streak-card { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "box copy" "week week"; }
  .streak-box { grid-area: box; }
  .streak-copy { grid-area: copy; }
  .streak-week { grid-area: week; gap: 4px; margin-top: 4px; }
  .streak-week .d i { width: 28px; height: 28px; }
}

/* ---------- Online pill ---------- */
.online-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: 2px; margin-right: auto; padding: 4px 9px 4px 7px; border: 1px solid rgba(243,182,63,.22); border-radius: 999px; background: rgba(243,182,63,.06); color: var(--muted); font-size: 10px; white-space: nowrap; }
.online-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); animation: onlinePulse 2.2s ease-in-out infinite; }
@keyframes onlinePulse { 50% { opacity: .45; box-shadow: 0 0 2px var(--lime); } }
.online-pill b { color: var(--lime); font-family: var(--font-num); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Jackpot ---------- */
.jackpot { position: relative; margin-top: 12px; min-height: 236px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: #07060c; box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.08); isolation: isolate; }
.jackpot-space { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.nebula { position: absolute; border-radius: 50%; filter: blur(30px); }
.n1 { width: 260px; height: 220px; left: -60px; top: -60px; background: radial-gradient(circle, rgba(185,120,34,.55), rgba(81,49,21,.25) 50%, transparent 72%); animation: drift 14s ease-in-out infinite alternate; }
.n2 { width: 300px; height: 240px; right: -90px; bottom: -80px; background: radial-gradient(circle, rgba(185,120,34,.42), rgba(243,182,63,.12) 55%, transparent 74%); animation: drift 18s ease-in-out infinite alternate-reverse; }
.n3 { width: 180px; height: 140px; left: 20%; bottom: -40px; background: radial-gradient(circle, rgba(243,182,63,.2), transparent 70%); }
@keyframes drift { to { transform: translate(18px, 12px) scale(1.06); } }
.stars { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 20%, #fff 50%, transparent 55%), radial-gradient(1px 1px at 30% 70%, #fff 50%, transparent 55%), radial-gradient(1.5px 1.5px at 55% 15%, #fff 50%, transparent 55%), radial-gradient(1px 1px at 70% 45%, rgba(255,255,255,.8) 50%, transparent 55%), radial-gradient(1.2px 1.2px at 88% 25%, #fff 50%, transparent 55%), radial-gradient(1px 1px at 40% 40%, rgba(255,255,255,.7) 50%, transparent 55%), radial-gradient(1.5px 1.5px at 80% 80%, #fff 50%, transparent 55%), radial-gradient(1px 1px at 20% 88%, rgba(255,255,255,.7) 50%, transparent 55%), radial-gradient(1px 1px at 62% 62%, #fff 50%, transparent 55%), radial-gradient(1px 1px at 95% 60%, rgba(255,255,255,.7) 50%, transparent 55%); opacity: .8; animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .45; } }
.asteroid { position: absolute; border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%; background: linear-gradient(140deg, #3b3a44, #17171b 60%); box-shadow: inset -4px -4px 8px rgba(0,0,0,.6), 0 0 18px rgba(243,182,63,.15); }
.a1 { width: 44px; height: 38px; left: 6%; bottom: 14%; transform: rotate(-12deg); }
.a2 { width: 22px; height: 20px; left: 16%; bottom: 40%; transform: rotate(30deg); }
.a3 { width: 30px; height: 26px; right: 8%; top: 20%; transform: rotate(-30deg); }
.jackpot-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; padding: 30px 18px 26px; text-align: center; }
.jackpot-title { display: flex; align-items: center; gap: 12px; color: #d9d9e0; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.jackpot-title i { width: 40px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4)); }
.jackpot-title i:last-child { transform: scaleX(-1); }
.jackpot-amount { display: flex; align-items: center; gap: 12px; }
.jackpot-amount strong { font-family: var(--font-num); font-size: clamp(38px, 12vw, 58px); font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--lime); text-shadow: 0 0 24px rgba(243,182,63,.45), 0 0 60px rgba(243,182,63,.2); font-variant-numeric: tabular-nums; }
.jackpot-amount small { align-self: flex-end; margin-bottom: 8px; color: var(--lime); font-family: var(--font-display); font-size: 14px; font-weight: 700; opacity: .8; }
.jackpot-amount strong { animation: jackpotBreathe 3.6s ease-in-out infinite; }
@keyframes jackpotBreathe { 50% { opacity: .93; } }
.jackpot-amount strong.tick { animation: jackpotTick .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes jackpotTick { 40% { transform: scale(1.04); } }
.jackpot-play { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 240px; min-height: 52px; margin-top: 8px; padding: 0 28px; border: 0; color: var(--lime-ink); background: linear-gradient(180deg, #fadf79, var(--lime) 55%, var(--lime-2)); font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; clip-path: polygon(6% 0, 100% 0, 100% 70%, 94% 100%, 0 100%, 0 30%); filter: drop-shadow(0 10px 28px rgba(243,182,63,.3)); position: relative; overflow: hidden; }
.jackpot-play .i8 { font-size: 14px; }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after, .jackpot-play::after { content: ""; position: absolute; inset: -2px; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.35) 50%, transparent 58%); transform: translateX(-120%); animation: sheen 4.6s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 0%, 74% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } }

/* ---------- Live row ---------- */
.live-row, .originals-row, .shelf-row { display: grid; width: 100%; grid-auto-flow: column; gap: 10px; padding: 2px 0 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.live-row::-webkit-scrollbar, .originals-row::-webkit-scrollbar, .shelf-row::-webkit-scrollbar, .chips::-webkit-scrollbar, .lobby-cats::-webkit-scrollbar { display: none; }
.live-row { grid-auto-columns: 148px; }
.live-card { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 10px; min-height: 118px; padding: 12px 10px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); scroll-snap-align: start; }
.live-card .p-avatar { width: 44px; height: 44px; }
.live-card > div { min-width: 0; }
.live-card b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.live-card small { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; }
.live-card .live-value { display: block; margin-top: 4px; color: var(--lime); font-family: var(--font-num); font-size: 19px; font-weight: 700; line-height: 1.05; white-space: nowrap; }
.live-card .live-value em { font-style: normal; font-size: 11px; opacity: .8; }
.live-card .live-game { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.live-card .live-game b { display: inline; color: var(--text); font-family: var(--font-body); font-size: 10px; letter-spacing: 0; text-transform: uppercase; }
.live-card time { position: absolute; left: 10px; bottom: 8px; color: var(--muted-2); font-size: 9px; }
.live-card .crown { position: absolute; left: 6px; top: 6px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); color: #3a2a00; font-size: 9px; box-shadow: 0 0 10px rgba(245,197,66,.6); animation: crownPulse 2.8s ease-in-out infinite; }
@keyframes crownPulse { 50% { transform: scale(1.12); opacity: .85; } }
.live-card.is-new { animation: liveIn .45s cubic-bezier(.22,.9,.3,1) both; }
@keyframes liveIn { from { opacity: 0; transform: translateX(-16px) scale(.96); } }
.live-row.first-paint .live-card { animation: liveIn .4s cubic-bezier(.22,.9,.3,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.p-avatar { display: block; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: #16161c; box-shadow: 0 0 0 1.5px var(--pa-ring, var(--violet)), 0 0 14px var(--pa-glow, var(--violet-glow)); }
.p-avatar svg { display: block; width: 100%; height: 100%; }

/* ---------- Originals: portrait tiles, same shape as the slot grid ---------- */
.originals-row { grid-auto-columns: 118px; }
.shelf-row { grid-auto-columns: 118px; }
.shelf-row .game-card { scroll-snap-align: start; }
.original-card { position: relative; display: grid; gap: 7px; align-content: start; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; scroll-snap-align: start; min-width: 0; }
.original-card .oc-art { position: relative; display: block; aspect-ratio: 384/516; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(circle at 50% 30%, var(--oc-glow, rgba(185,120,34,.35)), transparent 70%), linear-gradient(180deg, #17171f, #0c0c11); }
.original-card svg { position: absolute; left: 50%; top: 18%; width: 62%; height: 62%; transform: translateX(-50%); z-index: 1; filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
.original-card .oc-cover { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease, transform .3s ease; }
.original-card.has-cover .oc-cover { opacity: 1; }
.original-card.has-cover svg { display: none; }
.original-card.has-cover .oc-tag { display: none; } /* the rendered covers carry their own caption */
.original-card .oc-tag { position: absolute; z-index: 3; left: 6px; bottom: 6px; padding: 3px 6px; border-radius: 6px; background: rgba(8,8,12,.7); color: var(--lime); font-family: var(--font-display); font-size: 9px; font-weight: 900; letter-spacing: .12em; backdrop-filter: blur(6px); }
.original-card .oc-copy { display: block; min-width: 0; padding: 0 2px; }
.original-card .oc-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; }
.original-card .oc-copy small { display: block; margin-top: 1px; color: var(--muted-2); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.original-card .oc-copy small .i8 { display: inline-block; vertical-align: -1px; margin-right: 4px; font-size: 9px; color: var(--muted-2); }
.original-card.oc-crash { --oc-glow: rgba(185,120,34,.4); }
.original-card.oc-plinko { --oc-glow: rgba(185,120,34,.42); }
.original-card.oc-blackjack { --oc-glow: rgba(34,197,94,.3); }
.original-card.oc-dice { --oc-glow: rgba(243,182,63,.2); }
.originals-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }

/* ---------- Slots catalog ---------- */
.search-wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; max-height: 0; opacity: 0; overflow: hidden; padding: 0 13px; border: 1px solid transparent; border-radius: 12px; background: var(--surface); transition: max-height .24s ease, opacity .2s ease, padding .24s ease, margin .24s ease, border .2s; }
.search-wrap.open { max-height: 50px; opacity: 1; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px; border-color: var(--line); }
.search-wrap span { color: var(--muted); font-size: 16px; }
.search-wrap input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }
.search-wrap input::-webkit-search-cancel-button, .search-wrap input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search-wrap button { min-width: 36px; min-height: 36px; }
.search-wrap input::placeholder { color: var(--muted-2); }
.search-wrap button { border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; }
.chips { display: flex; width: 100%; gap: 6px; margin: 0 0 12px; padding: 0 0 2px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chip { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; background: var(--surface); color: var(--muted); cursor: pointer; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.chip.active { border-color: var(--lime); background: var(--lime); color: var(--lime-ink); }
.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.game-card { position: relative; min-width: 0; cursor: pointer; }
/* Portrait, because the promo art is 3:4 -- a landscape box crops the game's
   own title straight out of the tile. */
.game-card .cover { position: relative; aspect-ratio: 384/516; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.game-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .3s ease, filter .3s ease, opacity .35s ease; }
.game-grid.cascade .game-card { animation: cardIn .32s cubic-bezier(.22,.9,.3,1) both; animation-delay: calc(var(--i, 0) * 24ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.cover.is-loading img { opacity: 0; }
.cover.is-loading::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.07) 50%, transparent 62%); transform: translateX(-100%); animation: shimmer 1.15s ease-in-out infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.game-card .cover::after { content: ""; position: absolute; inset: 72% 0 0; background: linear-gradient(transparent, rgba(3,3,6,.55)); pointer-events: none; }
.game-card .game-title { display: block; margin: 7px 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; }
.game-card .game-cat { display: block; margin: 1px 2px 0; color: var(--muted-2); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
/* Bottom-left: the promo art carries its own corner ribbon and centred title,
   so a top-left badge lands straight on top of both. */
.badge { position: absolute; z-index: 4; left: 6px; bottom: 6px; padding: 3px 6px; border-radius: 6px; background: var(--lime); color: var(--lime-ink); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.badge.top { background: var(--violet); color: #fff; }
.favorite { position: absolute; z-index: 5; top: 2px; right: 2px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; color: #fff; background: rgba(8,8,12,.55); background-clip: content-box; padding: 4px; cursor: pointer; font-size: 13px; }
.favorite:disabled { opacity: .5; }
.favorite:not(.on) { color: #fff; opacity: .62; }
.favorite.on { color: var(--lime); opacity: 1; }
.empty { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--muted); text-align: center; }
.empty span { font-size: 32px; }
.empty b { color: var(--text); font-size: 13px; }
.empty small { font-size: 11px; }
.show-all { margin-top: 14px; }

/* ---------- Leaderboard / podium ---------- */
.board-row { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(104px, 1fr); gap: 8px; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 6px; padding: 14px 10px 12px; }
.podium .pl { display: grid; justify-items: center; gap: 5px; min-width: 0; text-align: center; }
.podium .pl .p-avatar { width: 46px; height: 46px; }
.podium .pl.first .p-avatar { width: 58px; height: 58px; --pa-ring: var(--gold); --pa-glow: rgba(245,197,66,.55); }
.podium .pl.second .p-avatar { --pa-ring: var(--silver); --pa-glow: rgba(201,204,214,.35); }
.podium .pl.third .p-avatar { --pa-ring: var(--bronze); --pa-glow: rgba(208,138,75,.4); }
.podium .pl .rk { display: grid; place-items: center; width: 20px; height: 20px; margin-bottom: -14px; z-index: 2; border-radius: 6px; background: var(--surface-3); color: var(--text); font-family: var(--font-num); font-size: 11px; font-weight: 700; box-shadow: 0 0 0 2px var(--bg); }
.podium .pl.first .rk { background: var(--gold); color: #3a2a00; }
.podium .pl.first .rk::before { content: "♛"; position: absolute; top: -13px; color: var(--gold); font-size: 11px; text-shadow: 0 0 8px rgba(245,197,66,.8); }
.podium .pl.first .rk { position: relative; }
.podium .pl.second .rk { background: #d5d7de; color: #222; }
.podium .pl.third .rk { background: var(--bronze); color: #2a1600; }
.podium .pl b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.podium .pl small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-family: var(--font-num); font-size: 10px; }
.podium .pl.first small { color: var(--lime); }
.podium.large { padding: 20px 12px 16px; }
.podium.large .pl .p-avatar { width: 56px; height: 56px; }
.podium.large .pl.first .p-avatar { width: 72px; height: 72px; }
.your-place { display: grid; align-content: center; justify-items: center; gap: 4px; padding: 12px 8px; text-align: center; }
.your-place b { color: var(--lime); font-family: var(--font-num); font-size: 30px; font-weight: 700; line-height: 1; text-shadow: 0 0 18px var(--lime-glow); }
.your-place small { color: var(--muted); font-family: var(--font-num); font-size: 11px; }
.rank-hero { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(104px, 1fr); gap: 8px; }
.leaderboard { display: grid; gap: 2px; padding: 6px; }
.leader { display: grid; grid-template-columns: 26px 34px 1fr auto; align-items: center; gap: 8px; min-height: 42px; padding: 4px 8px; border-radius: 10px; color: var(--muted); font-size: 12px; }
.leader.self { color: var(--text); background: rgba(243,182,63,.07); box-shadow: inset 0 0 0 1px rgba(243,182,63,.25); }
.leader i { color: var(--lime); font-family: var(--font-num); font-style: normal; font-weight: 700; }
.leader .p-avatar { width: 32px; height: 32px; }
.leader b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-family: var(--font-display); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.leader span { max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-num); font-weight: 700; }
.live-dot { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.live-dot i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 9px var(--lime); }
.activity-list { display: grid; gap: 2px; padding: 6px; }
.activity { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; min-height: 46px; padding: 5px 8px; border-radius: 10px; }
.activity .p-avatar { width: 32px; height: 32px; }
.activity > div { min-width: 0; }
.activity b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.activity small { display: block; color: var(--muted); font-size: 10px; }
.activity .amt { color: var(--lime); font-family: var(--font-num); font-size: 14px; font-weight: 700; white-space: nowrap; }

/* ---------- Club: daily / tasks / promo / referral ---------- */
.daily-card { padding: 18px; background: radial-gradient(circle at 100% 0, rgba(185,120,34,.22), transparent 42%), var(--surface); }
.flame { display: flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 10px; background: rgba(255,255,255,.06); font-family: var(--font-num); font-size: 13px; }
.flame .i8 { color: #ffb528; font-size: 14px; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 18px 0; }
.day { position: relative; min-width: 0; padding: 8px 2px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.18); text-align: center; }
.day small { display: block; color: var(--muted-2); font-size: 9px; }
.day b { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 4px; font-family: var(--font-num); font-size: 10px; }
.day b .i8 { font-size: 10px; }
.day.done { border-color: rgba(243,182,63,.25); color: var(--lime); }
.day.today { border-color: var(--lime); background: rgba(243,182,63,.08); box-shadow: 0 0 16px rgba(243,182,63,.12); }
.task-list { display: grid; gap: 8px; }
.task { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.task-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-3); color: var(--lime); font-size: 18px; }
.task-copy { min-width: 0; }
.task-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.task-progress { height: 4px; margin-top: 7px; overflow: hidden; border-radius: 3px; background: #26262e; }
.task-progress i { display: block; height: 100%; border-radius: inherit; background: var(--lime); }
.task-reward { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 60px; min-height: 40px; border: 1px solid rgba(243,182,63,.25); border-radius: 10px; padding: 8px; color: var(--lime); background: rgba(243,182,63,.06); cursor: pointer; font-family: var(--font-num); font-size: 11px; font-weight: 700; }
.task-reward .coin-mark { width: 12px; height: 12px; }
.task-reward:disabled { color: var(--muted); border-color: var(--line); background: transparent; }
.promo-card { display: grid; grid-template-columns: 48px 1fr; gap: 13px; margin-top: 26px; padding: 18px; }
.promo-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--lime); color: var(--lime-ink); font-size: 21px; }
.promo-copy { min-width: 0; }
.promo-copy h2 { margin: 5px 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.promo-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.promo-form { grid-column: 1/-1; display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 6px; }
.promo-form input, .field input { width: 100%; min-width: 0; border: 1px solid var(--line-2); border-radius: 12px; outline: none; padding: 12px 12px; color: var(--text); background: rgba(0,0,0,.28); font-size: 13px; }
.promo-form input { text-transform: uppercase; }
.promo-form input:focus, .field input:focus { border-color: rgba(243,182,63,.6); }
.referral-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 17px; }
.referral-card > div { min-width: 0; }
.referral-card h2 { margin: 5px 0 5px; font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.referral-card p { max-width: 380px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.ref-code { flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px dashed rgba(243,182,63,.5); border-radius: 11px; padding: 10px; color: var(--lime); background: rgba(243,182,63,.05); cursor: pointer; font-family: var(--font-num); font-size: 12px; font-weight: 700; }

/* ---------- Referral programme (Club) ---------- */
.referral { display: grid; gap: 12px; margin-top: 16px; }
.ref-hero { position: relative; overflow: hidden; padding: 16px; background: radial-gradient(circle at 100% 0, rgba(243,182,63,.16), transparent 46%), var(--surface); }
.ref-headline { margin: 6px 0 14px; max-width: 460px; font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.28; }
.ref-code-big { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px dashed rgba(243,182,63,.5); border-radius: 13px; background: rgba(243,182,63,.06); color: var(--lime); cursor: pointer; text-align: left; }
.ref-code-big .ref-code-cap { color: var(--muted); font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ref-code-big b { flex: 1; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-num); font-size: 20px; font-weight: 700; letter-spacing: .16em; }
.ref-code-big .i8 { font-size: 16px; }
.ref-share { display: grid; grid-template-columns: 1fr auto auto; gap: 7px; margin-top: 12px; }
.ref-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 11px; background: rgba(255,255,255,.05); color: var(--text); cursor: pointer; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ref-share-btn.primary { border-color: transparent; color: var(--lime-ink); background: linear-gradient(180deg, #fadf79, var(--lime) 60%, var(--lime-2)); box-shadow: 0 8px 22px rgba(243,182,63,.2); }
.ref-share-btn .i8 { font-size: 15px; }
.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.ref-stats > div { display: grid; gap: 3px; justify-items: center; padding: 12px 6px; text-align: center; }
.ref-stats > div + div { border-left: 1px solid var(--line); }
.ref-stats b { font-family: var(--font-num); font-size: 20px; font-weight: 700; color: var(--lime); font-variant-numeric: tabular-nums; }
.ref-stats small { color: var(--muted); font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ref-enter { display: grid; gap: 9px; padding: 14px; }
.ref-enter-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.ref-enter-row input { min-width: 0; min-height: 46px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 11px; outline: 0; background: rgba(0,0,0,.28); color: var(--text); font-family: var(--font-num); font-size: 15px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.ref-enter-row input:focus { border-color: rgba(243,182,63,.55); caret-color: var(--lime); }
.ref-enter-row input.shake { animation: refShake .3s linear; }
@keyframes refShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.ref-enter-row .btn { min-height: 46px; padding: 0 18px; border: 1px solid rgba(243,182,63,.4); background: rgba(243,182,63,.1); color: var(--lime); }
.ref-by { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-color: rgba(66,232,165,.3); background: rgba(66,232,165,.07); color: #b7ffd0; font-size: 12px; font-weight: 700; }
.ref-by .i8 { flex: none; font-size: 17px; color: var(--success); }
.ref-how { padding: 14px; }
.ref-steps { list-style: none; display: grid; gap: 11px; margin: 12px 0 0; padding: 0; }
.ref-steps li { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 11px; color: var(--text); font-size: 12px; line-height: 1.35; }
.ref-steps i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); font-family: var(--font-num); font-size: 12px; font-weight: 700; font-style: normal; }
.ref-note { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.ref-friends { margin-top: 4px; }
.ref-friends #ref-friends-list { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.ref-friends #ref-friends-list .transaction { padding: 11px 12px; }
.ref-friend-status { flex: none; color: var(--muted-2); font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ref-friend-status.on { color: var(--lime); }
.ref-qr { width: 200px; height: 200px; margin: 6px auto 12px; padding: 12px; background: #fff; border-radius: 14px; }
.ref-qr svg { width: 100%; height: 100%; display: block; }
.ref-qr-link { display: flex; justify-content: center; margin-bottom: 4px; }
.ref-qr-link code { overflow-wrap: anywhere; color: var(--muted); font-family: var(--font-num); font-size: 11px; text-align: center; }

/* ---------- Withdrawal: payout network picker ---------- */
.field-cap { display: block; margin: 14px 0 6px 2px; color: var(--muted); font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wd-nets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.wd-net { display: grid; justify-items: center; gap: 3px; padding: 11px 6px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.wd-net .pay-mark { width: 26px; height: 26px; }
.wd-net b { font-size: 11px; font-weight: 700; }
.wd-net small { color: var(--muted-2); font-size: 9px; }
.wd-net.active { border-color: var(--lime); background: rgba(243,182,63,.07); }
.wd-net.active b { color: var(--lime); }
.wd-warning { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid rgba(255,176,40,.32); border-radius: 12px; background: rgba(255,176,40,.08); color: #ffce7a; font-size: 11px; line-height: 1.5; }
.wd-warning .i8 { flex: none; margin-top: 1px; font-size: 15px; color: #ffb028; }
#withdraw-address { font-family: var(--font-num); }
#withdraw-address.shake { animation: refShake .3s linear; }
@media (min-width: 760px) { .ref-hero, .ref-stats, .ref-enter, .ref-how, .ref-by, .ref-friends { max-width: 640px; } }

/* ---------- Wallet ---------- */
.wallet-title { padding-bottom: 12px; }
.wallet-card { position: relative; overflow: hidden; padding: 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: radial-gradient(circle at 105% -10%, rgba(243,182,63,.22), transparent 38%), radial-gradient(circle at -10% 110%, rgba(185,120,34,.25), transparent 40%), linear-gradient(145deg, #17171d, #0c0c10); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.wallet-card::before { content: ""; position: absolute; right: -30px; top: -30px; width: 170px; height: 170px; background: url(/miniapp/brand/logo-watermark.webp?v=3) center / contain no-repeat; opacity: .05; transform: rotate(8deg); }
.wallet-topline { position: relative; z-index: 1; display: flex; justify-content: space-between; color: var(--muted); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.wallet-topline span:last-child { color: var(--lime); }
.wallet-amount { position: relative; z-index: 1; display: flex; flex-wrap: wrap; min-width: 0; align-items: center; gap: 6px 10px; margin: 18px 0 20px; }
.wallet-amount strong { min-width: 0; white-space: nowrap; font-family: var(--font-num); font-size: clamp(30px, 8vw, 44px); font-weight: 700; color: var(--lime); text-shadow: 0 0 20px var(--lime-glow); }
.wallet-amount small { color: var(--muted); font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.wallet-split { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wallet-split div { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.045); }
.wallet-split small { display: block; color: var(--muted-2); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.wallet-split b { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-num); font-size: 13px; }
.wallet-actions { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 8px; margin-top: 15px; }
.payment-methods { display: grid; gap: 8px; }
.payment-method { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--line); border-radius: 15px; padding: 11px; background: var(--surface); text-align: left; cursor: pointer; }
.payment-method > span:nth-child(2) { min-width: 0; }
.payment-logo { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; }
.payment-logo .i8 { width: 22px; height: 22px; }
.stars-logo { background: linear-gradient(145deg, #ffcf5a, #f5a623); color: #fff; }
.card-logo { background: linear-gradient(145deg, var(--violet), #6e3e12); color: #fff; }
.crypto-logo { background: linear-gradient(145deg, var(--lime), var(--lime-deep)); color: var(--lime-ink); }
.payment-method b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.payment-method small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.payment-method em { color: var(--danger); font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.payment-method em.ready { color: var(--success); }
.compliance-note { margin: 10px 4px 0; overflow-wrap: anywhere; color: var(--muted-2); font-size: 10px; line-height: 1.55; }
.transaction-list { display: grid; gap: 2px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.transaction { display: grid; width: 100%; min-width: 0; grid-template-columns: 37px minmax(0, 1fr) minmax(0, auto); align-items: center; gap: 10px; min-height: 57px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.transaction:last-child { border-bottom: 0; }
.transaction-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; background: var(--surface-3); color: var(--lime); font-size: 16px; }
.transaction-icon .brand-icon { width: 24px; height: 24px; }
.transaction > :nth-child(2) { min-width: 0; }
.transaction b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.transaction small { color: var(--muted); font-size: 10px; }
.transaction-amount { min-width: 0; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-family: var(--font-num); font-size: 13px; font-weight: 700; }
.transaction-amount.positive { color: var(--lime); }

/* ---------- Profile ---------- */
.profile-hero { display: flex; min-width: 0; align-items: center; gap: 16px; padding: 16px 4px 18px; }
.profile-hero > div:last-child { min-width: 0; }
.profile-avatar { width: 74px; height: 74px; }
.profile-hero h1 { margin: 6px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.profile-hero p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.vip-card { padding: 18px; background: radial-gradient(circle at 100% 0, rgba(185,120,34,.25), transparent 42%), var(--surface); }
.vip-badge { padding: 7px 9px; border: 1px solid rgba(243,182,63,.3); border-radius: 9px; color: var(--lime); background: rgba(243,182,63,.06); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.progress { height: 7px; margin-top: 17px; overflow: hidden; border-radius: 6px; background: #22222a; }
.progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--lime)); transition: width .6s ease; }
.progress-copy { display: flex; justify-content: space-between; margin-top: 7px; color: var(--muted); font-size: 10px; }
.achievement-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.achievement { min-width: 0; padding: 11px 5px 9px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: center; }
.achievement.locked { opacity: .75; filter: grayscale(.85); }
.achievement .achievement-icon { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 7px; border-radius: 13px; background: var(--surface-3); color: var(--lime); font-size: 18px; }
.achievement b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.achievement small { display: block; margin-top: 3px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.achievement[data-rarity="common"] small { color: #a9abb5; }
.achievement[data-rarity="rare"] small { color: var(--violet-2); }
.achievement[data-rarity="epic"] small { color: #f0bd62; }
.achievement[data-rarity="legendary"] small { color: var(--lime); }
.achievement-claim { width: calc(100% - 6px); min-height: 38px; margin: 8px 3px 0; padding: 6px 3px; border: 1px solid rgba(243,182,63,.3); border-radius: 8px; color: var(--lime-ink); background: var(--lime); font-size: 9px; font-weight: 800; cursor: pointer; }
.achievement-claim:disabled { color: var(--muted); border-color: var(--line); background: #1a1a20; cursor: default; }
.achievement:not(.locked):has(.achievement-claim:not(:disabled)) { border-color: rgba(243,182,63,.45); box-shadow: inset 0 0 22px rgba(243,182,63,.06); }
.settings-list { margin-top: 12px; overflow: hidden; }
.settings-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.settings-row:last-child { border-bottom: 0; }
.settings-row > span { color: var(--lime); font-size: 16px; }
.settings-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.settings-row em { display: grid; place-items: center; color: var(--muted-2); font-size: 13px; font-style: normal; }
.lang-row { cursor: default; }
.settings-row em.lang-switch, .lang-switch { display: flex; flex-direction: row; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }

/* ---------- Bottom nav ---------- */
.bottom-nav { position: fixed; z-index: 60; left: 50%; bottom: 0; width: min(100%, 720px); min-height: calc(70px + var(--safe-bottom)); padding: 8px 10px calc(8px + var(--safe-bottom)); display: grid; grid-template-columns: 1fr 1fr 78px 1fr 1fr; align-items: end; transform: translateX(-50%); border-top: 1px solid var(--line); background: rgba(9,9,12,.97); backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%); }
.nav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; }
.nav-item > span { font-size: 21px; line-height: 1; }
.nav-item b { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.nav-item.active { color: var(--lime); }
.nav-item.active > span { filter: drop-shadow(0 0 8px var(--lime-glow)); animation: navPop .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes navPop { 45% { transform: translateY(-3px) scale(1.15); } }
.nav-item i { position: absolute; top: 6px; right: calc(50% - 16px); display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 7px var(--danger); }
.nav-item i.on { display: block; }
.nav-center { position: relative; display: grid; place-items: center; align-self: center; height: 60px; margin-top: -26px; border: 0; background: transparent; cursor: pointer; }
.nav-center-ring { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: radial-gradient(circle at 50% 30%, #1c1c24, #0a0a0e 70%); box-shadow: 0 0 0 5px var(--bg), 0 0 30px rgba(243,182,63,.22), inset 0 1px rgba(255,255,255,.1); }
.nav-center-ring img { width: 34px; height: auto; filter: drop-shadow(0 0 10px var(--lime-glow)); }
.nav-center.active .nav-center-ring { border-color: rgba(243,182,63,.5); box-shadow: 0 0 0 5px var(--bg), 0 0 40px rgba(243,182,63,.4); }

/* ---------- Sheet / modal ---------- */
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: flex; align-items: flex-end; justify-content: center; visibility: hidden; padding: 20px 0 0; background: rgba(0,0,0,.72); opacity: 0; transition: opacity .24s, visibility .24s; backdrop-filter: blur(7px); }
.modal-backdrop.open { visibility: visible; opacity: 1; }
.sheet { position: relative; width: min(100%, 720px); max-height: min(90dvh, 760px); overflow-y: auto; overflow-x: hidden; padding: 18px 18px calc(24px + var(--safe-bottom)); border: 1px solid rgba(255,255,255,.12); border-bottom: 0; border-radius: 24px 24px 0 0; background: #101014; transform: translateY(105%); transition: transform .34s cubic-bezier(.32,.72,.25,1.04); box-shadow: 0 -30px 90px rgba(0,0,0,.5); }
#sheet-content { min-width: 0; }
.modal-backdrop.open #sheet-content > * { animation: sheetItem .34s cubic-bezier(.22,.9,.3,1) both; }
.modal-backdrop.open #sheet-content > *:nth-child(2) { animation-delay: .04s; }
.modal-backdrop.open #sheet-content > *:nth-child(3) { animation-delay: .07s; }
.modal-backdrop.open #sheet-content > *:nth-child(n+4) { animation-delay: .1s; }
@keyframes sheetItem { from { opacity: 0; transform: translateY(10px); } }
.modal-backdrop.open .sheet { transform: translateY(0); }
.sheet-handle { width: 38px; height: 4px; margin: -7px auto 18px; border-radius: 4px; background: #33333c; }
.sheet-close { position: absolute; z-index: 2; top: 15px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; }
.sheet h2 { margin: 5px 42px 8px 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.1; letter-spacing: .02em; }
.sheet-intro { margin: 0 30px 18px 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }
.quick-amounts button { border: 1px solid var(--line); border-radius: 11px; padding: 10px 3px; background: var(--surface-2); cursor: pointer; font-family: var(--font-num); font-size: 12px; font-weight: 700; }
.quick-amounts button.active { border-color: var(--lime); color: var(--lime); background: rgba(243,182,63,.06); }
.chip:disabled, .quick-amounts button:disabled, .gate-tabs button:disabled, .icon-button:disabled, .text-button:disabled { opacity: .5; cursor: default; }
.field { display: block; margin: 13px 0; }
.field span { display: block; margin: 0 0 6px 2px; color: var(--muted); font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.card-review { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; padding: 14px 0 4px; text-align: center; }
.card-review h3 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.card-review .sheet-intro { margin: 0; }
.card-review-spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(243,182,63,.2); border-top-color: var(--lime); animation: cardSpin .9s linear infinite; }
@keyframes cardSpin { to { transform: rotate(360deg); } }
.card-review-badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; }
.card-review-badge .i8 { width: 26px; height: 26px; }
.card-review-badge.is-ok { color: var(--success); background: rgba(110,231,168,.14); border: 1px solid rgba(110,231,168,.4); }
.card-review-badge.is-bad { color: var(--danger); background: rgba(255,92,122,.13); border: 1px solid rgba(255,92,122,.38); }
.card-review-facts { display: grid; gap: 6px; width: 100%; margin: 4px 0 0; }
.card-review-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.card-review-facts dt { margin: 0; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.card-review-facts dd { margin: 0; min-width: 0; font-family: var(--font-num); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.card-sms-row { display: flex; gap: 8px; width: 100%; min-width: 0; max-width: 100%; margin-top: 4px; }
.card-sms-row input { flex: 1 1 0; width: 0; min-width: 0; border: 1px solid var(--line-2); border-radius: 12px; outline: none; padding: 11px 10px; color: var(--text); background: rgba(0,0,0,.28); text-align: center; letter-spacing: .16em; font-family: var(--font-num); font-weight: 700; font-size: 16px; }
.card-sms-row input:focus { border-color: rgba(243,182,63,.6); }
.card-sms-row .btn { flex: none; min-height: 46px; padding: 0 18px; }
.card-sms-status { margin: 8px 0 0; min-height: 14px; font-size: 11px; font-weight: 700; color: var(--muted); }
.card-sms-status.ok { color: var(--success); }
.deposit-bonus-banner { display: flex; align-items: center; gap: 9px; margin: 12px 0 2px; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(243,182,63,.4); background: linear-gradient(145deg, rgba(243,182,63,.12), rgba(185,120,34,.12)); color: var(--text); font-size: 12px; font-weight: 700; }
.deposit-bonus-banner .i8 { width: 20px; height: 20px; color: var(--lime); flex: none; }
.deposit-bonus-banner b { color: var(--lime); }
.card-fields { display: grid; gap: 10px; margin-top: 4px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card-fields .field, .field-row .field { margin: 0; }
.provider-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 15px 0; }
.provider-choice button { display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 13px; padding: 11px 8px; background: var(--surface-2); cursor: pointer; font-size: 11px; font-weight: 800; }
.provider-choice button.active { border-color: var(--lime); color: var(--lime); background: rgba(243,182,63,.06); }
.provider-choice button:disabled { opacity: .35; }
.sheet .compliance-note { padding: 10px; border-radius: 11px; background: rgba(255,255,255,.035); }
.sheet-actions { display: grid; gap: 7px; margin-top: 14px; }
.info-list { display: grid; gap: 8px; margin-top: 16px; }
.info-row { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }
.info-row b { display: block; font-size: 12px; }
.info-row p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.toast { position: fixed; z-index: 200; left: 50%; bottom: calc(90px + var(--safe-bottom)); width: max-content; max-width: calc(100% - 30px); padding: 10px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(24,24,30,.97); color: #fff; box-shadow: 0 12px 40px rgba(0,0,0,.45); opacity: 0; transform: translate(-50%, 14px) scale(.96); pointer-events: none; transition: opacity .18s ease, transform .34s cubic-bezier(.34,1.56,.64,1); font-size: 12px; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast .toast-icon { display: inline-block; vertical-align: -2px; margin-right: 7px; font-size: 14px; color: var(--success); }
.toast.error .toast-icon { color: var(--danger); }
.usdt-error { display: grid; gap: 10px; justify-items: center; padding: 18px 14px; border: 1px solid rgba(255,92,122,.3); border-radius: 12px; background: rgba(255,92,122,.06); text-align: center; }
.usdt-error b { color: #ff9db0; font-size: 13px; }
.usdt-error small { color: var(--muted); font-size: 11px; }
.usdt-error .btn { min-height: 40px; padding: 0 18px; }
.toast.error.show { animation: toastShake .3s linear; }
@keyframes toastShake { 25% { transform: translate(calc(-50% - 4px), 0); } 75% { transform: translate(calc(-50% + 4px), 0); } }
/* Above the game overlay, and clickable when it carries an action. */
.toast { z-index: 1200; }
.toast.show.has-action { pointer-events: auto; }
.toast.error { border-color: rgba(255,92,122,.35); color: #ffb0c0; }

/* ================= Native games (Lucky Originals) ================= */
.classic-overlay { position: fixed; z-index: 110; inset: 0; width: 100%; margin: 0 auto; overflow: hidden; background: #08080b; color: #fff; }
.classic-header { position: relative; z-index: 3; min-height: calc(54px + var(--safe-top)); padding: calc(7px + var(--safe-top)) 10px 7px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); background: rgba(8,8,11,.96); backdrop-filter: blur(20px); }
.classic-back { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(180deg, #23232b, #131318); color: #fff; font-size: 17px; cursor: pointer; }
.classic-header > div { min-width: 0; }
.classic-header small { display: block; color: var(--lime); font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.classic-header > div b { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.classic-wallet { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 140px; padding: 7px 9px; border: 1px solid rgba(243,182,63,.25); border-radius: 9px; color: var(--lime); background: linear-gradient(180deg, rgba(243,182,63,.09), rgba(243,182,63,.03)); font-family: var(--font-num); }
.classic-wallet .coin-mark { width: 12px; height: 12px; }
.classic-wallet b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.classic-content { height: calc(100dvh - 86px - var(--safe-top) - var(--safe-bottom)); overflow-y: auto; padding: 9px 10px 28px; overscroll-behavior: contain; }
.classic-footer { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 5px 10px calc(5px + var(--safe-bottom)); border-top: 1px solid var(--line); color: var(--muted-2); background: #0b0b0e; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-align: center; }
/* In-app vendor game overlay: embeds /play/<Name> so games close without an app reload */
.game-overlay { position: fixed; z-index: 120; inset: 0; display: flex; flex-direction: column; background: #000; color: #fff; }
.game-overlay[hidden] { display: none; }
.game-overlay:not([hidden]) { animation: overlayIn .22s ease; }
@keyframes overlayIn { from { opacity: 0; } }
/* Inside Telegram the native arrow is the back control: no duplicate chrome.
   The wrap keeps the fullscreen safe-area padding so the game clears the
   floating Telegram controls. */
.game-overlay.native-chrome .game-header { display: none; }
.game-overlay.native-chrome .game-frame-wrap { padding-top: var(--safe-top); }
.classic-overlay.native-chrome .classic-back { display: none; }
.classic-overlay.native-chrome .classic-header { grid-template-columns: 1fr auto; }
.game-frame-wrap { position: relative; flex: 1; min-height: 0; background: #000; }
.game-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.classic-game { --game-accent: var(--lime); display: grid; gap: 8px; width: 100%; max-width: 1480px; margin: 0 auto; }
.classic-game[data-game="crash"] { --game-accent: var(--lime); }
.classic-game[data-game="plinko"] { --game-accent: var(--violet-2); }
.classic-game[data-game="blackjack"] { --game-accent: #6ee7a8; }
.classic-game[data-game="dice"] { --game-accent: var(--lime); }
.classic-game-head { min-height: 27px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; }
.classic-game-head p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.rtp-pill { flex: none; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--game-accent) 30%, transparent); border-radius: 6px; color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 6%, transparent); font-family: var(--font-num); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.classic-stage { position: relative; min-height: 250px; overflow: hidden; border: 1px solid #26262e; border-radius: 13px; background: linear-gradient(180deg, #16161d, #0d0d12); box-shadow: inset 0 1px rgba(255,255,255,.035), inset 0 -55px 90px rgba(0,0,0,.24), 0 8px 22px rgba(0,0,0,.2); }
.classic-controls { display: grid; gap: 7px; padding: 9px; border: 1px solid #26262e; border-radius: 12px; background: linear-gradient(180deg, #17171d, #101014); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.classic-bet-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: end; gap: 6px; }
.classic-bet-row > button { height: 40px; border: 1px solid #33333d; border-radius: 8px; color: #d8dae0; background: linear-gradient(180deg, #24242d, #17171d); font-family: var(--font-num); font-size: 12px; font-weight: 700; box-shadow: inset 0 1px rgba(255,255,255,.04); cursor: pointer; }
.classic-control-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.classic-label { display: grid; gap: 4px; color: var(--muted); font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.classic-label input, .classic-label select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #33333d; border-radius: 8px; outline: 0; background: #1c1c23; color: #fff; font-family: var(--font-num); font-size: 13px; font-weight: 700; }
.classic-label input:focus, .classic-label select:focus { border-color: color-mix(in srgb, var(--game-accent) 55%, transparent); }
.classic-bets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.classic-bets button, .classic-segments button { min-height: 34px; border: 1px solid #33333d; border-radius: 7px; background: linear-gradient(180deg, #22222a, #17171d); color: #9699a5; font-family: var(--font-num); font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.03); }
.classic-bets button.active, .classic-segments button.active { border-color: var(--game-accent); color: var(--game-accent); background: color-mix(in srgb, var(--game-accent) 8%, transparent); box-shadow: inset 0 0 0 1px var(--game-accent), 0 0 12px color-mix(in srgb, var(--game-accent) 12%, transparent); }
.classic-play { width: 100%; min-height: 49px; border: 0; border-radius: 9px; color: #0a0b0f; background: linear-gradient(180deg, color-mix(in srgb, var(--game-accent) 85%, white), var(--game-accent)); box-shadow: inset 0 1px rgba(255,255,255,.4), 0 8px 20px color-mix(in srgb, var(--game-accent) 18%, transparent); font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.classic-play:not(:disabled):active { transform: scale(.98); }
.classic-play { transition: transform .18s cubic-bezier(.34,1.56,.64,1), filter .15s ease; }
.classic-play:disabled, .classic-action:disabled { opacity: .6; cursor: wait; }
.classic-result { min-height: 38px; display: grid; place-items: center; padding: 8px; border: 1px solid rgba(255,255,255,.035); border-radius: 8px; color: #8c8f9b; background: rgba(255,255,255,.025); font-size: 11px; font-weight: 700; text-align: center; }
.classic-result.win { color: var(--lime); background: rgba(243,182,63,.07); }
.classic-result.loss, .classic-result.is-loss { color: #ff8ba7; background: rgba(255,92,122,.07); }
.classic-result.is-win { color: var(--lime); background: rgba(243,182,63,.07); }
.classic-result:empty { display: none; }
.classic-segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.labeled-segments button { min-height: 45px; display: grid; place-content: center; gap: 2px; }
.labeled-segments b { font-size: 11px; }
.labeled-segments small { color: #737682; font-family: var(--font-body); font-size: 9px; }
.labeled-segments button.active small { color: color-mix(in srgb, var(--game-accent) 72%, white); }

/* Crash */
.crash-history { display: flex; gap: 5px; min-height: 25px; overflow-x: auto; scrollbar-width: none; }
.crash-history::-webkit-scrollbar { display: none; }
.crash-history span { flex: none; min-width: 48px; padding: 6px 8px; border: 1px solid #2c2c35; border-radius: 6px; color: #8b8e98; background: #14141a; font-family: var(--font-num); font-size: 10px; font-weight: 700; text-align: center; }
.crash-history span.good { color: var(--lime); border-color: rgba(243,182,63,.25); }
.crash-history span.mega { color: var(--gold); border-color: rgba(245,197,66,.3); }
.crash-stage { min-height: 270px; background: linear-gradient(180deg, #14131c, #0c0b12 67%, #0f1408); }
.crash-sky { position: absolute; inset: 0; background: radial-gradient(circle at 75% 14%, rgba(185,120,34,.28), transparent 32%), linear-gradient(175deg, transparent 58%, rgba(243,182,63,.04) 59%); }
.crash-grid { position: absolute; inset: 33% -35% -40%; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); background-size: 31px 31px; transform: perspective(260px) rotateX(61deg) scale(1.15); transform-origin: bottom; }
.crash-chart { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* 1.5 CSS pixels: with non-scaling-stroke the old .42 was a hairline that read
   as glow rather than as a line. */
.crash-chart-line { fill: none; stroke: var(--lime); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(243,182,63,.5)); }
.crash-chart-area { fill: url(#crash-area-gradient); }
.crash-round-status { position: absolute; top: 13px; left: 13px; padding: 5px 7px; border: 1px solid rgba(243,182,63,.25); border-radius: 5px; color: var(--lime); background: rgba(8,8,11,.72); font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.crash-multiplier { position: absolute; inset: 46px 0 auto; text-align: center; font-family: var(--font-num); font-size: clamp(38px, 11vw, 56px); font-weight: 700; line-height: 1; letter-spacing: -.02em; text-shadow: 0 0 30px rgba(243,182,63,.25); }
.crash-caption { position: absolute; top: 120px; left: 0; right: 0; padding: 0 18px; color: #8a8d97; font-size: 10px; letter-spacing: .035em; text-align: center; }
.crash-betting-progress { position: absolute; top: 146px; left: 25%; right: 25%; height: 3px; overflow: hidden; border-radius: 5px; background: #292b33; }
.crash-betting-progress i { display: block; width: 100%; height: 100%; background: var(--lime); transform-origin: left; box-shadow: 0 0 8px rgba(243,182,63,.5); }
/* Anchored exactly where the trail starts in the viewBox: x=8, y=82 — i.e. 8%
   from the left and 18% from the bottom. It used to sit at 9%/16% and began its
   flight a little off its own line. */
.crash-rocket { position: absolute; left: 8%; bottom: 18%; width: 42px; height: 27px; display: block; will-change: transform; }
.crash-rocket i { position: absolute; top: 4px; left: 4px; width: 35px; height: 16px; background: linear-gradient(180deg, #f4ffb0, var(--lime)); clip-path: polygon(0 48%, 65% 34%, 81% 0, 91% 0, 87% 35%, 100% 45%, 100% 57%, 86% 63%, 70% 100%, 61% 100%, 66% 63%, 0 62%); filter: drop-shadow(0 0 7px rgba(243,182,63,.7)); }
.crash-rocket::before { content: ""; position: absolute; top: 11px; right: 35px; width: 26px; height: 4px; border-radius: 50%; background: linear-gradient(90deg, transparent, var(--violet-2)); filter: blur(2px); opacity: .9; }
.crash-stage.crashed { animation: classic-shake .28s linear 2; }
.crash-stage.crashed .crash-rocket i { background: #ff5f78; filter: drop-shadow(0 0 9px rgba(255,95,120,.8)); }
@keyframes classic-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.crash-stage-foot { position: absolute; left: 12px; right: 12px; bottom: 9px; display: flex; justify-content: space-between; color: #70737d; font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.crash-stage-foot b { color: #d5d5dc; }
.crash-option-row { display: grid; grid-template-columns: minmax(105px, .62fr) 1fr; gap: 6px; align-items: end; }
.crash-option-row .classic-result { min-height: 40px; }
.crash-feed { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #26262e; border-radius: 10px; background: #101014; }
.crash-feed-head { flex: none; }
.crash-feed-head { display: flex; justify-content: space-between; padding: 8px 9px; border-bottom: 1px solid #26262e; color: #d5d5dc; font-size: 10px; }
.crash-feed-head span { color: var(--lime); font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.crash-players { flex: 1 1 auto; min-height: 0; max-height: 116px; overflow-y: auto; }
/* Empty round: center the call-to-be-first instead of a top-left orphan line */
.crash-players:has(> p:only-child) { display: grid; place-items: center; }
.crash-players > div { min-height: 31px; display: grid; grid-template-columns: 1fr auto 52px; align-items: center; gap: 8px; padding: 5px 9px; border-bottom: 1px solid rgba(255,255,255,.035); font-size: 10px; }
.crash-players > div span { color: var(--muted); }
.crash-players > div b { color: #dddfe5; font-family: var(--font-num); }
.crash-players > div em { color: #777a84; font-style: normal; text-align: right; font-family: var(--font-num); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crash-players > div em.won { color: var(--lime); }
.crash-players p { margin: 0; padding: 13px; color: #6e717c; font-size: 9px; text-align: center; }

/* Plinko */
.plinko-stage { min-height: 340px; padding: 0 7px 7px; background: linear-gradient(180deg, #17142a, #0e0d16); }
.plinko-topline { position: absolute; z-index: 2; top: 8px; left: 10px; right: 10px; display: flex; justify-content: space-between; color: #777987; font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.plinko-topline b { color: var(--violet-2); }
.plinko-canvas { display: block; width: 100%; height: 306px; margin-top: 20px; }
.plinko-buckets { position: absolute; left: 50%; bottom: 7px; width: var(--plinko-board-width, calc(100% - 16px)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px; }
/* --heat runs 0 (the cheapest bucket) to 1 (the jackpot edges). Hue slides from
   the board's own violet through lime to amber, so the shape of the paytable is
   visible before a single ball drops. */
.plinko-buckets span { min-width: 0; padding: 5px 0; border: 1px solid rgba(255,255,255,.06); border-radius: 4px; text-align: center; font-family: var(--font-num); font-size: 9px; font-weight: 800; letter-spacing: -.02em; color: hsl(calc(266deg - 210deg * var(--heat, 0)) 45% calc(62% + 26% * var(--heat, 0))); background: linear-gradient(180deg, hsl(calc(266deg - 210deg * var(--heat, 0)) 30% calc(16% + 10% * var(--heat, 0))), hsl(calc(266deg - 210deg * var(--heat, 0)) 32% calc(11% + 7% * var(--heat, 0)))); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.plinko-buckets span.hot { color: #111218; background: linear-gradient(180deg, #e2ff5c, var(--lime-2)); box-shadow: 0 0 16px rgba(243,182,63,.66); transform: translateY(-3px); }
.plinko-stage.settled .plinko-buckets span.hot { animation: bucket-hit .35s ease-out 2 alternate; }
@keyframes bucket-hit { to { transform: translateY(-5px) scale(1.08); filter: brightness(1.25); } }

/* Dice */
.dice-stage { min-height: 235px; display: block; padding: 18px 16px; background: linear-gradient(180deg, #171a12, #100f14); }
.dice-readout { text-align: center; }
.dice-readout small { display: block; color: var(--muted); font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.dice-readout strong { display: block; margin-top: 4px; font-family: var(--font-num); font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.dice-scale { position: absolute; left: 7%; right: 7%; bottom: 76px; display: flex; justify-content: space-between; color: #686b74; font-family: var(--font-num); font-size: 9px; font-weight: 700; }
/* The track carries the whole game, so it is sized like a game and not like a
   form control: 9px of hairline read as a slider nobody was meant to touch. The
   inset shadow gives it a channel the marker can sit in. */
.dice-track { position: absolute; left: 7%; right: 7%; bottom: 50px; height: 16px; overflow: visible; border: 1px solid #34343e; border-radius: 9px; background: linear-gradient(180deg, #191920, #23232c); box-shadow: inset 0 2px 5px rgba(0,0,0,.55), 0 1px rgba(255,255,255,.03); }
/* The winning span is a solid block of colour: at a glance its width IS the
   chance, which is the one number the player is actually choosing. */
.dice-win-zone { position: absolute; inset: 1px auto 1px 1px; width: calc(var(--dice-threshold) - 2px); border-radius: 8px; background: linear-gradient(90deg, var(--lime-deep), var(--lime)); box-shadow: 0 0 14px rgba(243,182,63,.32), inset 0 1px rgba(255,255,255,.35); }
.dice-stage.over .dice-win-zone { left: var(--dice-threshold); right: 1px; width: auto; }
.dice-threshold-marker, .dice-roll-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
/* A ring, and above the result marker: when the roll lands exactly on the
   threshold — the one roll a player studies — it stays readable through it.
   No cursor:grab: nothing here is draggable, the slider moves the threshold. */
.dice-threshold-marker { left: var(--dice-threshold); width: 18px; height: 18px; border: 3px solid #eef4fb; background: transparent; box-shadow: 0 2px 8px rgba(0,0,0,.6); z-index: 3; }
/* Lifted clear of the taller track: at bottom:17px the label overlapped the
   0/25/50/75/100 scale by seven pixels. */
.dice-threshold-marker span { position: absolute; left: 50%; bottom: 23px; padding: 3px 4px; border-radius: 4px; color: #b5b7c0; background: #26262e; font-family: var(--font-num); font-size: 9px; transform: translateX(-50%); }
/* The roll lands rather than appears: a short drop with a ring behind it, so
   the one instant that decides the bet is the one thing that moves. */
.dice-roll-marker { left: var(--dice-roll, 50%); width: 20px; height: 20px; border: 2px solid #fff; background: var(--violet-2); box-shadow: 0 0 14px var(--violet-glow); opacity: 0; transition: none; z-index: 2; }
.dice-roll-marker.visible { opacity: 1; animation: dice-land .34s cubic-bezier(.2,.9,.3,1); }
.dice-roll-marker.won { color: var(--lime); background: var(--lime); border-color: #f6ffd9; box-shadow: 0 0 18px rgba(243,182,63,.75); }
.dice-roll-marker.lost { color: #d3405e; background: #d3405e; border-color: #ffd9e1; box-shadow: 0 0 16px rgba(211,64,94,.6); }
.dice-roll-marker::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.dice-roll-marker.visible::after { animation: dice-ring .5s ease-out; }
@keyframes dice-land { 0% { transform: translate(-50%, -170%) scale(.7); opacity: 0 } 60% { transform: translate(-50%, -50%) scale(1.15) } 100% { transform: translate(-50%, -50%) scale(1) } }
@keyframes dice-ring { 0% { opacity: .55; transform: scale(.5) } 100% { opacity: 0; transform: scale(1.6) } }
@media (prefers-reduced-motion: reduce) {
  .dice-roll-marker.visible { animation: none }
  .dice-roll-marker.visible::after { animation: none }
}
.dice-roll-marker span { position: absolute; left: 50%; top: 16px; padding: 3px 5px; border-radius: 4px; color: #0c0d10; background: #fff; font-family: var(--font-num); font-size: 9px; font-weight: 700; transform: translateX(-50%); }
.dice-zone-copy { position: absolute; left: 0; right: 0; bottom: 14px; color: #8c8f98; font-size: 10px; font-weight: 700; text-align: center; }
.dice-settings { align-items: end; }
.dice-settings input[type="range"] { padding: 0; accent-color: var(--lime); }
.dice-side { grid-template-columns: repeat(2, 1fr); }

/* Blackjack */
.blackjack-stage { min-height: 330px; padding: 10px; border-color: #294238; border-radius: 13px; background: radial-gradient(ellipse at 50% 42%, rgba(20,117,77,.5), rgba(6,51,36,.76) 57%, #091610 88%); }
.blackjack-zone { min-height: 128px; display: grid; align-content: center; justify-items: center; gap: 5px; }
.blackjack-zone > span { color: rgba(255,255,255,.65); font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.card-hand { min-height: 82px; display: flex; justify-content: center; padding-left: 26px; }
/* Cards overlap by 26px of their 58px width, so the index lives top-left — the
   only corner that survives the overlap. The face carries a large pip so a hand
   reads at a glance without counting the small ones. */
.playing-card { position: relative; width: 58px; height: 80px; margin-left: -26px; padding: 5px; border-radius: 8px; color: #11131a; background: linear-gradient(160deg, #fdfdff, #e9ecf4); box-shadow: 0 7px 18px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.9); font-family: var(--font-num); transform: rotate(var(--card-rotate, 0)); }
.playing-card.red { color: #d32b52; }
.card-index { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 20px; line-height: 1; }
.card-index b { font-size: 15px; font-weight: 800; letter-spacing: -.04em; }
.card-pip-small { width: 10px; height: 10px; margin-top: 1px; fill: currentColor; }
/* Bottom-LEFT, not centre or right: 26px of the 58px width is covered by the
   next card, so anything past x=32 is either hidden or — worse — left peeking
   out as a sliver. At left:3px the pip spans x=3..27 and stays whole. */
.card-pip { position: absolute; left: 3px; bottom: 4px; width: 24px; height: 24px; fill: currentColor; opacity: .92; }
/* The last card in a hand has nothing on top of it, so it can carry the pip
   where a real card does. */
.playing-card:last-child .card-pip { left: auto; right: 7px; bottom: 6px; width: 27px; height: 27px; }
.playing-card.hidden-card { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #15151b, #15151b 5px, #22222a 5px, #22222a 10px); box-shadow: 0 7px 18px rgba(0,0,0,.3), inset 0 0 0 1px rgba(243,182,63,.22); }
/* A single lime lozenge on the back: quieter than an icon and it never lands on
   a glyph the fonts do not carry. */
/* Small layouts need a smaller pip: at 42x58 the full-size one overlaps the
   index box and the two shapes of the same suit sit on top of each other. */
.pg-split .card-pip { width: 17px; height: 17px; bottom: 3px; left: 2px; }
.pg-split .playing-card:last-child .card-pip { width: 19px; height: 19px; right: 4px; bottom: 4px; }
/* Video poker does not overlap its cards at all, so every card there gets the
   proper corner rather than the compact one meant for a fan. */
.vp-zone .card-pip, .vp-zone .playing-card:last-child .card-pip { left: auto; right: 7px; bottom: 6px; width: 27px; height: 27px; }
/* An unknown suit falls back to its character; it still needs to sit where the
   pip would. */
.card-pip-text { display: grid; place-items: center; font-size: 15px; font-weight: 800; line-height: 1; }
.card-pip-small.card-pip-text { font-size: 9px; }
.card-back-mark { width: 20px; height: 28px; border: 1.5px solid var(--lime); border-radius: 4px; opacity: .55; transform: rotate(45deg); }
.hand-value { min-width: 28px; padding: 4px 7px; border-radius: 10px; color: #0b2118; background: #78f1bc; font-family: var(--font-num); font-size: 9px; font-weight: 700; }
.blackjack-table-line { height: 1px; margin: 2px 9%; background: rgba(255,255,255,.18); box-shadow: 0 0 18px rgba(66,232,165,.35); }
.blackjack-actions { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: linear-gradient(transparent, #08080b 22%); padding-top: 8px; margin-top: -8px; }
.classic-action { min-height: 48px; border: 1px solid color-mix(in srgb, var(--game-accent) 30%, var(--line)); border-radius: 9px; color: var(--game-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--game-accent) 10%, #22222a), #16161c); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.blackjack-ready { min-height: 315px; display: grid; place-items: center; text-align: center; }
.blackjack-ready h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 18px; }
.blackjack-ready p { margin: 0; color: var(--muted); font-size: 12px; }
.blackjack-ready-mark { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 13px; border: 1px solid rgba(110,231,168,.25); border-radius: 18px; color: #6ee7a8; background: rgba(110,231,168,.08); font-size: 34px; transform: rotate(-5deg); }

@media (max-width: 600px) {
  .classic-content { padding: 6px 5px 27px; }
  .classic-game { width: 100%; max-width: none; gap: 7px; }
  .classic-game-head { padding: 0 3px; }
  .classic-stage { width: 100%; border-radius: 10px; }
  .crash-stage { height: clamp(300px, 43dvh, 390px); }
  .plinko-stage { height: clamp(370px, 51dvh, 455px); min-height: 0; }
  .plinko-canvas { height: calc(100% - 27px); }
  .dice-stage { height: clamp(305px, 48dvh, 420px); min-height: 0; }
  .blackjack-stage { height: clamp(400px, 60dvh, 520px); min-height: 0; display: grid; grid-template-rows: 1fr 1px 1fr; }
  .blackjack-zone { min-height: 0; }
  .blackjack-ready { height: clamp(400px, 60dvh, 520px); min-height: 0; }
}
@media (max-width: 600px) and (max-height: 650px) {
  .classic-header { min-height: calc(50px + var(--safe-top)); }
  .classic-content { height: calc(100dvh - 82px - var(--safe-top) - var(--safe-bottom)); }
  .crash-stage { height: 300px; }
  .plinko-stage { height: 370px; }
  .dice-stage { height: 285px; }
  .blackjack-stage, .blackjack-ready { height: 370px; }
}
@media (min-width: 600.02px) and (max-width: 759px) {
  .classic-content { padding-inline: 10px; }
  .crash-stage { height: 400px; }
  .plinko-stage { height: 460px; }
  .plinko-canvas { height: calc(100% - 27px); }
  .dice-stage { height: 360px; }
  .blackjack-stage, .blackjack-ready { height: 460px; }
}
@media (min-width: 760px) {
  .classic-content { padding: 10px 14px 28px; }
  .classic-game { max-width: none; min-height: calc(100dvh - 110px - var(--safe-top) - var(--safe-bottom)); grid-template-columns: minmax(0, 1fr) clamp(310px, 28vw, 390px); gap: 10px 12px; align-items: stretch; }
  .classic-game > .classic-game-head { grid-column: 1 / -1; grid-row: 1; }
  .classic-game[data-game="crash"] { grid-template-rows: auto auto auto minmax(120px, 1fr); }
  .classic-game[data-game="crash"] > .crash-history { grid-column: 1; grid-row: 2; }
  .classic-game[data-game="crash"] > .crash-stage { grid-column: 1; grid-row: 3 / 5; min-height: 0; height: auto; }
  .classic-game[data-game="crash"] > .crash-option-row { grid-column: 2; grid-row: 2; }
  .classic-game[data-game="crash"] > .classic-controls { grid-column: 2; grid-row: 3; }
  .classic-game[data-game="crash"] > .crash-feed { grid-column: 2; grid-row: 4; min-height: 0; }
  .classic-game[data-game="crash"] .crash-players { max-height: none; }
  .classic-game[data-game="plinko"], .classic-game[data-game="dice"], .classic-game[data-game="blackjack"] { grid-template-rows: auto auto auto auto minmax(0, 1fr); }
  .classic-game[data-game="plinko"] > .plinko-stage, .classic-game[data-game="dice"] > .dice-stage, .classic-game[data-game="blackjack"] > .classic-stage { grid-column: 1; grid-row: 2 / 6; min-height: 0; height: auto; }
  .classic-game[data-game="plinko"] > .classic-segments, .classic-game[data-game="dice"] > .classic-control-row, .classic-game[data-game="blackjack"] > .classic-result { grid-column: 2; grid-row: 2; align-self: start; }
  .classic-game[data-game="plinko"] > .classic-result, .classic-game[data-game="dice"] > .classic-segments, .classic-game[data-game="blackjack"] > .classic-controls, .classic-game[data-game="blackjack"] > .blackjack-actions { grid-column: 2; grid-row: 3; align-self: start; }
  .classic-game[data-game="plinko"] > .classic-controls, .classic-game[data-game="dice"] > .classic-result { grid-column: 2; grid-row: 4; align-self: start; }
  .classic-game[data-game="dice"] > .classic-controls { grid-column: 2; grid-row: 5; align-self: start; }
  .plinko-canvas { height: calc(100% - 27px); }
  .plinko-buckets span { font-size: 9px; }
  .dice-readout { margin-top: clamp(24px, 8dvh, 74px); }
  .dice-scale { bottom: 30%; }
  .dice-track { bottom: 25%; }
  .dice-zone-copy { bottom: 16%; }
  .blackjack-zone { min-height: 0; }
  .blackjack-stage { display: grid; grid-template-rows: 1fr 1px 1fr; }
}

@media (hover:hover) {
  .game-card:hover img { transform: scale(1.05); filter: brightness(1.08); }
  .btn:hover { filter: brightness(1.05); }
  .original-card:hover { border-color: rgba(243,182,63,.4); }
}
@media (min-width: 540px) {
  main { padding-left: 20px; padding-right: 20px; }
  .topbar { padding-left: 20px; padding-right: 20px; }
  .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 11px; }
  .game-card .game-title { font-size: 11px; }
  .live-row { grid-auto-columns: 168px; }
  .originals-row { grid-auto-columns: 148px; }
}
@media (max-width: 380px) {
  .identity-copy small { display: none; }
  .balance-pill { font-size: 12px; padding-left: 7px; }
  .balance-pill small { display: none; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .achievement-grid { grid-template-columns: repeat(2, 1fr); }
  .classic-bets { grid-template-columns: repeat(3, 1fr); }
  .board-row, .rank-hero { grid-template-columns: 1fr; }
  .jackpot-play { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ================================================================
   Lobby layout — one adaptive LUCKY ROLL interface for a 1440px browser and a 390px
   Telegram Mini App: below 1024px the rail is hidden and the bottom
   nav owns navigation; at and above it the rail takes over and the
   bottom nav goes away.
   ================================================================ */

:root {
  --rail-w: 256px;
  --gutter: 14px;
  --shell-max: 1440px;
  --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-40: 40px;
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 20px;
}

/* ---------- Desktop rail ---------- */
.rail { display: none; }
.rail-brand { display: flex; align-items: center; gap: 10px; padding: 4px 2px 10px; }
.rail-brand img:first-child { width: 34px; height: auto; filter: drop-shadow(0 0 10px var(--lime-glow)); }
.rail-wordmark { height: 12px; width: auto; }
.rail-search { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 46px; margin-bottom: 6px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 13px; text-align: left; }
.rail-search:hover { border-color: var(--line-2); color: var(--text); }
.rail-search .i8 { font-size: 15px; }
.rail-nav, .rail-group { display: grid; gap: 8px; }
.rail-group { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
.rail-group .eyebrow { padding: 0 12px 10px; }
.rail-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 12px; border: 0; border-radius: var(--r-m); background: transparent; color: var(--muted); cursor: pointer; text-align: left; }
.rail-item > span { font-size: 18px; line-height: 1; flex: none; }
.rail-item b { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rail-item:hover { background: rgba(255,255,255,.04); color: var(--text); }
.rail-item.active { background: rgba(243,182,63,.09); color: var(--lime); box-shadow: inset 2px 0 0 var(--lime); }
.rail-item.sub b { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; text-transform: none; }
.rail-foot { margin-top: auto; padding-top: 10px; padding-bottom: 8px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: center; }

/* ---------- Hero carousel ---------- */
.hero { position: relative; margin: 0 0 var(--sp-24); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(180deg, #101018, #0a0a0d); box-shadow: var(--e-2, 0 20px 50px rgba(0,0,0,.35)); }
.hero-track { display: flex; transition: transform .45s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.hero-slide { position: relative; flex: 0 0 100%; display: block; aspect-ratio: 16 / 9; border: 0; padding: 0; background: transparent; cursor: pointer; color: inherit; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slide .hero-copy { position: absolute; left: 6%; right: 38%; top: 50%; transform: translateY(-50%); text-align: left; pointer-events: none; }
.hero-slide .hero-copy b { display: block; font-family: var(--font-display); font-size: clamp(15px, 3.4vw, 26px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hero-slide .hero-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: clamp(10px, 1.7vw, 13px); }
/* Operator copy drawn over real artwork: the image underneath can be light or
   busy, so the text gets its own scrim and full-strength colours instead of the
   muted palette the flat house slide can afford. */
.hero-slide.has-overlay::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8,8,11,.82) 0%, rgba(8,8,11,.62) 38%, rgba(8,8,11,0) 72%); }
.hero-slide.has-overlay .hero-copy { z-index: 1; text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.hero-slide.has-overlay .hero-copy b { color: #fff; }
.hero-slide.has-overlay .hero-copy small { color: rgba(255,255,255,.82); }
/* House slide: shown when the operator has configured no banners. */
.hero.is-empty .hero-slide { background: radial-gradient(120% 90% at 20% 0%, rgba(224,154,42,.24), transparent 55%), radial-gradient(90% 70% at 95% 100%, rgba(250,213,97,.12), transparent 55%), linear-gradient(180deg,#150c05,#080402); }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.hero-dots i, .hero-dots button { width: 6px; height: 6px; box-sizing: content-box; padding: 9px 5px; border: 0; background: rgba(255,255,255,.35); background-clip: content-box; border-radius: 999px; transition: width .2s, background .2s; cursor: pointer; }
.hero-dots .on { width: 20px; background: var(--lime); box-shadow: 0 0 10px var(--lime-glow); }
.hero.single .hero-dots, .hero.single .hero-arrow { display: none !important; }
.hero-slide.house img { opacity: .55; filter: saturate(.9); }
.hero-slide.house::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8,8,11,.92) 0%, rgba(8,8,11,.6) 45%, rgba(8,8,11,.1) 100%); }
.hero-slide.house .hero-copy { z-index: 1; right: 30%; }
.hero-slide.house .hero-copy b { color: #fff; }
.hero-slide.house .hero-copy small { color: rgba(255,255,255,.8); }
.hero-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--lime); color: var(--lime-ink); font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; place-items: center; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(8,8,11,.7); color: var(--text); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .15s, color .15s, background .15s; }
.hero-arrow.prev { left: 12px; } .hero-arrow.next { right: 12px; }
.hero-arrow:hover { border-color: var(--lime); color: var(--lime); }

/* ---------- Inline promo strip ---------- */
.promo-strip { position: relative; display: block; margin: var(--sp-24) 0 0; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.promo-strip img { display: block; width: 100%; height: 92px; object-fit: cover; }
.promo-strip-copy { position: absolute; left: 16px; bottom: 12px; }
.promo-strip-copy b { display: block; font-family: var(--font-display); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }
.promo-strip-copy small { color: var(--muted); font-size: 11px; }

/* ---------- Shelf ‹ › controls ---------- */
.shelf-nav { display: none; gap: 6px; }
.shelf-nav button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--text); cursor: pointer; }
.shelf-nav button:disabled { opacity: .4; cursor: default; }
.shelf-nav button:not(:disabled):hover { border-color: var(--lime); color: var(--lime); }

/* ---------- Bet table ---------- */
.tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; min-height: 36px; padding: 0 11px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; }
.tab.active { background: var(--surface-3); color: var(--text); }
.bet-table { overflow: hidden; }
.bet-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 52px; padding: 7px 12px; border-bottom: 1px solid var(--line); }
.bet-row:last-child { border-bottom: 0; }
.bet-row .p-avatar { width: 32px; height: 32px; }
.bet-row > div { min-width: 0; }
.bet-row b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.bet-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.bet-row .bet-cell { display: none; color: var(--muted); font-family: var(--font-num); font-size: 12px; text-align: right; white-space: nowrap; }
.bet-row .bet-win { color: var(--lime); font-family: var(--font-num); font-size: 14px; font-weight: 700; text-align: right; white-space: nowrap; }
.bet-empty { padding: 26px 12px; color: var(--muted); font-size: 12px; text-align: center; }
.bet-head { display: none; }

/* ---------- Browser footer ---------- */
.site-footer { display: block; padding: var(--sp-24) var(--gutter) var(--sp-24); border-top: 1px solid var(--line); }
.site-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-footer-logo { height: 46px; width: auto; }
.site-footer-legal { margin: 16px 0 0; color: var(--muted-2); font-size: 11px; line-height: 1.6; max-width: 760px; }
.site-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; color: var(--muted-2); font-size: 11px; }
.age-badge { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--font-num); font-size: 11px; font-weight: 700; }

/* ---------- Desktop: rail on, bottom nav off ---------- */
@media (min-width: 1024px) {
  .app { max-width: var(--shell-max); padding-bottom: 0; padding-left: var(--rail-w); }
  .rail { display: flex; flex-direction: column; gap: 4px; position: fixed; top: 0; bottom: 0; left: max(0px, calc(50% - var(--shell-max) / 2)); z-index: 60; width: var(--rail-w); padding: calc(16px + var(--safe-top)) 14px calc(20px + var(--safe-bottom)); border-right: 1px solid var(--line); background: var(--bg-2); overflow-y: auto; }

  main { padding: 0 var(--sp-40); }
  .topbar { padding-left: var(--sp-40); padding-right: var(--sp-40); }
  /* Раньше здесь прятались и .identity, и .wordmark — полоса 66px оставалась
     пустой, а пользователя в постоянном хроме десктопа не было вообще.
     Бренд уже несёт rail, поэтому возвращаем в левый слот именно идентити. */
  .topbar .identity { display: flex; max-width: 340px; }
  .topbar .identity .avatar { width: 34px; height: 34px; }
  .topbar .identity-copy small { font-size: 10px; }
  .topbar .identity-copy b { font-size: 13px; letter-spacing: .04em; }
  .wordmark { display: none; }
  .bottom-nav { display: none; }
  .site-footer { display: block; padding-left: var(--sp-40); padding-right: var(--sp-40); }
  /* Keep the 16:9 art uncropped horizontally and simply cap the height, rather
     than slicing it to a letterbox that cuts the headline out of the picture. */
  /* The wide 3:1 art is drawn for this frame, so it needs no cropping. */
  .hero-slide { aspect-ratio: 3 / 1; max-height: 380px; }
  .hero-arrow { display: grid; }
  .shelf-nav { display: flex; }
  .game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .live-row { grid-auto-columns: 200px; }
  .originals-row { grid-auto-columns: 168px; }
  .bet-head { display: grid; }
  .bet-row, .bet-head { grid-template-columns: 34px minmax(0,1.4fr) minmax(0,.7fr) minmax(0,.6fr) minmax(0,.8fr); }
  .bet-row .bet-cell { display: block; }
  .promo-strip img { height: 120px; }
  .screen { padding-top: 20px; }
}

@media (min-width: 1440px) {
  .game-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.payment-logo img, .pay-mark { display: block; border-radius: 11px; }
.pay-mark { width: 22px; height: 22px; border-radius: 6px; }

/* ============================ Table card games ============================ */
.cards-stage { min-height: 330px; padding: 10px; display: grid; align-content: center; gap: 4px; border: 1px solid #294238; border-radius: 13px; background: radial-gradient(ellipse at 50% 42%, rgba(20,117,78,.55), rgba(8,26,19,.95) 70%), #0a1711; }
.cards-ready { place-items: center; text-align: center; }
.cards-ready h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 18px; }
.cards-ready p { margin: 0; max-width: 28ch; color: var(--muted); font-size: 12px; line-height: 1.5; }
.cards-zone { min-height: 104px; display: grid; align-content: center; justify-items: center; gap: 5px; }
.cards-zone > span { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; color: rgba(255,255,255,.65); font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cards-zone > span small { font-family: var(--font-body); font-size: 9px; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.55); }
.cards-board { min-height: 96px; }
.cards-board .card-hand { padding-left: 18px; }
.cards-board .playing-card { width: 48px; height: 66px; margin-left: -18px; }
.cards-board .card-index b { font-size: 17px; }
.hand-label { display: inline-block; padding: 3px 8px; border-radius: 10px; color: #0b2118; background: #78f1bc; font-family: var(--font-num); font-size: 9px; font-weight: 700; font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.qual { font-style: normal; font-size: 9px; letter-spacing: .06em; }
.qual.ok { color: #78f1bc; }
.qual.no { color: #ffb8c8; }
.card-hand.is-selectable .playing-card { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
@media (hover: hover) and (pointer: fine) { .card-hand.is-selectable .playing-card:hover { transform: translateY(-4px); } }
.playing-card { position: relative; }
.playing-card { animation: cardDeal .2s ease backwards; }
@keyframes cardDeal { from { opacity: 0; transform: translateY(-10px) rotate(var(--card-rotate, 0deg)); } }
.playing-card.held { transform: translateY(-10px) rotate(var(--card-rotate, 0deg)); box-shadow: 0 0 0 2px var(--lime), 0 10px 24px rgba(0,0,0,.45); }
@media (hover: hover) and (pointer: fine) { .playing-card.held:hover { transform: translateY(-12px) rotate(var(--card-rotate, 0deg)); } }
.hold-tag { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 2px 6px; border-radius: 5px; background: var(--lime); color: var(--lime-ink); font-family: var(--font-display); font-size: 9px; font-weight: 900; font-style: normal; letter-spacing: .12em; }
.cards-actions { position: sticky; bottom: 0; display: grid; gap: 6px; }
.cards-actions.cols-1 { grid-template-columns: 1fr; }
.cards-actions.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cards-actions.cols-3 { grid-template-columns: repeat(3, 1fr); }
.classic-action.ghost { color: var(--text); border-color: var(--line-2); background: var(--surface); }
.cards-side { display: grid; gap: 6px; padding: 9px; border: 1px solid #26262e; border-radius: 12px; background: linear-gradient(180deg, #17171d, #101014); }
.cards-side > span { color: var(--muted); font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cards-side > span small { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; text-transform: none; }
.cards-side .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.cards-side .seg button { min-height: 36px; padding: 0 6px; border: 1px solid #33333d; border-radius: 8px; color: #d8dae0; background: linear-gradient(180deg, #24242d, #17171d); font-family: var(--font-num); font-size: 11px; font-weight: 700; cursor: pointer; }
.cards-side .seg button.active { border-color: var(--lime); color: var(--lime); background: rgba(243,182,63,.08); }
.cards-breakdown { display: flex; flex-wrap: wrap; gap: 5px; }
.cards-breakdown span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--font-num); font-size: 10px; color: var(--muted); }
.cards-breakdown span b { color: var(--text); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.cards-breakdown span.up { border-color: rgba(243,182,63,.35); color: var(--lime); }
.cards-breakdown span.down { border-color: rgba(255,92,122,.3); color: #ff8ba7; }
.pg-split { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.pg-split > div { display: grid; justify-items: center; gap: 3px; }
.pg-split small { color: rgba(255,255,255,.6); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.pg-split .card-hand { min-height: 0; }
.pg-split .playing-card { width: 42px; height: 58px; margin-left: -16px; padding: 4px; }
.pg-split .card-index b { font-size: 14px; }
.pg-split .card-hand { padding-left: 16px; }
.vp-paytable { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 6px; }
.vp-paytable span { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; background: rgba(0,0,0,.25); font-size: 9px; color: rgba(255,255,255,.7); }
.vp-paytable span b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-paytable span i { font-family: var(--font-num); font-style: normal; font-weight: 700; color: #fff; }
.vp-paytable span.lit { border-color: var(--lime); background: rgba(243,182,63,.12); color: var(--lime); }
.vp-paytable span.lit i { color: var(--lime); }
.vp-zone { min-height: 120px; }
.vp-zone .card-hand { padding-left: 0; gap: 6px; }
.vp-zone .playing-card { margin-left: 0; }


@media (min-width: 1024px) {
  .cards-stage { height: clamp(420px, 62dvh, 560px); min-height: 0; }
  .cards-ready { height: clamp(420px, 62dvh, 560px); }
  .vp-paytable { grid-template-columns: repeat(9, 1fr); }
}
@media (min-width: 760px) {
  /* Card games share blackjack's two-column desk: table on the left, result,
     side bets, actions and bet controls stacked on the right. */
  .classic-game[data-game="baccarat"], .classic-game[data-game="casinowar"], .classic-game[data-game="threecard"], .classic-game[data-game="caribbean"], .classic-game[data-game="paigow"], .classic-game[data-game="ultimate"], .classic-game[data-game="videopoker"] { grid-template-rows: auto auto auto auto auto minmax(0, 1fr); }
  .classic-game[data-game="baccarat"] > .classic-stage, .classic-game[data-game="casinowar"] > .classic-stage, .classic-game[data-game="threecard"] > .classic-stage, .classic-game[data-game="caribbean"] > .classic-stage, .classic-game[data-game="paigow"] > .classic-stage, .classic-game[data-game="ultimate"] > .classic-stage, .classic-game[data-game="videopoker"] > .classic-stage { grid-column: 1; grid-row: 2 / 7; min-height: 0; height: auto; }
  .classic-game[data-game="baccarat"] > :not(.classic-stage):not(.classic-game-head), .classic-game[data-game="casinowar"] > :not(.classic-stage):not(.classic-game-head), .classic-game[data-game="threecard"] > :not(.classic-stage):not(.classic-game-head), .classic-game[data-game="caribbean"] > :not(.classic-stage):not(.classic-game-head), .classic-game[data-game="paigow"] > :not(.classic-stage):not(.classic-game-head), .classic-game[data-game="ultimate"] > :not(.classic-stage):not(.classic-game-head), .classic-game[data-game="videopoker"] > :not(.classic-stage):not(.classic-game-head) { grid-column: 2; align-self: start; }
  .cards-stage { display: grid; grid-template-rows: auto; align-content: center; }
  .cards-actions { position: static; }
}

/* Footer: payment strip, info links, rights line. */
.site-footer-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 20px; }
.site-footer-col > b { display: block; margin-bottom: 10px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pay-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-family: var(--font-num); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.pay-chip img { width: 20px; height: 20px; border-radius: 50%; display: block; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer-links a { color: var(--muted-2); font-size: 12px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-footer-links a:hover { color: var(--text); } }
.site-footer-badges { display: inline-flex; align-items: center; gap: 8px; }
.secure-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.secure-badge .i8 { font-size: 10px; }
@media (min-width: 760px) { .site-footer-grid { grid-template-columns: 1.2fr 1fr; gap: 32px; } }
.toast.has-action { display: inline-flex; align-items: center; gap: 12px; padding-right: 8px; }
.toast-action { padding: 6px 12px; border: 0; border-radius: 8px; background: var(--lime); color: var(--lime-ink); font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .06em; cursor: pointer; white-space: nowrap; }

/* ---------- Lobby categories ---------- */
.lobby-cats { display: flex; gap: 6px; margin: 4px 0 14px; padding: 0 0 2px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
.lobby-cat { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.lobby-cat .i8 { font-size: 14px; }
.lobby-cat.active { border-color: var(--lime); color: var(--lime-ink); background: var(--lime); }
.lobby-cat.active .i8 { color: var(--lime-ink); }
.lobby-cat.search { width: 40px; padding: 0; justify-content: center; }
.lobby-cat.search.active { color: var(--text); border-color: var(--line-2); background: var(--surface); }
@media (hover: hover) and (pointer: fine) { .lobby-cat.search:hover { color: var(--text); border-color: var(--line-2); background: var(--surface); } }
@media (hover:hover) { .lobby-cat:not(.active):hover { color: var(--text); border-color: var(--line-2); } }

/* Footer on every width: sits above the bottom nav on phones. */
.site-footer { display: block; margin-top: 28px; }
.site-footer .site-footer-top { flex-wrap: wrap; }
.site-footer .site-footer-logo { height: 38px; }
@media (min-width: 1024px) {
  .originals-row, .shelf-row { grid-auto-columns: 150px; }
  .originals-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 12px; }
  .lobby-cat { min-height: 44px; padding: 0 18px; font-size: 12px; }
  .site-footer .site-footer-logo { height: 46px; }
}

/* ============================ USDT by address ============================ */
.usdt-nets { display: grid; gap: 8px; margin: 4px 0 12px; }
.usdt-net { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.usdt-net img { width: 34px; height: 34px; display: block; }
.usdt-net b { display: block; font-size: 13px; }
.usdt-net small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.usdt-net.active { border-color: var(--lime); background: rgba(243,182,63,.06); }
.usdt-badge { position: absolute; top: 9px; right: 10px; padding: 3px 7px; border-radius: 6px; background: var(--lime); color: var(--lime-ink); font-family: var(--font-display); font-size: 9px; font-weight: 900; font-style: normal; letter-spacing: .1em; }
.usdt-panel { display: grid; gap: 10px; }
.usdt-loading { display: grid; justify-items: center; gap: 10px; padding: 30px 0; color: var(--muted); }
.usdt-qr { width: 200px; max-width: 62%; aspect-ratio: 1; margin: 2px auto 4px; padding: 12px; border-radius: 14px; background: #fff; }
.usdt-qr svg { width: 100%; height: 100%; display: block; }
.usdt-label { display: block; text-align: center; color: var(--muted); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.usdt-address { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); }
.usdt-address code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-num); font-size: 12px; line-height: 1.4; color: var(--text); }
.usdt-copy { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--ink-2, #14141a); color: var(--lime); cursor: pointer; }
.usdt-copy .i8 { font-size: 17px; }
.usdt-min { margin: 0; text-align: center; color: var(--muted); font-size: 11px; }
.usdt-warning { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; padding: 10px 12px; border: 1px solid rgba(255,176,40,.32); border-radius: 12px; background: rgba(255,176,40,.08); color: #ffce7a; font-size: 11px; line-height: 1.5; }
.usdt-warning .i8 { flex: none; margin-top: 1px; font-size: 15px; color: #ffb028; }
.usdt-note { margin: 0; color: var(--muted-2); font-size: 10px; line-height: 1.5; }
.usdt-wait { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.usdt-wait span:last-child { display: grid; }
.usdt-wait b { font-size: 12px; }
.usdt-wait small { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.45; }

/* ============================ Aviator (crash skin) ============================ */
@font-face { font-family: 'Inter'; src: url('/miniapp/games/aviator/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/miniapp/games/aviator/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
.classic-game[data-game="aviator"] { --game-accent: #E50539; }
.av-history { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.av-history { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
/* Crimson state button must keep a readable label */
.classic-game[data-game="aviator"] .classic-play { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.classic-game[data-game="aviator"] .classic-play:disabled { color: rgba(255,255,255,.92); opacity: .6; }
/* Affirmative bet controls stay lime; red is reserved for the crash state */
.classic-game[data-game="aviator"] .classic-bets button.active { border-color: rgba(243,182,63,.5); color: var(--lime); background: rgba(243,182,63,.07); box-shadow: inset 0 0 0 1px var(--lime), 0 0 12px rgba(243,182,63,.12); }
.av-history::-webkit-scrollbar { display: none; }
.av-history span { flex: none; padding: 4px 9px; border-radius: 20px; background: rgba(255,255,255,.06); color: var(--muted); font-family: var(--font-num); font-size: 11px; font-weight: 700; }
.av-history span.good { color: #b7ffd0; background: rgba(66,232,165,.12); }
.av-history span.mega { color: #ffd6de; background: rgba(229,5,57,.18); }
.av-stage { position: relative; min-height: 320px; overflow: hidden; border: 1px solid #2a1420; border-radius: 14px; background: radial-gradient(ellipse at 50% 60%, #2a0713 0%, #10060a 70%, #070406 100%); }
.av-bg { position: absolute; left: 50%; top: 58%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); opacity: .18; pointer-events: none; transition: opacity .4s; animation: av-spin 60s linear infinite; animation-play-state: paused; }
.av-stage.flying .av-bg { opacity: .34; animation-play-state: running; }
.av-stage.crashed .av-bg { opacity: .1; }
@keyframes av-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.av-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.av-plane { position: absolute; left: 0; top: 0; width: 54px; height: auto; transform-origin: 50% 50%; will-change: transform; filter: drop-shadow(0 6px 14px rgba(229,5,57,.5)); transition: opacity .25s; z-index: 2; }
.av-mult { position: absolute; left: 0; right: 0; top: 40%; transform: translateY(-50%); text-align: center; z-index: 3; font-family: var(--font-num); font-weight: 700; font-size: 52px; letter-spacing: -.02em; color: #fff; text-shadow: 0 4px 30px rgba(229,5,57,.55); }
.av-mult.crashed { color: #E50539; }
.av-caption { position: absolute; left: 0; right: 0; top: calc(40% + 40px); text-align: center; z-index: 3; color: #ff9db0; font-family: 'Inter', var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; min-height: 16px; }
.av-stage.crashed .av-caption { color: #E50539; font-size: 20px; }
.av-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: space-between; padding: 8px 12px; color: rgba(255,255,255,.6); font-family: 'Inter', var(--font-body); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(transparent, rgba(0,0,0,.5)); }
.av-foot b { color: #fff; }
.classic-game[data-game="aviator"] .rtp-pill { color: #b7ffd0; border-color: rgba(66,232,165,.35); background: rgba(66,232,165,.08); }
@media (min-width: 760px) {
  .classic-game[data-game="aviator"] { grid-template-rows: auto auto auto auto auto minmax(0,1fr); }
  .classic-game[data-game="aviator"] > .av-history { grid-column: 1 / -1; grid-row: 2; }
  .classic-game[data-game="aviator"] > .av-stage { grid-column: 1; grid-row: 3 / 7; height: auto; min-height: 0; }
  .classic-game[data-game="aviator"] > .crash-option-row { grid-column: 2; grid-row: 3; }
  .classic-game[data-game="aviator"] > .classic-controls { grid-column: 2; grid-row: 4; }
  .classic-game[data-game="aviator"] > .crash-feed { grid-column: 2; grid-row: 5 / 7; min-height: 0; }
}

/* ============================ In-house line slots ============================ */
.slot-game .slot-stage { position: relative; padding: 10px; border: 1px solid #2a2340; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #241a3d, #0c0912 75%); }
.classic-game[data-game="amus804"] .slot-stage { background: #0c0912 center/cover no-repeat; background-image: linear-gradient(rgba(8,6,14,.35), rgba(8,6,14,.75)), url('/miniapp/games/amus804/bg.jpg'); }
.classic-game[data-game="sizzling6xg"] .slot-stage { background: radial-gradient(ellipse at 50% 30%, #3a1414, #120707 75%); }
.slot-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-flow: column; grid-template-rows: repeat(var(--rows), 1fr); gap: 5px; }
.slot-cell { position: relative; aspect-ratio: 198/150; display: grid; place-items: center; border-radius: 8px; background: rgba(0,0,0,.28); overflow: hidden; }
.slot-cell img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slot-cell.win { background: rgba(243,182,63,.14); box-shadow: inset 0 0 0 2px var(--lime), 0 0 16px rgba(243,182,63,.35); }
.slot-cell.win::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 26px rgba(243,182,63,.6); opacity: 0; animation: slot-pulse .6s ease-in-out infinite alternate; pointer-events: none; }
@keyframes slot-pulse { to { opacity: 1; } }
.slot-result { margin-top: 2px; }
.classic-game[data-game="amus804"] .rtp-pill, .classic-game[data-game="sizzling6xg"] .rtp-pill { color: #f3b63f; border-color: rgba(243,182,63,.4); }
@media (min-width: 760px) {
  .slot-game { grid-template-rows: auto auto minmax(0,1fr) auto; }
  .slot-game > .slot-stage { grid-column: 1 / -1; }
  .slot-game > .classic-result { grid-column: 1; }
  .slot-game > .classic-controls { grid-column: 2; }
}

/* ---------- Roulette ---------- */
/* The American felt cannot fit a phone at full size, so the numbers keep their
   3x12 grid and every outside bet becomes an equal tile below it. Nothing is
   nested or scrolled sideways: at 360px the whole table is still one tap deep. */
/* Lime like the other fast games: the reds belong to the felt, not to the
   primary action. */
.classic-game[data-game="roulette"] { --game-accent: var(--lime); }
.rl-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 150px; padding: 12px; }
.rl-wheel { position: relative; width: 116px; height: 116px; }
.rl-wheel canvas { width: 100%; height: 100%; }
.rl-pocket { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-num); font-size: 26px; font-weight: 800; color: #f4f6fb; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.rl-pocket.is-red { color: #ff7d95; } .rl-pocket.is-black { color: #cfd2da; } .rl-pocket.is-zero { color: var(--lime); }
.rl-history { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; margin: 0; padding: 0; list-style: none; max-height: 116px; overflow: hidden; }
.rl-history li { min-width: 22px; padding: 3px 5px; border-radius: 6px; font-family: var(--font-num); font-size: 11px; font-weight: 700; text-align: center; background: #1c1c24; color: #cfd2da; }
.rl-history li.is-red { background: #4a1522; color: #ff9fb1; }
.rl-history li.is-zero { background: #12452c; color: #7ee0a8; }
.rl-felt { display: grid; gap: 4px; }
.rl-zeros { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.rl-numbers { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.rl-outside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rl-cell { position: relative; min-height: 34px; display: grid; place-items: center; padding: 2px; border: 1px solid #2a2a34; border-radius: 7px; background: linear-gradient(180deg, #1b1b23, #131319); color: #d8dae0; font-family: var(--font-num); font-size: 11px; font-weight: 700; cursor: pointer; transition: border-color .12s, transform .08s; }
.rl-numbers .rl-cell { min-height: 30px; font-size: 10px; }
.rl-cell.is-red { background: linear-gradient(180deg, #47131f, #2e0c15); color: #ff9fb1; }
.rl-cell.is-black { background: linear-gradient(180deg, #1a1a22, #101015); }
.rl-cell.is-zero { background: linear-gradient(180deg, #10402a, #0a2a1c); color: #7ee0a8; }
.rl-cell:active { transform: scale(.96); }
.rl-cell.has-chip { border-color: var(--lime); }
.rl-cell:disabled { opacity: .5; cursor: default; }
.rl-chip-mark { position: absolute; top: -5px; right: -4px; min-width: 17px; padding: 1px 3px; border-radius: 999px; background: var(--lime); color: #0b0b10; font-size: 9px; font-weight: 800; font-style: normal; }
.rl-chipbar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rl-chiplabel { color: var(--muted); font-size: 10px; }
.rl-chip { min-width: 38px; height: 32px; border: 1px solid #33333d; border-radius: 999px; background: linear-gradient(180deg, #24242d, #17171d); color: #d8dae0; font-family: var(--font-num); font-size: 11px; font-weight: 700; cursor: pointer; }
.rl-chip.active { border-color: var(--lime); color: var(--lime); }
.rl-clear { margin-left: auto; height: 32px; padding: 0 11px; border: 1px solid #33333d; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.rl-total { display: flex; justify-content: space-between; align-items: baseline; padding: 0 3px; color: var(--muted); font-size: 11px; }
.rl-total b { font-family: var(--font-num); font-size: 15px; color: #f4f6fb; }

/* ---------- Mines ---------- */
.classic-game[data-game="mines"] { --game-accent: #6ee7a8; }
.mn-stage { display: grid; gap: 10px; padding: 12px; }
.mn-readout { display: flex; align-items: baseline; justify-content: center; gap: 9px; }
.mn-readout strong { font-family: var(--font-num); font-size: 27px; font-weight: 800; color: var(--game-accent); }
.mn-readout small { color: var(--muted); font-size: 10px; }
.mn-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; max-width: 300px; margin: 0 auto; width: 100%; }
.mn-cell { aspect-ratio: 1; border: 1px solid #2a2a34; border-radius: 9px; background: linear-gradient(180deg, #20202a, #16161d); box-shadow: inset 0 1px rgba(255,255,255,.04); cursor: pointer; transition: transform .1s, border-color .12s, background .18s; }
.mn-cell:not(:disabled):active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .mn-cell:not(:disabled):hover { border-color: var(--game-accent); } }
.mn-cell:disabled { cursor: default; }
.mn-cell.is-open { background: linear-gradient(180deg, #143526, #0d2419); border-color: #2f6b4d; }
.mn-cell.is-open::after { content: ''; display: block; width: 34%; height: 34%; margin: 33%; border-radius: 50%; background: var(--game-accent); opacity: .85; }
.mn-cell.is-mine { background: linear-gradient(180deg, #2a1119, #1a0a10); border-color: #5a2030; opacity: .75; }
.mn-cell.is-mine::after, .mn-cell.is-hit::after { content: ''; display: block; width: 38%; height: 38%; margin: 31%; border-radius: 50%; background: #dc3159; }
.mn-cell.is-hit { background: linear-gradient(180deg, #4a1522, #2e0c15); border-color: #dc3159; }
.mn-counts { display: flex; gap: 4px; }
.mn-counts button { flex: 1; min-height: 34px; }
/* A locked cash-out is a hint, not a call to action: it keeps the shape so the
   layout does not jump, but stops competing with the button you can press. */
#mn-cashout:disabled { background: linear-gradient(180deg, #1b1b23, #131319); border: 1px solid #2a2a34; color: var(--muted); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .rl-cell, .mn-cell { transition: none; }
}
@media (max-width: 380px) {
  .rl-stage { grid-template-columns: 1fr; justify-items: center; }
  .rl-history { max-height: 44px; justify-content: center; }
}

/* ---- bet-table tabs on phones: one full-width row, nothing clipped ---- */
@media (max-width: 600px) {
  #bets-block .section-head { flex-wrap: wrap; }
  #bets-block .tabs { flex: 1 0 100%; order: 3; margin-top: 8px; }
  #bets-block .tab { flex: 1 1 0; padding: 0 4px; text-align: center; font-size: 10.5px; }
}

/* ---- horizontal rows: a partial next tile peeks at the edge as the scroll cue ---- */
@media (max-width: 600px) {
  .shelf-row, .originals-row { grid-auto-columns: calc((100% - 20px) / 3.3); }
  .live-row { grid-auto-columns: calc((100% - 10px) / 2.4); }
}

/* ---- audit pass 2 ---- */
@media (max-width: 430px) {
  .identity-copy small { display: none; }
  .identity-copy b { font-size: 12px; }
  .wordmark-tag { display: none; }
}
@media (max-width: 480px) { .achievement-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .gate-form input, .sheet input:not([type="range"]), .search-wrap input, .promo-form input { font-size: 16px; }
}
.field { position: relative; }
.pw-toggle { position: absolute; right: 10px; bottom: 9px; border: 0; background: transparent; color: var(--lime); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; min-height: 32px; padding: 0 6px; }
.gate-form .field:has(.pw-toggle) input { padding-right: 84px; }
.gate-consent { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.gate-consent a { color: var(--lime); text-decoration: underline; text-underline-offset: 2px; }
.original-card.has-cover .oc-tag { display: none; }
.site-footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.site-footer-mark { height: 30px; width: auto; }
.site-footer .site-footer-brand .site-footer-logo { height: 14px; width: auto; }
@media (min-width: 1024px) {
  .site-footer .site-footer-brand .site-footer-logo { height: 16px; }
  .classic-game[data-game="roulette"], .classic-game[data-game="mines"] { max-width: 780px; margin-inline: auto; }
}

/* ---- crash stage: the readout sits in the middle of the sky, not pinned to the top ---- */
.crash-multiplier { inset: auto 0 auto; top: 36%; transform: translateY(-50%); }
.crash-caption { top: calc(36% + 34px); }
.crash-betting-progress { top: calc(36% + 60px); }
.task-reward.ready { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
@media (min-width: 1024px) { .crash-multiplier { font-size: 76px; } .crash-caption { font-size: 13px; top: calc(36% + 48px); } .crash-betting-progress { top: calc(36% + 76px); } }

.classic-result .is-win { color: var(--lime); margin: 0; }
.classic-result .is-loss { color: #ff8ba7; margin: 0; }

/* ---- audit pass 3 ---- */
.search-wrap:focus-within { border-color: rgba(243,182,63,.5); }
.game-card:focus-visible, .live-card:focus-visible { outline: 2px solid rgba(243,182,63,.8); outline-offset: 2px; border-radius: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- wallet: playthrough and withdrawable ---- */
.wallet-wager { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); }
.wallet-wager-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.wallet-wager-row b { color: var(--text); font-family: var(--font-num); font-size: 15px; font-weight: 700; }
.wallet-wager small { display: block; margin-top: 6px; color: var(--muted-2); font-size: 11px; line-height: 1.5; }

/* ================================================================
   LUCKY ROLL — black-gold identity
   ================================================================ */
:root {
  --bg: #050301;
  --bg-2: #0b0603;
  --surface: #120b07;
  --surface-2: #1a100a;
  --surface-3: #27170c;
  --line: rgba(238,220,166,.11);
  --line-2: rgba(250,213,97,.2);
  --text: #f7f0df;
  --ink-2: #ded0ae;
  --muted: #ad9d80;
  --muted-2: #88775e;
  --lime: #f3b63f;
  --lime-2: #d88b20;
  --lime-deep: #9c5f17;
  --lime-ink: #1a0d03;
  --lime-glow: rgba(224,154,42,.34);
  --violet: #9c6623;
  --violet-2: #fad561;
  --violet-glow: rgba(224,154,42,.3);
  --gold: #fad561;
  --silver: #d9d0bb;
  --bronze: #c17b35;
  --radius: 22px;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;
  --r-xl: 28px;
  --e-2: 0 24px 70px rgba(0,0,0,.46);
  --font-display: Manrope, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Золото было собрано семью разными способами — на одном экране это читалось
     как три разных металла. Дальше по файлу все они ссылаются сюда. */
  --grad-gold: linear-gradient(180deg,#fadf79 0%,#f3b63f 46%,#ce7917 100%);
  --grad-gold-soft: linear-gradient(180deg,#fad561 0%,#d88b20 100%);
  --grad-gold-bar: linear-gradient(90deg,#9c5f17,#fad561 52%,#e09a2a);
  --watermark: .11;
}

html { background: #050301; }
body {
  background:
    radial-gradient(900px 520px at 82% -12%, rgba(224,154,42,.11), transparent 64%),
    radial-gradient(720px 520px at -8% 42%, rgba(81,49,21,.13), transparent 68%),
    linear-gradient(180deg, #070402 0%, #050301 45%, #090503 100%);
  color: var(--text);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .21;
  background-image:
    linear-gradient(rgba(255,255,255,.013) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.01) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%);
}
.ambient { filter: blur(110px); }
.ambient-a { right: -180px; background: #e09a2a; opacity: .1; }
.ambient-b { left: -170px; background: #9c6623; opacity: .09; }

.eyebrow { color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.eyebrow.accent, .text-button { color: var(--gold); }
.section-head { margin-bottom: 14px; }
.section-head h2 { font-size: 14px; font-weight: 800; letter-spacing: .13em; }
.icon-button {
  border-color: var(--line);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), var(--surface);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.coin-mark {
  border: 1.5px solid #fad561;
  border-radius: 50%;
  transform: none;
  background: radial-gradient(circle, #221306 34%, #a9691b 36%, #f3b63f 48%, #3d220c 51%, #120904 70%);
  box-shadow: 0 0 12px rgba(224,154,42,.22), inset 0 0 0 1px rgba(255,240,181,.25);
}
.coin-mark::after { inset: 35%; border-radius: 50%; background: #fff0b5; box-shadow: 0 0 5px #fad561; }
.coin-mark.big { border-width: 2px; border-radius: 50%; }
.coin-mark.big::after { inset: 35%; border-radius: 50%; }

.boot {
  /* Арт открыт сверху и снизу, а полоса под лок-апом затемнена — иначе марка
     ложится прямо на морду кролика с фона и читается как «кролик в кролике». */
  background:
    linear-gradient(180deg, rgba(4,2,1,.42) 0%, rgba(4,2,1,.9) 34%, rgba(4,2,1,.92) 64%, rgba(4,2,1,.55) 100%),
    url('/miniapp/brand/lucky-hero.webp') 62% 14% / cover no-repeat,
    #050301;
}
.boot::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px rgba(0,0,0,.55); }
.boot > * { position: relative; z-index: 1; }
.boot-logo { width: min(66vw, 290px); }
.boot-logo .brand-lockup-mark { max-width: 148px; }
.boot-bar { height: 2px; background: rgba(250,213,97,.12); }
.boot-bar i { background: var(--grad-gold-bar); box-shadow: 0 0 14px rgba(250,213,97,.5); }

.gate {
  background: #050301;
  isolation: isolate;
}
.gate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('/miniapp/brand/lucky-hero.webp') 68% center / cover no-repeat;
}
.gate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(4,2,1,.97) 0%, rgba(4,2,1,.78) 44%, rgba(4,2,1,.22) 78%), linear-gradient(0deg, rgba(4,2,1,.74), transparent 45%);
  box-shadow: inset 0 0 170px rgba(0,0,0,.68);
}
.gate-glow { background: radial-gradient(circle at 22% 30%, rgba(224,154,42,.13), transparent 38%); }
.gate-card {
  border-color: rgba(250,213,97,.2);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(25,15,8,.91), rgba(8,4,2,.88));
  box-shadow: 0 36px 100px rgba(0,0,0,.72), inset 0 1px rgba(255,240,181,.09);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
}
.gate-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% -20%, rgba(250,213,97,.09), transparent 46%);
}
.gate-logo { width: min(67%, 245px); margin-top: 4px; margin-bottom: 24px; }
.gate-lang, .lang-switch, .settings-row em.lang-switch {
  border-color: rgba(250,213,97,.13);
  background: rgba(7,4,2,.7);
}
.gate-lang button.active, .lang-switch button.active {
  background: var(--grad-gold-soft);
  color: #1a0d03;
  box-shadow: 0 4px 14px rgba(224,154,42,.22);
}
.gate-tabs { border-color: rgba(250,213,97,.11); background: rgba(0,0,0,.3); }
.gate-tabs button { font-size: 11px; letter-spacing: .11em; }
.gate-tabs button.active { background: rgba(224,154,42,.12); color: #fad561; box-shadow: inset 0 0 0 1px rgba(250,213,97,.26); }
.gate-form input, .promo-form input, .field input, .ref-enter-row input, .card-sms-row input {
  border-color: rgba(238,220,166,.14);
  background: rgba(3,2,1,.58);
  box-shadow: inset 0 1px 10px rgba(0,0,0,.24);
}
.gate-note, .gate-consent { color: #94846b; }

.app { background: transparent; }
.topbar {
  min-height: calc(66px + var(--safe-top));
  padding-top: calc(11px + var(--safe-top));
  background: linear-gradient(180deg, rgba(8,4,2,.97), rgba(8,4,2,.86));
  border-bottom-color: rgba(250,213,97,.06);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
}
.avatar, .profile-avatar {
  background-color: #160c06;
  background-image: url('/miniapp/avatar-default.png?v=2');
  box-shadow: 0 0 0 2px #080402, 0 0 0 3px rgba(250,213,97,.75), 0 8px 24px rgba(224,154,42,.17);
}
.level-badge { border-radius: 50%; background: var(--grad-gold-soft); box-shadow: 0 0 0 2px #080402; }
.identity-copy b { color: #f7f0df; font-weight: 800; }
/* Раньше здесь стояли безусловные height, которые перебивали три блока
   адаптива выше по файлу — вордмарк был ровно 13px и на 360px, и на 1440px. */
.wordmark { flex-direction: row; align-items: center; gap: 8px; }
.wordmark-mark { width: 26px; height: 26px; flex: none; filter: drop-shadow(0 2px 8px rgba(224,154,42,.35)); }
.wordmark-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.wordmark-logo { height: clamp(12px, 3.4vw, 18px); }
/* Тэглайн из топбара убран: 4-7px высоты — это ~2px прописных, нечитаемо, а после
   перерисовки вордмарка (viewBox 620->469) он стал шире надписи и вылезал вправо.
   В лок-апе на сплэше и гейте тэглайн остаётся и там читается. */
.wordmark-tag { display: none; }
@media (max-width: 380px) {
  .wordmark-copy { display: none; }
  .wordmark-mark { width: 30px; height: 30px; }
}
.balance-pill {
  border-color: rgba(250,213,97,.24);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(81,49,21,.34), rgba(18,9,4,.68));
  color: #fad561;
  box-shadow: inset 0 1px rgba(255,240,181,.08), 0 7px 22px rgba(0,0,0,.25);
}
.balance-plus { border-radius: 50%; background: var(--grad-gold-soft); box-shadow: 0 5px 16px rgba(224,154,42,.27); }

main { padding-inline: 12px; }
.screen { padding-top: 14px; }
.panel {
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(37,23,13,.72), rgba(12,7,4,.92));
  box-shadow: inset 0 1px rgba(255,240,181,.04), 0 14px 38px rgba(0,0,0,.18);
}
.page-title { padding: 14px 3px 18px; }
.page-title h1 { color: #f7f0df; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.page-title p { color: var(--muted); }

.btn { border-radius: 14px; }
.btn-primary, .ref-share-btn.primary, .task-reward.ready {
  border: 1px solid rgba(255,240,181,.34);
  background: var(--grad-gold);
  color: #1a0d03;
  box-shadow: 0 10px 28px rgba(224,154,42,.22), inset 0 1px rgba(255,255,255,.58), inset 0 -1px rgba(102,53,5,.38);
}
.btn-secondary { background: #f7f0df; color: #160b04; }
.btn-ghost { border-color: rgba(250,213,97,.17); background: rgba(250,213,97,.045); }

.hero {
  margin-bottom: 18px;
  border-color: rgba(250,213,97,.21);
  border-radius: 26px;
  background: #080402;
  box-shadow: 0 24px 70px rgba(0,0,0,.48), inset 0 1px rgba(255,240,181,.08);
}
.hero-slide { aspect-ratio: 16 / 10; }
.hero-slide img { object-position: center center; }
.hero-slide.house img { opacity: 1; filter: saturate(1.04) contrast(1.03); }
.hero-slide.house::before, .hero-slide.has-overlay::before {
  background: linear-gradient(90deg, rgba(4,2,1,.94) 0%, rgba(4,2,1,.73) 37%, rgba(4,2,1,.13) 73%), linear-gradient(0deg, rgba(4,2,1,.58), transparent 45%);
}
.hero-slide .hero-copy, .hero-slide.house .hero-copy { left: 6%; right: 39%; top: 47%; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: #fad561;
  font-size: clamp(8px, 2vw, 11px);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero-kicker::before { content: ""; width: 18px; height: 1px; background: #fad561; box-shadow: 0 0 8px rgba(250,213,97,.5); }
.hero-slide .hero-copy b { font-size: clamp(18px, 5vw, 31px); font-weight: 900; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.hero-slide .hero-copy small { max-width: 38ch; margin-top: 7px; color: #d8caaa; line-height: 1.45; }
.hero-cta {
  min-height: 39px;
  margin-top: 14px;
  padding-inline: 16px;
  border: 1px solid rgba(255,240,181,.33);
  background: linear-gradient(180deg, #fadf79, #e09a2a);
  box-shadow: 0 9px 24px rgba(224,154,42,.24), inset 0 1px rgba(255,255,255,.55);
}
.hero-dots { bottom: 8px; }
.hero-dots .on { background: #fad561; }
.hero-arrow { border-color: rgba(250,213,97,.22); background: rgba(8,4,2,.72); }

.streak-card {
  border-color: rgba(250,213,97,.18);
  border-radius: 20px;
  background: linear-gradient(105deg, rgba(62,36,16,.76), rgba(14,8,4,.96) 54%);
}
.streak-card::before { background: radial-gradient(circle at 0 50%, rgba(250,213,97,.13), transparent 43%); }
.streak-day { color: #fad561; }
.streak-week .d i { border-color: rgba(238,220,166,.17); background: rgba(255,240,181,.03); }
.streak-week .d.gift i { border-color: rgba(250,213,97,.5); color: #fad561; background: rgba(224,154,42,.12); }

.jackpot {
  min-height: 224px;
  border-color: rgba(250,213,97,.2);
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 36%, rgba(224,154,42,.24), transparent 31%),
    linear-gradient(125deg, #1b0d04 0%, #080402 54%, #120805 100%);
  box-shadow: 0 26px 80px rgba(0,0,0,.44), inset 0 1px rgba(255,240,181,.08);
}
.jackpot::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -25px;
  top: 50%;
  width: 230px;
  height: 230px;
  transform: translateY(-50%);
  background: url('/miniapp/brand/logo-watermark.webp?v=3') center / contain no-repeat;
  opacity: .12;
  filter: drop-shadow(0 0 34px rgba(224,154,42,.32));
}
.jackpot-space .nebula, .jackpot-space .asteroid { display: none; }
.jackpot-space .stars { opacity: .28; }
.jackpot-inner { justify-items: start; align-content: center; min-height: 224px; padding: 28px 24px; text-align: left; }
.jackpot-title { gap: 9px; color: #d9c9a6; font-size: 11px; letter-spacing: .2em; }
.jackpot-title i { width: 22px; background: linear-gradient(90deg, transparent, rgba(250,213,97,.55)); }
.jackpot-amount { gap: 9px; }
.jackpot-amount strong { color: #fad561; font-size: clamp(34px, 10vw, 56px); text-shadow: 0 0 28px rgba(224,154,42,.3); }
.jackpot-play {
  min-width: 178px;
  min-height: 46px;
  margin-top: 4px;
  padding-inline: 22px;
  border: 1px solid rgba(255,240,181,.34);
  border-radius: 999px;
  clip-path: none;
  background: linear-gradient(180deg, #fadf79, #e09a2a 64%, #c97817);
  box-shadow: 0 10px 28px rgba(224,154,42,.2), inset 0 1px rgba(255,255,255,.55);
  filter: none;
  font-size: 12px;
}

.live-card, .task, .payment-method, .achievement, .search-wrap, .transaction-list, .ref-friends #ref-friends-list {
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(32,19,10,.84), rgba(11,6,3,.96));
  box-shadow: inset 0 1px rgba(255,240,181,.025);
}
.live-card { min-height: 122px; border-radius: 18px; }
.live-card .live-value, .activity .amt, .transaction-amount.positive { color: #fad561; }
.p-avatar { box-shadow: 0 0 0 1px rgba(250,213,97,.25), 0 7px 18px rgba(0,0,0,.3); }
.search-wrap:not(.open) { visibility: hidden; pointer-events: none; }
.search-wrap.open { visibility: visible; }
.lobby-cats { gap: 8px; margin-bottom: 17px; }
.lobby-cat, .chip, .tabs {
  border-color: var(--line);
  background: rgba(22,13,7,.88);
}
.lobby-cat { min-height: 42px; border-radius: 999px; }
.lobby-cat.active, .chip.active {
  border-color: rgba(255,240,181,.36);
  background: linear-gradient(180deg, #fad561, #df9226);
  color: #1a0d03;
  box-shadow: 0 6px 18px rgba(224,154,42,.16), inset 0 1px rgba(255,255,255,.42);
}
.tab.active { background: rgba(224,154,42,.13); color: #fad561; box-shadow: inset 0 0 0 1px rgba(250,213,97,.18); }
.original-card .oc-art, .game-card .cover {
  border-color: rgba(238,220,166,.12);
  border-radius: 17px;
  background: radial-gradient(circle at 50% 25%, rgba(224,154,42,.18), transparent 67%), #100905;
  box-shadow: 0 13px 28px rgba(0,0,0,.22);
}
.original-card.has-cover .oc-tag {
  display: none; /* LUCKY ROLL + ORIGINAL are baked into the v3 covers. */
  left: 5px;
  right: 5px;
  bottom: auto;
  top: 6px;
  overflow: hidden;
  padding: 5px 7px;
  border: 1px solid rgba(250,213,97,.22);
  border-radius: 7px;
  background: rgba(7,3,1,.9);
  color: #fad561;
  font-size: 7.5px;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.badge { background: var(--grad-gold-soft); }
.badge.top { background: #6b3f18; color: #fff0b5; }
.favorite { background-color: rgba(8,4,2,.72); }
.favorite.on { color: #fad561; }
.game-card .game-title, .original-card .oc-copy b { color: #eee2c8; }
.game-card .game-cat, .original-card .oc-copy small { color: #8d7c61; }
@media (hover:hover) {
  .game-card:hover .cover, .original-card:hover .oc-art { border-color: rgba(250,213,97,.45); box-shadow: 0 17px 38px rgba(0,0,0,.38), 0 0 0 1px rgba(224,154,42,.09); }
}

.podium, .your-place, .leaderboard, .activity-list, .bet-table { background: linear-gradient(145deg, rgba(31,18,10,.75), rgba(10,5,3,.94)); }
.podium .pl .rk { box-shadow: 0 0 0 2px #0b0603; }
.leader.self { background: rgba(224,154,42,.09); box-shadow: inset 0 0 0 1px rgba(250,213,97,.22); }
.daily-card, .vip-card, .ref-hero {
  background: radial-gradient(circle at 100% 0, rgba(224,154,42,.17), transparent 42%), linear-gradient(145deg, rgba(35,20,10,.85), rgba(10,5,3,.96));
}
.day { border-color: var(--line); background: rgba(0,0,0,.22); }
.day.today { border-color: rgba(250,213,97,.58); background: rgba(224,154,42,.1); }
.task { border-radius: 17px; }
.task-icon, .transaction-icon, .achievement .achievement-icon { background: linear-gradient(145deg, #35200f, #170c06); color: #fad561; }
.task-progress, .progress { background: #27180e; }
.task-progress i, .progress i { background: var(--grad-gold-bar); box-shadow: 0 0 12px rgba(224,154,42,.25); }
.promo-card { border-color: rgba(250,213,97,.16); background: linear-gradient(135deg, rgba(50,29,13,.88), rgba(10,5,3,.95)); }
.promo-icon { border: 1px solid rgba(255,240,181,.32); background: linear-gradient(145deg, #fad561, #d88b20); box-shadow: 0 8px 22px rgba(224,154,42,.2); }
.ref-code, .ref-code-big { border-color: rgba(250,213,97,.4); background: rgba(224,154,42,.06); color: #fad561; }
.ref-stats b, .ref-friend-status.on { color: #fad561; }

.wallet-card {
  border-color: rgba(250,213,97,.25);
  border-radius: 26px;
  background:
    radial-gradient(circle at 108% -12%, rgba(250,213,97,.19), transparent 38%),
    radial-gradient(circle at -12% 112%, rgba(156,102,35,.24), transparent 42%),
    linear-gradient(145deg, #221307, #0a0502 72%);
  box-shadow: 0 30px 85px rgba(0,0,0,.5), inset 0 1px rgba(255,240,181,.09);
}
.wallet-card::before { right: -20px; top: -35px; background-image: url('/miniapp/brand/logo-watermark.webp?v=3'); opacity: var(--watermark); }
.wallet-amount strong { color: #fad561; text-shadow: 0 0 22px rgba(224,154,42,.24); }
.wallet-split div, .wallet-wager { border: 1px solid rgba(238,220,166,.09); background: rgba(255,240,181,.035); }
.payment-method { border-radius: 17px; }
.payment-logo img { box-shadow: 0 7px 17px rgba(0,0,0,.24); }

.profile-hero { position: relative; padding: 22px 5px; }
.profile-hero { overflow: hidden; }
.profile-hero::after { content: ""; position: absolute; top: 50%; right: -14px; transform: translateY(-50%); width: 110px; height: 110px; background: url('/miniapp/brand/logo-watermark.webp?v=3') center/contain no-repeat; opacity: var(--watermark); pointer-events: none; }
.profile-avatar { width: 78px; height: 78px; }
.profile-hero h1 { font-weight: 900; letter-spacing: -.01em; }
.vip-badge { border-color: rgba(250,213,97,.3); border-radius: 999px; color: #fad561; background: rgba(224,154,42,.08); }
.achievement { border-radius: 16px; }
.settings-list { border-radius: 20px; }
.settings-row { min-height: 56px; border-bottom-color: rgba(238,220,166,.08); }
.settings-row > span { color: #e09a2a; }
.settings-row.support-row { background: linear-gradient(90deg, rgba(224,154,42,.1), transparent 70%); }

.site-footer {
  border-top-color: rgba(250,213,97,.09);
  background: linear-gradient(180deg, transparent, rgba(15,8,4,.48));
}
.pay-chip { border-color: var(--line); border-radius: 999px; background: rgba(22,13,7,.8); }
.age-badge { border-color: rgba(250,213,97,.3); color: #fad561; }
.secure-badge { border-color: rgba(238,220,166,.13); }

.bottom-nav {
  bottom: calc(8px + var(--safe-bottom));
  width: min(calc(100% - 20px), 700px);
  min-height: 70px;
  padding: 7px 8px;
  border: 1px solid rgba(250,213,97,.16);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(24,14,8,.96), rgba(8,4,2,.98));
  box-shadow: 0 22px 60px rgba(0,0,0,.66), inset 0 1px rgba(255,240,181,.055);
}
.nav-item { min-height: 52px; border-radius: 15px; }
.nav-item.active { color: #fad561; background: linear-gradient(180deg, rgba(224,154,42,.11), rgba(224,154,42,.025)); }
.nav-center-ring {
  width: 66px;
  height: 66px;
  /* Кольцо рисует сама марка — CSS-круг остаётся только тёмной подложкой,
     иначе получается кольцо-зазор-кольцо и маскот тонет в центре. */
  border-color: rgba(250,213,97,.14);
  background: radial-gradient(circle at 50% 32%, #2a180b, #0c0603 72%);
  box-shadow: 0 0 0 5px #080402, 0 0 34px rgba(224,154,42,.24), inset 0 1px rgba(255,240,181,.1);
}
.nav-center-ring img { width: 58px; filter: drop-shadow(0 3px 10px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(250,213,97,.3)); }
.nav-center.active .nav-center-ring { border-color: rgba(250,213,97,.32); box-shadow: 0 0 0 5px #080402, 0 0 42px rgba(224,154,42,.38); }
.nav-center.active .nav-center-ring img { filter: drop-shadow(0 3px 10px rgba(0,0,0,.55)) drop-shadow(0 0 20px rgba(250,213,97,.55)); }

.modal-backdrop { background: rgba(3,1,0,.78); backdrop-filter: blur(10px); }
.sheet {
  border-color: rgba(250,213,97,.16);
  border-radius: 28px 28px 0 0;
  background: linear-gradient(155deg, #1b1009, #0b0603 64%);
  box-shadow: 0 -35px 100px rgba(0,0,0,.7), inset 0 1px rgba(255,240,181,.05);
}
.sheet-handle { background: #5b4328; }
.sheet-close, .quick-amounts button, .provider-choice button, .info-row, .wd-net, .usdt-net { border-color: var(--line); background: rgba(30,18,10,.88); }
.toast { border-color: rgba(250,213,97,.17); background: rgba(25,14,7,.97); }

.classic-overlay { background: #070301; }
.classic-header { border-bottom-color: rgba(250,213,97,.12); background: rgba(9,4,2,.97); }
.classic-back { border-color: rgba(250,213,97,.13); background: linear-gradient(180deg, #2a190e, #110905); }
.classic-footer { border-top-color: rgba(250,213,97,.1); background: #0b0603; }
.classic-stage, .classic-controls, .cards-side { border-color: rgba(238,220,166,.12); background: linear-gradient(180deg, #1d120b, #0c0704); }
.classic-bet-row > button, .classic-bets button, .classic-segments button, .cards-side .seg button { border-color: rgba(238,220,166,.15); background: linear-gradient(180deg, #2a1b11, #150d08); }
.classic-label input, .classic-label select { border-color: rgba(238,220,166,.17); background: #170e09; }

@media (max-width: 520px) {
  .gate { padding: 16px; }
  /* Не align-items:flex-end — .gate это overflow-y:auto, и верхнее переполнение
     в скролл-область не попадает: верх карточки обрезался наглухо. Авто-margin
     схлопывается в 0, когда места нет, поэтому переполнение уходит вниз. */
  .gate { padding-bottom: 24px; }
  .gate-card { margin-top: auto; }
  .gate::before { background-position: 66% 16%; opacity: .82; }
  .gate::after { background: linear-gradient(180deg, rgba(4,2,1,.16) 0%, rgba(4,2,1,.7) 44%, #040201 84%); box-shadow: inset 0 0 90px rgba(0,0,0,.5); }
  .gate-card { padding: 25px 18px 20px; background: linear-gradient(160deg, rgba(24,14,8,.92), rgba(7,3,1,.95)); }
  .gate-logo { margin-bottom: 22px; }
  .hero-slide .hero-copy, .hero-slide.house .hero-copy { right: 34%; }
  .hero-slide .hero-copy small { display: none; }
  .hero-cta { margin-top: 10px; min-height: 35px; font-size: 9px; }
  .streak-card { grid-template-columns: 54px minmax(0,1fr); }
  .streak-week { grid-column: 1 / -1; width: 100%; margin-top: 2px; }
  .lootbox { width: 52px; height: 52px; }
  .jackpot::after { right: -50px; opacity: .1; }
  .jackpot-inner { padding-inline: 18px; }
  .jackpot-title { font-size: 9px; }
  .jackpot-title i { width: 13px; }
  .jackpot-play { min-width: 150px; }
}

@media (max-width: 380px) {
  .hero { border-radius: 22px; }
  .hero-slide { aspect-ratio: 16 / 10.8; }
  .hero-slide .hero-copy, .hero-slide.house .hero-copy { left: 5%; right: 31%; }
  .hero-slide .hero-copy b { font-size: 17px; }
  .hero-kicker { font-size: 7px; letter-spacing: .14em; }
  .jackpot-amount strong { font-size: 32px; }
  .bottom-nav { width: calc(100% - 14px); }
  .nav-item b { font-size: 8px; letter-spacing: .04em; }
}

@media (min-width: 760px) {
  .gate-card { width: 430px; padding: 34px 30px 28px; }
  .sheet { border-radius: 28px; margin-bottom: 20px; border-bottom: 1px solid rgba(250,213,97,.16); }
  .modal-backdrop { align-items: center; padding: 20px; }
}

@media (min-width: 1024px) {
  .gate { justify-content: flex-start; padding-left: max(42px, calc(50vw - 640px)); }
  .gate-card { margin-left: 0; }
  .app { border-left: 1px solid rgba(250,213,97,.05); border-right: 1px solid rgba(250,213,97,.05); }
  .rail {
    padding: calc(22px + var(--safe-top)) 15px calc(20px + var(--safe-bottom));
    border-right-color: rgba(250,213,97,.11);
    background:
      radial-gradient(circle at 50% 0, rgba(224,154,42,.1), transparent 28%),
      linear-gradient(180deg, #0d0704, #070301);
    box-shadow: 24px 0 70px rgba(0,0,0,.18);
  }
  .rail-brand { gap: 12px; padding: 2px 5px 22px; }
  .rail-brand img:first-child { width: 43px; filter: drop-shadow(0 7px 18px rgba(224,154,42,.2)); }
  .rail-wordmark { height: 15px; }
  .rail-search { border-color: rgba(238,220,166,.12); border-radius: 14px; background: rgba(27,16,9,.72); }
  .rail-item { border-radius: 14px; }
  .rail-item.active { background: linear-gradient(90deg, rgba(224,154,42,.16), rgba(224,154,42,.035)); color: #fad561; box-shadow: inset 2px 0 #fad561; }
  .rail-item:not(.active):hover { background: rgba(250,213,97,.05); }
  .topbar { border-bottom-color: rgba(250,213,97,.08); }
  main { padding-inline: 42px; }
  .screen { padding-top: 24px; }
  .hero { border-radius: 30px; }
  .hero-slide { aspect-ratio: 3 / 1; max-height: 390px; }
  .hero-slide .hero-copy, .hero-slide.house .hero-copy { left: 7%; right: 54%; }
  .hero-slide .hero-copy b { font-size: clamp(29px, 3vw, 45px); }
  .hero-slide .hero-copy small { font-size: 13px; }
  .hero-kicker { font-size: 10px; }
  .hero-cta { min-height: 43px; padding-inline: 20px; font-size: 10px; }
  .jackpot { min-height: 250px; }
  .jackpot-inner { min-height: 250px; padding-left: 42px; }
  .jackpot::after { right: 5%; width: 270px; height: 270px; opacity: .15; }
  .site-footer { padding-inline: 42px; }
}


/* ---- Originals: холодные сине-серые тексты остались от доребрендинговой
        палитры и лежат на тёплом коричневом хроме ---- */
.classic-bet-row > button, .cards-side .seg button, .rl-cell, .rl-chip { color: var(--ink-2); }
.classic-bets button, .classic-segments button { color: var(--muted); }
.classic-label input, .classic-label select { color: var(--text); }
.achievement[data-rarity="common"] small { color: var(--muted-2); }
.classic-bet-row > button, .classic-bets button, .classic-segments button, .cards-side .seg button, .rl-chip { border-color: rgba(238,220,166,.15); }

/* ---- Телефонная подгонка шапки. Раньше эти два блока стояли в начале файла,
        выше базовых правил .identity/.balance-pill/.online-pill/.section-head,
        и 15 объявлений из них молча не применялись ни на одной ширине. ---- */
@media (max-width: 430px) {
  .text-button .long { display: none; }
  .text-button .short { display: inline; }
  .balance-pill small { display: none; }
  .balance-pill { font-size: 12px; padding-left: 7px; gap: 4px; max-width: calc(50% - 64px); }
  .identity { gap: 6px; max-width: calc(50% - 64px); }
  .identity-copy small { font-size: 9px; }
}
@media (max-width: 380px) {
  .balance-pill .coin-mark { display: none; }
  .balance-plus { width: 22px; height: 22px; }
  .section-head { gap: 8px; }
  .section-head h2 { font-size: 13px; letter-spacing: .06em; }
  .online-pill { margin-left: 0; padding: 3px 7px 3px 6px; font-size: 9px; gap: 4px; }
  .online-pill b { font-size: 11px; }
}