:root{
  --bg-primary:#0a0a0a;
  --bg-secondary:#1a0a0a;
  --bg-card:rgba(30, 20, 10, 0.7);
  --bg-glass:rgba(40, 20, 10, 0.4);
  --neon-gold:#ffd700;
  --neon-red:#dc143c;
  --neon-purple:#9400d3;
  --neon-gold-light:#ffec8b;
  --text-primary:#f5f5dc;
  --text-secondary:#b8860b;
  --border-glow:rgba(255, 215, 0, 0.3);
  --gradient-main:linear-gradient(135deg, #ffd700, #dc143c);
  --gradient-gold:linear-gradient(135deg, #ffd700, #ff8c00);
  --gradient-royal:linear-gradient(135deg, #ffd700, #9400d3);
  --font-cn:"Microsoft YaHei", "PingFang SC", sans-serif;
  --font-tech:"Orbitron", monospace;
  --font-royal:"STKaiti", "KaiTi", serif;
}

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

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  font-family:var(--font-cn);
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image: 
    radial-gradient(ellipse at 20% 50%, rgba(255, 215, 0, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(220, 20, 60, 0.05) 0%, transparent 50%);
}

a{
  color:var(--neon-gold);
  text-decoration:none;
  transition:all 0.3s;
}

a:hover{
  color:var(--neon-gold-light);
  text-shadow:0 0 10px var(--neon-gold);
}

#particles{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

.nav-bar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
  background:rgba(10, 10, 10, 0.9);
  backdrop-filter:blur(20px);
  border-bottom:2px solid var(--border-glow);
  z-index:1000;
  transition:all 0.3s;
}

.nav-bar.scrolled{
  background:rgba(10, 10, 10, 0.95);
  box-shadow:0 4px 30px rgba(255, 215, 0, 0.2);
}

.nav-logo{
  display:flex;
  align-items:baseline;
  gap:8px;
}

.logo-text{
  font-family:var(--font-royal);
  font-size:28px;
  font-weight:900;
  background:var(--gradient-gold);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:2px 2px 4px rgba(0, 0, 0, 0.5);
}

.logo-sub{
  font-size:14px;
  color:var(--neon-red);
  letter-spacing:2px;
  font-weight:700;
}

.nav-links{
  display:flex;
  gap:32px;
}

.nav-link{
  color:var(--text-secondary);
  font-size:15px;
  letter-spacing:1px;
  position:relative;
  padding:4px 0;
  transition:all 0.3s;
  font-weight:600;
}

.nav-link::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:2px;
  background:var(--gradient-gold);
  transition:width 0.3s;
}

.nav-link:hover, .nav-link.active{
  color:var(--neon-gold);
  text-shadow:0 0 10px rgba(255, 215, 0, 0.5);
}

.nav-link:hover::after, .nav-link.active::after{
  width:100%;
}

.nav-actions{
  display:flex;
  gap:12px;
}

.btn-glow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 24px;
  border:none;
  border-radius:6px;
  font-family:var(--font-cn);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s;
  position:relative;
  overflow:hidden;
}

.btn-glow::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:6px;
  padding:1px;
  background:var(--gradient-gold);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

.btn-primary{
  background:linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(220, 20, 60, 0.2));
  color:var(--neon-gold);
}

.btn-primary:hover{
  background:linear-gradient(135deg, rgba(255, 215, 0, 0.4), rgba(220, 20, 60, 0.4));
  box-shadow:0 0 30px rgba(255, 215, 0, 0.3);
  transform:translateY(-2px);
  color:var(--neon-gold-light);
  text-shadow:0 0 10px rgba(255, 215, 0, 0.5);
}

.btn-secondary{
  background:rgba(255, 215, 0, 0.05);
  color:var(--text-primary);
}

.btn-secondary:hover{
  background:rgba(255, 215, 0, 0.1);
  box-shadow:0 0 20px rgba(255, 215, 0, 0.2);
  transform:translateY(-2px);
  color:var(--neon-gold);
  text-shadow:0 0 10px rgba(255, 215, 0, 0.3);
}

.btn-accent{
  background:linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(148, 0, 211, 0.2));
  color:var(--neon-gold);
}

.btn-accent::before{
  background:var(--gradient-royal);
}

.btn-accent:hover{
  background:linear-gradient(135deg, rgba(255, 215, 0, 0.4), rgba(148, 0, 211, 0.4));
  box-shadow:0 0 30px rgba(255, 215, 0, 0.3);
  transform:translateY(-2px);
  color:var(--neon-gold-light);
  text-shadow:0 0 10px rgba(255, 215, 0, 0.5);
}

