/* ==========================================================================
   29baji.online — Design Tokens & Core UI Architecture
   ========================================================================== */

html, body {
  background-color: #080b10 !important;
  color: #ffffff !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overscroll-behavior-y: none !important;
  -webkit-overflow-scrolling: touch !important;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Base border reset: prevent accidental #e5e7eb (white) fallback across all 150+ containers */
*, ::before, ::after {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Missing Tailwind dark utility borders & backgrounds */
.border-zinc-800, .border-zinc-800\/80, .border-zinc-800\/60, .border-zinc-800\/90 { border-color: rgba(255, 255, 255, 0.08) !important; }
.border-zinc-900 { border-color: rgba(255, 255, 255, 0.05) !important; }
.border-zinc-700, .border-zinc-700\/60 { border-color: rgba(255, 255, 255, 0.12) !important; }
.border-amber-400, .border-amber-400\/40, .border-amber-400\/50 { border-color: #fbbf24 !important; }
.border-emerald-400, .border-emerald-400\/50 { border-color: #34d399 !important; }
.border-cyan-400, .border-cyan-400\/50 { border-color: #22d3ee !important; }
.border-pink-500, .border-pink-500\/30, .border-pink-500\/50 { border-color: rgba(236, 72, 153, 0.4) !important; }
.border-orange-500, .border-orange-500\/30, .border-orange-500\/50 { border-color: rgba(249, 115, 22, 0.4) !important; }
.border-purple-500, .border-purple-500\/30, .border-purple-500\/50 { border-color: rgba(168, 85, 247, 0.4) !important; }
.border-emerald-500, .border-emerald-500\/30, .border-emerald-500\/50 { border-color: rgba(16, 185, 129, 0.4) !important; }
.border-blue-500, .border-blue-500\/30 { border-color: rgba(59, 130, 246, 0.4) !important; }
.border-indigo-500, .border-indigo-500\/30 { border-color: rgba(99, 102, 241, 0.4) !important; }
.bg-zinc-950, .bg-zinc-950\/80, .bg-zinc-950\/90 { background-color: rgba(8, 11, 17, 0.95) !important; }
.bg-zinc-900, .bg-zinc-900\/80, .bg-zinc-900\/90 { background-color: rgba(16, 22, 33, 0.9) !important; }
.bg-zinc-800, .bg-zinc-800\/80, .bg-zinc-800\/90 { background-color: rgba(24, 32, 47, 0.85) !important; }
.bg-pink-500\/10 { background-color: rgba(236, 72, 153, 0.15) !important; }
.bg-pink-500\/20 { background-color: rgba(236, 72, 153, 0.25) !important; }
.bg-orange-500\/10 { background-color: rgba(249, 115, 22, 0.15) !important; }
.bg-orange-500\/20 { background-color: rgba(249, 115, 22, 0.25) !important; }
.bg-purple-500\/10 { background-color: rgba(168, 85, 247, 0.15) !important; }
.bg-purple-500\/20 { background-color: rgba(168, 85, 247, 0.25) !important; }
.bg-emerald-500\/10 { background-color: rgba(16, 185, 129, 0.15) !important; }
.bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.25) !important; }
.bg-blue-950, .bg-blue-950\/80 { background-color: rgba(15, 23, 42, 0.85) !important; }
.bg-emerald-950, .bg-emerald-950\/80 { background-color: rgba(6, 44, 30, 0.85) !important; }
.bg-indigo-950, .bg-indigo-950\/80 { background-color: rgba(30, 27, 75, 0.85) !important; }

main {
  background-color: #080b10 !important;
}

:root {
  --primary_color: #004526;
  --primary_color_hover: #317357;
  --secondary_color: #eab308;
  --accent_gold: #ffd700;
  --text_color: #ffffff;
  
  --surface_0: #050e0f;
  --surface_1: #101416;
  --surface_2: #1b1e1f;
  --surface_3: #24292b;
  --surface_border: rgba(255, 215, 0, 0.15);
  --surface_border_subtle: rgba(255, 255, 255, 0.08);
  
  --gold_gradient: linear-gradient(135deg, #ffd700 0%, #f59e0b 50%, #d97706 100%);
  --emerald_gradient: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  --brand_gradient: linear-gradient(135deg, #005a32 0%, #004526 50%, #022c19 100%);
  
  --shadow_elevated: 0 10px 30px rgba(0, 0, 0, 0.6);
  --shadow_glow_gold: 0 0 20px rgba(255, 215, 0, 0.3);
  --shadow_glow_emerald: 0 0 20px rgba(16, 185, 129, 0.35);
  
  --radius_card: 14px;
  --radius_pill: 9999px;
}

/* ===== Custom Scrollbars ===== */
* {
  scrollbar-width: thin;
  scrollbar-color: #317357 transparent;
}

.scrollhidden::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

*::-webkit-scrollbar {
  width: 5px;
  height: 4px;
  background: transparent;
}

*::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25);
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.35) 0%, rgba(245, 158, 11, 0.5) 100%);
  border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #ffd700;
}

/* Complete Scrollbar Hiding Utility */
.scrollbar-none,
.no-scrollbar,
.promo-tabs-strip {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.scrollbar-none::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar,
.promo-tabs-strip::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ===== Form & Inputs ===== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px #1b1e1f inset !important;
  box-shadow: 0 0 0 1000px #1b1e1f inset !important;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: #fff;
}

.remove-arrow::-webkit-inner-spin-button,
.remove-arrow::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.remove-arrow {
  -moz-appearance: textfield;
}

.text-2xs {
  font-size: 0.65rem;
  line-height: 0.85rem;
}

/* ===== Brand Theming Utilities ===== */
.z-text-color {
  color: var(--text_color) !important;
}

.z-icon-color {
  color: var(--secondary_color, #ffd700) !important;
}

.z-primary-color {
  background-color: var(--primary_color, #004526) !important;
  transition: all 0.2s ease;
}

.z-primary-color:hover {
  background-color: var(--primary_color_hover, #317357) !important;
  box-shadow: 0 0 16px rgba(49, 115, 87, 0.5);
}

.z-progressbar-color {
  background: var(--gold_gradient) !important;
}

/* ===== Game Cards Grid & Hover States ===== */
.game-grid-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 480px) {
  .game-grid-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (min-width: 640px) {
  .game-grid-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (min-width: 1024px) {
  .game-grid-container {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (min-width: 1280px) {
  .game-grid-container {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 16px;
  }
}

.game-card {
  position: relative;
  display: block;
  border-radius: var(--radius_card);
  overflow: hidden;
  background: var(--surface_2);
  border: 1px solid var(--surface_border_subtle);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.22s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.game-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--accent_gold);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.3);
  z-index: 10;
}

.game-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #121516;
  transition: transform 0.3s ease;
}

.game-card:hover .game-card-img {
  transform: scale(1.06);
}

.game-card-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 8px 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 50%, rgba(5, 14, 15, 0.98) 100%);
  pointer-events: none;
}

.game-card-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.game-card-studio {
  margin: 2px 0 0;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--accent_gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.game-card-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.game-card:hover .game-card-play-overlay {
  opacity: 1;
}

.game-card-play-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold_gradient);
  color: #000;
  font-size: 1.25rem;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  transform: scale(0.85);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-card:hover .game-card-play-btn {
  transform: scale(1);
}

.game-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.game-card-badge.hot {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
}

.game-card-badge.top {
  background: var(--gold_gradient);
  color: #000;
}

/* ===== Studio / Provider Filter Ribbon ===== */
.providers-scroll-track {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}

.studio-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 12px;
  background: var(--surface_2);
  border: 1px solid var(--surface_border_subtle);
  color: #d1d5db;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.studio-chip:hover {
  background: var(--surface_3);
  border-color: var(--accent_gold);
  color: #fff;
  transform: translateY(-1px);
}

.studio-chip.active {
  background: var(--gold_gradient);
  border-color: transparent;
  color: #000;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.35);
}

.studio-chip-count {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
}

.studio-chip.active .studio-chip-count {
  background: rgba(0, 0, 0, 0.2);
  color: #000;
}

/* Legacy Class Aliases for 100% Backward Compatibility */
.list_block_cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
@media (min-width: 480px) { .list_block_cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 640px) { .list_block_cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1024px) { .list_block_cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1280px) { .list_block_cards { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; } }

.list_block_cards a {
  position: relative;
  display: block;
  border-radius: var(--radius_card);
  overflow: hidden;
  background: var(--surface_2);
  border: 1px solid var(--surface_border_subtle);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.list_block_cards a:hover {
  transform: translateY(-4px);
  border-color: var(--accent_gold);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7), 0 0 16px rgba(255, 215, 0, 0.25);
  z-index: 5;
}
.list_block_cards .img_block_card {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #16191b;
}
.list_block_cards .info_block_cards {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 8px 6px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 60%, rgba(5, 14, 15, 0.98) 100%);
  pointer-events: none;
}
.list_block_cards .info_block_cards p {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list_block_cards .info_block_cards p small {
  color: var(--accent_gold);
  font-size: 0.65rem;
}
.list_block_cards .over_play_block_card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.list_block_cards a:hover .over_play_block_card {
  opacity: 1;
}
.list_block_cards .play_block_card {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold_gradient);
  color: #000;
  font-size: 1.2rem;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.6);
}
.providers_filter_scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.provider_chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--surface_2);
  border: 1px solid var(--surface_border_subtle);
  color: #d1d5db;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.provider_chip:hover,
.provider_chip.active {
  background: var(--gold_gradient);
  color: #000;
  border-color: transparent;
}
.provider_icon_box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
}
.provider_badge_count {
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}
.provider_chip.active .provider_badge_count {
  background: rgba(0, 0, 0, 0.25);
  color: #000;
}

/* ===== Floating Mobile Bottom Bar ===== */
.floating-mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: rgba(18, 22, 24, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 215, 0, 0.15);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

.floating-mobile-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #9ca3af;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 6px 10px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 10px;
  transition: all 0.15s ease;
  text-decoration: none;
}

.floating-mobile-tab:hover,
.floating-mobile-tab.active {
  color: var(--accent_gold);
}

.floating-mobile-deposit-btn {
  position: relative;
  top: -14px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gold_gradient);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 900;
  border: 3px solid #101416;
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.15), 0 6px 18px rgba(255, 180, 0, 0.45);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none;
}

.floating-mobile-deposit-btn:active {
  transform: scale(0.92);
}

/* ==========================================================================
   29baji Homepage Components (Quick Cards, Quick Services, Jackpot Stage)
   ========================================================================== */

/* 5 Quick Featured Game Mini-Posters (Matching Reference Screenshot 1) */
.quick_game_grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 6px !important;
  width: 100% !important;
}

