/* ============================================================
   STYLE V3 — Premium Gaming Theme (2026)
   Immersive 3D dark theme with red accents.
   Animated backgrounds, glassmorphism, cinematic effects.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&display=swap');

/* ── Theme Variables ────────────────────────────────────────── */
:root {
  --v3-bg-deep:       #00051a;
  --v3-bg-body:       #01091a;
  --v3-bg-card:       #0d1b39;
  --v3-bg-card-hover: #1e274b;
  --v3-bg-section:    #06122c;
  --v3-bg-input:      #040d20;
  --v3-bg-glass:      rgba(4,10,42,.7);
  --v3-border:        rgba(255,255,255,.08);
  --v3-border-accent: rgba(240,178,50,.3);
  --v3-border-glow:   rgba(240,178,50,.5);

  --v3-accent:        #f0b232;
  --v3-accent-light:  #ffd46e;
  --v3-accent-dark:   #c48a14;
  --v3-accent-glow:   rgba(240,178,50,.25);
  --v3-accent-neon:   rgba(255,212,110,.55);

  /* Keep old variable names for backwards compat */
  --v3-gold:          var(--v3-accent);
  --v3-gold-light:    var(--v3-accent-light);
  --v3-gold-dark:     var(--v3-accent-dark);
  --v3-gold-glow:     var(--v3-accent-glow);
  --v3-gold-neon:     var(--v3-accent-neon);

  --v3-blue:          #014cc9;
  --v3-blue-light:    #0195ff;
  --v3-blue-dark:     #02205f;
  --v3-blue-glow:     rgba(1,76,201,.25);

  --v3-cyan:          #03ffd8;
  --v3-cyan-glow:     rgba(3,255,216,.15);
  --v3-purple:        #7c4dff;
  --v3-purple-glow:   rgba(124,77,255,.15);

  --v3-text:          #ffffff;
  --v3-text-secondary:#c8d0e8;
  --v3-text-muted:    #b0b8d0;
  --v3-text-dim:      #6a7090;

  --v3-green:         #10b981;
  --v3-success:       #00e676;
  --v3-danger:        #ff4d6a;
  --v3-info:          #0195ff;
  --v3-warning:       #ffab00;

  --v3-radius:        12px;
  --v3-radius-sm:     8px;
  --v3-radius-lg:     18px;
  --v3-radius-xl:     24px;
  --v3-shadow:        0 8px 32px rgba(0,0,0,.5);
  --v3-shadow-accent: 0 4px 24px rgba(240,178,50,.18);
  --v3-shadow-gold:   var(--v3-shadow-accent);
  --v3-shadow-deep:   0 12px 48px rgba(0,0,0,.6);
  --v3-transition:    .3s cubic-bezier(.4,0,.2,1);
  --v3-transition-fast: .15s ease;
  --v3-transition-slow: .5s cubic-bezier(.25,.8,.25,1);

  --v3-font:          'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --v3-font-display:  'Open24DisplaySt', 'Courier New', monospace;

  --v3-nav-height:    56px;
  --v3-topbar-height: 36px;
  --v3-bottom-nav-h:  62px;
}

/* ── Global ─────────────────────────────────────────────────── */
body.v3-theme {
  background: var(--v3-bg-body) !important;
  color: var(--v3-text) !important;
  font-family: var(--v3-font) !important;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 3D Animated Background ─────────────────────────────────── */
body.v3-theme::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(800px circle at 20% 30%, rgba(1,76,201,.1) 0%, transparent 60%),
    radial-gradient(600px circle at 80% 70%, rgba(240,178,50,.06) 0%, transparent 60%),
    radial-gradient(400px circle at 50% 50%, rgba(1,149,255,.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: v3-bg-drift 20s ease-in-out infinite alternate;
}
body.v3-theme::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(240,178,50,.15) 50%, transparent 50%),
    radial-gradient(1px 1px at 30% 65%, rgba(0,229,255,.12) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 55% 15%, rgba(255,255,255,.08) 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 80%, rgba(124,77,255,.1) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 85% 35%, rgba(240,178,50,.12) 50%, transparent 50%),
    radial-gradient(1px 1px at 45% 90%, rgba(255,255,255,.06) 50%, transparent 50%),
    radial-gradient(1px 1px at 15% 55%, rgba(0,229,255,.08) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 90% 10%, rgba(255,255,255,.07) 50%, transparent 50%),
    radial-gradient(1px 1px at 60% 45%, rgba(240,178,50,.08) 50%, transparent 50%),
    radial-gradient(1px 1px at 25% 85%, rgba(124,77,255,.07) 50%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: v3-stars-twinkle 8s ease-in-out infinite alternate;
}

@keyframes v3-bg-drift {
  0% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.05) translate(-1%, 1%); }
  100% { transform: scale(1) translate(1%, -1%); }
}
@keyframes v3-stars-twinkle {
  0% { opacity: .7; }
  50% { opacity: 1; }
  100% { opacity: .5; }
}

/* 3D Floating orbs */
.v3-3d-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  perspective: 800px;
}
.v3-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: v3-orb-float 15s ease-in-out infinite;
  will-change: transform;
}
.v3-orb:nth-child(1) {
  width: 300px; height: 300px;
  background: rgba(240,178,50,.08);
  top: 10%; left: 5%;
  animation-duration: 18s;
}
.v3-orb:nth-child(2) {
  width: 250px; height: 250px;
  background: rgba(124,77,255,.06);
  top: 60%; right: 10%;
  animation-duration: 22s;
  animation-delay: -5s;
}
.v3-orb:nth-child(3) {
  width: 200px; height: 200px;
  background: rgba(0,229,255,.05);
  bottom: 15%; left: 40%;
  animation-duration: 25s;
  animation-delay: -10s;
}

@keyframes v3-orb-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg); }
  25% { transform: translate3d(30px, -40px, 20px) rotateX(5deg); }
  50% { transform: translate3d(-20px, 20px, -10px) rotateX(-3deg); }
  75% { transform: translate3d(15px, 30px, 15px) rotateX(4deg); }
}

.v3-theme * { box-sizing: border-box; }
.v3-theme img { max-width: 100%; height: auto; }
.v3-theme a { color: var(--v3-gold); text-decoration: none; transition: color var(--v3-transition); }
.v3-theme a:hover { color: var(--v3-gold-light); text-decoration: none; }

/* ── Top Bar ────────────────────────────────────────────────── */
.v3-sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}
.v3-topbar {
  display: none;
  background: rgba(0,5,26,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(1,76,201,.2);
  height: var(--v3-topbar-height);
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--v3-text-muted);
  padding: 0 16px;
  position: relative;
  z-index: 9990;
}
.v3-topbar .v3-topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.v3-topbar .v3-livechat-link {
  color: var(--v3-gold);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.v3-topbar .v3-livechat-link:hover { color: var(--v3-gold-light); }
.v3-topbar .v3-livechat-link .bi { font-size: 14px; }

/* ── Auth Bar ───────────────────────────────────────────────── */
.v3-authbar {
  background: linear-gradient(180deg, #031a54 0%, #02113a 62%, #020a28 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 14px;
  position: relative;
  z-index: 99;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.v3-authbar .v3-authbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  gap: 8px;
}
.v3-authbar .v3-logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
}
.v3-authbar .v3-auth-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}
.v3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 22px;
  border-radius: var(--v3-radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  border: none;
  cursor: pointer;
  transition: all var(--v3-transition);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.v3-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1);
}
.v3-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
  opacity: 0;
  transition: opacity var(--v3-transition);
}
.v3-btn:hover::before { opacity: 1; }
.v3-btn-login {
  background: linear-gradient(180deg, #1a6fff 0%, #014cc9 50%, #02205f 100%);
  border: 1.5px solid rgba(1,149,255,.4);
  color: #ffffff !important;
  box-shadow: 0 3px 0 #011845, 0 5px 14px rgba(1,76,201,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.v3-btn-login:hover {
  background: linear-gradient(180deg, #3d8bff 0%, #0195ff 50%, #014cc9 100%);
  color: #ffffff !important;
  box-shadow: 0 3px 0 #011845, 0 8px 24px rgba(1,149,255,.5), inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(-1px);
}
.v3-btn-login:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #011845, 0 1px 4px rgba(1,76,201,.3), inset 0 2px 4px rgba(0,0,0,.2);
}
.v3-btn-register {
  background: linear-gradient(180deg, #ffd46e 0%, #f0b232 50%, #c48a14 100%);
  color: #1a1a2e !important;
  box-shadow: 0 3px 0 #8a6010, 0 5px 18px rgba(240,178,50,.35), inset 0 1px 0 rgba(255,255,255,.3);
}
.v3-btn-register:hover {
  background: linear-gradient(180deg, #ffe08a 0%, #ffd46e 50%, #f0b232 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #8a6010, 0 10px 30px rgba(240,178,50,.5), inset 0 1px 0 rgba(255,255,255,.35);
  color: #1a1a2e !important;
}
.v3-btn-register:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #8a6010, 0 1px 4px rgba(240,178,50,.3), inset 0 2px 4px rgba(0,0,0,.25);
}
.v3-btn-success {
  background: linear-gradient(180deg, #00e676 0%, #00c853 50%, #00a844 100%);
  color: #fff;
  border: 1.5px solid rgba(0,200,83,.4);
  box-shadow: 0 3px 0 #006d2e, 0 5px 14px rgba(0,200,83,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
.v3-btn-success:hover {
  background: linear-gradient(180deg, #33ff99 0%, #00e676 50%, #00c853 100%);
  box-shadow: 0 4px 0 #006d2e, 0 8px 22px rgba(0,200,83,.45), inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(-1px);
}
.v3-btn-success:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #006d2e, 0 1px 4px rgba(0,200,83,.2), inset 0 2px 4px rgba(0,0,0,.2);
}
.v3-btn-primary {
  background: linear-gradient(180deg, #ff9100 0%, #ff6d00 50%, #e65100 100%);
  color: #fff;
  border: 1.5px solid rgba(255,109,0,.4);
  box-shadow: 0 3px 0 #993d00, 0 5px 14px rgba(255,109,0,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
.v3-btn-primary:hover {
  background: linear-gradient(180deg, #ffab40 0%, #ff9100 50%, #ff6d00 100%);
  box-shadow: 0 4px 0 #993d00, 0 8px 22px rgba(255,109,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(-1px);
}
.v3-btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #993d00, 0 1px 4px rgba(255,109,0,.2), inset 0 2px 4px rgba(0,0,0,.2);
}
.v3-btn-sm { padding: 6px 14px; font-size: 12px; }

/* User dropdown when logged in */
.v3-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v3-user-balance {
  background: var(--v3-bg-card);
  border: 1px solid var(--v3-border-accent);
  border-radius: var(--v3-radius-sm);
  padding: 6px 12px;
  color: var(--v3-gold);
  font-weight: 600;
  font-size: 13px;
}
.v3-user-dropdown .dropdown-toggle {
  background: var(--v3-bg-card);
  border: 1px solid var(--v3-border);
  color: var(--v3-text);
  border-radius: var(--v3-radius-sm);
  padding: 6px 12px;
  font-size: 13px;
}
.v3-user-dropdown .dropdown-menu {
  background: var(--v3-bg-card);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius);
  box-shadow: var(--v3-shadow);
  padding: 4px;
}
.v3-user-dropdown .dropdown-item {
  color: var(--v3-text);
  border-radius: var(--v3-radius-sm);
  padding: 8px 12px;
  font-size: 13px;
}
.v3-user-dropdown .dropdown-item:hover {
  background: rgba(240,178,50,.1);
  color: var(--v3-gold);
}

/* ── Main Navigation ────────────────────────────────────────── */
.v3-navbar {
  background: linear-gradient(180deg, #012769 0%, #001f5a 55%, #001542 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: none;
  padding: 3px 0 4px;
  position: relative;
  z-index: 90;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}

/* Scroll indicator - gradient fade overlay */
.v3-navbar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;
  background: linear-gradient(270deg, #001542 20%, transparent);
  z-index: 5;
  pointer-events: none;
  transition: opacity .3s;
}
.v3-navbar.v3-nav-end::after { opacity: 0; }

/* Scroll indicator buttons */
.v3-nav-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 1px));
  width: 28px;
  height: 34px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  transition: all .3s;
  padding: 0;
  background: rgba(0,0,0,.25);
}
.v3-nav-scroll-btn .bi { pointer-events: none; }
.v3-nav-scroll-left {
  left: 8px;
}
.v3-nav-scroll-right {
  right: 8px;
}
.v3-nav-scroll-btn:hover {
  color: #fff;
  background: rgba(0,0,0,.45);
}
.v3-nav-scroll-right.v3-nav-hint {
  animation: v3NavScrollHint 1.2s ease-in-out 3;
}
@keyframes v3NavScrollHint {
  0%, 100% { transform: translateY(calc(-50% - 1px)) translateX(0); }
  50% { transform: translateY(calc(-50% - 1px)) translateX(-4px); }
}
.v3-navbar .v3-nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-right: 52px;
  padding-left: 52px;
}
.v3-navbar .v3-nav-inner::-webkit-scrollbar { display: none; }

.v3-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2px;
  white-space: nowrap;
  transition: all var(--v3-transition);
  border-bottom: none;
  margin-bottom: 0;
  position: relative;
  text-decoration: none !important;
  min-width: 90px;
  text-align: center;
}
.v3-nav-item:hover,
.v3-nav-item.active {
  color: #fff !important;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
}
.v3-nav-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 24% 20%, rgba(255,255,255,.35) 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,0) 58%),
    linear-gradient(160deg, #1a3b94 0%, #0e246a 55%, #0a174a 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.2),
    inset 0 -4px 8px rgba(0,0,0,.45),
    0 8px 14px rgba(0,0,0,.3),
    0 0 0 1px rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.v3-nav-icon-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.35));
  transition: transform .25s ease;
}
.v3-nav-item:hover .v3-nav-icon-wrap,
.v3-nav-item.active .v3-nav-icon-wrap {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.24),
    inset 0 -5px 10px rgba(0,0,0,.5),
    0 10px 18px rgba(0,0,0,.4),
    0 0 18px rgba(94,172,255,.26);
}
.v3-nav-item:hover .v3-nav-icon-img,
.v3-nav-item.active .v3-nav-icon-img {
  transform: scale(1.06);
}
/* Bootstrap Icon nav items (no webp image) */
.v3-nav-bi-icon {
  font-size: 24px;
  color: #c8deff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
  transition: transform .25s ease, color .25s ease;
}
.v3-nav-item:hover .v3-nav-bi-icon,
.v3-nav-item.active .v3-nav-bi-icon {
  transform: scale(1.1);
  color: #fff;
}
.v3-nav-label {
  line-height: 1;
  font-size: 11px;
  color: #f4f8ff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.v3-nav-item .v3-badge-hot {
  background: var(--v3-danger);
  color: #fff;
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
  animation: v3-pulse 2s infinite;
  position: absolute;
  top: 2px;
  right: 2px;
}

@keyframes v3-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}

/* ── Welcome Marquee ────────────────────────────────────────── */
.v3-marquee {
  background: linear-gradient(180deg, #f2f3f6 0%, #e6e8ee 100%);
  padding: 6px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.v3-marquee-content {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  gap: 8px;
}
.v3-marquee-icon {
  font-size: 13px;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
}
.v3-marquee-icon::before {
  color: #101010;
  -webkit-text-fill-color: #101010;
  text-shadow: none;
}
.v3-marquee marquee {
  font-size: 14px;
  color: #101010;
  font-weight: 500;
}

/* ── Slider / Carousel ──────────────────────────────────────── */
.v3-slider-section {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}
.v3-slider-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(transparent, var(--v3-bg-body));
  z-index: 2;
  pointer-events: none;
}
.v3-slider-section .carousel-item img {
  width: 100%;
  aspect-ratio: 390 / 146.66;
  object-fit: cover;
  border-radius: 0;
}
.v3-slider-section .carousel-indicators li,
.v3-slider-section .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  border: 1px solid rgba(255,255,255,.2);
  margin: 0 4px;
  transition: all var(--v3-transition);
}
.v3-slider-section .carousel-indicators .active {
  background: var(--v3-gold);
  border-color: var(--v3-gold);
  box-shadow: 0 0 8px rgba(240,178,50,.4);
  transform: scale(1.2);
}

/* Carousel prev/next arrows */
.v3-slider-section .carousel-control-prev,
.v3-slider-section .carousel-control-next {
  width: 44px;
  height: 44px;
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  background: rgba(0,0,0,.45);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s;
  z-index: 3;
}
.v3-slider-section .carousel-control-prev { left: 16px; }
.v3-slider-section .carousel-control-next { right: 16px; }
.v3-slider-section:hover .carousel-control-prev,
.v3-slider-section:hover .carousel-control-next { opacity: 1; }
.v3-slider-section .carousel-control-prev-icon,
.v3-slider-section .carousel-control-next-icon {
  width: 20px;
  height: 20px;
}