.btn-download{
  padding:8px 20px;
  font-size:13px;
  background:linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(220, 20, 60, 0.2));
  color:var(--neon-gold);
}

.btn-download:hover{
  background:linear-gradient(135deg, rgba(255, 215, 0, 0.4), rgba(220, 20, 60, 0.4));
  box-shadow:0 0 20px rgba(255, 215, 0, 0.3);
  transform:translateY(-1px);
  color:var(--neon-gold-light);
  text-shadow:0 0 10px rgba(255, 215, 0, 0.5);
}

.btn-icon{
  font-size:16px;
}

.hero{
  position:relative;
  height:100vh;
  min-height:700px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(220, 20, 60, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.3) 0%, rgba(10, 10, 10, 0.8) 100%);
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(255, 215, 0, 0.05) 0%, transparent 70%);
  z-index:1;
}

.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  padding:0 20px;
}

.hero-title{
  font-family:var(--font-royal);
  font-size:clamp(40px, 8vw, 90px);
  font-weight:900;
  background:var(--gradient-gold);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:8px;
  margin-bottom:20px;
  position:relative;
  text-shadow:3px 3px 6px rgba(0, 0, 0, 0.7);
}

.glitch{
  animation:glitch-skew 4s infinite linear alternate-reverse;
}

.glitch::before, .glitch::after{
  content:attr(data-text);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:var(--bg-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.glitch::before{
  left:2px;
  text-shadow:-2px 0 var(--neon-gold);
  clip-path:inset(0 0 0 0);
  animation:glitch-anim 3s infinite linear alternate-reverse;
}

.glitch::after{
  left:-2px;
  text-shadow:2px 0 var(--neon-red);
  clip-path:inset(0 0 0 0);
  animation:glitch-anim2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim{
  0%{clip-path:inset(40% 0 61% 0)}
  20%{clip-path:inset(92% 0 1% 0)}
  40%{clip-path:inset(43% 0 1% 0)}
  60%{clip-path:inset(25% 0 58% 0)}
  80%{clip-path:inset(54% 0 7% 0)}
  100%{clip-path:inset(58% 0 43% 0)}
}

@keyframes glitch-anim2{
  0%{clip-path:inset(65% 0 13% 0)}
  20%{clip-path:inset(79% 0 2% 0)}
  40%{clip-path:inset(48% 0 39% 0)}
  60%{clip-path:inset(10% 0 75% 0)}
  80%{clip-path:inset(30% 0 50% 0)}
  100%{clip-path:inset(94% 0 5% 0)}
}

@keyframes glitch-skew{
  0%{transform:skew(0deg)}
  20%{transform:skew(-0.5deg)}
  40%{transform:skew(0.5deg)}
  60%{transform:skew(-0.3deg)}
  80%{transform:skew(0.2deg)}
  100%{transform:skew(0deg)}
}

.hero-desc{
  font-size:clamp(16px, 2.5vw, 22px);
  color:var(--text-secondary);
  letter-spacing:4px;
  margin-bottom:40px;
  font-weight:600;
}

.hero-buttons{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

.scroll-indicator{
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  text-align:center;
  color:var(--text-secondary);
  font-size:12px;
  letter-spacing:2px;
  animation:float 3s ease-in-out infinite;
}

.scroll-arrow{
  width:20px;
  height:20px;
  margin:8px auto 0;
  border-right:2px solid var(--neon-gold);
  border-bottom:2px solid var(--neon-gold);
  transform:rotate(45deg);
  animation:scroll-bounce 2s infinite;
}

@keyframes float{
  0%, 100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-10px)}
}

@keyframes scroll-bounce{
  0%, 100%{opacity:1;transform:rotate(45deg) translateY(0)}
  50%{opacity:0.5;transform:rotate(45deg) translateY(8px)}
}

.section{
  position:relative;
  z-index:1;
  padding:100px 0;
}

.section-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.section-title{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-royal);
  font-size:32px;
  font-weight:700;
  color:var(--neon-gold);
  margin-bottom:48px;
  letter-spacing:4px;
  text-shadow:2px 2px 4px rgba(0, 0, 0, 0.5);
}

.title-icon{
  font-size:18px;
  color:var(--neon-red);
}

.title-line{
  flex:1;
  height:2px;
  background:linear-gradient(90deg, var(--border-glow), transparent);
}

.news-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:20px;
}

.news-card{
  position:relative;
  background:var(--bg-card);
  border:2px solid rgba(255, 215, 0, 0.2);
  border-radius:12px;
  padding:24px;
  backdrop-filter:blur(10px);
  transition:all 0.4s;
  overflow:hidden;
}

