/* =====================================================
   WINMNL STYLESHEET — Warm Casino (black / brown / red / gold)
   Color values below are sourced from assets/css/tokens.css (the
   single source of truth for brand colors) via var(...), with the
   original hex kept only as a fallback for the rare page that hasn't
   picked up tokens.css yet. Update a color in tokens.css and it
   propagates here automatically — do not hardcode hex back in.
   ===================================================== */
:root {
  /* Backgrounds — deep midnight */
  --bg-primary:    var(--background-primary, #120F0D);
  --bg-secondary:  var(--background-secondary, #0D0B0A);
  --bg-card:       var(--surface, #241D1A);
  --bg-nav:        var(--background-primary, #120F0D);
  --bg-glass:      rgba(36,29,26,.45);
  --sidebar-bg:    var(--background-secondary, #0D0B0A);
  --panel-bg:      var(--surface, #241D1A);
  --panel-bg-2:    var(--surface-elevated, #2B211E);

  /* Accents — deep casino red (structural + CTA), bright red secondary, copper highlight */
  --accent-gold:   var(--accent-primary-2, #F4C56A);
  --accent-gold2:  var(--gold-soft, #DCA84D);
  --accent-purple: var(--accent-primary, #D71912);
  --accent-cyan:   var(--accent-secondary, #F12616);
  --accent-green:  var(--success, #22C55E);
  --accent-red:    #EF3340;
  --accent-blue:   var(--accent-secondary, #F12616);

  /* Text */
  --text-primary:  #FFF6EB;
  --text-secondary:#DCCDC2;

  /* Borders — gold-glass tint */
  --border-color:  rgba(215,25,18,.24);
  --border-gold:   rgba(244,197,106,.5);
  --border-purple: rgba(215,25,18,.3);

  /* Shadows & Glows — pumped up */
  --shadow-lg:     0 24px 64px rgba(0,0,0,.6);
  --glow-gold:     0 0 77px rgba(244,197,106,0.95), 0 0 144px rgba(244,197,106,0.52);
  --glow-cta:      0 0 77px rgba(244,197,106,0.9), 0 0 144px rgba(215,25,18,0.3);
  --glow-purple:   0 0 77px rgba(184,94,57,0.95), 0 0 144px rgba(184,94,57,0.45);
  --glow-cyan:     0 0 67px rgba(241,38,22,0.95);
  --glow-ambient:  0 0 64px rgba(215,25,18,0.78);
  --glow-card:     0 0 0 1px rgba(255,255,255,.12), 0 8px 32px rgba(0,0,0,.35);
  --glow-halo:     0 0 140px 20px rgba(215,25,18,.6), 0 0 240px 70px rgba(215,25,18,.3);

  /* Glassmorphism — transparent black glass */
  --glass-bg:    rgba(0,0,0,.35);
  --glass-blur:  blur(22px);

  /* Gradients */
  --grad-header: linear-gradient(120deg, rgba(13,13,13,.85) 0%, rgba(20,20,20,.85) 45%, rgba(6,6,6,.85) 100%);
  --grad-gold:   linear-gradient(120deg, #FFE0A0, #F4C56A, #DCA84D);
  --grad-purple: linear-gradient(135deg, #121212, #D71912, #B85E39);
  --grad-card:   linear-gradient(145deg, rgba(13,13,13,.55) 0%, rgba(20,20,20,.46) 50%, rgba(10,10,10,.55) 100%);

  /* Player-theme additions — Top Up (green), VIP (real gold), wordmark (rainbow) */
  --grad-green:      linear-gradient(120deg, #6EE7B7, #10B981, #047857);
  --grad-rainbow:    linear-gradient(90deg, #F4C56A 0%, #FBBF24 25%, #F12616 50%, #D71912 68%, #B85E39 84%, #F4C56A 100%);
  --accent-vip-gold: #FFC928;
  --glow-green:      0 0 30px rgba(16,185,129,.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: hidden; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

body {
  background: var(--bg-primary);
  background-image:
    radial-gradient(ellipse 100% 65% at 15% -5%,  rgba(215,25,18,.32) 0%, transparent 65%),
    radial-gradient(ellipse 80% 55% at 85% 105%, rgba(184,94,57,.28)  0%, transparent 62%),
    radial-gradient(ellipse 45% 35% at 50% 50%,  rgba(34,197,94,.12) 0%, transparent 72%);
  background-size: 180% 180%;
  background-attachment: fixed;
  animation: bg-drift 26s ease-in-out infinite alternate;
  color: var(--text-primary);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .035;
  mix-blend-mode: overlay;
}
@keyframes bg-drift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .hac-card::before,
  .hac-avatar-wrap::before,
  .hac-online-dot,
  .hac-insured-dot,
  .hac-vip-badge,
  .ticker,
  .btn-gold,
  .btn-register,
  .match-live-dot,
  .mobile-deposit-btn,
  .quick-cat-card::before,
  .quick-cat-icon-wrap::before,
  .cat-tab.active { animation: none; }
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: rgba(215,25,18,.45); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

/* Mobile-safe defaults for elements added during the desktop polish pass —
   invisible/inert below 1024px so mobile is provably unaffected, styled
   only inside the desktop media queries further down. */
.game-provider-badge { display: none; }
.lobby-search-wrap { display: contents; }
.lobby-search-icon { display: none; }

/* ── APP SHELL / DESKTOP SIDEBAR (≥1024px only) ──────────────────────
   Fixed application shell, independent of mobile drawer CSS entirely.
   .desktop-sidebar is position:fixed (not sticky — sticky inside a flex
   row with a shorter sidebar than the page was the bug: once the sidebar's
   own content ran out, it scrolled away with the page). .app-main is
   offset with margin-left so the sidebar and the scrolling content never
   overlap and never compete for the same box. */
:root { --desktop-sidebar-width: 280px; }
.desktop-sidebar { display: none; }

@media (min-width: 1024px) {
  .app-shell { display: block; }
  .desktop-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--desktop-sidebar-width);
    height: 100vh;
    height: 100svh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 24px;
    background: var(--sidebar-bg);
    border-right: 1px solid rgba(241,38,22,.20);
    z-index: 100;
    scrollbar-width: thin;
    scrollbar-color: rgba(215,25,18,.35) transparent;
  }
  .desktop-sidebar::-webkit-scrollbar { width: 4px; }
  .desktop-sidebar::-webkit-scrollbar-track { background: transparent; }
  .desktop-sidebar::-webkit-scrollbar-thumb { background: rgba(215,25,18,.35); border-radius: 20px; }

  .app-main {
    margin-left: var(--desktop-sidebar-width);
    width: calc(100% - var(--desktop-sidebar-width));
    min-height: 100vh;
  }

  /* The mobile hamburger/drawer trigger and off-canvas drawer are a
     completely separate, mobile-only system — hidden here, untouched
     below 1024px. Also drop the Slots/Fishing/Crash/Sports top-nav links
     (now live in the sidebar) and the big guest "All Games/Slot
     Games/Crash" cards (now redundant on desktop). */
  .app-main #sidebarOpenBtn,
  .app-main .sidebar-overlay,
  .app-main .sidebar-drawer,
  .app-main .nav-links,
  .app-main .quick-cat-row,
  .app-main .mobile-bottom-nav { display: none !important; }
  .app-main .top-nav .nav-inner { height: 72px; max-width: none; padding: 0 32px; }

  /* .browse-section's own full-bleed trick (width:100vw; left:50%;
     margin-left:-50vw) is computed against the *whole viewport* — it
     has no idea .app-main is offset by the sidebar, so it was sliding
     the entire section (category column included) left, under the
     fixed sidebar. Reset it back to a normal box sized within
     .app-main, which is already correctly offset. */
  .app-main .browse-section {
    width: auto;
    left: auto;
    margin-left: 0;
  }

  /* Lobby: vertical category column (180px) beside the game content,
     replacing the horizontal pill row on desktop only — mobile/tablet
     keep the existing horizontal scroll untouched. */
  .app-main .browse-section-inner {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    max-width: none;
    padding: 0 32px;
  }
  .app-main .category-tabs-wrap {
    flex: 0 0 180px;
    margin-bottom: 0;
    position: sticky;
    top: 88px;
  }
  .app-main .category-tabs-wrap::after { display: none; }
  .app-main .category-tabs {
    flex-direction: column;
    overflow-x: visible;
    gap: 8px;
  }
  .app-main .cat-tab {
    justify-content: flex-start;
    height: 52px;
    padding: 0 14px;
    border-radius: 10px;
    background: #1F1912;
    font-weight: 600;
  }
  .app-main .cat-tab .icon { width: 22px; font-size: 1.1rem; }
  .app-main .cat-tab.active {
    background: linear-gradient(100deg, #4A3510, #6B4E14);
    border: 1px solid rgba(241,38,22,.75);
    color: #fff;
  }
  .app-main .lobby-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

  /* Main game catalog promoted to the top; provider carousel and the
     promotional carousels (Recently Played/Popular/Slot picks/New/Live
     Casino) become secondary, below it — reordered visually only
     (flex `order`), the underlying PHP loops/markup stay exactly where
     they were so mobile's natural top-to-bottom order is untouched. */
  .app-main #all-games-section       { order: 1; }
  .app-main .lobby-section-recent    { order: 2; }
  .app-main .lobby-section-popular   { order: 3; }
  .app-main .lobby-section-slots     { order: 4; }
  .app-main .lobby-section-new       { order: 5; }
  .app-main .lobby-section-livecasino{ order: 6; }
  .app-main .lobby-provider-row      { order: 7; }

  /* Hero: cap width/margins/height to match the sidebar-adjusted content column */
  .app-main .hero-section { margin: 24px 32px 0; border-radius: 16px; overflow: hidden; }
  .app-main .hero-slider { height: 350px; }

  /* Compact provider bar — reads as a filter row, not a content section */
  .app-main .prov-card { flex: 0 0 108px; width: 108px; height: 48px; padding: 6px 8px; }
  .app-main .prov-carousel { gap: 9px; }

  /* Search bar: one integrated pill beside the category column, no giant
     separate button underneath (the wrap uses display:contents below
     1024px so mobile's existing full-width input/button behavior is
     untouched — this only takes effect here). */
  .app-main .lobby-search-form { flex: 1; }
  .app-main .lobby-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    height: 48px;
    padding: 0 14px;
    background: #171207;
    border: 1px solid rgba(184,94,57,.25);
    border-radius: 11px;
  }
  .app-main .lobby-search-icon { display: block; font-size: .95rem; opacity: .7; flex-shrink: 0; }
  .app-main .lobby-search-input {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100%;
    font-size: .9rem !important;
  }
  .app-main .lobby-search-submit {
    background: transparent !important;
    color: var(--text-secondary) !important;
    padding: 4px !important;
    font-size: 0 !important;
  }
  .app-main .lobby-search-submit::before { content: '🔎'; font-size: .95rem; }
  /* Desktop keeps the compact emoji-icon pill above; the image button
     graphic is only for the separate full-size mobile buttons. */
  .app-main .lobby-search-submit img { display: none; }

  /* Game grid density — explicit per-breakpoint column counts */
  .app-main .game-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }

  /* Compact near-square cards, provider badge on the image, normal (non-italic) title below */
  .app-main .game-thumb { aspect-ratio: 1 / 1.05; border-radius: 10px; }
  .app-main .game-card { border-radius: 12px; }
  .app-main .game-name-bar { font-style: normal; font-size: .78rem; }
  .app-main .game-provider-badge {
    display: block;
    position: absolute;
    top: 6px; left: 6px;
    z-index: 2;
    background: rgba(6,6,6,.75);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 8px;
    max-width: calc(100% - 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Section headings: normal weight, no italic */
  .app-main .section-title h2 { font-style: normal; font-size: 16px; font-weight: 700; }

  /* No page-level horizontal scroll; carousels keep their own overflow-x */
  html, body { overflow-x: hidden; }
}
@media (min-width: 1440px) {
  .app-main .game-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1920px) {
  .app-main .game-grid { grid-template-columns: repeat(7, 1fr); }
}

.ds-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 112px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(241,38,22,.14);
  margin-bottom: 4px;
}
.ds-logo img { max-width: 190px; max-height: 80px; width: auto; height: auto; object-fit: contain; }
.ds-vip-card {
  background: linear-gradient(180deg, rgba(74,53,15,.85), rgba(13,13,13,.85));
  border: 1px solid rgba(244,197,106,.35);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 14px;
}
.ds-vip-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ds-vip-label { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.ds-vip-tier { font-size: .8rem; font-weight: 800; color: var(--accent-vip-gold); }
.ds-vip-balance { font-size: 1.1rem; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.ds-vip-guest { text-align: center; }
.ds-guest-login {
  margin-top: 8px; width: 100%; padding: 8px 0;
  border: none; border-radius: 999px;
  background: var(--grad-gold);
  color: #fff; font-weight: 700; font-size: .82rem;
  cursor: pointer;
}
.ds-nav-group { margin-bottom: 4px; }
.ds-nav-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: #A89968;
  margin: 20px 18px 8px;
}
.ds-nav-label::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: #D71912;
  flex-shrink: 0;
}
.ds-nav-link {
  height: 45px;
  margin: 3px 10px;
  padding: 0 14px;
  display: flex; align-items: center; gap: 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 14px; font-weight: 600;
  color: #C9BFA0;
  transition: all .18s;
}
.ds-nav-link:hover { background: rgba(215,25,18,.10); color: #fff; }
.ds-nav-link.active {
  background: linear-gradient(100deg, rgba(139,105,20,.65), rgba(139,105,20,.42));
  border-color: rgba(215,25,18,.55);
  box-shadow: inset 3px 0 0 #F4C56A;
  color: #fff;
}
.ds-nav-link.ds-deposit.active {
  background: linear-gradient(100deg, #A67C1E 0%, #D71912 55%, #B85E39 100%);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(215,25,18,.30);
}
.ds-nav-icon { font-size: 18px; width: 20px; text-align: center; flex-shrink: 0; }

/* ── TOP NAV ────────────────────────────────────────── */
.top-nav {
  background: var(--grad-header);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 rgba(215,25,18,.1), 0 4px 32px rgba(0,0,0,.35);
}
.top-nav .nav-inner {
  display: flex;
  align-items: center;
  height: 60px;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.4rem;
  font-weight: 900;
  background: var(--grad-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
}
.logo img { height: 48px; width: auto; vertical-align: middle; }
.logo span {
  background: none;
  -webkit-text-fill-color: #fff;
}

.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-secondary);
  transition: all .2s;
}
.nav-links a:hover {
  background: rgba(244,197,106,.14);
  color: var(--accent-primary-2);
}
.nav-links a.active {
  background: linear-gradient(135deg, rgba(244,197,106,.2), rgba(220,168,77,.12));
  color: var(--accent-primary-2);
  border: 1px solid var(--border-gold);
  box-shadow: var(--glow-gold);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.btn-login {
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(244,197,106,.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(244,197,106,.45);
  color: var(--accent-primary-2);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .2px;
  cursor: pointer;
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.btn-login:hover {
  background: rgba(244,197,106,.2);
  border-color: rgba(244,197,106,.7);
  color: #fff;
  box-shadow: var(--glow-gold);
  transform: translateY(-1px);
}
.btn-login:active {
  transform: translateY(0) scale(.97);
}
.btn-register {
  padding: 8px 22px;
  border-radius: 999px;
  background: var(--grad-gold);
  background-size: 200% 200%;
  border: none;
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .2px;
  cursor: pointer;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  animation: blue-shift 4s ease infinite;
  box-shadow: var(--glow-ambient), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-register:hover {
  filter: brightness(1.12);
  box-shadow: var(--glow-gold), inset 0 1px 0 rgba(255,255,255,.4);
  transform: translateY(-1px);
}
.btn-register:active {
  transform: translateY(0) scale(.97);
}

.balance-display {
  background: rgba(20,20,20,.4);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 6px 14px;
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(10px);
}
.balance-display .amount {
  font-weight: 800;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-icon-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: all .2s;
}
.nav-icon-btn:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.3);
}

/* ── HERO BANNER ────────────────────────────────────── */
.hero-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0A0806 0%, #0A0806 50%, #0A0806 100%);
}
.hero-slider {
  position: relative;
  overflow: hidden;
  height: 380px;
}
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 40px 80px;
  background: linear-gradient(135deg, #3A0D0B 0%, #1F0A09 60%, #3A0D0B 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 85% at 10% 50%,  rgba(215,25,18,.18)  0%, transparent 60%),
    radial-gradient(ellipse 45% 65% at 85% 30%,  rgba(241,38,22,.10) 0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 50% 100%, rgba(184,94,57,.08)  0%, transparent 50%);
  pointer-events: none;
}
.hero-slide .text-block { max-width: 460px; position: relative; z-index: 1; }
.hero-slide h1 {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,.9);
}
.hero-slide h1 span {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-slide p { color: var(--text-secondary); margin: 12px 0 24px; font-size: 1.05rem; }
.hero-img {
  position: absolute;
  right: 60px;
  bottom: 0;
  height: 95%;
  object-fit: contain;
  filter: drop-shadow(0 10px 40px rgba(0,0,0,.7));
}
.hero-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  cursor: pointer;
  transition: all .3s;
}
.hero-dot.active {
  background: var(--accent-blue);
  width: 24px;
  border-radius: 4px;
  box-shadow: 0 0 16px rgba(215,25,18,0.95);
}

/* ── TICKER ─────────────────────────────────────────── */
.ticker-wrap {
  background: linear-gradient(90deg, rgba(215,25,18,.08), rgba(184,94,57,.05), rgba(215,25,18,.08));
  border-bottom: 1px solid var(--border-color);
  padding: 8px 0;
  overflow: hidden;
}
.ticker-sample-note {
  text-align: center;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-secondary);
  opacity: .75;
  margin-bottom: 3px;
}
.ticker {
  display: flex;
  gap: 40px;
  animation: ticker-scroll 30s linear infinite;
  white-space: nowrap;
}
.ticker-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--text-secondary);
}
.ticker-item .winner {
  font-weight: 700;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ticker-item .amount { color: var(--accent-green); font-weight: 700; }
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── SECTION TITLES ─────────────────────────────────── */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.section-title h2 {
  font-size: 1.15rem;
  font-weight: 800;
  font-style: italic;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title h2::before {
  content: '';
  width: 4px;
  height: 20px;
  background: linear-gradient(to bottom, #D71912, #F4C56A);
  box-shadow: 0 0 19px rgba(215,25,18,0.95);
  border-radius: 2px;
  display: inline-block;
}
.view-all {
  font-size: .78rem;
  color: #D71912;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  transition: all .2s;
}
.view-all:hover {
  color: var(--accent-cyan);
  background: rgba(241,38,22,.12);
  border-color: rgba(241,38,22,.35);
}

/* ── CATEGORY TABS ──────────────────────────────────── */
.category-tabs-wrap { position: relative; margin-bottom: 20px; }
.category-tabs-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 4px;
  width: 32px;
  background: linear-gradient(270deg, var(--bg-primary), transparent);
  pointer-events: none;
}
.category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 20px 8px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: linear-gradient(150deg, rgba(20,20,20,.4), rgba(6,6,6,.26));
  color: var(--text-secondary);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .25s;
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 3px 12px rgba(0,0,0,.16);
}
.cat-tab:hover {
  border-color: var(--border-gold);
  color: #F4C56A;
  background: linear-gradient(150deg, rgba(215,25,18,.16), rgba(20,20,20,.32));
  transform: translateY(-1px);
}
.cat-tab.active {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, rgba(215,25,18,.28) 0%, rgba(241,38,22,.42) 45%, rgba(215,25,18,.28) 100%);
  background-size: 220% 100%;
  animation: blue-shift 4s linear infinite;
  color: #fff;
  border-color: var(--border-gold);
  box-shadow: 0 0 32px rgba(215,25,18,0.52), inset 0 0 0 1px rgba(255,255,255,.08);
}
.cat-tab .icon {
  position: relative;
  z-index: 1;
  font-size: .85rem;
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14);
  border-radius: 50%;
}
.cat-tab .icon::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(241,38,22,.9), rgba(241,38,22,.04) 55%, rgba(241,38,22,.9));
  z-index: -1;
  opacity: .45;
  transition: opacity .25s;
}
.cat-tab:hover .icon::before { opacity: .75; }
.cat-tab.active .icon { background: rgba(255,255,255,.22); }
.cat-tab.active .icon::before { opacity: 1; }

/* ── SIDEBAR DRAWER ─────────────────────────────────── */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,6,6,.55);
  backdrop-filter: blur(4px);
  z-index: 1900;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.sidebar-overlay.open { opacity: 1; pointer-events: all; }
.sidebar-drawer {
  position: fixed;
  top: 0; left: 0;
  height: 100%;
  width: 280px;
  max-width: 84vw;
  background: var(--grad-header);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-right: 1px solid var(--border-color);
  z-index: 1950;
  transform: translateX(-100%);
  transition: transform .28s ease;
  overflow-y: auto;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.08), 24px 0 64px rgba(0,0,0,.35);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}
.sidebar-drawer.open { transform: translateX(0); }
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}
.sidebar-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: .95rem;
  cursor: pointer;
}
.sidebar-search {
  display: flex;
  gap: 8px;
  padding: 14px 16px;
}
.sidebar-search input {
  flex: 1;
  background: rgba(20,20,20,.3);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
  font-size: .85rem;
  outline: none;
}
.sidebar-search button {
  width: 36px;
  border-radius: 8px;
  background: rgba(215,25,18,.14);
  border: 1px solid var(--border-gold);
  color: #D71912;
  cursor: pointer;
}
.sidebar-links { display: flex; flex-direction: column; padding: 4px 10px; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: .88rem;
  font-weight: 600;
  transition: all .2s;
}
.sidebar-link:hover {
  background: rgba(215,25,18,.1);
  color: #D71912;
}
.sidebar-link.active {
  background: linear-gradient(135deg, rgba(215,25,18,.18), rgba(184,94,57,.12));
  color: #F4C56A;
  border: 1px solid var(--border-gold);
}
.sidebar-link-icon { font-size: 1.05rem; width: 22px; text-align: center; }
.sidebar-divider {
  height: 1px;
  background: var(--border-color);
  margin: 10px 16px;
}

/* ── HOME ACCOUNT CARD (hightech) ───────────────────── */
.hac-card {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(115deg, rgba(255,230,150,.05) 0px, rgba(255,230,150,.05) 1px, transparent 1px, transparent 46px),
    linear-gradient(150deg, #4A3510 0%, #8B6914 42%, #2A1F0A 78%, #171207 100%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(241,38,22,.45);
  border-radius: 20px;
  padding: 14px 16px 16px;
  margin-bottom: 22px;
  box-shadow: 0 0 0 2px rgba(255,230,150,0.18), var(--shadow-lg), 0 0 45px rgba(184,94,57,0.45);
}
.hac-card::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-18deg);
  animation: hac-sweep 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hac-sweep {
  0%, 60% { left: -60%; }
  100% { left: 130%; }
}
.hac-top-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.hac-insured {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 800;
  color: #6ee7d8;
  background: rgba(110,231,216,.14);
  border: 1px solid rgba(110,231,216,.35);
  border-radius: 20px;
  padding: 3px 10px;
}
.hac-insured-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6ee7d8;
  box-shadow: 0 0 6px #6ee7d8;
  animation: pulse 1.6s infinite;
}
.hac-insured-chevron { opacity: .6; margin-left: 1px; }
.hac-history-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .74rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  white-space: nowrap;
}
.hac-history-link:hover { color: #fff; }
.hac-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hac-avatar-wrap {
  position: relative;
  width: 56px; height: 56px;
  flex-shrink: 0;
}
.hac-avatar-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #F4C56A, #F4C56A, #FFD700, #F4C56A);
  animation: spin 4s linear infinite;
}
.hac-avatar {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  background: linear-gradient(135deg, #0f4c44, #10B981);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 900; color: #fff;
  overflow: hidden;
}
.hac-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hac-online-dot {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #34D399;
  border: 2px solid var(--bg-card);
  box-shadow: 0 0 8px rgba(52,211,153,.8);
  animation: pulse 1.8s infinite;
}
.hac-info { flex: 1; min-width: 0; }
.hac-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.hac-username { font-size: .95rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hac-vip-badge {
  position: relative;
  overflow: hidden;
  display: inline-flex; align-items: center; gap: 3px;
  background: linear-gradient(100deg, #FFC928 0%, #fff2b8 45%, #FFC928 100%);
  background-size: 220% 100%;
  animation: blue-shift 3.5s linear infinite;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  padding: 2px 9px;
  font-size: .66rem;
  font-weight: 800;
  color: #171207;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(255,201,40,.35);
}
.hac-id-row {
  display: flex; align-items: center; gap: 5px;
  font-size: .72rem; color: var(--text-secondary);
  margin-bottom: 6px;
}
.hac-copy-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-secondary); font-size: .8rem; padding: 1px;
}
.hac-copy-btn:hover { color: #F4C56A; }
.hac-balance-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1px;
}
.hac-balance-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.hac-coin {
  width: 24px; height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 28%, #F4C56A 0%, #D71912 45%, #B85E39 100%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.6), inset 0 -3px 4px rgba(0,0,0,.3), 0 2px 6px rgba(215,25,18,.4);
  font-size: .8rem;
}
.hac-balance {
  font-size: 1.2rem; font-weight: 900; color: #fff; letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px rgba(241,38,22,0.59);
}
.hac-actions { display: flex; flex-direction: row; gap: 8px; flex-shrink: 0; }
.hac-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  font-size: .62rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #fff;
  transition: all .2s;
}
.hac-btn-icon { display: flex; line-height: 1; }
.hac-btn-icon svg { width: 22px; height: 22px; }
.hac-btn-icon img { width: 28px; height: 28px; object-fit: contain; }
.hac-btn:hover { transform: translateY(-1px); }
.hac-btn-topup {
  background: linear-gradient(180deg, #6EE7B7, #10B981 55%, #047857);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.25), 0 4px 12px rgba(16,185,129,.4);
}
.hac-btn-topup:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.25), var(--glow-green);
}
.hac-btn-withdraw {
  background: linear-gradient(180deg, #F4C56A, #DCA84D 55%, #9C6B22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.25), 0 4px 12px rgba(244,197,106,.4);
}
.hac-btn-withdraw:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.25), var(--glow-cta);
}

/* ── QUICK CATEGORY CARDS ───────────────────────────── */
.quick-cat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.quick-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--surface-elevated), var(--background-primary));
  border: 1px solid rgba(244,197,106,.35);
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.quick-cat-card::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-18deg);
  animation: hac-sweep 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.quick-cat-card:nth-child(2)::before { animation-delay: .5s; }
.quick-cat-card:nth-child(3)::before { animation-delay: 1s; }
.quick-cat-card::after {
  content: '';
  position: absolute; top: -20%; left: -10%;
  width: 60%; height: 70%;
  background: rgba(244,197,106,.18);
  border-radius: 50%;
  filter: blur(18px);
  pointer-events: none;
}
.quick-cat-card:hover, .quick-cat-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent-primary-2);
  box-shadow: 0 8px 24px rgba(244,197,106,.4), 0 0 22px rgba(215,25,18,.15);
}
.quick-cat-card:active { transform: translateY(-1px) scale(.98); }
.quick-cat-card:focus-visible { outline: 2px solid var(--accent-primary-2); outline-offset: 2px; }
.quick-cat-icon-wrap {
  position: relative;
  width: 88px; height: 88px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s;
  z-index: 1;
}
.quick-cat-card:hover .quick-cat-icon-wrap { transform: translateY(-3px); }
.quick-cat-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.quick-cat-label { font-weight: 800; font-size: .92rem; position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .quick-cat-card, .quick-cat-card::before, .quick-cat-icon-wrap { animation: none; transition: none; }
  .quick-cat-card:hover, .quick-cat-card:hover .quick-cat-icon-wrap { transform: none; }
}
@media (max-width: 640px) {
  .quick-cat-row { gap: 8px; }
  .quick-cat-card { padding: 14px 8px; gap: 7px; border-radius: 16px; }
  .quick-cat-icon-wrap { width: clamp(72px, 20vw, 88px); height: clamp(72px, 20vw, 88px); }
  .quick-cat-label { font-size: .76rem; }
}
@media (max-width: 480px) {
  .hac-card { padding: 12px 12px 14px; }
  .hac-history-link { font-size: .68rem; }
  .hac-coin { width: 20px; height: 20px; font-size: .7rem; }
  .hac-avatar-wrap { width: 44px; height: 44px; }
  .hac-avatar { font-size: 1rem; }
  .hac-online-dot { width: 10px; height: 10px; }
  .hac-username { font-size: .85rem; }
  .hac-balance-label { font-size: .58rem; }
  .hac-balance { font-size: 1rem; }
  .hac-body { flex-wrap: wrap; }
  .hac-info { min-width: 140px; }
  .hac-actions { flex-direction: row; gap: 6px; }
  .hac-btn { width: 48px; height: 48px; border-radius: 13px; font-size: .56rem; }
  .hac-btn-icon svg { width: 18px; height: 18px; }
  .hac-btn-icon img { width: 22px; height: 22px; }
  .sidebar-drawer { width: 250px; }
}