/* ── Running Text (Promo) ───────────────────────────────────── */
.v3-running-text {
  background: linear-gradient(90deg, var(--v3-bg-deep), var(--v3-bg-section));
  padding: 10px 0;
  overflow: hidden;
}
.v3-running-text-inner {
  display: flex;
  animation: v3-scroll-left 35s linear infinite;
  white-space: nowrap;
  gap: 40px;
}
@keyframes v3-scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.v3-running-text-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--v3-text-muted);
  font-size: 12px;
  flex-shrink: 0;
}
.v3-running-text-item .bi { color: var(--v3-gold); }

/* ── Progressive Jackpot — Clean Frame Style ────────────────── */
.v3-jp-wrapper {
  text-align: center;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(0,5,26,.6), transparent);
}
.v3-jp-container {
  position: relative;
  display: inline-block;
  max-width: 600px;
  width: 100%;
  overflow: hidden;
}
.v3-jp-bg-img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: lighten;
}
.v3-jp-amount-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4%;
  z-index: 2;
}
.v3-jp-number {
  font-family: 'Open24DisplaySt', 'Orbitron', var(--v3-font-display), monospace;
  font-size: clamp(18px, 5vw, 42px);
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 40%, #d0d0d0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: clamp(2px, .6vw, 6px);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.7)) drop-shadow(0 2px 4px rgba(0,0,0,.8));
  line-height: 1;
  transition: transform .15s ease;
}
.v3-jp-number.v3-jp-tick {
  transform: scale(1.04);
}

/* ── Section Layout ─────────────────────────────────────────── */
.v3-section {
  padding: 24px 16px;
  max-width: 1200px;
  margin: 10px auto;
  background: linear-gradient(145deg, rgba(2,14,50,.75), rgba(0,5,26,.9));
  border: 1px solid rgba(1,76,201,.2);
  border-radius: 12px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.03);
}
.v3-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--v3-accent), transparent);
  border-radius: 12px 12px 0 0;
  opacity: .5;
}
.v3-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--v3-border);
  position: relative;
}
.v3-section-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--v3-gold), transparent);
  border-radius: 1px;
}
.v3-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #f4f8ff;
  font-family: 'Chakra Petch', var(--v3-font), sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.v3-section-title .bi {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #bfe7ff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.44) 0%, rgba(255,255,255,.08) 32%, rgba(255,255,255,0) 58%),
    linear-gradient(160deg, #2147a6 0%, #143680 55%, #0a174a 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.2),
    inset 0 -4px 8px rgba(0,0,0,.46),
    0 5px 12px rgba(0,0,0,.34);
  filter: drop-shadow(0 0 5px rgba(120,220,255,.28));
}
.v3-hot-title-icon {
  position: relative;
}
.v3-hot-title-icon::before {
  background: linear-gradient(180deg, #fff9d1 0%, #ffe39c 35%, #ffc869 68%, #f8a642 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 3px 8px rgba(255,184,76,.5), 0 0 8px rgba(255,233,149,.3);
}
.v3-hot-title-icon::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 5px;
  right: 5px;
  height: 34%;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0));
  pointer-events: none;
}
.v3-section-title .bi-star-fill,
.v3-section-title .bi-patch-check-fill {
  color: #ffe3a8;
  filter: drop-shadow(0 0 6px rgba(255,211,125,.25));
}
.v3-section-title .bi-newspaper,
.v3-section-title .bi-info-circle,
.v3-section-title .bi-clock-history {
  color: #bff0ff;
  filter: drop-shadow(0 0 6px rgba(127,222,255,.28));
}
.v3-section-link {
  font-size: 13px;
  color: #74dbff;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all var(--v3-transition);
}
.v3-section-link:hover {
  color: #c8f1ff;
  gap: 8px;
}

/* ── Game Cards Grid ────────────────────────────────────────── */
/* Horizontal scroll games row */
.v3-games-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--v3-gold) transparent;
}
.v3-games-row::-webkit-scrollbar { height: 4px; }
.v3-games-row::-webkit-scrollbar-track { background: transparent; }
.v3-games-row::-webkit-scrollbar-thumb { background: var(--v3-gold); border-radius: 4px; }
.v3-game-item {
  flex: 0 0 130px;
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--v3-bg-card);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--v3-border);
  transition: all .25s ease;
  position: relative;
}
.v3-game-item::after {
  content: '\F4F4';
  font-family: 'bootstrap-icons';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(100% - 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #fff;
  background: rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  border-radius: 10px 10px 0 0;
}
.v3-game-item:hover::after { opacity: 1; }
.v3-game-item:hover {
  border-color: var(--v3-border-accent);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.4), 0 0 8px rgba(240,178,50,.15);
}
.v3-game-item-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background: var(--v3-bg-section);
}
.v3-game-item-name {
  padding: 6px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--v3-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .3px;
}
.v3-game-hot-corner {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .25px;
  color: #fff;
  background:
    radial-gradient(circle at 24% 20%, rgba(255,255,255,.4) 0%, rgba(255,255,255,.1) 28%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg, #ffb86b 0%, #ff7b32 34%, #ff4b1f 62%, #d81725 100%);
  border: 1px solid rgba(255,245,225,.45);
  box-shadow:
    0 5px 12px rgba(0,0,0,.38),
    0 0 10px rgba(255,110,30,.28),
    inset 0 1px 1px rgba(255,255,255,.28),
    inset 0 -2px 4px rgba(130,0,0,.3);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease;
}
.v3-game-hot-corner .bi {
  font-size: 9px;
  line-height: 1;
  color: #ffe9bf;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.34));
}
.v3-game-item:hover .v3-game-hot-corner {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 7px 14px rgba(0,0,0,.42),
    0 0 14px rgba(255,120,35,.35),
    inset 0 1px 1px rgba(255,255,255,.3),
    inset 0 -2px 4px rgba(130,0,0,.32);
}
/* Badge HOT standalone */
.v3-badge-hot {
  background: linear-gradient(180deg, #00b4ff 0%, #008de4 58%, #006bc9 100%);
  color: #fff;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  animation: v3-pulse 2s infinite;
  vertical-align: middle;
  margin-left: 4px;
  border: 1px solid rgba(220,244,255,.35);
  box-shadow: 0 3px 8px rgba(0,80,160,.35), inset 0 1px 0 rgba(255,255,255,.3);
}

/* Payment marquee: bg-white p-1 ml-3 pattern */
.pt-2 { padding-top: .5rem; }
.bg-white { background-color: #fff !important; border-radius: 6px; }
.p-1 { padding: .25rem !important; }
.ml-3 { margin-left: 1rem !important; }

/* Provider marquee logos */
.v3-provider-marquee-img {
  height: 36px;
  width: auto;
  object-fit: contain;
  opacity: .7;
  filter: grayscale(30%);
  transition: all .25s ease;
  background: rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 4px 6px;
}
.v3-provider-marquee-img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* Old scroll layout (kept for compatibility) */
.v3-games-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--v3-gold) transparent;
}
.v3-games-scroll::-webkit-scrollbar { height: 4px; }
.v3-games-scroll::-webkit-scrollbar-track { background: transparent; }
.v3-games-scroll::-webkit-scrollbar-thumb { background: var(--v3-gold); border-radius: 4px; }
.v3-games-scroll .v3-game-card {
  flex: 0 0 140px;
  scroll-snap-align: start;
}

.v3-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.v3-game-card {
  background: var(--v3-bg-card);
  border-radius: var(--v3-radius);
  overflow: hidden;
  transition: all var(--v3-transition);
  border: 1px solid var(--v3-border);
  position: relative;
  transform-style: preserve-3d;
  perspective: 500px;
}
.v3-game-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--v3-radius);
  background: linear-gradient(135deg, rgba(240,178,50,.08), transparent, rgba(124,77,255,.05));
  opacity: 0;
  transition: opacity var(--v3-transition);
  pointer-events: none;
}
.v3-game-card:hover {
  transform: translateY(-6px) rotateX(2deg);
  border-color: var(--v3-border-accent);
  box-shadow:
    0 12px 40px rgba(0,0,0,.4),
    0 0 20px rgba(240,178,50,.1);
}
.v3-game-card:hover::after { opacity: 1; }
.v3-game-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.v3-game-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background: var(--v3-bg-section);
  transition: transform .4s ease;
}
.v3-game-card:hover .v3-game-card-img {
  transform: scale(1.05);
}
.v3-game-card-name {
  padding: 10px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--v3-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}
.v3-game-card-provider {
  font-size: 10px;
  color: var(--v3-text-muted);
  text-align: center;
  padding: 0 10px 8px;
}
/* Play overlay on hover */
.v3-game-card .v3-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity var(--v3-transition);
  z-index: 2;
  pointer-events: none;
}
.v3-game-card:hover .v3-play-overlay { opacity: 1; }
.v3-play-btn-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(240,178,50,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  font-size: 20px;
  box-shadow: 0 0 30px rgba(240,178,50,.4);
  animation: v3-play-bounce .8s ease-in-out infinite alternate;
}
@keyframes v3-play-bounce {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

/* Featured games (first 2 larger) */
.v3-games-featured {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.v3-game-featured {
  background: var(--v3-bg-card);
  border-radius: var(--v3-radius);
  overflow: hidden;
  border: 1px solid var(--v3-border);
  transition: all var(--v3-transition);
  position: relative;
}
.v3-game-featured:hover {
  border-color: var(--v3-gold);
  box-shadow: 0 8px 32px rgba(240,178,50,.2);
  transform: translateY(-4px);
}
.v3-game-featured img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.v3-game-featured:hover img { transform: scale(1.04); }
.v3-game-featured .v3-game-card-name {
  padding: 12px;
  font-size: 13px;
}

/* ── Togel Section — 3D Cards ───────────────────────────────── */
.v3-togel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  perspective: 1200px;
}
.v3-togel-card {
  position: relative;
  background: linear-gradient(145deg, rgba(4,10,42,.9), rgba(8,13,36,.95));
  border: 1px solid rgba(240,178,50,.15);
  border-radius: var(--v3-radius);
  text-align: center;
  padding: 16px 10px;
  transition: all var(--v3-transition);
  transform-style: preserve-3d;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* 3D inner glow */
.v3-togel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--v3-radius);
  background:
    radial-gradient(ellipse at 30% 0%, rgba(240,178,50,.1) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 100%, rgba(0,230,118,.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
/* Moving shine effect */
.v3-togel-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255,255,255,.03) 45%,
    rgba(255,255,255,.05) 50%,
    rgba(255,255,255,.03) 55%,
    transparent 60%
  );
  transform: rotate(0deg);
  animation: v3-togel-shine 6s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes v3-togel-shine {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}
.v3-togel-card:hover {
  transform: translateY(-4px) rotateX(3deg) rotateY(-2deg);
  border-color: rgba(240,178,50,.35);
  box-shadow:
    0 10px 30px rgba(0,0,0,.4),
    0 0 15px rgba(240,178,50,.1),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.v3-togel-card > * { position: relative; z-index: 1; }

.v3-togel-market {
  font-size: 10px;
  font-weight: 700;
  color: var(--v3-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(240,178,50,.2);
}
.v3-togel-number {
  font-size: 26px;
  font-weight: 800;
  background: linear-gradient(180deg, #00ff87, #00e676, #00c853);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 4px;
  filter: drop-shadow(0 0 8px rgba(0,230,118,.25));
  animation: v3-number-glow 3s ease-in-out infinite;
  line-height: 1.2;
}
@keyframes v3-number-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(0,230,118,.2)); }
  50% { filter: drop-shadow(0 0 16px rgba(0,230,118,.35)); }
}
.v3-togel-date {
  font-size: 10px;
  color: var(--v3-text-dim);
  margin-top: 6px;
}

/* Togel section 3D background wrapper */
.v3-togel-section-wrap {
  position: relative;
  overflow: hidden;
}
.v3-togel-section-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(0,230,118,.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(240,178,50,.04) 0%, transparent 50%);
  pointer-events: none;
}

/* ── Service Features ───────────────────────────────────────── */
.v3-services-section {
  background: linear-gradient(180deg, var(--v3-bg-section), rgba(5,8,22,.6));
  border-top: 1px solid var(--v3-border);
  border-bottom: 1px solid var(--v3-border);
  position: relative;
}
.v3-services-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(240,178,50,.03) 0%, transparent 60%);
  pointer-events: none;
}
.v3-service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.v3-service-card {
  background: linear-gradient(145deg, var(--v3-bg-card), rgba(4,10,42,.6));
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius);
  padding: 24px 20px;
  text-align: center;
  transition: all var(--v3-transition);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 0 rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06);
}
.v3-service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--v3-gold), transparent);
  opacity: 0;
  transition: opacity var(--v3-transition);
}
.v3-service-card:hover {
  border-color: var(--v3-border-accent);
  box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 12px 40px rgba(240,178,50,.15), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(-4px);
}
.v3-service-card:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.15);
}
.v3-service-card:hover::before { opacity: 1; }
.v3-service-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(240,178,50,.15), rgba(240,178,50,.05));
  border: 1px solid rgba(240,178,50,.2);
  color: var(--v3-gold);
  font-size: 22px;
  box-shadow: 0 0 20px rgba(240,178,50,.08);
}
.v3-service-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--v3-text);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.v3-service-desc {
  font-size: 12px;
  color: var(--v3-text-muted);
}
.v3-service-time {
  font-size: 34px;
  font-weight: 800;
  background: linear-gradient(180deg, var(--v3-gold-light), var(--v3-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin: 10px 0 2px;
  filter: drop-shadow(0 0 8px rgba(240,178,50,.15));
}
.v3-service-time span {
  font-size: 14px;
  font-weight: 600;
}

/* ── Download Apps ──────────────────────────────────────────── */
.v3-download-section {
  background: linear-gradient(135deg, rgba(17,28,61,.8), rgba(14,21,48,.9));
  border: 1px solid var(--v3-border-accent);
  border-radius: var(--v3-radius-lg);
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 24px 0;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.v3-download-section::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(240,178,50,.08) 0%, transparent 60%);
  pointer-events: none;
}
.v3-download-img {
  flex-shrink: 0;
  width: 120px;
}
.v3-download-img img {
  width: 100%;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
}
.v3-download-text h4 {
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.v3-download-text p {
  color: var(--v3-text-muted);
  font-size: 13px;
  margin-bottom: 12px;
}

/* ── Payment Methods (now handled by V3.5 .v3-payment-logos) ── */

/* ── Social Links ───────────────────────────────────────────── */
.v3-social-links {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0;
}
.v3-social-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(145deg, var(--v3-bg-card), rgba(4,10,42,.5));
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius);
  color: var(--v3-text);
  font-size: 12px;
  font-weight: 600;
  transition: all var(--v3-transition);
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 0 rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.06);
}
.v3-social-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(240,178,50,.08), transparent);
  opacity: 0;
  transition: opacity var(--v3-transition);
}
.v3-social-link:hover {
  border-color: var(--v3-gold);
  color: var(--v3-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(240,178,50,.1);
}
.v3-social-link:hover::before { opacity: 1; }
.v3-social-link .bi { font-size: 16px; position: relative; z-index: 1; }
.v3-social-link span { position: relative; z-index: 1; }

/* ── Browser & Responsible ──────────────────────────────────── */
.v3-browsers {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 12px 0;
}
.v3-browser-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--v3-bg-card);
  border: 1px solid var(--v3-border);
  border-radius: 50%;
  color: var(--v3-text-muted);
  font-size: 18px;
  transition: all var(--v3-transition);
}
.v3-browser-icon:hover { border-color: var(--v3-gold); color: var(--v3-gold); }

.v3-badge-18 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--v3-danger);
  color: var(--v3-danger);
  font-size: 14px;
  font-weight: 800;
}

/* ── SEO Article Section ─────────────────────────────────────── */
.v3-article-section {
  background: linear-gradient(180deg, var(--v3-bg-section), rgba(5,8,22,.6));
  border-top: 1px solid var(--v3-border);
}
.v3-article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.v3-article-card {
  background: linear-gradient(145deg, var(--v3-bg-card), rgba(4,10,42,.5));
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius);
  overflow: hidden;
  transition: all var(--v3-transition);
}
.v3-article-card:hover {
  border-color: var(--v3-border-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
}
.v3-article-card-body { padding: 18px; }
.v3-article-category {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--v3-gold);
  background: rgba(240,178,50,.1);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.v3-article-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.4;
}
.v3-article-title a {
  color: var(--v3-text);
  text-decoration: none;
  transition: color var(--v3-transition);
}
.v3-article-title a:hover { color: var(--v3-gold); }
.v3-article-excerpt {
  font-size: 12px;
  color: var(--v3-text-muted);
  line-height: 1.6;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v3-article-meta {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--v3-text-dim);
}
.v3-article-meta .bi { margin-right: 4px; }

