/* ═══════════════════════════════════════════════════════════════
   GIGA BATTLE — Official Website Styles
   Pixel Art / Retro Gaming Theme
   ═══════════════════════════════════════════════════════════════ */

:root {
  --primary:    #ff6b1a;
  --primary-dk: #c94d00;
  --accent:     #ff2d4e;
  --accent2:    #00d4ff;
  --accent3:    #7b2fff;
  --bg-dark:    #080808;
  --bg-card:    #0f0f12;
  --bg-card2:   #141418;
  --border:     #2a1f18;
  --text:       #e8ddd5;
  --text-dim:   #7a6a60;
  --pixel-sz:   2px;
  --glow-gold:  0 0 20px rgba(255,107,26,0.6), 0 0 60px rgba(255,107,26,0.2);
  --glow-red:   0 0 20px rgba(255,45,78,0.6),  0 0 60px rgba(255,45,78,0.2);
  --glow-blue:  0 0 20px rgba(0,212,255,0.6),  0 0 60px rgba(0,212,255,0.2);
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, '微软雅黑', 'PingFang SC', sans-serif;
  background: var(--bg-dark);
  color: var(--text);
  overflow-x: clip; /* clip 不会创建新的包含块，不影响 fixed 定位 */
  line-height: 1.6;
}

/* ── Scanlines & Noise ────────────────────────────────────────── */
.scanlines {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px
  );
}
.noise {
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noise-shift .55s steps(2, end) infinite;
}

@keyframes noise-shift {
  0%   { transform: translate(0, 0); opacity: .035; }
  25%  { transform: translate(-1px, 1px); opacity: .055; }
  50%  { transform: translate(1px, -1px); opacity: .045; }
  75%  { transform: translate(1px, 1px); opacity: .065; }
  100% { transform: translate(0, 0); opacity: .04; }
}

/* ── Pixel Font Helper ────────────────────────────────────────── */
.pixel { font-family: 'Press Start 2P', monospace; }

/* ═══════════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0 2rem;
  background: rgba(8,12,16,.96);
  border-bottom: 1px solid rgba(255,107,26,.18);
  transition: box-shadow .3s;
  overflow: visible;
}
.navbar.scrolled {
  background: rgba(8,12,16,.98);
  backdrop-filter: blur(16px);
  box-shadow: 0 2px 0 var(--border);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 2rem;
  height: 64px;
}
.nav-logo {
  display: flex; flex-direction: column; line-height: 1;
  font-family: 'Press Start 2P', monospace;
  cursor: pointer;
}
.pixel-logo {
  font-size: .95rem; color: var(--primary);
  text-shadow: var(--glow-gold);
  letter-spacing: 2px;
}
.pixel-logo-sub {
  font-size: .55rem; color: var(--accent2);
  letter-spacing: 4px; margin-top: 2px;
}
.nav-links {
  display: flex; gap: 1.5rem; list-style: none; margin: 0 auto;
}
.nav-link {
  color: var(--text-dim); text-decoration: none;
  font-size: .88rem; font-weight: 700;
  transition: color .2s; position: relative; padding: 4px 0;
}
.nav-link::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--primary);
  transform: scaleX(0); transition: transform .2s;
}
.nav-link:hover { color: var(--primary); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link-event { color: var(--primary) !important; animation: eventPulse 2s ease-in-out infinite; }
@keyframes eventPulse { 0%,100%{opacity:1} 50%{opacity:.65} }

.nav-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.hamburger { display: none; background: none; border: none; color: var(--text); font-size: 1.4rem; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn-pixel {
  font-family: 'Press Start 2P', monospace;
  font-size: .6rem; padding: .6rem 1.2rem;
  cursor: pointer; border: none; outline: none;
  position: relative; text-decoration: none; display: inline-flex;
  align-items: center; gap: .5rem;
  transition: transform .1s, filter .2s;
  image-rendering: pixelated;
  letter-spacing: .5px;
}
.btn-pixel:hover { transform: translateY(-2px); filter: brightness(1.15); }
.btn-pixel:active { transform: translateY(1px); }

.btn-primary {
  background: var(--primary); color: #0d0a00;
  box-shadow: 4px 4px 0 var(--primary-dk), var(--glow-gold);
}
.btn-primary:hover { box-shadow: 6px 6px 0 var(--primary-dk), var(--glow-gold); }

.btn-outline {
  background: transparent; color: var(--primary);
  border: 2px solid var(--primary);
  box-shadow: 3px 3px 0 var(--primary-dk);
}
.btn-ghost {
  background: transparent; color: var(--text);
  border: 2px solid rgba(255,255,255,.25);
  box-shadow: 3px 3px 0 rgba(255,255,255,.1);
}
.btn-large  { font-size: .7rem;  padding: .9rem 1.8rem; }
.btn-xlarge { font-size: .75rem; padding: 1.2rem 2.5rem; flex-direction: column; text-align: center; gap: .2rem; }
.btn-xlarge small { font-size: .5rem; font-family: 'Noto Sans SC', sans-serif; opacity: .75; }
.btn-full   { width: 100%; justify-content: center; font-size: .65rem; padding: .9rem; }

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Real game poster as background */
.hero-bg { position: absolute; inset: 0; }
.hero-layer { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; }

.layer-sky {
  background:
    linear-gradient(180deg, #050302 0%, #0d0806 40%, #1a0e06 100%);
}

/* Game poster image - right side, behind content */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  opacity: 0;
}

/* Dark vignette to keep text readable */
.hero-bg::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(5,2,2,.95) 0%,
      rgba(5,2,2,.6)  40%,
      rgba(5,2,2,.15) 70%,
      transparent     100%
    ),
    linear-gradient(180deg,
      rgba(5,2,2,.4) 0%,
      transparent 30%,
      transparent 70%,
      rgba(5,2,2,.8) 100%
    );
}

.layer-mountains { display: none; }
.layer-city      { display: none; }
.layer-ground    { display: none; }

/* Orange ember glow from bottom */
.layer-sky::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 35%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 15%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 40%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 10%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 30%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 15% 55%, rgba(255,107,26,.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 60% 50%, rgba(255,45,78,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 60%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 70%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 75%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 5%  80%, #fff 0%, transparent 100%);
  animation: twinkle 4s infinite alternate;
}
@keyframes twinkle {
  0%   { opacity: .7; }
  50%  { opacity: 1; }
  100% { opacity: .5; }
}

/* hide old CSS sprites */
.char, .vs-badge, .char-sprite, .warrior-sprite, .mage-sprite, .char-shadow { display: none !important; }

/* Particles */
.hero-particles {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.particle {
  position: absolute; width: 4px; height: 4px;
  background: var(--primary); image-rendering: pixelated;
  animation: particle-rise linear infinite;
  opacity: 0;
}
@keyframes particle-rise {
  0%   { opacity: 0; transform: translateY(0) scale(1); }
  10%  { opacity: 1; }
  90%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(-200px) scale(.3); }
}

/* Hero Content */
.hero-content {
  position: relative; z-index: 5; text-align: center;
  padding: 7rem 1rem 2rem;
}
.hero-tagline {
  font-family: 'Press Start 2P', monospace;
  font-size: .65rem; color: var(--accent2);
  letter-spacing: 4px; text-transform: uppercase;
  margin-bottom: 1.5rem;
  text-shadow: var(--glow-blue);
}
.hero-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1.25;
  color: var(--primary);
  text-shadow: 6px 6px 0 rgba(0,0,0,.5), var(--glow-gold);
  margin-bottom: 1.5rem;
}
.hero-title-sub {
  font-size: clamp(1.2rem, 3.5vw, 2.6rem);
  color: #fff;
  text-shadow: 3px 3px 0 rgba(0,0,0,.4), 0 0 18px rgba(255,107,26,.55);
  letter-spacing: .12em;
}

/* Glitch Effect */
.glitch {
  position: relative; display: inline-block;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  width: 100%;
}
.glitch::before {
  color: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  animation: glitch-top 1.9s infinite steps(1);
}
.glitch::after {
  color: var(--accent2); clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  animation: glitch-bot 1.9s infinite steps(1);
}
@keyframes glitch-top {
  0%,70%,100% { transform: none; opacity: 0; }
  72% { transform: translate(-4px, -2px) skewX(-3deg); opacity: .85; }
  75% { transform: translate(4px, 1px);  opacity: .6; }
  78% { transform: translate(-2px, 0)   skewX(2deg); opacity: .75; }
  81% { transform: translate(3px, -1px); opacity: .5; }
  84% { transform: none; opacity: 0; }
}
@keyframes glitch-bot {
  0%,65%,100% { transform: none; opacity: 0; }
  67% { transform: translate(4px, 2px)  skewX(4deg);  opacity: .8; }
  70% { transform: translate(-3px, 0);  opacity: .55; }
  73% { transform: translate(2px, 1px)  skewX(-2deg); opacity: .7; }
  76% { transform: none; opacity: 0; }
}

