/* Dark Theme for index-6.html - Dark Elegance Dark */
:root{
  --bg:#0a0a0f;
  --text:#f5f5f5;
  --muted:#a0a0a0;
  --primary:#d4af37;
  --secondary:#c0c0c0;
  --accent:#ffd700;
  --accent-2:#e6e6fa;
  --surface:#1a1a1f;
  --card:#25252a;
  --border:#333338;
  --gradient-1:linear-gradient(135deg, #d4af37 0%, #ffd700 100%);
  --gradient-2:linear-gradient(135deg, #c0c0c0 0%, #e6e6fa 100%);
  --gradient-3:linear-gradient(135deg, #8b7355 0%, #d4af37 100%);
  --shadow:0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg:0 10px 40px rgba(0, 0, 0, 0.7);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family: 'Playfair Display', 'Times New Roman', serif;
  overflow-x:hidden;
}

.navbar{
  background:rgba(26, 26, 31, 0.95)!important;
  backdrop-filter: blur(20px);
  border-bottom:1px solid var(--primary);
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.2);
}

.hero{
  padding:6rem 0;
  position:relative;
  background: radial-gradient(ellipse at center, var(--surface) 0%, var(--bg) 100%);
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.min-vh-90{
  min-height:90vh;
}

.section{
  padding:5rem 0;
  position:relative;
}

.bg-surface{
  background:var(--surface);
  position:relative;
}

.bg-surface::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: linear-gradient(45deg, rgba(212, 175, 55, 0.03) 0%, rgba(255, 215, 0, 0.03) 100%);
  pointer-events:none;
}

.text-muted{
  color:var(--muted)!important;
}

.elegant-text{
  color:var(--text);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.elegant-title{
  background: var(--gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight:800;
  letter-spacing:-0.02em;
  text-shadow: none;
}

.elegant-btn{
  background: var(--gradient-1);
  border:none;
  color:var(--bg);
  font-weight:700;
  padding:1rem 2rem;
  border-radius:0.5rem;
  position:relative;
  overflow:hidden;
  transition:all 0.3s ease;
  text-transform:uppercase;
  letter-spacing:1px;
  box-shadow: var(--shadow);
}

.elegant-btn:hover{
  transform:translateY(-2px);
  box-shadow: var(--shadow-lg);
  color:var(--bg);
}

.elegant-btn .btn-icon{
  margin-left:0.5rem;
  animation: elegant-float 2s ease-in-out infinite;
}

.elegant-outline{
  border:2px solid var(--primary);
  color:var(--primary);
  background:transparent;
  font-weight:700;
  padding:1rem 2rem;
  border-radius:0.5rem;
  transition:all 0.3s ease;
  text-transform:uppercase;
  letter-spacing:1px;
}

.elegant-outline:hover{
  background:var(--primary);
  color:var(--bg);
  transform:translateY(-2px);
  box-shadow: var(--shadow);
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow: var(--shadow);
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
}

.card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background: var(--gradient-1);
}

.card:hover{
  transform:translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color:var(--primary);
}

.footer{
  padding:3rem 0;
  border-top:1px solid var(--border);
  background:var(--surface);
}

.badge-logos img{
  max-height:40px;
  margin:.25rem 1rem .25rem 0;
  object-fit:contain;
  filter:brightness(0) invert(1);
}

.brandmark{
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}

.rounded-3{
  border-radius:1rem!important;
}

.hero-content{
  position:relative;
  z-index:2;
}

.hero-actions{
  margin-bottom:2rem;
}

.elegant-features{
  margin-top:3rem;
}

.feature-elegant{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:2rem 1rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
}

.feature-elegant::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background: var(--gradient-1);
}

.feature-elegant:hover{
  transform:translateY(-3px);
  box-shadow: var(--shadow);
  border-color:var(--primary);
}

.elegant-icon{
  font-size:2.5rem;
  margin-bottom:1rem;
  display:block;
  filter:drop-shadow(0 2px 4px rgba(212, 175, 55, 0.3));
}

.hero-visual{
  position:relative;
  z-index:2;
}

.luxury-frame{
  position:relative;
  padding:3rem;
  background:var(--card);
  border-radius:2rem;
  box-shadow: var(--shadow-lg);
  border:1px solid var(--border);
}

.frame-ornament{
  position:absolute;
  width:20px;
  height:20px;
  background: var(--gradient-1);
  border-radius:50%;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.frame-top-left{
  top:1rem;
  left:1rem;
}

.frame-top-right{
  top:1rem;
  right:1rem;
}

.frame-bottom-left{
  bottom:1rem;
  left:1rem;
}

.frame-bottom-right{
  bottom:1rem;
  right:1rem;
}

.luxury-canvas{
  position:relative;
  border-radius:1rem;
  overflow:hidden;
}

.elegant-border{
  border:2px solid transparent;
  background: var(--card) padding-box,
              var(--gradient-1) border-box;
}

.luxury-overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  pointer-events:none;
}

.floating-elegance{
  position:absolute;
  font-size:2rem;
  animation: elegant-float 3s ease-in-out infinite;
  opacity:0.6;
  filter:drop-shadow(0 2px 4px rgba(212, 175, 55, 0.3));
}

.elegance-1{
  top:10%;
  left:10%;
  animation-delay:0s;
}

.elegance-2{
  top:20%;
  right:15%;
  animation-delay:0.5s;
}

.elegance-3{
  bottom:20%;
  left:20%;
  animation-delay:1s;
}

.elegance-4{
  bottom:10%;
  right:10%;
  animation-delay:1.5s;
}

.hero-bg-luxury{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  pointer-events:none;
  overflow:hidden;
}

.elegant-patterns{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.pattern{
  position:absolute;
  opacity:0.1;
  animation: pattern-float 10s ease-in-out infinite;
}

.pattern-1{
  top:20%;
  left:20%;
  width:100px;
  height:100px;
  background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
  animation-delay:0s;
}

.pattern-2{
  top:60%;
  right:30%;
  width:80px;
  height:80px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  animation-delay:2s;
}

.pattern-3{
  bottom:30%;
  left:50%;
  width:120px;
  height:120px;
  background: radial-gradient(circle, var(--secondary) 0%, transparent 70%);
  animation-delay:4s;
}

.luxury-particles{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.particle{
  position:absolute;
  width:4px;
  height:4px;
  background:var(--primary);
  border-radius:50%;
  box-shadow: 0 0 10px var(--primary);
  animation: particle-float 6s ease-in-out infinite;
}

.particle-1{
  top:30%;
  left:30%;
  animation-delay:0s;
}

.particle-2{
  top:70%;
  right:40%;
  animation-delay:2s;
}

.particle-3{
  bottom:40%;
  left:60%;
  animation-delay:4s;
}

.luxury-game-container{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:2rem;
  overflow:hidden;
  box-shadow: var(--shadow-lg);
}

.game-header-luxury{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:2rem;
  background: linear-gradient(135deg, var(--surface), var(--card));
  border-bottom:1px solid var(--border);
}

.luxury-badge{
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding:0.5rem 1rem;
  background: var(--gradient-1);
  border-radius:2rem;
  color:var(--bg);
  font-size:0.875rem;
  font-weight:700;
}

.game-title-luxury h3{
  margin:0;
}

.game-content-luxury{
  padding:2rem;
}

.game-footer-luxury{
  padding:2rem;
  background:var(--surface);
  border-top:1px solid var(--border);
}

.luxury-controls{
  display:flex;
  gap:1rem;
  justify-content:center;
}

.luxury-sidebar{
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.premium-info,
.vip-info{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1.5rem;
  padding:2rem;
  box-shadow: var(--shadow);
}

.premium-grid{
  display:grid;
  gap:1rem;
}

.premium-item{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem;
  background:var(--surface);
  border-radius:1rem;
  border:1px solid var(--border);
}

.premium-icon{
  font-size:1.5rem;
  width:2rem;
  text-align:center;
  filter:drop-shadow(0 2px 4px rgba(212, 175, 55, 0.3));
}

.premium-label{
  font-size:0.75rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.premium-value{
  font-weight:700;
  color:var(--primary);
}

.vip-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.vip-item{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem;
  background:var(--surface);
  border-radius:1rem;
  border:1px solid var(--border);
}

.vip-icon{
  font-size:2rem;
  width:3rem;
  text-align:center;
  filter:drop-shadow(0 2px 4px rgba(212, 175, 55, 0.3));
}

.vip-title{
  font-weight:700;
  color:var(--text);
  margin-bottom:0.25rem;
}

.vip-desc{
  font-size:0.875rem;
  color:var(--muted);
}

.luxury-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1.5rem;
  overflow:hidden;
  transition:all 0.3s ease;
  box-shadow: var(--shadow);
}

.luxury-card:hover{
  transform:translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color:var(--primary);
}

.card-header-luxury{
  padding:1.5rem;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:1rem;
}

.luxury-icon{
  font-size:2rem;
  filter:drop-shadow(0 2px 4px rgba(212, 175, 55, 0.3));
}

.luxury-title{
  font-weight:700;
  color:var(--primary);
  font-size:1.125rem;
}

.card-preview{
  position:relative;
}

.card-overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0, 0, 0, 0.8);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity 0.3s ease;
}

.luxury-card:hover .card-overlay{
  opacity:1;
}

.card-info{
  padding:1.5rem;
  background:var(--surface);
  border-top:1px solid var(--border);
}

.preview-bg{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.preview-content{
  text-align:center;
  color:white;
}

.preview-icon{
  font-size:3rem;
  margin-bottom:1rem;
  filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.preview-title{
  font-size:1.25rem;
  font-weight:700;
}

.luxury-bg-1{background: var(--gradient-1);}
.luxury-bg-2{background: var(--gradient-2);}
.luxury-bg-3{background: var(--gradient-3);}

.luxury-features{
  margin-top:2rem;
}

.luxury-feature{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.5rem;
  padding:1.5rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  transition:all 0.3s ease;
}

.luxury-feature:hover{
  transform:translateX(5px);
  box-shadow: var(--shadow);
  border-color:var(--primary);
}

.luxury-feature .feature-icon{
  font-size:2rem;
  width:3rem;
  text-align:center;
  filter:drop-shadow(0 2px 4px rgba(212, 175, 55, 0.3));
}

.about-visual-luxury{
  position:relative;
  height:400px;
}

.luxury-showcase{
  position:relative;
  height:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

.showcase-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.5rem;
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
}

.showcase-item::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: var(--gradient-1);
  opacity:0;
  transition:opacity 0.3s ease;
}

.showcase-item:hover::before{
  opacity:0.1;
}

.showcase-item:hover{
  transform:scale(1.05);
  box-shadow: var(--shadow);
  border-color:var(--primary);
}

.showcase-icon{
  font-size:2.5rem;
  margin-bottom:0.5rem;
  z-index:1;
  filter:drop-shadow(0 2px 4px rgba(212, 175, 55, 0.3));
}

.showcase-text{
  font-weight:700;
  font-size:0.875rem;
  z-index:1;
  color:var(--primary);
}

.elegant-input{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:0.75rem;
  padding:1rem 1.25rem;
  transition:all 0.3s ease;
}

.elegant-input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(212, 175, 55, 0.1);
  background:var(--surface);
}

.elegant-input::placeholder{
  color:var(--muted);
}

.form-control-lg{
  padding:1.25rem 1.5rem;
  font-size:1.125rem;
}

@keyframes elegant-float{
  0%, 100%{transform:translateY(0px);}
  50%{transform:translateY(-15px);}
}

@keyframes pattern-float{
  0%, 100%{transform:translateY(0px) rotate(0deg);}
  50%{transform:translateY(-20px) rotate(180deg);}
}

@keyframes particle-float{
  0%, 100%{transform:translateY(0px) scale(1); opacity:0.6;}
  50%{transform:translateY(-25px) scale(1.2); opacity:1;}
}

@media (max-width: 768px) {
  .hero{
    padding:4rem 0;
    min-height:auto;
  }
  
  .section{
    padding:3rem 0;
  }
  
  .min-vh-90{
    min-height:auto;
  }
  
  .display-3{
    font-size:2.5rem;
  }
  
  .hero-actions{
    display:flex;
    flex-direction:column;
    gap:1rem;
  }
  
  .hero-actions .btn{
    width:100%;
  }
  
  .luxury-controls{
    flex-direction:column;
  }
  
  .luxury-showcase{
    grid-template-columns:1fr;
    gap:1rem;
  }
  
  .luxury-frame{
    padding:1.5rem;
  }
  
  .frame-ornament{
    display:none;
  }
  
  .floating-elegance{
    display:none;
  }
  
  .pattern,
  .particle{
    display:none;
  }
}