/* SEO Content Block (expandable) */
.v3-seo-content-block {
  margin-top: 20px;
  padding: 20px;
  background: linear-gradient(145deg, var(--v3-bg-card), rgba(4,10,42,.5));
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius);
}
.v3-seo-content {
  font-size: 13px;
  color: var(--v3-text-muted);
  line-height: 1.7;
  max-height: 120px;
  overflow: hidden;
  transition: max-height .4s ease;
}
.v3-seo-content.v3-seo-expanded {
  max-height: 2000px;
}
.v3-seo-content h2, .v3-seo-content h3 {
  color: var(--v3-gold);
  font-size: 15px;
  margin: 16px 0 8px;
}
.v3-seo-content p { margin-bottom: 10px; }
.v3-seo-toggle {
  background: none;
  border: none;
  color: var(--v3-gold);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  padding: 0;
}
.v3-seo-toggle:hover { text-decoration: underline; }

/* ── Article Detail & List Pages ────────────────────────────── */
.v3-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--v3-text-dim);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.v3-breadcrumb a {
  color: var(--v3-text-muted);
  text-decoration: none;
  transition: color var(--v3-transition);
}
.v3-breadcrumb a:hover { color: var(--v3-gold); }
.v3-breadcrumb .bi { font-size: 10px; }

.v3-article-detail-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--v3-text);
  margin: 8px 0 12px;
  line-height: 1.3;
}
.v3-article-content {
  font-size: 14px;
  color: var(--v3-text-muted);
  line-height: 1.8;
}
.v3-article-content h2, .v3-article-content h3 {
  color: var(--v3-gold);
  font-size: 18px;
  margin: 20px 0 10px;
}
.v3-article-content h4 { color: var(--v3-text); font-size: 16px; margin: 16px 0 8px; }
.v3-article-content p { margin-bottom: 12px; }
.v3-article-content ul, .v3-article-content ol {
  margin: 0 0 12px 24px;
  list-style: disc;
}
.v3-article-content li { margin-bottom: 6px; }

.v3-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}
.v3-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  background: var(--v3-bg-card);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-sm);
  color: var(--v3-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--v3-transition);
}
.v3-page-link:hover, .v3-page-link.active {
  border-color: var(--v3-gold);
  color: var(--v3-gold);
  background: rgba(240,178,50,.08);
}