.quick_poster_card {
  position: relative !important;
  display: block !important;
  aspect-ratio: 3 / 4 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #111722 !important;
  border: 1.5px solid rgba(255, 215, 0, 0.25) !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.quick_poster_card:hover {
  transform: translateY(-3px) scale(1.02) !important;
  border-color: #ffd700 !important;
  box-shadow: 0 8px 22px rgba(255, 215, 0, 0.4) !important;
}

.quick_poster_card:active {
  transform: scale(0.96) !important;
}

.quick_poster_img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.25s ease !important;
}

.quick_poster_card:hover .quick_poster_img {
  transform: scale(1.08) !important;
}

.quick_poster_overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 16px 2px 4px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.95) 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}

.quick_poster_title {
  font-size: 10.5px !important;
  font-weight: 850 !important;
  color: #ffffff !important;
  text-align: center !important;
  white-space: nowrap !important;
  letter-spacing: 0.2px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  line-height: 1 !important;
  transition: color 0.2s ease !important;
}

.quick_poster_card:hover .quick_poster_title {
  color: #ffd700 !important;
}

.quick_poster_hot_tag {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  font-size: 7.5px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  padding: 1.5px 4.5px !important;
  border-radius: 4px !important;
  line-height: 1 !important;
  z-index: 3 !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.7) !important;
  letter-spacing: 0.3px !important;
}

/* 4 Quick Service Action Buttons */
.quick_service_grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
}

.quick_service_card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 4px !important;
  border-radius: 12px !important;
  background: #111722 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.quick_service_card:hover {
  background: #182232 !important;
  border-color: rgba(255, 215, 0, 0.4) !important;
  transform: translateY(-2px) !important;
}

.quick_service_card:active {
  transform: scale(0.96) !important;
}

.quick_service_icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  transition: transform 0.2s ease !important;
}

.quick_service_card:hover .quick_service_icon {
  transform: scale(1.1) !important;
}

.quick_service_text {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  text-align: center !important;
  line-height: 1.1 !important;
}

.quick_service_card:hover .quick_service_text {
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════
   PREMIUM JACKPOT STAGE — New jp_* System
/* ═══════════════════════════════════════════════════════
   PREMIUM JACKPOT STAGE — Cohesive Atmospheric System
   Built to harmonize with ANY background image
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   29BAJI MEGA JACKPOT - LUXURY CASINO ACCUMULATOR
   Emerald Gold Edition with Heraldic Crown Shield,
   Glass Capsule Trough, 3D Trophies, Floating Coins & Reflection
   ═══════════════════════════════════════════════════════ */

/* Main stage container */
.jp_stage {
  position: relative !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background-color: #041a12 !important;
  background: linear-gradient(180deg, #093c2c 0%, #062b1f 45%, #031c14 100%) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border: 2.5px solid #d4af37 !important;
  box-shadow:
    inset 0 0 0 2.5px #05261b,
    inset 0 0 0 4.5px #cf9d2c,
    inset 0 0 35px rgba(0, 0, 0, 0.75),
    0 10px 35px rgba(0, 0, 0, 0.85) !important;
  padding: 16px 20px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  user-select: none !important;
}

@media (max-width: 640px) {
  .jp_stage {
    border-radius: 16px !important;
    border-width: 2px !important;
    padding: 12px 10px 10px !important;
    gap: 10px !important;
    box-shadow:
      inset 0 0 0 1.5px #05261b,
      inset 0 0 0 3px #cf9d2c,
      inset 0 0 25px rgba(0, 0, 0, 0.75),
      0 6px 25px rgba(0, 0, 0, 0.85) !important;
  }
}

/* Layer: Lattice & "29" Watermark Texture */
.jp_watermark_layer {
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 35 L35 0 L70 35 L35 70 Z' fill='none' stroke='rgba(255,255,255,0.065)' stroke-width='1.2'/%3E%3Ctext x='35' y='41' font-size='16' font-weight='900' font-family='sans-serif' fill='rgba(255,255,255,0.055)' text-anchor='middle'%3E29%3C/text%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Layer: Ambient Spotlight & Vignette */
.jp_ambient_glow {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(16, 185, 129, 0.22) 0%, transparent 68%),
    radial-gradient(circle at 10% 10%, rgba(255, 215, 0, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(255, 215, 0, 0.06) 0%, transparent 40%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Top bar layout */
.jp_topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
}

.jp_title_group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

@media (max-width: 640px) {
  .jp_title_group {
    gap: 7px !important;
  }
}

/* Heraldic Crown Shield */
.jp_shield_badge {
  width: 50px !important;
  height: 60px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.2)) !important;
  transition: transform 0.25s ease !important;
}

.jp_shield_badge:hover {
  transform: scale(1.05) rotate(-1deg) !important;
}

@media (max-width: 640px) {
  .jp_shield_badge {
    width: 38px !important;
    height: 46px !important;
  }
}

.jp_shield_svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Brand Title */
.jp_title_brand {
  font-size: 13px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  background: linear-gradient(180deg, #fffbeb 0%, #fef08a 25%, #f59e0b 65%, #b45309 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)) !important;
  line-height: 1.15 !important;
}

@media (max-width: 640px) {
  .jp_title_brand {
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
  }
}

/* LIVE badge */
.jp_live_badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  background: rgba(185, 28, 28, 0.22) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.55) !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.25) !important;
  line-height: 1 !important;
}

.jp_live_dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  display: inline-block !important;
  animation: jp-dot-blink 1.1s ease-in-out infinite !important;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.9) !important;
}

/* Subtitle */
.jp_subtitle {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #cffafe !important;
  font-family: 'Hind Siliguri', sans-serif !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  display: block !important;
  line-height: 1.25 !important;
  margin-top: 2px !important;
}

@media (max-width: 640px) {
  .jp_subtitle {
    font-size: 9.5px !important;
    margin-top: 1px !important;
  }
}

/* Play CTA Button (Golden Pill with 3D bevel) */
.jp_cta_btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 7px 16px !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  color: #241402 !important;
  background: linear-gradient(180deg, #ffe57f 0%, #fbc02d 40%, #f57f17 80%, #d84315 100%) !important;
  border: 1.2px solid rgba(255, 245, 157, 0.8) !important;
  box-shadow:
    inset 0 1.5px 2px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(130, 48, 0, 0.6),
    0 4px 15px rgba(245, 127, 23, 0.45) !important;
  flex-shrink: 0 !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  white-space: nowrap !important;
  letter-spacing: 0.2px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.jp_cta_btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow:
    inset 0 1.5px 2px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(130, 48, 0, 0.6),
    0 6px 22px rgba(245, 127, 23, 0.65) !important;
  filter: brightness(1.06) !important;
}

.jp_cta_btn:active {
  transform: translateY(0) scale(0.97) !important;
}

@media (max-width: 640px) {
  .jp_cta_btn {
    padding: 5px 11px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
}

/* ─── CENTER: GLASS CAPSULE COUNTER STAGE ─── */
.jp_capsule_stage {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  padding-top: 10px !important;
}

/* Top Badge Pill ("পুরস্কার সেরা আগুন") */
.jp_ribbon_pill {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 15 !important;
  background: linear-gradient(180deg, #ffd76a 0%, #d49c28 50%, #9e6d0a 100%) !important;
  border: 1px solid rgba(255, 240, 150, 0.65) !important;
  border-radius: 9999px !important;
  padding: 2.5px 16px !important;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.6),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.65) !important;
  white-space: nowrap !important;
}

.jp_ribbon_text {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #231201 !important;
  font-family: 'Hind Siliguri', sans-serif !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 1px 1px rgba(255, 235, 150, 0.45) !important;
  line-height: 1.2 !important;
  display: block !important;
}

@media (max-width: 640px) {
  .jp_ribbon_pill {
    padding: 2px 12px !important;
  }
  .jp_ribbon_text {
    font-size: 9.5px !important;
  }
}

/* Glass Capsule Trough */
.jp_glass_capsule {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 680px !important;
  min-height: 72px !important;
  padding: 8px 18px !important;
  border-radius: 9999px !important;
  background: linear-gradient(180deg, rgba(6, 42, 31, 0.85) 0%, rgba(3, 24, 18, 0.95) 100%) !important;
  border: 1.8px solid rgba(212, 175, 55, 0.5) !important;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.38),
    inset 0 -3px 8px rgba(0, 0, 0, 0.8),
    0 8px 30px rgba(0, 0, 0, 0.75),
    0 0 22px rgba(16, 185, 129, 0.16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  position: relative !important;
  overflow: visible !important;
}

@media (max-width: 640px) {
  .jp_glass_capsule {
    min-height: 58px !important;
    padding: 6px 10px !important;
    border-width: 1.5px !important;
  }
}

/* Top Specular Arc Highlight */
.jp_glass_capsule::before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 12px !important;
  right: 12px !important;
  height: 48% !important;
  border-radius: 9999px 9999px 0 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.02) 75%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Flanking Trophies */
.jp_trophy_wrap {
  width: 48px !important;
  height: 56px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 3 !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 12px rgba(255, 215, 0, 0.4)) !important;
  transition: transform 0.25s ease !important;
}

.jp_trophy_wrap:hover {
  transform: scale(1.08) !important;
}

@media (max-width: 640px) {
  .jp_trophy_wrap {
    width: 32px !important;
    height: 40px !important;
  }
}

.jp_trophy_svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Center Digits & Reflection */
.jp_digits_cluster {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  position: relative !important;
  z-index: 3 !important;
  min-width: 0 !important;
  line-height: 1 !important;
}

.jp_digits_main {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(4px, 1.2vw, 9px) !important;
  position: relative !important;
  z-index: 2 !important;
}

.jp_currency {
  font-size: clamp(22px, 5.2vw, 36px) !important;
  font-weight: 900 !important;
  background: linear-gradient(180deg, #ffffff 0%, #fff9c4 20%, #fbc02d 55%, #e65100 85%, #bf360c 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.95)) drop-shadow(0 0 12px rgba(251, 192, 45, 0.4)) !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.jp_amount_digits {
  font-size: clamp(20px, 5.6vw, 38px) !important;
  font-weight: 900 !important;
  font-family: 'Hind Siliguri', 'Segoe UI', monospace !important;
  background: linear-gradient(180deg, #ffffff 0%, #fff9c4 20%, #fbc02d 55%, #e65100 85%, #bf360c 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: clamp(0.5px, 0.8vw, 2px) !important;
  line-height: 1 !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 16px rgba(251, 192, 45, 0.45)) !important;
  white-space: nowrap !important;
}

/* Mirror Reflection Below Digits */
.jp_digits_mirror {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(4px, 1.2vw, 9px) !important;
  position: absolute !important;
  top: 55% !important;
  left: 0 !important;
  right: 0 !important;
  transform: scaleY(-0.75) !important;
  opacity: 0.3 !important;
  filter: blur(1.2px) !important;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 80%) !important;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 80%) !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 1 !important;
}

