/* ZONE 51 — soft & elegant theme for sub-pages (games, tournaments, leaderboard, promotions, vip, support, 404).
   Loaded last; overrides shared.css + inline page styles. */
:root {
  --bg: #08060b;
  --bg-elevated: #0e0a13;
  --panel: #120d19;
  --panel-2: #181120;
  --panel-3: #1f1629;
  --surface: rgba(255,255,255,0.035);
  --surface-2: rgba(255,255,255,0.055);
  --line: rgba(240,225,235,0.08);
  --line-bright: rgba(240,225,235,0.14);
  --line-accent: rgba(36,171,122,0.28);
  --line-gold: rgba(234,179,8,0.24);
  --text: #f4eef6;
  --text-2: #c9bfd0;
  --muted: #968aa3;
  --red: #22a273;
  --red-bright: #28bb85;
  --red-vivid: #24ab7a;
  --red-tint: rgba(36,171,122,0.12);
  --pink: #2ac48c;
  --gold: #e6b53b;
  --gold-bright: #f3c95a;
  --gold-dim: rgba(234,179,8,0.14);
  --green: #22a35c;
  --green-bright: #34d399;
  --cyan: #5cc8d8;
  --cyan-bright: #7fd8e6;
  --success: #34d399;
  --glow-gold: 0 8px 28px rgba(234,179,8,0.14);
  --glow-red: 0 8px 32px rgba(36,171,122,0.16);
  --glow-cyan: none;
  --shadow-soft: 0 10px 30px -10px rgba(0,0,0,0.5);
  --shadow-card: 0 14px 36px -12px rgba(0,0,0,0.65);
}

body {
  background: var(--bg) !important;
  background-image:
    radial-gradient(ellipse 70% 45% at 15% 0%, rgba(36,171,122,0.07), transparent 60%),
    radial-gradient(ellipse 55% 40% at 90% 100%, rgba(234,179,8,0.045), transparent 60%) !important;
}
body::before { opacity: 0.04 !important; }
canvas#stars-canvas, canvas.stars { opacity: 0.35; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12) !important; border-radius: 4px; }