.hero-desc {
  font-size: 1.05rem; color: var(--text-dim);
  margin-bottom: 2rem; line-height: 1.8;
}
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; }
.btn-icon { font-size: .9em; }

.hero-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 2rem; flex-wrap: wrap;
}
.stat { text-align: center; }
.stat-num {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.6rem; color: var(--primary);
  text-shadow: var(--glow-gold);
  display: inline;
}
.stat > span:nth-child(2) {
  font-family: 'Press Start 2P', monospace;
  font-size: 1rem; color: var(--primary);
}
.stat-label {
  display: block; font-size: .75rem; color: var(--text-dim);
  margin-top: .25rem;
}
.stat-divider {
  width: 2px; height: 40px;
  background: linear-gradient(transparent, var(--border), transparent);
}

.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--text-dim); font-size: .75rem;
  animation: scroll-bounce 2s infinite;
  z-index: 5;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION COMMONS
   ═══════════════════════════════════════════════════════════════ */
section { padding: 6rem 2rem; }

.section-header { text-align: center; margin-bottom: 4rem; }
.section-tag {
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem; color: var(--accent2);
  letter-spacing: 6px; margin-bottom: .75rem;
  text-shadow: var(--glow-blue);
}
.section-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900; color: var(--text);
  margin-bottom: 1rem;
}
.pixel-divider {
  width: 80px; height: 4px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

/* ═══════════════════════════════════════════════════════════════
   FEATURES
   ═══════════════════════════════════════════════════════════════ */
.features {
  background: linear-gradient(180deg, var(--bg-dark) 0%, #110a06 50%, var(--bg-dark) 100%);
  position: relative; overflow: hidden;
}
/* Roster image as faded background */
.features::before { content: none; }
.features-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2rem; position: relative;
  overflow: hidden; cursor: default;
  transition: transform .3s, border-color .3s;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  opacity: 0; transform: translateY(30px);
}
.feature-card.visible {
  opacity: 1; transform: translateY(0);
  transition: opacity .5s, transform .5s, border-color .3s, filter .3s;
}
.feature-card:hover {
  border-color: var(--primary);
  transform: translateY(-6px);
}
.feature-card:hover .feature-glow { opacity: 1; }
.feature-icon {
  font-size: 2.5rem; display: block; margin-bottom: 1rem;
  filter: drop-shadow(0 0 8px rgba(247,201,72,.5));
}
.feature-card h3 {
  font-size: 1.1rem; font-weight: 900;
  color: var(--primary); margin-bottom: .75rem;
}
.feature-card p { font-size: .9rem; color: var(--text-dim); line-height: 1.7; }
.feature-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(247,201,72,.07) 0%, transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.feature-pixel-border {
  position: absolute; top: 0; right: 0;
  width: 16px; height: 16px;
  background: var(--primary); opacity: .4;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* ═══════════════════════════════════════════════════════════════
   CLASSES
   ═══════════════════════════════════════════════════════════════ */
.classes-section {
  background: var(--bg-dark);
  position: relative; overflow: hidden;
}
.classes-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(123,47,255,.08) 0%, transparent 60%);
}
.classes-showcase {
  max-width: 900px; margin: 0 auto 2rem;
  position: relative; min-height: 320px;
}
.class-card {
  position: absolute; inset: 0;
  display: none; gap: 3rem; align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2.5rem;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.class-card.active { display: flex; }

/* Pixel class sprites */
.class-sprite {
  flex-shrink: 0; width: 120px; height: 160px;
  image-rendering: pixelated; position: relative;
}
.warrior-big {
  background: linear-gradient(180deg, var(--primary) 0%, #c49a20 100%);
  clip-path: polygon(30% 0%, 70% 0%, 90% 10%, 95% 50%, 80% 65%, 75% 100%, 25% 100%, 20% 65%, 5% 50%, 10% 10%);
  box-shadow: 0 0 40px rgba(247,201,72,.4), inset 0 4px 0 rgba(255,255,255,.3);
  animation: sprite-breathe 2s ease-in-out infinite;
}
.mage-big {
  background: linear-gradient(180deg, var(--accent3) 0%, #4a1a99 100%);
  clip-path: polygon(25% 0%, 75% 0%, 90% 15%, 88% 55%, 70% 100%, 30% 100%, 12% 55%, 10% 15%);
  box-shadow: 0 0 40px rgba(123,47,255,.5), inset 0 4px 0 rgba(255,255,255,.2);
  animation: sprite-float 2.5s ease-in-out infinite;
}
.rogue-big {
  background: linear-gradient(180deg, #1a1a2e, #4a0e6e);
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 95% 60%, 75% 100%, 25% 100%, 5% 60%, 0% 20%);
  box-shadow: 0 0 40px rgba(100,0,180,.5), inset 0 4px 0 rgba(255,255,255,.15);
  animation: sprite-breathe 1.8s ease-in-out infinite;
}
.archer-big {
  background: linear-gradient(180deg, #0d4a1a, #1a8a35);
  clip-path: polygon(30% 0%, 70% 0%, 90% 15%, 85% 55%, 70% 100%, 30% 100%, 15% 55%, 10% 15%);
  box-shadow: 0 0 40px rgba(0,200,80,.4), inset 0 4px 0 rgba(255,255,255,.2);
  animation: sprite-float 2s ease-in-out infinite;
}
@keyframes sprite-breathe {
  0%,100% { transform: scaleY(1); }
  50% { transform: scaleY(1.04); }
}
@keyframes sprite-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.class-info { flex: 1; }
.class-info h3 {
  font-size: 1.6rem; font-weight: 900;
  color: var(--primary); margin-bottom: 1.25rem;
}
.class-stats { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.stat-bar {
  display: flex; align-items: center; gap: .75rem; font-size: .85rem;
}
.stat-bar > span { width: 3rem; color: var(--text-dim); flex-shrink: 0; }
.bar { flex: 1; height: 8px; background: rgba(255,255,255,.08); position: relative; }
.bar-fill {
  height: 100%; width: var(--w);
  background: linear-gradient(90deg, var(--primary), var(--accent));
  position: relative;
  transition: width 1s cubic-bezier(.34,1.56,.64,1);
}
.bar-fill::after {
  content: ''; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px; background: var(--primary);
  box-shadow: 0 0 6px var(--primary);
}
.class-info p { font-size: .9rem; color: var(--text-dim); line-height: 1.7; }

.class-tabs {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}
.class-tab {
  font-family: 'Press Start 2P', monospace; font-size: .55rem;
  padding: .7rem 1.4rem; cursor: pointer;
  background: var(--bg-card); color: var(--text-dim);
  border: 1px solid var(--border);
  transition: all .2s;
}
.class-tab.active, .class-tab:hover {
  background: var(--primary); color: #0d0a00;
  border-color: var(--primary);
  box-shadow: 3px 3px 0 var(--primary-dk);
}

/* ═══════════════════════════════════════════════════════════════
   GALLERY
   ═══════════════════════════════════════════════════════════════ */
.gallery {
  background: linear-gradient(180deg, var(--bg-dark) 0%, #0a1020 100%);
}
.gallery-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 200px 200px;
  gap: 1rem;
}
.gallery-item { overflow: hidden; position: relative; cursor: pointer; }
.gi-large { grid-column: span 2; }
.gallery-img {
  width: 100%; height: 100%; position: relative;
  transition: transform .4s;
  image-rendering: pixelated;
}
.gallery-item:hover .gallery-img { transform: scale(1.05); }
.gallery-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .3s;
  font-weight: 700; font-size: .9rem;
  color: var(--primary);
}
.gallery-item:hover .gallery-overlay { opacity: 1; }

/* Pixel art mock screenshots via CSS gradients */
.gi-1 {
  background:
    linear-gradient(180deg, #0d1f3d 0%, #1a3d70 40%, #0d1f3d 100%),
    repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(0,100,200,.2) 40px, rgba(0,100,200,.2) 42px);
  box-shadow: inset 0 0 60px rgba(0,100,255,.3);
}
.gi-1::before {
  content: '⚔'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 5rem; opacity: .15;
}
.gi-2 {
  background: linear-gradient(135deg, #1a0a30 0%, #3d1a70 50%, #1a0a30 100%);
  box-shadow: inset 0 0 50px rgba(150,0,255,.3);
}
.gi-2::before {
  content: '✨'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 4rem; opacity: .2;
}
.gi-3 {
  background: linear-gradient(180deg, #0a1a10 0%, #1a3d1a 50%, #0a1a10 100%);
  box-shadow: inset 0 0 40px rgba(0,200,50,.25);
}
.gi-3::before {
  content: '🏰'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 4rem; opacity: .2;
}
.gi-4 {
  background: linear-gradient(135deg, #1a1a0a 0%, #3d3d0a 50%, #1a1a0a 100%);
  box-shadow: inset 0 0 40px rgba(200,200,0,.2);
}
.gi-4::before {
  content: '🗺'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 4rem; opacity: .2;
}
.gi-5 {
  background: linear-gradient(180deg, #1a0a0a 0%, #3d1010 40%, #1a0a0a 100%);
  box-shadow: inset 0 0 60px rgba(255,50,0,.3);
}
.gi-5::before {
  content: '🐉'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 5rem; opacity: .15;
}

/* ═══════════════════════════════════════════════════════════════
   RANKING
   ═══════════════════════════════════════════════════════════════ */
.ranking { background: var(--bg-dark); }
.ranking-container { max-width: 900px; margin: 0 auto; }
.ranking-tabs {
  display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.rank-tab {
  font-family: 'Press Start 2P', monospace; font-size: .55rem;
  padding: .6rem 1.2rem; cursor: pointer;
  background: var(--bg-card); color: var(--text-dim);
  border: 1px solid var(--border); transition: all .2s;
}
.rank-tab.active, .rank-tab:hover {
  background: var(--accent); color: #fff;
  border-color: var(--accent); box-shadow: var(--glow-red);
}
.ranking-table-wrap { overflow-x: auto; }
.ranking-table {
  width: 100%; border-collapse: collapse;
  font-size: .88rem;
}
.ranking-table th {
  background: var(--bg-card2); color: var(--text-dim);
  padding: .75rem 1rem; text-align: left;
  font-size: .75rem; font-weight: 700;
  border-bottom: 2px solid var(--border);
}
.ranking-table td {
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .2s;
}
.ranking-table tr:hover td { background: rgba(255,255,255,.03); }
.ranking-table .rank-1 td:first-child { color: #ffd700; font-weight: 900; }
.ranking-table .rank-2 td:first-child { color: #c0c0c0; font-weight: 700; }
.ranking-table .rank-3 td:first-child { color: #cd7f32; font-weight: 700; }
.loading-text { text-align: center; color: var(--text-dim); padding: 2rem !important; }

/* ═══════════════════════════════════════════════════════════════
   NEWS
   ═══════════════════════════════════════════════════════════════ */
.news-section {
  background: linear-gradient(180deg, var(--bg-dark), #090f1c);
}
.news-tabs {
  display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap;
  margin: 0 auto 2rem; max-width: 1100px; padding: 0 1.5rem;
}
.news-tab {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); padding: .4rem 1.1rem; font-size: .78rem;
  font-family: inherit; cursor: pointer; letter-spacing: .05em;
  transition: all .25s;
}
.news-tab:hover, .news-tab.active {
  border-color: var(--primary); color: var(--primary);
  background: rgba(247,201,72,.08);
}
.news-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.news-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1.5rem; position: relative;
  transition: transform .3s, border-color .3s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  cursor: pointer;
}
.news-card:hover { transform: translateY(-4px); border-color: var(--primary); }
.news-card-thumb {
  width: 100%; height: 140px; object-fit: cover;
  border: 1px solid var(--border); margin-bottom: 1rem;
  display: block;
}
.news-badge {
  display: inline-block; font-size: .7rem; font-weight: 700;
  padding: .2rem .6rem; margin-bottom: .75rem; border-radius: 2px;
}
.badge-announce { background: rgba(247,201,72,.15); color: var(--primary); border: 1px solid rgba(247,201,72,.3); }
.badge-update    { background: rgba(0,212,255,.15); color: var(--accent2); border: 1px solid rgba(0,212,255,.3); }
.badge-maintenance { background: rgba(255,77,109,.15); color: var(--accent); border: 1px solid rgba(255,77,109,.3); }
.news-card h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .5rem; }
.news-card p  { font-size: .85rem; color: var(--text-dim); line-height: 1.6; margin-bottom: .75rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-date    { font-size: .75rem; color: var(--text-dim); }
.news-loading { grid-column: 1/-1; text-align: center; color: var(--text-dim); padding: 3rem; }

/* ═══════════════════════════════════════════════════════════════
   DOWNLOAD
   ═══════════════════════════════════════════════════════════════ */
.download {
  position: relative; overflow: hidden;
  background: var(--bg-dark);
  text-align: center;
}
.download-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,107,26,.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-dark) 0%, #110600 50%, var(--bg-dark) 100%);
}
/* Roster photo behind download */
.download::before { content: none; }
.download-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.download-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 900; margin: 1rem 0;
}
.download-desc { color: var(--text-dim); margin-bottom: 2.5rem; }
.download-requirements {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1rem; margin-bottom: 2.5rem; text-align: left;
}
.req-item {
  display: flex; align-items: center; gap: 1rem;
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 1rem 1.25rem;
}
.req-icon { font-size: 1.5rem; }
.req-item strong { display: block; font-size: .85rem; color: var(--text); margin-bottom: .2rem; }
.req-item span   { font-size: .8rem; color: var(--text-dim); }
.download-btns { display: flex; justify-content: center; margin-bottom: 1rem; }
.download-meta { font-size: .8rem; color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer {
  background: #050a10;
  border-top: 1px solid var(--border);
}
.footer-top {
  max-width: 1200px; margin: 0 auto;
  padding: 3rem 2rem;
  display: flex; gap: 4rem; flex-wrap: wrap;
}
.footer-brand { flex: 1; min-width: 200px; }
.footer-brand .pixel-logo { font-size: .85rem; margin-bottom: .75rem; }
.footer-brand p { font-size: .85rem; color: var(--text-dim); }
.footer-links { display: flex; gap: 3rem; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: .5rem; }
.footer-col h4 { font-size: .85rem; font-weight: 700; color: var(--text); margin-bottom: .5rem; }
.footer-col a {
  font-size: .82rem; color: var(--text-dim); text-decoration: none;
  transition: color .2s;
}
.footer-col a:hover { color: var(--primary); }
.server-status { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--text-dim); }
.status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #aaa; flex-shrink: 0;
  transition: background .3s;
}
.status-dot.online  { background: #00ff88; box-shadow: 0 0 8px #00ff88; animation: pulse-dot 2s infinite; }
.status-dot.offline { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
@keyframes pulse-dot {
  0%,100% { opacity: 1; } 50% { opacity: .5; }
}
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 1.5rem 2rem; text-align: center;
  font-size: .8rem; color: var(--text-dim);
  display: flex; flex-direction: column; gap: .3rem;
}

/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.8); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
.pixel-modal {
  background: var(--bg-card); border: 2px solid var(--border);
  width: 100%; max-width: 420px;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  transform: translateY(30px); transition: transform .25s;
}
.modal-overlay.active .pixel-modal { transform: translateY(0); }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card2);
}
.modal-header h3 {
  font-family: 'Press Start 2P', monospace; font-size: .75rem;
  color: var(--primary);
}
.modal-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 1rem; cursor: pointer; transition: color .2s;
  line-height: 1;
}
.modal-close:hover { color: var(--accent); }
.modal-body { padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label { font-size: .8rem; color: var(--text-dim); font-weight: 600; }
.form-group label small { font-weight: 400; color: var(--text-dim); opacity: .7; margin-left: .25rem; }
.pixel-input {
  background: var(--bg-dark); border: 1px solid var(--border);
  color: var(--text); padding: .65rem .9rem;
  font-family: 'Noto Sans SC', sans-serif; font-size: .88rem;
  outline: none; transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.pixel-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(247,201,72,.15);
}
.form-error   { font-size: .8rem; color: var(--accent); min-height: 1.2em; padding: .2rem 0; }
.form-success { font-size: .8rem; color: #00ff88; padding: .2rem 0; }
.form-hint    { font-size: .82rem; color: var(--text-dim); margin: 0 0 .8rem; line-height: 1.6; }
.modal-footer-links { text-align: center; font-size: .82rem; color: var(--text-dim); }
.link-pixel { color: var(--primary); text-decoration: none; font-weight: 700; }
.link-pixel:hover { text-decoration: underline; }

/* Input with inline button */
.input-with-btn { display: flex; gap: .5rem; }
.input-with-btn .pixel-input { flex: 1; }
.btn-sm { padding: .5rem .85rem; font-size: .75rem; white-space: nowrap; flex-shrink: 0; }
.btn-sm:disabled { opacity: .5; cursor: not-allowed; }

/* ─── Profile Panel ─────────────────────────────────────────────── */
.profile-header {
  display: flex; align-items: center; gap: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.profile-avatar {
  width: 64px; height: 64px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent3), var(--primary));
  clip-path: polygon(25% 0%,75% 0%,100% 25%,100% 75%,75% 100%,25% 100%,0% 75%,0% 25%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 0 20px rgba(123,47,255,.4);
}
.profile-name {
  font-family: 'Press Start 2P', monospace;
  font-size: .75rem; color: var(--primary);
  margin-bottom: .4rem;
}
.profile-accid { font-size: .78rem; color: var(--text-dim); }
.profile-level {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--bg-card2); border: 1px solid var(--border);
  padding: .25rem .7rem; font-size: .78rem; margin-top: .5rem;
}
.profile-level span { color: var(--primary); font-weight: 700; }

.profile-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.stat-block {
  background: var(--bg-card2); border: 1px solid var(--border);
  padding: .75rem 1rem;
}
.stat-block .sb-label {
  font-size: .72rem; color: var(--text-dim); margin-bottom: .3rem;
}
.stat-block .sb-val {
  font-family: 'Press Start 2P', monospace;
  font-size: .75rem; color: var(--primary);
}
.stat-block .sb-val.green { color: #00ff88; }
.stat-block .sb-val.red   { color: var(--accent); }
.stat-block .sb-val.blue  { color: var(--accent2); }

.profile-xp-bar {
  width: 100%; height: 6px; background: rgba(255,255,255,.08);
  margin-top: .4rem;
}
.profile-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .6s ease;
}
.profile-no-char {
  text-align: center; padding: 1.5rem 0;
  color: var(--text-dim); font-size: .85rem; line-height: 1.8;
}
.profile-cash-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, rgba(255,107,26,.15) 0%, rgba(255,107,26,.05) 100%);
  border: 1px solid rgba(255,107,26,.4);
  padding: .6rem 1rem;
  margin-bottom: .25rem;
}
.cash-label { font-size: .8rem; color: var(--text-dim); }
.cash-amount { font-family: 'Press Start 2P', monospace; font-size: .8rem; color: var(--primary); }

/* ─── Slide Verify ──────────────────────────────────────────────── */
.slide-track {
  position: relative;
  height: 46px;
  background: var(--bg-dark);
  border: 2px solid var(--border);
  user-select: none;
  overflow: visible;
}
.slide-progress {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  background: rgba(0,255,136,.15);
  pointer-events: none;
  transition: background .2s;
}
.slide-text {
  position: absolute; width: 100%;
  text-align: center; line-height: 42px;
  font-size: .75rem; color: var(--text-dim);
  pointer-events: none; letter-spacing: 1px;
  transition: opacity .2s;
}
.slide-btn {
  position: absolute; left: 2px; top: 2px;
  width: 42px; height: 38px;
  background: var(--primary); color: #0d0a00;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: bold; cursor: grab;
  z-index: 1;
  box-shadow: 3px 3px 0 var(--primary-dk);
  transition: background .2s, box-shadow .2s;
}
.slide-btn:active { cursor: grabbing; }
.slide-btn.success {
  background: #00ff88;
  box-shadow: 3px 3px 0 #00aa55, 0 0 16px rgba(0,255,136,.4);
  color: #001a0d;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 3000;
  background: var(--bg-card); border: 1px solid var(--primary);
  color: var(--text); padding: .9rem 1.5rem;
  font-size: .85rem; box-shadow: 4px 4px 0 var(--primary-dk);
  max-width: 320px;
  transform: translateX(120%); transition: transform .3s;
}
.toast.show { transform: translateX(0); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-links, .nav-actions { display: none; }
  .hamburger { display: block; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: fixed; top: 64px; left: 0; right: 0;
    background: rgba(8,8,8,.97); padding: 1.5rem 2rem;
    gap: 1.25rem; border-bottom: 1px solid var(--border);
  }
  .hero-content { padding-top: 5rem; }
  .gallery-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .gi-large { grid-column: span 1; }
  .gallery-img { height: 180px; }
  .download-requirements { grid-template-columns: 1fr; }
  .class-card { flex-direction: column; position: relative; display: none; }
  .class-card.active { display: flex; }
  .classes-showcase { min-height: auto; }
  .footer-top { flex-direction: column; gap: 2rem; }
  .hero-stats { gap: 1rem; }
  .shop-grid  { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════ SHOP SECTION ══════════════════════════════════════ */
.shop-section {
  padding: 6rem 0;
  background: var(--bg-darker);
  position: relative;
}
.shop-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,107,26,.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Category tabs */
.shop-tabs {
  display: flex;
  gap: .6rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 auto 2.5rem;
  max-width: 1200px;
  padding: 0 1.5rem;
}
.shop-cash-bar {
  margin-left: auto;
  display: flex; align-items: center; gap: .6rem;
  background: rgba(255,107,26,.12);
  border: 1px solid rgba(255,107,26,.35);
  padding: .35rem .9rem;
  font-size: .75rem;
  color: var(--text-dim);
}
.shop-cash-val { font-family: 'Press Start 2P', monospace; font-size: .65rem; color: var(--primary); }
.shop-tab {
  padding: .45rem 1.4rem;
  background: var(--bg-dark);
  border: 2px solid var(--border);
  color: var(--text-dim);
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem;
  cursor: pointer;
  transition: all .2s;
  text-transform: uppercase;
}
.shop-tab:hover   { border-color: var(--primary); color: var(--primary); }
.shop-tab.active  { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Item grid */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 190px));
  gap: 1.4rem;
  justify-content: center;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
  overflow-x: hidden;
}
.shop-loading { color: var(--text-dim); text-align: center; grid-column: 1/-1; padding: 3rem; }

/* Item card — fixed 190 × auto, image 160×120 */
.shop-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  width: 190px;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.shop-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(255,107,26,.25);
}
.shop-card-badge {
  position: absolute; top: 6px; left: 6px;
  font-size: .5rem;
  padding: 2px 6px;
  background: var(--primary);
  color: #fff;
  font-family: 'Press Start 2P', monospace;
}
.shop-card-img {
  width: 160px; height: 120px;
  object-fit: cover;
  margin: 15px auto 0;
  display: block;
  image-rendering: pixelated;
  background: var(--bg-darker);
}
.shop-card-img-placeholder {
  width: 160px; height: 120px;
  margin: 15px auto 0;
  background: var(--bg-darker);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
  color: var(--border);
}
.shop-card-body {
  padding: .7rem .75rem .85rem;
  display: flex; flex-direction: column; gap: .35rem;
  flex: 1;
}
.shop-card-name {
  font-size: .65rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-card-desc {
  font-size: .7rem;
  color: var(--text-dim);
  line-height: 1.45;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-card-price {
  font-family: 'Press Start 2P', monospace;
  font-size: .7rem;
  color: var(--primary);
  margin-top: .25rem;
}
.shop-card-price span { color: var(--text-dim); font-size: .55rem; }
.shop-card-actions {
  display: flex;
  gap: .4rem;
  padding: 0 .75rem .75rem;
}
.shop-btn {
  flex: 1;
  padding: .38rem 0;
  font-size: .55rem;
  font-family: 'Press Start 2P', monospace;
  border: 2px solid;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.shop-btn-buy {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.shop-btn-buy:hover  { background: transparent; color: var(--primary); }
.shop-btn-gift {
  background: transparent; border-color: #a78bfa; color: #a78bfa;
}
.shop-btn-gift:hover { background: #a78bfa; color: #fff; }
.shop-empty { grid-column: 1/-1; text-align: center; color: var(--text-dim); padding: 3rem; font-size: .85rem; }

/* ── 分页 ── */
.shop-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem; margin-top: 2rem;
}
.pager-btn {
  background: var(--bg-card); border: 1px solid var(--primary);
  color: var(--text); padding: .45rem 1.1rem;
  font-family: 'Press Start 2P', monospace; font-size: .6rem;
  cursor: pointer; transition: background .15s, color .15s;
  letter-spacing: .05em;
}
.pager-btn:hover:not(:disabled) { background: var(--primary); color: #000; }
.pager-btn:disabled { opacity: .35; cursor: not-allowed; }
.pager-info { font-size: .72rem; color: var(--text-dim); min-width: 4rem; text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   HONOR SHOP
   ═══════════════════════════════════════════════════════════════ */
.honor-section {
  padding: 5rem 2rem;
  background: linear-gradient(180deg, var(--bg-deep) 0%, rgba(30,10,5,.95) 100%);
  position: relative;
}
.honor-header-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.honor-pts-display {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(255,107,26,.1); border: 1px solid var(--primary);
  padding: .5rem 1.2rem; font-size: .82rem; color: var(--text);
}
.honor-tip-display { border-color: var(--border); background: transparent; color: var(--text-dim); }
.honor-icon { color: var(--primary); font-size: 1rem; }
.honor-pts-num { color: var(--primary); font-weight: 700; font-size: 1.1rem; }
.honor-cost { color: #f59e0b !important; }
.honor-cost .honor-icon { font-size: .85rem; }

/* ═══════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER — 原生 select，固定右下角，零布局影响
   ═══════════════════════════════════════════════════════════════ */
#langSwitcherWrap {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: .4rem;
  background: #0d0d14;
  border: 1px solid #ff6b1a;
  padding: .4rem .7rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.7);
}
.lang-globe-label { font-size: .85rem; line-height: 1; user-select: none; color: #fff; }
#langSelect {
  background: #0d0d14;
  border: 1px solid #444;
  outline: none;
  color: #fff;
  font-size: .72rem;
  cursor: pointer;
  padding: 2px 4px;
}
#langSelect option { background: #0d0d14; color: #fff; }
#langSwitcherWrap.translating { opacity: .65; pointer-events: none; }
@keyframes langSpin { to { transform: rotate(360deg); } }
#langSwitcherWrap.translating .lang-globe-label { display: inline-block; animation: langSpin .7s linear infinite; }

/* ═══════════════════════════════════════════════════════════════
   GIGASLAVE visual polish - pixel 2D shooter skin
   UI only: decorative layers, cards, HUD and combat atmosphere
   ═══════════════════════════════════════════════════════════════ */
:root {
  --primary:    #ff7a1a;
  --primary-dk: #8f3100;
  --accent:     #ff275f;
  --accent2:    #00e5ff;
  --accent3:    #8a5cff;
  --bg-dark:    #05070c;
  --bg-card:    #0c111b;
  --bg-card2:   #111a27;
  --border:     #263247;
  --text:       #eef7ff;
  --text-dim:   #88a0b8;
  --glow-gold:  0 0 18px rgba(255,122,26,.72), 0 0 48px rgba(255,55,18,.22);
  --glow-red:   0 0 18px rgba(255,39,95,.72), 0 0 52px rgba(255,39,95,.22);
  --glow-blue:  0 0 18px rgba(0,229,255,.72), 0 0 54px rgba(0,229,255,.2);
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgba(0,229,255,.12), transparent 26rem),
    radial-gradient(circle at 80% 18%, rgba(255,39,95,.10), transparent 28rem),
    linear-gradient(180deg, #04070c 0%, #070a12 40%, #05070c 100%);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0,229,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.045) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.15));
}

.navbar {
  background:
    linear-gradient(180deg, rgba(7,12,20,.98), rgba(7,12,20,.9)),
    repeating-linear-gradient(90deg, rgba(255,122,26,.08) 0 1px, transparent 1px 14px);
  border-bottom: 1px solid rgba(0,229,255,.24);
  box-shadow: 0 0 0 1px rgba(255,122,26,.08), 0 10px 34px rgba(0,0,0,.38);
}

.pixel-logo {
  color: #fff;
  text-shadow: 2px 2px 0 #001018, -2px 0 0 var(--accent), 2px 0 0 var(--accent2), var(--glow-gold);
}

.nav-link {
  color: #b8cee0;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.nav-link:hover { color: #fff; text-shadow: var(--glow-blue); }
.nav-link::after { background: linear-gradient(90deg, var(--accent2), var(--primary), var(--accent)); }

.btn-pixel {
  border: 1px solid rgba(255,255,255,.18);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn-primary {
  background: linear-gradient(135deg, #ffe066 0%, var(--primary) 44%, #ff2d4e 100%);
  color: #070a12;
  box-shadow: 4px 4px 0 var(--primary-dk), 0 0 24px rgba(255,122,26,.45);
}
.btn-outline,
.btn-ghost {
  background: rgba(10,18,30,.72);
  border-color: rgba(0,229,255,.5);
  color: #d8f6ff;
  box-shadow: 3px 3px 0 rgba(0,229,255,.18);
}
.btn-outline:hover,
.btn-ghost:hover {
  border-color: var(--accent2);
  color: #fff;
  box-shadow: 5px 5px 0 rgba(0,229,255,.24), var(--glow-blue);
}

.hero {
  min-height: 108vh;
  justify-content: flex-start;
  padding-left: max(2rem, calc((100vw - 1280px) / 2 + 2rem));
  padding-right: max(2rem, calc((100vw - 1280px) / 2 + 2rem));
}

.layer-sky {
  background:
    radial-gradient(circle at 74% 34%, rgba(0,229,255,.22), transparent 18rem),
    radial-gradient(circle at 30% 75%, rgba(255,122,26,.24), transparent 22rem),
    linear-gradient(180deg, #070b16 0%, #0b101d 42%, #120906 100%);
}

.layer-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent 0 68%, rgba(0,229,255,.14) 68% 69%, transparent 69%),
    repeating-linear-gradient(90deg, transparent 0 54px, rgba(0,229,255,.09) 54px 56px),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.64) 82%);
  opacity: .78;
}

.hero-bg::before {
  background:
    linear-gradient(90deg, rgba(2,5,10,.98) 0%, rgba(2,5,10,.74) 44%, rgba(2,5,10,.22) 74%, rgba(2,5,10,.88) 100%),
    radial-gradient(circle at 70% 45%, rgba(0,229,255,.14), transparent 26rem),
    linear-gradient(180deg, rgba(0,0,0,.24) 0%, transparent 40%, rgba(0,0,0,.86) 100%);
}

.hero-content {
  text-align: left;
  max-width: 650px;
  margin-right: auto;
  padding-top: 8.5rem;
}

.hero-tagline {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: #001018;
  background: linear-gradient(90deg, var(--accent2), #98f7ff);
  padding: .55rem .85rem;
  border: 2px solid rgba(255,255,255,.2);
  box-shadow: 5px 5px 0 rgba(0,0,0,.45), var(--glow-blue);
  text-shadow: none;
}
.hero-tagline::before { content: '●'; color: #ff275f; animation: hudBlink 1s steps(1) infinite; }
@keyframes hudBlink { 50% { opacity: .2; } }

.hero-title {
  color: #fff;
  text-shadow:
    6px 6px 0 rgba(0,0,0,.74),
    -3px 0 0 rgba(255,39,95,.85),
    3px 0 0 rgba(0,229,255,.85),
    var(--glow-gold);
}
.hero-title-sub {
  color: var(--accent2);
  text-shadow: 4px 4px 0 rgba(0,0,0,.65), var(--glow-blue);
}
.hero-desc {
  color: #d7eaff;
  font-size: 1.15rem;
  max-width: 520px;
}
.hero-stats {
  justify-content: flex-start;
  gap: 1rem;
}
.stat {
  min-width: 150px;
  padding: .8rem 1rem;
  background: rgba(10,18,30,.62);
  border: 1px solid rgba(0,229,255,.22);
  box-shadow: inset 0 0 18px rgba(0,229,255,.04);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.stat-divider { display: none; }
.stat-label { color: #a7c4dc; }

.hero-showcase {
  position: absolute;
  right: max(2rem, calc((100vw - 1280px) / 2 + 1rem));
  top: 54%;
  transform: translateY(-50%);
  width: min(48vw, 620px);
  z-index: 4;
  pointer-events: none;
}
.pixel-combat-frame {
  position: relative;
  height: 390px;
  border: 3px solid rgba(0,229,255,.42);
  background:
    linear-gradient(180deg, rgba(8,18,34,.82), rgba(7,10,15,.9)),
    radial-gradient(circle at 52% 30%, rgba(0,229,255,.18), transparent 14rem);
  box-shadow: 10px 10px 0 rgba(0,0,0,.35), inset 0 0 52px rgba(0,229,255,.08), var(--glow-blue);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
  overflow: hidden;
}
.combat-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,229,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.08) 1px, transparent 1px);
  background-size: 24px 24px;
  transform: perspective(420px) rotateX(56deg) translateY(80px);
  transform-origin: center bottom;
}
.combat-moon {
  position: absolute;
  right: 70px;
  top: 42px;
  width: 92px;
  height: 92px;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(0,229,255,.36) 46%, transparent 49%);
  box-shadow: 0 0 42px rgba(0,229,255,.42);
  image-rendering: pixelated;
  clip-path: polygon(0 0, 86% 0, 100% 14%, 100% 100%, 14% 100%, 0 86%);
}
.combat-platform {
  position: absolute;
  height: 18px;
  background: linear-gradient(90deg, #263247, #ff7a1a, #263247);
  border: 2px solid rgba(255,255,255,.12);
  box-shadow: 0 0 16px rgba(255,122,26,.32);
}
.platform-a { left: 42px; bottom: 78px; width: 210px; }
.platform-b { right: 54px; bottom: 128px; width: 235px; }
.combat-soldier {
  position: absolute;
  width: 58px;
  height: 90px;
  filter: drop-shadow(0 0 14px rgba(0,229,255,.34));
}
.soldier-left { left: 120px; bottom: 96px; }
.soldier-right { right: 136px; bottom: 146px; transform: scaleX(-1); }
.soldier-head,
.soldier-body,
.soldier-gun {
  position: absolute;
  display: block;
  image-rendering: pixelated;
}
.soldier-head {
  left: 19px;
  top: 0;
  width: 20px;
  height: 20px;
  background: #dbefff;
  box-shadow: inset -4px -4px 0 #66788e;
}
.soldier-body {
  left: 12px;
  top: 22px;
  width: 30px;
  height: 44px;
  background: linear-gradient(180deg, var(--accent2), #115f78);
  box-shadow: inset -6px 0 0 rgba(0,0,0,.25), 0 28px 0 -10px #29384e;
}
.soldier-gun {
  left: 42px;
  top: 34px;
  width: 56px;
  height: 9px;
  background: linear-gradient(90deg, #d8edf7, #526b7a);
  box-shadow: 20px 0 0 -2px var(--primary);
}
.bullet-trail {
  position: absolute;
  height: 3px;
  width: 170px;
  background: linear-gradient(90deg, transparent, #fff, var(--primary), transparent);
  box-shadow: 0 0 16px var(--primary);
  animation: bulletSweep 1.1s linear infinite;
}
.trail-a { left: 205px; bottom: 182px; }
.trail-b { right: 210px; bottom: 232px; animation-delay: .45s; }
@keyframes bulletSweep {
  0% { transform: translateX(-26px); opacity: 0; }
  18%, 72% { opacity: 1; }
  100% { transform: translateX(62px); opacity: 0; }
}
.muzzle-flash {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #fff;
  box-shadow: 0 0 18px #fff, 0 0 34px var(--primary);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: flashPulse .35s steps(1) infinite;
}
.flash-a { left: 217px; bottom: 174px; }
.flash-b { right: 211px; bottom: 224px; animation-delay: .18s; }
@keyframes flashPulse { 50% { opacity: .1; transform: scale(.7); } }
.hud-panel {
  position: absolute;
  z-index: 2;
  min-width: 170px;
  padding: .8rem .95rem;
  background: rgba(5,10,18,.82);
  border: 1px solid rgba(0,229,255,.35);
  box-shadow: 4px 4px 0 rgba(0,0,0,.28), inset 0 0 18px rgba(0,229,255,.06);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.hud-panel-left { left: -24px; top: -30px; }
.hud-panel-right { right: -16px; bottom: -34px; text-align: right; }
.hud-panel span,
.hud-panel em {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: .45rem;
  font-style: normal;
  color: var(--accent2);
}
.hud-panel strong {
  display: block;
  margin: .35rem 0;
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: .62rem;
}
.hud-panel em { color: var(--primary); }

section {
  position: relative;
  overflow: hidden;
}
section::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.42), rgba(255,122,26,.38), transparent);
  pointer-events: none;
}
.section-title,
.download-title {
  color: #fff;
  text-shadow: 3px 3px 0 rgba(0,0,0,.52), var(--glow-blue);
}
.section-tag {
  color: var(--primary);
  text-shadow: var(--glow-gold);
}
.pixel-divider {
  height: 6px;
  background:
    linear-gradient(90deg, transparent, var(--accent2), var(--primary), var(--accent), transparent);
  box-shadow: 0 0 18px rgba(0,229,255,.25);
}

.features,
.ranking,
.news-section,
.shop-section,
.honor-section,
.download {
  background:
    radial-gradient(circle at 15% 0%, rgba(0,229,255,.10), transparent 24rem),
    radial-gradient(circle at 85% 10%, rgba(255,39,95,.08), transparent 24rem),
    linear-gradient(180deg, #05070c, #08101a 48%, #05070c);
}

.feature-card,
.news-card,
.req-item,
.shop-card,
.ranking-table-wrap,
.honor-pts-display,
.modal-overlay .pixel-modal {
  background:
    linear-gradient(180deg, rgba(16,26,39,.92), rgba(9,14,23,.96));
  border-color: rgba(0,229,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 34px rgba(0,0,0,.22);
}
.feature-card::before,
.news-card::before,
.shop-card::before,
.req-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent2), var(--primary));
  box-shadow: 0 0 14px rgba(0,229,255,.35);
}
.feature-card:hover,
.news-card:hover,
.shop-card:hover,
.req-item:hover {
  border-color: var(--accent2);
  box-shadow: 0 14px 38px rgba(0,229,255,.12), 0 0 0 1px rgba(255,122,26,.18);
}
.feature-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,229,255,.08);
  border: 1px solid rgba(0,229,255,.25);
  box-shadow: inset 0 0 18px rgba(0,229,255,.08);
}
.feature-card h3,
.shop-card-price,
.cash-amount,
.honor-pts-num {
  color: var(--primary);
  text-shadow: 0 0 12px rgba(255,122,26,.34);
}

.ranking-table {
  background: rgba(5,10,18,.7);
  border: 1px solid rgba(0,229,255,.18);
}
.ranking-table th {
  background: linear-gradient(180deg, rgba(17,29,44,.98), rgba(10,16,27,.98));
  color: var(--accent2);
}
.ranking-table tr:hover td { background: rgba(0,229,255,.055); }

.shop-tab,
.news-tab,
.rank-tab,
.pager-btn {
  background: rgba(8,15,26,.86);
  border-color: rgba(0,229,255,.25);
  color: #b8cee0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.shop-tab.active,
.shop-tab:hover,
.news-tab.active,
.news-tab:hover,
.rank-tab.active,
.rank-tab:hover,
.pager-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent2), var(--primary));
  border-color: transparent;
  color: #061018;
  box-shadow: 0 0 20px rgba(0,229,255,.22);
}

.download-bg {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,122,26,.16), transparent 22rem),
    radial-gradient(circle at 50% 70%, rgba(0,229,255,.10), transparent 24rem),
    linear-gradient(180deg, #05070c, #100806 48%, #05070c);
}
.download-content {
  padding: 2rem;
  border: 1px solid rgba(0,229,255,.16);
  background: rgba(6,12,22,.52);
  box-shadow: inset 0 0 36px rgba(0,229,255,.035);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

.footer {
  background:
    linear-gradient(180deg, #05070c, #030407),
    repeating-linear-gradient(90deg, rgba(0,229,255,.04) 0 1px, transparent 1px 28px);
  border-top-color: rgba(0,229,255,.24);
}

#langSwitcherWrap {
  background: rgba(7,12,20,.94);
  border-color: rgba(0,229,255,.5);
  box-shadow: 0 0 20px rgba(0,229,255,.18), 4px 4px 0 rgba(0,0,0,.32);
}
#langSelect {
  background: #07101b;
  border-color: rgba(255,122,26,.55);
}

@media (max-width: 1100px) {
  .hero {
    justify-content: center;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .hero-content {
    text-align: center;
    margin: 0 auto;
    padding-top: 7rem;
  }
  .hero-stats { justify-content: center; }
  .hero-showcase {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: min(92vw, 620px);
    margin: 1rem auto 5rem;
  }
}

@media (max-width: 768px) {
  .hero { min-height: auto; padding-bottom: 4rem; }
  .hero-title { font-size: clamp(2rem, 13vw, 3.8rem); }
  .hero-showcase { display: none; }
  .stat { min-width: 135px; }
}

/* Hero poster integration */
.hero-showcase {
  width: min(36vw, 460px);
  right: max(2rem, calc((100vw - 1280px) / 2 + 3rem));
}
.pixel-combat-frame {
  height: auto;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  padding: .65rem;
  background:
    radial-gradient(circle at 50% 12%, rgba(0,229,255,.18), transparent 15rem),
    linear-gradient(180deg, rgba(10,18,31,.92), rgba(4,7,12,.98));
}
.pixel-combat-frame::before {
  content: '';
  position: absolute;
  inset: .65rem;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(0,229,255,.28);
  box-shadow: inset 0 0 36px rgba(0,0,0,.35);
}
.pixel-combat-frame::after {
  content: 'OFFICIAL POSTER';
  position: absolute;
  left: 1.2rem;
  bottom: 1.1rem;
  z-index: 3;
  font-family: 'Press Start 2P', monospace;
  font-size: .45rem;
  color: #061018;
  background: linear-gradient(90deg, var(--accent2), var(--primary));
  padding: .35rem .55rem;
  box-shadow: 3px 3px 0 rgba(0,0,0,.45);
}
.hero-poster-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-height: 530px;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
  filter: saturate(1.08) contrast(1.05);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.poster-glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 45%;
  height: 45%;
  filter: blur(28px);
  opacity: .42;
}
.poster-glow-a { right: -8%; top: 8%; background: var(--accent2); }
.poster-glow-b { left: -10%; bottom: 6%; background: var(--primary); }

@media (max-width: 1100px) {
  .hero-showcase {
    width: min(78vw, 420px);
    right: auto;
  }
  .pixel-combat-frame { max-height: 500px; }
}

/* Poster free-blend mode: show the full image without boxing it in */
.hero-showcase {
  width: min(44vw, 560px);
  top: 52%;
  right: max(1rem, calc((100vw - 1280px) / 2 + 1rem));
  filter: drop-shadow(0 28px 44px rgba(0,0,0,.48));
}
.pixel-combat-frame {
  border: 0;
  padding: 0;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  overflow: visible;
}
.pixel-combat-frame::after { content: none; }
.pixel-combat-frame::before {
  inset: -6% auto -6% -12%;
  width: 42%;
  z-index: 3;
  border: 0;
  background:
    linear-gradient(90deg, rgba(5,7,12,.72), rgba(5,7,12,.28), transparent),
    radial-gradient(circle at 30% 50%, rgba(0,229,255,.12), transparent 62%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
}
.hero-poster-img {
  width: 100%;
  height: auto;
  max-height: 74vh;
  object-fit: contain;
  object-position: center;
  clip-path: none;
  border: 0;
  filter: saturate(1.08) contrast(1.05) drop-shadow(0 0 28px rgba(0,229,255,.16));
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.78) 10%, #000 26%, #000 88%, rgba(0,0,0,.65) 96%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.78) 10%, #000 26%, #000 88%, rgba(0,0,0,.65) 96%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
}
.poster-glow {
  z-index: -1;
  width: 55%;
  height: 55%;
  filter: blur(44px);
  opacity: .34;
}
.hud-panel-left { left: 2%; top: 3%; }
.hud-panel-right { right: 3%; bottom: 7%; }

@media (max-width: 1100px) {
  .hero-showcase {
    width: min(88vw, 520px);
    right: auto;
  }
  .pixel-combat-frame::before { display: none; }
  .hero-poster-img { max-height: 560px; }
}

/* New AI poster: larger, no frosted glass, no mask */
.hero-showcase {
  width: min(52vw, 720px);
  top: 52%;
  right: max(.5rem, calc((100vw - 1280px) / 2 - 1rem));
}
.pixel-combat-frame::before {
  display: none !important;
  content: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.hero-poster-img {
  max-height: 82vh;
  filter: saturate(1.08) contrast(1.04) drop-shadow(0 30px 42px rgba(0,0,0,.52));
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

@media (max-width: 1100px) {
  .hero-showcase { width: min(92vw, 620px); }
  .hero-poster-img { max-height: 620px; }
}

/* Concept14 poster test */
.hero-showcase {
  width: min(48vw, 640px);
  right: max(.25rem, calc((100vw - 1280px) / 2 + .5rem));
}
.hero-poster-img {
  max-height: 86vh;
  filter: saturate(1.05) contrast(1.04) drop-shadow(0 28px 46px rgba(0,0,0,.55));
}

@media (max-width: 1100px) {
  .hero-showcase { width: min(90vw, 560px); }
}

/* Global pixel flicker layer */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: .11;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.08) 5px 6px, transparent 6px 12px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(0,229,255,.07) 7px 8px, transparent 8px 14px),
    radial-gradient(circle, rgba(255,122,26,.35) 0 1px, transparent 1px);
  background-size: 36px 36px, 42px 42px, 9px 9px;
  mix-blend-mode: screen;
  animation:
    pagePixelFlicker 1.15s steps(2, end) infinite,
    pagePixelDrift 4.8s steps(1, end) infinite;
}

@keyframes pagePixelFlicker {
  0%, 100% { opacity: .07; filter: hue-rotate(0deg); }
  12% { opacity: .16; }
  13% { opacity: .06; }
  35% { opacity: .12; }
  36% { opacity: .04; }
  62% { opacity: .18; filter: hue-rotate(8deg); }
  64% { opacity: .08; }
}

@keyframes pagePixelDrift {
  0% { transform: translate3d(0, 0, 0); background-position: 0 0, 0 0, 0 0; }
  25% { transform: translate3d(1px, -1px, 0); background-position: 8px -5px, -6px 4px, 2px 1px; }
  50% { transform: translate3d(-1px, 1px, 0); background-position: -4px 7px, 5px -3px, -1px 3px; }
  75% { transform: translate3d(1px, 1px, 0); background-position: 6px 3px, -3px -5px, 3px -2px; }
}

/* Dedicated hero poster pixel shimmer */
.pixel-combat-frame::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(0,229,255,.13) 0 1px, transparent 1px 10px),
    radial-gradient(circle at 25% 30%, rgba(255,39,95,.28) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 58%, rgba(255,122,26,.24) 0 1px, transparent 2px);
  background-size: 100% 100%, 100% 100%, 13px 13px, 17px 17px;
  mix-blend-mode: screen;
  opacity: .16;
  animation: posterPixelNoise .72s steps(2, end) infinite;
}