.jp_currency_mirror {
  font-size: clamp(22px, 5.2vw, 36px) !important;
  font-weight: 900 !important;
  color: #fbc02d !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.jp_amount_digits_mirror {
  font-size: clamp(20px, 5.6vw, 38px) !important;
  font-weight: 900 !important;
  font-family: 'Hind Siliguri', 'Segoe UI', monospace !important;
  color: #fbc02d !important;
  letter-spacing: clamp(0.5px, 0.8vw, 2px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Floating 3D Gold Coins Cluster (Right Side) */
.jp_floating_coins {
  position: absolute !important;
  right: -14px !important;
  top: -18px !important;
  width: 96px !important;
  height: 88px !important;
  pointer-events: none !important;
  z-index: 12 !important;
  animation: jpCoinFloatBob 3.5s ease-in-out infinite alternate !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 14px rgba(255, 215, 0, 0.4)) !important;
}

@media (max-width: 640px) {
  .jp_floating_coins {
    right: -6px !important;
    top: -12px !important;
    width: 60px !important;
    height: 54px !important;
  }
}

.jp_coins_svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* ─── BOTTOM PROMOTIONAL BAR ─── */
.jp_bottom_bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 7px 18px !important;
  border-radius: 9999px !important;
  background: linear-gradient(180deg, rgba(82, 68, 20, 0.9) 0%, rgba(42, 35, 10, 0.96) 100%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow:
    inset 0 1px 2px rgba(255, 235, 150, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.7),
    0 4px 18px rgba(0, 0, 0, 0.6) !important;
  position: relative !important;
  z-index: 10 !important;
}

.jp_bottom_text {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #fef08a !important;
  font-family: 'Hind Siliguri', sans-serif !important;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.9),
    0 0 10px rgba(253, 224, 71, 0.35) !important;
  letter-spacing: 0.3px !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

@media (max-width: 640px) {
  .jp_bottom_bar {
    padding: 5px 12px !important;
    border-radius: 12px !important;
  }
  .jp_bottom_text {
    font-size: 10.5px !important;
    letter-spacing: 0.1px !important;
  }
}

/* Keyframes */
@keyframes jpCoinFloatBob {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
  100% { transform: translateY(1px) rotate(-1deg); }
}

@keyframes jp-dot-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(0.85); }
}

/* Backward compatibility aliases */
.jp_vault { display: contents !important; }
.jp_tagline_pill { display: contents !important; }



/* Mobile Bottom Navigation Bar (100% Full Width across all viewports) */
.mobile-bottom-nav-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  position: fixed !important;
  z-index: 50 !important;
  box-sizing: border-box !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  will-change: transform !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}

/* Luxury Scoped Styling for Modal & Auth Inputs */
.auth_unified_modal input[type="text"]:not(.auth_field_input),
.auth_unified_modal input[type="password"]:not(.auth_field_input),
.auth_unified_modal input[type="number"]:not(.auth_field_input),
.auth_unified_modal input[type="tel"]:not(.auth_phone_input):not(.auth_field_input),
.iziModal input[type="text"]:not(.auth_field_input),
.iziModal input[type="password"]:not(.auth_field_input),
.iziModal input[type="number"]:not(.auth_field_input),
.iziModal input[type="tel"]:not(.auth_phone_input):not(.auth_field_input) {
  background-color: #121722 !important;
  color: #ffffff !important;
  border: 1px solid #27272a !important;
  padding-left: 2.75rem !important;
  padding-right: 1rem !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  border-radius: 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  box-shadow: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

.auth_unified_modal input:focus,
.iziModal input:focus {
  border-color: #f59e0b !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) !important;
}

.iziModal input::placeholder,
.auth_unified_modal input::placeholder {
  color: #71717a !important;
  -webkit-text-fill-color: #71717a !important;
}

/* ==========================================================================
   Pixel-Perfect Unified Auth Input System (29Baji High-Roller Design)
   ========================================================================== */
.iziModal.auth_unified_modal {
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9), 0 0 25px rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(255, 215, 0, 0.22) !important;
}

@media (max-width: 480px) {
  .iziModal.auth_unified_modal {
    max-width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
    border-radius: 18px !important;
  }
}

.auth_input_group {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: #090e18 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  min-height: 46px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  width: 100% !important;
}

.auth_input_group:focus-within {
  border-color: #f59e0b !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 16px rgba(245, 158, 11, 0.28) !important;
  background: #0c1322 !important;
}

.auth_input_group.focus-emerald:focus-within {
  border-color: #10b981 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 16px rgba(16, 185, 129, 0.28) !important;
  background: #09131e !important;
}

.auth_input_group input[type="text"],
.auth_input_group input[type="password"],
.auth_input_group input[type="tel"],
.auth_input_group input[type="number"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0.75rem 0.85rem !important;
  color: #ffffff !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  width: 100% !important;
  line-height: 1.25rem !important;
  border-radius: 0 !important;
  -webkit-text-fill-color: #ffffff !important;
}

.auth_input_group input::placeholder {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-weight: 400 !important;
}

/* Chrome/Edge/Safari Autofill Dark Mode Override */
.auth_input_group input:-webkit-autofill,
.auth_input_group input:-webkit-autofill:hover,
.auth_input_group input:-webkit-autofill:focus,
.auth_input_group input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #090e18 inset !important;
  box-shadow: 0 0 0 1000px #090e18 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  caret-color: #ffd700 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

.auth_input_icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 0.875rem !important;
  padding-right: 0.25rem !important;
  color: #f59e0b !important;
  font-size: 0.875rem !important;
  flex-shrink: 0 !important;
}

.auth_input_icon.text-emerald {
  color: #10b981 !important;
}

.auth_eye_btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 0.875rem !important;
  color: #94a3b8 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
  flex-shrink: 0 !important;
}

.auth_eye_btn:hover {
  color: #ffffff !important;
}

/* ==========================================================================
   Unified Luxury Auth Modal Input System (.auth_field_box)
   ========================================================================== */
.auth_field_box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: #0d121c !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.auth_field_box:focus-within {
  border-color: #f59e0b !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(245, 158, 11, 0.18) !important;
  background: #101726 !important;
}

.auth_field_box.focus-emerald:focus-within {
  border-color: #10b981 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
  background: #0d1a24 !important;
}

.auth_field_icon {
  width: 38px !important;
  min-width: 38px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
  padding-left: 6px !important;
  padding-right: 0 !important;
  transition: color 0.2s ease !important;
}

.auth_field_box:focus-within .auth_field_icon {
  color: #f59e0b !important;
}

.auth_field_box.focus-emerald:focus-within .auth_field_icon {
  color: #10b981 !important;
}

.auth_field_prefix {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding-left: 12px !important;
  padding-right: 6px !important;
  height: 100% !important;
  color: #f59e0b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

.auth_field_box.focus-emerald .auth_field_prefix {
  color: #34d399 !important;
}

.auth_field_sep {
  width: 1px !important;
  height: 22px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  flex-shrink: 0 !important;
  margin: 0 2px !important;
}

.auth_field_input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 12px 0 4px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  border-radius: 0 !important;
  -webkit-text-fill-color: #ffffff !important;
  box-sizing: border-box !important;
}

.auth_field_box input[type="tel"].auth_field_input,
.auth_unified_modal input[type="tel"].auth_field_input,
.iziModal input[type="tel"].auth_field_input {
  padding-left: 8px !important;
}

.auth_field_input::placeholder {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}

.auth_field_input:-webkit-autofill,
.auth_field_input:-webkit-autofill:hover,
.auth_field_input:-webkit-autofill:focus,
.auth_field_input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #0d121c inset !important;
  box-shadow: 0 0 0 1000px #0d121c inset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  caret-color: #ffd700 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

.auth_field_action {
  width: 42px !important;
  min-width: 42px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

.auth_field_action:hover {
  color: #ffffff !important;
}

/* ==========================================================================
   Reference Decided Design Tokens: Jackpot Integrated Winner Pill & Nav Glow
   ========================================================================== */
.jackpot_winner_dock {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  background: rgba(6, 10, 18, 0.85) !important;
  border-top: 1px solid rgba(245, 158, 11, 0.25) !important;
  border-radius: 0 0 14px 14px !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 10 !important;
}

.jackpot_winner_pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 12px 4px 5px !important;
  background: #0d131f !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  border-radius: 9999px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6), 0 0 10px rgba(245, 158, 11, 0.15) !important;
  flex-shrink: 0 !important;
  z-index: 12 !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
}

.jackpot_winner_pill:hover {
  border-color: rgba(255, 215, 0, 0.8) !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3) !important;
}

.jackpot_winner_trophy_badge {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 50%, #c2410c 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  box-shadow: 0 0 10px rgba(234, 88, 12, 0.6) !important;
  flex-shrink: 0 !important;
}

.jackpot_winner_pill_content {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.15 !important;
}

.jackpot_winner_pill_top {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
}

.jackpot_winner_pill_amt {
  color: #fbbf24 !important;
  font-weight: 800 !important;
  font-family: monospace, sans-serif !important;
}

.jackpot_winner_pill_game {
  font-size: 9px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
}

