/* ============================================================
   Vantage - Global Stylesheet
   Font: Poppins (Google Fonts)
   Colors: Red-first, dark theme, clean sharp look
   ============================================================ */

/* --- CSS Variables --- */
:root {
  /* === VANTAGE COLOR THEME: Green Primary + Orange Accent === */
  --red:          #00C853;   /* primary = green */
  --red-dark:     #00A040;   /* primary dark */
  --red-light:    #69F0AE;   /* primary light */
  --orange:       #FF6D00;   /* accent = deep orange */
  --purple:       #F97316;   /* secondary accent = orange */
  --yellow:       #FFB300;   /* gold/yellow */

  --bg:           #060D0A;   /* very dark green-black */
  --bg-card:      #0F1A12;   /* dark green card */
  --bg-card2:     #162019;   /* slightly lighter */
  --bg-input:     #0D180F;   /* input bg */
  --border:       #1E3322;   /* green-tinted border */
  --border-light: #2A4030;

  --text:         #E8F5E9;   /* soft white-green */
  --text-muted:   #6B8F71;
  --text-faint:   #3D5E42;

  --radius:       14px;
  --radius-sm:    8px;
  --radius-lg:    20px;
  --radius-full:  999px;

  --shadow:       0 4px 24px rgba(0,0,0,0.5);
  --shadow-red:   0 4px 20px rgba(0,200,83,0.25);

  --grad-red:     linear-gradient(135deg, #00C853 0%, #FF6D00 100%);  /* green→orange */
  --grad-gold:    linear-gradient(135deg, #FF6D00 0%, #FFB300 100%);  /* orange→gold */
  --grad-card:    linear-gradient(135deg, #0F1A12 0%, #162019 100%);

  --font:         'Poppins', sans-serif;
  --nav-h:        60px;
  --bottom-nav-h: 68px;
}

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family:      var(--font);
  background-color: var(--bg);
  color:            var(--text);
  font-size:        15px;
  line-height:      1.6;
  min-height:       100vh;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button, input, select, textarea {
  font-family: var(--font);
}

/* --- Topbar --- */
.topbar {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  z-index:    1000;
  height:     var(--nav-h);
  background: rgba(10,10,15,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  max-width:   1200px;
  margin:      0 auto;
  height:      100%;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     0 16px;
}

.topbar-logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height:     36px;
  width:      auto;
  object-fit: contain;
}

/* --- Logo text fallback (if no image) --- */
.logo-text {
  font-size:   22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background:  var(--grad-red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.topbar-actions {
  display:     flex;
  align-items: center;
  gap:         10px;
}

/* --- Wallet Pill (topbar) --- */
.wallet-pill {
  display:       flex;
  align-items:   center;
  gap:           6px;
  background:    var(--bg-card2);
  border:        1px solid var(--border);
  border-radius: var(--radius-full);
  padding:       6px 12px 6px 10px;
  font-size:     14px;
  font-weight:   600;
  transition:    border-color 0.2s;
}

.wallet-pill:hover { border-color: var(--red); }

.wallet-add {
  background:    var(--red);
  border-radius: 50%;
  width:         20px;
  height:        20px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-left:   4px;
}

/* --- Buttons --- */
.btn-red {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    var(--red);
  color:         #fff;
  border:        none;
  border-radius: var(--radius-sm);
  padding:       12px 24px;
  font-size:     15px;
  font-weight:   600;
  cursor:        pointer;
  transition:    background 0.2s, transform 0.1s;
}
.btn-red:hover  { background: var(--red-dark); }
.btn-red:active { transform: scale(0.98); }

.btn-outline {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    transparent;
  color:         var(--red);
  border:        1px solid var(--red);
  border-radius: var(--radius-sm);
  padding:       12px 24px;
  font-size:     15px;
  font-weight:   600;
  cursor:        pointer;
  transition:    background 0.2s;
}
.btn-outline:hover { background: rgba(0,200,83,0.1); }

.btn-red-sm    { @extend .btn-red;    padding: 8px 16px; font-size: 13px; }
.btn-outline-sm { @extend .btn-outline; padding: 8px 16px; font-size: 13px; }

/* Inline versions without @extend for plain CSS */
.btn-red-sm {
  display:       inline-flex;
  align-items:   center;
  background:    var(--red);
  color:         #fff;
  border:        none;
  border-radius: var(--radius-sm);
  padding:       7px 16px;
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  transition:    background 0.2s;
}
.btn-red-sm:hover { background: var(--red-dark); }

.btn-outline-sm {
  display:       inline-flex;
  align-items:   center;
  background:    transparent;
  color:         var(--text-muted);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       7px 16px;
  font-size:     13px;
  font-weight:   500;
  cursor:        pointer;
  transition:    border-color 0.2s, color 0.2s;
}
.btn-outline-sm:hover { border-color: var(--red); color: var(--red); }

.btn-icon {
  width:         36px;
  height:        36px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  background:    var(--bg-card2);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    border-color 0.2s;
}
.btn-icon:hover { border-color: var(--red); }

.btn-grad {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    var(--grad-red);
  color:         #fff;
  border:        none;
  border-radius: var(--radius-sm);
  padding:       13px 28px;
  font-size:     15px;
  font-weight:   700;
  cursor:        pointer;
  transition:    opacity 0.2s, transform 0.1s;
  box-shadow:    var(--shadow-red);
}
.btn-grad:hover  { opacity: 0.9; }
.btn-grad:active { transform: scale(0.98); }

/* --- Main Content Area --- */
.main-content {
  margin-top:    var(--nav-h);
  padding-bottom: calc(var(--bottom-nav-h) + 20px);
  max-width:     600px;
  margin-left:   auto;
  margin-right:  auto;
  width:         100%;
}

/* Full-width variant for landing pages */
.main-content.full-width {
  max-width: 100%;
}

/* --- Cards --- */
.card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       20px;
  box-shadow:    var(--shadow);
}

.card-grad { /* Vantage brand gradient */
  background:    var(--grad-red);
  border-radius: var(--radius);
  padding:       20px;
  box-shadow:    var(--shadow-red);
}

/* --- Wallet Balance Card --- */
.wallet-card {
  background:    var(--grad-red);
  border-radius: var(--radius-lg);
  padding:       24px 20px;
  margin:        16px;
  position:      relative;
  overflow:      hidden;
  box-shadow:    var(--shadow-red);
}

.wallet-card::before {
  content:  '';
  position: absolute;
  top:      -40px;
  right:    -40px;
  width:    150px;
  height:   150px;
  background: rgba(255,255,255,0.07);
  border-radius: 50%;
}

.wallet-card::after {
  content:  '';
  position: absolute;
  bottom:   -30px;
  left:     50px;
  width:    100px;
  height:   100px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
}

.wallet-label {
  font-size:   12px;
  font-weight: 500;
  opacity:     0.8;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.wallet-amount {
  font-size:   36px;
  font-weight: 800;
  letter-spacing: -1px;
  margin:      4px 0 16px;
  position:    relative;
  z-index:     1;
}

.wallet-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             10px;
  position:        relative;
  z-index:         1;
}

.wallet-action-btn {
  flex:          1;
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           8px;
  padding:       11px;
  border-radius: var(--radius-sm);
  font-size:     14px;
  font-weight:   600;
  cursor:        pointer;
  border:        none;
  transition:    opacity 0.2s;
}
.wallet-action-btn:hover { opacity: 0.9; }

.btn-deposit  { background: rgba(255,255,255,0.2); color: #fff; }
.btn-withdraw { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); }

.wallet-today {
  font-size:   13px;
  opacity:     0.85;
  text-align:  right;
  font-weight: 500;
}

/* --- Banner Slider --- */
.banner-slider {
  margin:     12px 16px;
  border-radius: var(--radius);
  overflow:   hidden;
  position:   relative;
  height:     180px;
}

.banner-slide {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    none;
  border-radius: var(--radius);
}

.banner-slide.active { display: block; }

.banner-dots {
  position:   absolute;
  bottom:     10px;
  left:       50%;
  transform:  translateX(-50%);
  display:    flex;
  gap:        6px;
}

.banner-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    rgba(255,255,255,0.4);
  cursor:        pointer;
  transition:    background 0.2s, transform 0.2s;
}

.banner-dot.active {
  background: #fff;
  transform:  scale(1.3);
}

/* --- Section Headers --- */
.section-header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     0 16px;
  margin:      20px 0 12px;
}

.section-title {
  font-size:   16px;
  font-weight: 700;
  display:     flex;
  align-items: center;
  gap:         8px;
}

.section-title::before {
  content:       '';
  display:       block;
  width:         4px;
  height:        18px;
  background:    var(--red);
  border-radius: 2px;
}

.section-link {
  font-size:  13px;
  color:      var(--red);
  font-weight: 500;
  display:    flex;
  align-items: center;
  gap:        4px;
}

/* --- Game Grid --- */
.game-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   10px;
  padding:               0 16px;
}

.game-card {
  border-radius: var(--radius-sm);
  overflow:      hidden;
  position:      relative;
  background:    var(--bg-card2);
  cursor:        pointer;
  transition:    transform 0.2s, box-shadow 0.2s;
  border:        1px solid var(--border);
  aspect-ratio:  1/1.1;
}

.game-card:hover {
  transform:  translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,200,83,0.2);
  border-color: var(--red);
}