.news-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:var(--gradient-gold);
  opacity:0;
  transition:opacity 0.3s;
}

.news-card:hover{
  border-color:rgba(255, 215, 0, 0.5);
  transform:translateY(-4px);
  box-shadow:0 8px 40px rgba(255, 215, 0, 0.2);
}

.news-card:hover::before{
  opacity:1;
}

.card-highlight{
  border-color:rgba(220, 20, 60, 0.5);
}

.card-highlight::before{
  background:linear-gradient(90deg, var(--neon-red), var(--neon-purple));
  opacity:1;
}

.card-wide{
  grid-column:span 2;
}

@media (max-width:768px){
  .card-wide{
    grid-column:span 1;
  }
}

.card-badge{
  display:inline-block;
  padding:4px 14px;
  border-radius:4px;
  font-size:12px;
  font-weight:600;
  background:rgba(220, 20, 60, 0.2);
  color:var(--neon-red);
  border:1px solid rgba(220, 20, 60, 0.4);
  margin-bottom:12px;
}

.card-badge.blue{
  background:rgba(255, 215, 0, 0.15);
  color:var(--neon-gold);
  border-color:rgba(255, 215, 0, 0.4);
}

.card-badge.purple{
  background:rgba(148, 0, 211, 0.15);
  color:var(--neon-purple);
  border-color:rgba(148, 0, 211, 0.4);
}

.card-badge.gold{
  background:rgba(255, 215, 0, 0.2);
  color:var(--neon-gold);
  border-color:rgba(255, 215, 0, 0.5);
}

.card-content h3{
  font-size:18px;
  color:var(--text-primary);
  margin-bottom:8px;
  font-weight:700;
}

.card-content p{
  font-size:14px;
  color:var(--text-secondary);
  line-height:1.7;
}

.highlight-text{
  color:var(--neon-red) !important;
  font-size:20px !important;
  font-weight:700 !important;
  text-shadow:0 0 10px rgba(220, 20, 60, 0.5);
}

.showcase-viewer{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.viewer-main{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:2px solid rgba(255, 215, 0, 0.2);
  background:var(--bg-card);
  aspect-ratio:16 / 9;
  transition:border-color 0.3s;
}

.viewer-main:hover{
  border-color:rgba(255, 215, 0, 0.5);
}

.viewer-main img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transition:opacity 0.4s;
}

.viewer-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:16px 20px;
  background:linear-gradient(transparent, rgba(10, 10, 10, 0.95));
  pointer-events:none;
}

.viewer-label{
  font-size:14px;
  color:var(--neon-gold);
  letter-spacing:2px;
  font-weight:600;
}

.viewer-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border:2px solid rgba(255, 215, 0, 0.4);
  border-radius:50%;
  background:rgba(10, 10, 10, 0.8);
  backdrop-filter:blur(8px);
  color:var(--neon-gold);
  font-size:24px;
  cursor:pointer;
  transition:all 0.3s;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.viewer-btn:hover{
  background:rgba(255, 215, 0, 0.2);
  border-color:var(--neon-gold);
  box-shadow:0 0 20px rgba(255, 215, 0, 0.3);
}

.viewer-prev{
  left:12px;
}

.viewer-next{
  right:12px;
}

.viewer-thumbs{
  display:flex;
  gap:12px;
  justify-content:center;
}

.thumb-item{
  flex:0 0 auto;
  width:180px;
  border-radius:8px;
  overflow:hidden;
  border:2px solid rgba(255, 215, 0, 0.2);
  cursor:pointer;
  transition:all 0.3s;
  background:var(--bg-card);
  text-align:center;
}

.thumb-item:hover{
  border-color:rgba(255, 215, 0, 0.6);
  transform:translateY(-2px);
  box-shadow:0 4px 20px rgba(255, 215, 0, 0.2);
}

.thumb-item.active{
  border-color:var(--neon-gold);
  box-shadow:0 0 20px rgba(255, 215, 0, 0.4);
}

.thumb-item img{
  width:100%;
  height:100px;
  object-fit:cover;
  display:block;
}

.thumb-item span{
  display:block;
  padding:6px 0;
  font-size:12px;
  color:var(--text-secondary);
}

.thumb-item.active span{
  color:var(--neon-gold);
  font-weight:600;
}

.drops-tabs{
  display:flex;
  gap:8px;
  margin-bottom:32px;
  flex-wrap:wrap;
}

.tab-btn{
  padding:10px 24px;
  border:2px solid rgba(255, 215, 0, 0.3);
  border-radius:8px;
  background:transparent;
  color:var(--text-secondary);
  font-family:var(--font-cn);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s;
}