/* ── Info Section Cards ─────────────────────────────────────── */
.v3-info-section {
  background: linear-gradient(180deg, var(--v3-bg-section), rgba(5,8,22,.5));
  border-top: 1px solid var(--v3-border);
  position: relative;
}
.v3-info-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(124,77,255,.03) 0%, transparent 60%);
  pointer-events: none;
}
.v3-info-block {
  margin-bottom: 32px;
}
.v3-info-block h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--v3-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--v3-border-accent);
  display: flex;
  align-items: center;
  gap: 8px;
}
.v3-info-block h3::before {
  content: '';
  width: 4px;
  height: 18px;
  background: linear-gradient(180deg, var(--v3-gold), var(--v3-gold-dark));
  border-radius: 2px;
  flex-shrink: 0;
}
.v3-info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.v3-info-card {
  background: linear-gradient(145deg, var(--v3-bg-card), rgba(4,10,42,.5));
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius);
  padding: 22px;
  transition: all var(--v3-transition);
  position: relative;
  overflow: hidden;
}
.v3-info-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--v3-gold), transparent);
  opacity: 0;
  transition: opacity var(--v3-transition);
}
.v3-info-card:hover {
  border-color: var(--v3-border-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
}
.v3-info-card:hover::before { opacity: 1; }
.v3-info-card h5 {
  color: var(--v3-text);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
.v3-info-card p {
  color: var(--v3-text-muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   V3 FOOTER — Full Desktop Layout
   ══════════════════════════════════════════════════════════════ */
.v3-ft {
  background: linear-gradient(180deg, rgba(5,8,22,.95), var(--v3-bg-deep));
  border-top: 1px solid var(--v3-border);
  color: var(--v3-text-muted);
  font-size: 13px;
}
.v3-ft-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 16px 0;
}

/* ── Row 1: Layanan + Pembayaran ─── */
.v3-ft-top {
  display: flex;
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--v3-border);
}
.v3-ft-left { flex: 1; min-width: 0; }
.v3-ft-right { flex: 1; min-width: 0; }

/* Layanan heading */
.v3-ft-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.v3-ft-heading i { font-size: 28px; color: var(--v3-text-dim); }
.v3-ft-heading h4 { font-size: 16px; font-weight: 700; color: #fff; margin: 0; }
.v3-ft-heading small { font-size: 12px; color: var(--v3-text-dim); }

/* Deposit / Withdraw timing */
.v3-ft-depo-wd { margin-bottom: 20px; }
.v3-ft-timing {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 12px;
}
.v3-ft-timing-info { flex: 1; }
.v3-ft-timing-info h5 {
  font-size: 15px;
  font-weight: 700;
  color: var(--v3-accent, #f0b232);
  margin: 0 0 2px;
}
.v3-ft-timing-info span { font-size: 12px; color: var(--v3-text-dim); }
.v3-ft-bar {
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 99px;
  margin-top: 6px;
  overflow: hidden;
}
.v3-ft-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--v3-accent, #f0b232);
}
.v3-ft-timing-val {
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
}
.v3-ft-timing-val small { font-size: 14px; color: var(--v3-text-dim); }
.v3-ft-disclaimer { font-size: 11px; color: var(--v3-text-dim); margin-top: 4px; }

/* Member Area */
.v3-ft-member { margin-bottom: 20px; }
.v3-ft-member h4 { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.v3-ft-member ul { list-style: none; padding: 0; margin: 0; }
.v3-ft-member li { margin-bottom: 4px; }
.v3-ft-member a {
  color: var(--v3-text-muted);
  text-decoration: none;
  font-size: 13px;
  transition: color .2s;
}
.v3-ft-member a:hover { color: #fff; }
.v3-ft-member i { font-size: 5px; vertical-align: middle; margin-right: 6px; color: var(--v3-accent, #f0b232); }

/* Brand / Logo / Description */
.v3-ft-brand { margin-top: 4px; }
.v3-ft-logo { height: 40px; width: auto; margin-bottom: 10px; }
.v3-ft-desc { font-size: 12px; color: var(--v3-text-dim); line-height: 1.6; margin-bottom: 8px; }
.v3-ft-online { font-size: 12px; color: var(--v3-text-muted); margin-bottom: 10px; }
.v3-ft-online i { margin-right: 4px; }
.v3-ft-pages { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.v3-ft-pages a {
  font-size: 12px;
  color: var(--v3-text-muted);
  text-decoration: none;
  transition: color .2s;
}
.v3-ft-pages a:hover { color: #fff; }
.v3-ft-pages i { font-size: 4px; vertical-align: middle; margin-right: 4px; color: var(--v3-accent, #f0b232); }

/* Right col: Pembayaran */
.v3-ft-payment-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--v3-accent, #f0b232);
  margin: 0 0 12px;
}
.v3-ft-payment-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.v3-ft-pay-item {
  background: rgba(21,24,25,.9);
  border: 2px solid #04b962;
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 40px;
  transition: transform .2s;
  position: relative;
  flex-direction: column;
  gap: 0;
}
.v3-ft-pay-online { border-color: #04b962; }
.v3-ft-pay-offline { border-color: #f43643; opacity: .6; }
.v3-ft-pay-status {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1;
  margin-top: 1px;
}
.v3-ft-pay-online .v3-ft-pay-status { color: #04b962; }
.v3-ft-pay-offline .v3-ft-pay-status { color: #f43643; }
.v3-ft-pay-item:hover { transform: translateY(-2px); }
.v3-ft-pay-item img {
  max-height: 26px;
  max-width: 60px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* Games Terfavorit */
.v3-ft-fav-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}
.v3-ft-fav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.v3-ft-fav-item a {
  display: block;
  text-decoration: none;
  text-align: center;
}
.v3-ft-fav-item img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--v3-border);
  transition: border-color .2s;
}
.v3-ft-fav-item:hover img { border-color: var(--v3-accent, #f0b232); }
.v3-ft-fav-item span {
  display: block;
  font-size: 10px;
  color: var(--v3-text-dim);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Row 2: Center Navigation ─── */
.v3-ft-nav {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--v3-border);
  flex-wrap: wrap;
}
.v3-ft-nav a {
  color: var(--v3-text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color .2s;
}
.v3-ft-nav a:hover { color: #fff; }

/* ── Row 3: Badges (Kualitas, Dukungan, Browser) ─── */
.v3-ft-badges {
  display: flex;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--v3-border);
}
.v3-ft-badge-col { flex: 1; min-width: 0; }
.v3-ft-badge-col h5 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}

/* Hover list (shared for badges + providers) */
.v3-ft-hover-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.v3-ft-hover-list li {
  display: inline-flex;
  align-items: center;
  cursor: default;
}
.v3-ft-hover-list li picture:nth-child(2) { display: none; }
.v3-ft-hover-list li:hover picture:nth-child(1) { display: none; }
.v3-ft-hover-list li:hover picture:nth-child(2) { display: inline-flex; }
.v3-ft-hover-list li img { height: 28px; width: auto; }
/* Icon-based badge items (no image) */
.v3-ft-badge-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--v3-text-muted);
  font-size: 15px;
  transition: all .25s ease;
  cursor: default;
}
.v3-ft-badge-icon:hover {
  background: rgba(240,178,50,.1);
  border-color: var(--v3-border-accent);
  color: var(--v3-gold);
}
.v3-ft-badge-icon .bi-whatsapp { color: #25d366; }
.v3-ft-badge-icon:hover .bi-whatsapp { color: #2beb72; }

/* ── Row 4: Provider Fieldsets ─── */
.v3-ft-providers { padding: 20px 0; }
.v3-ft-prov-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
}
.v3-ft-fieldset {
  border: 1px solid var(--v3-border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
  min-width: 0;
}
.v3-ft-fieldset legend {
  font-size: 12px;
  font-weight: 700;
  color: var(--v3-text-muted);
  padding: 0 8px;
  margin: 0;
  width: auto;
  float: none;
  line-height: 1;
}
.v3-ft-prov-list { justify-content: center; }
.v3-ft-prov-list li img { height: 26px; }

/* Side-by-side provider rows */
.v3-ft-prov-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.v3-ft-prov-row .v3-ft-fieldset { margin-bottom: 0; flex: 1; }
.v3-ft-fieldset-grow { flex: 2 !important; }

/* ── Row 5: Copyright ─── */
.v3-ft-copyright {
  text-align: center;
  padding: 18px 0 12px;
  font-size: 12px;
  color: var(--v3-text-dim);
  border-top: 1px solid var(--v3-border);
}
.v3-ft-copyright a { color: var(--v3-accent, #f0b232); text-decoration: none; }

/* ── Footer Responsive ─── */
@media (max-width: 991px) {
  .v3-ft-top { flex-direction: column; gap: 24px; }
  .v3-ft-prov-row { flex-direction: column; gap: 12px; }
  .v3-ft-badges { flex-wrap: wrap; gap: 16px; }
  .v3-ft-badge-col { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .v3-ft-fav-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  .v3-ft-inner { padding: 20px 12px 0; }
  .v3-ft-timing-val { font-size: 28px; }
  .v3-ft-payment-grid { gap: 4px; }
  .v3-ft-pay-item { min-width: 60px; height: 38px; padding: 3px 6px; }
  .v3-ft-pay-item img { max-height: 18px; max-width: 48px; }
  .v3-ft-pay-status { font-size: 7px; }
  .v3-ft-fav-grid { grid-template-columns: repeat(2, 1fr); }
  .v3-ft-prov-list li img { height: 20px; }
  .v3-ft-fieldset { padding: 10px 10px; }
  .v3-ft-nav { gap: 12px; }
  .v3-ft-copyright { padding-bottom: 70px; }
}

/* ── Mobile Auth Strip (below banner) ───────────────────────── */
.v3-mobile-auth-strip {
  display: none;
  gap: 0;
}
.v3-mas-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: opacity .2s, transform .15s, box-shadow .15s;
  box-shadow: 0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.v3-mas-btn:hover { opacity: .85; }
.v3-mas-btn:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0,0,0,.4), inset 0 2px 4px rgba(0,0,0,.2); }
.v3-mas-login {
  background: linear-gradient(135deg, #1a3a5c 0%, #0d2137 100%);
  color: #fff !important;
  border-bottom: 1px solid rgba(1,76,201,.2);
}
.v3-mas-register {
  background: linear-gradient(135deg, var(--v3-gold, #d4a528) 0%, #b8901e 100%);
  color: #111 !important;
}
@media (max-width: 768px) {
  .v3-mobile-auth-strip { display: flex; }
}

/* ── Hamburger Menu v3 (Mobile - Top Right) ─────────────────── */

/* Hamburger Button - inline in authbar, top-right */
.v3-hamburger-btn {
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  padding: 0;
  flex-shrink: 0;
  order: 99;
  margin-left: auto;
}
.v3-hamburger-btn:hover {
  background: rgba(255,255,255,.14);
}
.v3-hamburger-btn.active {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.45);
}
.v3-hamburger-icon {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}
.v3-hamburger-icon span {
  display: block;
  height: 2.5px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: all .3s ease;
  transform-origin: center;
}
.v3-hamburger-btn.active .v3-hamburger-icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.v3-hamburger-btn.active .v3-hamburger-icon span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.v3-hamburger-btn.active .v3-hamburger-icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile Overlay */
.v3-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9990;
  opacity: 0;
  transition: opacity .3s ease;
}
.v3-mobile-overlay.active {
  display: block;
  opacity: 1;
}

/* Slide Menu - from right */
.v3-mobile-menu {
  position: fixed;
  top: 0;
  right: -80vw;
  width: 75vw;
  max-width: 300px;
  height: 100%;
  z-index: 9995;
  background: linear-gradient(180deg, #0a1628 0%, #050d1e 100%);
  overflow-y: auto;
  overflow-x: hidden;
  transition: right .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -6px 0 30px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  padding-bottom: 60px;
}
.v3-mobile-menu.active {
  right: 0;
}
.v3-mobile-menu::-webkit-scrollbar { width: 0; }

/* Close Button */
.v3-menu-close {
  display: none;
}

/* Action Bar (Deposit/Withdraw or Masuk/Daftar) */
.v3-menu-action-bar {
  display: flex;
  gap: 10px;
  padding: 16px 16px 8px;
}
.v3-menu-act-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  text-transform: capitalize;
  border-radius: 4px;
  transition: all .2s;
}
.v3-act-deposit {
  border: none;
  color: #fff !important;
  background: #2ecc71;
}
.v3-act-deposit:hover { background: #27ae60; }
.v3-act-withdraw {
  border: none;
  color: #fff !important;
  background: #e74c3c;
}
.v3-act-withdraw:hover { background: #c0392b; }

/* User Info */
.v3-menu-user-info {
  padding: 8px 16px 4px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

/* Balance Bar */
.v3-menu-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 16px 12px;
  padding: 8px 12px;
  background: rgba(1,76,201,.12);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
}
.v3-menu-balance .bi-wallet2 { font-size: 16px; opacity: .7; }
.v3-menu-balance #v3-menu-bal { flex: 1; text-align: center; font-weight: 600; }
.v3-bal-refresh {
  color: rgba(255,255,255,.5) !important;
  text-decoration: none !important;
  font-size: 16px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  line-height: 1;
}
.v3-bal-refresh:hover { color: #fff !important; }
@keyframes v3-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Navigation Links */
.v3-menu-nav {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  border-top: 1px solid rgba(1,76,201,.15);
}
.v3-menu-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  color: rgba(255,255,255,.85) !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 400;
  transition: background .2s;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.v3-menu-link:hover { background: rgba(255,255,255,.05); }
.v3-menu-link.active { color: #fff !important; background: rgba(255,255,255,.08); }
.v3-menu-link .bi {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  opacity: .7;
}
.v3-menu-link-logout { border-top: 1px solid rgba(1,76,201,.15); }

/* Kategori Permainan */
.v3-menu-categories {
  padding: 16px;
  border-top: 1px solid rgba(1,76,201,.15);
  margin-top: auto;
}
.v3-menu-cat-title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
}
.v3-menu-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.v3-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  color: rgba(255,255,255,.8) !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 500;
  transition: all .2s;
  background: transparent;
}
.v3-cat-chip:hover {
  background: rgba(255,255,255,.1);
  color: #fff !important;
  border-color: rgba(255,255,255,.4);
}
.v3-cat-chip .bi { font-size: 13px; opacity: .7; }
.v3-mobile-bottom-links .bi-whatsapp {
  color: #25d366;
}
.v3-mobile-link-logout {
  color: #e74c3c !important;
}
.v3-mobile-link-logout:hover {
  background: rgba(231,76,60,.08) !important;
}

/* Mini Bottom Bar - always visible: Beranda + Daftar */
.v3-mini-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9980;
  height: 54px;
  background: linear-gradient(180deg, #0d1b33 0%, #070e1f 100%);
  border-top: 1px solid rgba(1,76,201,.2);
  justify-content: space-around;
  align-items: center;
  padding: 0 20%;
}
.v3-mini-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: rgba(255,255,255,.55) !important;
  text-decoration: none !important;
  font-size: 10px;
  font-weight: 600;
  transition: color .2s;
  padding: 4px 12px;
}
.v3-mini-bar-item .bi {
  font-size: 20px;
}
.v3-mini-bar-item:hover,
.v3-mini-bar-item.active {
  color: var(--v3-accent) !important;
}

/* Adjust floating socials position on mobile (above bottom nav) */
@media (max-width: 768px) {
  .v3-floating-socials > div:nth-child(1) { bottom: 151px !important; }
  .v3-floating-socials > div:nth-child(2) { bottom: 210px !important; }
  .v3-floating-socials > div:nth-child(3) { bottom: 271px !important; }
}

/* Show hamburger on mobile, hide desktop nav & auth buttons in topbar */
@media (max-width: 768px) {
  .v3-hamburger-btn { display: flex; }
  .v3-navbar { display: block !important; }
  .v3-authbar .v3-auth-buttons { display: none !important; }
  .v3-authbar .v3-user-info { display: none !important; }
}

/* Desktop: show auth buttons, hide hamburger */
@media (min-width: 769px) {
  .v3-authbar .v3-auth-buttons { display: flex !important; gap: 8px; align-items: center; }
  .v3-authbar .v3-user-info { display: flex !important; gap: 8px; align-items: center; }
  .v3-hamburger-btn { display: none !important; }
}

/* Prevent body scroll when menu open */
body.v3-menu-open { overflow: hidden; }

/* ── Mobile Fixed Bottom Nav Bar ──────────────────────────────── */
.v3-bottom-navbar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9980;
  height: 56px;
  background: linear-gradient(180deg, #0c2d5a 0%, #081c3a 100%);
  border-top: 1px solid rgba(1,76,201,.25);
  justify-content: space-around;
  align-items: center;
  padding: 0;
  box-shadow: 0 -2px 10px rgba(0,0,0,.3);
}
.v3-bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: rgba(255,255,255,.7) !important;
  text-decoration: none !important;
  font-size: 10px;
  font-weight: 600;
  flex: 1;
  height: 100%;
  transition: color .2s;
  padding: 6px 2px;
}
.v3-bnav-item .bi {
  font-size: 18px;
}
.v3-bnav-item:hover,
.v3-bnav-item.active {
  color: #fff !important;
}
.v3-bnav-item.v3-bnav-promo {
  background: var(--v3-gold, #d4a528);
  color: #111 !important;
  font-weight: 800;
  border-radius: 0;
}
.v3-bnav-item.v3-bnav-promo:hover {
  color: #000 !important;
}
@media (max-width: 768px) {
  .v3-bottom-navbar { display: flex; }
  /* Add spacing at bottom so content not hidden behind bottom nav */
  body.v3-theme { padding-bottom: 56px; }
  .v3-ft-copyright { padding-bottom: 70px; }
}
@media (min-width: 769px) {
  .v3-bottom-navbar { display: none !important; }
}

/* ── Old Bottom Navigation (hidden, replaced by hamburger) ── */
.v3-bottom-nav {
  display: none !important;
}
.v3-bottom-spacer {
  height: 0 !important;
}

/* Legacy selectors preserved to avoid errors */
.v3-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #ffffff !important;
  font-size: 10px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all var(--v3-transition);
  padding: 4px 2px;
  position: relative;
}
.v3-bottom-nav-item::before {
  content: '';
  position: absolute;
  top: 0; left: 25%; right: 25%;
  height: 2px;
  background: var(--v3-gold);
  border-radius: 0 0 2px 2px;
  transform: scaleX(0);
  transition: transform var(--v3-transition);
}
.v3-bottom-nav-item:hover::before,
.v3-bottom-nav-item.active::before {
  transform: scaleX(1);
}
.v3-bottom-nav-item:hover,
.v3-bottom-nav-item.active {
  color: var(--v3-gold) !important;
}
.v3-bottom-nav-item .bi {
  font-size: 22px;
  color: inherit !important;
  transition: transform var(--v3-transition);
}
.v3-bottom-nav-item:hover .bi {
  transform: translateY(-2px);
}
.v3-bottom-spacer {
  height: calc(var(--v3-bottom-nav-h) + 12px);
}

/* Desktop: hide bottom nav (mobile-only floating bar) */
@media (min-width: 769px) {
  .v3-bottom-nav {
    display: none !important;
  }
  .v3-bottom-spacer { height: 0; }
}

/* ── Popup Modal ────────────────────────────────────────────── */
.v3-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.v3-popup-content {
  background: linear-gradient(145deg, var(--v3-bg-card), rgba(4,10,42,.95));
  border: 1px solid var(--v3-border-accent);
  border-radius: var(--v3-radius-xl);
  max-width: 440px;
  width: 100%;
  overflow: hidden;
  box-shadow:
    var(--v3-shadow-deep),
    0 0 40px rgba(240,178,50,.08);
  position: relative;
  animation: v3-popup-enter .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes v3-popup-enter {
  0% { transform: scale(.85) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.v3-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,.5);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.v3-popup-image img {
  width: 100%;
  display: block;
}
.v3-popup-body {
  padding: 16px;
}
.v3-popup-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--v3-gold);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.v3-popup-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v3-popup-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--v3-bg-section);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-sm);
  color: var(--v3-text);
  font-size: 13px;
  font-weight: 600;
  transition: all var(--v3-transition);
}
.v3-popup-link:hover {
  border-color: var(--v3-gold);
  color: var(--v3-gold);
  background: rgba(240,178,50,.05);
}
.v3-popup-ok {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  background: var(--v3-gold);
  color: #111;
  border: none;
  border-radius: var(--v3-radius-sm);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}
.v3-popup-ok:hover { background: var(--v3-gold-light); }

/* ── Responsive ─────────────────────────────────────────────── */

/* Large tablets / small laptops */
@media (max-width: 1024px) {
  .v3-section { max-width: 100%; }
  .v3-games-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .v3-info-cards { grid-template-columns: repeat(2, 1fr); }
  .v3-jp-container { max-width: 520px; }
}

/* Tablets */
@media (max-width: 768px) {
  .v3-authbar .v3-logo img { height: 46px; }
  .v3-btn { padding: 7px 16px; font-size: 12px; }
  .v3-jp-container { max-width: 440px; }
  .v3-games-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .v3-games-featured { gap: 10px; }
  .v3-game-card-name { font-size: 10px; padding: 8px 6px; }
  .v3-section { padding: 24px 12px; }
  .v3-section-title { font-size: 15px; }
  .v3-togel-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .v3-togel-number { font-size: 22px; }
  .v3-togel-card { padding: 14px 8px; }
  .v3-service-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .v3-service-card { padding: 18px 14px; }
  .v3-download-section { flex-direction: column; text-align: center; padding: 20px; }
  .v3-download-img { width: 100px; }
  .v3-info-cards { grid-template-columns: 1fr; }
  .v3-ft-prov-list li img { height: 22px; }
  .v3-social-links { gap: 8px; }
  .v3-social-link { padding: 7px 12px; font-size: 11px; }
}

/* Large phones */
@media (max-width: 600px) {
  .v3-topbar { padding: 0 12px; font-size: 11px; }
  .v3-authbar { padding: 8px 12px; }
  .v3-togel-grid { grid-template-columns: repeat(3, 1fr); }
  .v3-service-time { font-size: 28px; }
  .v3-bottom-nav-item .bi { font-size: 20px; }
  .v3-bottom-nav-item { font-size: 9px; }
}

/* Standard phones */
@media (max-width: 480px) {
  .v3-jp-container { max-width: 340px; }
  .v3-games-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .v3-game-card-name { font-size: 9px; padding: 6px 4px; }
  .v3-game-item { flex: 0 0 120px; }
  .v3-game-item-name { font-size: 9px; padding: 6px 4px; }
  .v3-game-hot-corner { font-size: 8px; padding: 2px 5px; top: 5px; right: 5px; }
  .v3-game-featured .v3-game-card-name { font-size: 11px; padding: 8px; }
  .v3-togel-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .v3-togel-number { font-size: 20px; letter-spacing: 2px; }
  .v3-togel-market { font-size: 9px; }
  .v3-togel-card { padding: 12px 6px; }
  .v3-service-grid { gap: 8px; }
  .v3-service-card { padding: 16px 10px; }
  .v3-service-title { font-size: 12px; }
  .v3-service-time { font-size: 26px; }
  .v3-nav-item { padding: 8px 8px; font-size: 9px; gap: 3px; letter-spacing: 0; min-width: 74px; }
  .v3-nav-icon-wrap { width: 42px; height: 42px; border-radius: 12px; }
  .v3-nav-icon-img { width: 30px; height: 30px; }
  .v3-nav-label { font-size: 10px; }
  .v3-nav-scroll-btn { width: 24px; height: 32px; font-size: 20px; }
  .v3-navbar::after { width: 40px; background: linear-gradient(270deg, #001542 20%, transparent); }
  .v3-nav-inner { padding-right: 35px !important; }
  .v3-section-header { flex-direction: row; gap: 8px; }
  .v3-section-title { font-size: 13px; gap: 6px; }
  .v3-section-link { font-size: 11px; }
  .v3-info-card { padding: 16px; }
  .v3-info-card h5 { font-size: 13px; }
  .v3-download-section { padding: 16px; gap: 16px; }
}

/* Small phones (iPhone SE, etc.) */
@media (max-width: 360px) {
  .v3-jp-container { max-width: 280px; }
  .v3-games-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .v3-game-item { flex: 0 0 100px; }
  .v3-game-item-name { font-size: 8px; padding: 5px 3px; }
  .v3-togel-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .v3-togel-number { font-size: 18px; }
  .v3-btn { padding: 6px 12px; font-size: 11px; }
  .v3-authbar .v3-logo img { height: 30px; }
  .v3-bottom-nav { height: 56px; }
  .v3-bottom-nav-item .bi { font-size: 18px; }
  .v3-social-links { gap: 4px; }
  .v3-social-link { padding: 6px 8px; font-size: 10px; }
}

/* Extra-large screens */
@media (min-width: 1400px) {
  .v3-section { max-width: 1320px; }
  .v3-games-grid { grid-template-columns: repeat(6, 1fr); }
  .v3-togel-grid { grid-template-columns: repeat(8, 1fr); }
  .v3-jp-container { max-width: 700px; }
}

/* Landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
  .v3-bottom-nav { height: 48px; }
  .v3-bottom-nav-item .bi { font-size: 18px; }
  .v3-bottom-nav-item { font-size: 9px; gap: 1px; }
  .v3-bottom-spacer { height: 52px; }
  .v3-jp-container { max-width: 380px; }
}

/* ── Hide elements on v3 theme that conflict ────────────────── */
.v3-theme .mcp-top-header { display: none !important; }
.v3-theme .bg-custom { background: transparent !important; }
.v3-theme .containerslide { margin-top: 0 !important; padding: 0 !important; max-width: 100% !important; }
.v3-theme .carousel-inner .carouselborder { border-radius: 0 !important; }

/* Slider responsive sizing */
.v3-slider-img {
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 146.66;
  object-fit: cover;
}
.v3-theme .footerfixedcontent { display: none !important; }
.v3-theme .product-tile__clip-path { display: none !important; }
.v3-theme .bg-footer { background: var(--v3-bg-section) !important; border: none !important; }
.v3-theme #wrapper { position: relative; z-index: 1; }

/* ── Utility classes ────────────────────────────────────────── */
.v3-text-gold { color: var(--v3-gold) !important; }
.v3-text-muted { color: var(--v3-text-muted) !important; }
.v3-text-center { text-align: center; }
.v3-mt-0 { margin-top: 0 !important; }
.v3-mb-0 { margin-bottom: 0 !important; }

/* ══════════════════════════════════════════════════════════════
   MOBILE FONT READABILITY ENHANCEMENT
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.v3-theme {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  .v3-section-title { font-size: 16px; font-weight: 800; letter-spacing: .5px; }
  .v3-service-title { font-size: 14px; font-weight: 800; }
  .v3-service-desc { font-size: 13px; }
  .v3-marquee-text { font-size: 13px; }
  .v3-info-card h5 { font-size: 15px; font-weight: 700; }
  .v3-info-card p, .v3-info-card li { font-size: 13px; line-height: 1.7; }
  .v3-social-link { font-size: 13px; font-weight: 600; }
  .v3-popup-link { font-size: 14px; }
  .v3-game-card-name { font-size: 11px; font-weight: 600; }
  .v3-ticker-header { font-size: 12px; font-weight: 800; }
  .v3-ticker-row { font-size: 13px; }
  .v3-ticker-user { font-size: 12px; font-weight: 700; }
  .v3-ticker-amount { font-size: 12px; font-weight: 800; }
  .v3-ticker-status { font-size: 11px; font-weight: 700; }
  .v3-ft-copyright { font-size: 12px; }
  .v3-ft-nav a { font-size: 12px; }
}
@media (max-width: 480px) {
  body.v3-theme { font-size: 13px; }
  .v3-section-title { font-size: 14px; font-weight: 800; }
  .v3-service-title { font-size: 13px; }
  .v3-service-desc { font-size: 12px; }
  .v3-info-card p, .v3-info-card li { font-size: 12px; line-height: 1.65; }
  .v3-social-link { font-size: 12px; }
  .v3-game-card-name { font-size: 10px; font-weight: 700; }
  .v3-mas-btn { font-size: 13px; font-weight: 800; letter-spacing: .8px; }
  .v3-btn { font-size: 12px; font-weight: 700; }
  .v3-nav-item { font-size: 10px; font-weight: 700; }
  .v3-hot-title-icon { width: 30px; height: 30px; border-radius: 9px; }
  .v3-ticker-row { font-size: 12px; }
  .v3-ticker-user { font-size: 11px; }
  .v3-ticker-amount { font-size: 11px; }
}
@media (max-width: 360px) {
  body.v3-theme { font-size: 12px; }
  .v3-section-title { font-size: 13px; }
  .v3-game-card-name { font-size: 9px; font-weight: 700; }
  .v3-btn { font-size: 11px; font-weight: 700; }
  .v3-social-link { font-size: 11px; font-weight: 600; }
  .v3-mas-btn { font-size: 12px; }
}
.v3-divider {
  height: 1px;
  background: var(--v3-border);
  margin: 20px 0;
}

/* ── Last Played Games (keep existing, restyle) ─────────────── */
.v3-theme .lastgames { overflow-x: auto; }
.v3-theme .lastgamenav { display: flex; gap: 10px; flex-wrap: nowrap; }
.v3-theme .lastgameitem {
  flex-shrink: 0;
  width: 120px;
}
.v3-theme .lastgameimg {
  width: 100%;
  border-radius: var(--v3-radius-sm);
  border: 1px solid var(--v3-border);
}

/* ── Smooth loading ─────────────────────────────────────────── */
.v3-theme .lazyload,
.v3-theme .lazyloading {
  opacity: 0;
  transition: opacity .3s;
}
.v3-theme .lazyloaded { opacity: 1; }

/* ── Guest/Member layout toggle ─────────────────────────────── */
.v3-theme .v3-member-only { display: none; }
.v3-theme.v3-logged-in .v3-member-only { display: flex; }
.v3-theme.v3-logged-in .v3-guest-only { display: none; }

/* ════════════════════════════════════════════════════════════════
   V3.5 UPGRADE — Payment Logos, Trust Section, Enhanced Jackpot
   ════════════════════════════════════════════════════════════════ */

/* ── Daily Wins Banner (legacy — replaced by ticker) ──────── */
.v3-daily-wins-banner {
  margin: 20px 0;
  border-radius: var(--v3-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(240,178,50,.15);
  position: relative;
  transition: all var(--v3-transition);
}
.v3-daily-wins-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(240,178,50,.05), transparent);
  pointer-events: none;
  z-index: 1;
}
.v3-daily-wins-banner:hover {
  border-color: var(--v3-gold);
  box-shadow: 0 8px 32px rgba(240,178,50,.15);
}
.v3-daily-wins-banner img {
  width: 100%;
  display: block;
  height: auto;
}

/* ── V3 Ticker — Last Deposit / Withdraw / Top Win ──────────── */
.v3-ticker-wrapper {
  margin: 20px 0;
}
.v3-ticker-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.v3-ticker-box {
  background: linear-gradient(160deg, rgba(4,10,42,.85), rgba(2,5,20,.95));
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}
.v3-ticker-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.v3-ticker-depo {
  background: linear-gradient(135deg, rgba(0,200,83,.12), rgba(0,200,83,.03));
  color: #00e676;
  text-shadow: 0 0 12px rgba(0,230,118,.3);
}
.v3-ticker-wd {
  background: linear-gradient(135deg, rgba(255,82,82,.12), rgba(255,82,82,.03));
  color: #ff5252;
  text-shadow: 0 0 12px rgba(255,82,82,.3);
}
.v3-ticker-win {
  background: linear-gradient(135deg, rgba(255,215,0,.12), rgba(255,215,0,.03));
  color: var(--v3-gold);
  text-shadow: 0 0 12px rgba(255,215,0,.3);
}
.v3-ticker-body {
  padding: 0;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.v3-ticker-body::before,
.v3-ticker-body::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  z-index: 2;
  pointer-events: none;
}
.v3-ticker-body::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(2,5,20,.9), transparent);
}
.v3-ticker-body::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(2,5,20,.9), transparent);
}
.v3-ticker-scroll {
  height: 100%;
  overflow: hidden;
}
.v3-ticker-list {
  padding: 6px 0;
}
.v3-ticker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  transition: background .2s;
}
.v3-ticker-row:hover {
  background: rgba(255,255,255,.03);
}
.v3-ticker-user {
  flex: 1;
  color: var(--v3-text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}
.v3-ticker-user i {
  color: var(--v3-text-muted);
  font-size: 11px;
}
.v3-ticker-amount {
  font-weight: 700;
  color: #00e676;
  white-space: nowrap;
  font-size: 11px;
  font-family: 'Courier New', monospace;
}
.v3-amount-gold {
  color: var(--v3-gold);
  text-shadow: 0 0 8px rgba(255,215,0,.2);
}
.v3-ticker-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.v3-status-approve {
  background: rgba(0,200,83,.15);
  color: #00e676;
  border: 1px solid rgba(0,200,83,.25);
}
.v3-ticker-rank {
  font-weight: 800;
  color: var(--v3-gold);
  font-size: 11px;
  min-width: 22px;
  text-align: center;
}

/* Ticker responsive */
@media (max-width: 768px) {
  .v3-ticker-columns { grid-template-columns: 1fr; gap: 10px; }
  .v3-ticker-body { height: 160px; }
}
@media (max-width: 480px) {
  .v3-ticker-header { padding: 8px 10px; font-size: 11px; }
  .v3-ticker-row { padding: 6px 10px; font-size: 11px; }
  .v3-ticker-amount { font-size: 10px; }
  .v3-ticker-body { height: 140px; }
}

/* ── Payment Method Logos — Uses <marquee> tag now ───────────── */
.v3-payment-category-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--v3-gold);
  margin: 16px 0 10px;
  padding-left: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.v3-payment-category-label::before {
  content: '';
  width: 3px;
  height: 12px;
  background: var(--v3-gold);
  border-radius: 2px;
  flex-shrink: 0;
}
.v3-payment-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.v3-payment-logo-item {
  background: linear-gradient(145deg, rgba(4,10,42,.8), rgba(8,13,36,.9));
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-sm);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 44px;
  transition: all var(--v3-transition);
  backdrop-filter: blur(4px);
}
.v3-payment-logo-item:hover {
  border-color: var(--v3-gold);
  background: rgba(240,178,50,.08);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(240,178,50,.12);
}
.v3-payment-logo-item img {
  max-height: 28px;
  max-width: 60px;
  width: auto;
  object-fit: contain;
  filter: brightness(.9);
  transition: filter var(--v3-transition);
}
.v3-payment-logo-item:hover img {
  filter: brightness(1.1);
}

/* ── Trust Section (Browsers / Responsible Gaming / Quality) ── */
.v3-trust-section {
  display: flex;
  justify-content: center;
  gap: 40px;
  align-items: flex-start;
  margin-top: 24px;
  flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1px solid var(--v3-border);
}
.v3-trust-block {
  text-align: center;
}
.v3-trust-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--v3-text-dim);
  margin-bottom: 8px;
}
.v3-trust-icons {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.v3-trust-img {
  height: 32px;
  width: auto;
  opacity: .7;
  transition: all var(--v3-transition);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.v3-trust-img:hover {
  opacity: 1;
  transform: scale(1.1);
}
.v3-trust-img-lg {
  height: 40px;
  width: auto;
  opacity: .75;
  transition: all var(--v3-transition);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.v3-trust-img-lg:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* ── Togel Section ─────────────────────────────────────────── */

/* (v3-provider-bg removed — now using v3-ft footer) */

/* ── Enhanced Responsive for new elements ───────────────────── */
@media (max-width: 768px) {
  .v3-payment-logo-item { min-width: 60px; height: 38px; padding: 6px 8px; }
  .v3-payment-logo-item img { max-height: 24px; max-width: 50px; }
  .v3-trust-section { gap: 24px; }
  .v3-trust-img { height: 28px; }
  .v3-trust-img-lg { height: 34px; }
  .v3-daily-wins-banner { margin: 14px 0; /* legacy */ }
  .v3-ticker-wrapper { margin: 14px 0; }
  .v3-jackpot { padding: 36px 14px 32px; }
  .v3-togel-deco-img { width: 80px; right: -5px; }
}

@media (max-width: 480px) {
  .v3-payment-logo-item { min-width: 50px; height: 34px; padding: 4px 6px; }
  .v3-payment-logo-item img { max-height: 20px; max-width: 44px; }
  .v3-payment-category-label { font-size: 10px; margin: 12px 0 8px; }
  .v3-trust-section { gap: 16px; padding: 14px 0; }
  .v3-trust-img { height: 24px; }
  .v3-trust-img-lg { height: 30px; }
  .v3-trust-label { font-size: 9px; }
  .v3-jackpot { padding: 28px 10px 24px; }
  .v3-togel-deco-img { width: 60px; opacity: .08; }
}

@media (max-width: 360px) {

  .v3-payment-logos { gap: 4px; }
  .v3-payment-logo-item { min-width: 44px; height: 30px; padding: 3px 5px; }
  .v3-payment-logo-item img { max-height: 18px; }
}

@media (min-width: 1400px) {

  .v3-jackpot { padding: 56px 24px 48px; }
}

/* ════════════════════════════════════════════════════════════════
   COLOR TEMPLATE SYSTEM — Switchable accent themes
   Default: Red+Blue (class: v3-tpl-redblue or no class)
   ════════════════════════════════════════════════════════════════ */

/* ── Template: Gold + Navy ──────────────────────────────────── */
body.v3-theme.v3-tpl-gold {
  --v3-accent: #d4a843;
  --v3-accent-light: #f0d078;
  --v3-accent-dark: #b08930;
  --v3-accent-glow: rgba(212,168,67,.25);
  --v3-accent-neon: rgba(240,208,120,.6);
  --v3-border-accent: rgba(212,168,67,.3);
  --v3-border-glow: rgba(212,168,67,.5);
  --v3-shadow-accent: 0 4px 24px rgba(212,168,67,.2);
}
body.v3-theme.v3-tpl-gold .v3-btn-login {
  background: linear-gradient(180deg, #014cc9, #02205f);
  border-color: rgba(1,149,255,.4);
}
body.v3-theme.v3-tpl-gold .v3-btn-register {
  background: linear-gradient(180deg, #d4a843, #b08930);
  box-shadow: 0 4px 20px rgba(212,168,67,.3);
}
body.v3-theme.v3-tpl-gold .v3-btn-register:hover {
  background: linear-gradient(180deg, #f0d078, #d4a843);
  box-shadow: 0 8px 30px rgba(212,168,67,.45);
}

/* ── Template: Cyan + Dark ──────────────────────────────────── */
body.v3-theme.v3-tpl-cyan {
  --v3-accent: #00e5ff;
  --v3-accent-light: #66f0ff;
  --v3-accent-dark: #009fc5;
  --v3-accent-glow: rgba(0,229,255,.25);
  --v3-accent-neon: rgba(102,240,255,.6);
  --v3-border-accent: rgba(0,229,255,.3);
  --v3-border-glow: rgba(0,229,255,.5);
  --v3-shadow-accent: 0 4px 24px rgba(0,229,255,.2);
}
body.v3-theme.v3-tpl-cyan .v3-btn-login {
  background: linear-gradient(180deg, #014cc9, #02205f);
  border-color: rgba(0,229,255,.4);
}
body.v3-theme.v3-tpl-cyan .v3-btn-register {
  background: linear-gradient(180deg, #00e5ff, #009fc5);
  color: #111;
  box-shadow: 0 4px 20px rgba(0,229,255,.3);
}
body.v3-theme.v3-tpl-cyan .v3-btn-register:hover {
  background: linear-gradient(180deg, #66f0ff, #00e5ff);
  box-shadow: 0 8px 30px rgba(0,229,255,.45);
  color: #111;
}

/* ── Template: Green + Dark ─────────────────────────────────── */
body.v3-theme.v3-tpl-green {
  --v3-accent: #00e676;
  --v3-accent-light: #66ff99;
  --v3-accent-dark: #00a844;
  --v3-accent-glow: rgba(0,230,118,.25);
  --v3-accent-neon: rgba(102,255,153,.6);
  --v3-border-accent: rgba(0,230,118,.3);
  --v3-border-glow: rgba(0,230,118,.5);
  --v3-shadow-accent: 0 4px 24px rgba(0,230,118,.2);
}
body.v3-theme.v3-tpl-green .v3-btn-login {
  background: linear-gradient(180deg, #014cc9, #02205f);
  border-color: rgba(0,230,118,.4);
}
body.v3-theme.v3-tpl-green .v3-btn-register {
  background: linear-gradient(180deg, #00e676, #00a844);
  color: #111;
  box-shadow: 0 4px 20px rgba(0,230,118,.3);
}
body.v3-theme.v3-tpl-green .v3-btn-register:hover {
  background: linear-gradient(180deg, #66ff99, #00e676);
  box-shadow: 0 8px 30px rgba(0,230,118,.45);
  color: #111;
}

/* ── Template: Purple + Dark ────────────────────────────────── */
body.v3-theme.v3-tpl-purple {
  --v3-accent: #7c4dff;
  --v3-accent-light: #b388ff;
  --v3-accent-dark: #5a2dc5;
  --v3-accent-glow: rgba(124,77,255,.25);
  --v3-accent-neon: rgba(179,136,255,.6);
  --v3-border-accent: rgba(124,77,255,.3);
  --v3-border-glow: rgba(124,77,255,.5);
  --v3-shadow-accent: 0 4px 24px rgba(124,77,255,.2);
}
body.v3-theme.v3-tpl-purple .v3-btn-login {
  background: linear-gradient(180deg, #014cc9, #02205f);
  border-color: rgba(124,77,255,.4);
}
body.v3-theme.v3-tpl-purple .v3-btn-register {
  background: linear-gradient(180deg, #7c4dff, #5a2dc5);
  box-shadow: 0 4px 20px rgba(124,77,255,.3);
}
body.v3-theme.v3-tpl-purple .v3-btn-register:hover {
  background: linear-gradient(180deg, #b388ff, #7c4dff);
  box-shadow: 0 8px 30px rgba(124,77,255,.45);
}

/* ── Template: Orange + Dark ────────────────────────────────── */
body.v3-theme.v3-tpl-orange {
  --v3-accent: #ff6d00;
  --v3-accent-light: #ff9e40;
  --v3-accent-dark: #d17601;
  --v3-accent-glow: rgba(255,109,0,.25);
  --v3-accent-neon: rgba(255,158,64,.6);
  --v3-border-accent: rgba(255,109,0,.3);
  --v3-border-glow: rgba(255,109,0,.5);
  --v3-shadow-accent: 0 4px 24px rgba(255,109,0,.2);
}
body.v3-theme.v3-tpl-orange .v3-btn-login {
  background: linear-gradient(180deg, #014cc9, #02205f);
  border-color: rgba(255,109,0,.4);
}
body.v3-theme.v3-tpl-orange .v3-btn-register {
  background: linear-gradient(180deg, #ff6d00, #d17601);
  color: #111;
  box-shadow: 0 4px 20px rgba(255,109,0,.3);
}
body.v3-theme.v3-tpl-orange .v3-btn-register:hover {
  background: linear-gradient(180deg, #ff9e40, #ff6d00);
  box-shadow: 0 8px 30px rgba(255,109,0,.45);
  color: #111;
}

/* ── Color Picker Toggle Widget ─────────────────────────────── */
.v3-color-picker {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.v3-color-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0b232, #014cc9);
  border: 2px solid rgba(255,255,255,.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: all .3s ease;
}
.v3-color-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.v3-color-options {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: rgba(0,5,26,.95);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.v3-color-picker.open .v3-color-options { display: flex; }
.v3-color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  cursor: pointer;
  transition: all .2s ease;
  position: relative;
}
.v3-color-swatch:hover {
  transform: scale(1.15);
  border-color: rgba(255,255,255,.5);
}
.v3-color-swatch.active::after {
  content: '\2713';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.v3-swatch-red { background: linear-gradient(135deg, #f0b232, #c48a14); }
.v3-swatch-gold { background: linear-gradient(135deg, #d4a843, #b08930); }
.v3-swatch-cyan { background: linear-gradient(135deg, #00e5ff, #009fc5); }
.v3-swatch-green { background: linear-gradient(135deg, #00e676, #00a844); }
.v3-swatch-purple { background: linear-gradient(135deg, #7c4dff, #5a2dc5); }
.v3-swatch-orange { background: linear-gradient(135deg, #ff6d00, #d17601); }

/* ── V3 Game Page Styles ─────────────────────────────────── */
.v3-game-page { padding: 0 0 80px; }

.v3-provider-tabs { padding: 12px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.v3-provider-tabs::-webkit-scrollbar { display: none; }
.v3-provider-tabs ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0 16px; }
.v3-provider-tabs li { flex: 0 0 auto; }
.v3-provider-tabs li a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 10px; background: var(--v3-bg-card); border: 1px solid var(--v3-border); color: var(--v3-text-muted); text-decoration: none; font-size: 11px; transition: all .2s; min-width: 70px; }
.v3-provider-tabs li a:hover, .v3-provider-tabs li a.active { background: var(--v3-bg-card-hover); border-color: var(--v3-border-accent); color: var(--v3-text); }
.v3-provider-tabs li a img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; }

.v3-search-bar { padding: 10px 16px; max-width: 800px; margin: 0 auto; }
.v3-search-bar .form-control { background: var(--v3-bg-input); border: 1px solid var(--v3-border); color: var(--v3-text); border-radius: 10px; padding: 10px 16px; font-size: 14px; }
.v3-search-bar .form-control:focus { border-color: var(--v3-blue); box-shadow: 0 0 0 2px var(--v3-blue-glow); }
.v3-search-bar .form-control::placeholder { color: var(--v3-text-dim); }

.v3-page-title { text-align: center; padding: 16px; color: var(--v3-text); font-size: 20px; font-weight: 700; }
.v3-page-title span { color: var(--v3-accent); }

.v3-game-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 0 16px 16px; }
@media (max-width: 768px) { .v3-game-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 10px 10px; } }

/* Horizontal swipeable game row */
.v3-game-scroll-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 16px 12px; scrollbar-width: thin; scrollbar-color: var(--v3-gold) transparent; }
.v3-game-scroll-row::-webkit-scrollbar { height: 4px; }
.v3-game-scroll-row::-webkit-scrollbar-track { background: transparent; }
.v3-game-scroll-row::-webkit-scrollbar-thumb { background: var(--v3-gold); border-radius: 4px; }
.v3-game-scroll-row .v3-game-card { flex: 0 0 160px; scroll-snap-align: start; }
@media (max-width: 768px) { .v3-game-scroll-row { gap: 10px; padding: 4px 10px 10px; } .v3-game-scroll-row .v3-game-card { flex: 0 0 130px; } }

.v3-game-card { position: relative; border-radius: 12px; overflow: hidden; background: var(--v3-bg-card); border: 1px solid var(--v3-border); transition: all .25s; }
.v3-game-card:hover { transform: translateY(-4px); border-color: var(--v3-border-accent); box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 12px var(--v3-accent-glow); }
.v3-game-card img.v3-game-thumb { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.v3-game-card .v3-game-info { padding: 8px; text-align: center; }
.v3-game-card .v3-game-name { font-size: 11px; color: var(--v3-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.v3-game-card .v3-game-rtp { height: 4px; border-radius: 2px; background: var(--v3-bg-input); margin-top: 6px; overflow: hidden; }
.v3-game-card .v3-game-rtp-bar { height: 100%; border-radius: 2px; transition: width .3s; }
.v3-game-card .v3-game-rtp-bar.rtp-high { background: var(--v3-success); }
.v3-game-card .v3-game-rtp-bar.rtp-mid { background: var(--v3-warning); }
.v3-game-card .v3-game-rtp-bar.rtp-low { background: var(--v3-danger); }
.v3-game-card .v3-game-rtp-text { font-size: 10px; color: var(--v3-text-muted); margin-top: 2px; }
.v3-game-card .v3-game-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.7); display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s; }
.v3-game-card:hover .v3-game-overlay { opacity: 1; }
.v3-game-card .v3-game-overlay a { padding: 6px 20px; border-radius: 6px; font-size: 12px; font-weight: 600; text-decoration: none; text-transform: uppercase; }
.v3-game-card .v3-game-overlay .v3-btn-play { background: linear-gradient(180deg, var(--v3-accent), var(--v3-accent-dark)); color: #fff; }
.v3-game-card .v3-game-overlay .v3-btn-demo { background: transparent; border: 1px solid var(--v3-border); color: var(--v3-text-muted); }
.v3-game-card .v3-game-overlay .v3-btn-demo:hover { border-color: var(--v3-blue); color: var(--v3-blue-light); }

.v3-game-empty { text-align: center; padding: 40px 20px; color: var(--v3-text-dim); }
.v3-game-empty i { font-size: 48px; margin-bottom: 12px; display: block; color: var(--v3-text-muted); }

/* ── HOT SLOT GAMES — Premium Grid ─────────────────────────── */
.v3-hot-section { position: relative; }
.v3-hot-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(180deg, rgba(255,87,34,.06), transparent);
  pointer-events: none;
  border-radius: 16px 16px 0 0;
}
.v3-hot-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  padding: 0 16px 16px;
}

/* ── Swiper Slider Layout for Hot & Populer ─────────────────── */
.v3-hot-swiper,
.v3-pop-swiper {
  position: relative;
  overflow: hidden;
  padding: 0 40px 16px;
}
.v3-hot-swiper .swiper-slide,
.v3-pop-swiper .swiper-slide {
  height: auto;
}
.v3-swiper-next,
.v3-swiper-prev {
  color: #f0b232 !important;
  background: rgba(13,27,57,.85);
  border-radius: 50%;
  width: 34px !important;
  height: 34px !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(240,178,50,.25);
  transition: all .2s;
}
.v3-swiper-next::after,
.v3-swiper-prev::after {
  font-size: 14px !important;
  font-weight: 700;
}
.v3-swiper-next:hover,
.v3-swiper-prev:hover {
  background: rgba(240,178,50,.2);
  border-color: rgba(240,178,50,.5);
}
.v3-swiper-next.swiper-button-disabled,
.v3-swiper-prev.swiper-button-disabled {
  opacity: .2 !important;
}
.v3-hot-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(13,27,57,.95), rgba(8,16,40,.98));
  border: 1px solid rgba(240,178,50,.12);
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.v3-hot-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(240,178,50,.4);
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 20px rgba(240,178,50,.15);
}
.v3-hot-card-img-wrap {
  position: relative;
  overflow: hidden;
}
.v3-hot-card-img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.v3-hot-card:hover .v3-hot-card-img {
  transform: scale(1.08);
}
.v3-hot-card-gif .v3-hot-card-img {
  image-rendering: auto;
}
.v3-hot-gif-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #ff6b35, #ff3d00);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .5px;
  z-index: 2;
  animation: v3-gif-pulse 2s ease-in-out infinite;
}
@keyframes v3-gif-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}
.v3-hot-prov-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  color: rgba(255,255,255,.85);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  z-index: 2;
}
.v3-hot-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.8));
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
  z-index: 3;
}
.v3-hot-card:hover .v3-hot-card-overlay { opacity: 1; }
.v3-hot-btn-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 28px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  background: linear-gradient(135deg, #e65100, #bf360c);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
  box-shadow: 0 4px 20px rgba(230,81,0,.6), inset 0 1px 0 rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.1);
  transition: all .25s ease;
}
.v3-hot-btn-play:hover {
  background: linear-gradient(135deg, #ff6d00, #e65100);
  color: #fff;
  box-shadow: 0 6px 30px rgba(230,81,0,.7), inset 0 1px 0 rgba(255,255,255,.3);
  transform: scale(1.08);
}
.v3-hot-btn-demo {
  display: inline-flex;
  align-items: center;
  padding: 6px 20px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-decoration: none;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  transition: all .25s ease;
}
.v3-hot-btn-demo:hover {
  border-color: var(--v3-blue-light);
  color: var(--v3-blue-light);
}
.v3-hot-card-info {
  padding: 10px 10px 12px;
}
.v3-hot-card-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--v3-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 6px;
  text-align: center;
}
.v3-hot-rtp-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.v3-hot-rtp-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.v3-hot-rtp-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .5s ease;
}
.v3-hot-rtp-fill.rtp-high { background: linear-gradient(90deg, #00e676, #69f0ae); }
.v3-hot-rtp-fill.rtp-mid { background: linear-gradient(90deg, #ffa726, #ffca28); }
.v3-hot-rtp-fill.rtp-low { background: linear-gradient(90deg, #ef5350, #ff8a80); }
.v3-hot-rtp-text {
  font-size: 10px;
  color: var(--v3-text-muted);
  white-space: nowrap;
}

/* ── GAME POPULER — Clean Grid ──────────────────────────────── */
.v3-pop-section { position: relative; }
/* .v3-pop-grid replaced by .v3-pop-swiper */
.v3-pop-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--v3-bg-card);
  border: 1px solid var(--v3-border);
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.v3-pop-card:hover {
  transform: translateY(-5px);
  border-color: rgba(100,181,246,.4);
  box-shadow: 0 10px 32px rgba(0,0,0,.4), 0 0 16px rgba(100,181,246,.1);
}
.v3-pop-card-img-wrap {
  position: relative;
  overflow: hidden;
}
.v3-pop-card-img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.v3-pop-card:hover .v3-pop-card-img {
  transform: scale(1.06);
}
.v3-pop-prov-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  color: rgba(255,255,255,.85);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  z-index: 2;
}
.v3-pop-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.75));
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
  z-index: 3;
}
.v3-pop-card:hover .v3-pop-card-overlay { opacity: 1; }
.v3-pop-btn-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 28px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  background: linear-gradient(135deg, #1565c0, #0d47a1);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
  box-shadow: 0 4px 20px rgba(13,71,161,.6), inset 0 1px 0 rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.1);
  transition: all .25s ease;
}
.v3-pop-btn-play:hover {
  background: linear-gradient(135deg, #1e88e5, #1565c0);
  color: #fff;
  box-shadow: 0 6px 30px rgba(13,71,161,.7), inset 0 1px 0 rgba(255,255,255,.3);
  transform: scale(1.08);
}
.v3-pop-btn-demo {
  display: inline-flex;
  align-items: center;
  padding: 6px 20px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-decoration: none;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  transition: all .25s ease;
}
.v3-pop-btn-demo:hover {
  border-color: #ffca28;
  color: #ffca28;
}
.v3-pop-card-info {
  padding: 10px 10px 12px;
}
.v3-pop-card-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--v3-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 6px;
  text-align: center;
}
.v3-pop-rtp-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.v3-pop-rtp-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.v3-pop-rtp-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .5s ease;
}
.v3-pop-rtp-fill.rtp-high { background: linear-gradient(90deg, #00e676, #69f0ae); }
.v3-pop-rtp-fill.rtp-mid { background: linear-gradient(90deg, #ffa726, #ffca28); }
.v3-pop-rtp-fill.rtp-low { background: linear-gradient(90deg, #ef5350, #ff8a80); }
.v3-pop-rtp-text {
  font-size: 10px;
  color: var(--v3-text-muted);
  white-space: nowrap;
}

/* ── Hot & Popular Responsive ───────────────────────────────── */
@media (max-width: 992px) {
  .v3-hot-swiper, .v3-pop-swiper { padding: 0 32px 12px; }
  .v3-swiper-next, .v3-swiper-prev { width: 28px !important; height: 28px !important; }
  .v3-swiper-next::after, .v3-swiper-prev::after { font-size: 12px !important; }
}
@media (max-width: 768px) {
  .v3-hot-swiper, .v3-pop-swiper { padding: 0 10px 10px; }
  .v3-swiper-next, .v3-swiper-prev { display: none !important; }
  .v3-hot-card-name, .v3-pop-card-name { font-size: 10px; }
  .v3-hot-rtp-text, .v3-pop-rtp-text { font-size: 9px; }
  .v3-hot-btn-play { padding: 6px 16px; font-size: 11px; }
  .v3-pop-btn-play { padding: 6px 16px; font-size: 11px; }
}
@media (max-width: 480px) {
  .v3-hot-card, .v3-pop-card { border-radius: 10px; }
  .v3-hot-card-info, .v3-pop-card-info { padding: 6px 6px 8px; }
  .v3-hot-card-name, .v3-pop-card-name { font-size: 9px; }
  .v3-hot-gif-badge { font-size: 8px; padding: 1px 5px; }
  .v3-hot-prov-badge, .v3-pop-prov-badge { font-size: 8px; padding: 1px 5px; }
}

/* Togel Market Cards */
.v3-togel-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 12px 16px; }
.v3-togel-actions a, .v3-togel-actions button { padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.v3-togel-actions .v3-btn-prediksi { background: var(--v3-blue); color: #fff; }
.v3-togel-actions .v3-btn-panduan { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; }
.v3-togel-actions .v3-btn-mimpi { background: linear-gradient(135deg, #059669, #34d399); color: #fff; }
.v3-togel-market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; padding: 16px; }
@media (max-width: 576px) { .v3-togel-market-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; } }
.v3-togel-card { background: rgba(13,27,57,0.85); border: 1px solid var(--v3-border); border-radius: 12px; overflow: hidden; text-align: center; position: relative; }
.v3-togel-card-header { padding: 14px 12px 8px; background-size: cover; background-position: center; position: relative; }
.v3-togel-card-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(13,27,57,0.8)); border-radius: 12px 12px 0 0; }
.v3-togel-card-header * { position: relative; z-index: 1; }
.v3-togel-card h3 { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.v3-togel-card .v3-togel-schedule { font-size: 10px; color: var(--v3-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-togel-card .v3-togel-schedule .text-success { color: var(--v3-green) !important; }
.v3-togel-card .v3-togel-schedule .text-danger { color: var(--v3-accent) !important; }
.v3-togel-result { display: flex; justify-content: center; gap: 4px; padding: 10px 12px 6px; }
.v3-togel-result .v3-togel-digit { width: 36px; height: 42px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--v3-blue), var(--v3-accent-dark)); color: #fff; font-size: 20px; font-weight: 800; border-radius: 6px; }
@media (max-width: 576px) { .v3-togel-result .v3-togel-digit { width: 28px; height: 34px; font-size: 16px; } }
.v3-togel-meta { font-size: 11px; color: var(--v3-text-dim); padding: 4px 12px 8px; }
.v3-togel-meta small { display: block; }
.v3-togel-card-footer { display: flex; gap: 6px; justify-content: center; padding: 8px 10px 12px; flex-wrap: wrap; }
.v3-togel-card-footer a, .v3-togel-card-footer button { padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.v3-togel-card-footer .v3-btn-bet { background: linear-gradient(180deg, var(--v3-accent), var(--v3-accent-dark)); color: #fff; }
.v3-togel-card-footer .v3-btn-bet i { animation: v3-pulse 1.5s infinite; }
.v3-togel-card-footer .v3-btn-closed { background: rgba(255,255,255,0.1); color: var(--v3-text-dim); cursor: not-allowed; }
.v3-togel-card-footer .v3-btn-live { background: var(--v3-green); color: #fff; }
.v3-togel-card-footer .v3-btn-live.v3-live-on i { animation: v3-pulse 1s infinite; }
.v3-togel-card-footer .v3-btn-stats { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; }
@keyframes v3-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Auth Pages */
body.v3-theme .v3-auth-page { min-height: 60vh; display: flex !important; align-items: center !important; justify-content: center !important; padding: 30px 16px; position: relative; z-index: 1; }
body.v3-theme .v3-auth-card { width: 100%; max-width: 480px; background: rgba(13,27,57,0.85) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--v3-border) !important; border-radius: 16px !important; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
body.v3-theme .v3-auth-header { text-align: center; padding: 28px 24px 16px; }
body.v3-theme .v3-auth-header h2 { font-size: 22px !important; font-weight: 700 !important; color: #fff !important; margin: 0 0 6px !important; text-transform: none !important; }
body.v3-theme .v3-auth-header p { font-size: 13px; color: var(--v3-text-dim) !important; margin: 0; }
body.v3-theme .v3-auth-body { padding: 0 24px 24px; }
body.v3-theme .v3-auth-body .v3-form-group { margin-bottom: 16px; }
body.v3-theme .v3-auth-body .v3-form-label { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: var(--v3-text-secondary) !important; margin-bottom: 6px !important; text-transform: none !important; }
body.v3-theme .v3-auth-body .v3-form-label .text-danger { color: var(--v3-accent) !important; }
body.v3-theme .v3-auth-body .v3-form-control { width: 100% !important; padding: 10px 14px !important; background: rgba(255,255,255,0.06) !important; border: 1px solid var(--v3-border) !important; border-radius: 8px !important; color: #fff !important; font-size: 14px !important; outline: none !important; transition: border-color .2s; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
body.v3-theme .v3-auth-body .v3-form-control:focus { border-color: var(--v3-blue) !important; background: rgba(255,255,255,0.1) !important; box-shadow: 0 0 0 3px rgba(1,76,201,0.25) !important; }
body.v3-theme .v3-auth-body .v3-form-control::placeholder { color: var(--v3-text-muted) !important; }
body.v3-theme .v3-auth-body select.v3-form-control { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px !important; padding-right: 36px !important; background-color: rgba(255,255,255,0.06) !important; }
body.v3-theme .v3-auth-body select.v3-form-control option { background: #0d1b39 !important; color: #fff !important; }
body.v3-theme .v3-auth-body .v3-form-hint { font-size: 11px; color: var(--v3-text-muted); margin-top: 4px; display: block; }
body.v3-theme .v3-auth-body .v3-form-section { background: linear-gradient(135deg, var(--v3-blue), var(--v3-accent-dark)) !important; color: #fff !important; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; margin: 20px 0 16px; text-align: center; }
body.v3-theme .v3-auth-body .v3-form-warning { background: rgba(239,68,68,0.15) !important; border: 1px solid rgba(239,68,68,0.3) !important; color: var(--v3-accent) !important; padding: 8px 12px; border-radius: 6px; font-size: 12px; margin-bottom: 16px; text-align: center; }
body.v3-theme .v3-auth-body .v3-show-pass { float: right; font-size: 11px; color: var(--v3-green) !important; cursor: pointer; background: rgba(16,185,129,0.15) !important; padding: 2px 8px; border-radius: 4px; border: none; margin-bottom: 4px; }
body.v3-theme .v3-btn-auth { display: block !important; width: 100% !important; padding: 12px !important; border: none !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer; text-align: center; text-decoration: none !important; margin-top: 16px; transition: transform .15s, box-shadow .15s; }
body.v3-theme .v3-btn-auth:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
body.v3-theme .v3-btn-auth.v3-btn-submit { background: linear-gradient(180deg, var(--v3-green), #059669) !important; color: #fff !important; }
body.v3-theme .v3-btn-auth.v3-btn-alt { background: linear-gradient(180deg, var(--v3-blue), #0141ab) !important; color: #fff !important; margin-top: 10px; }
body.v3-theme .v3-auth-divider { text-align: center; color: var(--v3-text-muted) !important; font-size: 13px; margin: 16px 0 8px; position: relative; }
body.v3-theme .v3-auth-divider::before, body.v3-theme .v3-auth-divider::after { content: ''; position: absolute; top: 50%; width: 35%; height: 1px; background: var(--v3-border); }
body.v3-theme .v3-auth-divider::before { left: 0; }
body.v3-theme .v3-auth-divider::after { right: 0; }
body.v3-theme .v3-auth-link { text-align: right; margin-bottom: 8px; }
body.v3-theme .v3-auth-link a { font-size: 12px; color: var(--v3-blue) !important; text-decoration: none; }
body.v3-theme .v3-auth-link a:hover { text-decoration: underline; }
@media (max-width: 576px) { body.v3-theme .v3-auth-page { padding: 20px 12px; } body.v3-theme .v3-auth-card { border-radius: 12px !important; } body.v3-theme .v3-auth-body { padding: 0 16px 20px; } body.v3-theme .v3-auth-header { padding: 20px 16px 12px; } }

/* Member Layout */
.v3-member-page { padding: 20px 16px; max-width: 1200px; margin: 0 auto; }
.v3-member-container { display: flex; gap: 20px; align-items: flex-start; }
.v3-member-sidebar { width: 280px; flex-shrink: 0; background: rgba(13,27,57,0.85); backdrop-filter: blur(16px); border: 1px solid var(--v3-border); border-radius: 14px; overflow: hidden; position: sticky; top: 80px; }
.v3-member-profile { text-align: center; padding: 24px 16px 16px; border-bottom: 1px solid var(--v3-border); }
.v3-member-avatar { font-size: 48px; color: var(--v3-blue); margin-bottom: 8px; }
.v3-member-profile h4 { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.v3-member-profile small { font-size: 11px; color: var(--v3-text-muted); }
.v3-member-nav { padding: 8px 0; }
.v3-member-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 13px; color: var(--v3-text-secondary); text-decoration: none; transition: all .2s; }
.v3-member-nav a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.v3-member-nav a.active { background: linear-gradient(90deg, rgba(1,76,201,0.2), transparent); color: var(--v3-blue); border-left: 3px solid var(--v3-blue); }
.v3-member-nav a i { font-size: 16px; width: 20px; text-align: center; }
.v3-member-nav .v3-nav-logout { color: var(--v3-accent); }
.v3-member-nav .v3-nav-logout:hover { background: rgba(240,178,50,0.1); }
.v3-member-news { padding: 12px 16px; border-top: 1px solid var(--v3-border); }
.v3-member-news h5 { font-size: 13px; font-weight: 600; color: var(--v3-text-secondary); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.v3-news-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.v3-news-item img { width: 40px; height: 28px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.v3-news-item span { font-size: 11px; color: var(--v3-text-dim); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.v3-member-content { flex: 1; min-width: 0; }
.v3-member-card { background: rgba(13,27,57,0.85); backdrop-filter: blur(16px); border: 1px solid var(--v3-border); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.v3-member-card-header { padding: 16px 20px; border-bottom: 1px solid var(--v3-border); display: flex; align-items: center; gap: 8px; }
.v3-member-card-header h3 { font-size: 16px; font-weight: 700; color: #fff; margin: 0; }
.v3-member-card-body { padding: 20px; }
.v3-member-balance { text-align: center; padding: 20px; background: linear-gradient(135deg, rgba(1,76,201,0.15), rgba(240,178,50,0.1)); border-radius: 12px; margin-bottom: 20px; }
.v3-member-balance h2 { font-size: 28px; font-weight: 800; color: var(--v3-green); margin: 0; }
.v3-member-balance small { font-size: 12px; color: var(--v3-text-muted); }
.v3-member-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.v3-member-actions a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--v3-border); border-radius: 10px; color: var(--v3-text-secondary); text-decoration: none; font-size: 12px; font-weight: 600; transition: all .2s; }
.v3-member-actions a:hover { background: rgba(1,76,201,0.15); border-color: var(--v3-blue); color: #fff; }
.v3-member-actions a i { font-size: 22px; color: var(--v3-blue); }
.v3-member-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.v3-member-table th { background: rgba(1,76,201,0.15); color: var(--v3-blue); padding: 10px 12px; text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; border-bottom: 1px solid var(--v3-border); }
.v3-member-table td { padding: 10px 12px; color: var(--v3-text-secondary); border-bottom: 1px solid rgba(255,255,255,0.04); }
.v3-member-table tr:hover td { background: rgba(255,255,255,0.02); }
.v3-member-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--v3-border); padding: 0 16px; overflow-x: auto; }
.v3-member-tabs a { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--v3-text-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: all .2s; }
.v3-member-tabs a:hover { color: var(--v3-text-secondary); }
.v3-member-tabs a.active { color: var(--v3-blue); border-bottom-color: var(--v3-blue); }
@media (max-width: 768px) {
  .v3-member-container { flex-direction: column; }
  .v3-member-sidebar { width: 100%; position: static; }
  .v3-member-news { display: none; }
  .v3-member-page { padding: 12px 10px; }
}

/* ══════════════════════════════════════════════════════════════
   Public Page Layout (FAQ, VIP, Tournament)
   ══════════════════════════════════════════════════════════════ */
.v3-page-section { padding: 20px 0; position: relative; z-index: 1; }
.v3-page-container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.v3-page-header { text-align: center; padding: 30px 16px 24px; }
.v3-page-header h2 { font-size: 24px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.v3-page-header p { font-size: 14px; color: var(--v3-text-muted); margin: 0; }

/* ── FAQ Page ─────────────────────────────────────────────── */
.v3-faq-list { max-width: 800px; margin: 0 auto; }
.v3-faq-category { margin-top: 28px; margin-bottom: 12px; }
.v3-faq-category h3 { font-size: 16px; font-weight: 700; color: var(--v3-gold); display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 4px; }
.v3-faq-item { background: rgba(13,27,57,0.85); border: 1px solid var(--v3-border); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.v3-faq-question { display: flex; width: 100%; align-items: center; justify-content: space-between; background: none; border: none; color: #fff; padding: 14px 16px; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; gap: 12px; }
.v3-faq-question i { color: var(--v3-text-muted); transition: transform .25s; flex-shrink: 0; }
.v3-faq-item.open .v3-faq-question i { transform: rotate(180deg); }
.v3-faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.v3-faq-item.open .v3-faq-answer { max-height: 500px; }
.v3-faq-answer p, .v3-faq-answer ul { padding: 0 16px 14px; margin: 0; font-size: 13px; color: var(--v3-text-secondary); line-height: 1.7; }
.v3-faq-answer ul { padding-left: 32px; list-style: disc; }
.v3-faq-answer ul li { margin-bottom: 4px; }

/* ── Tournament Page ──────────────────────────────────────── */
.v3-tournament-section { }
.v3-tournament-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.v3-tournament-card { background: rgba(13,27,57,0.85); border: 1px solid var(--v3-border); border-radius: 14px; overflow: hidden; }
.v3-tournament-banner { position: relative; }
.v3-tournament-banner img { width: 100%; height: 160px; object-fit: cover; display: block; }
.v3-tournament-badge { position: absolute; top: 10px; right: 10px; background: var(--v3-accent); color: #fff; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.v3-tournament-badge i { animation: v3-pulse 1s infinite; }
.v3-tournament-body { padding: 16px; }
.v3-tournament-body h4 { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.v3-tournament-meta { font-size: 12px; color: var(--v3-text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.v3-btn-tournament { background: linear-gradient(180deg, var(--v3-blue), #0141ab); color: #fff; border: none; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.v3-btn-tournament:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.v3-tournament-detail { max-height: 0; overflow: hidden; transition: max-height .4s ease; padding: 0 16px; font-size: 13px; color: var(--v3-text-secondary); line-height: 1.6; }
.v3-tournament-detail.open { max-height: 2000px; padding: 0 16px 16px; }
.v3-tournament-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.v3-step-card { background: rgba(13,27,57,0.85); border: 1px solid var(--v3-border); border-radius: 12px; padding: 20px 16px; text-align: center; }
.v3-step-number { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(180deg, var(--v3-blue), var(--v3-accent-dark)); color: #fff; font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.v3-step-card h5 { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.v3-step-card p { font-size: 12px; color: var(--v3-text-muted); margin: 0; line-height: 1.5; }
.v3-empty-state { text-align: center; padding: 50px 20px; }
.v3-empty-state h4 { color: #fff; font-size: 18px; margin: 12px 0 6px; }
.v3-empty-state p { color: var(--v3-text-muted); font-size: 13px; }

/* Leaderboard */
.v3-leaderboard { overflow-x: auto; }
.v3-leaderboard-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.v3-leaderboard-table thead th { background: rgba(1,76,201,0.2); color: var(--v3-blue); padding: 12px 14px; text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; border-bottom: 1px solid var(--v3-border); }
.v3-leaderboard-table tbody td { padding: 12px 14px; color: var(--v3-text-secondary); border-bottom: 1px solid rgba(255,255,255,0.04); }
.v3-leaderboard-table tbody tr:hover td { background: rgba(255,255,255,0.03); }
.v3-rank { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.v3-rank-1 { color: #FFD700; }
.v3-rank-2 { color: #C0C0C0; }
.v3-rank-3 { color: #CD7F32; }
.v3-prize { color: var(--v3-green); font-weight: 700; }

/* ── VIP / Status Levels Page ─────────────────────────────── */
.v3-vip-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.v3-vip-card { background: rgba(13,27,57,0.85); border: 1px solid var(--v3-border); border-radius: 14px; padding: 24px 20px; text-align: center; position: relative; transition: transform .2s, box-shadow .2s; }
.v3-vip-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.v3-vip-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--v3-gold, #FFD700), #FFA500); color: #000; padding: 3px 14px; border-radius: 20px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.v3-vip-icon { font-size: 40px; margin-bottom: 12px; }
.v3-vip-card h3 { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 4px; }
.v3-vip-level { font-size: 12px; color: var(--v3-text-muted); margin-bottom: 16px; }
.v3-vip-benefits { list-style: none; padding: 0; margin: 0 0 16px; text-align: left; }
.v3-vip-benefits li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--v3-text-secondary); border-bottom: 1px solid rgba(255,255,255,0.04); }
.v3-vip-benefits li i { color: var(--v3-green); flex-shrink: 0; }
.v3-vip-requirement { padding: 10px; background: rgba(255,255,255,0.04); border-radius: 8px; }
.v3-vip-requirement small { font-size: 12px; color: var(--v3-text-muted); }
.v3-vip-bronze .v3-vip-icon { color: #CD7F32; }
.v3-vip-silver .v3-vip-icon { color: #C0C0C0; }
.v3-vip-gold { border-color: rgba(255,215,0,0.3); }
.v3-vip-gold .v3-vip-icon { color: #FFD700; }
.v3-vip-platinum .v3-vip-icon { color: #E5E4E2; }

/* ══════════════════════════════════════════════════════════════
   Responsive: 992px breakpoint
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .v3-navbar .v3-nav-inner { gap: 2px; }
  .v3-nav-item { font-size: 10px; padding: 8px 10px; min-width: 65px; }
  .v3-service-grid { grid-template-columns: 1fr; }
  .v3-info-cards { grid-template-columns: 1fr; }
  .v3-tournament-grid { grid-template-columns: repeat(2, 1fr); }
  .v3-vip-tiers { grid-template-columns: repeat(2, 1fr); }
  .v3-tournament-steps { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   Responsive: 320px breakpoint
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 320px) {
  .v3-topbar { font-size: 10px; }
  .v3-authbar-inner { gap: 4px; }
  .v3-logo img { max-height: 30px; }
  .v3-btn { font-size: 10px; padding: 4px 8px; }
  .v3-navbar .v3-nav-inner { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .v3-nav-item { font-size: 9px; padding: 6px 6px; white-space: nowrap; min-width: 55px; }
  .v3-section-title { font-size: 13px; }
  .v3-jp-number { font-size: 18px; }
  .v3-game-item-img { border-radius: 4px; }
  .v3-game-item-name { font-size: 9px; }
  .v3-togel-card { border-radius: 8px; }
  .v3-togel-market { font-size: 10px; }
  .v3-togel-number { font-size: 16px; }
  .v3-bottom-nav { gap: 0; }
  .v3-bottom-nav-item { font-size: 9px; padding: 6px 2px; }
  .v3-bottom-nav-item i { font-size: 16px; }
  .v3-page-header h2 { font-size: 18px; }
  .v3-page-header p { font-size: 12px; }
  .v3-faq-question { font-size: 12px; padding: 10px 12px; }
  .v3-faq-answer p, .v3-faq-answer ul { font-size: 11px; padding: 0 12px 10px; }
  .v3-vip-tiers { grid-template-columns: 1fr; }
  .v3-tournament-grid { grid-template-columns: 1fr; }
  .v3-tournament-steps { grid-template-columns: 1fr; }
  .v3-step-card { padding: 14px 12px; }
  .v3-leaderboard-table { font-size: 11px; }
  .v3-leaderboard-table thead th, .v3-leaderboard-table tbody td { padding: 8px 8px; }
  .v3-member-actions { grid-template-columns: repeat(2, 1fr); }
  .v3-member-balance h2 { font-size: 22px; }
  body.v3-theme .v3-auth-header h2 { font-size: 18px !important; }
  body.v3-theme .v3-auth-body .v3-form-control { font-size: 12px !important; padding: 8px 10px !important; }
}

/* ══════════════════════════════════════════════════════════════
   V3 Profile / Dashboard Page
   ══════════════════════════════════════════════════════════════ */
.v3-profile-page {
  padding: 24px 0 40px;
  min-height: 60vh;
}
.v3-profile-card {
  background: rgba(10,22,50,0.92);
  border: 1px solid rgba(1,76,201,0.2);
  border-radius: 10px;
  overflow: hidden;
}
.v3-profile-card-header {
  background: linear-gradient(135deg, #0d2147, #0a1a3e);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(1,76,201,0.25);
  display: flex;
  align-items: center;
  gap: 8px;
}
.v3-profile-card-header i {
  font-size: 16px;
  color: var(--v3-green, #2ecc71);
}
.v3-profile-card-body {
  padding: 18px;
}
.v3-profile-section-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(1,76,201,0.15);
}
.v3-profile-info-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.v3-profile-info-row {
  display: flex;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.v3-profile-info-row:last-child { border-bottom: none; }
.v3-profile-label {
  width: 110px;
  flex-shrink: 0;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}
.v3-profile-value {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.v3-badge-success {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  background: rgba(46,204,113,0.15);
  color: #2ecc71;
}
.v3-badge-danger {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  background: rgba(231,76,60,0.15);
  color: #e74c3c;
}
.v3-btn-sm {
  display: inline-block;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none !important;
  transition: opacity .2s;
}
.v3-btn-sm:hover { opacity: .85; }
.v3-btn-activate {
  background: #2ecc71;
  color: #fff !important;
}

/* Rekening Table */
.v3-profile-rekening-table {
  overflow-x: auto;
}
.v3-profile-rekening-table table {
  width: 100%;
  border-collapse: collapse;
}
.v3-profile-rekening-table thead th {
  background: rgba(1,76,201,0.2);
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px 14px;
  text-align: left;
}
.v3-profile-rekening-table tbody td {
  padding: 10px 14px;
  font-size: 13px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.v3-profile-note {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  margin: 14px 0 0;
  font-style: italic;
}
.v3-profile-edit-links {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.v3-btn-profile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  background: rgba(1,76,201,0.2);
  color: #fff !important;
  text-decoration: none !important;
  border: 1px solid rgba(1,76,201,0.3);
  transition: all .2s;
}
.v3-btn-profile:hover {
  background: rgba(1,76,201,0.35);
}

/* Password Form */
.v3-profile-form-group {
  margin-bottom: 16px;
}
.v3-profile-form-group label,
.v3-profile-form-group .v3-profile-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  margin-bottom: 6px;
  width: auto !important;
  flex-shrink: unset;
}
.v3-profile-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(1,76,201,0.25);
  border-radius: 6px;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.v3-profile-input:focus {
  border-color: rgba(1,76,201,0.6);
  background: rgba(255,255,255,0.08);
}
.v3-profile-input::placeholder {
  color: rgba(255,255,255,.25);
}
select.v3-profile-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.5)' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
select.v3-profile-input option {
  background: #0a1628;
  color: #fff;
}
.v3-profile-form-action {
  text-align: right;
  margin-top: 8px;
}
.v3-btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: #2ecc71;
  color: #fff;
  transition: background .2s;
}
.v3-btn-submit:hover { background: #27ae60; }

/* Balance Card */
.v3-profile-balance {
  font-size: 28px;
  font-weight: 800;
  color: #2ecc71;
  margin-bottom: 16px;
}
.v3-profile-quick-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.v3-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none !important;
  transition: all .2s;
}
.v3-btn-depo {
  background: #2ecc71;
  color: #fff !important;
}
.v3-btn-depo:hover { background: #27ae60; }
.v3-btn-wd {
  background: #e74c3c;
  color: #fff !important;
}
.v3-btn-wd:hover { background: #c0392b; }

/* Statistics */
.v3-stat-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.v3-stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.v3-stat-item:last-child { border-bottom: none; }
.v3-stat-label {
  font-size: 13px;
  color: rgba(255,255,255,.5);
}
.v3-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.v3-text-green { color: #2ecc71 !important; }
.v3-text-red { color: #e74c3c !important; }

/* Transaction Table */
.v3-profile-txn-table {
  width: 100%;
  border-collapse: collapse;
}
.v3-profile-txn-table thead th {
  background: rgba(1,76,201,0.15);
  color: rgba(255,255,255,.6);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px 18px;
  text-align: left;
}
.v3-profile-txn-table tbody td {
  padding: 9px 18px;
  font-size: 13px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Alert */
.v3-profile-alert {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
  gap: 8px;
}
.v3-profile-alert .v3-alert-close {
  margin-left: auto;
  flex-shrink: 0;
}
.v3-profile-alert.success {
  background: rgba(46,204,113,0.12);
  color: #2ecc71;
  border: 1px solid rgba(46,204,113,0.25);
}
.v3-profile-alert.error {
  background: rgba(231,76,60,0.12);
  color: #e74c3c;
  border: 1px solid rgba(231,76,60,0.25);
}
.v3-alert-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
  padding: 0 0 0 12px;
  line-height: 1;
  opacity: .7;
}
.v3-alert-close:hover { opacity: 1; }

/* Profile Responsive */
@media (max-width: 768px) {
  .v3-profile-page { padding: 16px 0 100px; }
  .v3-profile-label { width: 90px; font-size: 12px; }
  .v3-profile-value { font-size: 12px; }
  .v3-profile-edit-links { flex-direction: column; }
  .v3-profile-balance { font-size: 22px; }
  .v3-profile-quick-actions { flex-direction: row; }
  .v3-btn-action { justify-content: center; flex: 1; padding: 10px 12px; }
}

/* Deposit Iframe */
.v3-deposit-iframe-wrap {
  position: relative;
  width: 100%;
  min-height: 600px;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}
.v3-deposit-iframe-wrap iframe {
  display: block;
  width: 100%;
  min-height: 600px;
  border: none;
}
.v3-profile-note {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin: 8px 0 0;
}
.v3-profile-note a {
  color: #22c55e;
  text-decoration: underline;
}
.v3-profile-alert a {
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
}

/* Catatan box inside v3 forms */
.v3-profile-card #catatan .alert {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(1,76,201,0.25);
  color: #fff;
  border-radius: 8px;
  margin: 10px 0 0;
  padding: 14px 16px;
}
.v3-profile-card #catatan .alert h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}
.v3-profile-card #catatan .alert li {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  list-style: disc inside;
  margin-bottom: 2px;
}
.v3-profile-card #catatan .alert .close {
  color: rgba(255,255,255,0.5);
  text-shadow: none;
  opacity: .7;
}
.v3-profile-card #catatan .alert .close:hover {
  color: #fff;
  opacity: 1;
}
.v3-profile-card #catatan .alert .clip {
  color: rgba(255,255,255,0.5);
  cursor: pointer;
}
.v3-profile-card #catatan .alert .clip:hover {
  color: #fff;
}

/* Hide number input spinners */
.v3-profile-input[type="number"]::-webkit-outer-spin-button,
.v3-profile-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.v3-profile-input[type="number"] {
  -moz-appearance: textfield;
}

/* ===== Custom Confirm Modal ===== */
.v3-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
.v3-modal-overlay.active {
  display: flex;
}
.v3-modal-box {
  background: linear-gradient(145deg, #0f1d35, #0a1628);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: v3ModalIn 0.25s ease;
}
@keyframes v3ModalIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.v3-modal-icon {
  font-size: 48px;
  color: #ffc107;
  margin-bottom: 16px;
}
.v3-modal-title {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.v3-modal-text {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  margin-bottom: 24px;
  line-height: 1.5;
}
.v3-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.v3-modal-btn {
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 120px;
}
.v3-modal-btn-cancel {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}
.v3-modal-btn-cancel:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.v3-modal-btn-confirm {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: #fff;
}

/* ============ V3 History Tabs ============ */
.v3-history-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 4px;
}
.v3-history-tabs::-webkit-scrollbar { display: none; }
.v3-history-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 8px;
  transition: all 0.2s;
}
.v3-history-tab:hover {
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.05);
  text-decoration: none;
}
.v3-history-tab.active {
  color: #fff;
  background: rgba(99,179,237,0.15);
  font-weight: 600;
}
.v3-history-tab i {
  font-size: 14px;
}
@media (max-width: 576px) {
  .v3-history-tab {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ============ V3 Transaction List ============ */
.v3-txn-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.v3-txn-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.v3-txn-item:last-child { border-bottom: none; }
.v3-txn-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}
.v3-txn-icon.deposit { background: linear-gradient(135deg, #28a745, #20c997); }
.v3-txn-icon.withdraw { background: linear-gradient(135deg, #007bff, #6f42c1); }
.v3-txn-icon.bonus { background: linear-gradient(135deg, #fd7e14, #ffc107); }
.v3-txn-icon.gameplay { background: linear-gradient(135deg, #17a2b8, #007bff); }
.v3-txn-info {
  flex: 1;
  min-width: 0;
}
.v3-txn-title {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}
.v3-txn-date {
  color: rgba(255,255,255,0.4);
  font-size: 12px;
}
.v3-txn-right {
  text-align: right;
  flex-shrink: 0;
}
.v3-txn-amount {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.v3-txn-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.v3-txn-badge:hover { opacity: 0.8; text-decoration: none; }
.v3-txn-badge.pending { background: rgba(0,123,255,0.2); color: #63b3ed; }
.v3-txn-badge.success { background: rgba(40,167,69,0.2); color: #68d391; }
.v3-txn-badge.failed { background: rgba(220,53,69,0.2); color: #fc8181; }
.v3-txn-badge.win { background: rgba(40,167,69,0.2); color: #68d391; }
.v3-txn-badge.lose { background: rgba(220,53,69,0.2); color: #fc8181; }
.v3-txn-badge.waiting { background: rgba(255,193,7,0.2); color: #fbd38d; }

/* ============ V3 Dark Table ============ */
.v3-dark-table {
  width: 100%;
  border-collapse: collapse;
}
.v3-dark-table thead th {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}
.v3-dark-table tbody td {
  padding: 10px 12px;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: middle;
}
.v3-dark-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}
.v3-dark-table .text-success { color: #68d391 !important; }
.v3-dark-table .text-danger { color: #fc8181 !important; }
.v3-dark-table .text-warning { color: #fbd38d !important; }
.v3-dark-table .text-info { color: #63b3ed !important; }

/* ============ V3 Pagination ============ */
.v3-pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.v3-pagination a, .v3-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.05);
  text-decoration: none;
  transition: all 0.2s;
}
.v3-pagination a:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  text-decoration: none;
}
.v3-pagination .active {
  background: rgba(99,179,237,0.2);
  color: #63b3ed;
  font-weight: 600;
}

/* ============ V3 Referral Stats ============ */
.v3-ref-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.v3-ref-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 16px 12px;
  text-align: center;
}
.v3-ref-stat h5 {
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.v3-ref-stat .v3-ref-value {
  color: #68d391;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
.v3-ref-stat small {
  color: rgba(255,255,255,0.4);
  font-size: 11px;
}
@media (max-width: 576px) {
  .v3-ref-stats { grid-template-columns: 1fr; }
}

/* ============ V3 Info Box ============ */
.v3-info-box {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  color: rgba(255,255,255,0.85);
}
.v3-info-box p {
  margin-bottom: 6px;
}
.v3-info-box li {
  color: rgba(255,255,255,0.7);
  margin-bottom: 4px;
}

/* ============ V3 DataTables Override ============ */
.v3-profile-card-body .dataTables_wrapper .dataTables_length select,
.v3-profile-card-body .dataTables_wrapper .dataTables_filter input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  border-radius: 6px;
  padding: 4px 8px;
}
.v3-profile-card-body .dataTables_wrapper .dataTables_length label,
.v3-profile-card-body .dataTables_wrapper .dataTables_filter label,
.v3-profile-card-body .dataTables_wrapper .dataTables_info,
.v3-profile-card-body .dataTables_wrapper .dataTables_paginate {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
}
.v3-profile-card-body .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: rgba(255,255,255,0.6) !important;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  margin: 0 2px;
}
.v3-profile-card-body .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: rgba(99,179,237,0.2) !important;
  color: #63b3ed !important;
  border-color: rgba(99,179,237,0.3) !important;
}
.v3-profile-card-body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* V3 form table override */
.v3-profile-card-body .table {
  color: rgba(255,255,255,0.85);
}
.v3-profile-card-body .table td {
  border-color: rgba(255,255,255,0.06);
}
.v3-profile-card-body .form-control {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  border-radius: 8px;
}
.v3-profile-card-body .form-control:focus {
  background: rgba(255,255,255,0.08);
  border-color: rgba(99,179,237,0.4);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(99,179,237,0.15);
}
.v3-profile-card-body .form-control:disabled {
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.5);
}
.v3-profile-card-body select.form-control option {
  background: #0a1628;
  color: #fff;
}
.v3-profile-card-body .input-group .btn {
  border-radius: 0 8px 8px 0;
}
.v3-profile-card-body .input-group .form-control {
  border-radius: 8px 0 0 8px;
}

/* V3 section header */
.v3-section-header {
  background: linear-gradient(135deg, rgba(0,123,255,0.15), rgba(99,179,237,0.1));
  border: 1px solid rgba(99,179,237,0.15);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════════════════
   Contact Us Cards
   ══════════════════════════════════════════════════════════════ */
.v3-contact-card {
  background: var(--v3-bg-card);
  border: 1px solid var(--v3-border);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  transition: all .3s;
  height: 100%;
}
.v3-contact-card:hover {
  border-color: rgba(99,179,237,.3);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.v3-contact-icon {
  font-size: 40px;
  margin-bottom: 12px;
  line-height: 1;
}
.v3-contact-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.v3-contact-card p {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin: 0 0 16px;
}

/* ══════════════════════════════════════════════════════════════
   V3 Preloader (CSS-only, non-interactive)
   ══════════════════════════════════════════════════════════════ */
.v3-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--v3-bg-body, #020b1f);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: opacity .4s ease, visibility .4s ease;
}
.v3-preloader.v3-preloader-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Footer Provider Section (v3 Upgrade) ─────────────────── */
.footer-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #74dbff;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Chakra Petch', sans-serif;
  position: relative;
  display: inline-block;
}
.footer-section-title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--v3-gold, #f0b232), transparent);
  border-radius: 1px;
}
.hover-list > li {
  transition: transform .25s ease;
}
.hover-list > li:hover {
  transform: translateY(-2px);
}
}
.v3-preloader-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255,255,255,.1);
  border-top-color: var(--v3-gold, #d4a528);
  border-radius: 50%;
  animation: v3-spin 1s linear infinite;
}
.v3-preloader-text {
  font-size: 13px;
  color: rgba(255,255,255,.4);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
@keyframes v3-spin {
  to { transform: rotate(360deg); }
}
.v3-section-header h5 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.v3-section-header small {
  color: rgba(255,255,255,0.5);
  font-size: 12px;
}
.v3-modal-btn-confirm:hover {
  background: linear-gradient(135deg, #218838, #1baa80);
  box-shadow: 0 4px 15px rgba(40,167,69,0.4);
}

/* ===== Payment Page v3 ===== */
.v3-payment-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
.v3-payment-status-badge.pending {
  background: rgba(255,193,7,0.15);
  color: #ffc107;
}
.v3-payment-status-badge.success {
  background: rgba(40,167,69,0.15);
  color: #28a745;
}
.v3-payment-status-badge.rejected {
  background: rgba(220,53,69,0.15);
  color: #dc3545;
}
.v3-payment-status-badge i {
  font-size: 8px;
}
.v3-payment-info-grid {
  display: grid;
  gap: 16px;
}
.v3-payment-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v3-payment-info-item .label {
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.v3-payment-info-item .value {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  word-break: break-all;
}
.v3-payment-info-item .value .clip {
  color: rgba(255,255,255,0.4);
  transition: color 0.2s;
}
.v3-payment-info-item .value .clip:hover {
  color: #4fc3f7;
}
.v3-payment-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 0;
}
.v3-payment-note {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 16px;
  margin-top: 16px;
}
.v3-payment-note .note-title {
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.v3-payment-note li {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  line-height: 1.8;
  list-style: none;
  padding-left: 16px;
  position: relative;
}
.v3-payment-note li::before {
  content: '\2022';
  color: #4fc3f7;
  position: absolute;
  left: 0;
}
.v3-payment-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}
.v3-payment-bank-logo {
  padding: 6px;
  background: rgba(255,255,255,0.9);
  border-radius: 8px;
  max-width: 80px;
  height: auto;
}
.v3-payment-qris-img {
  padding: 8px;
  background: #fff;
  border-radius: 10px;
  max-width: 200px;
  height: auto;
}
.v3-payment-nominal {
  color: #28a745 !important;
  font-size: 20px !important;
}
.v3-payment-rate-box {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 16px;
  margin-top: 16px;
}
.v3-payment-rate-box p {
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.v3-payment-rate-box input.form-control {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #28a745;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
}

/* ====== Provider Grid (Slot/Casino pages) ====== */
.v3-provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  padding: 0 16px 24px;
  justify-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.v3-provider-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--v3-bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--v3-border, rgba(255,255,255,0.08));
  border-radius: var(--v3-radius, 12px);
  padding: 20px 14px 16px;
  width: 100%;
  transition: all .25s;
}
.v3-provider-card:hover {
  transform: translateY(-3px);
  border-color: var(--v3-border-accent, rgba(255,193,7,0.4));
  box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 10px var(--v3-accent-glow, rgba(255,193,7,0.15));
  text-decoration: none;
}
.v3-provider-card-logo {
  height: 48px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 10px;
  filter: brightness(0.85);
  transition: filter .2s;
}
.v3-provider-card:hover .v3-provider-card-logo { filter: brightness(1.1); }
.v3-provider-card-name {
  color: var(--v3-text, #fff);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}
.v3-provider-card-count {
  color: var(--v3-accent, #ffc107);
  font-size: 11px;
  font-weight: 500;
  margin-top: 2px;
}
@media (max-width: 768px) {
  .v3-provider-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 10px 16px;
  }
  .v3-provider-card { padding: 14px 10px; }
  .v3-provider-card-logo { height: 40px; margin-bottom: 8px; }
}

/* ====== Game Modal (fullscreen iframe) ====== */
.v3-game-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99999; background: #000;
  display: none; flex-direction: column;
}
.v3-game-modal.active { display: flex; }
.v3-game-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px;
  background: var(--v3-bg-card, #1a1a2e);
  border-bottom: 1px solid var(--v3-border, #333);
}
.v3-game-modal-title { color: #fff; font-size: 14px; font-weight: 600; }
.v3-game-modal-close {
  background: none; border: none; color: #fff;
  font-size: 28px; cursor: pointer; padding: 0 8px; line-height: 1;
}
.v3-game-frame { flex: 1; border: none; width: 100%; height: 100%; }
.v3-game-loading {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 999999; background: rgba(0,0,0,0.85);
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff; gap: 16px; font-size: 14px;
}
.v3-game-loading.active { display: flex; }

/* ====== Game Grid + Cards (updated - no rtp) ====== */
.v3-game-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 0 16px 16px; max-width: 1200px; margin: 0 auto; }
@media (max-width: 768px) { .v3-game-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 8px 10px; } }
.v3-game-page .v3-game-card {
  display: block; text-decoration: none; color: inherit; cursor: pointer;
  position: relative; border-radius: 12px; overflow: hidden;
  background: var(--v3-bg-card); border: 1px solid var(--v3-border);
  transition: all .25s;
}
.v3-game-page .v3-game-card:hover {
  transform: translateY(-4px);
  border-color: var(--v3-border-accent);
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 12px var(--v3-accent-glow);
  text-decoration: none; color: inherit;
}
.v3-game-page .v3-game-card img.v3-game-thumb { width: 100%; aspect-ratio: 1/1; object-fit: contain; display: block; background: #0d1b39; }
.v3-game-page .v3-game-card .v3-game-info { padding: 8px; text-align: center; }
.v3-game-page .v3-game-card .v3-game-name { font-size: 11px; color: var(--v3-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }

/* Game empty state */
.v3-game-empty { text-align: center; padding: 60px 20px; color: var(--v3-text-muted); }
.v3-game-empty i { display: block; margin-bottom: 16px; }