.jackpot_winner_pill.pill-animate {
  animation: pillFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes pillFadeIn {
  from {
    opacity: 0.2;
    transform: translateY(3px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Emerald Hero Invite Tab Glow */
.nav_invite_glow {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.6), 0 0 10px rgba(16, 185, 129, 0.3) inset !important;
  border: 4px solid #080b10 !important;
}

.nav_invite_glow:active {
  transform: scale(0.94) !important;
}

/* ==========================================================================
   Floating Auto Notify Winner Trigger Dock (Reference Decided Bottom-Left)
   ========================================================================== */
.auto_notify_dock {
  position: fixed !important;
  z-index: 40 !important;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  left: 8px !important;
  max-width: 235px !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
  pointer-events: auto !important;
  transform: translateZ(0) !important;
  will-change: transform, opacity !important;
  contain: paint !important;
}

@media (min-width: 768px) {
  .auto_notify_dock {
    bottom: 22px !important;
    left: 280px !important;
    max-width: 260px !important;
  }
}

@media (min-width: 1024px) {
  .auto_notify_dock {
    left: 308px !important;
  }
}

/* Floating 24/7 Support Dock */
.floating_support_dock {
  position: fixed !important;
  z-index: 40 !important;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  right: 14px !important;
  pointer-events: none !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
  contain: paint !important;
}
.floating_support_dock > * {
  pointer-events: auto !important;
}

@media (min-width: 768px) {
  .floating_support_dock {
    bottom: 26px !important;
    right: 24px !important;
  }
}

.auto_notify_card {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 3px 8px 3px 4px !important;
  background: rgba(10, 15, 25, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 9999px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65), 0 0 10px rgba(245, 158, 11, 0.1) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  user-select: none !important;
}

.auto_notify_card:hover {
  border-color: rgba(251, 191, 36, 0.65) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 14px rgba(251, 191, 36, 0.2) !important;
  transform: translateY(-1px) scale(1.015) !important;
}

/* Compact Game Thumbnail Box (26x26px) */
.auto_notify_game_thumb_box {
  position: relative !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.auto_notify_game_img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 7px !important;
  border: 1px solid rgba(251, 191, 36, 0.5) !important;
  background: #080d1a !important;
  display: block !important;
  transition: opacity 0.15s ease !important;
}

/* Winner Info Stack */
.auto_notify_info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.15 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}

.auto_notify_fade_out {
  opacity: 0 !important;
  transform: translateY(2px) !important;
}

.auto_notify_top {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.auto_notify_user {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  letter-spacing: 0.1px !important;
}

.auto_notify_amount {
  color: #fbbf24 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.2px !important;
  font-family: system-ui, -apple-system, sans-serif !important;
}

.auto_notify_bottom {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.auto_notify_game {
  font-size: 9px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 95px !important;
}

.auto_notify_won_text {
  font-size: 8.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  white-space: nowrap !important;
}

/* Minimalist Unobtrusive Dismiss Button */
.auto_notify_dismiss_btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  border-radius: 9999px !important;
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
  font-size: 9px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  margin-left: 1px !important;
  padding: 0 !important;
}

.auto_notify_dismiss_btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}

/* ==========================================================================
   29baji VIP Design System Overhaul (Luxury iGaming Aesthetics)
   ========================================================================== */

/* 1. Grand Mega Jackpot Luxury Stage */
.vip_jackpot_card {
  position: relative !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #070a12 !important;
  border: 1.5px solid rgba(245, 158, 11, 0.65) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 24px rgba(245, 158, 11, 0.2) !important;
}

.vip_jackpot_crest {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, #ffd700 0%, #f59e0b 50%, #b45309 100%) !important;
  color: #000000 !important;
  border: 1.5px solid #fef08a !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.6) !important;
  font-size: 18px !important;
}

.vip_live_badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 8px !important;
  border-radius: 9999px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  background: rgba(220, 38, 38, 0.25) !important;
  border: 1px solid rgba(239, 68, 68, 0.75) !important;
  color: #fee2e2 !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.3) !important;
}

.vip_live_dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  box-shadow: 0 0 8px #ef4444 !important;
  animation: vipPulse 1.5s infinite alternate !important;
}

@keyframes vipPulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 1; }
}

.vip_jackpot_title_badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #fcd34d !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

.vip_jackpot_cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  background: linear-gradient(135deg, #ffd700 0%, #f59e0b 50%, #d97706 100%) !important;
  color: #000000 !important;
  border: 1px solid #fef08a !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

.vip_jackpot_cta:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6) !important;
}

.vip_jackpot_cta:active {
  transform: scale(0.96) !important;
}

.vip_jackpot_vault {
  width: 100% !important;
  padding: 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 12px !important;
  background: radial-gradient(ellipse at center, #0e1726 0%, #03060c 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.5) !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 16px rgba(245, 158, 11, 0.22) !important;
}

.vip_jackpot_currency {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.8) !important;
}

.vip_jackpot_digits {
  font-family: 'Hind Siliguri', 'Outfit', 'Inter', -apple-system, sans-serif !important;
  font-size: clamp(20px, 4.5vw, 30px) !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.04em !important;
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 35%, #f59e0b 80%, #d97706 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.55)) !important;
}

/* ============================================================
   2. VIP Master Redesign Quick Action Widget & 3D Glassmorphic Chassis
============================================================ */
.vip_action_panel {
  position: relative !important;
  width: 100% !important;
  background: linear-gradient(180deg, #2a3040 0%, #171b26 100%) !important;
  border: 1.5px solid #3c4456 !important;
  border-radius: 20px !important;
  padding: 8px 8px 10px 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75), inset 0 1.5px 1px rgba(255, 255, 255, 0.12), inset 0 -2px 4px rgba(0, 0, 0, 0.6) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 4px 0 10px 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  .vip_action_panel {
    padding: 12px 14px 14px 14px !important;
    border-radius: 24px !important;
    gap: 12px !important;
  }
}

@media (min-width: 1024px) {
  .vip_action_panel {
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.vip_announce_bar {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 3px 6px 3px 8px !important;
  border-radius: 9999px !important;
  background-color: #0e121a !important;
  background-image: 
    radial-gradient(rgba(255, 255, 255, 0.08) 1.2px, transparent 1.2px), 
    linear-gradient(180deg, #1a202d 0%, #0a0d14 100%) !important;
  background-size: 5px 5px, 100% 100% !important;
  border: 1.5px solid rgba(130, 145, 175, 0.4) !important;
  box-shadow: 
    inset 0 3px 7px rgba(0, 0, 0, 0.9), 
    inset 0 -1px 2px rgba(255, 255, 255, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
  height: 44px !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  .vip_announce_bar {
    height: 48px !important;
    padding: 3px 8px 3px 12px !important;
  }
}

.vip_fire_icon_wrap {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin-right: 4px !important;
  position: relative !important;
  z-index: 10 !important;
}

@media (min-width: 640px) {
  .vip_fire_icon_wrap {
    width: 38px !important;
    height: 38px !important;
    margin-right: 8px !important;
  }
}

.vip_fire_img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.85)) drop-shadow(0 0 14px rgba(239, 68, 68, 0.55)) !important;
  animation: vipFirePulse 2.5s infinite ease-in-out !important;
  user-select: none !important;
  pointer-events: none !important;
}

@keyframes vipFirePulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.8)) drop-shadow(0 0 12px rgba(239, 68, 68, 0.5)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.98)) drop-shadow(0 0 18px rgba(239, 68, 68, 0.75)); }
}

.vip_marquee_container {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 4px !important;
  mask-image: linear-gradient(to right, transparent 0%, black 28px, black calc(100% - 28px), transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 28px, black calc(100% - 28px), transparent 100%) !important;
}

.vip_marquee_track {
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
  animation: vipMarqueeScroll 25s linear infinite !important;
  will-change: transform !important;
}

.vip_marquee_container:hover .vip_marquee_track {
  animation-play-state: paused !important;
}

@keyframes vipMarqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.vip_marquee_item {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-family: 'Hind Siliguri', 'Inter', -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  padding-right: 48px !important;
  gap: 16px !important;
}

@media (max-width: 480px) {
  .vip_marquee_item {
    font-size: 12px !important;
    padding-right: 36px !important;
    gap: 12px !important;
  }
}

.vip_text_gold {
  color: #fde68a !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(245, 158, 11, 0.4) !important;
  font-weight: 800 !important;
}

.vip_text_white {
  color: #f8fafc !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.vip_crown_icon {
  color: #f59e0b !important;
  font-size: 13px !important;
  margin: 0 4px !important;
  filter: drop-shadow(0 0 6px #f59e0b) !important;
}

.vip_text_highlight {
  color: #fef08a !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(234, 179, 8, 0.5) !important;
  font-weight: 800 !important;
}

.vip_mail_3d_btn {
  position: relative !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-left: 4px !important;
  cursor: pointer !important;
  height: 34px !important;
  z-index: 10 !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

@media (min-width: 640px) {
  .vip_mail_3d_btn {
    height: 38px !important;
    margin-left: 8px !important;
  }
}

.vip_mail_3d_btn:hover {
  transform: translateY(-1px) scale(1.06) !important;
  filter: brightness(1.15) drop-shadow(0 4px 12px rgba(245, 158, 11, 0.5)) !important;
}

.vip_mail_3d_btn:active {
  transform: scale(0.94) !important;
}

.vip_mail_3d_img {
  height: 100% !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
  pointer-events: none !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7)) !important;
}

.vip_service_grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  .vip_service_grid {
    gap: 12px !important;
  }
}

.vip_card_btn {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border-radius: 16px !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), filter 0.22s ease !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  overflow: hidden !important;
}

@media (min-width: 640px) {
  .vip_card_btn {
    border-radius: 20px !important;
  }
}

.vip_card_btn:hover {
  transform: translateY(-2.5px) scale(1.025) !important;
  filter: brightness(1.08) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7)) !important;
}

.vip_card_btn:active {
  transform: scale(0.96) !important;
  filter: brightness(0.95) !important;
}

.vip_card_img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 222 / 180 !important;
  object-fit: contain !important;
  border-radius: 16px !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: high-quality !important;
  pointer-events: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.22s ease !important;
}

@media (min-width: 640px) {
  .vip_card_img {
    border-radius: 20px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6) !important;
  }
}

@media (min-width: 768px) {
  .vip_card_btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .vip_card_img {
    max-height: 110px !important;
    width: auto !important;
    margin: 0 auto !important;
  }
}

.vip_service_card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 12px 4px 10px 4px !important;
  border-radius: 14px !important;
  min-height: 68px !important;
  background: linear-gradient(180deg, #182232 0%, #101624 100%) !important;
  border: 1.5px solid #243044 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, box-shadow 0.22s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  .vip_service_card {
    padding: 14px 6px 12px 6px !important;
    min-height: 74px !important;
    border-radius: 16px !important;
  }
}

.vip_service_card:hover {
  transform: translateY(-2px) !important;
  border-color: #384964 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.7), 0 0 16px rgba(56, 189, 248, 0.15) !important;
}

.vip_service_card:active {
  transform: scale(0.96) !important;
}

.vip_card_icon_wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (min-width: 640px) {
  .vip_card_icon_wrap {
    width: 38px !important;
    height: 38px !important;
  }
}

.vip_card_icon_wrap::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 26px !important;
  height: 26px !important;
  transform: translate(-50%, -50%) !important;
  background: var(--glow-color, rgba(255, 255, 255, 0.2)) !important;
  filter: blur(8px) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.85 !important;
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease !important;
}

.vip_card_icon_wrap svg,
.vip_card_icon_wrap i {
  position: relative !important;
  z-index: 1 !important;
  filter: drop-shadow(0 0 5px currentColor) !important;
}

.vip_service_card:hover .vip_card_icon_wrap {
  transform: scale(1.12) !important;
}

.vip_service_card:hover .vip_card_icon_wrap::before {
  opacity: 1 !important;
  filter: blur(12px) !important;
  transform: translate(-50%, -50%) scale(1.25) !important;
}

.vip_card_label {
  font-family: 'Hind Siliguri', 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  text-align: center !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  transition: color 0.2s ease !important;
}

@media (max-width: 480px) {
  .vip_card_label {
    font-size: 11px !important;
  }
}

.vip_service_card:hover .vip_card_label {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5) !important;
}

/* Backward compatibility fallbacks */
.vip_service_icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
}