/* ── APP WELCOME REWARD BANNER ──────────────────────── */
.app-reward-banner {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--border-gold);
  background: linear-gradient(135deg, rgba(20,20,20,.65), rgba(6,6,6,.55));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 22px 20px;
  margin-bottom: 20px;
  text-align: center;
}
.arb-glow {
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 140%;
  background: radial-gradient(circle, rgba(215,25,18,.35), transparent 65%);
  pointer-events: none;
}
.arb-content { position: relative; z-index: 1; }
.arb-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #B85E39;
  background: rgba(184,94,57,.14);
  border: 1px solid rgba(184,94,57,.35);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 10px;
}
.arb-title {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
}
.arb-amount {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.arb-sub {
  font-size: .85rem;
  color: var(--text-secondary);
  max-width: 420px;
  margin: 0 auto 16px;
  line-height: 1.4;
}
.arb-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.arb-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--grad-gold);
  color: #fff;
  font-weight: 800;
  font-size: .88rem;
  padding: 11px 24px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(215,25,18,.45);
  transition: filter .2s;
}
.arb-btn-primary:hover { filter: brightness(1.1); }
.arb-btn-secondary {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: .88rem;
  padding: 11px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s;
}
.arb-btn-secondary:hover { border-color: var(--border-gold); color: #fff; }
.arb-fine {
  font-size: .68rem;
  color: var(--text-secondary);
  opacity: .8;
  margin: 0;
}
@media (max-width: 480px) {
  .app-reward-banner { padding: 18px 14px; border-radius: 14px; }
  .arb-title { font-size: 1.6rem; }
  .arb-sub { font-size: .78rem; margin-bottom: 12px; }
  .arb-btn-primary, .arb-btn-secondary { flex: 1; justify-content: center; padding: 10px 12px; font-size: .82rem; }
}

/* ── FOOTER LOGO ROWS ───────────────────────────────── */
.footer-payment-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.footer-logo-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(150deg, rgba(20,20,20,.36), rgba(6,6,6,.22));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-color);
  border-radius: 9px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-height: 32px;
  transition: all .22s;
}
.footer-logo-chip:hover {
  border-color: var(--border-gold);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.footer-logo-chip img { height: 18px; width: auto; max-width: 70px; object-fit: contain; }

@keyframes pulse {
  0%,100% { opacity: .35; transform: scale(.8); }
  50%     { opacity: 1;   transform: scale(1); }
}

/* ── TODAY'S MATCH ──────────────────────────────────── */
.match-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 2px 10px;
}
.match-carousel::-webkit-scrollbar { display: none; }
.match-card {
  flex: 0 0 auto;
  width: 250px;
  background: var(--grad-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px;
  position: relative;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.match-live-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.5);
  color: #f87171;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 9px;
  border-radius: 20px;
}
.match-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: pulse 1.4s infinite;
}
.match-time-pill {
  display: inline-block;
  background: rgba(215,25,18,.14);
  border: 1px solid rgba(215,25,18,.4);
  color: #D71912;
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.match-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}
.match-team {
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  flex: 1;
}
.match-score {
  font-size: 1rem;
  font-weight: 900;
  color: var(--text-secondary);
  flex-shrink: 0;
  padding: 0 6px;
}
.match-actions { display: flex; gap: 8px; }
.btn-watch, .btn-play-pink {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
  transition: all .2s;
}
.btn-watch {
  background: rgba(215,25,18,.16);
  border: 1px solid rgba(215,25,18,.5);
  color: #D71912;
}
.btn-watch:hover { background: rgba(215,25,18,.28); }
.btn-play-pink {
  background: var(--grad-gold);
  color: #fff;
  box-shadow: 0 4px 16px rgba(215,25,18,.4);
}
.btn-play-pink:hover { filter: brightness(1.1); }