.tab-btn:hover{
  border-color:var(--neon-gold);
  color:var(--neon-gold);
  box-shadow:0 0 15px rgba(255, 215, 0, 0.2);
}

.tab-btn.active{
  background:linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(220, 20, 60, 0.2));
  border-color:var(--neon-gold);
  color:var(--neon-gold);
  box-shadow:0 0 20px rgba(255, 215, 0, 0.3);
}

.tab-panel{
  display:none;
}

.tab-panel.active{
  display:block;
  animation:fadeIn 0.4s;
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.drop-table{
  background:var(--bg-card);
  border:2px solid rgba(255, 215, 0, 0.2);
  border-radius:12px;
  overflow:hidden;
}

.drop-row{
  display:flex;
  padding:16px 24px;
  border-bottom:1px solid rgba(255, 215, 0, 0.1);
  transition:background 0.3s;
}

.drop-row:hover{
  background:rgba(255, 215, 0, 0.05);
}

.drop-row:last-child{
  border-bottom:none;
}

.drop-header{
  background:rgba(255, 215, 0, 0.1);
  font-weight:700;
  color:var(--neon-gold);
  font-size:14px;
}

.drop-name{
  min-width:180px;
  font-weight:600;
  color:var(--text-primary);
  flex-shrink:0;
}

.drop-header .drop-name{
  color:var(--neon-gold);
}

.drop-items{
  flex:1;
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.6;
}

.drop-row-legend .drop-name{
  color:var(--neon-gold);
}

.drop-row-legend{
  background:rgba(255, 215, 0, 0.03);
}

.notice-list{
  display:grid;
  gap:16px;
}

.notice-item{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:20px 24px;
  background:var(--bg-card);
  border:2px solid rgba(255, 215, 0, 0.2);
  border-radius:12px;
  transition:all 0.3s;
}

.notice-item:hover{
  border-color:rgba(255, 215, 0, 0.5);
  transform:translateX(4px);
  box-shadow:0 4px 20px rgba(255, 215, 0, 0.2);
}

.notice-icon{
  font-size:28px;
  flex-shrink:0;
}

.notice-item p{
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.7;
}

.drop-subtitle{
  font-size:20px;
  font-weight:700;
  color:var(--neon-purple);
  margin-bottom:16px;
  padding-left:12px;
  border-left:4px solid var(--neon-purple);
  text-shadow:0 0 10px rgba(148, 0, 211, 0.5);
}

.drop-tip{
  margin-top:20px;
  padding:14px 20px;
  background:linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(220, 20, 60, 0.08));
  border:2px solid rgba(255, 215, 0, 0.2);
  border-radius:8px;
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.6;
}

.drop-row-rare .drop-name{
  color:var(--neon-red);
}

.drop-row-rare{
  background:rgba(220, 20, 60, 0.03);
}

.footer{
  position:relative;
  z-index:1;
  padding:60px 24px 30px;
  border-top:2px solid rgba(255, 215, 0, 0.2);
  background:rgba(10, 10, 10, 0.9);
}

.footer-content{
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}

.footer-logo{
  font-family:var(--font-royal);
  font-size:24px;
  background:var(--gradient-gold);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:20px;
  text-shadow:2px 2px 4px rgba(0, 0, 0, 0.5);
}

.footer-links{
  display:flex;
  gap:24px;
  justify-content:center;
  margin-bottom:24px;
}

.footer-links a{
  color:var(--text-secondary);
  font-size:14px;
  transition:color 0.3s;
  font-weight:600;
}

.footer-links a:hover{
  color:var(--neon-gold);
  text-shadow:0 0 10px rgba(255, 215, 0, 0.5);
}

.footer-copy{
  color:var(--text-secondary);
  font-size:12px;
  opacity:0.7;
}

.fade-in{
  opacity:0;
  transform:translateY(30px);
  transition:all 0.6s ease-out;
}

.fade-in.visible{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:900px){
  .nav-links{
    display:none;
  }
  
  .hero-title{
    letter-spacing:2px;
  }
  
  .drop-row{
    flex-direction:column;
    gap:4px;
  }
  
  .drop-name{
    min-width:unset;
  }
  
  .thumb-item{
    width:140px;
  }
  
  .thumb-item img{
    height:70px;
  }
}

@media (max-width:600px){
  .nav-bar{
    padding:0 16px;
  }
  
  .hero-buttons{
    flex-direction:column;
    align-items:center;
  }
  
  .btn-glow{
    width:100%;
    max-width:280px;
    justify-content:center;
  }
  
  .section{
    padding:60px 0;
  }
  
  .news-grid{
    grid-template-columns:1fr;
  }
  
  .section-title{
    font-size:24px;
  }
}