.pixel-combat-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(255,39,95,.22) 18% 19%, transparent 19% 61%, rgba(0,229,255,.2) 61% 62%, transparent 62%),
    linear-gradient(180deg, transparent 0 44%, rgba(255,255,255,.22) 44% 45%, transparent 45%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: posterGlitchFlash 2.6s steps(1, end) infinite;
}

.hero-poster-img {
  image-rendering: auto;
  animation: posterColorPulse 2.4s steps(1, end) infinite;
}

@keyframes posterPixelNoise {
  0%, 100% { opacity: .11; transform: translate(0, 0); background-position: 0 0, 0 0, 0 0, 0 0; }
  25% { opacity: .2; transform: translate(-1px, 1px); background-position: 0 2px, 2px 0, 4px -2px, -3px 3px; }
  50% { opacity: .14; transform: translate(1px, -1px); background-position: 0 -2px, -2px 0, -3px 4px, 5px -2px; }
  75% { opacity: .24; transform: translate(1px, 1px); background-position: 0 1px, 1px 0, 2px 2px, -4px -3px; }
}

@keyframes posterGlitchFlash {
  0%, 78%, 100% { opacity: 0; transform: translateX(0); }
  80% { opacity: .7; transform: translateX(-5px); }
  81% { opacity: .2; transform: translateX(4px); }
  83% { opacity: .55; transform: translateX(2px); }
  85% { opacity: 0; transform: translateX(0); }
}