/* ── GAME GRID ──────────────────────────────────────── */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-color);
  box-shadow: var(--glow-card);
  -webkit-tap-highlight-color: transparent;
}
.game-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 48px rgba(215,25,18,.35), 0 0 0 2px rgba(215,25,18,0.65), 0 0 45px rgba(215,25,18,0.26);
  border-color: rgba(215,25,18,.55);
}
.game-card:active {
  transform: translateY(-2px) scale(.98);
  box-shadow: 0 16px 48px rgba(215,25,18,.35), 0 0 0 2px rgba(215,25,18,0.65), 0 0 45px rgba(215,25,18,0.26);
  border-color: rgba(215,25,18,.55);
}
.game-card:active .game-thumb .game-overlay { opacity: 1; }
.game-card:active .play-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.game-thumb {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.game-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s;
}
.game-card:hover .game-thumb img { transform: scale(1.07); }
.game-thumb .game-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3,3,3,.85) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .25s;
}
.game-card:hover .game-thumb .game-overlay { opacity: 1; }
.game-name-bar {
  padding: 8px 10px;
  font-size: .82rem;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.game-thumb .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.75);
  background: var(--grad-gold);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 8px 20px;
  font-weight: 800;
  font-size: .85rem;
  opacity: 0;
  transition: all .25s;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 24px rgba(244,197,106,.65);
}
.game-card:hover .play-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.badge-hot {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(239,68,68,.6);
}
.badge-rebate {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #7f1d1d, #991b1b);
  color: #fbbf24;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(251,191,36,.35);
  box-shadow: 0 2px 8px rgba(127,29,29,.6);
}
.badge-new {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #FBBF24, #4ade80);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(74,222,128,.5);
}
.badge-popular {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(217,119,6,.55);
}
.fav-heart-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(6,6,6,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  cursor: pointer;
  transition: transform .15s, background .2s, color .2s;
}
.fav-heart-btn svg { width: 16px; height: 16px; }
.fav-heart-btn:hover { transform: scale(1.12); background: rgba(6,6,6,.8); }
.fav-heart-btn.is-fav { color: #ef3340; }
.fav-heart-btn:active { transform: scale(.9); }
.thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: linear-gradient(135deg,#1C1210,#0F0B0A);
}

/* ── PROVIDER CAROUSEL ──────────────────────────────── */
.prov-carousel-wrap {
  position: relative;
  margin-bottom: 28px;
  padding: 0 28px;
}
.prov-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 6px 2px 10px;
}
.prov-carousel::-webkit-scrollbar { display: none; }
.prov-card {
  flex: 0 0 112px;
  width: 112px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  background: linear-gradient(150deg, rgba(20,20,20,.34), rgba(6,6,6,.2));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  cursor: pointer;
  transition: all .25s;
  text-decoration: none;
  color: inherit;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.prov-card:hover {
  border-color: #D71912;
  background: linear-gradient(150deg, rgba(215,25,18,.16), rgba(20,20,20,.3));
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.24), 0 0 26px rgba(215,25,18,0.31);
}
.prov-card.active {
  border-color: #D71912;
  background: linear-gradient(150deg, rgba(215,25,18,.18), rgba(20,20,20,.32));
  box-shadow: var(--glow-gold);
}
.prov-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 800;
  color: #F4C56A;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
}
.prov-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.prov-name {
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prov-card:has(.prov-icon.has-logo) .prov-name { display: none; }
.prov-count {
  display: none;
}
.prov-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  z-index: 10;
  background: rgba(20,20,20,.55);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--text-secondary);
  line-height: 1;
  transition: all .2s;
  padding: 0;
  backdrop-filter: blur(10px);
}
.prov-carousel-btn:hover {
  border-color: var(--border-gold);
  color: #D71912;
  box-shadow: var(--glow-gold);
}
.prov-prev { left: -4px; }
.prov-next { right: -4px; }
@media (max-width: 640px) {
  .prov-carousel-btn { display: none; }
  .prov-carousel-wrap { padding: 0; }
}

/* ── HOT GAMES CAROUSEL ─────────────────────────────── */
.hot-carousel-wrap {
  position: relative;
  padding: 0 28px;
}
.hot-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 6px 2px 10px;
}
.hot-carousel::-webkit-scrollbar { display: none; }
.hot-carousel-card { flex: 0 0 auto; width: 150px; }
.hot-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  z-index: 10;
  background: rgba(20,20,20,.55);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--text-secondary);
  line-height: 1;
  transition: all .2s;
  padding: 0;
  backdrop-filter: blur(10px);
}
.hot-carousel-btn:hover {
  border-color: var(--border-gold);
  color: #D71912;
  box-shadow: var(--glow-gold);
}
.hot-prev { left: -4px; }
.hot-next { right: -4px; }
@media (max-width: 640px) {
  .hot-carousel-btn { display: none; }
  .hot-carousel-wrap { padding: 0; }
}

/* ── RECENTLY PLAYED CAROUSEL (same pattern as Hot Games) ──────────── */
.recent-carousel-wrap {
  position: relative;
  padding: 0 28px;
}
.recent-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 6px 2px 10px;
}
.recent-carousel::-webkit-scrollbar { display: none; }
.recent-prev { left: -4px; }
.recent-next { right: -4px; }
@media (max-width: 640px) {
  .recent-carousel-wrap { padding: 0; }
}

/* ── MAIN LAYOUT ────────────────────────────────────── */
.main-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 20px;
}

/* ── BROWSE SECTION (category tabs → game grids) ─────── */
/* Full-viewport-width bleed so the teal→navy blend reads as one continuous
   page surface instead of an inset rounded card (matches the reference). */
.browse-section {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-top: 12px;
  background-image:
    linear-gradient(180deg, #1F1912 0%, #14110A 7%, #0A0806 16%, #171207 38%, #171207 100%),
    radial-gradient(ellipse 70% 40% at 85% 95%, rgba(139,105,20,.22) 0%, transparent 60%);
}
.browse-section-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 20px;
}
@media (max-width: 640px) {
  .browse-section-inner { padding: 18px 12px; }
}