.game-card:active { transform: scale(0.97); }

.game-thumb {
  width:      100%;
  height:     75%;
  object-fit: cover;
  display:    block;
}

/* Fallback if no image */
.game-thumb-placeholder {
  width:           100%;
  height:          75%;
  background:      var(--bg-card);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text-faint);
}

.game-info {
  padding:    6px 8px;
  background: var(--bg-card2);
}

.game-name {
  font-size:     12px;
  font-weight:   600;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.game-players {
  font-size:   11px;
  color:       var(--text-muted);
  display:     flex;
  align-items: center;
  gap:         3px;
}

/* --- Live Wins Table --- */
.live-wins {
  margin:   0 16px;
  background: var(--bg-card);
  border:   1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.live-wins-header {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       12px 16px;
  border-bottom: 1px solid var(--border);
}

.live-badge {
  display:       flex;
  align-items:   center;
  gap:           6px;
  font-size:     12px;
  font-weight:   600;
  color:         var(--red);
  background:    rgba(0,200,83,0.1);
  border:        1px solid rgba(0,200,83,0.3);
  border-radius: var(--radius-full);
  padding:       3px 10px;
}

.live-dot {
  width:         7px;
  height:        7px;
  background:    var(--red);
  border-radius: 50%;
  animation:     pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.wins-table {
  width:           100%;
  border-collapse: collapse;
}

.wins-table th {
  font-size:    11px;
  font-weight:  600;
  color:        var(--text-faint);
  text-align:   left;
  padding:      8px 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.wins-table td {
  padding:      10px 16px;
  font-size:    13px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.wins-table tr:last-child td { border-bottom: none; }

.win-amount { color: var(--yellow); font-weight: 700; }

.player-avatar {
  width:         28px;
  height:        28px;
  border-radius: 50%;
  background:    var(--bg-card2);
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  margin-right:  8px;
  font-size:     11px;
  font-weight:   600;
  vertical-align: middle;
}

/* --- Quick Links Row --- */
.quick-links {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   10px;
  padding:               0 16px;
  margin-bottom:         4px;
}

.quick-link-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       14px 10px;
  text-align:    center;
  cursor:        pointer;
  transition:    border-color 0.2s, background 0.2s;
}

.quick-link-card:hover {
  border-color: var(--red);
  background:   var(--bg-card2);
}

.quick-link-icon {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  background:    rgba(0,200,83,0.12);
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin:        0 auto 8px;
  color:         var(--red);
}

.quick-link-title {
  font-size:   13px;
  font-weight: 600;
}

.quick-link-desc {
  font-size:  11px;
  color:      var(--text-muted);
  margin-top: 2px;
}

/* --- Forms --- */
.form-group {
  margin-bottom: 18px;
}

.form-label {
  display:     block;
  font-size:   13px;
  font-weight: 600;
  color:       var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.form-control {
  width:         100%;
  background:    var(--bg-input);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  color:         var(--text);
  font-family:   var(--font);
  font-size:     15px;
  padding:       13px 14px;
  outline:       none;
  transition:    border-color 0.2s;
}

.form-control:focus { border-color: var(--red); }
.form-control::placeholder { color: var(--text-faint); }

.form-control.has-icon { padding-left: 44px; }

.form-icon-wrap {
  position: relative;
}

.form-icon {
  position:  absolute;
  left:      14px;
  top:       50%;
  transform: translateY(-50%);
  color:     var(--text-faint);
}

.form-error {
  font-size:  12px;
  color:      var(--red-light);
  margin-top: 5px;
  display:    none;
}
.form-error.visible { display: block; }

.form-hint {
  font-size:  12px;
  color:      var(--text-muted);
  margin-top: 5px;
}

/* --- Auth Pages --- */
.auth-page {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px 16px;
  background:      var(--bg);
}

.auth-card {
  width:         100%;
  max-width:     420px;
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       32px 28px;
}

.auth-logo {
  text-align:    center;
  margin-bottom: 28px;
}

.auth-logo img {
  height: 48px;
  margin: 0 auto 12px;
}

.auth-title {
  font-size:     24px;
  font-weight:   800;
  text-align:    center;
  margin-bottom: 6px;
}

.auth-subtitle {
  font-size:     14px;
  color:         var(--text-muted);
  text-align:    center;
  margin-bottom: 28px;
}

.auth-divider {
  display:         flex;
  align-items:     center;
  gap:             12px;
  margin:          20px 0;
  color:           var(--text-faint);
  font-size:       12px;
}

.auth-divider::before,
.auth-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--border);
}

.auth-footer {
  text-align:    center;
  margin-top:    20px;
  font-size:     14px;
  color:         var(--text-muted);
}

.auth-footer a { color: var(--red); font-weight: 600; }

/* --- Bottom Navigation --- */
.bottom-nav {
  position:        fixed;
  bottom:          0;
  left:            0;
  right:           0;
  z-index:         1000;
  height:          var(--bottom-nav-h);
  background:      rgba(10,10,15,0.97);
  backdrop-filter: blur(12px);
  border-top:      1px solid var(--border);
  display:         flex;
  align-items:     center;
}

.bottom-nav-item {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  padding:         8px 0;
  color:           var(--text-faint);
  font-size:       11px;
  font-weight:     500;
  transition:      color 0.2s;
  cursor:          pointer;
}

.bottom-nav-item.active { color: var(--red); }
.bottom-nav-item:hover  { color: var(--text-muted); }
.bottom-nav-item.active:hover { color: var(--red); }

/* --- Icon Sizes --- */
.icon-xs  { width: 14px; height: 14px; }
.icon-sm  { width: 18px; height: 18px; }
.icon-nav { width: 22px; height: 22px; }
.icon-md  { width: 24px; height: 24px; }
.icon-lg  { width: 32px; height: 32px; }

/* --- Refer & Earn Page --- */
.refer-hero {
  background:    var(--grad-red);
  margin:        16px;
  border-radius: var(--radius-lg);
  padding:       24px 20px;
  box-shadow:    var(--shadow-red);
}

.refer-hero-title {
  font-size:   20px;
  font-weight: 800;
  margin-bottom: 4px;
}

.refer-hero-sub {
  font-size:  13px;
  opacity:    0.85;
  margin-bottom: 16px;
}

.refer-bonus-badge {
  background:    rgba(255,255,255,0.15);
  border:        1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-sm);
  padding:       8px 12px;
  font-size:     13px;
  font-weight:   600;
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 16px;
}

.refer-link-box {
  background:    rgba(0,0,0,0.25);
  border:        1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  padding:       12px 14px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           10px;
  word-break:    break-all;
  font-size:     13px;
}

.copy-btn {
  flex-shrink:   0;
  background:    #fff;
  color:         var(--red);
  border:        none;
  border-radius: var(--radius-sm);
  padding:       9px 14px;
  font-size:     13px;
  font-weight:   700;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  gap:           5px;
  transition:    opacity 0.2s;
  font-family:   var(--font);
}
.copy-btn:hover { opacity: 0.9; }

.refer-stats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   10px;
  margin:                16px;
}

.refer-stat-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       16px 12px;
  text-align:    center;
}