@keyframes posterColorPulse {
  0%, 100% { filter: saturate(1.05) contrast(1.04) drop-shadow(0 28px 46px rgba(0,0,0,.55)); }
  12% { filter: saturate(1.18) contrast(1.1) drop-shadow(0 28px 46px rgba(0,0,0,.55)) drop-shadow(2px 0 0 rgba(0,229,255,.22)); }
  13% { filter: saturate(1.05) contrast(1.04) drop-shadow(0 28px 46px rgba(0,0,0,.55)); }
  62% { filter: saturate(1.22) contrast(1.12) drop-shadow(0 28px 46px rgba(0,0,0,.55)) drop-shadow(-2px 0 0 rgba(255,39,95,.2)); }
  64% { filter: saturate(1.05) contrast(1.04) drop-shadow(0 28px 46px rgba(0,0,0,.55)); }
}

@media (prefers-reduced-motion: reduce) {
  .noise,
  body::after,
  .pixel-combat-frame::before,
  .pixel-combat-frame::after,
  .hero-poster-img {
    animation: none !important;
  }
}

/* Strong GIGASLAVE-style glitch pass */
.page-glitch {
  position: relative;
  isolation: isolate;
  animation: pageTextChromatic 5s steps(1, end) infinite;
}

.page-glitch::before,
.page-glitch::after {
  content: attr(data-glitch-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  white-space: inherit;
  text-align: inherit;
  z-index: 1;
}

.page-glitch::before {
  color: var(--accent);
  text-shadow: -2px 0 0 var(--accent);
  clip-path: inset(0 0 58% 0);
  animation: pageGlitchTop 5s steps(1, end) infinite;
}

.page-glitch::after {
  color: var(--accent2);
  text-shadow: 2px 0 0 var(--accent2);
  clip-path: inset(56% 0 0 0);
  animation: pageGlitchBottom 5s steps(1, end) infinite;
}

@keyframes pageTextChromatic {
  0%, 68%, 100% { text-shadow: inherit; transform: translate(0, 0); }
  70% { text-shadow: -1px 0 0 var(--accent), 1px 0 0 var(--accent2); transform: translate(-1px, 0); }
  72% { text-shadow: 2px 0 0 var(--accent2), -2px 0 0 var(--accent); transform: translate(1px, 0); }
  74% { text-shadow: inherit; transform: translate(0, 0); }
}

@keyframes pageGlitchTop {
  0%, 66%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 62% 0); }
  68% { opacity: .95; transform: translate(-4px, -1px); clip-path: inset(0 0 72% 0); }
  70% { opacity: .55; transform: translate(3px, 1px); clip-path: inset(14% 0 48% 0); }
  73% { opacity: .85; transform: translate(-2px, 0); clip-path: inset(34% 0 38% 0); }
  76% { opacity: 0; transform: translate(0, 0); }
}