/* ── STATS BAR ──────────────────────────────────────── */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--grad-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color .2s, box-shadow .2s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.stat-card:hover {
  border-color: var(--border-gold);
  box-shadow: 0 4px 24px rgba(215,25,18,.18);
}
.stat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.stat-icon.gold  { background: rgba(215,25,18,.14);  color: #D71912;          box-shadow: inset 0 0 0 2px rgba(215,25,18,0.33); }
.stat-icon.green { background: rgba(74,222,128,.12);  color: var(--accent-green); box-shadow: inset 0 0 0 1px rgba(74,222,128,.2); }
.stat-icon.red   { background: rgba(239,68,68,.12);   color: #f87171;          box-shadow: inset 0 0 0 1px rgba(239,68,68,.2); }
.stat-icon.blue  { background: rgba(241,38,22,.12);  color: var(--accent-cyan); box-shadow: inset 0 0 0 2px rgba(241,38,22,0.29); }
.stat-label { font-size: .78rem; color: var(--text-secondary); }
.stat-value { font-size: 1.3rem; font-weight: 800; color: #fff; }

/* ── PROMO BANNERS ──────────────────────────────────── */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.promo-card {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16/6;
  background: var(--grad-card);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.promo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(215,25,18,.18);
  border-color: var(--border-gold);
}
.promo-card h3 {
  font-size: 1rem;
  font-weight: 800;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.promo-card p  { font-size: .78rem; color: var(--text-secondary); margin-top: 4px; }

/* ── FOOTER ─────────────────────────────────────────── */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, rgba(13,13,13,.44), rgba(6,6,6,.78));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--border-color);
  padding: 46px 20px 24px;
  margin-top: 60px;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(215,25,18,.65), rgba(241,38,22,.5), rgba(215,25,18,.65), transparent);
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
}
.footer-support-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 26px;
  padding: 18px 12px;
  margin-bottom: 28px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.footer-support-row a {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color .2s;
}
.footer-support-row a:hover { color: #F4C56A; }
.footer-brand .logo { margin-bottom: 12px; }
.footer-brand p { font-size: .82rem; color: var(--text-secondary); line-height: 1.65; }
.footer-col h4 {
  position: relative;
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
  padding-left: 13px;
  letter-spacing: .02em;
}
.footer-col h4::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #F4C56A, #D71912);
  box-shadow: 0 0 13px rgba(215,25,18,0.78);
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a  {
  font-size: .82rem;
  color: var(--text-secondary);
  transition: color .2s, transform .2s;
  display: inline-block;
}
.footer-col a:hover { color: #F4C56A; transform: translateX(3px); }
.footer-bottom {
  border-top: 1px solid var(--border-color);
  padding-top: 20px;
  text-align: center;
  font-size: .78rem;
  color: var(--text-secondary);
}
.license-badges { display: flex; gap: 12px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
.license-badge {
  background: linear-gradient(150deg, rgba(20,20,20,.34), rgba(6,6,6,.2));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-gold);
  border-radius: 7px;
  padding: 5px 13px;
  font-size: .72rem;
  color: var(--text-secondary);
  box-shadow: 0 0 22px rgba(215,25,18,0.23);
  transition: all .2s;
}
.license-badge:hover {
  box-shadow: var(--glow-gold);
  color: #fff;
}
.pagination-glass a:hover {
  border-color: var(--border-gold) !important;
  box-shadow: var(--glow-gold);
  color: #fff !important;
}
.rg-panel {
  position: relative;
  background: linear-gradient(160deg, rgba(20,20,20,.3), rgba(6,6,6,.16));
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 22px 22px 20px;
  margin-bottom: 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.rg-disclaimer {
  text-align: center;
  font-size: .78rem;
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.rg-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.rg-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 240px;
  max-width: 320px;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 11px 15px;
  transition: border-color .2s;
}
.rg-contact-item:hover { border-color: var(--border-gold); }
.rg-contact-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.rg-contact-label { font-size: .7rem; color: var(--text-secondary); margin-bottom: 3px; }
.rg-contact-value { font-size: .82rem; font-weight: 700; color: #fff; word-break: break-word; }
.rg-contact-value a { color: #6ee7d8; }
.rg-contact-value a:hover { color: #fff; }
@media (max-width: 640px) {
  .rg-contact-item { flex: 1 1 100%; max-width: none; }
}
.rg-partners {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}
.rg-partners-label {
  width: 100%;
  text-align: center;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.rg-social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  transition: all .2s;
}
.rg-social-icon svg { width: 20px; height: 20px; }
.rg-social-icon:hover {
  background: rgba(215,25,18,.16);
  border-color: rgba(215,25,18,.4);
  color: #fff;
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .rg-social-icon { width: 34px; height: 34px; }
  .rg-social-icon svg { width: 17px; height: 17px; }
}
.age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: linear-gradient(135deg, #7A0D0A, #B85E39);
  border-radius: 50%;
  font-weight: 900;
  font-size: .8rem;
  color: #fff;
  box-shadow: 0 2px 12px rgba(215,25,18,.55);
}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn-gold {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 24px;
  background: var(--grad-gold);
  background-size: 200% 200%;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
  transition: all .25s;
  text-decoration: none;
  animation: blue-shift 4s ease infinite;
  box-shadow: var(--glow-ambient);
}
.btn-gold:hover {
  filter: brightness(1.15);
  box-shadow: var(--glow-gold);
  color: #fff;
  transform: translateY(-1px);
}
.btn-deposit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 24px;
  background: var(--grad-green);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
  transition: all .25s;
  text-decoration: none;
  box-shadow: var(--glow-green);
}
.btn-deposit:hover {
  filter: brightness(1.1);
  box-shadow: var(--glow-green);
  color: #fff;
  transform: translateY(-1px);
}
.btn-outline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 24px;
  background: rgba(244,197,106,.12);
  color: var(--accent-primary-2);
  border: 1.5px solid var(--border-gold);
  border-radius: 10px;
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
  transition: all .25s;
  text-decoration: none;
  backdrop-filter: blur(10px);
}
.btn-outline:hover {
  background: rgba(244,197,106,.18);
  box-shadow: var(--glow-gold);
}
.btn-green {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #FBBF24, #4ade80);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s;
  text-decoration: none;
}
.btn-green:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 20px rgba(74,222,128,.4);
  transform: translateY(-1px);
}

@keyframes blue-shift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── FORMS ──────────────────────────────────────────── */
.form-card {
  background: var(--grad-card);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 32px;
  box-shadow: var(--shadow-lg), var(--glow-halo);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.form-label { font-size: .85rem; color: var(--text-secondary); margin-bottom: 6px; display: block; font-weight: 600; }
.form-control {
  width: 100%;
  background: rgba(20,20,20,.32);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: .9rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus {
  border-color: #B85E39;
  box-shadow: 0 0 0 5px rgba(215,25,18,0.2);
}
.form-control::placeholder { color: var(--text-secondary); }
.form-group { margin-bottom: 18px; }
.form-error { font-size: .8rem; color: var(--accent-red); margin-top: 4px; }

/* ── DEPOSIT: METHOD GRID / QUICK AMOUNTS / SUBMIT ──── */
.deposit-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .92rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}
.deposit-section-title .dst-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(215,25,18,.14);
  border: 1px solid rgba(215,25,18,.3);
  font-size: 1rem;
  flex-shrink: 0;
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.method-card {
  position: relative;
  background: rgba(20,20,20,.28);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--border-color);
  border-radius: 16px;
  padding: 18px 12px;
  cursor: pointer;
  text-align: center;
  transition: all .22s cubic-bezier(.4,0,.2,1);
}
.method-card img { width: 36px; height: 36px; object-fit: contain; margin: 0 auto; }
.method-card .method-emoji { font-size: 1.8rem; }
.method-card .method-label { font-weight: 700; margin-top: 8px; font-size: .9rem; }
.method-card:hover { border-color: rgba(215,25,18,.4); transform: translateY(-2px); }
.method-card.selected {
  border-color: #B85E39;
  background: rgba(215,25,18,.14);
  box-shadow: var(--glow-gold);
  transform: translateY(-2px);
}
.method-card .method-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #B85E39;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(184,94,57,.5);
}
.method-card.selected .method-check { display: flex; }

.quick-amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.quick-amount-btn {
  padding: 11px 6px;
  background: rgba(20,20,20,.32);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  transition: all .2s cubic-bezier(.4,0,.2,1);
}
.quick-amount-btn:hover { border-color: rgba(215,25,18,.4); transform: translateY(-1px); }
.quick-amount-btn.selected {
  border-color: #B85E39;
  background: rgba(215,25,18,.16);
  color: #fff;
  box-shadow: var(--glow-gold);
}

.amount-input-wrap { position: relative; }
.amount-input-wrap .amount-input-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text-secondary);
  pointer-events: none;
}
.amount-input-wrap .form-control {
  padding-left: 32px;
  font-size: 1.15rem;
  font-weight: 700;
  border-radius: 14px;
}

.bonus-offer-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, rgba(215,25,18,.1), rgba(184,94,57,.05));
  border: 1px solid rgba(244,197,106,.35);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 18px;
  cursor: pointer;
}
.bonus-offer-box .bonus-offer-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(215,25,18,.16);
  border: 1px solid rgba(244,197,106,.35);
  font-size: 1rem;
  flex-shrink: 0;
}
.bonus-offer-box input[type=checkbox] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; }

.deposit-disclaimer {
  font-size: .74rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
  margin-top: 14px;
}

/* ── SPIN THE WHEEL — premium casino redesign (2026-09-22) ──────────────
   Real HTML/CSS/JS wheel throughout: the conic-gradient wedges, prize
   legend and history all still come from $prizes (getActiveWheelPrizes())
   in spin.php, and the winner is still decided server-side in
   performWheelSpin() before any rotation math runs client-side. Nothing
   here changes prize weights, eligibility, or the spin/claim/credit path
   — presentation only. Confirmed exclusive to spin.php (no other page
   references any .wheel*/.btn-spin/.wl-dot class), so this section is
   safe to redesign in place without touching any other page's look. ── */
