/* ═══════════════════════════════════════════════════════════════
   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; }

/* 公告详情弹窗:富文本内容渲染样式 —— 后端已 sanitize,只需美化排版 */
.news-modal-content { word-break: break-word; }
.news-modal-content p        { margin: .35rem 0; }
.news-modal-content h1, .news-modal-content h2 { font-size: 1.15rem; color: var(--primary); margin: 1rem 0 .4rem; font-weight: 700; }
.news-modal-content h3       { font-size: 1rem;   color: var(--text); margin: .85rem 0 .35rem; font-weight: 700; }
.news-modal-content h4       { font-size: .92rem; color: var(--text); margin: .7rem 0 .3rem;   font-weight: 700; }
.news-modal-content ul,
.news-modal-content ol       { padding-left: 1.4rem; margin: .4rem 0; }
.news-modal-content li       { margin: .15rem 0; }
.news-modal-content blockquote {
  border-left: 3px solid var(--primary);
  padding: .3rem .8rem; margin: .6rem 0;
  background: rgba(247,201,72,.06);
  color: var(--text);
}
.news-modal-content pre {
  background: rgba(0,0,0,.4); padding: .6rem .8rem; border-radius: 4px;
  overflow-x: auto; font-family: 'Consolas', monospace; font-size: .8rem;
}
.news-modal-content hr {
  border: none; border-top: 1px dashed var(--border); margin: 1rem 0;
}
.news-modal-content a { color: var(--accent); text-decoration: underline; }
.news-modal-content img {
  max-width: 100%; height: auto; display: block;
  margin: .8rem auto; border: 1px solid var(--border); border-radius: 4px;
}
.news-modal-content strong, .news-modal-content b { color: var(--text); font-weight: 700; }
.news-modal-content em, .news-modal-content i     { font-style: italic; }
.news-modal-content s, .news-modal-content del    { color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════
   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; }