@keyframes pageGlitchBottom {
  0%, 62%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(62% 0 0 0); }
  64% { opacity: .9; transform: translate(4px, 1px); clip-path: inset(58% 0 8% 0); }
  67% { opacity: .55; transform: translate(-3px, -1px); clip-path: inset(42% 0 22% 0); }
  71% { opacity: .8; transform: translate(2px, 0); clip-path: inset(72% 0 0 0); }
  74% { opacity: 0; transform: translate(0, 0); }
}

.ranking-table th.page-glitch,
.ranking-table td.page-glitch {
  animation: rankingTextChromatic 5s steps(1, end) infinite;
  transform: none !important;
}

.ranking-table th.page-glitch::before,
.ranking-table th.page-glitch::after,
.ranking-table td.page-glitch::before,
.ranking-table td.page-glitch::after {
  content: none;
  display: none;
}

@keyframes rankingTextChromatic {
  0%, 68%, 100% { text-shadow: none; }
  70% { text-shadow: -1px 0 0 var(--accent), 1px 0 0 var(--accent2); }
  72% { text-shadow: 1px 0 0 var(--accent2), -1px 0 0 var(--accent); }
  74% { text-shadow: none; }
}

.pixel-combat-frame {
  isolation: isolate;
}

.pixel-combat-frame::before,
.pixel-combat-frame::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image: url('/assets/images/hero-poster-concept14.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: 0;
  mix-blend-mode: screen;
}