.vip_service_text {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  text-align: center !important;
}

.vip_inbox_pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 11px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #000000 !important;
  border: 1px solid #fef08a !important;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.45) !important;
  cursor: pointer !important;
}

/* 4. 5 Quick Game Posters */
.quick_game_grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 7px !important;
  width: 100% !important;
}

@media (max-width: 640px) {
  .quick_game_grid {
    gap: 5px !important;
  }
}

.quick_poster_card {
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 2px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.quick_poster_card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.quick_poster_card:hover {
  transform: translateY(-2px) scale(1.03) !important;
  border-color: rgba(245, 158, 11, 0.8) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 16px rgba(245, 158, 11, 0.35) !important;
}

/* ============================================================
   5. 29baji Certified Game Studios & Footer Architecture
============================================================ */
.baji-studios-wrap {
  width: 100% !important;
}

.baji-provider-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  align-items: center !important;
}

@media (min-width: 640px) {
  .baji-provider-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

@media (min-width: 768px) {
  .baji-provider-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (min-width: 1024px) {
  .baji-provider-grid {
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (min-width: 1280px) {
  .baji-provider-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

.baji-provider-card {
  height: 48px !important;
  max-height: 48px !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  background: rgba(16, 22, 33, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  position: relative !important;
}

.baji-provider-card:hover {
  background: rgba(24, 34, 52, 0.95) !important;
  border-color: rgba(255, 215, 0, 0.45) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 215, 0, 0.15) !important;
}

.baji-provider-img {
  max-height: 24px !important;
  max-width: 80px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: brightness(0.9) grayscale(15%) !important;
  transition: all 0.25s ease !important;
  display: block !important;
}

.baji-provider-card:hover .baji-provider-img {
  filter: brightness(1.15) grayscale(0%) drop-shadow(0 0 4px rgba(255, 215, 0, 0.25)) !important;
  transform: scale(1.06) !important;
}

/* ============================================================
   6. Baji Bangladeshi Payment Gateways Showcase
============================================================ */
.baji-payment-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

@media (min-width: 768px) {
  .baji-payment-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

.baji-payment-card {
  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: rgba(14, 20, 30, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

@media (max-width: 480px) {
  .baji-payment-card {
    padding: 8px 8px !important;
    gap: 8px !important;
  }
}

.baji-payment-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.baji-payment-card.bkash {
  border-color: rgba(226, 19, 110, 0.25) !important;
}
.baji-payment-card.bkash:hover {
  border-color: rgba(226, 19, 110, 0.6) !important;
  box-shadow: 0 8px 24px rgba(226, 19, 110, 0.2) !important;
}

.baji-payment-card.nagad {
  border-color: rgba(247, 147, 30, 0.25) !important;
}
.baji-payment-card.nagad:hover {
  border-color: rgba(247, 147, 30, 0.6) !important;
  box-shadow: 0 8px 24px rgba(247, 147, 30, 0.2) !important;
}

.baji-payment-card.rocket {
  border-color: rgba(140, 52, 148, 0.25) !important;
}
.baji-payment-card.rocket:hover {
  border-color: rgba(140, 52, 148, 0.6) !important;
  box-shadow: 0 8px 24px rgba(140, 52, 148, 0.2) !important;
}

.baji-payment-card.bank {
  border-color: rgba(16, 185, 129, 0.25) !important;
}
.baji-payment-card.bank:hover {
  border-color: rgba(16, 185, 129, 0.6) !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2) !important;
}

/* ============================================================
   7. Footer Nav & Trust Badges
============================================================ */
.baji-footer-divider {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.18), transparent) !important;
  border: none !important;
  margin: 20px 0 !important;
}

.baji-trust-bar {
  padding: 14px 20px !important;
  border-radius: 16px !important;
  background: rgba(11, 16, 26, 0.9) !important;
  border: 1px solid rgba(255, 215, 0, 0.12) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

/* ============================================================
   8. Provider Catalog Modal (Screenshot 2 Alignment)
============================================================ */
.catalog-modal-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

@media (min-width: 640px) {
  .catalog-modal-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
}

@media (min-width: 768px) {
  .catalog-modal-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

.catalog-studio-btn {
  background-color: #111722 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  min-height: 56px !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.catalog-studio-btn:hover {
  border-color: #f59e0b !important;
  background-color: #182232 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2) !important;
}

.catalog-studio-btn.active {
  border: 2px solid #f59e0b !important;
  background-color: #131a26 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3) !important;
}

/* ============================================================
   9. Missing Essential Sizing Utilities (Compile Gap Fallbacks)
============================================================ */
.w-7  { width: 1.75rem !important; }
.w-9  { width: 2.25rem !important; }
.w-11 { width: 2.75rem !important; }
.w-13 { width: 3.25rem !important; }
.w-14 { width: 3.5rem !important; }
.h-7  { height: 1.75rem !important; }
.h-9  { height: 2.25rem !important; }
.h-11 { height: 2.75rem !important; }
.h-13 { height: 3.25rem !important; }
.h-14 { height: 3.5rem !important; }

/* ============================================================
   10. Member Center & Profile Architecture Tokens
============================================================ */
.baji-profile-hero {
  border-radius: 24px !important;
  padding: 16px !important;
  background: linear-gradient(145deg, #141c28 0%, #0c1017 100%) !important;
  border: 1px solid rgba(255, 215, 0, 0.25) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6) !important;
}

@media (min-width: 640px) {
  .baji-profile-hero {
    padding: 20px !important;
  }
}

.baji-profile-avatar-box {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #ffd700 0%, #f59e0b 50%, #d97706 100%) !important;
  border: 2px solid #fef08a !important;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35) !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.baji-hub-card {
  padding: 14px 10px !important;
  border-radius: 18px !important;
  background: rgba(14, 20, 30, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.baji-hub-card:hover {
  background: rgba(22, 32, 48, 0.95) !important;
  border-color: rgba(255, 215, 0, 0.5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 215, 0, 0.2) !important;
}

.baji-hub-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  transition: transform 0.25s ease !important;
}

.baji-hub-card:hover .baji-hub-icon {
  transform: scale(1.1) !important;
}

/* ==========================================================================
   Popup Announcement & Video Sound Button — Perfect Corner Anchoring
   ========================================================================== */
.popup-nav-arrow {
    display: none !important;
}

.popup-video-sound-btn {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    z-index: 30 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.78) !important;
    border: 1.5px solid rgba(34, 197, 94, 0.6) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), 0 0 8px rgba(34, 197, 94, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #ffffff !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}

.popup-video-sound-btn:hover {
    background: rgba(0, 0, 0, 0.95) !important;
    border-color: #4ade80 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), 0 0 14px rgba(74, 222, 128, 0.6) !important;
    transform: scale(1.08) !important;
}

.popup-video-sound-btn:active {
    transform: scale(0.92) !important;
}


/* iziModal 100% Solid Dark Architecture & Blur Overlay */
.iziModal, .iziModal-wrap, .iziModal-content {
  background-color: #0c1017 !important;
}
.iziModal-overlay {
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ============================================================
   11. Standardized UI Scale & Layout Tokens (Redesign Alignment)
============================================================ */
/* Uniform Action Cards & Floating Badges */
.ui-action-card {
  position: relative !important;
  border-radius: 20px !important;
  padding: 14px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 8px !important;
  min-height: 124px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

.ui-action-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65) !important;
}

.ui-action-card:active {
  transform: scale(0.97) !important;
}

/* Guaranteed Absolute Top-Right Badge (Never overlaps icon) */
.ui-card-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  line-height: 1.25 !important;
  z-index: 5 !important;
  pointer-events: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.ui-card-icon-box {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  transition: transform 0.2s ease !important;
}

.ui-action-card:hover .ui-card-icon-box {
  transform: scale(1.08) !important;
}

/* Standardized Button Scales */
.ui-btn-sm {
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.ui-btn-md {
  height: 40px !important;
  padding: 0 16px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.ui-btn-lg {
  height: 46px !important;
  padding: 0 20px !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

/* Leaderboard Rank Badges */
.ui-rank-badge {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.ui-rank-gold {
  background: linear-gradient(135deg, #ffd700 0%, #f59e0b 100%) !important;
  color: #000000 !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.45) !important;
}

.ui-rank-silver {
  background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%) !important;
  color: #000000 !important;
  box-shadow: 0 0 8px rgba(148, 163, 184, 0.3) !important;
}

.ui-rank-bronze {
  background: linear-gradient(135deg, #d97706 0%, #92400e 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(180, 83, 9, 0.3) !important;
}

.ui-rank-zinc {
  background: #1e2532 !important;
  border: 1px solid #334155 !important;
  color: #94a3b8 !important;
}

/* Standardized Footer Payment Micro-Cards */
.ui-payment-chip {
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.ui-payment-chip:hover {
  transform: translateY(-1px) !important;
}

/* Provider Filter Contrast & Sizing */
.lobby_ref_logo_img {
  max-height: 26px !important;
  width: auto !important;
  max-width: 60px !important;
  object-fit: contain !important;
}

/* Specific filter for dark provider logos */
.lobby_ref_logo_btn[title*="Spribe"] .lobby_ref_logo_img,
.lobby_ref_logo_btn[title*="SPRIBE"] .lobby_ref_logo_img {
  filter: brightness(0) invert(1) !important;
}

/* ==========================================================================
   29baji PREMIUM DESIGN SYSTEM — System-Wide Component Library v2
   Eliminates wireframe/skeleton feel across ALL screens
   ========================================================================== */

/* ── Section Label / Sub-Header (used site-wide above card groups) ── */
.ui-section-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}
.ui-section-label h3,
.ui-section-label p {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.ui-section-label .ui-section-badge {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ── Luxury Info / Content Card ── */
.ui-info-card {
  background: linear-gradient(145deg, #111722 0%, #0a0f1a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  padding: 14px 16px !important;
}
.ui-info-card-gold {
  background: linear-gradient(145deg, #16120a 0%, #0d0906 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.28) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(245, 158, 11, 0.05) !important;
  padding: 14px 16px !important;
}
.ui-info-card-emerald {
  background: linear-gradient(145deg, #061411 0%, #040d0a 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(16, 185, 129, 0.05) !important;
  padding: 14px 16px !important;
}

/* ── Payment Gateway Selection Cards (Deposit / Withdraw) ── */
.pgw-card {
  cursor: pointer !important;
  border: 2px solid rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(145deg, #101520 0%, #080c14 100%) !important;
  border-radius: 16px !important;
  padding: 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  min-height: 72px !important;
}
.pgw-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6) !important;
}
.pgw-card.pgw-bkash.active {
  border-color: #e2136e !important;
  background: linear-gradient(145deg, #200812 0%, #12040c 100%) !important;
  box-shadow: 0 0 18px rgba(226, 19, 110, 0.35), inset 0 1px 0 rgba(226, 19, 110, 0.12) !important;
}
.pgw-card.pgw-nagad.active {
  border-color: #f7941d !important;
  background: linear-gradient(145deg, #1e1008 0%, #120a04 100%) !important;
  box-shadow: 0 0 18px rgba(247, 148, 29, 0.35), inset 0 1px 0 rgba(247, 148, 29, 0.12) !important;
}
.pgw-card.pgw-rocket.active {
  border-color: #8c3494 !important;
  background: linear-gradient(145deg, #180d20 0%, #0e0814 100%) !important;
  box-shadow: 0 0 18px rgba(140, 52, 148, 0.35), inset 0 1px 0 rgba(140, 52, 148, 0.12) !important;
}
.pgw-logo-box {
  width: 58px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.02em !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.pgw-logo-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 6px !important;
}
.pgw-logo-box.bkash { background: transparent !important; }
.pgw-logo-box.nagad { background: transparent !important; }
.pgw-logo-box.rocket { background: transparent !important; }

/* ── Footer Gateway Logo Badges ── */
.ui-gw-card {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 4px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}
.ui-gw-card:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  transform: translateY(-1px) scale(1.04) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
.pgw-name {
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
}
.pgw-tag {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.pgw-check {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  color: #fff !important;
  opacity: 0 !important;
  transition: opacity 0.15s ease !important;
}
.pgw-card.active .pgw-check { opacity: 1 !important; }
.pgw-check.bkash { background: #e2136e !important; }
.pgw-check.nagad { background: #f7941d !important; }
.pgw-check.rocket { background: #8c3494 !important; }

/* ── Amount Input Premium Wrapper ── */
.amount-input-wrap {
  position: relative !important;
  background: linear-gradient(145deg, #060a12 0%, #040710 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}
.amount-input-wrap:focus-within {
  border-color: #10b981 !important;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 18px rgba(16, 185, 129, 0.25) !important;
}
.amount-input-wrap .currency-prefix {
  padding: 0 4px 0 16px !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #10b981 !important;
  flex-shrink: 0 !important;
  user-select: none !important;
  line-height: 1 !important;
}
.amount-input-wrap input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 14px 16px 14px 8px !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── Quick Amount Chips (Deposit / Withdraw) ── */
.qchip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 4px !important;
  background: linear-gradient(145deg, #131b2a 0%, #0c1220 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 12px !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  color: #cbd5e1 !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  user-select: none !important;
}
.qchip:hover {
  background: linear-gradient(135deg, #1c2a3d 0%, #131e30 100%) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
.qchip.active,
.qchip.selected {
  background: linear-gradient(135deg, #064e35 0%, #053d29 100%) !important;
  border-color: #10b981 !important;
  color: #34d399 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(16, 185, 129, 0.15) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

/* ── Trust Badge Row ── */
.trust-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 7px 6px !important;
  background: linear-gradient(145deg, #0d1220 0%, #080d18 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* ── Form Field Label Standard ── */
.form-label-std {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 8px !important;
}
.form-label-std .badge-right {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #10b981 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── 7-Day Check-in Day Card ── */
.day-card {
  border-radius: 16px !important;
  padding: 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  min-height: 130px !important;
  background: linear-gradient(145deg, #0e1420 0%, #08101c 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}
.day-card.claimed {
  background: linear-gradient(145deg, #071a12 0%, #040e0b 100%) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.15), inset 0 1px 0 rgba(16, 185, 129, 0.06) !important;
}
.day-card.today-target {
  background: linear-gradient(145deg, #181208 0%, #0d0b06 100%) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.2), inset 0 1px 0 rgba(245, 158, 11, 0.07) !important;
  transform: scale(1.02) !important;
}
.day-card.locked {
  opacity: 0.7 !important;
}
.day-card-tag {
  width: 100% !important;
  padding: 3px 0 !important;
  border-radius: 8px !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
.day-card-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}
.day-card-bonus {
  font-size: 11.5px !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.day-card-dep {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.day-card-btn {
  width: 100% !important;
  padding: 4px 4px !important;
  border-radius: 8px !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.day-card-btn.btn-claimed {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
.day-card-btn.btn-claim {
  background: linear-gradient(135deg, #3b82f6, #4f46e5) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4) !important;
  animation: pulse-claim 2s infinite !important;
}
.day-card-btn.btn-deposit {
  background: linear-gradient(135deg, #f59e0b, #b45309) !important;
  color: #000 !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
}
.day-card-btn.btn-locked {
  background: rgba(39, 39, 42, 0.8) !important;
  color: #52525b !important;
  cursor: not-allowed !important;
}
@keyframes pulse-claim {
  0%, 100% { box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4); }
  50% { box-shadow: 0 4px 20px rgba(79, 70, 229, 0.7); }
}

/* ── Promo Notice Strip (inside modals / pages) ── */
.promo-notice-strip {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(16, 185, 129, 0.06) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.28) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* ── Alert Banner (warning / info) ── */
.ui-alert-info {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 14px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #fcd34d !important;
  line-height: 1.5 !important;
}

/* ── Stat Summary Block (Check-in Streak etc) ── */
.stat-block {
  border-radius: 14px !important;
  padding: 12px !important;
  text-align: center !important;
  background: linear-gradient(145deg, #0f1825 0%, #090e18 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}
.stat-block-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin-bottom: 6px !important;
}
.stat-block-value {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #f8fafc !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* ── Deposit / Withdraw Submit CTA ── */
.cta-submit-gold {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 50px !important;
  border-radius: 14px !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #000000 !important;
  background: linear-gradient(135deg, #ffd700 0%, #f59e0b 50%, #d97706 100%) !important;
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: all 0.2s ease !important;
}
.cta-submit-gold:hover { filter: brightness(1.1) !important; transform: translateY(-1px) !important; }
.cta-submit-gold:active { transform: scale(0.98) !important; }

.cta-submit-emerald {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 50px !important;
  border-radius: 14px !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #000000 !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
  box-shadow: 0 6px 22px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: all 0.2s ease !important;
}
.cta-submit-emerald:hover { filter: brightness(1.1) !important; transform: translateY(-1px) !important; }
.cta-submit-emerald:active { transform: scale(0.98) !important; }

/* ── Balance Display Luxury Pill (Withdraw Screen) ── */
.balance-hero-card {
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(13, 21, 34, 0.95) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.3) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(245, 158, 11, 0.07) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ── Promo Banner inside Register Modal ── */
.reg-promo-banner {
  width: 100% !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
  margin-bottom: 14px !important;
  transition: border-color 0.2s ease !important;
}
.reg-promo-banner:hover { border-color: rgba(245, 158, 11, 0.6) !important; }
.reg-promo-banner img { display: block !important; width: 100% !important; height: auto !important; }

/* ── Section Divider Line with Label ── */
.section-divider {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 14px 0 !important;
}
.section-divider::before,
.section-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.07) !important;
}
.section-divider span {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: #52525b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap !important;
}

/* ── Compact Data Row (label + value pairs in cards) ── */
.data-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.data-row:last-child { border-bottom: none !important; }
.data-row-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.data-row-value {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #e2e8f0 !important;
}

/* ── w-68 custom width for sidebar ── */
.w-68 { width: 17rem !important; }

/* ── Compact content text density system ── */
.text-compact { font-size: 11px !important; line-height: 1.45 !important; }
.text-compact-xs { font-size: 10px !important; line-height: 1.4 !important; }
.text-micro { font-size: 9px !important; line-height: 1.35 !important; }

/* ==========================================================================
   29baji.online — Production Security, Asset Protection & Touch Productivity
   ========================================================================== */

/* 1. Universal Anti-Theft & Selection Lock (GPU Optimized) */
html, body {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-overflow-scrolling: touch;
}

/* 2. Image, Graphic & Media Asset Protection (Zero Asset Theft) */
img, svg, picture, video, canvas, [role="img"], a[download] {
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  user-drag: none !important;
  -webkit-touch-callout: none !important;
  pointer-events: auto;
}

/* 3. Whitelisted Form Elements & Essential User Copy Controls */
input, 
textarea, 
select, 
[contenteditable="true"], 
.allow-select, 
.allow-copy,
.selectable-text {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

/* 4. Touch Productivity & Instant 60/120fps Mobile Response (No 300ms Delay) */
a, button, input, select, textarea, [role="button"], .tab, .game-card, .btn-action, .quick-tab {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 5. Mobile Input Auto-Zoom Prevention (iOS Safari requires min 16px to prevent viewport zoom) */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 6. Tawk.to Redundant Launcher Suppression (Preserves custom helpline button as sole launcher) */
iframe[style*="max-width: 64px"],
iframe[style*="max-width:64px"],
iframe[style*="max-width: 60px"],
iframe[style*="max-width:60px"],
iframe[style*="max-width: 124px"],
iframe[style*="max-width:124px"],
iframe[width="64px"],
iframe[width="60px"],
iframe[width="124px"],
.tawk-min-container,
#tawk-bubble-container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  z-index: -9999 !important;
}

/* ==========================================================================
   Universal Pixel-Perfect Modal Corner & Scrollbar Clipping System
   Eliminates all sharp corners, leaking scrollbar tracks, and overflow bleed
   ========================================================================== */
.iziModal,
div[id$="-modal"].iziModal,
.auth_unified_modal,
#popup-announcement-card,
#wgp-card,
#gamify-condition-modal {
  border-radius: 24px !important;
  overflow: hidden !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
  mask-image: radial-gradient(white, black) !important;
  box-sizing: border-box !important;
}

.iziModal .iziModal-wrap {
  border-radius: inherit !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

.iziModal .iziModal-content {
  border-radius: inherit !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.iziModal .modal-content,
.iziModal .modal-body {
  border-radius: inherit !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Suppress all scrollbar arrow buttons across all modals */
.iziModal ::-webkit-scrollbar-button,
.iziModal-wrap::-webkit-scrollbar-button,
.modal-content::-webkit-scrollbar-button,
div[id$="-modal"] ::-webkit-scrollbar-button,
#popup-announcement-card ::-webkit-scrollbar-button,
#wgp-card ::-webkit-scrollbar-button,
#gamify-condition-modal ::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Sleek rounded scrollbar that avoids corner overlap */
.iziModal ::-webkit-scrollbar,
.iziModal-wrap::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
div[id$="-modal"] ::-webkit-scrollbar,
#popup-announcement-card ::-webkit-scrollbar,
#wgp-card ::-webkit-scrollbar,
#gamify-condition-modal ::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

.iziModal ::-webkit-scrollbar-track,
.iziModal-wrap::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track,
div[id$="-modal"] ::-webkit-scrollbar-track,
#popup-announcement-card ::-webkit-scrollbar-track,
#wgp-card ::-webkit-scrollbar-track,
#gamify-condition-modal ::-webkit-scrollbar-track {
  background: transparent !important;
  margin: 14px 0 !important; /* Inset scrollbar 14px from top/bottom to eliminate any corner bleed */
  border-radius: 9999px !important;
}

.iziModal ::-webkit-scrollbar-thumb,
.iziModal-wrap::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
div[id$="-modal"] ::-webkit-scrollbar-thumb,
#popup-announcement-card ::-webkit-scrollbar-thumb,
#wgp-card ::-webkit-scrollbar-thumb,
#gamify-condition-modal ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18) !important;
  border-radius: 9999px !important;
}

.iziModal ::-webkit-scrollbar-thumb:hover,
.iziModal-wrap::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover,
div[id$="-modal"] ::-webkit-scrollbar-thumb:hover,
#popup-announcement-card ::-webkit-scrollbar-thumb:hover,
#wgp-card ::-webkit-scrollbar-thumb:hover,
#gamify-condition-modal ::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 158, 11, 0.6) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   29BAJI LUXURY iGAMING TOASTER NOTIFICATION DESIGN SYSTEM (IZITOAST)
   120% High-Contrast, Deep Dark Glassmorphism, Neon Glow & Crisp Typography
   Eliminates all washed-out light pastel backgrounds & unreadable white text
   ═══════════════════════════════════════════════════════════════════════════ */

.iziToast-wrapper {
  z-index: 999999 !important;
  pointer-events: none !important;
}

.iziToast {
  pointer-events: all !important;
  display: flex !important;
  align-items: center !important;
  font-family: 'Roboto', 'Hind Siliguri', sans-serif !important;
  background: rgba(11, 17, 28, 0.96) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.92), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.18) !important;
  min-height: 56px !important;
  padding: 11px 44px 11px 16px !important;
  margin: 8px 0 !important;
  max-width: 92vw !important;
  overflow: hidden !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

@media (min-width: 568px) {
  .iziToast {
    min-width: 340px !important;
    max-width: 480px !important;
  }
}

/* Base Text Styles - Ultra High Contrast Crisp White */
.iziToast > .iziToast-body {
  margin: 0 0 0 12px !important;
  padding: 0 !important;
  min-height: unset !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
}

.iziToast > .iziToast-body .iziToast-texts {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  float: none !important;
}

.iziToast > .iziToast-body .iziToast-title {
  color: #ffffff !important;
  font-size: 14.5px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  margin: 0 !important;
  float: none !important;
}

.iziToast > .iziToast-body .iziToast-message {
  color: #ffffff !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
  margin: 0 !important;
  float: none !important;
  opacity: 0.96 !important;
}

/* Close Button */
.iziToast > .iziToast-close {
  opacity: 0.75 !important;
  width: 32px !important;
  height: 32px !important;
  top: 50% !important;
  right: 8px !important;
  transform: translateY(-50%) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}
.iziToast > .iziToast-close:hover {
  opacity: 1 !important;
  background-color: rgba(255, 255, 255, 0.24) !important;
  transform: translateY(-50%) scale(1.1) !important;
}

/* Progress bar */
.iziToast > .iziToast-progressbar {
  height: 3px !important;
  background: rgba(255, 255, 255, 0.12) !important;
}
.iziToast > .iziToast-progressbar > div {
  height: 3px !important;
  border-radius: 0 0 16px 16px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLOR VARIANTS: SUCCESS / ERROR / WARNING / INFO
   Overriding iziToast light pastel backgrounds with deep luxury glow
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. SUCCESS (Green / Emerald / Gold) */
.iziToast.iziToast-color-green,
.iziToast-theme-dark.iziToast-color-green,
.iziToast.iziToast-theme-dark.iziToast-color-green {
  background: linear-gradient(135deg, rgba(6, 46, 26, 0.98) 0%, rgba(9, 26, 18, 0.98) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.75) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.92), 0 0 28px rgba(16, 185, 129, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}
.iziToast.iziToast-color-green .iziToast-title,
.iziToast-theme-dark.iziToast-color-green .iziToast-title {
  color: #34d399 !important;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.7) !important;
}
.iziToast.iziToast-color-green .iziToast-message,
.iziToast-theme-dark.iziToast-color-green .iziToast-message {
  color: #f0fdf4 !important;
}
.iziToast.iziToast-color-green > .iziToast-progressbar > div {
  background: linear-gradient(90deg, #10b981, #34d399) !important;
  box-shadow: 0 0 8px #34d399 !important;
}

/* 2. ERROR (Red / Crimson) */
.iziToast.iziToast-color-red,
.iziToast-theme-dark.iziToast-color-red,
.iziToast.iziToast-theme-dark.iziToast-color-red {
  background: linear-gradient(135deg, rgba(68, 14, 14, 0.98) 0%, rgba(30, 8, 8, 0.98) 100%) !important;
  border: 1.5px solid rgba(248, 113, 113, 0.75) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.92), 0 0 28px rgba(239, 68, 68, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}
.iziToast.iziToast-color-red .iziToast-title,
.iziToast-theme-dark.iziToast-color-red .iziToast-title {
  color: #f87171 !important;
  text-shadow: 0 0 10px rgba(248, 113, 113, 0.7) !important;
}
.iziToast.iziToast-color-red .iziToast-message,
.iziToast-theme-dark.iziToast-color-red .iziToast-message {
  color: #fef2f2 !important;
}
.iziToast.iziToast-color-red > .iziToast-progressbar > div {
  background: linear-gradient(90deg, #ef4444, #f87171) !important;
  box-shadow: 0 0 8px #f87171 !important;
}

/* 3. WARNING / ATTENTION (Amber / Gold) */
.iziToast.iziToast-color-yellow,
.iziToast.iziToast-color-orange,
.iziToast-theme-dark.iziToast-color-yellow,
.iziToast-theme-dark.iziToast-color-orange {
  background: linear-gradient(135deg, rgba(60, 36, 5, 0.98) 0%, rgba(30, 16, 4, 0.98) 100%) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.75) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.92), 0 0 28px rgba(245, 158, 11, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}
.iziToast.iziToast-color-yellow .iziToast-title,
.iziToast.iziToast-color-orange .iziToast-title,
.iziToast-theme-dark.iziToast-color-yellow .iziToast-title,
.iziToast-theme-dark.iziToast-color-orange .iziToast-title {
  color: #fbbf24 !important;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.7) !important;
}
.iziToast.iziToast-color-yellow .iziToast-message,
.iziToast.iziToast-color-orange .iziToast-message,
.iziToast-theme-dark.iziToast-color-yellow .iziToast-message,
.iziToast-theme-dark.iziToast-color-orange .iziToast-message {
  color: #fffbeb !important;
}
.iziToast.iziToast-color-yellow > .iziToast-progressbar > div,
.iziToast.iziToast-color-orange > .iziToast-progressbar > div {
  background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
  box-shadow: 0 0 8px #fbbf24 !important;
}

/* 4. INFO (Blue / Cyan) */
.iziToast.iziToast-color-blue,
.iziToast-theme-dark.iziToast-color-blue,
.iziToast.iziToast-theme-dark.iziToast-color-blue {
  background: linear-gradient(135deg, rgba(12, 36, 68, 0.98) 0%, rgba(8, 18, 38, 0.98) 100%) !important;
  border: 1.5px solid rgba(96, 165, 250, 0.75) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.92), 0 0 28px rgba(59, 130, 246, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}
.iziToast.iziToast-color-blue .iziToast-title,
.iziToast-theme-dark.iziToast-color-blue .iziToast-title {
  color: #60a5fa !important;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.7) !important;
}
.iziToast.iziToast-color-blue .iziToast-message,
.iziToast-theme-dark.iziToast-color-blue .iziToast-message {
  color: #eff6ff !important;
}
.iziToast.iziToast-color-blue > .iziToast-progressbar > div {
  background: linear-gradient(90deg, #3b82f6, #60a5fa) !important;
  box-shadow: 0 0 8px #60a5fa !important;
}

/* 5. NEUTRAL / DEFAULT DARK */
.iziToast:not([class*="iziToast-color-"]) {
  background: linear-gradient(135deg, rgba(16, 24, 40, 0.98) 0%, rgba(10, 14, 22, 0.98) 100%) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.6) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.92), 0 0 24px rgba(245, 158, 11, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}
.iziToast:not([class*="iziToast-color-"]) .iziToast-title {
  color: #fbbf24 !important;
}
.iziToast:not([class*="iziToast-color-"]) .iziToast-message {
  color: #ffffff !important;
}

/* Glowing Icons */
.iziToast > .iziToast-body .iziToast-icon {
  font-size: 20px !important;
  width: 24px !important;
  height: 24px !important;
  margin-top: -12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.iziToast.iziToast-color-green .iziToast-icon {
  color: #34d399 !important;
  filter: drop-shadow(0 0 8px #34d399) !important;
}
.iziToast.iziToast-color-red .iziToast-icon {
  color: #f87171 !important;
  filter: drop-shadow(0 0 8px #f87171) !important;
}
.iziToast.iziToast-color-yellow .iziToast-icon,
.iziToast.iziToast-color-orange .iziToast-icon {
  color: #fbbf24 !important;
  filter: drop-shadow(0 0 8px #fbbf24) !important;
}
.iziToast.iziToast-color-blue .iziToast-icon {
  color: #60a5fa !important;
  filter: drop-shadow(0 0 8px #60a5fa) !important;
}

/* ============================================================
   GLOBAL LUXURY MODAL CLOSE BUTTON & CROSS ICON ARCHITECTURE
   ============================================================ */
.modal-close-btn,
.iziModal button[onclick*="iziModal('close')"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  user-select: none !important;
  touch-action: manipulation !important;
  box-sizing: border-box !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.modal-close-btn:hover,
.iziModal button[onclick*="iziModal('close')"]:hover {
  transform: scale(1.08) !important;
}

.modal-close-btn:active,
.iziModal button[onclick*="iziModal('close')"]:active {
  transform: scale(0.92) !important;
}

/* ============================================================
   GLOBAL PRESET CARD STAGE & SHINY LUXURY SKELETON LOADING SYSTEM
   Pre-renders card stages, borders, and frames with 100% visibility.
   Plays continuous shiny gold lottie-style shimmer wave while images load.
   Eliminates all black voids, flicker, and broken scroll states.
   ============================================================ */
@keyframes lottieShinyShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes lottieIconGlow {
  0%, 100% {
    transform: scale(0.92);
    opacity: 0.4;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.25));
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
    filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.65));
  }
}

/* Card Outer Shell - Always solid, never transparent or collapsed */
.lobby_game_card {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  position: relative !important;
  border-radius: 14px !important;
  background: #0f1523 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
}

.lobby_game_card:hover {
  border-color: rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 16px rgba(245, 158, 11, 0.25) !important;
}

/* Card Thumbnail Stage Box with Pre-loaded Stage & Shimmer */
.lobby_game_thumb_box,
.quick_poster_card {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #111726 !important;
  background-image: linear-gradient(
    90deg,
    #111726 0%,
    #182337 25%,
    #253550 50%,
    #182337 75%,
    #111726 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: lottieShinyShimmer 1.8s ease-in-out infinite !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.live-game-thumb {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  background: #111726 !important;
  background-image: linear-gradient(
    90deg,
    #111726 0%,
    #182337 25%,
    #253550 50%,
    #182337 75%,
    #111726 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: lottieShinyShimmer 1.8s ease-in-out infinite !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Pre-loaded Glowing Slot / Gamepad Silhouette Emblem inside Stage */
.lobby_game_thumb_box::before,
.quick_poster_card::before,
.live-game-thumb::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: 32px !important;
  height: 32px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'%3E%3Cpath d='M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-10 7H8v3H6v-3H3v-2h3V8h2v3h3v2zm4.5 2c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4-3c-.83 0-1.5-.67-1.5-1.5S20.17 9 21 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E") no-repeat center !important;
  background-size: contain !important;
  pointer-events: none !important;
  z-index: 1 !important;
  animation: lottieIconGlow 2s ease-in-out infinite !important;
  transition: opacity 0.3s ease !important;
}

/* When image loads: Turn off shimmer and placeholder cleanly */
.lobby_game_thumb_box.is_loaded,
.quick_poster_card.is_loaded,
.live-game-thumb.is_loaded {
  animation: none !important;
  background: #090d14 !important;
  background-image: none !important;
}

.lobby_game_thumb_box.is_loaded::before,
.quick_poster_card.is_loaded::before,
.live-game-thumb.is_loaded::before {
  opacity: 0 !important;
  display: none !important;
  animation: none !important;
}

/* Image reveal */
.lobby_game_img,
.live-game-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: relative !important;
  z-index: 2 !important;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s ease !important;
}

.lobby_game_img.is_loaded,
.lobby_game_thumb_box.is_loaded .lobby_game_img,
.live-game-thumb img.is_loaded,
.live-game-thumb.is_loaded img {
  opacity: 1 !important;
}

/* Card Caption Bar (Bengali Title & Studio Badge) */
.lobby_game_caption {
  width: 100% !important;
  padding: 6px 4px 7px 4px !important;
  background: #0c121e !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
}

.lobby_game_title {
  display: block !important;
  width: 100% !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  line-height: 1.25 !important;
  letter-spacing: 0.1px !important;
}

/* Promotions Modal Banner Shimmer & Preset Stage */
.promo-banner-canvas {
  width: 100% !important;
  aspect-ratio: 424 / 192 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #111726 !important;
  background-image: linear-gradient(
    90deg,
    #111726 0%,
    #182337 25%,
    #253550 50%,
    #182337 75%,
    #111726 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: lottieShinyShimmer 1.8s ease-in-out infinite !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
}

.promo-banner-canvas::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: 38px !important;
  height: 38px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'%3E%3Cpath d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.65-.5-.65C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76V14h2V8.76L15.38 12 17 10.83 14.92 8H20v6z'/%3E%3C/svg%3E") no-repeat center !important;
  background-size: contain !important;
  pointer-events: none !important;
  z-index: 1 !important;
  animation: lottieIconGlow 2s ease-in-out infinite !important;
}

.promo-banner-canvas.is_loaded {
  animation: none !important;
  background: #090d14 !important;
  background-image: none !important;
}

.promo-banner-canvas.is_loaded::before {
  opacity: 0 !important;
  display: none !important;
  animation: none !important;
}

.promo-canvas-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: relative !important;
  z-index: 2 !important;
  opacity: 0;
  transition: opacity 0.3s ease !important;
}

.promo-canvas-img.is_loaded,
.promo-banner-canvas.is_loaded .promo-canvas-img {
  opacity: 1 !important;
}

/* ==========================================================================
   Permanent Suppression of Tawk.to Floating Launcher / Logo Bubble
   (Ensures Tawk chat logo NEVER floats on screen across mobile & desktop)
   ========================================================================== */
iframe[style*="max-height: 60px"],
iframe[style*="max-height:60px"],
iframe[style*="max-height: 50px"],
iframe[style*="max-height:50px"],
iframe[style*="max-height: 45px"],
iframe[style*="max-height:45px"],
iframe[style*="min-height: 60px"],
iframe[style*="min-height:60px"],
iframe[style*="min-height: 45px"],
iframe[style*="min-height:45px"],
iframe[style*="max-width: 64px"],
iframe[style*="max-width:64px"],
iframe[style*="width: 64px"],
iframe[style*="width:64px"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0) !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* ==========================================================================
   Global Modal Centering — Ensure ALL Popups Display in Exact Screen Middle
   ========================================================================== */
.iziModal {
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    max-height: 92vh !important;
}

/* ==========================================================================
   Authentication & Action Modals — Mobile-First Guaranteed Width & Alignment
   ========================================================================== */
.auth_unified_modal,
#auth-modal,
#login-modal,
#register-modal,
#forgot-password-modal {
    width: min(calc(100vw - 24px), 440px) !important;
    max-width: 440px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#support-modal {
    width: min(calc(100vw - 24px), 480px) !important;
    max-width: 480px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#withdraw-modal,
#deposit-modal {
    width: min(calc(100vw - 20px), 500px) !important;
    max-width: 500px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#catalog-modal {
    width: min(calc(100vw - 20px), 760px) !important;
    max-width: 760px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#promotions-modal {
    width: min(calc(100vw - 20px), 860px) !important;
    max-width: 860px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 640px) {
    .iziModal {
        max-width: calc(100vw - 20px) !important;
    }
    .auth_unified_modal,
    #auth-modal,
    #login-modal,
    #register-modal,
    #forgot-password-modal,
    #support-modal {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }
    #withdraw-modal,
    #deposit-modal,
    #catalog-modal,
    #promotions-modal,
    #wheel-modal,
    #egg-modal,
    #fanus-modal,
    #gamify-condition-modal,
    #fanus-reveal-modal {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }
}

/* ==========================================================================
   Universal Element Spacing Protection: No icon touches text anywhere
   ========================================================================== */
.iziModal button,
.iziModal a,
.iziModal label,
.auth_unified_modal button,
.auth_unified_modal a {
    -webkit-font-smoothing: antialiased;
}

.iziModal button i,
.iziModal button svg,
.iziModal a i,
.iziModal a svg,
button i,
button svg,
a i,
a svg,
.sb-nav-item i,
.sb-nav-item svg,
.mobile-nav-tab i,
.mobile-nav-tab svg,
.console_tool_btn i,
.console_tool_btn svg,
.lobby_sort_tab_btn i,
.lobby_sort_tab_btn svg,
.day-card-btn i,
.day-card-btn svg,
.stat-block-label i,
.ui-section-label i,
.providers_modal_container i,
.providers_modal_container svg,
.vip_priv_icon i,
.vip_gauge_header i,
.cr_tab_btn i,
.cr_eco_link i,
.vip_tab_pill i,
.vip_action_btn i,
.deposit-ref-pill i,
.promo-cat-pill i {
    flex-shrink: 0 !important;
}

/* Ensure proper gap between icon and sibling text */
.cr_tab_btn,
.cr_eco_link,
.vip_tab_pill,
.vip_action_btn,
.deposit-ref-pill,
.promo-cat-pill,
.lobby_sort_tab_btn,
.stat-block-label,
.ui-section-label h3 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Prevent accidental text clipping and collision in all flex badges */
.badge-pill,
.status-pill,
.tier-capsule {
    min-width: 0;
    box-sizing: border-box;
}

/* Additional deep protection for PWA, Auth, and profile icons */
.pwa-badge-btn i,
.pwa-badge-btn svg,
.pwa-btn-install i,
.pwa-btn-apk-mega i,
.pwa-platform-tab i,
.pwa-platform-tab svg,
.pwa-feat-icon i,
.pwa-feat-icon svg,
.vip_announce_bar i,
.vip_announce_bar svg,
.auth_field_icon svg,
.auth_field_prefix svg,
.auth_field_action svg,
.auth_reg_submit_btn svg,
.auth_login_submit_btn svg,
.promo-btn i,
.promo-btn svg {
    flex-shrink: 0 !important;
}

.pwa-platform-tab,
.pwa-badge-title,
.pwa-btn-install,
.auth_login_submit_btn,
.auth_reg_submit_btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ==========================================================================
   Retina Hairlines (0.5px) Engine & Luxury Asian iGaming Tokens
   ========================================================================== */
html.hairlines .border-hairline,
html.hairlines .auto_notify_card,
html.hairlines .quick_badge_card,
html.hairlines .pwa-badge-btn,
html.hairlines .dock-capsule,
html.hairlines .dock-badge-circle,
html.hairlines .vip_action_panel,
html.hairlines .mobile-bottom-nav-container,
html.hairlines #member-app-header {
    border-width: 0.5px !important;
}

html.hairlines .hairline-border-t { border-top-width: 0.5px !important; }
html.hairlines .hairline-border-b { border-bottom-width: 0.5px !important; }
html.hairlines .mobile-nav-divider { width: 0.5px !important; }

/* Luxury Serif Typography & High-Stakes Jackpots */
.font-lora {
    font-family: 'Lora', Georgia, serif !important;
}

.jackpot-display-lora {
    font-family: 'Lora', Georgia, serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    background: linear-gradient(180deg, #FFF9D2 0%, #FFD700 45%, #F59E0B 80%, #B45309 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.45)) !important;
}

/* Mint Cyan (#8FDBD2) Luxury Casino Accents */
.text-mint-cyan {
    color: #8FDBD2 !important;
}
.border-mint-cyan {
    border-color: rgba(143, 219, 210, 0.45) !important;
}
.bg-mint-cyan-subtle {
    background-color: rgba(143, 219, 210, 0.12) !important;
}
.bg-mint-cyan-glow {
    background: radial-gradient(circle, rgba(143, 219, 210, 0.22) 0%, transparent 70%) !important;
}

/* Hot RTP & High-Probability Winner Tags */
.badge-rtp-hot {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.45) 100%) !important;
    border: 0.5px solid rgba(239, 68, 68, 0.6) !important;
    color: #fca5a5 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.2px !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   Profile / Member Hub Screen Defense: Absolute Suppression of Colliding Floating Overlays
   ========================================================================== */
body.profile-screen #wgp-floating,
body.profile-screen #floating-gamify-dock,
body.profile-screen #floating-winner-notify,
body.profile-screen #pwa-floating-badge,
body.profile-screen .fanus-floating-overlay,
body.profile-screen .auto_notify_dock,
body.profile-screen .floating-gamify-dock {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    z-index: -9999 !important;
}