.refer-stat-icon {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  background:    rgba(124,58,237,0.15);
  color:         var(--purple);
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin:        0 auto 8px;
}

.refer-stat-label {
  font-size:  12px;
  color:      var(--text-muted);
  font-weight: 500;
  margin-bottom: 4px;
}

.refer-stat-value {
  font-size:   20px;
  font-weight: 800;
}

/* --- Profile / Me Page --- */
.profile-header {
  display:        flex;
  align-items:    center;
  gap:            16px;
  padding:        20px 16px;
  border-bottom:  1px solid var(--border);
}

.profile-avatar {
  width:           64px;
  height:          64px;
  border-radius:   50%;
  background:      var(--grad-red);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       26px;
  font-weight:     700;
  flex-shrink:     0;
  color:           #fff;
}

.profile-name   { font-size: 18px; font-weight: 700; }
.profile-email  { font-size: 13px; color: var(--text-muted); }
.profile-joined { font-size: 12px; color: var(--text-faint); margin-top: 4px; }

.profile-menu {
  list-style: none;
  padding:    8px 0;
}

.profile-menu-item {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     14px 16px;
  cursor:      pointer;
  transition:  background 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.profile-menu-item:hover { background: var(--bg-card2); }
.profile-menu-item:last-child { border-bottom: none; }

.profile-menu-left {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.profile-menu-icon {
  width:           36px;
  height:          36px;
  border-radius:   var(--radius-sm);
  background:      var(--bg-card2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text-muted);
}

/* --- Toast Notifications --- */
#toast-container {
  position:       fixed;
  top:            80px;
  right:          16px;
  z-index:        9999;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  max-width:      320px;
}

.toast {
  background:    var(--bg-card2);
  border:        1px solid var(--border);
  border-left:   4px solid var(--red);
  border-radius: var(--radius-sm);
  padding:       12px 16px;
  font-size:     13px;
  font-weight:   500;
  box-shadow:    var(--shadow);
  animation:     slideIn 0.3s ease;
  display:       flex;
  align-items:   center;
  gap:           10px;
}

.toast.success { border-left-color: #48BB78; }
.toast.error   { border-left-color: var(--red); }
.toast.info    { border-left-color: var(--purple); }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --- Activity / Bonus Page --- */
.activity-grid {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   12px;
  padding:               0 16px;
}

.activity-item {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             6px;
  cursor:          pointer;
}

.activity-icon-wrap {
  width:           52px;
  height:          52px;
  border-radius:   14px;
  background:      var(--bg-card2);
  border:          1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      border-color 0.2s, background 0.2s;
}
.activity-icon-wrap:hover {
  border-color: var(--red);
  background:   rgba(0,200,83,0.1);
}

.activity-label {
  font-size:  11px;
  text-align: center;
  color:      var(--text-muted);
  font-weight: 500;
}

.activity-big-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   12px;
  padding:               0 16px;
}

.activity-big-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
  cursor:        pointer;
  transition:    border-color 0.2s;
}
.activity-big-card:hover { border-color: var(--red); }