/* ── TOPBAR ── */
.topbar {
  background: rgba(12,9,16,0.82) !important;
  backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid var(--line) !important; height: 64px !important; box-shadow: none !important;
}
.topbar::before { display: none !important; }
.brand-emblem {
  border-radius: 13px !important; border: 1px solid rgba(36,171,122,0.35) !important;
  background: linear-gradient(145deg, rgba(36,171,122,0.28), rgba(36,171,122,0.08)) !important;
  animation: none !important; box-shadow: 0 6px 18px -6px rgba(36,171,122,0.45) !important;
}
.brand-emblem::before, .brand-emblem::after { display: none !important; }
.brand-emblem span { color: #fff !important; text-shadow: none !important; animation: none !important; background: none !important; -webkit-text-fill-color: #fff !important; }
.brand-text h1 { letter-spacing: 3px !important; color: var(--text) !important; text-shadow: none !important; animation: none !important; background: none !important; -webkit-text-fill-color: var(--text) !important; }
.brand-text p { color: var(--muted) !important; letter-spacing: 2px !important; text-shadow: none !important; }
.brand-text p::after { display: none !important; }

.btn { border-radius: 12px !important; letter-spacing: 0.4px !important; text-transform: none !important; font-weight: 700 !important; font-size: 0.78rem !important; height: 38px !important; }
.btn::after { display: none !important; }
.btn-ghost { border-color: var(--line-bright) !important; color: var(--text-2) !important; background: var(--surface) !important; }
.btn-ghost:hover { border-color: rgba(255,255,255,0.22) !important; color: #fff !important; background: var(--surface-2) !important; box-shadow: none !important; }
.btn-primary, .btn-gold { border-color: transparent !important; background: linear-gradient(135deg, #24ab7a, #1e8c64) !important; color: #fff !important; box-shadow: 0 8px 22px -8px rgba(36,171,122,0.6) !important; }
.btn-primary:hover, .btn-gold:hover { filter: brightness(1.08); box-shadow: 0 10px 26px -8px rgba(36,171,122,0.75) !important; }
.btn-icon { display: none !important; }

/* games.html topbar controls */
.search-wrap input { border-radius: 9999px !important; border: 1px solid var(--line-bright) !important; background: var(--surface) !important; height: 40px !important; }
.search-wrap input:focus { border-color: rgba(36,171,122,0.5) !important; box-shadow: 0 0 0 3px rgba(36,171,122,0.12) !important; }
.bal-pill-sep { background: var(--line-gold) !important; }
.bal-pill-btn { border-radius: 9999px !important; }

/* ── GENERIC SOFTENING (all sub-pages) ── */
.hero { border: none !important; border-bottom: 1px solid var(--line) !important; background: transparent !important; box-shadow: none !important; }
.hero::before, .hero::after, .hero-bg, .hero-bg-text { opacity: 0.06 !important; }
.hero h2 { text-shadow: none !important; letter-spacing: 1.5px !important; color: var(--text) !important; }
.hero-badge, .hero-kicker {
  border-radius: 9999px !important; border: 1px solid var(--line-accent) !important; background: var(--red-tint) !important;
  color: #47d8a3 !important; letter-spacing: 1.4px !important; text-shadow: none !important; box-shadow: none !important; padding: 6px 14px !important;
}
.hero-badge::before { background: var(--green-bright) !important; box-shadow: 0 0 8px rgba(52,211,153,0.7) !important; }
.hero-sub, .hero-left p { color: var(--text-2) !important; }
.hero-stats { border-radius: 20px !important; border: 1px solid rgba(255,255,255,0.07) !important; background: var(--surface) !important; overflow: hidden; box-shadow: var(--shadow-soft) !important; }
.hero-stat, .hs-item { border-color: rgba(255,255,255,0.06) !important; }
.hero-stat-val, .hs-val, .prize-chip-amt, .trust-num, .hero-stat strong { color: var(--gold-bright) !important; text-shadow: none !important; }
.hero-stat-lbl, .hs-lbl, .prize-chip-rank, .trust-label { color: var(--muted) !important; letter-spacing: 1.2px !important; }

.sec-line { width: 22px !important; height: 3px !important; border-radius: 3px !important; background: linear-gradient(90deg, var(--red-vivid), var(--gold)) !important; animation: none !important; opacity: 1 !important; flex: none !important; }
.sec-head-line { background: linear-gradient(90deg, transparent, var(--line-bright)) !important; height: 1px !important; }
.sec-head-line.right { background: linear-gradient(90deg, var(--line-bright), transparent) !important; }
.sec-title, .sec-head-title, .sec-title h3, .sec-header h3 { letter-spacing: 1.6px !important; color: var(--text) !important; text-shadow: none !important; background: none !important; -webkit-text-fill-color: var(--text) !important; }
.sec-subtitle { color: var(--muted) !important; }

/* tabs / filter bars */
.page-wrap .filter-bar, .tabs-bar { background: rgba(12,9,16,0.85) !important; border-bottom: 1px solid var(--line) !important; backdrop-filter: blur(14px); top: 64px !important; }
.ftab, .tab {
  border-radius: 9999px !important; border: 1px solid transparent !important; border-bottom: 1px solid transparent !important;
  color: var(--muted) !important; letter-spacing: 0.4px !important; text-transform: none !important; font-size: 0.82rem !important; font-weight: 700 !important;
  padding: 9px 18px !important; margin: 8px 2px !important; text-shadow: none !important; box-shadow: none !important;
}
.ftab:hover, .tab:hover { color: var(--text) !important; background: rgba(255,255,255,0.05) !important; }
.ftab.active, .tab.active { color: #fff !important; background: rgba(36,171,122,0.2) !important; border-color: rgba(36,171,122,0.4) !important; }
.ftab .cnt { border-radius: 9999px !important; background: rgba(255,255,255,0.08) !important; color: var(--text) !important; }
.ftab.active .cnt { background: rgba(36,171,122,0.45) !important; }

/* cards & boxes */
.t-card, .featured-t, .how-card, .term-card, .lb-preview, .prizes-section, .info-card, .podium-block, .terms,
.bcard, .empty-state, .level-card, .benefit, .step, .faq-item, .cta, .ch-card, .response-strip, .status-card, .tip-card,
.contact-form-wrap, .contact-info-wrap, .faq-panel, .table-wrap, .lb-table, .ps-table, .cb-table, .prize-section-inner,
.hero-panel, .trust-card, .content-filters, .state-box, .err-card {
  border-radius: 20px !important; border: 1px solid rgba(255,255,255,0.07) !important;
  background: linear-gradient(160deg, rgba(28,19,38,0.7), rgba(13,9,18,0.9)) !important;
  box-shadow: var(--shadow-soft) !important;
}
.t-card::before, .featured-t::before, .bcard::before, .level-card::before, .level-card.featured::before, .ch-card::before, .cta::before, .cta::after, .hero-panel::before, .hero-main::before, .hero-main::after, .err-card::before, .bcard-glow { display: none !important; }
.t-card:hover, .bcard:hover, .level-card:hover, .ch-card:hover, .how-card:hover, .info-card:hover, .benefit:hover, .trust-card:hover {
  border-color: rgba(36,171,122,0.35) !important; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.7) !important; transform: translateY(-3px);
}
.level-card.featured { border-color: rgba(234,179,8,0.35) !important; background: linear-gradient(160deg, rgba(234,179,8,0.1), rgba(13,9,18,0.92)) !important; }
.levels-grid, .steps, .benefits-grid, .how-grid, .terms-grid, .info-grid, .t-grid, .bonus-grid, .status-grid, .tips-grid { gap: 14px !important; background: transparent !important; border: none !important; }
.level-card, .level-card:last-child { border-right: 1px solid rgba(255,255,255,0.07) !important; }
.level-divider { display: none !important; }

/* icons / small badges */
.ft-trophy, .tc-icon, .how-icon, .step-icon, .benefit-icon, .info-icon, .ch-icon, .ci-icon, .lb-avatar, .lb-ava, .podium-ava, .rank-icon, .bcard-img-icon {
  border-radius: 14px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: var(--surface) !important; box-shadow: none !important;
}
.ft-trophy::before { display: none !important; }
.podium-ava, .lb-ava, .lb-avatar { border-radius: 50% !important; }
.ft-tag, .tc-badge, .bcard-tag, .bcard-fs-badge, .ch-badge, .ci-avail, .prize-label, .lb-rank, .hero-right .label, .hero-left .label, .step-num, .how-num, .status-label {
  border-radius: 9999px !important; text-shadow: none !important; box-shadow: none !important; letter-spacing: 1px !important;
}
.tc-badge.live, .ft-live-badge { background: rgba(36,171,122,0.2) !important; color: #47d8a3 !important; border-color: rgba(36,171,122,0.4) !important; }
.tc-badge.free { background: rgba(52,211,153,0.12) !important; color: var(--green-bright) !important; border-color: rgba(52,211,153,0.3) !important; }
.tc-badge.vip { background: var(--gold-dim) !important; color: var(--gold-bright) !important; border-color: var(--line-gold) !important; }
.tc-btn, .bcard-claim, .cta-btns .btn, .form-submit, .submit-btn, .err-btn, .hero-btn, .load-more-btn, .lb-prev-head a, .faq-a a {
  border-radius: 12px !important; text-shadow: none !important; letter-spacing: 0.4px !important; text-transform: none !important; font-weight: 700 !important;
}
.tc-btn, .bcard-claim, .form-submit, .submit-btn, .err-btn-primary, .hero-btn.primary, .load-more-btn {
  border: 1px solid transparent !important; background: linear-gradient(135deg, #24ab7a, #1e8c64) !important; color: #fff !important; box-shadow: 0 8px 22px -8px rgba(36,171,122,0.6) !important;
}
.tc-btn:hover, .bcard-claim:hover, .form-submit:hover, .submit-btn:hover, .err-btn-primary:hover, .hero-btn.primary:hover, .load-more-btn:hover { filter: brightness(1.08); box-shadow: 0 10px 26px -8px rgba(36,171,122,0.75) !important; transform: translateY(-1px); }
.bcard-claim::before { display: none !important; }
.tc-btn.disabled, .bcard-claim:disabled { background: rgba(255,255,255,0.06) !important; color: var(--muted) !important; box-shadow: none !important; filter: none !important; }
.err-btn-ghost, .hero-btn:not(.primary) { border: 1px solid var(--line-bright) !important; background: var(--surface) !important; color: var(--text) !important; box-shadow: none !important; }

/* progress bars */
.prog-wrap, .prog-bar, .tc-bar, .pp-level-track { border-radius: 9999px !important; overflow: hidden; background: rgba(255,255,255,0.06) !important; }
.prog-fill { border-radius: 9999px !important; box-shadow: none !important; }

/* tables */
.lb-table th, .ps-table th, .cb-table th { color: var(--muted) !important; letter-spacing: 1.2px !important; background: rgba(255,255,255,0.03) !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; text-shadow: none !important; }
.lb-table td, .ps-table td, .cb-table td { border-bottom: 1px solid rgba(255,255,255,0.05) !important; border-right: none !important; }
.lb-table tbody tr:hover, .ps-table tr:hover td, .cb-table tr:hover td { background: rgba(255,255,255,0.03) !important; }
.lb-pts, .podium-score, .lb-prize, .podium-prize, .ps-prize, .ft-prize-amt, .tc-pool { color: var(--gold-bright) !important; text-shadow: none !important; }
.lb-username, .podium-name, .lb-user { color: var(--text) !important; text-shadow: none !important; }
.podium-crown { filter: none !important; }

/* prize chips (leaderboard) */
.prize-chip { border-radius: 14px !important; border: 1px solid rgba(255,255,255,0.07) !important; background: var(--surface) !important; box-shadow: none !important; }
.prize-chip.p1 { border-color: var(--line-gold) !important; background: var(--gold-dim) !important; }
.prize-chip.p2 { border-color: rgba(255,255,255,0.16) !important; }
.prize-chip.p3 { border-color: rgba(36,171,122,0.3) !important; }

/* faq */
.faq-q, .faq-cat-btn { border-radius: 14px !important; }
.faq-cat-btn { border: 1px solid rgba(255,255,255,0.07) !important; background: var(--surface) !important; color: var(--text-2) !important; }
.faq-cat-btn.active { background: rgba(36,171,122,0.18) !important; border-color: rgba(36,171,122,0.4) !important; color: #fff !important; }
.faq-q-text { color: var(--text) !important; }
.faq-arrow, .faq-chevron { color: var(--muted) !important; }

/* forms (support) */
.form-group input, .form-group select, .form-group textarea {
  border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.04) !important; color: var(--text) !important;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: rgba(36,171,122,0.55) !important; box-shadow: 0 0 0 3px rgba(36,171,122,0.14) !important; }
.form-group label { color: var(--muted) !important; letter-spacing: 1.2px !important; }
.ch-status.online, .ci-avail.online, .status-dot.ok, .avail-dot, .online-dot, .live-dot { color: var(--green-bright) !important; }

/* countdown / timers */
.countdown, .ft-timer, .tc-timer { color: var(--gold-bright) !important; text-shadow: none !important; }
.ft-tnum { border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: var(--surface) !important; color: var(--text) !important; text-shadow: none !important; }

/* ── games.html: sidebar (same markup as index.html) → soft palette ── */
.sidebar { background: linear-gradient(180deg, #0f0b14 0%, #0a070d 100%) !important; border-right: 1px solid var(--line) !important; box-shadow: none !important; }
.sb-auth-card { border-color: rgba(36,171,122,0.25) !important; background: linear-gradient(135deg, rgba(36,171,122,0.16), rgba(255,255,255,0.03)) !important; }
.sb-avatar { background: radial-gradient(circle at 30% 30%, rgba(36,171,122,0.6), rgba(19,90,64,0.6)) !important; border-color: rgba(36,171,122,0.35) !important; }
.sb-seg-btn.active { background: linear-gradient(135deg, rgba(36,171,122,0.3), rgba(36,171,122,0.12)) !important; border-color: rgba(36,171,122,0.45) !important; box-shadow: none !important; }
.sb-wheel { border-color: rgba(234,179,8,0.3) !important; background: linear-gradient(90deg, rgba(13,45,33,0.9), rgba(8,18,14,0.9) 60%, rgba(36,171,122,0.16)) !important; }
.sb-wheel-text span { color: var(--gold-bright) !important; }
.sb-wheel-art i { background: conic-gradient(#24ab7a 0 45deg, #e6b53b 45deg 90deg, #24ab7a 90deg 135deg, #2b1b26 135deg 180deg, #24ab7a 180deg 225deg, #e6b53b 225deg 270deg, #24ab7a 270deg 315deg, #2b1b26 315deg 360deg) !important; border-color: rgba(243,201,90,0.85) !important; box-shadow: 0 0 18px rgba(36,171,122,0.4), inset 0 0 0 4px rgba(0,0,0,0.5) !important; }
.sidebar .sb-group .menu-item .mi-icon { color: #47d8a3 !important; }
.sidebar .sb-group .menu-item.active { background: linear-gradient(90deg, rgba(36,171,122,0.26), rgba(36,171,122,0.07)) !important; }
.sidebar .sb-group .menu-item.active .mi-icon { background: var(--red-vivid) !important; box-shadow: 0 6px 14px -4px rgba(36,171,122,0.6) !important; }
.sidebar .sb-group .menu-item.active::before { display: none !important; }
.sb-promo { background: linear-gradient(135deg, #16694b 0%, #24ab7a 60%, #48d8a3 100%) !important; box-shadow: 0 12px 28px -10px rgba(36,171,122,0.5) !important; }
.sb-soc { color: #47d8a3 !important; }
.sb-247 { background: var(--green-bright) !important; }
.m-badge.red { color: #47d8a3 !important; border-color: rgba(36,171,122,0.35) !important; background: var(--red-tint) !important; }
.m-badge.gold { color: var(--gold-bright) !important; border-color: var(--line-gold) !important; background: var(--gold-dim) !important; }
.m-badge.green { color: var(--green-bright) !important; border-color: rgba(52,211,153,0.3) !important; background: rgba(52,211,153,0.08) !important; }
.sb-live-dot { background: var(--green-bright) !important; box-shadow: 0 0 8px rgba(52,211,153,0.6) !important; }
.sb-user-block { display: flex; flex-direction: column; gap: 8px; }
.sb-user-actions { display: flex; gap: 8px; }
.sb-deposit-btn, .sb-profile-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; border-radius: 12px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.2px;
  transition: transform .18s, filter .18s, background-color .18s, border-color .18s, box-shadow .18s;
}
.sb-deposit-btn { flex: 1; border: 1px solid transparent; color: #fff; background: linear-gradient(135deg, #24ab7a, #1e8c64); box-shadow: 0 10px 22px -10px rgba(36,171,122,0.75); }
.sb-deposit-btn svg { width: 15px; height: 15px; }
.sb-deposit-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(36,171,122,0.9); }
.sb-profile-btn { width: 38px; flex: none; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: var(--text-2); }
.sb-profile-btn svg { width: 16px; height: 16px; }
.sb-profile-btn:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.2); }
.sb-auth-bal { font-family: 'Inter', sans-serif !important; font-weight: 800 !important; font-size: 0.82rem !important; letter-spacing: 0 !important; }
.sb-support { position: relative; }

/* ── games.html ── */
.topbar-mob-auth { display: none; }
@media (max-width: 1100px) {
  .topbar-mob-auth { display: flex; align-items: center; flex-shrink: 0; margin-left: auto; }
  .tm-login {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; min-height: 0; padding: 0 14px; border-radius: 9999px; cursor: pointer;
    border: 1px solid transparent; background: linear-gradient(135deg, #24ab7a, #1e8c64); color: #fff;
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.2px; white-space: nowrap;
    box-shadow: 0 8px 20px -8px rgba(36,171,122,0.7);
  }
  .tm-login svg { width: 15px; height: 15px; }
  .tm-avatar {
    width: 38px; height: 38px; min-height: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
    border: 1px solid rgba(36,171,122,0.45); background: radial-gradient(circle at 30% 30%, rgba(36,171,122,0.55), rgba(10,48,34,0.9)); color: #fff;
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.9rem;
  }
  body.page-games .topbar-right { margin-left: 0; gap: 0; }
}
.hero-main, .hero-panel { border-radius: 22px !important; }
.hero-main h2 { color: var(--text) !important; text-shadow: none !important; letter-spacing: 0.5px !important; }
.hero-main p { color: var(--text-2) !important; }
.hero-panel-title { color: var(--text) !important; letter-spacing: 1.4px !important; }
.win-row { border-radius: 14px !important; border: 1px solid rgba(255,255,255,0.06) !important; background: rgba(255,255,255,0.035) !important; animation: none !important; }
.win-amount { color: var(--green-bright) !important; text-shadow: none !important; }
.win-thumb { border-radius: 10px !important; }
.trust-card { border-radius: 18px !important; }
.content-filters { border-radius: 18px !important; }
@media (min-width: 901px) { .content-filters { top: 80px !important; } }
.content-filters::before { display: none !important; }
.cfilter-label, .filter-text { color: var(--muted) !important; letter-spacing: 1.2px !important; }
.cfilter-btn, .chip, .mob-filter-btn { border-radius: 9999px !important; border: 1px solid rgba(255,255,255,0.07) !important; background: var(--surface) !important; color: var(--text-2) !important; box-shadow: none !important; }
.cfilter-btn.active, .chip.active, .mob-filter-btn.active { border-color: rgba(36,171,122,0.4) !important; background: rgba(36,171,122,0.2) !important; color: #fff !important; box-shadow: none !important; }
.provider-trigger { border-radius: 12px !important; border: 1px solid var(--line-bright) !important; background: var(--surface-2) !important; color: var(--text) !important; box-shadow: none !important; }
.provider-dropdown.open .provider-trigger, .provider-trigger:hover { border-color: rgba(36,171,122,0.45) !important; background: var(--red-tint) !important; box-shadow: none !important; }
.provider-list { border-radius: 16px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: rgba(18,13,25,0.98) !important; box-shadow: 0 24px 60px -16px rgba(0,0,0,0.8) !important; }
.provider-option.active { background: rgba(36,171,122,0.2) !important; border-color: rgba(36,171,122,0.35) !important; }
.game-filter-btn { border-radius: 9999px !important; border: 1px solid rgba(255,255,255,0.07) !important; background: var(--surface) !important; color: var(--text-2) !important; box-shadow: none !important; }
.game-filter-btn::before, .game-filter-btn::after { display: none !important; }
.game-filter-btn:hover { background: var(--surface-2) !important; color: #fff !important; }
.game-filter-btn.active { border-color: rgba(36,171,122,0.4) !important; background: rgba(36,171,122,0.2) !important; color: #fff !important; box-shadow: none !important; }
.game-card { border-radius: 14px !important; border: 1px solid rgba(255,255,255,0.06) !important; background: #0e0a14 !important; }
.game-card:hover { border-color: rgba(36,171,122,0.35) !important; box-shadow: 0 16px 36px -10px rgba(0,0,0,0.7) !important; }
.game-card::before { display: none !important; }
.game-card-prov { color: var(--muted) !important; }
.game-badge, .badge-hot, .badge-new { border-radius: 9999px !important; text-shadow: none !important; box-shadow: none !important; }
.play-btn { border-radius: 9999px !important; border: none !important; background: linear-gradient(135deg, #24ab7a, #1e8c64) !important; color: #fff !important; box-shadow: 0 8px 22px -8px rgba(36,171,122,0.7) !important; text-transform: none !important; letter-spacing: 0.4px !important; font-weight: 700 !important; }
.load-more-btn { font-family: 'Inter', sans-serif !important; font-size: 0.8rem !important; padding: 12px 34px !important; }
.game-win-bar { background: rgba(12,9,16,0.96) !important; border-bottom: 1px solid var(--line) !important; }
.game-win-bar::after { display: none !important; }
#provUnavailModal { border-radius: 22px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: linear-gradient(170deg, #17121c, #0d0a10) !important; }
.pu-close { border-radius: 50% !important; }

/* 404 */
.err-code { text-shadow: none !important; color: var(--text) !important; }
.err-code::before, .err-code::after, .err-scanlines { display: none !important; }
.err-label { color: #47d8a3 !important; letter-spacing: 1.6px !important; }

/* footer */
.site-footer { background: #0a070d !important; border-top: 1px solid rgba(255,255,255,0.06) !important; border-radius: 28px 28px 0 0 !important; margin-top: 40px !important; }
.sf-top { border-bottom: 1px solid var(--line) !important; }
.sf-logo { letter-spacing: 3px !important; }
.sf-logo span { color: var(--red-bright) !important; text-shadow: none !important; }
.sf-social { border-radius: 12px !important; border: 1px solid var(--line-bright) !important; background: var(--surface) !important; color: var(--text-2) !important; }
.sf-social:hover { border-color: var(--line-accent) !important; background: var(--red-tint) !important; color: #fff !important; }
.sf-col-head { color: var(--gold-bright) !important; letter-spacing: 1.6px !important; text-shadow: none !important; }
.sf-link { color: var(--text-2) !important; }
.sf-link:hover { color: #fff !important; }
.sf-pay-icon { border-radius: 10px !important; opacity: 0.65 !important; }
.sf-pay-icon:hover { opacity: 1 !important; }
.sf-lang-btn { border-radius: 12px !important; border: 1px solid var(--line-bright) !important; background: var(--surface) !important; }
.sf-lang-dropdown { border-radius: 14px !important; }
.sf-18-badge { border-radius: 10px !important; }
.sf-bottom, .sf-license, .sf-copyright { color: var(--muted) !important; }


/* mobile bottom nav (mobile-nav.js) */
.mob-bottom-nav { background: rgba(12,9,16,0.96) !important; border-top: 1px solid var(--line) !important; border-radius: 22px 22px 0 0 !important; backdrop-filter: blur(14px); }
.mob-nav-center-btn { background: linear-gradient(135deg, #24ab7a, #1e8c64) !important; border-color: rgba(255,255,255,0.15) !important; box-shadow: 0 10px 24px -8px rgba(36,171,122,0.7) !important; }

/* footer modals (i18n.js) */
.fm-box { border-radius: 22px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: linear-gradient(170deg, #17121c, #0d0a10) !important; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85) !important; }
.fm-box::before { display: none !important; }
.fm-h { color: var(--text) !important; text-shadow: none !important; }
.fm-stat { border-radius: 14px !important; border: 1px solid rgba(255,255,255,0.07) !important; background: var(--surface) !important; }
.fm-stat-val { color: var(--gold-bright) !important; text-shadow: none !important; }
.fm-cta { border-radius: 12px !important; }
.fm-note { border-radius: 12px !important; }
.fm-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14) !important; }

/* live win toast (livefeed.js) */
.z51-fw { border-radius: 14px !important; border: 1px solid rgba(255,255,255,0.08) !important; border-left: 3px solid var(--red-vivid) !important; background: rgba(18,13,25,0.94) !important; box-shadow: 0 14px 36px -12px rgba(0,0,0,0.7) !important; }

/* ── leaderboard hero alignment ── */
.page-leaderboard .hero-inner { align-items: stretch !important; gap: 28px !important; }
.page-leaderboard .hero-left { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.page-leaderboard .hero-left .label, .page-leaderboard .hero-right .label {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 12px; margin-bottom: 14px !important;
  border: 1px solid var(--line-accent) !important; background: var(--red-tint) !important; color: #47d8a3 !important;
  font-size: 0.6rem !important; font-weight: 800; letter-spacing: 1.6px !important; text-transform: uppercase; text-shadow: none !important;
}
.page-leaderboard .hero-left .label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 8px rgba(52,211,153,0.7); }
.page-leaderboard .hero-left h2 { color: var(--text) !important; letter-spacing: 1px !important; text-shadow: none !important; font-size: 2.3rem !important; }
.page-leaderboard .hero-left p { color: var(--text-2) !important; font-size: 0.86rem !important; max-width: 46ch !important; margin-bottom: 24px !important; }
.page-leaderboard .hero-left .hero-stats { margin-top: auto !important; }
.page-leaderboard .hero-stats { border-radius: 18px !important; }
.page-leaderboard .hero-stat { padding: 16px 22px !important; text-align: left !important; }
.page-leaderboard .hero-stat:last-child { border-right: none !important; }
.page-leaderboard .hero-stat-val { font-family: 'Inter', sans-serif !important; font-weight: 800 !important; font-size: 1.25rem !important; letter-spacing: -0.01em !important; }
.page-leaderboard .hero-stat-lbl { font-size: 0.58rem !important; margin-top: 4px; }
.page-leaderboard .hero-right {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start !important; text-align: left !important; align-self: flex-end;
  padding: 22px 26px !important; border-radius: 20px !important; border: 1px solid var(--line-gold) !important;
  background: radial-gradient(120% 120% at 100% 0%, rgba(234,179,8,0.14), transparent 60%), var(--surface) !important; min-width: 300px; box-shadow: var(--shadow-soft);
}
.page-leaderboard .hero-right .label { border-color: var(--line-gold) !important; background: var(--gold-dim) !important; color: var(--gold-bright) !important; margin-bottom: 12px !important; }
.page-leaderboard .hero-right .countdown { font-family: 'Inter', sans-serif !important; font-weight: 800 !important; font-size: 1.7rem !important; letter-spacing: 0 !important; color: var(--text) !important; font-variant-numeric: tabular-nums; text-shadow: none !important; }
.page-leaderboard .prize-section { border-bottom: 1px solid var(--line) !important; }
.page-leaderboard .prize-section-inner { border: none !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; }
.page-leaderboard .prize-label { letter-spacing: 1.6px !important; font-weight: 700; color: var(--muted) !important; }
.page-leaderboard .prize-strip { display: flex !important; gap: 10px !important; flex-wrap: nowrap !important; }
.page-leaderboard .prize-chip { flex: 1 1 0 !important; min-width: 0 !important; padding: 14px 12px !important; gap: 6px !important; }
.page-leaderboard .prize-chip-rank { font-size: 0.58rem !important; letter-spacing: 1.4px !important; }
.page-leaderboard .prize-chip-amt { font-family: 'Inter', sans-serif !important; font-weight: 800 !important; font-size: 1.05rem !important; letter-spacing: -0.01em !important; }
.page-leaderboard .prize-chip.p1 .prize-chip-amt { color: var(--gold-bright) !important; }
.page-leaderboard .prize-chip.p2 .prize-chip-amt { color: #e6e3ee !important; }
.page-leaderboard .prize-chip.p3 .prize-chip-amt { color: #89e2cc !important; }
.page-leaderboard .prize-chip.p2 { border-color: rgba(230,227,238,0.22) !important; background: rgba(230,227,238,0.05) !important; }
.page-leaderboard .prize-chip.p3 { border-color: rgba(137,226,204,0.3) !important; background: rgba(137,226,204,0.07) !important; }
@media (max-width: 860px) {
  .page-leaderboard .hero-right { align-self: stretch; min-width: 0; }
  .page-leaderboard .prize-strip { flex-wrap: wrap !important; }
  .page-leaderboard .prize-chip { flex: 1 1 calc(33% - 10px) !important; }
}

/* ── GAMES LOBBY (Stake-style rows) ── */
.content.lobby { gap: 20px !important; }
.lobby-tabs { display: flex; gap: 4px; padding: 6px; border-radius: 9999px; border: 1px solid var(--line); background: var(--surface); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lobby-tabs::-webkit-scrollbar { display: none; }
.lobby-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 9999px; border: none; background: transparent; color: var(--muted); font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color .18s, color .18s; }
.lobby-tab svg { width: 16px; height: 16px; fill: currentColor; }
.lobby-tab em { font-style: normal; font-size: 0.56rem; letter-spacing: 0.8px; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: rgba(234,179,8,0.14); color: var(--gold-bright); }
.lobby-tab:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.lobby-tab.active { color: #fff; background: linear-gradient(135deg, #24ab7a, #1e8c64); box-shadow: 0 8px 20px -8px rgba(36,171,122,0.7); }
.lobby-tab.active em { background: rgba(255,255,255,0.2); color: #fff; }

.lobby-promos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-card { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; min-height: 118px; padding: 18px 18px 18px 16px; border-radius: 22px; border: 1px solid rgba(255,255,255,0.07); text-decoration: none; text-align: left; color: var(--text); cursor: pointer; overflow: hidden; font-family: 'Inter', sans-serif; transition: transform .22s, border-color .22s, box-shadow .22s; }
.lp-card::after { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: var(--lp); opacity: 0.22; filter: blur(30px); pointer-events: none; }
.lp-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.14); box-shadow: 0 22px 44px -18px rgba(0,0,0,0.8); }
.lp-welcome    { --lp: #e6b53b; background: linear-gradient(135deg, #1c1420 0%, #120d17 100%); }
.lp-tournament { --lp: #22a273; background: linear-gradient(135deg, #1e1218 0%, #120d17 100%); }
.lp-crypto     { --lp: #26a17b; background: linear-gradient(135deg, #12181a 0%, #0f0d14 100%); }
.lp-art { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--lp) 18%, transparent); border: 1px solid color-mix(in srgb, var(--lp) 40%, transparent); color: var(--lp); }
.lp-art svg { width: 26px; height: 26px; }
.lp-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 70px; }
.lp-text em { font-style: normal; font-size: 0.6rem; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; color: var(--lp); }
.lp-text b { font-size: 1rem; font-weight: 800; line-height: 1.2; color: var(--text); }
.lp-text small { font-size: 0.72rem; color: var(--muted); line-height: 1.4; }
.lp-go { position: absolute; right: 16px; bottom: 16px; font-size: 0.7rem; font-weight: 800; color: var(--text-2); padding: 6px 10px; border-radius: 9999px; border: 1px solid var(--line); background: rgba(0,0,0,0.25); transition: background-color .18s, color .18s; }
.lp-card:hover .lp-go { background: var(--lp); color: #0d0911; border-color: transparent; }

.lobby-row, .lobby-block { display: flex; flex-direction: column; gap: 12px; }
.lobby-row-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lobby-row-head h3 { margin: 0; display: inline-flex; align-items: center; gap: 9px; font-family: 'Inter', sans-serif !important; font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; text-transform: none !important; color: var(--text); }
.lobby-row-head h3 svg { width: 18px; height: 18px; fill: var(--gold-bright); }
.lobby-row-sub { font-size: 0.74rem; color: var(--muted); }
.lobby-row-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.lobby-seeall { height: 32px; padding: 0 12px; border-radius: 9999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700; cursor: pointer; transition: background-color .18s, color .18s; }
.lobby-seeall b { color: var(--muted); font-weight: 600; margin-left: 4px; }
.lobby-seeall:hover { background: rgba(255,255,255,0.08); color: #fff; }
.lobby-arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 1.25rem; line-height: 1; padding: 0 0 3px; cursor: pointer; display: grid; place-items: center; transition: background-color .18s, color .18s; }
.lobby-arrow:hover { background: rgba(36,171,122,0.35); color: #fff; border-color: rgba(36,171,122,0.5); }
.lobby-cnt, .lobby-soon-tag { font-size: 0.62rem; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 700; color: var(--muted); padding: 3px 8px; border-radius: 9999px; border: 1px solid var(--line); background: var(--surface); }
.lobby-soon-tag { color: var(--gold-bright); border-color: var(--line-gold); background: rgba(234,179,8,0.1); }
.lobby-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 6 * 12px) / 7); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; margin: -4px -2px -6px; scrollbar-width: none; }
.lobby-scroller::-webkit-scrollbar { display: none; }
.lobby-scroller .game-card { scroll-snap-align: start; margin: 0 !important; }
.lobby-scroller .game-card:hover { transform: translateY(-4px) !important; }

.lobby-prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lobby-prov { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-family: 'Inter', sans-serif; cursor: pointer; transition: border-color .18s, background-color .18s, transform .18s; }
.lobby-prov:hover { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.07); transform: translateY(-2px); }
.lobby-prov-mark { grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 1rem; color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--pc) 40%, transparent); }
.lobby-prov-name { font-size: 0.8rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lobby-prov-cnt { font-size: 0.66rem; color: var(--muted); font-weight: 600; }
.lobby-prov.soon { opacity: 0.55; }
.lobby-prov.soon .lobby-prov-cnt { color: var(--gold-bright); }

.lobby-live-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.lobby-live-tile { position: relative; aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 3px; padding: 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--lc) 30%, transparent); background: radial-gradient(120% 90% at 80% 0%, color-mix(in srgb, var(--lc) 38%, transparent), transparent 60%), linear-gradient(160deg, #1a1220, #0e0a13); color: var(--text); font-family: 'Inter', sans-serif; text-align: left; cursor: pointer; overflow: hidden; transition: transform .2s, border-color .2s; }
.lobby-live-tile::before { content: ''; position: absolute; right: -18px; top: -18px; width: 90px; height: 90px; border-radius: 50%; border: 10px solid color-mix(in srgb, var(--lc) 55%, transparent); opacity: 0.35; }
.lobby-live-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--lc) 60%, transparent); }
.lobby-live-tile em { position: absolute; top: 10px; left: 10px; font-style: normal; font-size: 0.56rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 800; padding: 3px 7px; border-radius: 6px; background: rgba(8,6,11,0.7); color: var(--gold-bright); backdrop-filter: blur(6px); }
.lobby-live-tile b { font-size: 0.92rem; font-weight: 800; }
.lobby-live-tile small { font-size: 0.66rem; color: var(--muted); }

.grid-back { margin-left: auto; height: 34px; padding: 0 14px; border-radius: 9999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-family: 'Inter', sans-serif; font-size: 0.74rem; font-weight: 700; cursor: pointer; transition: background-color .18s, color .18s; }
.grid-back:hover { background: rgba(255,255,255,0.08); color: #fff; }
#gridView { display: flex; flex-direction: column; gap: 18px; }
#gridView[hidden], #lobbyView[hidden] { display: none !important; }
#lobbyView { display: flex; flex-direction: column; gap: 26px; }
#lobbyView .lb-block { margin-top: 0; }

@media (max-width: 1400px) { .lobby-scroller { grid-auto-columns: calc((100% - 5 * 12px) / 6); } .lobby-live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .lobby-scroller { grid-auto-columns: calc((100% - 4 * 12px) / 5); } .lobby-promos { grid-template-columns: 1fr 1fr; } .lp-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 860px) { .lobby-scroller { grid-auto-columns: calc((100% - 3 * 10px) / 4); gap: 10px; } .lobby-arrow { display: none; } }
@media (max-width: 620px) {
  .lobby-tabs { border-radius: 16px; padding: 4px; }
  .lobby-tab { height: 34px; padding: 0 12px; font-size: 0.74rem; }
  .lobby-promos { grid-template-columns: 1fr; gap: 10px; }
  .lp-card { min-height: 0; padding: 14px; grid-template-columns: 46px 1fr; gap: 12px; }
  .lp-art { width: 46px; height: 46px; border-radius: 14px; } .lp-art svg { width: 22px; height: 22px; }
  .lp-text { padding-right: 0; } .lp-text b { font-size: 0.9rem; } .lp-go { display: none; }
  .lobby-scroller { grid-auto-columns: calc((100% - 2 * 8px) / 2.6); gap: 8px; }
  .lobby-row-sub { display: none; }
  .lobby-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lobby-prov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* ══ EMERALD GRADIENT POLISH ══ */
.sb-deposit-btn, .tm-login, .gw-btn.gw-close:hover {
  background: linear-gradient(135deg, #3ccf9a 0%, #24ab7a 48%, #178a62 100%) !important;
  background-size: 160% 160% !important; background-position: 0% 50% !important;
  box-shadow: 0 12px 28px -12px rgba(36,171,122,0.55), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  transition: background-position .35s ease, transform .18s ease, box-shadow .25s ease !important;
}
.sb-deposit-btn:hover, .tm-login:hover { background-position: 100% 50% !important; transform: translateY(-1px); }
.sb-promo { background: linear-gradient(135deg, #0f5f45 0%, #178a62 35%, #24ab7a 70%, #3ccf9a 100%) !important; box-shadow: 0 14px 30px -12px rgba(36,171,122,0.55) !important; }
.sb-auth-card { background: linear-gradient(135deg, rgba(36,171,122,0.20), rgba(255,255,255,0.03)) !important; }
.sb-seg-btn.active, .sidebar .sb-group .menu-item.active { background: linear-gradient(90deg, rgba(36,171,122,0.30), rgba(36,171,122,0.06)) !important; }