.wheel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(184,15,10,.55), rgba(90,10,8,.55));
  border: 1px solid rgba(244,197,106,.5);
  box-shadow: 0 0 18px rgba(215,25,18,.35), inset 0 1px 0 rgba(255,255,255,.08);
  color: #FFD9A0;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.wheel-heading {
  font-size: 1.6rem;
  font-weight: 900;
  margin: 0 0 4px;
  background: linear-gradient(120deg, #FFE0A0, #F4C56A 45%, #D71912 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  text-shadow: none;
  letter-spacing: .01em;
}
.wheel-tagline {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
/* No overflow:hidden here on purpose — the pointer sits above the wheel via
   a negative top offset, and the rim/outer-trim extend via negative insets;
   clipping this box would cut them off. The decorative spans below stay
   safely inside via their own modest %-based positioning instead. */
.wheel-card-glow { position: relative; }
.wheel-card-glow::before {
  content: '';
  position: absolute;
  top: 46%; left: 50%;
  width: 480px; height: 480px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(215,25,18,.22) 0%, rgba(184,94,57,.1) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* Decorative-only accents (coins/gem/sparkle) — pointer-events:none, hidden
   under 480px so they never crowd the wheel/button/status text on phones. */
.wheel-deco { position: absolute; pointer-events: none; z-index: 0; opacity: .85; filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); font-size: 1.6rem; }
.wheel-deco-coin1 { top: 6%;  left: 4%;  animation: wheel-float 5.5s ease-in-out infinite; }
.wheel-deco-coin2 { top: 14%; right: 5%; font-size: 1.3rem; animation: wheel-float 4.5s ease-in-out infinite .4s; }
.wheel-deco-gem   { bottom: 10%; left: 6%; font-size: 1.4rem; animation: wheel-float 6s ease-in-out infinite .8s; }
.wheel-deco-gift  { bottom: 4%; right: 4%; font-size: 1.5rem; animation: wheel-float 5s ease-in-out infinite .2s; }
@keyframes wheel-float { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@media (max-width: 480px) { .wheel-deco { display: none; } }

/* Fluid width (not transform:scale) so the reserved layout space always
   matches the rendered size — a scaled-up box would visually overflow its
   own box and risk overlapping the heading/button around it, since
   transform never affects layout/reflow. .wheel-lights' font-size below
   tracks this same clamp() shape (at the same 0.0533 × width ratio the
   bulb ring was designed at) so the bulbs stay proportional to the wheel
   at every size, purely in CSS — no JS/PHP viewport detection needed. */
.wheel-assembly {
  position: relative;
  z-index: 1;
  width: clamp(230px, 74vw, 290px);
  height: clamp(230px, 74vw, 290px);
  margin: 0 auto;
}
.wheel-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto 24px;
  z-index: 1;
}
.wheel-lights {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: clamp(12.3px, 3.94vw, 15.5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  z-index: 0;
  pointer-events: none;
  animation: wheel-twinkle 1.6s ease-in-out infinite alternate;
}
@keyframes wheel-twinkle { 0% { opacity: .45; filter: brightness(.85); } 100% { opacity: 1; filter: brightness(1.3); } }
/* Two rings: a slim outer trim (extra depth/"multiple concentric rings")
   and the main metallic-gold rim the lights + wheel sit inside. */
.wheel-outer-trim {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a2412, #1a0f08);
  box-shadow: 0 0 0 2px rgba(244,197,106,.28), 0 14px 40px rgba(0,0,0,.55);
  z-index: 0;
}
.wheel-rim {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #D71912, #FFE0A0, #F4C56A, #B85E39, #D71912, #F4C56A, #D71912);
  box-shadow:
    0 0 54px rgba(215,25,18,.5),
    inset 0 0 0 3px rgba(255,255,255,.22),
    inset 0 0 0 7px rgba(0,0,0,.4),
    inset 0 0 22px rgba(0,0,0,.5);
  z-index: 1;
}
.wheel-pointer {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wheel-pointer-mount {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #FFE9C2, #F4C56A 45%, #B8860B 80%, #7a5a12 100%);
  border: 1.5px solid rgba(255,255,255,.5);
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
  margin-bottom: -6px;
}
.wheel-pointer-tri {
  position: relative;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 22px solid #B8121A;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.55));
}
.wheel-pointer-tri::before {
  /* faceted ruby highlight */
  content: '';
  position: absolute;
  top: -20px; left: -6px;
  width: 6px; height: 10px;
  background: linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,0) 70%);
  border-radius: 2px;
  transform: rotate(18deg);
}
.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 7px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 0 3px rgba(0,0,0,.4),
    0 0 0 8px rgba(215,25,18,.42),
    0 16px 44px rgba(0,0,0,.55),
    inset 0 0 26px rgba(0,0,0,.35);
  position: relative;
  z-index: 2;
  transition: transform 4.6s cubic-bezier(.12,.72,.13,1);
}
.wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8a1810, #5a0f0a 65%, #3a0a06 100%);
  border: 3px solid transparent;
  background-clip: padding-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  z-index: 2;
  cursor: pointer;
  box-shadow:
    0 0 0 3px #F4C56A,
    0 0 0 5px rgba(0,0,0,.4),
    0 4px 14px rgba(0,0,0,.5),
    inset 0 2px 4px rgba(255,255,255,.2),
    inset 0 -4px 8px rgba(0,0,0,.45);
  animation: wheel-hub-pulse 2.2s ease-in-out infinite;
}
.wheel-hub-text { font-size: .8rem; font-weight: 900; letter-spacing: .04em; color: #FFE9C2; text-shadow: 0 1px 2px rgba(0,0,0,.6); line-height: 1; }
.wheel-hub-sub  { font-size: .46rem; font-weight: 700; letter-spacing: .05em; color: #F4C56A; text-transform: uppercase; line-height: 1; }
@keyframes wheel-hub-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #F4C56A, 0 0 0 5px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.2), inset 0 -4px 8px rgba(0,0,0,.45), 0 0 0 0 rgba(215,25,18,.5); }
  50%      { box-shadow: 0 0 0 3px #F4C56A, 0 0 0 5px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.2), inset 0 -4px 8px rgba(0,0,0,.45), 0 0 0 15px rgba(215,25,18,0); }
}
.btn-spin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  padding: 15px;
  background: var(--grad-gold);
  background-size: 200% 200%;
  animation: blue-shift 4s ease infinite, spin-btn-pulse 2s ease-in-out infinite;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  box-shadow: var(--glow-ambient), inset 0 1px 0 rgba(255,255,255,.35);
}
@keyframes spin-btn-pulse {
  0%, 100% { box-shadow: var(--glow-ambient), inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 0 rgba(215,25,18,.5); }
  50%      { box-shadow: var(--glow-ambient), inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 16px rgba(215,25,18,0); }
}
.btn-spin:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-spin:disabled { opacity: .5; cursor: not-allowed; filter: none; transform: none; animation: none; }
.wheel-locked-box {
  text-align: center;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(184,15,10,.14), rgba(0,0,0,.1));
  border: 1px solid rgba(244,197,106,.28);
  border-radius: 14px;
}
.wheel-result-banner {
  display: none;
  text-align: center;
  padding: 20px 18px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(184,15,10,.28), rgba(20,10,8,.5));
  border: 1px solid rgba(244,197,106,.55);
  box-shadow: 0 0 30px rgba(215,25,18,.3), inset 0 1px 0 rgba(255,255,255,.08);
  margin-top: 18px;
  font-weight: 800;
  font-size: .95rem;
  animation: wheel-result-pop .4s cubic-bezier(.34,1.56,.64,1);
}
.wheel-result-banner .wrb-title { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: #F4C56A; margin-bottom: 8px; }
.wheel-result-banner .wrb-img { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 10px; display: block; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.wheel-result-banner .wrb-text { color: #fff; }
@keyframes wheel-result-pop {
  0%   { opacity: 0; transform: scale(.85) translateY(6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.wheel-legend {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: flex-start;
  gap: 8px 10px;
  margin-top: 24px;
  padding: 4px 4px 20px;
  border-top: 1px solid var(--border-color);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
@media (min-width: 640px) { .wheel-legend { flex-wrap: wrap; justify-content: center; overflow-x: visible; } }
.wheel-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.wheel-legend-item img { border-radius: 5px; object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.wl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ── Desktop: richer, larger wheel. Real width (not transform:scale), so
   this correctly reserves its own layout space — nothing above or below it
   needs a compensating margin, and nothing can overlap. The .wheel-lights
   font-size clamp uses the exact same 0.0533 ratio against this wider
   range, so the bulb ring stays proportional here too. ── */
@media (min-width: 1024px) {
  .wheel-assembly { width: clamp(420px, 42vw, 480px); height: clamp(420px, 42vw, 480px); }
  .wheel-lights { font-size: clamp(22.4px, 2.24vw, 25.6px); }
  .wheel-card-glow::before { width: 620px; height: 620px; }
}
@media (prefers-reduced-motion: reduce) {
  .wheel-deco, .wheel-lights, .wheel-hub, .btn-spin, .wheel-result-banner { animation: none !important; }
  .wheel { transition-duration: .01ms !important; }
}

.btn-deposit-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: var(--grad-green);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .2px;
  cursor: pointer;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  box-shadow: var(--glow-green), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-deposit-submit:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.btn-deposit-submit:active { transform: translateY(0) scale(.98); }

/* ── ALERTS ─────────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: .88rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert-success { background: rgba(74,222,128,.1);  border: 1px solid rgba(74,222,128,.25); color: #4ade80; }
.alert-danger  { background: rgba(239,68,68,.1);   border: 1px solid rgba(239,68,68,.28);  color: #f87171; }
.alert-warning { background: rgba(251,191,36,.1);  border: 1px solid rgba(251,191,36,.28); color: #fbbf24; }
.alert-info    { background: rgba(215,25,18,.1);   border: 1px solid rgba(215,25,18,.28);  color: #D71912; }

/* ── TABLE ──────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th {
  background: rgba(20,20,20,.32);
  color: var(--text-secondary);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(215,25,18,.05);
  font-size: .88rem;
  color: var(--text-primary);
}
.data-table tr:hover td { background: rgba(215,25,18,.05); }
.data-table .badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
}
.badge-active   { background: rgba(74,222,128,.12);  color: #4ade80; }
.badge-pending  { background: rgba(251,191,36,.12);   color: #fbbf24; }
.badge-rejected { background: rgba(239,68,68,.1);     color: #f87171; }
.badge-inactive { background: rgba(148,163,184,.1);   color: #A89968; }

/* ── SIDEBAR LAYOUT ─────────────────────────────────── */
.with-sidebar {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 20px;
}
.sidebar {
  position: sticky;
  top: 80px;
  height: fit-content;
}
.sidebar-card {
  background: var(--grad-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.sidebar-header {
  padding: 16px 20px;
  background: rgba(20,20,20,.3);
  border-bottom: 1px solid var(--border-color);
}
.sidebar-header .user-name { font-weight: 800; font-size: 1.05rem; }
.sidebar-header .user-id   { font-size: .78rem; color: var(--text-secondary); }
.sidebar-balance {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}
.sidebar-balance .label { font-size: .75rem; color: var(--text-secondary); }
.sidebar-balance .amount {
  font-size: 1.5rem;
  font-weight: 900;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sidebar-menu { list-style: none; }
.sidebar-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  color: var(--text-secondary);
  font-size: .88rem;
  font-weight: 600;
  transition: all .2s;
  border-left: 3px solid transparent;
}
.sidebar-menu li a:hover, .sidebar-menu li a.active {
  background: linear-gradient(90deg, rgba(215,25,18,.12), transparent);
  color: #D71912;
  border-left-color: #B85E39;
}

/* ── MODAL ──────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,6,6,.78);
  backdrop-filter: blur(10px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--grad-card);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  width: 90%;
  max-width: 460px;
  padding: 28px;
  transform: translateY(24px) scale(.97);
  transition: transform .25s, opacity .25s;
  box-shadow: var(--shadow-lg), 0 0 77px rgba(215,25,18,0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.modal-overlay.open .modal-box { transform: translateY(0) scale(1); }
.modal-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-close {
  width: 28px; height: 28px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  transition: all .2s;
}
.modal-close:hover { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.1); }

/* ── PROVIDERS MODAL ─────────────────────────────────── */
.btn-providers-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .2s;
}
.btn-providers-open:hover { filter: brightness(1.1); }
.modal-box-providers { max-width: 640px; }
.provider-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}
.provider-modal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  background: rgba(20,20,20,.28);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.provider-modal-card:hover { border-color: rgba(215,25,18,.4); transform: translateY(-2px); }
.provider-modal-card.active {
  border-color: #B85E39;
  background: rgba(215,25,18,.14);
  box-shadow: var(--glow-gold);
}
.provider-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  font-weight: 800;
  font-size: 1.1rem;
  color: #F4C56A;
  overflow: hidden;
}
.provider-modal-icon img { width: 100%; height: 100%; object-fit: contain; }
.provider-modal-name {
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.provider-modal-count { font-size: .7rem; color: var(--text-secondary); }
.provider-modal-empty { display: none; text-align: center; color: var(--text-secondary); padding: 24px; font-size: .85rem; }

/* ── AUTH MODAL (login popup) ───────────────────────── */
.modal-box-auth {
  max-width: 820px;
  padding: 0;
  display: flex;
  overflow: hidden;
  position: relative;
}
.modal-box-auth .modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}
.auth-modal-promo {
  flex: 0 0 42%;
  background-color: #1A0C09;
  background-image: linear-gradient(160deg, #4A0D08 0%, #1A0C09 55%, #14110A 100%);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}
.auth-modal-promo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6,6,6,.9) 0%, rgba(6,6,6,.45) 45%, rgba(6,6,6,.15) 75%, transparent 100%),
              radial-gradient(ellipse 70% 60% at 20% 10%, rgba(241,38,22,.22) 0%, transparent 60%),
              radial-gradient(ellipse 60% 50% at 90% 90%, rgba(215,25,18,.16) 0%, transparent 55%);
  pointer-events: none;
}
.auth-modal-promo h2 {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.25;
  color: #fff;
  position: relative;
  z-index: 1;
  margin-top: 24px;
}
.auth-modal-promo p {
  font-size: .85rem;
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
  margin-top: 8px;
}
.auth-modal-form {
  flex: 1;
  padding: 40px 32px 28px;
  min-width: 0;
}
.auth-modal-form .logo { display: block; margin: 0 auto 20px; text-align: center; }
.auth-modal-form .logo img { height: 66px; width: auto; }
.auth-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
}
.auth-tab {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: .92rem;
  font-weight: 700;
  padding: 0 0 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.auth-tab.active { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); }
.auth-tab-panel { display: none; }
.auth-tab-panel.active { display: block; }
.auth-code-comingsoon {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: .82rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.auth-modal-stripe {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, #D71912, #f59e0b, #eab308, #F4C56A, #D71912, #B85E39);
}
@media (max-width: 768px) {
  .modal-box-auth { max-width: 420px; }
  .auth-modal-promo { display: none; }
  .auth-modal-form { padding: 32px 20px 24px; }
}

/* ── MOBILE NAV ─────────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(248,250,252,.98);
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 999;
  padding: 8px 6px;
}
.mobile-nav-items {
  display: flex;
  justify-content: space-between;
}
.mobile-nav-item {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  color: #8F8078;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s;
  white-space: nowrap;
}
.mobile-nav-item span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mobile-nav-item .m-icon { font-size: 1.3rem; }
.mobile-nav-item.active, .mobile-nav-item:hover { color: var(--accent-cyan); }
.mobile-deposit-btn {
  width: 52px; height: 52px;
  background: var(--grad-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  margin-top: -18px;
  box-shadow: 0 4px 28px rgba(215,25,18,.75);
  animation: blue-shift 4s ease infinite;
  background-size: 200% 200%;
}

/* ── GAME PAGE ──────────────────────────────────────── */
.game-container {
  position: relative;
  background: #000;
  width: 100%;
  height: calc(100vh - 60px);
}
.game-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.game-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(16,54,46,.7);
  backdrop-filter: blur(14px);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
}
.game-balance-chip {
  background: rgba(20,20,20,.48);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  padding: 5px 14px;
  font-size: .85rem;
  font-weight: 700;
  color: #D71912;
}

/* ── LOADING SPINNER ────────────────────────────────── */
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: #B85E39;
  border-right-color: var(--accent-cyan);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── PAGINATION ─────────────────────────────────────── */
.pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}
.page-btn {
  padding: 7px 14px;
  background: var(--grad-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: .85rem;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.page-btn:hover {
  border-color: var(--border-gold);
  color: #D71912;
}
.page-btn.active {
  background: linear-gradient(135deg, rgba(215,25,18,.24), rgba(184,94,57,.14));
  border-color: var(--border-gold);
  color: #F4C56A;
  box-shadow: 0 0 22px rgba(215,25,18,0.36);
}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid  { grid-template-columns: 1fr 1fr; }
  .stats-bar    { grid-template-columns: repeat(2, 1fr); }
  .promo-grid   { grid-template-columns: 1fr 1fr; }
  .hero-slide h1 { font-size: 2rem; }
  .hero-img      { height: 75%; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .top-nav   { padding: 0 12px; }
  .logo      { font-size: 1.1rem; }
  .logo img  { height: 40px; }
  .nav-inner { gap: 10px; }
  .nav-icon-btn { width: 36px; height: 36px; font-size: 1rem; }
  .nav-actions { gap: 8px; margin-left: auto; }
  .balance-display {
    padding: 5px 10px;
    font-size: .75rem;
    gap: 4px;
  }
  .balance-display > span:first-child { display: none; }
  .btn-login, .btn-register { padding: 6px 12px; font-size: .78rem; }

  body            { padding-bottom: 96px; }
  .main-wrapper   { padding: 14px 12px; }
  .with-sidebar   { grid-template-columns: 1fr; }
  .sidebar        { position: static; }
  .mobile-bottom-nav { display: block; }

  .hero-slider   { height: 150px; margin: 10px 12px 0; border-radius: 12px; overflow: hidden; }
  .hero-slide    { padding: 14px 16px; }
  .hero-slide h1 { font-size: 1.15rem; }
  .hero-slide p  { font-size: .78rem; margin: 6px 0 10px; }
  .hero-img      { display: none; }
  .hero-dots     { bottom: 10px; }

  .promo-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }
  .promo-card { aspect-ratio: 16/5; padding: 14px 16px; }

  .category-tabs-wrap { margin-bottom: 16px; }
  .category-tabs { gap: 8px; }
  .cat-tab { padding: 8px 16px 8px 7px; font-size: .8rem; gap: 7px; box-shadow: 0 2px 8px rgba(0,0,0,.14); }
  .cat-tab .icon { width: 24px; height: 24px; font-size: .8rem; }

  .prov-carousel-wrap { padding: 0; margin-bottom: 22px; }
  .prov-carousel-btn  { display: none; }
  .prov-carousel      { gap: 10px; padding: 6px 2px 10px; scroll-snap-type: x proximity; }
  .prov-card   { flex: 0 0 96px; width: 96px; height: 58px; padding: 8px; gap: 6px; border-radius: 14px; scroll-snap-align: start; }
  .prov-icon   { width: 100%; height: 100%; border-radius: 8px; font-size: 1.1rem; }
  .prov-name   { font-size: .7rem; max-width: 84px; }
  .prov-count  { font-size: .6rem; }

  .section-title { margin-bottom: 12px; }
  .section-title h2 { font-size: 1rem; }

  .game-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .hot-carousel-card { width: 100px; }
  .game-card .play-btn { font-size: .68rem; padding: 5px 10px; }
  .game-name-bar { font-size: .72rem; padding: 6px 8px; }
  .badge-hot, .badge-new, .badge-popular { font-size: .6rem; padding: 2px 6px; }
  .badge-rebate { font-size: .54rem; padding: 2px 6px; }

  .footer-grid   { grid-template-columns: 1fr; gap: 20px; }
  .site-footer   { padding: 24px 14px 14px; margin-top: 32px; }
  .license-badges { flex-wrap: wrap; gap: 8px; }
  .footer-brand  { display: block; }

  .modal-box { padding: 22px 18px; }

  .with-sidebar { gap: 16px; padding: 16px 12px; }
  .form-card    { padding: 20px 16px; }
  .method-grid  { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
  .method-card  { padding: 12px 8px; }
  .method-card img { width: 30px; height: 30px; }
  .method-card .method-emoji { font-size: 1.5rem; }
  .method-card .method-label { font-size: .8rem; margin-top: 4px; }
  .quick-amount-btn { font-size: .74rem; padding: 9px 4px; }
  .amount-input-wrap .form-control { font-size: 1.05rem; }
  .btn-deposit-submit { padding: 12px; font-size: .88rem; }
}

/* Responsive table scroll wrapper */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .data-table { min-width: 480px; }

@media (max-width: 768px) {
  .profile-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .profile-forms { grid-template-columns: 1fr !important; }
  .history-tabs  { flex-wrap: wrap !important; }
  .game-search-form { flex-wrap: wrap !important; }
  .game-search-form input[type=text] { width: 100% !important; min-width: 0 !important; }
}

@media (max-width: 480px) {
  .profile-stats { grid-template-columns: 1fr !important; }
  .lotto-cards   { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .logo { font-size: .95rem; }
  .logo span { font-size: .95rem; }
  .logo img { height: 26px; }
  .top-nav { padding: 0 6px; }
  .nav-inner { gap: 4px; }
  .nav-icon-btn { width: 36px; height: 36px; font-size: .95rem; }
  .balance-display { padding: 4px 8px; }
  .btn-login  { padding: 6px 10px; font-size: .75rem; }
  .btn-register { padding: 6px 10px; font-size: .75rem; }

  .hero-slider   { height: 130px; margin: 10px 10px 0; }
  .hero-slide h1 { font-size: 1.05rem; }
  .hero-slide p  { font-size: .74rem; margin: 5px 0 10px; }
  .btn-gold, .btn-outline { padding: 8px 14px; font-size: .8rem; }

  .main-wrapper { padding: 12px 10px; }

  .cat-tab { padding: 7px 14px 7px 6px; font-size: .76rem; }
  .cat-tab .icon { width: 22px; height: 22px; font-size: .76rem; }

  .mobile-bottom-nav { left: 8px; right: 8px; padding: 7px 4px; }
  .mobile-nav-item   { padding: 6px 2px; font-size: .58rem; gap: 2px; }
  .mobile-nav-item .m-icon { font-size: 1.15rem; }
  .mobile-deposit-btn { width: 46px; height: 46px; font-size: 1.25rem; margin-top: -16px; }

  .prov-card  { flex: 0 0 86px; width: 86px; height: 52px; padding: 7px; }
  .prov-icon  { font-size: 1rem; }
  .prov-name  { font-size: .66rem; max-width: 74px; }

  .game-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .hot-carousel-card { width: 88px; }
  .game-name-bar { font-size: .68rem; padding: 5px 7px; }
  .badge-hot, .badge-new, .badge-popular { font-size: .56rem; padding: 2px 5px; }
  .badge-rebate { font-size: .5rem; padding: 2px 5px; }

  .modal-box { padding: 18px 14px; margin: 0 8px; }

  .with-sidebar { padding: 12px 8px; }
  .form-card    { padding: 16px 12px; }
  .method-grid  { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 6px; }
  .method-card  { padding: 10px 6px; border-radius: 12px; }
  .method-card img { width: 26px; height: 26px; }
  .method-card .method-emoji { font-size: 1.3rem; }
  .method-card .method-label { font-size: .72rem; margin-top: 3px; }
  .quick-amount-grid { gap: 6px; }
  .quick-amount-btn  { font-size: .68rem; padding: 8px 3px; border-radius: 8px; }
  .amount-input-wrap .amount-input-prefix { left: 12px; font-size: 1rem; }
  .amount-input-wrap .form-control { font-size: 1rem; padding-left: 28px; }
  .btn-deposit-submit { padding: 12px; font-size: .84rem; gap: 6px; }
}

/* =====================================================
   WINMNL REDESIGN — PHASE 2: navigation shell
   New dark-cinematic header + mobile bottom nav, built on
   tokens.css. Old .desktop-sidebar / .top-nav / .sidebar-drawer /
   .mobile-bottom-nav markup has been removed from index.php;
   their CSS above is now inert (no matching elements) and left
   in place only because later phases still touch nearby rules --
   it will be cleaned up as those pages are migrated.
   ===================================================== */

/* Sidebar is gone -- stop offsetting the content column for it. */
@media (min-width: 1024px) {
  .app-main { margin-left: 0 !important; width: 100% !important; }
}

/* Header */
.wm-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(6,7,13,.72);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border);
  transition: padding var(--transition-base), box-shadow var(--transition-base);
}
.wm-header--compact { box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.wm-header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 92px;
  padding: 0 var(--space-4);
  transition: height var(--transition-base);
}
.wm-header--compact .wm-header-inner { height: 72px; }
.wm-logo { display: flex; align-items: center; flex-shrink: 0; }
.wm-logo img { height: 76px; width: auto; transition: height var(--transition-base); }
.wm-header--compact .wm-logo img { height: 58px; }

.wm-nav-center { display: none; }
.wm-nav-right { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

.wm-icon-btn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
}
.wm-icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--surface-elevated); }
.wm-notif-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-magenta);
  box-shadow: 0 0 8px rgba(184,94,57,.8);
}

.wm-balance {
  display: flex; align-items: center;
  height: var(--btn-height);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
}
.wm-btn-deposit {
  display: flex; align-items: center; justify-content: center;
  height: var(--btn-height);
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--gold-dark), var(--accent-primary-2) 55%, var(--gold-light));
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  white-space: nowrap;
  box-shadow: var(--glow-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  border: none;
  cursor: pointer;
}
.wm-btn-deposit:hover { transform: translateY(-1px); box-shadow: var(--glow-primary); }
.wm-btn-ghost {
  height: var(--btn-height);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.wm-btn-ghost:hover { background: var(--surface-glass); border-color: var(--accent-secondary); }

/* Guest mobile header — Login/Register replace Search/Chat below 1024px
   (see .wm-mobile-only / .wm-desktop-only, defined with the header
   responsive rules further down). These are the user-supplied final 3D
   button artworks (real PNG source, re-cut to true alpha transparency
   server-side) — the artwork already contains its own metallic border and
   glow, so nothing extra is drawn around it here; only sizing, a practical
   ≥44px tap area via the wrapper, and a subtle press effect. */
.wm-header-btn-img {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 2px 1px;
  flex-shrink: 0;
  text-decoration: none;
  transition: transform var(--transition-fast);
}
.wm-header-btn-img:active { transform: scale(0.97); }
.wm-header-btn-img img { width: auto; display: block; }
.wm-header-btn-login-img { height: clamp(34px, 9vw, 42px); }
.wm-header-btn-register-img { height: clamp(36px, 9.5vw, 44px); }
.wm-header-btn-plain { background: none; border: none; padding: 2px 1px; }

/* Profile dropdown */
.wm-profile { position: relative; }
.wm-avatar-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--surface-elevated);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--transition-fast);
}
.wm-avatar-btn:hover { border-color: var(--accent-secondary); }
.wm-avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.wm-avatar-fallback { color: var(--text-primary); font-weight: 800; font-size: .82rem; }
.wm-profile-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 240px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 300;
}
.wm-profile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.wm-profile-menu-head { padding: var(--space-3) var(--space-3) var(--space-2); }
.wm-profile-name { color: var(--text-primary); font-weight: 800; font-size: .92rem; }
.wm-profile-vip { color: var(--accent-secondary); font-size: .78rem; margin-top: 2px; }
.wm-profile-menu a {
  display: block;
  padding: 10px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: .85rem;
  font-weight: 600;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.wm-profile-menu a:hover { background: var(--surface-glass); color: var(--text-primary); }
.wm-profile-menu-divider { height: 1px; background: var(--border); margin: var(--space-2) 4px; }

/* Search overlay */
.wm-search-overlay {
  position: fixed; inset: 0;
  z-index: 400;
  background: rgba(6,7,13,.88);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10vh var(--space-4) var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.wm-search-overlay.open { opacity: 1; visibility: visible; }
.wm-search-box {
  width: 100%;
  max-width: 640px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 56px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}
.wm-search-box input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 1rem;
}
.wm-search-box button {
  background: none; border: none; color: var(--text-secondary);
  cursor: pointer; font-size: 1.1rem; padding: 4px;
}
.wm-search-results { width: 100%; max-width: 640px; margin-top: var(--space-4); max-height: 60vh; overflow-y: auto; }

/* ── Live search results (Phase 4/5) ─────────────────── */
.wm-search-item {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  background: none; border: none; text-align: left;
  color: var(--text-primary); text-decoration: none;
  cursor: pointer; font: inherit;
  transition: background var(--transition-fast);
}
.wm-search-item:hover, .wm-search-item-active { background: var(--surface-glass); }
.wm-search-thumb {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius-sm); object-fit: cover;
  background: var(--surface);
}
.wm-search-thumb-fallback { display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.wm-search-item-info { flex: 1; min-width: 0; }
.wm-search-item-name { font-size: .9rem; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-search-hl { background: rgba(241,38,22,.28); color: var(--text-primary); border-radius: 3px; padding: 0 1px; }
.wm-search-item-meta { display: flex; gap: 6px; margin-top: 4px; }
.wm-search-badge {
  font-size: .66rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill);
  background: rgba(215,25,18,.14); color: var(--accent-primary-2, #F4C56A);
}
.wm-search-badge-cat { background: rgba(241,38,22,.12); color: var(--accent-secondary); }

.wm-search-recent-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px var(--space-3) 8px; font-size: .72rem; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px;
}
.wm-search-clear-recent { background: none; border: none; color: var(--accent-secondary); font-size: .72rem; font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: 0; }
.wm-search-recent-item svg { color: var(--text-muted); flex-shrink: 0; }

.wm-search-empty { padding: 32px var(--space-4); text-align: center; color: var(--text-secondary); }
.wm-search-empty-sub { font-size: .8rem; color: var(--text-muted); margin-top: 4px; }

/* Skeleton loading state — only appears while a live search fetch is in
   flight, nowhere else on the site. */
.wm-skel-thumb, .wm-skel-line {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-elevated) 37%, var(--surface) 63%);
  background-size: 400% 100%;
  animation: wm-skel-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