.pixel-combat-frame::before {
  filter: saturate(1.5) contrast(1.2) hue-rotate(140deg);
  animation: posterImageGlitchA 1.9s steps(1, end) infinite !important;
}

.pixel-combat-frame::after {
  filter: saturate(1.6) contrast(1.2) hue-rotate(-35deg);
  animation: posterImageGlitchB 1.9s steps(1, end) infinite !important;
}

.hero-poster-img {
  animation: posterBaseJitter 1.9s steps(1, end) infinite !important;
}

@keyframes posterImageGlitchA {
  0%, 58%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
  60% { opacity: .75; transform: translate(-8px, -2px); clip-path: inset(4% 0 78% 0); }
  62% { opacity: .55; transform: translate(7px, 1px); clip-path: inset(28% 0 54% 0); }
  64% { opacity: .85; transform: translate(-5px, 0); clip-path: inset(48% 0 36% 0); }
  67% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
}

@keyframes posterImageGlitchB {
  0%, 54%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(100% 0 0 0); }
  56% { opacity: .65; transform: translate(8px, 2px); clip-path: inset(72% 0 8% 0); }
  59% { opacity: .45; transform: translate(-6px, -1px); clip-path: inset(38% 0 44% 0); }
  63% { opacity: .7; transform: translate(5px, 0); clip-path: inset(14% 0 68% 0); }
  66% { opacity: 0; transform: translate(0, 0); clip-path: inset(100% 0 0 0); }
}