/* ═══════════════ 邮箱白名单 4 大品牌提示 ═══════════════ */
.email-whitelist-hint {
  margin-top: .55rem;
  padding: .7rem .85rem;
  background: linear-gradient(160deg, rgba(20,28,45,.85), rgba(12,20,32,.85));
  border: 1px solid rgba(0,212,255,.22);
  border-left: 3px solid #ff6b1a;
  border-radius: 6px;
  font-family: 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
}
.email-whitelist-hint .ew-title {
  margin-bottom: .65rem;
  padding-bottom: .55rem;
  border-bottom: 1px dashed rgba(255,178,122,.22);
}
.email-whitelist-hint .ew-title-zh {
  font-size: .74rem;
  color: #ffb27a;
  line-height: 1.5;
  font-weight: 500;
  margin-bottom: .3rem;
}
.email-whitelist-hint .ew-title-en {
  font-size: .68rem;
  color: rgba(255,178,122,.75);
  line-height: 1.45;
  font-weight: 400;
  font-style: italic;
}
.email-whitelist-hint .ew-brands {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.email-whitelist-hint .ew-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .55rem .3rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 5px;
  transition: all .18s ease;
  cursor: help;
  position: relative;
}
.email-whitelist-hint .ew-brand:hover {
  background: rgba(0,212,255,.08);
  border-color: rgba(0,212,255,.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,212,255,.15);
}
.email-whitelist-hint .ew-brand svg {
  flex-shrink: 0;
}
.email-whitelist-hint .ew-brand span {
  font-size: .68rem;
  color: #d0d8e0;
  font-weight: 500;
}
.email-whitelist-hint .ew-brand.ew-matched {
  background: rgba(0,255,140,.1);
  border-color: rgba(0,255,140,.55);
  box-shadow: 0 0 12px rgba(0,255,140,.3);
}
.email-whitelist-hint .ew-brand.ew-matched span {
  color: #7dffb5;
}
.email-whitelist-hint .ew-status {
  margin-top: .5rem;
  font-size: .72rem;
  min-height: 1em;
  line-height: 1.4;
}
.email-whitelist-hint .ew-status.ew-ok    { color: #7dffb5; }
.email-whitelist-hint .ew-status.ew-warn  { color: #ff8a4a; }
.email-whitelist-hint .ew-status.ew-error { color: #ff5252; font-weight: 500; }

/* 窄屏 2x2 */
@media (max-width: 520px) {
  .email-whitelist-hint .ew-brands { grid-template-columns: repeat(2, 1fr); }
}
.btn-sm { padding: .5rem .85rem; font-size: .75rem; white-space: nowrap; flex-shrink: 0; }
.btn-sm:disabled { opacity: .5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   作弊者公示区 (2026-08-08)
   ═══════════════════════════════════════════════════════════════════════════ */
.cheater-section {
  padding: 3rem 2rem;
  background: linear-gradient(180deg, rgba(255,77,109,.03), transparent);
}
.cheater-container {
  max-width: 1100px;
  margin: 0 auto;
}
.cheater-warning {
  background: linear-gradient(135deg, rgba(255,77,109,.10), rgba(255,140,0,.06));
  border: 2px solid rgba(255,77,109,.5);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 20px rgba(255,77,109,.12) inset;
}
.cw-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Press Start 2P', monospace;
  color: #ff8fa3;
  font-size: .82rem;
  letter-spacing: 1px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255,77,109,.35);
}
.cw-title .cw-icon { font-size: 1.4rem; }
.cw-body-zh {
  color: #ffd5db;
  font-size: .88rem;
  line-height: 1.75;
  margin-bottom: 6px;
}
.cw-body-en {
  color: #ffb3c1;
  font-size: .75rem;
  line-height: 1.6;
  opacity: .85;
  font-style: italic;
}
.cw-body-zh strong { color: #ff5c7a; }
.cw-body-en strong { color: #ff8fa3; }

/* 列表 */
.cheater-list-wrap {
  background: var(--bg-card, #0d1420);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 4px;
  overflow: hidden;
}
.cheater-list-head {
  display: grid;
  grid-template-columns: 1.4fr 2fr 1.6fr 1fr;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(255,77,109,.15), rgba(255,77,109,.05));
  border-bottom: 2px solid rgba(255,77,109,.3);
  font-size: .75rem;
  font-weight: 700;
  color: #ff8fa3;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cheater-list-body { max-height: 480px; overflow-y: auto; }
.cheater-row {
  display: grid;
  grid-template-columns: 1.4fr 2fr 1.6fr 1fr;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: .85rem;
  transition: background .18s;
  align-items: center;
}
.cheater-row:hover { background: rgba(255,77,109,.06); }
.cheater-row:last-child { border-bottom: none; }
.cheater-row .cr-nickname {
  color: #ffd54f;
  font-weight: 700;
  font-family: monospace;
  word-break: break-all;
}
.cheater-row .cr-type {
  color: #ffb3b3;
  line-height: 1.4;
}
.cheater-row .cr-type-en {
  display: block;
  font-size: .72rem;
  color: #999;
  font-style: italic;
  margin-top: 2px;
  opacity: .75;
}
.cheater-row .cr-punish {
  color: #ff5c7a;
  font-weight: 600;
  line-height: 1.4;
}
.cheater-row .cr-punish-en {
  display: block;
  font-size: .72rem;
  color: #999;
  font-style: italic;
  margin-top: 2px;
  opacity: .75;
}
.cheater-row .cr-date {
  color: #7a99b0;
  font-size: .75rem;
  font-family: monospace;
}
.cheater-empty {
  padding: 40px 20px;
  text-align: center;
  color: #7a99b0;
  font-size: .85rem;
}
/* 手机端: 卡片纵向布局 */
@media (max-width: 720px) {
  .cheater-section { padding: 2rem 1rem; }
  .cheater-list-head { display: none; }
  .cheater-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 16px;
  }
  .cheater-row .cr-nickname::before   { content: '昵称 / Nickname: '; color: #7a99b0; font-family: inherit; font-weight: 400; font-size: .72rem; margin-right: 4px; }
  .cheater-row .cr-type::before       { content: '作弊类型 / Cheat: '; color: #7a99b0; font-family: inherit; font-weight: 400; font-size: .72rem; margin-right: 4px; }
  .cheater-row .cr-punish::before     { content: '惩罚 / Punishment: '; color: #7a99b0; font-weight: 400; font-size: .72rem; margin-right: 4px; }
  .cheater-row .cr-date::before       { content: '📅 '; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   审核制注册 —— 关闭提示 + 申请表单 (2026-08-07)
   ═══════════════════════════════════════════════════════════════════════════ */
/* 弹窗更宽, 双栏布局, 减少上下滚动 */
.modal.apply-modal {
  max-width: 960px;
  width: 96%;
}
.apply-modal-body {
  max-height: 82vh;
  overflow-y: auto;
}
/* 双栏 grid: 大屏并排, 窄屏自动堆叠 */
.apply-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 6px;
}
.apply-col { min-width: 0; }
.apply-col .form-group { margin-bottom: 12px; }
.apply-col .form-group:last-child { margin-bottom: 0; }
/* 理由 textarea 拉高一点, 平衡右栏视觉 */
.apply-reason { min-height: 130px !important; }

@media (max-width: 820px) {
  .modal.apply-modal { max-width: 96%; }
  .apply-grid { grid-template-columns: 1fr; gap: 12px; }
  .apply-reason { min-height: 90px !important; }
}

.reg-closed-notice {
  background: linear-gradient(135deg, rgba(255,77,109,.12), rgba(255,140,0,.08));
  border: 2px solid rgba(255,77,109,.55);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 0 0 18px;
  box-shadow: 0 0 12px rgba(255,77,109,.15) inset;
}
.reg-closed-notice .rcn-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255,77,109,.4);
}
.reg-closed-notice .rcn-icon {
  font-size: 1.4rem;
}
.reg-closed-notice .rcn-zh {
  color: #ff8fa3;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .5px;
}
.reg-closed-notice .rcn-en {
  color: #ffb3c1;
  font-size: .72rem;
  opacity: .85;
  font-style: italic;
}
.reg-closed-notice .rcn-body-zh {
  color: #ffd5db;
  font-size: .78rem;
  line-height: 1.6;
  margin-bottom: 8px;
}
.reg-closed-notice .rcn-body-en {
  color: #ffb3c1;
  font-size: .68rem;
  line-height: 1.55;
  opacity: .8;
  font-style: italic;
}
.reg-closed-notice strong {
  color: #ff5c7a;
  font-weight: 700;
}

/* 身份证图片上传提示 */
.apply-idcard-hint {
  background: rgba(0, 212, 255, .06);
  border-left: 3px solid #00d4ff;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 0 4px 4px 0;
}
.apply-idcard-hint .aih-zh {
  color: #b8e6ff;
  font-size: .74rem;
  line-height: 1.55;
  margin-bottom: 4px;
}
.apply-idcard-hint .aih-en {
  color: #8ac8e6;
  font-size: .65rem;
  line-height: 1.5;
  opacity: .85;
  font-style: italic;
}
.apply-idcard-hint strong {
  color: #ffd54f;
}

/* 身份证图片上传后的预览 */
.apply-image-preview {
  margin-top: 8px;
  padding: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.apply-image-preview img {
  max-width: 120px;
  max-height: 90px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.15);
  object-fit: cover;
}
.apply-image-preview .aip-meta {
  font-size: .72rem;
  color: #b3d9ff;
  line-height: 1.5;
}

/* 提交后提示 */
.apply-note {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(78, 199, 106, .08);
  border-left: 3px solid #4ec76a;
  border-radius: 0 4px 4px 0;
}
.apply-note .apply-note-zh {
  color: #b3e6bd;
  font-size: .75rem;
  line-height: 1.55;
  margin-bottom: 4px;
}
.apply-note .apply-note-en {
  color: #92c99a;
  font-size: .66rem;
  line-height: 1.5;
  font-style: italic;
  opacity: .85;
}
.apply-note strong {
  color: #ffd54f;
}

/* 移动端优化 */
@media (max-width: 520px) {
  .reg-closed-notice { padding: 10px 12px; }
  .reg-closed-notice .rcn-zh { font-size: .82rem; }
  .apply-idcard-hint { padding: 6px 10px; }
  .apply-image-preview img { max-width: 90px; max-height: 68px; }
}
/* textarea 样式与 pixel-input 一致 */
textarea.pixel-input {
  min-height: 80px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   申请提交成功弹窗
   ═══════════════════════════════════════════════════════════════════════════ */
.modal.apply-success-modal {
  max-width: 480px;
  width: 92%;
  border-color: rgba(78, 199, 106, .5);
  box-shadow: 0 0 40px rgba(78, 199, 106, .18);
}
.apply-success-body {
  text-align: center;
  padding: 32px 28px 24px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px !important;
}
.apply-success-icon {
  margin-bottom: 4px;
  animation: applySuccessPop .5s cubic-bezier(.5, 1.6, .5, 1);
}
@keyframes applySuccessPop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.apply-success-title-zh {
  font-family: 'Press Start 2P', monospace;
  color: #4ec76a !important;
  font-size: .95rem !important;
  letter-spacing: 2px;
  margin: 0;
}
.apply-success-title-en {
  color: #92d9a0;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .5px;
  margin: 0 0 8px;
  opacity: .85;
}
.apply-success-msg-zh {
  color: #d5f5df;
  font-size: .88rem;
  line-height: 1.75;
  padding: 10px 14px;
  background: rgba(78, 199, 106, .08);
  border-left: 3px solid #4ec76a;
  border-radius: 0 4px 4px 0;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.apply-success-msg-en {
  color: #a8c9b3;
  font-size: .74rem;
  line-height: 1.6;
  padding: 8px 14px;
  background: rgba(255, 255, 255, .02);
  border-left: 3px solid rgba(78, 199, 106, .35);
  border-radius: 0 4px 4px 0;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  font-style: italic;
  opacity: .9;
}
.apply-success-msg-zh strong,
.apply-success-msg-en strong {
  color: #ffd54f;
}
.apply-success-ok {
  margin-top: 12px;
  background: #4ec76a !important;
  border-color: #4ec76a !important;
  color: #0d0d1a !important;
  font-weight: 700;
  letter-spacing: 2px;
}
.apply-success-ok:hover {
  background: #5ee07a !important;
  box-shadow: 0 0 12px rgba(78, 199, 106, .5) !important;
}

/* ─── 首页公告弹窗 (Notice Modal) ──────────────────────────────── */
.notice-modal { max-width: 680px; width: 100%; }
.notice-body { padding: 1.25rem 1.5rem; gap: .9rem; max-height: 80vh; overflow-y: auto; }

/* ═══════════════════════════════════════════════════════════════════
   顶置红色安全警告 (反盗版盗服声明) - 2026-08-08
   ═══════════════════════════════════════════════════════════════════ */
.notice-red-alert {
  background: linear-gradient(135deg, rgba(255,77,109,.14), rgba(255,60,60,.08));
  border: 2px solid #ff4d6d;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 4px;
  box-shadow: 0 0 22px rgba(255,77,109,.22) inset, 0 4px 12px rgba(255,77,109,.15);
  animation: nraGlow 2.6s ease-in-out infinite;
}
@keyframes nraGlow {
  0%,100% { box-shadow: 0 0 22px rgba(255,77,109,.22) inset, 0 4px 12px rgba(255,77,109,.15); }
  50%     { box-shadow: 0 0 32px rgba(255,77,109,.38) inset, 0 4px 18px rgba(255,77,109,.32); }
}
.notice-red-alert .nra-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgba(255,77,109,.4);
}
.notice-red-alert .nra-icon {
  font-size: 1.7rem;
  color: #ff5c7a;
  filter: drop-shadow(0 0 4px rgba(255,77,109,.65));
  animation: nraShake 1.4s ease-in-out infinite;
}
@keyframes nraShake {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}
.notice-red-alert .nra-title-en {
  font-family: 'Press Start 2P', monospace;
  color: #ff5c7a;
  font-size: .78rem;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255,77,109,.55);
}
/* 英文正文: 主要文字, 亮红色, 不再斜体, 完全不透明 */
.notice-red-alert .nra-body-en {
  color: #ffb3c1;
}
.notice-red-alert .nra-body-en p {
  margin: 0 0 10px;
  line-height: 1.7;
  font-size: .88rem;
  color: #ffd5db;
}
.notice-red-alert .nra-body-en p:last-child {
  margin-bottom: 0;
}
.notice-red-alert b { color: #ff5c7a; font-weight: 700; }
.notice-red-alert .nra-legal {
  background: rgba(0,0,0,.28);
  border-left: 3px solid #ffd54f;
  padding: 10px 12px !important;
  border-radius: 0 4px 4px 0;
  margin-top: 10px !important;
}
.notice-red-alert .nra-loc { color: #ffd54f !important; }
.notice-red-alert .nra-isp { color: #ffa500 !important; text-decoration: underline; }
.notice-red-alert .nra-conf { color: #4ec76a !important; }
.notice-red-alert .nra-divider {
  text-align: center;
  color: rgba(255,143,163,.55);
  font-size: .68rem;
  letter-spacing: 2px;
  margin: 14px 0 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,77,109,.25);
  font-family: 'Press Start 2P', monospace;
}
@media (max-width: 620px) {
  .notice-red-alert { padding: 10px 12px; }
  .notice-red-alert .nra-title-en { font-size: .68rem; }
  .notice-red-alert .nra-body-en p { font-size: .8rem; }
}
.notice-section {
  background: rgba(0, 229, 255, .04);
  border-left: 3px solid var(--primary);
  padding: .85rem 1rem;
  border-radius: 0 4px 4px 0;
}
.notice-section.notice-warn {
  background: rgba(255, 92, 92, .06);
  border-left-color: #ff5c5c;
}
/* 警示公告:正文、高亮、加粗、列表标号 全部改成红色系,提升可读性同时保持醒目 */
.notice-section.notice-warn .notice-text            { color: #ffb3b3; }
.notice-section.notice-warn .notice-highlight       {
  color: #ffe066;
  background: rgba(255, 92, 92, .18);
}
.notice-section.notice-warn .notice-patch-list      { color: #ffb3b3; }
.notice-section.notice-warn .notice-patch-list strong    { color: #ff8a8a; }
.notice-section.notice-warn .notice-patch-list li::marker { color: #ff8a8a; }

/* 补充说明:列表项下方的解释性缩进块(⚠ / 📌 之类) */
.notice-subnote {
  margin: .35rem 0 .1rem;
  padding: .45rem .7rem;
  font-size: .78rem;
  line-height: 1.75;
  color: #ffd6a5;
  background: rgba(255, 138, 61, .08);
  border-left: 2px solid rgba(255, 138, 61, .5);
  border-radius: 0 3px 3px 0;
}
.notice-subnote b { color: #ffd166; font-weight: 700; }
.notice-section-title {
  font-family: 'Press Start 2P', monospace;
  font-size: .68rem;
  color: var(--primary);
  margin-bottom: .55rem;
  letter-spacing: .5px;
}
.notice-section.notice-warn .notice-section-title { color: #ff8a8a; }
.notice-text {
  font-size: .85rem;
  line-height: 1.85;
  color: var(--text);
  margin: 0;
}
.notice-highlight {
  color: var(--primary);
  font-weight: 700;
  background: rgba(0, 229, 255, .1);
  padding: 0 .3rem;
  border-radius: 2px;
}
.notice-sub { color: var(--text-dim); font-size: .78rem; }

/* 编号列表 (更新亮点用) */
.notice-list {
  margin: .4rem 0 0;
  padding-left: 1.4rem;
  color: #ffcfcf;
  font-size: .88rem;
  line-height: 1.85;
}
.notice-list li {
  margin-bottom: .35rem;
  padding-left: .25rem;
}
.notice-list li::marker {
  color: #ffd94d;
  font-weight: 700;
}
.notice-list b {
  color: #ffd94d;
  font-weight: 700;
}
.notice-section.notice-warn .notice-list { color: #ffcfcf; }
.notice-section.notice-warn .notice-list b { color: #ffd94d; }
.notice-divider {
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: .6rem;
  color: var(--text-dim);
  letter-spacing: 1px;
  padding: .4rem 0 .2rem;
  opacity: .7;
}
.notice-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg-card2);
  flex-wrap: wrap;
}
.notice-dont-show {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.notice-dont-show input[type="checkbox"] { accent-color: var(--primary); cursor: pointer; }

/* ══════════════ 私人服务器官方声明 (红色警告风) ══════════════ */
/* 用于顶部第一段"关于私人服务器的官方声明"块。整体红金主色,与下方绿色维护完成块形成对比。 */
.notice-section.notice-piracy {
  background: linear-gradient(135deg, rgba(255, 45, 85, .08), rgba(122, 0, 24, .18));
  border: 2px solid #ff2d55;
  border-radius: 6px;
  padding: 1rem 1.15rem;
  margin: .3rem 0 .1rem;
  box-shadow: 0 0 0 rgba(255,45,85,0);
  animation: notice-piracy-breath 3.2s ease-in-out infinite;
}
.notice-piracy-title {
  color: #ff8fa3 !important;
  font-weight: 800;
  letter-spacing: .5px;
  text-shadow: 0 0 8px rgba(255,45,85,.55);
  border-bottom: 1px dashed rgba(255,143,163,.4);
  padding-bottom: .5rem;
  margin-bottom: .6rem;
}
.notice-piracy-lead {
  color: #ffd6df;
  margin-top: .35rem !important;
  font-size: .92rem;
}
.notice-piracy-hl {
  color: #ffd54f;
  font-weight: 700;
  padding: 0 .12em;
  text-shadow: 0 0 6px rgba(255,213,79,.35);
}
.notice-piracy-list {
  margin: .35rem 0 .1rem 1.2rem;
  padding: 0;
  color: var(--text-dim);
  font-size: .88rem;
  line-height: 1.85;
}
.notice-piracy-list li { margin: .12rem 0; }
.notice-piracy-list.notice-piracy-limits { list-style: none; margin-left: .2rem; }
.notice-piracy-list.notice-piracy-limits li.bad {
  color: #ffb0bd;
}
.notice-piracy-list.notice-piracy-limits li.bad b { color: #fff; }
.notice-piracy-list.notice-piracy-limits li.meh {
  color: var(--text-dim);
  opacity: .92;
}
@keyframes notice-piracy-breath {
  0%,100% { box-shadow: 0 0 0 rgba(255,45,85,0); }
  50%     { box-shadow: 0 0 26px 4px rgba(255,45,85,.18); }
}

/* 私人服务器声明·"更值得警惕的是"高亮框 —— 强调段落 */
.notice-piracy-callout {
  margin: .8rem 0 .2rem;
  padding: .75rem .95rem;
  background: linear-gradient(135deg, rgba(255, 138, 61, .12), rgba(255, 45, 85, .16));
  border-left: 4px solid #ffd54f;
  border-radius: 4px;
  color: #ffe6a8;
  font-size: .9rem;
  line-height: 1.8;
}
.notice-piracy-callout b { color: #fff; }

/* ══════════════ 紧急通告 · 停机延期块 (顶部高优先级警报) ══════════════ */
/* 视觉:红金渐变边框 + 呼吸红光 + 顶部 URGENT 徽章 (脉冲) */
.notice-section.notice-urgent {
  position: relative;
  background: linear-gradient(135deg, rgba(255,45,85,.14), rgba(122,0,24,.22));
  border: 2px solid #ff2d55;
  border-radius: 6px;
  padding: 1.25rem 1.15rem 1.05rem;
  margin: .3rem 0 .1rem;
  box-shadow: 0 0 0 rgba(255,45,85,0);
  animation: notice-urgent-breath 2.4s ease-in-out infinite;
}
@keyframes notice-urgent-breath {
  0%,100% { box-shadow: 0 0 0 rgba(255,45,85,0), inset 0 0 0 0 rgba(255,213,79,.15); }
  50%     { box-shadow: 0 0 32px 4px rgba(255,45,85,.28), inset 0 0 24px 0 rgba(255,213,79,.08); }
}
.notice-urgent-badge {
  display: inline-block;
  position: absolute;
  top: -12px; left: 14px;
  padding: .28em .85em;
  background: linear-gradient(135deg, #ff2d55, #7a0018);
  color: #fff;
  font-family: 'Press Start 2P', monospace, sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  border: 2px solid #ffd54f;
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(255,45,85,.85);
  animation: notice-urgent-badge-pulse 1.2s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(0,0,0,.55);
}
@keyframes notice-urgent-badge-pulse {
  0%,100% { transform: scale(1);   box-shadow: 0 0 12px rgba(255,45,85,.85); }
  50%     { transform: scale(1.06); box-shadow: 0 0 22px rgba(255,213,79,.85), 0 0 8px rgba(255,45,85,1) inset; }
}
.notice-urgent-title {
  color: #ff8fa3 !important;
  font-weight: 800;
  letter-spacing: .5px;
  text-shadow: 0 0 8px rgba(255,45,85,.55);
  border-bottom: 1px dashed rgba(255,143,163,.4);
  padding-bottom: .5rem;
  margin: .35rem 0 .6rem;
}
.notice-urgent-hl {
  color: #ffd54f;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255,213,79,.35);
}

/* 新日期/时长 双列 callout */
.notice-urgent-callout {
  margin: .75rem 0;
  padding: .75rem 1rem;
  background: linear-gradient(135deg, rgba(255,213,79,.1), rgba(255,45,85,.14));
  border: 2px solid #ffd54f;
  border-left-width: 5px;
  border-radius: 4px;
  color: #fff5b8;
  font-size: .92rem;
  line-height: 1.75;
}
.notice-urgent-callout .nuc-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.notice-urgent-callout .nuc-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.notice-urgent-callout .nuc-label {
  color: #ffe6a8;
  font-weight: 700;
  flex-shrink: 0;
  min-width: 7.5em;
}
.notice-urgent-callout .nuc-value {
  color: #fff;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(255,213,79,.45);
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.notice-urgent-callout .nuc-row + .nuc-row {
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px dashed rgba(255,213,79,.25);
}

/* 补偿说明 */
.notice-urgent-compensate {
  margin: .75rem 0 .3rem;
  padding: .7rem .95rem;
  background: linear-gradient(135deg, rgba(90,242,135,.1), rgba(163,213,255,.08));
  border-left: 4px solid #5af287;
  border-radius: 4px;
  color: #d8ffe6;
  font-size: .9rem;
  line-height: 1.75;
}
.notice-urgent-compensate b { color: #fff; }

@media (max-width: 640px) {
  .notice-urgent-callout .nuc-label { min-width: 0; width: 100%; }
  .notice-urgent-callout .nuc-value { width: 100%; }
}

/* ══════════════ 8.24 停机更新预告 · 参数增/降/标签 内联高亮 ══════════════ */
.notice-hl-old {
  display: inline-block;
  color: #ff8fa3;
  font-weight: 800;
  text-decoration: line-through;
  text-decoration-color: rgba(255,45,85,.7);
  text-decoration-thickness: 2px;
  margin: 0 .12em;
}
.notice-hl-new {
  display: inline-block;
  color: #5af287;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(90,242,135,.45);
  margin: 0 .12em;
}
.notice-hl-up {
  display: inline-block;
  color: #ffd54f;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(255,213,79,.45);
  margin: 0 .12em;
}
.notice-hl-dim {
  display: inline-block;
  color: #a3d5ff;
  font-weight: 800;
  margin: 0 .12em;
}
.notice-hl-tag {
  display: inline-block;
  padding: 0 .55em;
  margin: 0 .1em;
  background: rgba(0,0,0,.35);
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: .82em;
  font-weight: 700;
  letter-spacing: .5px;
}

/* ══════════════ M7 四色预览 · 竖排原尺寸 (公告内嵌) ══════════════ */
/* 每张图保持原始 262×106 像素不放大,居中显示,标签放图下面。 */
.m7-preview-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  margin: 1rem 0 .3rem;
}
.m7-preview-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.6));
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 5px;
  overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  cursor: default;
}
.m7-preview-card img {
  display: block;
  width: 262px;
  height: 106px;
  max-width: 100%;
  height: auto;
  max-height: 106px;
  object-fit: contain;
  image-rendering: auto;
  background: transparent;
}
.m7-preview-label {
  font-size: .68rem;
  font-family: 'Press Start 2P', monospace, sans-serif;
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.6;
  padding: .4rem .8rem;
  border-top: 1px dashed rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  width: 100%;
  min-width: 262px;
  box-sizing: border-box;
}
.m7-preview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.6);
}
/* 每种配色对应边框/字色/发光 */
.m7-preview-card.m7-attack {
  border-color: #ff2d55;
  box-shadow: 0 0 0 rgba(255,45,85,0);
}
.m7-preview-card.m7-attack:hover  { box-shadow: 0 0 26px rgba(255,45,85,.55); }
.m7-preview-card.m7-attack .m7-preview-label { color: #ff8fa3; }

.m7-preview-card.m7-rate {
  border-color: #ffd94d;
}
.m7-preview-card.m7-rate:hover    { box-shadow: 0 0 26px rgba(255,217,77,.55); }
.m7-preview-card.m7-rate .m7-preview-label { color: #ffd94d; }

.m7-preview-card.m7-move {
  border-color: #7ec8ff;
}
.m7-preview-card.m7-move:hover    { box-shadow: 0 0 26px rgba(126,200,255,.55); }
.m7-preview-card.m7-move .m7-preview-label { color: #a3d5ff; }

.m7-preview-card.m7-heal {
  border-color: #5af287;
}
.m7-preview-card.m7-heal:hover    { box-shadow: 0 0 26px rgba(90,242,135,.55); }
.m7-preview-card.m7-heal .m7-preview-label { color: #5af287; }

/* ── 更新完成公告:大号"跳转公告区"按钮 —— 会呼吸+箭头会跳动 ── */
.notice-scroll-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: 1rem 0 .2rem;
  padding: .95rem 1.15rem;
  background: linear-gradient(135deg, rgba(255,217,77,.15), rgba(0,229,255,.1));
  border: 2px solid #ffd94d;
  border-radius: 6px;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  box-shadow: 0 0 0 rgba(255,217,77,0);
  animation: notice-cta-breath 2.4s ease-in-out infinite;
}
.notice-scroll-cta:hover {
  transform: translateY(-2px);
  border-color: #ffe98a;
  box-shadow: 0 6px 18px rgba(255,217,77,.35);
}
.notice-scroll-cta:active { transform: translateY(0); }
.notice-scroll-cta-text  { display: flex; flex-direction: column; gap: .18rem; }
.notice-scroll-cta-title {
  font-size: .95rem; font-weight: 700; color: #fff5b8;
  letter-spacing: .5px;
}
.notice-scroll-cta-sub   {
  font-size: .74rem; color: #ffe28a; opacity: .85;
}
.notice-scroll-cta-arrow {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,217,77,.22);
  border: 2px solid #ffd94d;
  border-radius: 50%;
  color: #fff5b8;
  font-size: 1.1rem;
  animation: notice-arrow-bounce 1.2s ease-in-out infinite;
}
.notice-scroll-cta-arrow .arrow-down { display: inline-block; }

@keyframes notice-cta-breath {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,217,77,.35); }
  50%     { box-shadow: 0 0 22px 4px rgba(255,217,77,.22); }
}
@keyframes notice-arrow-bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(6px); }
}

/* 停机公告里的"新武器预览图"卡片 —— 居中,金色边框,悬停微微放大 */
.notice-weapon-preview {
  margin: .6rem 0 .3rem;
  padding: .75rem;
  background: linear-gradient(180deg, rgba(255,217,77,.08), rgba(0,0,0,.35));
  border: 1px solid rgba(255,217,77,.35);
  border-radius: 6px;
  text-align: center;
  box-shadow: inset 0 0 24px rgba(255,217,77,.06);
}
.notice-weapon-preview img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transition: transform .25s ease;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.6));
}
.notice-weapon-preview img:hover { transform: scale(1.06); }
.notice-weapon-caption {
  margin-top: .35rem;
  font-size: .72rem;
  color: #ffd166;
  letter-spacing: 1px;
  font-weight: 700;
}

/* 停机公告红字强调(比 notice-highlight 更醒目,用于"过高/警告"这种) */
.notice-red { color: #ff6b6b; font-weight: 700; }

/* 从"更新完成"弹窗跳到 #news 时给整个区块一个短暂的黄色高亮,让用户一眼看到 */
.news-section.news-flash-highlight {
  animation: news-flash 2.2s ease-out;
}
@keyframes news-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255,217,77,0);   background-color: transparent; }
  15%  { box-shadow: 0 0 40px 8px rgba(255,217,77,.45); background-color: rgba(255,217,77,.06); }
  100% { box-shadow: 0 0 0 0 rgba(255,217,77,0);   background-color: transparent; }
}
@media (max-width: 560px) {
  .notice-scroll-cta-title { font-size: .85rem; }
  .notice-scroll-cta-sub   { font-size: .68rem; }
  .notice-scroll-cta-arrow { width: 36px; height: 36px; font-size: 1rem; }
}

/* 升级公告里的编号列表 (10 条 patch notes) */
.notice-patch-list {
  margin: .7rem 0 0;
  padding-left: 1.4rem;
  list-style-position: outside;
  color: var(--text);
  font-size: .82rem;
  line-height: 1.85;
}
.notice-patch-list li {
  padding: .15rem 0;
}
.notice-patch-list li::marker {
  color: var(--primary);
  font-weight: 700;
  font-family: 'Press Start 2P', monospace;
  font-size: .72rem;
}
.notice-patch-list strong { color: var(--accent2, #3dd5ff); }

.notice-modal { max-width: 680px; }

@media (max-width: 540px) {
  .notice-text { font-size: .8rem; line-height: 1.75; }
  .notice-section-title { font-size: .6rem; }
  .notice-patch-list { font-size: .76rem; padding-left: 1.2rem; }
}

/* ─── 投票区块 ─────────────────────────────────────────────────────── */
.notice-vote-section {
  background: rgba(0, 229, 255, .08);
  border-color: rgba(0, 229, 255, .35);
}
.vote-tally { margin: .8rem 0 1rem; }
.vote-tally-bar {
  position: relative; height: 14px;
  background: rgba(255, 77, 109, .25);
  border: 1px solid var(--border);
  overflow: hidden;
}
.vote-tally-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #00e5ff 0%, #3dd5ff 100%);
  transition: width .4s ease;
}
.vote-tally-numbers {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: .55rem; font-family: 'Press Start 2P', monospace;
  font-size: .85rem;
}
.vote-count { padding: .2rem .55rem; }
.vote-count.vote-yes { color: #00e5ff; }
.vote-count.vote-no  { color: #ff4d6d; }
.vote-vs { font-size: .65rem; color: var(--text-dim); opacity: .7; }

.vote-buttons {
  display: flex; gap: .75rem; margin-top: .5rem;
}
.vote-btn {
  flex: 1; padding: .8rem .5rem; font-size: .78rem;
  cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.vote-btn-yes {
  background: rgba(0, 229, 255, .12);
  border-color: #00e5ff; color: #00e5ff;
}
.vote-btn-yes:hover:not(:disabled) {
  background: rgba(0, 229, 255, .25);
  box-shadow: 0 0 14px rgba(0, 229, 255, .5);
  transform: translateY(-2px);
}
.vote-btn-no {
  background: rgba(255, 77, 109, .12);
  border-color: #ff4d6d; color: #ff4d6d;
}
.vote-btn-no:hover:not(:disabled) {
  background: rgba(255, 77, 109, .25);
  box-shadow: 0 0 14px rgba(255, 77, 109, .5);
  transform: translateY(-2px);
}
.vote-btn:disabled,
.vote-btn.voted-other {
  opacity: .35; cursor: not-allowed; transform: none; box-shadow: none;
}
.vote-btn.voted-mine {
  opacity: 1; cursor: default;
  box-shadow: 0 0 18px currentColor;
  transform: none;
}
.vote-hint {
  font-size: .72rem; color: var(--text-dim); text-align: center;
  margin-top: .6rem; line-height: 1.55;
}
.vote-hint.error { color: #ff4d6d; }
.vote-hint.success { color: #00e5ff; }

@media (max-width: 540px) {
  .vote-buttons { flex-direction: column; gap: .5rem; }
  .vote-tally-numbers { font-size: .7rem; }
}

/* ─── 事故说明专用红色样式 (.notice-incident) ─────────────────────── */
.notice-incident {
  border: 2px solid #ff5c5c !important;
  box-shadow: 0 0 30px rgba(255, 92, 92, .45), 0 0 0 1px rgba(255, 92, 92, .25) inset;
}
.notice-incident .modal-header {
  background: linear-gradient(180deg, rgba(255, 92, 92, .18), rgba(255, 92, 92, .05));
  border-bottom: 1px solid rgba(255, 92, 92, .35);
}
.notice-incident .modal-header h3 {
  color: #ff8a8a;
  text-shadow: 0 0 12px rgba(255, 92, 92, .55);
}
.notice-incident .notice-highlight {
  color: #ffd166;
  background: rgba(255, 92, 92, .15);
}
.notice-incident .notice-footer {
  border-top-color: rgba(255, 92, 92, .35);
}
.notice-incident .notice-dont-show input[type="checkbox"] { accent-color: #ff5c5c; }
.notice-btn-danger {
  background: linear-gradient(180deg, #ff6b66, #c83a36) !important;
  border-color: #ff5c5c !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.notice-btn-danger:hover {
  background: linear-gradient(180deg, #ff8a82, #d8504c) !important;
  box-shadow: 0 0 14px rgba(255, 92, 92, .55);
}

/* ─── 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); }
.profile-recharge-btn {
  margin-left: .8rem;
  padding: .4rem .9rem;
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem;
  background: var(--primary);
  color: #0d0a00;
  border: none;
  cursor: pointer;
  letter-spacing: .5px;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  transition: transform .15s, filter .15s;
}
.profile-recharge-btn:hover  { transform: translateY(-1px); filter: brightness(1.15); }
.profile-recharge-btn:active { transform: translateY(1px); }

/* ─── 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;
  margin: 15px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-darker);
  object-fit: contain;
  image-rendering: pixelated;
  overflow: hidden;
}
.shop-card-img > img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}
.shop-card-img > .shop-img-placeholder {
  font-size: 2.5rem;
  color: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.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; }
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOMER SERVICE CHAT WINDOW
   ═══════════════════════════════════════════════════════════════ */

/* Floating chat button */
.chat-toggle-btn {
  position: fixed;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  z-index: 10000;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #061018;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.4), var(--glow-gold);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-toggle-btn:hover {
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 22px rgba(0,0,0,.45), var(--glow-gold);
}

.chat-toggle-btn:active {
  transform: translateY(-50%) translateY(1px);
}

/* ── 反作弊公示按钮 (客服按钮正下方, 红色警告主题) ── */
.anti-cheat-btn {
  position: fixed;
  top: calc(50% + 68px);          /* 客服按钮 56px + 12px 间距 */
  right: 1.5rem;
  transform: translateY(-50%);
  z-index: 10000;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4d6d, #ff8fa3);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.4), 0 0 18px rgba(255,77,109,.45);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: antiCheatPulse 2.4s ease-in-out infinite;
}
.anti-cheat-btn:hover {
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 24px rgba(255,77,109,.65);
}
.anti-cheat-btn:active {
  transform: translateY(-50%) translateY(1px);
}
/* 呼吸动画: 提示玩家该按钮存在 */
@keyframes antiCheatPulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(0,0,0,.4), 0 0 18px rgba(255,77,109,.45); }
  50%      { box-shadow: 0 4px 18px rgba(0,0,0,.4), 0 0 30px rgba(255,77,109,.85); }
}

/* 窄屏: 与客服按钮保持一致尺寸, 只调右边距 */
@media (max-width: 720px) {
  .anti-cheat-btn { right: 1rem; }
}

/* Chat window */
.chat-window {
  position: fixed;
  top: 50%;
  right: 5.5rem;
  transform: translateY(-50%);
  z-index: 10000;
  width: 380px;
  max-width: calc(100vw - 8rem);
  height: 520px;
  max-height: calc(100vh - 4rem);
  background: linear-gradient(180deg, rgba(16,26,39,.98), rgba(9,14,23,.98));
  border: 2px solid rgba(0,229,255,.3);
  box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity .25s, transform .25s;
}

.chat-window.hidden {
  opacity: 0;
  transform: translateY(-50%) translateY(20px) scale(.98);
  pointer-events: none;
}

/* ─── 联系客服 · 邮箱信息面板 (中英双语) ───────────────────────────── */
.support-panel {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
  font-size: .82rem;
  line-height: 1.75;
  color: var(--text);
  scrollbar-width: thin;
  scrollbar-color: rgba(0,212,255,.3) transparent;
}
.support-panel::-webkit-scrollbar { width: 6px; }
.support-panel::-webkit-scrollbar-thumb { background: rgba(0,212,255,.3); border-radius: 3px; }

.support-panel-block {
  padding: .9rem 1rem 1rem;
  background: linear-gradient(160deg, rgba(20,30,45,.85), rgba(12,18,28,.85));
  border: 1px solid rgba(0,212,255,.18);
  border-radius: 6px;
  position: relative;
}
.support-panel-block.zh { border-left: 3px solid #ff6b1a; }
.support-panel-block.en { border-left: 3px solid #22d3ee; }

.support-panel-title {
  font-family: 'Press Start 2P', monospace;
  font-size: .65rem;
  color: var(--primary);
  letter-spacing: 1.5px;
  margin: 0 0 .55rem;
  text-shadow: 0 0 6px rgba(255,107,26,.4);
}
.support-panel-block.en .support-panel-title {
  color: #22d3ee;
  text-shadow: 0 0 6px rgba(34,211,238,.4);
}

.support-panel p {
  margin: 0 0 .45rem;
  color: var(--text);
  word-break: break-word;
}
.support-panel .support-hl {
  color: #ffd166;
  background: rgba(255, 209, 102, .12);
  padding: 0 .25rem;
  border-radius: 2px;
  font-weight: 700;
}
.support-panel .support-email {
  display: inline-block;
  margin: 0 .1rem;
  padding: .1rem .45rem;
  color: #22d3ee;
  background: rgba(34, 211, 238, .1);
  border-bottom: 1px dashed rgba(34, 211, 238, .55);
  border-radius: 2px;
  text-decoration: none;
  font-family: monospace;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .3px;
  transition: all .15s;
}
.support-panel .support-email:hover {
  background: rgba(34, 211, 238, .22);
  color: #67e8f9;
}

.support-tip {
  margin-top: .55rem;
  padding: .5rem .7rem;
  background: rgba(255, 107, 26, .08);
  border-left: 2px solid var(--primary);
  border-radius: 3px;
  font-size: .78rem;
  line-height: 1.75;
  color: var(--text-dim);
}
.support-panel-block.en .support-tip {
  background: rgba(34, 211, 238, .08);
  border-left-color: #22d3ee;
}
.support-tip b { color: var(--text); }

.support-panel-actions {
  display: flex;
  gap: .6rem;
  padding-top: .3rem;
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(9,14,23,.9) 30%, rgba(9,14,23,.98) 60%);
  padding-bottom: .2rem;
  margin: 0 -.2rem;
  padding-left: .2rem;
  padding-right: .2rem;
}
.support-panel-actions button {
  flex: 1 1 50%;
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  padding: .65rem .5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: .5px;
  transition: filter .15s, transform .1s;
}
.support-panel-actions .support-mail-btn {
  background: linear-gradient(135deg, #ff6b1a, #ffb347);
  color: #061018;
  box-shadow: 0 2px 10px rgba(255, 107, 26, .35);
}
.support-panel-actions .support-copy-btn {
  background: linear-gradient(135deg, #22d3ee, #0891b2);
  color: #061018;
  box-shadow: 0 2px 10px rgba(34, 211, 238, .35);
}
.support-panel-actions button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.support-panel-actions button:active { transform: translateY(0); }
.support-panel-actions button.copied {
  background: linear-gradient(135deg, #34d399, #059669);
  box-shadow: 0 2px 10px rgba(52, 211, 153, .5);
}

/* Chat header */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: linear-gradient(90deg, rgba(0,229,255,.12), rgba(255,122,26,.12));
  border-bottom: 1px solid rgba(0,229,255,.25);
}

.chat-header-title {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent2), var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 0 16px rgba(0,229,255,.25);
}

.chat-header-text {
  display: flex;
  flex-direction: column;
}

.chat-header-name {
  font-family: 'Press Start 2P', monospace;
  font-size: .7rem;
  color: #fff;
}

.chat-header-status {
  font-size: .65rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: .35rem;
}

.chat-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 10px rgba(0,255,136,.5);
}

.chat-lang-selector {
  display: flex;
  align-items: center;
}

.chat-lang-select {
  background: rgba(0,229,255,.08);
  border: 1px solid rgba(0,229,255,.25);
  color: var(--text);
  padding: .35rem .6rem;
  border-radius: 4px;
  font-size: .75rem;
  cursor: pointer;
  outline: none;
  transition: border-color .2s, background .2s;
}

.chat-lang-select:hover {
  border-color: rgba(0,229,255,.5);
  background: rgba(0,229,255,.12);
}

.chat-close-btn {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0,229,255,.25);
  background: rgba(0,229,255,.08);
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}

.chat-close-btn:hover {
  background: rgba(255,39,95,.15);
  color: #fff;
}

/* Chat messages */
.chat-messages {
  flex: 1;
  padding: 1rem 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: rgba(0,0,0,.2);
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0,229,255,.3);
}

/* Message bubbles */
.chat-message {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-width: 85%;
}

.chat-message.user {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-message.admin {
  align-self: flex-start;
  align-items: flex-start;
}

.chat-bubble {
  padding: .7rem .9rem;
  font-size: .85rem;
  line-height: 1.5;
  word-wrap: break-word;
}

.chat-message.user .chat-bubble {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #061018;
  border-top-left-radius: 8px;
  border-top-right-radius: 2px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.chat-message.admin .chat-bubble {
  background: rgba(0,229,255,.12);
  color: var(--text);
  border: 1px solid rgba(0,229,255,.25);
  border-top-left-radius: 2px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.chat-message img {
  max-width: 200px;
  max-height: 160px;
  border-radius: 8px;
  border: 1px solid rgba(0,229,255,.25);
}

.chat-message-time {
  font-size: .65rem;
  color: var(--text-dim);
  opacity: .8;
}

/* Chat input */
.chat-input-container {
  padding: .75rem 1.25rem 1rem;
  border-top: 1px solid rgba(0,229,255,.25);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.chat-input-actions {
  display: flex;
  gap: .5rem;
}

.chat-emoji-btn,
.chat-image-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0,229,255,.25);
  background: rgba(0,229,255,.08);
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}

.chat-emoji-btn:hover,
.chat-image-btn:hover {
  background: rgba(0,229,255,.18);
  color: #fff;
}

.chat-input-row {
  display: flex;
  gap: .5rem;
}

.chat-input {
  flex: 1;
  padding: .7rem .9rem;
  background: rgba(5,10,18,.7);
  border: 1px solid rgba(0,229,255,.25);
  color: var(--text);
  font-size: .85rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.chat-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(255,122,26,.15);
}

.chat-send-btn {
  padding: .7rem 1.25rem;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #061018;
  font-family: 'Press Start 2P', monospace;
  font-size: .65rem;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.chat-send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,122,26,.35);
}

.chat-send-btn:active {
  transform: translateY(0);
}

/* Emoji picker */
.emoji-picker {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: .5rem;
  padding: .75rem;
  background: rgba(9,14,23,.98);
  border: 1px solid rgba(0,229,255,.3);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  border-radius: 4px;
  gap: .4rem;
  flex-wrap: wrap;
  max-width: 260px;
}

.emoji-picker.show {
  display: flex;
}

.emoji-item {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background .15s;
}

.emoji-item:hover {
  background: rgba(0,229,255,.15);
}

/* Login prompt for chat */
.chat-login-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem;
  text-align: center;
  gap: 1rem;
}

.chat-login-prompt-text {
  font-size: .85rem;
  color: var(--text-dim);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .chat-window {
    width: calc(100vw - 2rem);
    right: 1rem;
    bottom: 5rem;
    height: 480px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RECHARGE (现金充值)
   ═══════════════════════════════════════════════════════════════ */
.shop-recharge-btn {
  margin-left: .5rem;
  padding: .35rem .9rem;
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem;
  background: var(--primary);
  color: #0d0a00;
  border: none;
  cursor: pointer;
  letter-spacing: .5px;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  transition: transform .15s, filter .15s;
}
.shop-recharge-btn:hover  { transform: translateY(-1px); filter: brightness(1.15); }
.shop-recharge-btn:active { transform: translateY(1px); }

.recharge-modal { max-width: 480px; }

.recharge-section-title {
  font-size: .72rem;
  color: var(--text-dim);
  margin: .2rem 0 .7rem;
  letter-spacing: 1px;
}
.recharge-section-title:not(:first-child) { margin-top: 1.2rem; }

.recharge-amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}
.recharge-amount {
  padding: .9rem .4rem;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .15rem;
  transition: all .15s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.recharge-amount:hover {
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}
.recharge-amount.active {
  background: rgba(255,107,26,.15);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 12px rgba(255,107,26,.35);
}
.recharge-amount-symbol { font-size: .8rem; opacity: .8; }
.recharge-amount-num    { font-family: 'Press Start 2P', monospace; font-size: 1rem; }
.recharge-amount-sub    {
  display: block;
  width: 100%;
  margin-top: .35rem;
  font-size: .55rem;
  opacity: .55;
  letter-spacing: .5px;
}
.recharge-amount { flex-wrap: wrap; }

.recharge-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}
.recharge-channel {
  padding: .9rem;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  transition: all .15s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.recharge-channel:hover { border-color: var(--primary); color: #fff; transform: translateY(-2px); }
.recharge-channel.active {
  border-color: var(--primary);
  background: rgba(255,107,26,.1);
  color: #fff;
  box-shadow: 0 0 12px rgba(255,107,26,.3);
}
.recharge-channel-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  background: rgba(255,255,255,.95);
  border-radius: 4px;
}
.recharge-channel-name { font-size: .78rem; letter-spacing: 1px; }

.recharge-summary {
  margin-top: 1rem;
  padding: .7rem .9rem;
  font-size: .78rem;
  color: var(--text-dim);
  background: rgba(255,255,255,.03);
  border-left: 3px solid var(--primary);
  text-align: center;
}

/* QR Modal */
.recharge-qr-modal { max-width: 380px; }
.recharge-qr-amount {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.4rem;
  color: var(--primary);
  margin: .2rem 0 1rem;
  text-shadow: 0 0 8px rgba(255,107,26,.4);
}
.recharge-qr-box {
  padding: 12px;
  background: #fff;
  display: inline-block;
  margin-bottom: 1rem;
}
.recharge-qr-box img { display: block; width: 220px; height: 220px; }
.recharge-qr-tip {
  font-size: .72rem;
  color: var(--text-dim);
  margin-bottom: .8rem;
}
.recharge-qr-status {
  font-size: .8rem;
  color: var(--primary);
  margin-bottom: .6rem;
  letter-spacing: .5px;
}
.recharge-qr-orderid {
  font-size: .65rem;
  color: var(--text-dim);
  opacity: .7;
  word-break: break-all;
}
.recharge-qr-orderid span { margin-left: .4rem; font-family: monospace; }

/* ─── 付款警告横幅 & 核对中转圈 ────────────────────────────────────────── */
.recharge-qr-warn {
  margin: .6rem 0 .4rem;
  padding: .5rem .7rem;
  font-size: .68rem;
  line-height: 1.5;
  color: #ffe08a;
  background: rgba(255, 107, 26, .12);
  border: 1px solid rgba(255, 107, 26, .55);
  border-left-width: 3px;
  letter-spacing: .3px;
  text-align: center;
}
/* ─── 付款客服联系方式 (中英双语,弱化不抢眼) ───────────────────────── */
.recharge-qr-support {
  width: 100%;
  margin-top: .8rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.recharge-qr-support .support-block {
  padding: .55rem .75rem;
  background: rgba(0, 229, 255, .05);
  border: 1px solid rgba(0, 229, 255, .28);
  border-left: 3px solid var(--primary);
  border-radius: 3px;
  text-align: left;
}
.recharge-qr-support .support-title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: .3rem;
  letter-spacing: .3px;
}
.recharge-qr-support .support-text {
  font-size: .68rem;
  line-height: 1.7;
  color: var(--text);
  word-break: break-word;
}
.recharge-qr-support .support-hl {
  color: #ffd166;
  background: rgba(255, 209, 102, .12);
  padding: 0 .25rem;
  border-radius: 2px;
}
.recharge-qr-support .support-email {
  display: inline-block;
  margin: 0 .1rem;
  padding: .05rem .35rem;
  color: #22d3ee;
  background: rgba(34, 211, 238, .1);
  border-bottom: 1px dashed rgba(34, 211, 238, .55);
  border-radius: 2px;
  text-decoration: none;
  font-family: monospace;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .3px;
}
.recharge-qr-support .support-email:hover {
  background: rgba(34, 211, 238, .22);
  color: #67e8f9;
}
.recharge-qr-verifying {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  padding: 1rem 0 .5rem;
}
.recharge-qr-verifying .spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 107, 26, .2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: rechargeSpin 0.9s linear infinite;
}
.recharge-qr-verifying .verify-title {
  font-family: 'Press Start 2P', monospace;
  font-size: .75rem;
  color: var(--primary);
  letter-spacing: .5px;
}
.recharge-qr-verifying .verify-note {
  font-size: .68rem;
  color: #ffe08a;
  line-height: 1.6;
  text-align: center;
}
@keyframes rechargeSpin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .recharge-amount-grid    { grid-template-columns: repeat(2, 1fr); }
  .recharge-qr-box img     { width: 180px; height: 180px; }
}

/* ─── 服务器时间（洛杉矶 UTC-7） ─────────────────────────────────────────── */
.server-time {
  margin: 1.4rem auto 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .7rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(4px);
}
.server-time-label {
  font-size: .66rem;
  letter-spacing: .05em;
  color: var(--text-dim);
}
.server-time-value {
  font-family: 'Press Start 2P', monospace;
  font-size: .9rem;
  color: var(--primary);
  letter-spacing: .04em;
  text-shadow: 0 0 8px rgba(255, 107, 53, .4);
}
@media (max-width: 480px) {
  .server-time-value { font-size: .72rem; }
}