.wm-skel-thumb { width: 44px; height: 44px; flex-shrink: 0; }
.wm-skel-line { height: 10px; border-radius: 4px; }
@keyframes wm-skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .wm-skel-thumb, .wm-skel-line { animation-duration: 3s; }
}

/* Mobile bottom nav */
.wm-bottom-nav {
  display: flex;
  position: fixed;
  left: 10px; right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 999;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 6px 4px;
  justify-content: space-between;
}
.wm-bn-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 2px;
  color: var(--text-muted);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  transition: color var(--transition-fast);
}
.wm-bn-item svg, .wm-bn-item .wm-bn-icon { transition: filter var(--transition-fast); }
.wm-bn-item.active, .wm-bn-item:hover { color: var(--accent-secondary); }
.wm-bn-item.active svg, .wm-bn-item.active .wm-bn-icon {
  /* No brightness() boost here: the replacement artwork is already a
     glossy, high-highlight metallic render, and brightness(1.12) blew out
     those highlights toward white. A pure colored glow reads as clearly
     "active" without oversaturating the source art. */
  filter: drop-shadow(0 0 5px rgba(244,197,106,.65)) drop-shadow(0 0 2px rgba(241,38,22,.25));
}
.wm-bn-icon { width: 32px; height: 32px; object-fit: contain; }
.wm-bn-wallet { flex: 0 0 auto; }
.wm-bn-wallet-btn {
  width: 62px; height: 62px;
  margin-top: -26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--glow-primary);
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
.wm-bn-wallet-btn img { width: 100%; height: 100%; object-fit: contain; }
.wm-bn-wallet:hover .wm-bn-wallet-btn, .wm-bn-wallet:focus-visible .wm-bn-wallet-btn {
  filter: drop-shadow(0 0 8px rgba(244,197,106,.55));
  transform: translateY(-1px);
}

/* Responsive: desktop reveals top nav, hides bottom nav */
@media (min-width: 1024px) {
  .wm-nav-center { display: flex; align-items: center; gap: var(--space-1); }
  .wm-nav-link {
    padding: 9px var(--space-4);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: .88rem;
    transition: color var(--transition-fast), background var(--transition-fast);
  }
  .wm-nav-link:hover { color: var(--text-primary); background: var(--surface-glass); }
  .wm-nav-link.active { color: var(--text-primary); background: var(--surface-glass); box-shadow: inset 0 0 0 1px var(--border-strong); }
  .wm-desktop-only { display: flex !important; }
  .wm-mobile-only { display: none !important; }
  .wm-bottom-nav { display: none; }
}
@media (max-width: 1023px) {
  .wm-desktop-only { display: none !important; }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}