@keyframes posterBaseJitter {
  0%, 54%, 100% {
    transform: translate(0, 0);
    filter: saturate(1.05) contrast(1.04) drop-shadow(0 28px 46px rgba(0,0,0,.55));
  }
  56% {
    transform: translate(-2px, 1px);
    filter: saturate(1.25) contrast(1.14) drop-shadow(0 28px 46px rgba(0,0,0,.55)) drop-shadow(3px 0 0 rgba(0,229,255,.28));
  }
  58% {
    transform: translate(2px, -1px);
    filter: saturate(1.2) contrast(1.12) drop-shadow(0 28px 46px rgba(0,0,0,.55)) drop-shadow(-3px 0 0 rgba(255,39,95,.25));
  }
  62% {
    transform: translate(0, 0);
    filter: saturate(1.05) contrast(1.04) drop-shadow(0 28px 46px rgba(0,0,0,.55));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-glitch,
  .page-glitch::before,
  .page-glitch::after,
  .pixel-combat-frame::before,
  .pixel-combat-frame::after,
  .hero-poster-img {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HERO BANNER — full-width header poster (09323)
   The poster image fills the header. All four edges fade smoothly
   into the dark page background so there's no hard cut.
   ═══════════════════════════════════════════════════════════════ */
.hero {
  display: block !important;
  min-height: auto !important;
  /* 顶部留出 navbar 高度(64px),海报整体下移,顶部文字不被导航栏遮挡 */
  padding: 64px 0 0 0 !important;
  align-items: initial !important;
  justify-content: initial !important;
  background: var(--bg-dark);
  overflow: hidden;
  position: relative;
}

/* Hide every legacy hero element so only the new banner remains. */
.hero .hero-bg,
.hero .hero-content,
.hero .hero-showcase,
.hero .pixel-combat-frame,
.hero .hud-panel,
.hero .hero-poster-img,
.hero .poster-glow {
  display: none !important;
}

.hero-banner {
  position: relative;
  width: 100%;
  /* Banner height = 16:9 aspect of viewport width, but never taller than
     the visible viewport (minus navbar) and never shorter than 280px. */
  height: clamp(280px, 56.25vw, calc(100vh - 64px));
  background: var(--bg-dark);
  overflow: hidden;
  z-index: 1;
}

.hero-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  filter: saturate(1.06) contrast(1.04);
}

/* Soft dark vignette on every edge — same color as the page background
   so the poster melts seamlessly into the dark page. */
.hero-banner-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    /* top fade — light, since navbar no longer overlaps the image */
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 8%, transparent 20%),
    /* bottom fade — stronger, banner melts into next section */
    linear-gradient(to top,    var(--bg-dark) 0%, rgba(0,0,0,.88) 16%, rgba(0,0,0,.42) 30%, transparent 46%),
    /* left fade — deeper */
    linear-gradient(to right,  var(--bg-dark) 0%, rgba(0,0,0,.78) 7%, rgba(0,0,0,.3) 13%, transparent 20%),
    /* right fade — deeper */
    linear-gradient(to left,   var(--bg-dark) 0%, rgba(0,0,0,.78) 7%, rgba(0,0,0,.3) 13%, transparent 20%),
    /* overall corner vignette — slightly stronger */
    radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.55) 100%);
}