.activity-big-img {
  width:      100%;
  height:     120px;
  object-fit: cover;
  display:    block;
}

.activity-big-body {
  padding: 12px;
}

.activity-big-title {
  font-size:   14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.activity-big-desc {
  font-size: 12px;
  color:     var(--text-muted);
  line-height: 1.5;
}

/* --- Page Headers --- */
.page-header {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     16px;
  font-size:   18px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}

.back-btn {
  width:         34px;
  height:        34px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  background:    var(--bg-card2);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor:        pointer;
  flex-shrink:   0;
}

/* --- Transaction History --- */
.txn-list { padding: 0 16px; }

.txn-item {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.txn-item:last-child { border-bottom: none; }

.txn-icon {
  width:           38px;
  height:          38px;
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.txn-icon.deposit  { background: rgba(72,187,120,0.15); color: #48BB78; }
.txn-icon.withdraw { background: rgba(0,200,83,0.15);  color: var(--red); }
.txn-icon.win      { background: rgba(246,201,14,0.15); color: var(--yellow); }
.txn-icon.bet      { background: rgba(124,58,237,0.15); color: var(--purple); }
.txn-icon.bonus    { background: rgba(249,115,22,0.15); color: var(--orange); }

.txn-info { flex: 1; }
.txn-title { font-size: 14px; font-weight: 600; }
.txn-date  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.txn-amount {
  font-size:   15px;
  font-weight: 700;
  text-align:  right;
}
.txn-amount.credit { color: #48BB78; }
.txn-amount.debit  { color: var(--red); }

.txn-status {
  font-size:   11px;
  font-weight: 500;
  margin-top:  2px;
  text-align:  right;
}
.txn-status.completed { color: #48BB78; }
.txn-status.pending   { color: var(--yellow); }
.txn-status.failed    { color: var(--red); }

/* --- Badge --- */
.badge {
  display:       inline-block;
  padding:       2px 8px;
  border-radius: var(--radius-full);
  font-size:     11px;
  font-weight:   600;
}
.badge-green  { background: rgba(72,187,120,0.15); color: #48BB78; }
.badge-red    { background: rgba(0,200,83,0.15);  color: var(--red); }
.badge-yellow { background: rgba(246,201,14,0.15); color: var(--yellow); }
.badge-purple { background: rgba(124,58,237,0.15); color: var(--purple); }

/* --- Empty State --- */
.empty-state {
  text-align: center;
  padding:    48px 24px;
  color:      var(--text-faint);
}
.empty-state-icon {
  width:   64px;
  height:  64px;
  margin:  0 auto 16px;
  opacity: 0.4;
}
.empty-state-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; color: var(--text-muted); }
.empty-state-desc  { font-size: 13px; }

/* --- Loading Spinner --- */
.spinner {
  width:         32px;
  height:        32px;
  border:        3px solid var(--border);
  border-top:    3px solid var(--red);
  border-radius: 50%;
  animation:     spin 0.8s linear infinite;
  margin:        0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Admin Panel --- */
.admin-sidebar {
  width:      240px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  min-height:  100vh;
  position:    fixed;
  top:         0;
  left:        0;
  padding-top: 20px;
}

.admin-main {
  margin-left: 240px;
  padding:     24px;
  min-height:  100vh;
}

.admin-stat-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       20px;
}

.admin-stat-value {
  font-size:   28px;
  font-weight: 800;
  margin:      4px 0;
}

.admin-stat-label {
  font-size: 13px;
  color:     var(--text-muted);
}

.admin-stats-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:                   16px;
  margin-bottom:         24px;
}

/* --- Data Table --- */
.data-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       14px;
}
.data-table th {
  text-align:     left;
  padding:        10px 14px;
  font-size:      12px;
  font-weight:    600;
  color:          var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom:  1px solid var(--border);
}
.data-table td {
  padding:       11px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.data-table tr:hover td { background: var(--bg-card2); }

/* --- Referral Code Strip (dashboard) --- */
.ref-strip {
  display:       flex;
  align-items:   center;
  gap:           12px;
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       12px 16px;
  margin:        0 16px;
}
.ref-strip-icon {
  color: var(--purple);
}
.ref-strip-text {
  flex:      1;
  font-size: 13px;
  color:     var(--text-muted);
}
.ref-strip-code {
  font-size:   14px;
  font-weight: 700;
  color:       var(--text);
}
.ref-strip .copy-btn {
  padding: 7px 14px;
  font-size: 12px;
}

/* --- Game Pages --- */
.game-page {
  min-height: calc(100vh - var(--nav-h) - var(--bottom-nav-h));
  padding:    16px;
}

.game-canvas-area {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
  margin-bottom: 16px;
}

.bet-panel {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       16px;
}

.bet-input-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 12px;
}

.bet-quick-btns {
  display: flex;
  gap:     6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.bet-quick-btn {
  background:    var(--bg-card2);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       5px 12px;
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  color:         var(--text-muted);
  font-family:   var(--font);
  transition:    border-color 0.2s, color 0.2s;
}
.bet-quick-btn:hover { border-color: var(--red); color: var(--text); }

/* --- Responsive --- */
@media (max-width: 480px) {
  .main-content { padding: 0; }
  .admin-sidebar { display: none; }
  .admin-main { margin-left: 0; padding: 16px; }
}

@media (min-width: 601px) {
  .main-content {
    padding-bottom: 20px;
  }
  .bottom-nav { display: none; }
}

/* ============================================================
   Vantage v2 - Upgrade Styles
   New games, premium animations, NGN locale
   ============================================================ */

/* --- New Game Cards for v2 --- */
.game-card-new {
  position: relative;
  overflow: hidden;
}
.game-card-new::after {
  content: 'NEW';
  position: absolute;
  top: 8px; right: -18px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 20px;
  transform: rotate(45deg);
}

/* --- Animated gradient border on featured cards --- */
.game-card-featured {
  background: linear-gradient(var(--bg-card2), var(--bg-card2)) padding-box,
              linear-gradient(135deg, var(--red), var(--purple), var(--orange)) border-box;
  border: 2px solid transparent !important;
  animation: borderRotate 3s linear infinite;
}
@keyframes borderRotate {
  0%   { background: linear-gradient(var(--bg-card2), var(--bg-card2)) padding-box, linear-gradient(135deg, var(--red), var(--purple), var(--orange)) border-box; }
  50%  { background: linear-gradient(var(--bg-card2), var(--bg-card2)) padding-box, linear-gradient(315deg, var(--red), var(--purple), var(--orange)) border-box; }
  100% { background: linear-gradient(var(--bg-card2), var(--bg-card2)) padding-box, linear-gradient(135deg, var(--red), var(--purple), var(--orange)) border-box; }
}

/* --- NGN amount display --- */
.ngn-amount {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

/* --- Premium wallet card for NGN --- */
.wallet-card-ngn {
  background: linear-gradient(135deg, #1a0808 0%, #2d1010 50%, #1a0808 100%);
  border: 1px solid rgba(0,200,83,0.3);
  position: relative;
  overflow: hidden;
}
.wallet-card-ngn::before {
  content: '₦';
  position: absolute;
  right: -10px; top: -20px;
  font-size: 120px;
  font-weight: 900;
  color: rgba(0,200,83,0.06);
  line-height: 1;
  pointer-events: none;
}

/* --- Aviator history pill upgrade --- */
.av-hist-pill {
  font-family: 'Poppins', monospace;
}

/* --- Game lobby section titles --- */
.lobby-section {
  margin-bottom: 20px;
}
.lobby-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; margin-bottom: 12px;
}
.lobby-section-title {
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.lobby-section-title .section-dot {
  width: 4px; height: 18px;
  border-radius: 2px;
}
.lobby-section-title .section-dot.red    { background: var(--red); }
.lobby-section-title .section-dot.yellow { background: var(--yellow); }
.lobby-section-title .section-dot.purple { background: var(--purple); }

/* --- Slot machine reel glow --- */
.slots-reel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 3;
}

/* --- Mobile admin hamburger bar animations --- */
.admin-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.admin-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0; transform: scaleX(0);
}
.admin-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Smooth page transitions --- */
.main-content {
  animation: pageIn 0.2s ease;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Game card hover glow by category --- */
.game-card:hover .game-thumb { transform: scale(1.04); transition: transform 0.3s ease; }

/* --- Win amount pulse animation --- */
@keyframes winAmountPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); color: #F6C90E; }
  100% { transform: scale(1); }
}
.win-pulse { animation: winAmountPulse 0.5s ease; }

/* --- Bet quick buttons hover --- */
.bet-quick-btn:active { transform: scale(0.95); }

/* --- Loading skeleton for lazy content --- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card2) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* --- Toast upgrade for mobile --- */
#toast-container {
  bottom: calc(var(--bottom-nav-h) + 12px);
  top: auto;
  left: 16px;
  right: 16px;
  max-width: none;
}
@media (min-width: 600px) {
  #toast-container {
    bottom: 20px;
    left: auto;
    right: 20px;
    max-width: 320px;
  }
}

/* --- Currency symbol style --- */
.currency-sym {
  font-size: 0.75em;
  font-weight: 700;
  vertical-align: super;
  margin-right: 1px;
}

/* ============================================================
   v4.1 FIXES - Scroll, Layout, Mobile
   ============================================================ */

/* Fix: body should NEVER be display:flex on user pages */
body {
  display: block !important;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Fix: game pages need proper scroll padding for bottom nav */
.game-page,
.av-wrapper,
.cp-wrap,
.sw-wrap,
.dr-wrap,
.mines-page,
.slots-page,
.coin-page,
.ftb-page,
.pl-wrap {
  padding-bottom: calc(var(--bottom-nav-h) + 16px);
  min-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Fix: live wins table scroll INSIDE container */
.live-wins {
  max-height: 320px;
  overflow-y: auto;
}
.live-wins table {
  width: 100%;
}

/* Fix: main-content scroll */
.main-content {
  overflow-y: visible;
  overflow-x: hidden;
}

/* Confirmation dialog overlay */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.confirm-dialog {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
}
.confirm-dialog-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}
.confirm-dialog-body {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.6;
}
.confirm-dialog-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* HiLo card styles */
.hilo-card {
  width: 80px;
  height: 110px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  position: relative;
  transition: transform 0.3s;
}
.hilo-card.red   { color: #00C853; }
.hilo-card.black { color: #111; }
.hilo-card.back  {
  background: linear-gradient(135deg, #1a237e, #283593);
  color: transparent;
}
.hilo-card-rank { font-size: 22px; line-height: 1; }
.hilo-card-suit { font-size: 18px; line-height: 1; }

/* Limbo game styles */
.limbo-wrap {
  background: #080b14;
  min-height: calc(100vh - var(--nav-h));
  padding-bottom: calc(var(--bottom-nav-h) + 16px);
}
.limbo-display {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(180deg, #0d1526 0%, #080b14 100%);
}
.limbo-number {
  font-size: 72px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
  transition: color 0.3s;
}

/* Keno grid */
.keno-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  padding: 14px;
}
.keno-ball {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bg-card2);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.keno-ball.selected {
  background: rgba(0,200,83,0.2);
  border-color: var(--red);
  color: var(--red);
}
.keno-ball.drawn {
  background: rgba(246,201,14,0.2);
  border-color: var(--yellow);
  color: var(--yellow);
  animation: keno-pop 0.4s ease;
}
.keno-ball.hit {
  background: rgba(72,187,120,0.2);
  border-color: #48BB78;
  color: #48BB78;
}
@keyframes keno-pop {
  0%  { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.2); }
  100%{ transform: scale(1);   opacity: 1; }
}

/* ============================================================
   v8 GLOBAL SCROLL & RESPONSIVENESS FIX
   Ensures every page scrolls fully on all screen sizes
   ============================================================ */

/* ---- Root: never lock scrolling ---- */
html {
  height: auto !important;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-text-size-adjust: 100%;
}

body {
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  min-height: 100dvh;
  /* dvh = dynamic viewport height — accounts for mobile browser chrome */
}

/* ---- Never let containers be taller than viewport and cut off ---- */
.main-content {
  overflow: visible !important;
  min-height: 0 !important;
  /* Ensure padding at bottom accounts for bottom nav on ALL screen heights */
  padding-bottom: calc(var(--bottom-nav-h, 68px) + env(safe-area-inset-bottom, 0px) + 24px) !important;
}

/* ---- Game wrappers: scrollable, never overflow:hidden on Y ---- */
.game-page, .av-wrapper, .cp-wrap, .sw-wrap, .dr-wrap,
.mines-page, .slots-page, .coin-page, .ftb-page, .pl-wrap,
.fx-page, .hilo-page, .bjk-wrap, .keno-page, .limbo-page {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--bottom-nav-h, 68px) + env(safe-area-inset-bottom, 0px) + 24px) !important;
}

/* ---- Remove any fixed heights that clip content ---- */
.page-wrap, .app-wrap, .content-wrap {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* ---- Bottom nav: use safe-area for notched phones ---- */
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: calc(var(--bottom-nav-h, 68px) + env(safe-area-inset-bottom, 0px)) !important;
}

/* ---- Admin panel: sidebar scrollable on small screens ---- */
.admin-sidebar {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .admin-sidebar {
    width: 200px;
  }
  .admin-main {
    margin-left: 200px;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 600px) {
  /* Stacked layout for tiny screens */
  .admin-sidebar {
    position: relative;
    width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .admin-main {
    margin-left: 0;
    padding: 12px;
  }
}

/* ---- Prevent scrollbar from causing layout shift ---- */
.modal-open body {
  overflow: hidden !important;
}

/* ---- Tables: horizontal scroll on small screens ---- */
.data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.data-table {
  min-width: 500px;
}

/* ---- Cards: never overflow hidden vertically ---- */
.card {
  overflow: visible !important;
}

/* ---- Section padding for better mobile breathing room ---- */
@media (max-width: 420px) {
  .main-content {
    padding-bottom: calc(var(--bottom-nav-h, 68px) + 40px) !important;
  }
}

/* ---- FX page specific scrollability ---- */
.fx-page {
  overflow-y: visible !important;
  overflow-x: hidden !important;
}