.wm-mobile-only { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .wm-header, .wm-header-inner, .wm-logo img, .wm-btn-deposit, .wm-profile-menu, .wm-search-overlay { transition: none; }
}

/* =====================================================
   WINMNL REDESIGN -- PHASE 3: homepage + hero + cards
   Overrides on top of the existing (working) hover/interaction
   mechanics for .game-card, .hero-slide, .hac-card, .quick-cat-card
   -- the animation/transition logic was already solid, only the
   color language changes here to the new violet/cyan/magenta system.
   ===================================================== */

/* -- Hero -- */
.hero-slide {
  background: linear-gradient(135deg, #120F0D 0%, #1A1412 60%, #120F0D 100%);
}
.hero-slide::before {
  background:
    radial-gradient(ellipse 65% 85% at 10% 50%,  rgba(215,25,18,.22) 0%, transparent 60%),
    radial-gradient(ellipse 45% 65% at 85% 30%,  rgba(241,38,22,.14) 0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 50% 100%, rgba(184,94,57,.10) 0%, transparent 50%);
}
.hero-slide h1 span {
  background: linear-gradient(120deg, var(--accent-secondary), var(--accent-primary-2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-dot.active {
  background: var(--accent-secondary);
  box-shadow: 0 0 16px rgba(241,38,22,.9);
}
.hero-cta-row { display: flex; gap: 12px; position: relative; z-index: 1; flex-wrap: wrap; }
.hero-cta-primary {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--btn-height);
  padding: 0 28px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--gold-dark), var(--accent-primary-2) 55%, var(--gold-light));
  color: #fff; font-weight: 800; font-size: .92rem;
  box-shadow: var(--glow-primary);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.hero-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 0 56px rgba(215,25,18,.5); }
.hero-cta-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--btn-height);
  padding: 0 24px;
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
  border: 1px solid var(--border-strong);
  color: var(--text-primary); font-weight: 700; font-size: .9rem;
  backdrop-filter: var(--glass-blur);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.hero-cta-secondary:hover { border-color: var(--accent-secondary); background: rgba(241,38,22,.08); }