/* Call to action below the banner — slightly overlaps the bottom fade. */
.hero-cta {
  position: relative;
  z-index: 5;
  max-width: 1280px;
  margin: -5vh auto 0;
  padding: 0 2rem 4rem;
  text-align: center;
}

.hero-cta .hero-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.hero-cta .hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hero .scroll-hint { z-index: 6; }

/* Particles overlay the banner for some life. */
.hero .hero-particles {
  z-index: 3;
}

@media (max-width: 1100px) {
  .hero-banner {
    height: clamp(220px, 60vw, calc(100vh - 60px));
  }
  .hero-cta { margin-top: -3vh; }
}

@media (max-width: 768px) {
  .hero-banner-fade {
    background:
      linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 14%),
      linear-gradient(to top,    var(--bg-dark) 0%, rgba(0,0,0,.7) 22%, transparent 42%),
      linear-gradient(to right,  var(--bg-dark) 0%, rgba(0,0,0,.55) 8%, transparent 16%),
      linear-gradient(to left,   var(--bg-dark) 0%, rgba(0,0,0,.55) 8%, transparent 16%),
      radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.55) 100%);
  }
  .hero-cta { padding: 0 1rem 3rem; margin-top: -2vh; }
  .hero-cta .hero-stats { gap: .75rem; }
}