/* Dark Theme for index-5.html - Creative Artistic Dark */
:root{
  --bg:#0f0f23;
  --text:#ffffff;
  --muted:#a0a8b8;
  --primary:#ff6b6b;
  --secondary:#4ecdc4;
  --accent:#45b7d1;
  --accent-2:#96ceb4;
  --accent-3:#feca57;
  --accent-4:#ff9ff3;
  --surface:#1a1a2e;
  --card:#16213e;
  --border:#2a2a3e;
  --gradient-1:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-2:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-3:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --gradient-4:linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  --gradient-5:linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --gradient-6:linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family: 'Poppins', 'Inter', sans-serif;
  overflow-x:hidden;
}

.navbar{
  background:rgba(26, 26, 46, 0.95)!important;
  backdrop-filter: blur(20px);
  border-bottom:1px solid var(--border);
  box-shadow: 0 4px 20px rgba(255, 107, 107, 0.1);
}

.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(255, 107, 107, 0.05) 0%, rgba(78, 205, 196, 0.05) 100%);
  pointer-events:none;
}

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

.artistic-text{
  background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 3s ease-in-out infinite;
}

.artistic-title{
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight:800;
  letter-spacing:-0.02em;
}

.artistic-btn{
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border:none;
  color:white;
  font-weight:600;
  padding:1rem 2rem;
  border-radius:2rem;
  position:relative;
  overflow:hidden;
  transition:all 0.3s ease;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.artistic-btn:hover{
  transform:translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);
  color:white;
}

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

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

.artistic-outline:hover{
  background:var(--primary);
  color:white;
  transform:translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);
}

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

.card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
}

.card:hover{
  transform:translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.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:1px;
  text-transform:uppercase;
}

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

.rounded-4{
  border-radius:1.5rem!important;
}

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

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

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

.feature-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.5rem;
  text-align:center;
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
}

.feature-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.feature-card:hover{
  transform:translateY(-3px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.feature-icon{
  font-size:2rem;
  margin-bottom:0.5rem;
  display:block;
}

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

.artistic-frame{
  position:relative;
  padding:2rem;
  background:var(--card);
  border-radius:2rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.frame-decoration{
  position:absolute;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius:50%;
}

.frame-top{
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  width:40px;
  height:40px;
}

.frame-right{
  top:50%;
  right:-10px;
  transform:translateY(-50%);
  width:40px;
  height:40px;
}

.frame-bottom{
  bottom:-10px;
  left:50%;
  transform:translateX(-50%);
  width:40px;
  height:40px;
}

.frame-left{
  top:50%;
  left:-10px;
  transform:translateY(-50%);
  width:40px;
  height:40px;
}

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

.artistic-border{
  border:3px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(135deg, var(--primary), var(--secondary)) border-box;
}

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

.floating-art{
  position:absolute;
  font-size:2rem;
  animation: artistic-float 3s ease-in-out infinite;
  opacity:0.7;
}

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

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

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

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

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

.artistic-shapes{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.shape{
  position:absolute;
  border-radius:50%;
  opacity:0.1;
  animation: shape-float 8s ease-in-out infinite;
}

.shape-1{
  top:10%;
  left:10%;
  width:100px;
  height:100px;
  background:var(--primary);
  animation-delay:0s;
}

.shape-2{
  top:30%;
  right:20%;
  width:150px;
  height:150px;
  background:var(--secondary);
  animation-delay:1s;
}

.shape-3{
  bottom:20%;
  left:30%;
  width:80px;
  height:80px;
  background:var(--accent);
  animation-delay:2s;
}

.shape-4{
  bottom:40%;
  right:40%;
  width:120px;
  height:120px;
  background:var(--accent-3);
  animation-delay:3s;
}

.shape-5{
  top:60%;
  left:60%;
  width:90px;
  height:90px;
  background:var(--accent-4);
  animation-delay:4s;
}

.gradient-orbs{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(40px);
  opacity:0.3;
  animation: orb-pulse 6s ease-in-out infinite;
}

.orb-1{
  top:20%;
  left:20%;
  width:200px;
  height:200px;
  background:var(--primary);
  animation-delay:0s;
}

.orb-2{
  top:60%;
  right:30%;
  width:150px;
  height:150px;
  background:var(--secondary);
  animation-delay:2s;
}

.orb-3{
  bottom:20%;
  left:50%;
  width:180px;
  height:180px;
  background:var(--accent);
  animation-delay:4s;
}

.artistic-game-container{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:2rem;
  overflow:hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.game-header-artistic{
  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);
}

.artistic-badge{
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding:0.5rem 1rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius:2rem;
  color:white;
  font-size:0.875rem;
  font-weight:600;
}

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

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

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

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

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

.artwork-info,
.artist-info{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1.5rem;
  padding:2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

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

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

.artwork-icon{
  font-size:1.5rem;
  width:2rem;
  text-align:center;
}

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

.artwork-value{
  font-weight:600;
  color:var(--text);
}

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

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

.artist-avatar{
  font-size:2rem;
  width:3rem;
  text-align:center;
}

.artist-name{
  font-weight:600;
  color:var(--text);
  margin-bottom:0.25rem;
}

.artist-role{
  font-size:0.875rem;
  color:var(--muted);
}

.gallery-item{
  position:relative;
  transition:all 0.3s ease;
}

.gallery-item:hover{
  transform:translateY(-5px);
}

.gallery-frame{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1.5rem;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

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

.gallery-item:hover .gallery-overlay{
  opacity:1;
}

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

.gallery-preview{
  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;
}

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

.bg-gradient-1{background:var(--gradient-1);}
.bg-gradient-2{background:var(--gradient-2);}
.bg-gradient-3{background:var(--gradient-3);}
.bg-gradient-4{background:var(--gradient-4);}
.bg-gradient-5{background:var(--gradient-5);}
.bg-gradient-6{background:var(--gradient-6);}

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

.vision-item{
  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;
}

.vision-item:hover{
  transform:translateX(5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.vision-icon{
  font-size:2rem;
  width:3rem;
  text-align:center;
}

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

.creative-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: linear-gradient(135deg, var(--primary), var(--secondary));
  opacity:0;
  transition:opacity 0.3s ease;
}

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

.showcase-item:hover{
  transform:scale(1.05);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.showcase-icon{
  font-size:2.5rem;
  margin-bottom:0.5rem;
  z-index:1;
}

.showcase-text{
  font-weight:600;
  font-size:0.875rem;
  z-index:1;
}

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

.artistic-input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(255, 107, 107, 0.1);
  background:var(--surface);
}

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

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

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

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

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

@keyframes orb-pulse{
  0%, 100%{transform:scale(1); opacity:0.3;}
  50%{transform:scale(1.2); opacity:0.5;}
}

@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%;
  }
  
  .artistic-controls{
    flex-direction:column;
  }
  
  .creative-showcase{
    grid-template-columns:1fr;
    gap:1rem;
  }
  
  .artistic-frame{
    padding:1rem;
  }
  
  .frame-decoration{
    display:none;
  }
  
  .floating-art{
    display:none;
  }
  
  .shape,
  .orb{
    display:none;
  }
}