/* -- Ticker -- */
.ticker-wrap { background: linear-gradient(90deg, rgba(215,25,18,.10), rgba(184,94,57,.06), rgba(241,38,22,.10)); border-bottom-color: var(--border); }
.ticker-item .winner { background: linear-gradient(120deg, var(--accent-secondary), var(--accent-primary-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* -- Section titles -- get a little visual rhythm via nth-of-type accent rotation */
.section-title h2::before { background: linear-gradient(to bottom, var(--accent-primary), var(--accent-secondary)); box-shadow: 0 0 16px rgba(215,25,18,.7); }
.view-all { color: var(--accent-secondary); background: var(--surface-glass); border-color: var(--border); }
.view-all:hover { color: var(--text-primary); background: rgba(215,25,18,.14); border-color: var(--border-strong); }

/* -- Quick actions row (new, Section 9) -- */
.wm-quick-actions {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.wm-qa-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px;
  border-radius: var(--radius-md);
  background: var(--surface-glass);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
  transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
}
.wm-qa-btn svg { color: var(--accent-secondary); }
.wm-qa-btn:hover { transform: translateY(-2px); border-color: var(--border-strong); color: var(--text-primary); }
.wm-qa-btn.wm-qa-deposit { background: linear-gradient(135deg, rgba(244,197,106,.22), rgba(220,168,77,.12)); border-color: var(--border-gold); color: var(--text-primary); }
@media (max-width: 640px) { .wm-quick-actions { grid-template-columns: repeat(3, 1fr); } }

/* -- Home account card -- */
.hac-card {
  background:
    repeating-linear-gradient(115deg, rgba(215,25,18,.06) 0px, rgba(215,25,18,.06) 1px, transparent 1px, transparent 46px),
    linear-gradient(150deg, #2B211E 0%, #1A1412 42%, #241D1A 78%, #0D0B0A 100%);
  border-color: var(--border-strong);
  box-shadow: 0 0 0 2px rgba(215,25,18,.14), var(--shadow-lg), 0 0 45px rgba(241,38,22,.18);
}
.hac-avatar-wrap::before { background: conic-gradient(from 0deg, var(--accent-primary-2), var(--accent-secondary), #fff, var(--accent-primary-2)); }
.hac-avatar { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); }
.hac-vip-badge { background: rgba(184,94,57,.16) !important; color: var(--accent-magenta) !important; }
.hac-balance { color: var(--text-primary); }
.hac-btn-topup { background: linear-gradient(135deg, var(--gold-dark), var(--accent-primary-2) 55%, var(--gold-light)) !important; }
.hac-btn-withdraw { border-color: var(--border-strong) !important; }

/* -- Quick category cards (guest homepage) -- */

/* -- Game cards: violet/cyan glass, cyan play button -- */
.game-card {
  background: var(--surface-glass);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.game-card:hover {
  box-shadow: 0 16px 48px rgba(215,25,18,.3), 0 0 0 2px rgba(241,38,22,.55), 0 0 40px rgba(215,25,18,.25);
  border-color: var(--accent-secondary);
}
.game-card:active {
  box-shadow: 0 16px 48px rgba(215,25,18,.3), 0 0 0 2px rgba(241,38,22,.55), 0 0 40px rgba(215,25,18,.25);
  border-color: var(--accent-secondary);
}
.game-name-bar { background: var(--surface-glass); }
.game-thumb .play-btn {
  background: linear-gradient(135deg, var(--accent-primary-2), var(--gold-light));
  box-shadow: 0 4px 24px rgba(244,197,106,.5);
}
.badge-hot { background: linear-gradient(135deg, var(--accent-magenta), #8F4F2F); box-shadow: 0 2px 10px rgba(184,94,57,.6); }
.badge-new { background: linear-gradient(135deg, var(--accent-secondary), #7A0D0A); box-shadow: 0 2px 8px rgba(241,38,22,.5); }
.fav-heart-btn.is-fav { color: var(--accent-magenta); }

/* =====================================================
   ACCESSIBILITY -- visible keyboard focus everywhere.
   :focus-visible (not plain :focus) so mouse/touch clicks don't
   show a ring, only real keyboard/AT navigation does.
   ===================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-secondary, #F12616);
  outline-offset: 2px;
  border-radius: 4px;
}
.wm-avatar-btn:focus-visible,
.fav-heart-btn:focus-visible,
.wm-bn-wallet-btn:focus-visible {
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Popup variant of the app-reward banner — same visual as the original
   inline banner, shown as an overlay instead of a permanent homepage
   section. */
.modal-overlay .app-reward-banner {
  width: 92%;
  max-width: 400px;
  margin: 0;
  transform: translateY(24px) scale(.97);
  transition: transform .25s, opacity .25s;
}
.modal-overlay.open .app-reward-banner { transform: translateY(0) scale(1); }
.arb-popup-close {
  position: absolute;
  top: 10px; right: 10px; z-index: 2;
  width: 28px; height: 28px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: .8rem;
}

/* ── Homepage video showcase ─────────────────────────────────── */
.video-showcase {
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--border-gold);
  background: linear-gradient(135deg, rgba(20,20,20,.65), rgba(6,6,6,.55));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.video-showcase-head h2 { font-size: 1.2rem; font-weight: 900; color: #fff; margin-bottom: 4px; }
.video-showcase-head p { font-size: .82rem; color: var(--text-secondary); margin-bottom: 16px; }
.video-showcase-frame {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1280/482;
  margin: 0 auto 16px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--surface-elevated), var(--background-primary) 60%, rgba(215,25,18,.18));
  border: 1px solid var(--border-gold);
}
.video-showcase-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-showcase-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--grad-gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  padding-left: 4px;
  box-shadow: 0 4px 24px rgba(244,197,106,.65);
  transition: opacity .3s;
  pointer-events: none;
}
.video-showcase-frame.is-playing .video-showcase-play { opacity: 0; }
.video-showcase-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.video-showcase-badges {
  font-size: .78rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.video-showcase-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--grad-gold);
  color: #fff;
  font-weight: 800;
  font-size: .88rem;
  padding: 12px 26px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(215,25,18,.45);
  transition: filter .2s;
  white-space: nowrap;
}
.video-showcase-cta:hover { filter: brightness(1.1); }
.video-showcase-tagline {
  font-size: .8rem;
  font-style: italic;
  color: var(--text-gold);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .video-showcase { padding: 16px 14px; border-radius: 14px; }
  .video-showcase-head h2 { font-size: 1.05rem; }
  .video-showcase-meta { flex-direction: column; }
  .video-showcase-badges, .video-showcase-tagline { white-space: normal; }
}

/* ── Shared "Member Center" tile system (promoted from dashboard.php so
   Agent Center and any future tile-based page can reuse it without
   duplicating ~70 lines per file) ───────────────────────────────── */
.acct-h2 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.acct-h2-title { font-size: .95rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; }
.acct-h2-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(215,25,18,.5), transparent); }
.acct-h2-sub { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.acct-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.acct-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 4px 9px;
  min-height: 88px;
  background: linear-gradient(160deg, var(--surface-elevated), var(--background-primary));
  border: 1px solid rgba(215,25,18,.3);
  border-radius: 14px;
  text-decoration: none;
  position: relative;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.acct-tile:hover, .acct-tile:focus-visible {
  border-color: var(--accent-primary-2);
  box-shadow: 0 4px 16px rgba(215,25,18,.35);
  transform: translateY(-2px);
}
.acct-tile:active { transform: scale(.96); }
.acct-tile:focus-visible { outline: 2px solid var(--accent-primary-2); outline-offset: 2px; }
.acct-tile-icon { width: clamp(44px, 12vw, 52px); height: clamp(44px, 12vw, 52px); object-fit: contain; flex-shrink: 0; }
.acct-tile-label {
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-primary);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.acct-tile-badge {
  position: absolute; top: 6px; right: 8px;
  min-width: 16px; height: 16px; padding: 0 3px;
  background: #D71912; border-radius: 8px;
  font-size: .6rem; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--background-primary);
}
.acct-tile.row-danger .acct-tile-label { color: var(--danger, #EF4444); }
@media (prefers-reduced-motion: reduce) {
  .acct-tile { transition: none; }
  .acct-tile:hover { transform: none; }
}

/* ── Agent Center sub-nav ─────────────────────────────────────── */
.agent-nav-wrap { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.agent-nav-back {
  flex-shrink:0; width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface); border:1px solid var(--border-color);
  color: var(--text-primary); text-decoration:none; font-size:1.1rem;
}
.agent-nav-tabs {
  display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; flex:1;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.agent-nav-tabs::-webkit-scrollbar { display:none; }
.agent-nav-tab {
  flex-shrink:0; padding:8px 14px; border-radius:999px; font-size:.78rem; font-weight:700;
  background: var(--surface); border:1px solid var(--border-color);
  color: var(--text-secondary); text-decoration:none; white-space:nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.agent-nav-tab.active { background: var(--grad-gold); border-color: transparent; color:#1a1008; }
.agent-nav-tab:focus-visible { outline:2px solid var(--accent-primary-2); outline-offset:2px; }

/* ── Agent Center date-range filter ──────────────────────────── */
.agent-daterange { margin-bottom:16px; }
.agent-daterange-pills { display:flex; gap:6px; overflow-x:auto; margin-bottom:8px; scrollbar-width:none; }
.agent-daterange-pills::-webkit-scrollbar { display:none; }
.agent-pill {
  flex-shrink:0; padding:7px 14px; border-radius:999px; font-size:.76rem; font-weight:700;
  background: var(--surface); border:1px solid var(--border-color);
  color: var(--text-secondary); text-decoration:none; white-space:nowrap; cursor:pointer;
}
.agent-pill.active { background: var(--grad-gold); border-color:transparent; color:#1a1008; }
.agent-daterange-custom { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.agent-date-input {
  background: var(--surface); border:1px solid var(--border-color); border-radius:8px;
  padding:6px 8px; color: var(--text-primary); font-size:.76rem; min-width:0;
}
.agent-daterange-sep { color: var(--text-muted); font-size:.8rem; }
.agent-daterange-custom button { border:none; }

/* ── Agent Center summary cards / metric grid ────────────────── */
.agent-metric-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
@media (min-width:640px) { .agent-metric-grid { grid-template-columns:repeat(4,1fr); } }
.agent-metric-card {
  background: var(--surface); border:1px solid var(--border-color); border-radius:12px;
  padding:12px 14px;
}
.agent-metric-label { font-size:.68rem; color: var(--text-secondary); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.agent-metric-val { font-size:1.15rem; font-weight:900; color: var(--text-primary); font-variant-numeric:tabular-nums; }
.agent-metric-val.gold { color: var(--accent-primary-2); }
.agent-metric-val.red { color: var(--accent-secondary); }

/* ── Agent Center card / table shell ─────────────────────────── */
.agent-card { background: var(--surface); border:1px solid var(--border-color); border-radius:14px; padding:16px; margin-bottom:14px; }
.agent-card h3 { font-size:.92rem; font-weight:800; color:#fff; margin-bottom:10px; }
.agent-table-wrap { overflow-x:auto; }
.agent-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.agent-table th { padding:8px 10px; color:var(--text-secondary); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; text-align:left; border-bottom:1px solid var(--border-color); white-space:nowrap; }
.agent-table td { padding:9px 10px; border-bottom:1px solid rgba(215,25,18,.08); white-space:nowrap; }
.agent-table tr:last-child td { border-bottom:none; }
.agent-empty { text-align:center; padding:28px 16px; color: var(--text-secondary); font-size:.85rem; }

/* ── Agent Center badges ─────────────────────────────────────── */
.agent-badge { font-size:.68rem; font-weight:800; padding:2px 10px; border-radius:20px; white-space:nowrap; }
.agent-badge-paid { background:rgba(34,197,94,.12); color:#22c55e; }
.agent-badge-pending { background:rgba(244,197,106,.14); color: var(--accent-primary-2); }
.agent-badge-cancelled { background:rgba(148,163,184,.12); color:#94a3b8; }
.agent-badge-active { background:rgba(34,197,94,.12); color:#22c55e; }
.agent-badge-inactive { background:rgba(148,163,184,.12); color:#94a3b8; }

/* ── Agent Center pagination ─────────────────────────────────── */
.agent-pagination { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; }
.agent-pagination a, .agent-pagination span {
  padding:7px 14px; border-radius:8px; font-size:.8rem; font-weight:700;
  background: var(--surface); border:1px solid var(--border-color); color: var(--text-primary); text-decoration:none;
}
.agent-pagination .disabled { opacity:.4; pointer-events:none; }

/* -- Agent Center nav badge (unread count next to a tab label) -- */
.agent-nav-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px; margin-left:6px;
  background:#D71912; border-radius:8px; font-size:.62rem; font-weight:800; color:#fff;
  vertical-align:middle; box-shadow:0 0 0 2px var(--surface);
}

/* -- Agent Announcements list -- */
.ann-item {
  background: var(--surface); border:1px solid var(--border-color); border-radius:14px;
  padding:14px 16px; margin-bottom:10px; display:flex; gap:12px; align-items:flex-start;
  text-decoration:none; position:relative; transition:border-color .15s, background .15s;
}
.ann-item.is-unread { border-color:rgba(215,25,18,.5); background:linear-gradient(160deg, rgba(215,25,18,.08), var(--surface)); }
.ann-item:active { transform:scale(.995); }
.ann-icon { font-size:1.3rem; flex-shrink:0; margin-top:2px; }
.ann-main { flex:1; min-width:0; }
.ann-title-row { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.ann-title { font-weight:800; font-size:.9rem; color:#fff; }
.ann-unread-dot { width:8px; height:8px; border-radius:50%; background:#D71912; flex-shrink:0; box-shadow:0 0 6px rgba(215,25,18,.6); }
.ann-preview { font-size:.82rem; color: var(--text-secondary); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ann-meta { font-size:.72rem; color: var(--text-muted); margin-top:6px; display:flex; gap:10px; flex-wrap:wrap; }
.ann-meta .ann-expired-tag { color:#94a3b8; }
.ann-caught-up { text-align:center; padding:10px 14px; font-size:.78rem; color: var(--text-secondary); background: var(--surface); border:1px solid var(--border-color); border-radius:12px; margin-bottom:14px; }

/* -- Agent Announcement detail -- */
.ann-detail-title { font-size:1.1rem; font-weight:800; color:#fff; margin-bottom:6px; }
.ann-detail-meta { font-size:.75rem; color: var(--text-muted); margin-bottom:16px; display:flex; gap:12px; flex-wrap:wrap; }
.ann-detail-body { font-size:.9rem; line-height:1.7; color: var(--text-primary); white-space:pre-line; word-wrap:break-word; }
.ann-detail-expired-note { margin-top:16px; padding:10px 14px; background:rgba(148,163,184,.1); border-radius:10px; font-size:.78rem; color:#94a3b8; }

.agent-pagination .current { background: var(--grad-gold); color:#1a1008; border-color:transparent; }

/* ── Agent Center search ─────────────────────────────────────── */
.agent-search { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.agent-search input[type=text] {
  flex:1; min-width:120px; background: var(--surface); border:1px solid var(--border-color); border-radius:10px;
  padding:10px 14px; color: var(--text-primary); font-size:.85rem;
}
.agent-search select {
  background: var(--surface); border:1px solid var(--border-color); border-radius:10px;
  padding:10px 12px; color: var(--text-primary); font-size:.82rem;
}
.agent-search button {
  background: var(--grad-gold); border:none; border-radius:10px; padding:10px 18px;
  color:#1a1008; font-weight:800; font-size:.82rem; cursor:pointer;
}

/* ── Agent Center member row (Team page) ─────────────────────── */
.agent-member-row {
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background: var(--surface); border:1px solid var(--border-color); border-radius:12px; margin-bottom:8px;
  text-decoration:none; color:inherit;
}
.agent-member-avatar {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background: var(--grad-gold); color:#1a1008; font-weight:900; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
}
.agent-member-info { flex:1; min-width:0; }
.agent-member-name { font-weight:700; font-size:.9rem; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agent-member-meta { font-size:.72rem; color: var(--text-secondary); margin-top:2px; }
.agent-member-chevron { color: var(--text-muted); flex-shrink:0; }

/* ── Agent Center landing page tiles reuse .acct-tile-grid/.acct-tile above ── */
.agent-tile-soon { opacity:.5; pointer-events:none; position:relative; }
.agent-tile-soon-tag {
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  background: var(--surface-elevated); border:1px solid var(--border-gold); border-radius:6px;
  font-size:.52rem; font-weight:800; color: var(--accent-primary-2); padding:1px 6px; white-space:nowrap;
}
@media (max-width:480px) {
  .agent-daterange-custom { width:100%; }
  .agent-date-input { flex:1; }
}

.agent-page-title { font-size: 1.05rem; font-weight: 800; color: #fff; margin: 4px 0 14px; }

/* ── TERMS OF USE / ELIGIBILITY MODAL ─────────────────────────────────
   Deliberately a HIGHER z-index than .modal-overlay (2000) so this entry
   agreement can never be covered by the Download App promo or any other
   existing modal — it must always be resolved first. */
.wm-terms-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,6,6,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2600;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.wm-terms-overlay.open { opacity: 1; pointer-events: all; }
.wm-terms-box {
  background: linear-gradient(160deg, var(--surface-elevated), var(--background-primary));
  border: 1px solid var(--border-gold);
  border-radius: 18px;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 60px rgba(215,25,18,.15);
  transform: translateY(16px) scale(.98);
  transition: transform .25s;
}
.wm-terms-overlay.open .wm-terms-box { transform: translateY(0) scale(1); }
.wm-terms-logo { text-align: center; margin-bottom: 12px; }
.wm-terms-logo img { height: 52px; width: auto; }
.wm-terms-title {
  font-size: 1.2rem; font-weight: 800; text-align: center;
  color: var(--accent-primary-2);
  margin-bottom: 8px;
}
.wm-terms-intro { text-align: center; font-size: .88rem; color: var(--text-secondary); margin-bottom: 16px; }
.wm-terms-list {
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 14px;
  margin-bottom: 16px;
}
.wm-terms-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--text-primary);
  border-bottom: 1px dashed rgba(255,201,126,.14);
}
.wm-terms-row:last-child { border-bottom: none; }
.wm-terms-check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-primary-2);
  color: var(--accent-primary-2);
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800;
  margin-top: 1px;
}
.wm-terms-fine { font-size: .74rem; color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }
.wm-terms-agree {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
  margin-bottom: 16px;
  font-size: .86rem;
  color: var(--text-primary);
  font-weight: 600;
}
.wm-terms-agree input[type="checkbox"] {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--accent-primary-2);
  cursor: pointer;
}
.wm-terms-continue {
  display: block;
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .25s, border-color .25s, box-shadow .25s, color .25s, transform .15s;
}
/* Disabled: still clearly visible and readable — a muted dark-burgundy
   surface with a dim gold border, no glow. Never opacity/visibility/
   display tricks: the user must see a Continue action exists and that
   checking the agreement is what enables it. */
.wm-terms-continue:disabled {
  background: linear-gradient(135deg, #3A1210, #2B211E);
  border: 1.5px solid rgba(244,197,106,.35);
  color: rgba(255,246,235,.55);
  cursor: not-allowed;
  box-shadow: none;
}
/* Enabled: strong casino-red center with a metallic-gold frame and a
   visible outer glow — reads as clearly clickable. A gentle pulse (not a
   flashy one) draws the eye once the checkbox is ticked. */
.wm-terms-continue:not(:disabled) {
  background: linear-gradient(135deg, #8C0F0A 0%, #D71912 45%, #F12616 55%, #D71912 100%);
  border: 1.5px solid var(--accent-primary-2);
  color: #FFE9B8;
  box-shadow: 0 0 0 1px rgba(244,197,106,.25) inset, 0 4px 20px rgba(215,25,18,.5), 0 0 24px rgba(244,197,106,.25);
  animation: wmTermsGlow 2.4s ease-in-out infinite;
}
.wm-terms-continue:not(:disabled):active { transform: scale(.98); }
@keyframes wmTermsGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(244,197,106,.25) inset, 0 4px 20px rgba(215,25,18,.5), 0 0 24px rgba(244,197,106,.25); }
  50%      { box-shadow: 0 0 0 1px rgba(244,197,106,.4)  inset, 0 4px 26px rgba(215,25,18,.65), 0 0 34px rgba(244,197,106,.4); }
}
@media (prefers-reduced-motion: reduce) {
  .wm-terms-continue:not(:disabled) { animation: none; }
}
.wm-terms-rg {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,201,126,.14);
}
.wm-terms-rg-badge { height: 30px; width: auto; flex-shrink: 0; }
.wm-terms-rg-text { font-size: .7rem; color: var(--text-muted); line-height: 1.4; }
.wm-terms-rg-text strong { color: var(--text-secondary); display: block; }
.wm-terms-rg-text a { color: var(--accent-primary-2); }
@media (max-height: 640px) {
  .wm-terms-box { padding: 18px 16px; }
  .wm-terms-logo img { height: 40px; }
}

/* WinCity: logo + new wider 3D Login/Register button artwork need extra
   breathing room at narrow phone widths than the old compact icon-only
   assets did — shrink logo, button height, and the header gap together
   so nothing clips against the viewport edge. */
@media (max-width: 480px) {
  .wm-header-inner { gap: 8px; padding: 0 12px; }
  .wm-logo img { height: 48px; }
  .wm-nav-right { gap: 6px; }
  .wm-header-btn-login-img { height: clamp(26px, 8vw, 34px); }
  .wm-header-btn-register-img { height: clamp(28px, 8.5vw, 36px); }
}
@media (max-width: 360px) {
  .wm-logo img { height: 38px; }
  .wm-header-btn-login-img { height: 24px; }
  .wm-header-btn-register-img { height: 26px; }
}

/* =====================================================
   DESKTOP ENHANCEMENTS (>=1024px only) -- appended 2026-11-02
   Layout/polish only. Mobile and tablet are untouched.
   ===================================================== */
@media (min-width: 1024px) {
  /* Header: centered container, clear nav spacing */
  .wm-header-inner { padding: 0 var(--space-6); gap: var(--space-6); }
  .wm-nav-center { gap: var(--space-2); margin-left: var(--space-4); }
  .wm-nav-link { padding: 10px 20px; font-size: .92rem; letter-spacing: .01em; white-space: nowrap; }
  .wm-nav-link:hover { transform: translateY(-1px); }
  .wm-nav-right { gap: var(--space-3); }

  /* Ticker: contained, with the sample label kept clearly readable */
  .ticker-wrap { padding: 10px 0; }
  .ticker-sample-note { font-size: .72rem; opacity: .9; margin-bottom: 4px; }
  .ticker { gap: 56px; }
  .ticker-item { font-size: .86rem; }

  /* Hero: centered, contained to the site width, rounded with depth */
  .app-main .hero-section {
    max-width: calc(var(--container-max) - 2 * var(--space-6));
    margin: var(--space-5) auto 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
  }
  .app-main .hero-slider { height: clamp(300px, 28vw, 460px); }

  /* Video showcase: constrained, centered card */
  .video-showcase {
    max-width: 960px;
    margin: var(--space-7) auto;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  .video-showcase-head h2 { font-size: 1.5rem; }
  .video-showcase-head p { font-size: .95rem; }
  .video-showcase-frame { max-width: 820px; margin-left: auto; margin-right: auto; }

  /* Game grid and section rhythm */
  .app-main .game-grid { gap: 18px; }
  .app-main .game-card { transition: transform var(--transition-base), box-shadow var(--transition-base); }
  .app-main .game-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), var(--glow-soft); }
  .app-main .section-title h2 { font-size: 1.1rem; }
}

/* Very wide screens: keep content from stretching edge to edge */
@media (min-width: 1700px) {
  .app-main .browse-section-inner { max-width: var(--container-max); margin: 0 auto; }
}

/* =====================================================
   THEME ENHANCEMENT 2026-11-02
   Palette itself lives in tokens.css. This block only fixes things
   variables can't reach: the off-theme green page glow, richer gold
   gradients and a warm focus ring.
   ===================================================== */
:root {
  --grad-gold:   linear-gradient(120deg, #FFF0C4 0%, #F7CB63 40%, #E2AF4F 70%, #B87C26 100%);
  --grad-header: linear-gradient(120deg, rgba(15,11,10,.88) 0%, rgba(26,16,15,.88) 45%, rgba(10,7,6,.88) 100%);
  --grad-card:   linear-gradient(145deg, rgba(34,25,23,.62) 0%, rgba(26,18,16,.52) 50%, rgba(15,11,10,.62) 100%);
  --border-color: rgba(224,32,26,.28);
  --border-gold:  rgba(247,203,99,.55);
}
body {
  background-image:
    radial-gradient(ellipse 100% 65% at 15% -5%,  rgba(224,32,26,.30) 0%, transparent 65%),
    radial-gradient(ellipse 80% 55% at 85% 105%,  rgba(196,106,63,.26) 0%, transparent 62%),
    radial-gradient(ellipse 45% 35% at 50% 50%,   rgba(247,203,99,.07) 0%, transparent 72%);
}
::selection { background: rgba(247,203,99,.35); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-primary-2); outline-offset: 2px; }