/* =========================================================
  ✅ 2026“更二次元 + 更游戏官网”升级版（高级游戏官网UI增强）
  - 仅改视觉：不改结构/不改功能/不改JS
========================================================= */

/* ---------- 动画（保留 + 微调更“高级”） ---------- */
@keyframes page-in { 0%{opacity:0; transform: translateY(6px); filter: blur(2px);} 100%{opacity:1; transform: translateY(0); filter: blur(0);} }
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }
@keyframes shimmer { 0%{ transform: translateX(-140%) skewX(-18deg); opacity:0;} 20%{opacity:.7;} 70%{opacity:.35;} 100%{ transform: translateX(180%) skewX(-18deg); opacity:0;} }
@keyframes jelly { 0%{ transform: translateY(-2px) scale(1.01);} 35%{ transform: translateY(-2px) scale(1.05);} 70%{ transform: translateY(-2px) scale(.99);} 100%{ transform: translateY(-2px) scale(1.01);} }
@keyframes pop {
  0%{ opacity:0; transform: translateY(12px) scale(.96); filter: blur(2px);}
  65%{ opacity:1; transform: translateY(-2px) scale(1.01); filter: blur(0);}
  100%{ opacity:1; transform: translateY(0) scale(1); filter: blur(0);}
}
@keyframes glow-pulse {
  0%,100%{
    box-shadow:
      0 18px 66px rgba(0,0,0,.42),
      0 0 0 1px rgba(255,255,255,.08),
      0 0 38px rgba(124,200,255,.10);
  }
  50%{
    box-shadow:
      0 22px 86px rgba(0,0,0,.48),
      0 0 0 1px rgba(255,255,255,.10),
      0 0 56px rgba(255,122,182,.14);
  }
}
@keyframes bg-drift {
  0%{ transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  50%{ transform: translate3d(1.5%, 1%, 0) scale(1.03); }
  100%{ transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
}
@keyframes neon-border { 0%{ filter: hue-rotate(0deg); } 100%{ filter: hue-rotate(360deg); } }
@keyframes overlay-fade-in { from{opacity:0} to{opacity:1} }
@keyframes modal-pop {
  0%{ opacity:0; transform: translateY(18px) scale(.94); filter: blur(2px);}
  55%{ opacity:1; transform: translateY(-2px) scale(1.01); filter: blur(0);}
  100%{ opacity:1; transform: translateY(0) scale(1); filter: blur(0);}
}
@keyframes scanline{
  0%{ transform: translateY(-50%); opacity:0; }
  10%{ opacity:.28;}
  100%{ transform: translateY(160%); opacity:0; }
}



/* ---------- Anime HUD Enhancements（更二次元：能量描边/漂浮粒子/全局色偏） ---------- */
@keyframes aura-shift{ 0%{ filter: hue-rotate(0deg) saturate(1.08);} 100%{ filter: hue-rotate(22deg) saturate(1.18);} }
@keyframes star-twinkle{ 0%,100%{ opacity:.18; transform: translateY(0) scale(1);} 50%{ opacity:.55; transform: translateY(-6px) scale(1.06);} }
@keyframes hud-corner{ 0%,100%{ opacity:.35; } 50%{ opacity:.72; } }
@keyframes soft-glow{ 0%,100%{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); } 50%{ filter: drop-shadow(0 0 18px rgba(64,182,255,.22)); } }
@keyframes sheen-sweep{ 0%{ transform: translateX(-140%) rotate(8deg); opacity:0;} 15%{opacity:.55;} 60%{opacity:.22;} 100%{ transform: translateX(180%) rotate(8deg); opacity:0;} }

/* ---------- 主题变量（更像游戏官网：暗黑 + 霓虹点缀） ---------- */
:root{
  --header-h: 4.6rem;

  /* 主色：更克制 */
  --pink: #ff4fb6;
  --pink2:#ff7acc;
  --lav:  #8c7bff;
  --mint: #38ffd6;
  --sky:  #40b6ff;
  --lemon:#ffd36a;

  --text: #ffffff;
  --text-dim: rgba(255,255,255,0.86);
  --text-dimmer: rgba(255,255,255,0.70);

  /* 玻璃（更暗，更“游戏UI”） */
  --glass: rgba(255,255,255,0.10);
  --glass2: rgba(255,255,255,0.18);
  --stroke: rgba(255,255,255,0.20);
  --stroke-strong: rgba(255,255,255,0.34);

  --shadow: 0 22px 78px rgba(0,0,0,0.48);
  --shadow-soft: 0 14px 34px rgba(0,0,0,0.34);

  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;

  --ease: cubic-bezier(.22,.9,.22,1);

  --outline: 1px;
  --outline-strong: 2px;

  --shine: rgba(255,255,255,0.58);
  --btn-gloss: linear-gradient(180deg, rgba(255,255,255,0.50), rgba(255,255,255,0));

  /* Music player */
  --mp-bg: rgba(4, 6, 14, .86);
  --mp-card: rgba(14, 14, 28, .94);
  --mp-card2: rgba(16, 16, 40, .94);
  --mp-text: rgba(255,255,255,.95);
  --mp-text-dim: rgba(255,255,255,.72);
  --mp-shadow: 0 28px 90px rgba(0,0,0,.62);
  --mp-shadow-soft: 0 14px 44px rgba(0,0,0,.40);

  --black-stroke: rgba(0,0,0,0.35);
  --white-stroke: rgba(255,255,255,0.34);

  --focus: 0 0 0 4px rgba(64,182,255,0.22), 0 0 0 8px rgba(255,79,182,0.14);

  /* 内容区遮罩（更像游戏官网） */
  --content-glass: rgba(8, 10, 18, 0.52);
  --content-glass-strong: rgba(6, 8, 16, 0.74);
  --content-stroke: rgba(255,255,255,0.18);

  /* 新增：UI 网格/能量线 */
  --grid: rgba(255,255,255,0.05);
  --grid-strong: rgba(64,182,255,0.12);

  /* Anime accents */
  --aura-pink: rgba(255,79,182,0.22);
  --aura-sky: rgba(64,182,255,0.20);
  --aura-lav: rgba(140,123,255,0.18);
  --hud-line: rgba(255,255,255,0.10);
  --hud-line-strong: rgba(64,182,255,0.22);
  --grain: rgba(255,255,255,0.035);
  --panel-glow: 0 0 0 1px rgba(255,255,255,.08), 0 0 52px rgba(64,182,255,.10);
}


body.theme-neo{
  --pink: #ff4fb6;
  --pink2:#ff7acc;
  --lav:  #8c7bff;
  --mint: #38ffd6;
  --sky:  #40b6ff;
  --lemon:#ffd36a;

  --glass: rgba(255,255,255,0.10);
  --glass2: rgba(255,255,255,0.18);
  --stroke: rgba(255,255,255,0.22);
  --stroke-strong: rgba(255,255,255,0.36);

  --content-glass: rgba(6, 8, 16, 0.56);
  --content-glass-strong: rgba(6, 8, 16, 0.78);
  --content-stroke: rgba(255,255,255,0.20);

  --shine: rgba(255,255,255,0.62);
}

html{ scroll-padding-top: var(--header-h); }
*{
  margin:0; padding:0; box-sizing:border-box;
  scroll-behavior:smooth;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  text-decoration:none;
  user-select:none;
}

a, button, .box, .dropdown_main a, .section1 .right, .modal-content, .player-overlay .player, .hero-panel{
  transition:
    transform .22s var(--ease),
    opacity .22s var(--ease),
    color .22s var(--ease),
    background-color .22s var(--ease),
    box-shadow .22s var(--ease),
    filter .22s var(--ease);
}

:where(a,button,select,input,[tabindex]):focus-visible{
  outline:none;
  box-shadow: var(--focus);
  border-radius:14px;
}

body{
  margin:0!important; padding:0!important;
  min-height:100vh;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow-x:hidden;
  animation: page-in .75s ease both;
  position:relative;
}

/* 更像游戏官网：柔光 + 网格 + 暗角 */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;

  background:
    /* 网格 + HUD 线框 */
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px),
    /* HUD 斜线 */
    repeating-linear-gradient(135deg, rgba(255,255,255,0.00), rgba(255,255,255,0.00) 12px, rgba(255,255,255,0.035) 12px, rgba(255,255,255,0.035) 13px),
    /* 星屑点阵 */
    radial-gradient(2px 2px at 18% 22%, rgba(255,255,255,.42), transparent 65%),
    radial-gradient(2px 2px at 62% 18%, rgba(255,255,255,.32), transparent 65%),
    radial-gradient(1.5px 1.5px at 86% 36%, rgba(255,255,255,.28), transparent 65%),
    radial-gradient(1.5px 1.5px at 28% 72%, rgba(255,255,255,.26), transparent 65%),
    radial-gradient(2px 2px at 78% 82%, rgba(255,255,255,.22), transparent 65%),
    /* 柔光点缀 */
    radial-gradient(900px 600px at 18% 10%, rgba(255,79,182,0.18), transparent 60%),
    radial-gradient(920px 680px at 88% 18%, rgba(140,123,255,0.16), transparent 60%),
    radial-gradient(980px 720px at 70% 92%, rgba(56,255,214,0.12), transparent 65%);

  background-size:
    46px 46px,
    46px 46px,
    auto,
    auto,
    auto;

  mix-blend-mode: screen;
  opacity:.85;
  transform: translateZ(0);
  animation: bg-drift 10s ease-in-out infinite;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  background:
    radial-gradient(1200px 740px at 50% 14%, rgba(0,0,0,0.12), rgba(0,0,0,0.70) 72%),
    linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.70));
  opacity: .62;
}

header, section, .corner-btn, .floating-btn-container, .player-overlay, #versionModal{
  position: relative; z-index: 1;
}

/* =========================================================
  ✅ Header（更像游戏官网顶部导航）
========================================================= */
header{
  position:fixed;
  z-index:9999;
  top:0; left:0; width:100%;
  height: var(--header-h);
  padding:0 clamp(12px, 4vw, 100px);
  display:flex; align-items:center; justify-content:space-between;
  overflow:visible;

  background:
    linear-gradient(180deg, rgba(6,8,16,0.78), rgba(6,8,16,0.52));
  border-bottom:1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 50px rgba(0,0,0,0.44);
  backdrop-filter: blur(16px) saturate(140%);
}
header::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 120px at 22% 10%, rgba(64,182,255,.20), transparent 55%),
    radial-gradient(900px 160px at 80% 40%, rgba(255,79,182,.16), transparent 60%);
  opacity:.9;
}
.top-progress{
  position:absolute;
  left:0; bottom:0;
  height:4px;
  width:100%;
  background: rgba(255,255,255,0.08);
  overflow:visible;
}
.top-progress > i{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--sky), var(--mint), var(--lav), var(--pink));
  box-shadow: 0 0 0 6px rgba(64,182,255,.08);
  border-radius:999px;
}

header::after{
  content:"";
  position:absolute; top:0; left:0;
  height:100%;
  width:62%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.40), transparent);
  transform: translateX(-130%) skewX(-18deg);
  opacity:0;
  pointer-events:none;
}
body.scrolled header{
  border-bottom-color: rgba(255,255,255,0.18);
  box-shadow: 0 22px 60px rgba(0,0,0,0.52);
}
body.scrolled header::after{ animation: shimmer 1.9s var(--ease) infinite; opacity:1; }

header .logo{ display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
header .logo img{
  width:38px; height:38px;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.40));
  transform: translateZ(0);
}
header .logo h2{
  color:var(--text);
  font-weight:900;
  letter-spacing:1.2px;
  font-size:20px;
  text-shadow: 0 12px 28px rgba(0,0,0,0.45);
}

header nav{
  display:flex;
  gap: clamp(10px, 2vw, 2.2rem);
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  position:relative; z-index:1;
}

header nav a,
.dropdown_main > a,
.download-container > a{
  font-size:14.5px;
  color:var(--text);
  white-space:nowrap;
  padding:9px 12px;
  border-radius:999px;

  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  border: var(--outline) solid rgba(255,255,255,0.16);

  box-shadow:
    0 10px 26px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);

  position:relative;
  overflow:visible;
  transform: translateZ(0);
}
header nav a::before,
.dropdown_main > a::before,
.download-container > a::before{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(90deg, rgba(64,182,255,.0), rgba(64,182,255,.22), rgba(255,79,182,.18), rgba(64,182,255,.0));
  opacity:.0;
  transition: opacity .22s var(--ease);
}
header nav a.is-active{
  border-color: rgba(255,255,255,0.30);
  background: linear-gradient(135deg, rgba(64,182,255,0.18), rgba(255,79,182,0.14));
  box-shadow:
    0 18px 44px rgba(0,0,0,0.26),
    0 0 0 8px rgba(64,182,255,0.10),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
header nav a:hover,
.dropdown_main > a:hover,
.download-container > a:hover{
  color:#fff;
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.24);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.24),
    0 0 0 10px rgba(255,79,182,0.08),
    inset 0 1px 0 rgba(255,255,255,0.22);
  filter:saturate(1.12);
}
header nav a:hover::before,
.dropdown_main > a:hover::before,
.download-container > a:hover::before{ opacity:1; }

/* dropdown（保持结构，提升质感） */
/* =========================================================
  ✅ Dropdown：服务器选择（修复 + 更像游戏官网）
  - 修复：被旧 styles.css 覆盖导致文字发灰/箭头不明显/按钮不立体
  - 只改样式：不改结构/不改功能/不改JS
========================================================= */

/* 容器 */
header nav .dropdown_main{
  position:relative;
  display:inline-flex;
  align-items:center;
}

/* 主按钮（服务器选择） */
header nav .dropdown_main > a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  font-size:14.5px !important;
  font-weight:800 !important;
  letter-spacing:.4px !important;

  color:rgba(255,255,255,.96) !important;
  text-shadow:0 8px 22px rgba(0,0,0,.45) !important;

  padding:10px 42px 10px 18px !important; /* 右侧给箭头预留 */
  line-height:1 !important;
  white-space:nowrap !important;

  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.20) !important;

  background:linear-gradient(135deg,
    rgba(140,123,255,.42),
    rgba(255,79,182,.30)
  ) !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,.34),
    0 0 0 6px rgba(140,123,255,.08),
    inset 0 1px 0 rgba(255,255,255,.22) !important;

  position:relative !important;
  overflow:hidden !important;
  transform:translateZ(0) !important;
}

/* 高光扫光 */
header nav .dropdown_main > a::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.20),
    rgba(255,255,255,0)
  );
  transform:translateX(-140%) skewX(-18deg);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease), transform .8s var(--ease);
}

/* 右侧箭头（更粗更清晰） */
header nav .dropdown_main > a::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:9px;
  height:9px;
  border-right:2px solid rgba(255,255,255,.92);
  border-bottom:2px solid rgba(255,255,255,.92);
  transform:translateY(-60%) rotate(45deg);
  transition:transform .22s var(--ease), opacity .22s var(--ease);
  opacity:.95;
  pointer-events:none;
}

/* hover/active：抬升 + 发光 */
header nav .dropdown_main:hover > a,
header nav .dropdown_main.active > a{
  transform:translateY(-2px) translateZ(0) !important;
  filter:saturate(1.10) brightness(1.03) !important;
  border-color:rgba(255,255,255,.26) !important;

  box-shadow:
    0 22px 54px rgba(0,0,0,.46),
    0 0 0 8px rgba(255,79,182,.12),
    inset 0 1px 0 rgba(255,255,255,.26) !important;
}
header nav .dropdown_main:hover > a::before,
header nav .dropdown_main.active > a::before{
  opacity:.95;
  transform:translateX(160%) skewX(-18deg);
}
header nav .dropdown_main:hover > a::after,
header nav .dropdown_main.active > a::after{
  transform:translateY(-40%) rotate(225deg);
  opacity:1;
}

/* 下拉面板 */
header nav .dropdown_xiala{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  right:0;

  min-width:240px;
  padding:12px;
  border-radius:20px;
  z-index:10000;

  background:linear-gradient(180deg,
    rgba(14,16,28,.96),
    rgba(10,12,22,.92)
  ) !important;

  border:1px solid rgba(255,255,255,.14) !important;

  box-shadow:
    0 30px 86px rgba(0,0,0,.55),
    0 0 0 10px rgba(255,255,255,.04) !important;

  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);

  opacity:0;
  visibility:hidden;
  transform:translateY(-10px) scale(.985);
  transform-origin:92% 0%;
  transition:all .22s var(--ease);
  overflow:visible;
}

/* 展开 */
header nav .dropdown_main:hover .dropdown_xiala,
header nav .dropdown_main.active .dropdown_xiala{
  display:block;
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

/* 菜单项 */
header nav .dropdown_xiala a{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px;

  color:rgba(255,255,255,.92) !important;
  font-size:14px !important;

  padding:12px 12px;
  border-radius:16px;

  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.06) !important;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;
  overflow:visible;
  transform:translateZ(0);
}
header nav .dropdown_xiala a .arrow{ opacity:.85; }

header nav .dropdown_xiala a:hover{
  background:linear-gradient(135deg, rgba(64,182,255,.16), rgba(255,79,182,.12)) !important;
  border-color:rgba(255,255,255,.18) !important;
  transform:translateY(-1px);
}
header nav .dropdown_xiala a:not(:last-child){ margin-bottom:10px; }

/* 点击按压反馈（不影响其他按钮逻辑） */
header nav .dropdown_main > a:active,
header nav .dropdown_xiala a:active{
  transform:translateY(0) scale(.98) !important;
}

/* 移动端防溢出 */
@media (max-width:768px){
  header nav .dropdown_xiala{
    right:0;
    left:auto;
    min-width:200px;
  }
}


/* =========================================================
  ✅ Sections（布局保留，质感增强）
========================================================= */
section{ height:100vh; }
.section1, .section2 .row, .section3 .pictures{
  width:100%;
  max-width:1280px;
  margin-left:auto; margin-right:auto;
}

.section1{
  display:flex;
  justify-content:space-around;
  align-items:center;
  background-size:cover;
  background-attachment:fixed;
  padding-top: var(--header-h);
  gap: 1.8rem;
  padding-left: clamp(12px, 6vw, 70px);
  padding-right: clamp(12px, 6vw, 70px);
  position:relative;
}

/* 轻微扫描线（霓虹主题更明显） */
body.theme-neo .section1::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.05), transparent);
  opacity:.22;
  animation: scanline 4.2s ease-in-out infinite;
}

/* 主内容面板（更像游戏官网信息面板） */
.hero-panel{
  background:
    linear-gradient(180deg, var(--content-glass-strong), var(--content-glass));
  border: 1px solid var(--content-stroke);
  box-shadow:
    0 22px 78px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(140%);
  border-radius: var(--radius-xl);
  position:relative;
}
.hero-panel::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--radius-xl) + 2px);
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(64,182,255,0.0), rgba(64,182,255,0.18), rgba(255,79,182,0.14), rgba(64,182,255,0.0));
  opacity:.55;
  filter: blur(10px);
  z-index:0;
}
.section1 .left{
  display:flex; flex-direction:column;
  gap:.85rem;
  max-width:720px;
  transform: translateZ(0);
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
}
.section1 .left > *{ position:relative; z-index:1; }
.section1 .left::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 260px at 12% 10%, rgba(64,182,255,0.12), transparent 60%),
    radial-gradient(520px 280px at 88% 18%, rgba(255,79,182,0.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 46%);
  opacity: .95;
}

.section1 .left h1{
  color:var(--text);
  font-size:2.85rem;
  letter-spacing:1px;
  opacity:0;
  animation: pop .9s var(--ease) .18s both;
  text-shadow: 0 18px 46px rgba(0,0,0,0.55);
}
.section1 .left h1::after{
  content:"";
  display:block;
  margin-top: 10px;
  height: 10px;
  width: min(520px, 92%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(64,182,255,.92), rgba(56,255,214,.86), rgba(140,123,255,.86), rgba(255,79,182,.90));
  box-shadow: 0 16px 42px rgba(0,0,0,.38), 0 0 0 10px rgba(255,255,255,.03);
  opacity:.95;
}
.section1 .left h3{
  font-size:15.5px;
  letter-spacing:1.6px;
  opacity:0;
  animation: pop .8s var(--ease) .28s both;
  background-image: linear-gradient(90deg, var(--sky), var(--mint), var(--lav), var(--pink));
  color: transparent;
  -webkit-background-clip:text;
  background-clip:text;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.30));
  font-weight: 800;
}
.section1 .left p{
  margin-top:1rem;
  max-width:600px;
  color:var(--text-dim);
  text-shadow:0 16px 40px rgba(0,0,0,0.55);
  line-height:1.8;
  opacity:0;
  animation: pop .9s var(--ease) .38s both;
}

/* 表格更像“服务器状态面板” */
.section1 .left table{
  margin-top:1rem;
  color:#fff;
  width:100%;
  border-collapse:collapse;
  opacity:0;
  animation: pop .9s var(--ease) .48s both;
  overflow:visible;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 48px rgba(0,0,0,0.34);
  backdrop-filter: blur(18px) saturate(150%);
  position:relative;
  background: rgba(0,0,0,0.26);
}
.section1 .left table::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), transparent 52%),
    radial-gradient(600px 120px at 20% 0%, rgba(64,182,255,0.18), transparent 60%);
  opacity:.95;
}
.section1 .left table td{
  padding:11px 12px;
  border-bottom:1px solid rgba(255,255,255,0.10);
  position:relative; z-index:1;
  background: rgba(255,255,255,0.04);
}
.section1 .left table td:nth-child(even){ background: rgba(255,255,255,0.03); }
.section1 .left table tr:last-child td{ border-bottom:none; }
.section1 .left table .inf-text{ font-size:15px; }
.section1 .left table #copy{
  cursor:pointer;
  color:#fff;
  text-decoration:underline;
  text-decoration-color: rgba(255,255,255,0.45);
}
.section1 .left table #copy:hover{
  text-decoration-color: rgba(64,182,255,0.75);
  filter: saturate(1.1);
}

/* CTA 按钮：更像游戏官网 */
.section1 .left .group{
  margin-top:1.3rem;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  opacity:0;
  animation: pop .9s var(--ease) .58s both;
}
.section1 .left .group button{
  cursor:pointer;
  padding:.86rem 1.46rem;
  font-size:15.5px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,0.18);
  position:relative; overflow:hidden;
  box-shadow:
    0 18px 44px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.14);
  letter-spacing:.4px;
  background: rgba(255,255,255,0.08);
  color:#fff;
  transform: translateZ(0);
}
.section1 .left .group button::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.20), rgba(255,255,255,0));
  transform: translateX(-120%);
  opacity:.0;
}
.section1 .left .group button:hover{
  transform: translateY(-2px);
  box-shadow:
    0 22px 56px rgba(0,0,0,0.28),
    0 0 0 10px rgba(64,182,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.18);
  filter: saturate(1.12);
}
.section1 .left .group button:hover::after{
  opacity:.9;
  transform: translateX(120%);
  transition: transform .7s var(--ease), opacity .3s var(--ease);
}

.section1 .left .group .download-btn{
  border-color: rgba(64,182,255,0.22);
  background: linear-gradient(135deg, rgba(64,182,255,0.92), rgba(140,123,255,0.86));
}
.section1 .left .group .qq-btn{
  border-color: rgba(56,255,214,0.22);
  background: linear-gradient(135deg, rgba(56,255,214,0.88), rgba(255,79,182,0.70));
}
.section1 .left .group .white-btn{
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
}

/* 公告卡：从“白卡”变成更像游戏官网侧边信息面板 */
.section1 .right{
  cursor:pointer;
  padding:2.2rem 1.8rem;
  border-radius: var(--radius-xl);
  max-width:420px;

  opacity:0;
  background: linear-gradient(180deg, rgba(10,12,22,0.86), rgba(10,12,22,0.74));
  border: 1px solid rgba(255,255,255,0.14);

  box-shadow:
    0 22px 78px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 58px rgba(64,182,255,.10);

  position:relative; overflow:hidden;
  transform: translateZ(0);
  animation: pop .9s var(--ease) .58s both, glow-pulse 6.2s ease-in-out infinite;
  will-change: transform;
}
.section1 .right::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 18% 10%, rgba(64,182,255,0.16), transparent 62%),
    radial-gradient(520px 260px at 88% 18%, rgba(255,79,182,0.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 55%);
  opacity:.9;
}
.section1 .right h3{ position:relative; z-index:1; }
.section1 .right h3 img{ filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); }
.section1 .right p{
  padding:6px;
  font-size:15px;
  line-height:1.7;
  max-height:280px;
  overflow-y:auto;

  /* ✅ 修复：这里不该是深色字（背景是深色玻璃面板），否则会看不清 */
  color: rgba(255,255,255,0.90);
  text-shadow: 0 2px 12px rgba(0,0,0,.6);

  /* ✅ 修复：你原来写到了块外面，导致语法错 */
  position:relative;
  z-index:1;
}

.section1 .right p a{
  color: rgba(64,182,255,0.92);
  text-decoration: underline;
  text-decoration-color: rgba(64,182,255,0.35);
}
.section1 .right p a:hover{
  color: rgba(255,79,182,0.95);
  text-decoration-color: rgba(255,79,182,0.45);
}
.section1 .right hr{ opacity:.22; border-color: rgba(255,255,255,0.18); }

/* =========================================================
  ✅ section2：功能入口更像游戏官网模块
========================================================= */
.section2{
  position:relative;
  display:flex;
  align-items:center;
  height:fit-content;
  padding:2.9rem 0;

  background:
    linear-gradient(180deg, rgba(8,10,18,0.68), rgba(8,10,18,0.40));
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  overflow:visible;

  content-visibility:auto;
  contain-intrinsic-size: 800px 600px;
}
.section2::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 260px at 30% 0%, rgba(64,182,255,0.18), transparent 60%),
    radial-gradient(900px 260px at 70% 40%, rgba(255,79,182,0.14), transparent 60%);
  opacity:.7;
}
.section2 .row{
  width:100%;
  padding:0 clamp(12px, 6vw, 10rem);
  display:flex;
  align-items:start;
  gap: clamp(14px, 4vw, 6rem);
  position:relative;
}
.section2 .row .box{
  cursor:pointer;
  padding:1.35rem 1.2rem;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  border-radius: var(--radius-xl);

  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 20px 56px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.08);

  position:relative; overflow:hidden;
  transform: translateZ(0);
  will-change: transform;
}
.section2 .row .box::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(260px 180px at 20% 10%, rgba(64,182,255,0.12), transparent 60%),
    radial-gradient(260px 180px at 80% 20%, rgba(255,79,182,0.10), transparent 60%);
  opacity:.9;
}
.section2 .row .box img{
  width:72px; height:72px;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.50));
  position:relative; z-index:1;
}
/* ===== 功能卡片标题 ===== */
.section2 .row .box h2{
  background: linear-gradient(90deg,#40b6ff,#8c7bff,#ff4fb6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  letter-spacing: .6px;
  text-shadow: 0 0 18px rgba(64,182,255,.35);
}

/* ===== 功能卡片正文 ===== */
.section2 .row .box p{
  color: rgba(255,255,255,0.86);
  font-weight: 600;
  line-height: 1.75;
  text-shadow: 0 10px 26px rgba(0,0,0,0.55);
}

.section2 .row .box:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.20);
  box-shadow:
    0 26px 74px rgba(0,0,0,0.50),
    0 0 0 10px rgba(64,182,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.box-appear{ animation: pop .9s var(--ease) forwards; }

/* =========================================================
  ✅ section3：画廊更像“媒体/视频墙”
========================================================= */
.section3{
  position:relative;
  background-size:cover;
  background-attachment:fixed;
  background-image:url('https://cdn.imlazy.ink:233/img/background/E9tUsQ8VUAAj-aA.jpg');
  content-visibility:auto;
  contain-intrinsic-size: 900px 700px;
  overflow:visible;
}
.section3::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.48), rgba(0,0,0,0.10) 40%, rgba(0,0,0,0.48)),
    radial-gradient(900px 320px at 50% 10%, rgba(64,182,255,0.12), transparent 60%);
  opacity:.95;
}
.section3 .pictures{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
  padding:0 clamp(12px, 6vw, 10rem);
  position:relative;
}
.section3 .pictures .parent{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(5,1fr);
  grid-column-gap:20px;
  grid-row-gap:20px;
  height:600px;
  position:relative;
}
.section3 .pictures .parent > div{
  position:relative;
  overflow:visible;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.52),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateZ(0);
}
body.theme-neo .section3 .pictures .parent > div{ animation: neon-border 12s linear infinite; }
.section3 .pictures img,
.section3 .pictures iframe{
  width:100%; height:100%;
  border-radius: var(--radius-xl);
  object-fit:cover;
  display:block;
}
.section3 .pictures img{
  cursor:pointer;
  transition: transform .55s var(--ease), filter .55s var(--ease);
  filter: saturate(1.06) contrast(1.06) brightness(.98);
}
.section3 .pictures .parent > div:hover img{
  transform: scale(1.05);
  filter: saturate(1.12) contrast(1.08) brightness(1.02);
}

/* 关键：让你原来的 <p> 变成“悬浮CTA遮罩”，并兼容 .show-overlay */
.section3 .pictures .parent a{
  position:absolute;
  inset:0;
  display:block;
}
.section3 .pictures .parent a p{
  margin:0;
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:16px;
  letter-spacing:.6px;
  font-weight:900;

  color: rgba(255,255,255,0.92);
  background:
    radial-gradient(600px 220px at 50% 20%, rgba(64,182,255,0.20), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.70));
  backdrop-filter: blur(10px) saturate(140%);

  opacity:0;
  transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.section3 .pictures .parent > div:hover a p{ opacity:1; transform: translateY(0); }
/* ✅ 移动端点击切换 show-overlay（你 JS 已有） */
.section3 .pictures .parent > div.show-overlay a p{ opacity:1; transform: translateY(0); }

.section3 .pictures iframe{
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 50px rgba(0,0,0,0.48);
}

/* grid 位置保留 */
.section3 .pictures .div1 { grid-area: 4 / 1 / 6 / 3; }
.section3 .pictures .div2 { grid-area: 4 / 3 / 6 / 5; }
.section3 .pictures .div3 { grid-area: 4 / 5 / 6 / 7; }
.section3 .pictures .div4 { grid-area: 1 / 1 / 4 / 5; }
.section3 .pictures .div5 { grid-area: 1 / 5 / 4 / 7; }

/* footer 更像游戏官网底栏 */
.section3 footer{
  position:absolute;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:13px;
  color: rgba(255,255,255,0.86);
  bottom:0;
  padding:1rem 0;
  flex-wrap:wrap;
  gap:8px;
  text-align:center;

  background: linear-gradient(180deg, rgba(6,8,16,0.40), rgba(6,8,16,0.82));
  backdrop-filter: blur(14px) saturate(140%);
  border-top:1px solid rgba(255,255,255,0.10);
  box-shadow: 0 -14px 40px rgba(0,0,0,0.40);
}
.section3 footer a{ color: rgba(64,182,255,0.92); }
.section3 footer a:hover{ color: rgba(255,79,182,0.95); }

/* =========================================================
  ✅ 角落按钮（更像“HUD控制按钮”，不改功能）
========================================================= */
.corner-btn{
  position:fixed;
  left:10px;
  z-index:2147483647;
  width:42px;height:42px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px) saturate(160%);
  cursor:pointer;
  opacity:.42;
  transform: translateZ(0) scale(.98);
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
  overflow:visible;
}
.corner-btn:hover{
  opacity:.96;
  transform: translateZ(0) scale(1.08);
  box-shadow: 0 22px 56px rgba(0,0,0,0.42), 0 0 0 10px rgba(64,182,255,0.08);
}
#changeBgBtn{ bottom: calc(108px + env(safe-area-inset-bottom)); }
#changeBgBtn::before{ content:"🌀"; display:flex;align-items:center;justify-content:center;height:100%; position:relative; z-index:1; }
#toggleStyleBtn{ bottom: calc(58px + env(safe-area-inset-bottom)); }
#toggleStyleBtn::before{ content:"🎨"; display:flex;align-items:center;justify-content:center;height:100%; position:relative; z-index:1; }
#toggleThemeBtn{ bottom: calc(10px + env(safe-area-inset-bottom)); }
#toggleThemeBtn::before{ content:"✨"; display:flex;align-items:center;justify-content:center;height:100%; position:relative; z-index:1; }

/* =========================================================
  ✅ 右侧音乐按钮（更像“悬浮功能键”）
========================================================= */
.floating-btn-container{
  position:fixed;
  right:16px;
  top:50%;
  transform: translateY(-50%);
  z-index:2147483646;
  pointer-events:none;
}
.floating-btn{
  pointer-events:auto;
  width:54px;height:54px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(135deg, rgba(64,182,255,0.92), rgba(255,79,182,0.78));
  box-shadow: 0 22px 60px rgba(0,0,0,0.44), 0 0 0 10px rgba(255,255,255,0.04);
  color:#fff;
  font-size:19px;
  cursor:pointer;
  position:relative;
  overflow:visible;
  animation: floaty 3.2s ease-in-out infinite;
  transform: translateZ(0);
}
.floating-btn:hover{
  transform: translateZ(0) scale(1.06);
  box-shadow: 0 26px 72px rgba(0,0,0,0.52), 0 0 0 12px rgba(64,182,255,0.10);
}

/* =========================================================
  ✅ 播放器 overlay（保留原结构，调质感）
========================================================= */
.player-overlay{ position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; display: none;
  align-items: center; justify-content: center; padding: clamp(14px, 3vw, 28px);
  background: var(--mp-bg); backdrop-filter: blur(16px) saturate(140%);
  z-index: 2147483647; color: var(--mp-text);
}
.player-overlay.active{ display:flex !important; animation: overlay-fade-in .18s ease-out both; }
.player-overlay .player{ width: min(420px, 92vw); border-radius: 28px; background: linear-gradient(180deg, var(--mp-card), var(--mp-card2));
  border: 1px solid rgba(255,255,255,0.14); box-shadow: var(--mp-shadow);
  position: relative; overflow: hidden; padding: 22px 22px 18px; animation: modal-pop .26s var(--ease) both;
}
.player-overlay .close-btn{ position:absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); cursor:pointer; color: rgba(255,255,255,.92); font-size: 20px;
  display:flex; align-items:center; justify-content:center;
}
.player-overlay .album-art{ width: 212px; height: 212px; border-radius: 18px; margin: 12px auto 16px; overflow:hidden;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); box-shadow: 0 18px 46px rgba(0,0,0,.45);
}
.player-overlay .album-art img{ width:100%; height:100%; object-fit: cover; display:block; }
.player-overlay .song-info{ margin: 0 6px 10px; text-align:center; }
.player-overlay .song-title{ font-size: 20px; font-weight: 900; color: var(--mp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-overlay .song-artist{ margin-top: 4px; font-size: 14px; color: var(--mp-text-dim); }
.player-overlay .progress-container{ width: 100%; height: 9px; border-radius: 999px; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12); overflow:hidden; cursor: pointer; margin-top: 10px;
}
.player-overlay .progress-bar{ height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--sky), var(--mint), var(--pink)); }
.player-overlay .time-info{ display:flex; justify-content:space-between; font-size: 12px; color: var(--mp-text-dim); margin-top: 10px; }
.player-overlay .controls{ display:flex; align-items:center; justify-content:center; gap: 12px; margin-top: 16px; }
.player-overlay .control-btn{ width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); cursor:pointer; display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,.92);
}
.player-overlay .play-pause-btn{ width: 62px; height: 62px; border: none;
  background: linear-gradient(135deg, rgba(64,182,255,.92), rgba(255,79,182,.82)); font-size: 20px;
}
.player-overlay .bottom-row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-top: 14px; }
.player-overlay .random-btn{ padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); cursor:pointer;
}
.player-overlay .volume{ flex: 1 1 auto; display:flex; align-items:center; gap: 10px; min-width: 0; padding: 10px 12px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
}
.player-overlay input[type="range"].vol-slider{ flex: 1; min-width: 0; height: 6px; appearance: none; background: rgba(255,255,255,.14); border-radius: 999px; outline: none; }
.player-overlay input[type="range"].vol-slider::-webkit-slider-thumb{
  appearance:none; width: 18px; height: 18px; border-radius: 999px; background: linear-gradient(135deg, var(--sky), var(--pink));
  border: 2px solid rgba(255,255,255,.55); cursor: pointer;
}

/* =========================================================
  ✅ 移动端布局（保持原逻辑）
========================================================= */
@media (max-width:768px){
  :root{ --header-h:auto; }
  header{
    position:sticky;
    height:auto;
    padding:10px 12px;
    gap:10px;
    backdrop-filter: blur(16px) saturate(150%);
  }
  header .logo{ justify-content:center; width:100%; }
  header .logo h2{ font-size:17px; letter-spacing:1px; }
  header nav{ width:100%; justify-content:center; gap:8px 10px; }
  header nav a, .dropdown_main > a, .download-container > a{ font-size:13px; padding:8px 10px; }

  section{ height:auto; min-height:100vh; }
  .section1{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:16px 14px 20px;
    gap:18px;
    background-attachment:scroll;
  }
  .section2 .row{ flex-direction:column; padding:0 14px; gap:14px; }
  .section2 .row .box{ opacity:1; }
  .section3{ background-attachment:scroll; }
  .dropdown_xiala{ min-width:200px; right:0; left:auto; }
  .floating-btn-container{ right:12px; top:62%; }
  .floating-btn{ width:48px; height:48px; }
  .player-overlay .album-art{ width:176px; height:176px; }
  .player-overlay .player{ padding: 18px 18px 14px; }
}

/* =========================================================
  ✅ 额外质感 & 特效增强（不改结构/不改功能）
  - 更像“游戏官网”的 HUD / 霓虹描边 / 闪光 / 微粒
  - 性能友好：在 reduce-motion 下自动关闭
========================================================= */

/* 细噪点：让玻璃更“高级” */
body::marker{ content:""; }
body{
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* 轻量噪点层（不影响点击） */
body .ui-noise{ display:none; }
body::after{
  /* 在原有暗角基础上叠一点点噪点 */
  background:
    radial-gradient(1200px 740px at 50% 14%, rgba(0,0,0,0.12), rgba(0,0,0,0.70) 72%),
    linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.70)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03), rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px);
}

/* section2 卡片：HUD 霓虹边缘 + 旋转能量圈（hover 时更明显） */
.section2 .row .box{
  isolation:isolate;
}
.section2 .row .box::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--radius-xl) + 2px);
  background: conic-gradient(from 180deg,
    rgba(64,182,255,0.0), rgba(64,182,255,0.35), rgba(255,79,182,0.28), rgba(56,255,214,0.28), rgba(64,182,255,0.0));
  filter: blur(10px);
  opacity:.22;
  z-index:0;
  animation: neon-border 10s linear infinite;
  pointer-events:none;
}
.section2 .row .box:hover::after{ opacity:.42; }

/* hover 微粒闪光 */
.section2 .row .box .spark{
  display:none;
}
.section2 .row .box:hover::before{
  /* 在原 before 的基础上增加一点高光 */
  background:
    radial-gradient(260px 180px at 20% 10%, rgba(64,182,255,0.16), transparent 60%),
    radial-gradient(260px 180px at 80% 20%, rgba(255,79,182,0.14), transparent 60%),
    radial-gradient(120px 80px at 62% 18%, rgba(255,255,255,0.08), transparent 70%);
}

/* 主标题下的彩条：轻微呼吸 */
.section1 .left h1::after{
  animation: glow-pulse 5.6s ease-in-out infinite;
}

/* 公告卡：hover 更像游戏 UI 的“抬升” */
.section1 .right:hover{
  transform: translateY(-6px) scale(1.01);
  filter: saturate(1.08);
}

/* 让整体交互更“硬朗”：点击有按压 */
button:active,
header nav a:active,
.dropdown_xiala a:active,
.section2 .row .box:active{
  transform: translateY(0) scale(0.98) !important;
}



/* =========================================================
  ✅ Modal（Java 下载弹窗：更像游戏官网弹窗，不改结构/JS）
========================================================= */
#versionModal{
  animation: overlay-fade-in .18s ease-out both;
}
#versionModal .modal-content{
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(14,16,28,.96), rgba(8,10,18,.90));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 32px 96px rgba(0,0,0,.62), var(--panel-glow);
  backdrop-filter: blur(18px) saturate(150%);
  position: relative;
  overflow: hidden;
}
#versionModal .modal-content::before{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(90deg, rgba(64,182,255,0), rgba(64,182,255,.22), rgba(255,79,182,.18), rgba(64,182,255,0));
  opacity:.7;
  filter: blur(12px);
  pointer-events:none;
  animation: neon-border 12s linear infinite;
}
#versionModal .modal-header h2{
  color: rgba(255,255,255,.96);
  letter-spacing:.8px;
  text-shadow: 0 14px 36px rgba(0,0,0,.55);
}
#versionModal .close{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  width: 40px; height: 40px;
  display:flex; align-items:center; justify-content:center;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease);
}
#versionModal .close:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.40), 0 0 0 10px rgba(64,182,255,0.10);
}
#versionModal select, #versionModal button{
  border-radius: 16px !important;
}
#versionModal button{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
#versionModal button.download-btn{
  background: linear-gradient(135deg, rgba(64,182,255,.92), rgba(255,79,182,.78));
  border-color: rgba(255,255,255,.18);
}
#versionModal button:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 56px rgba(0,0,0,.36), 0 0 0 10px rgba(255,79,182,0.10);
}

/* reduce motion：关闭重动画，兼容无障碍 */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  body::before{ animation:none !important; }
}
/* =========================================================
  ✅ 2026 Optimized V2：更“游戏官网”/更二次元（高级质感覆盖层）
  - 基于 theme-2026-optimized.css 追加覆盖
  - 仅改视觉：不改结构/不改功能/不改JS
========================================================= */

/* ---------- 统一：更“日系UI”的字面质感 ---------- */
:root{
  --hud-cut: 14px;                 /* 切角尺寸 */
  --hud-bracket: rgba(255,255,255,.22);
  --hud-bracket-strong: rgba(255,255,255,.30);
  --hud-glow-sky: rgba(64,182,255,.16);
  --hud-glow-pink: rgba(255,79,182,.14);
  --hud-inner: rgba(0,0,0,.22);

  --launcher-stroke: rgba(255,255,255,.22);
  --launcher-stroke2: rgba(255,255,255,.14);
  --launcher-shell: rgba(255,255,255,.10);
  --launcher-shell2: rgba(255,255,255,.06);
  --launcher-inset: rgba(0,0,0,.24);
}

body{
  letter-spacing:.12px;
}

/* 背景：加轻量 HUD 斜线 + 星屑点阵（很淡，不抢内容） */
body::before{
  background:
    /* 斜向能量线 */
    repeating-linear-gradient(135deg,
      rgba(64,182,255,.07) 0px,
      rgba(64,182,255,.07) 1px,
      transparent 1px,
      transparent 16px),
    /* 星屑点阵 */
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.10) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 30%, rgba(255,255,255,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 74%, rgba(255,255,255,.08) 0 1px, transparent 2px),

    /* 原网格 + 柔光 */
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px),
    radial-gradient(900px 600px at 18% 10%, rgba(255,79,182,0.18), transparent 60%),
    radial-gradient(920px 680px at 88% 18%, rgba(140,123,255,0.16), transparent 60%),
    radial-gradient(980px 720px at 70% 92%, rgba(56,255,214,0.12), transparent 65%);
  background-size:
    26px 26px,
    auto, auto, auto,
    46px 46px,
    46px 46px,
    auto, auto, auto;
  mix-blend-mode: screen;
  opacity:.92;
}

/* ---------- HUD 切角：让主要 UI 更像“启动器/官网面板” ---------- */
/* 仅视觉裁切，不改变布局。clip-path 不支持则自动降级为圆角 */
@supports (clip-path: polygon(0 0)) {
  header,
  .hero-panel,
  .section1 .right,
  .section2 .row .box,
  .player-overlay .player,
  .modal-content{
    clip-path: polygon(
      var(--hud-cut) 0%,
      calc(100% - var(--hud-cut)) 0%,
      100% var(--hud-cut),
      100% calc(100% - var(--hud-cut)),
      calc(100% - var(--hud-cut)) 100%,
      var(--hud-cut) 100%,
      0% calc(100% - var(--hud-cut)),
      0% var(--hud-cut)
    );
  }
}

/* ---------- 四角角标：典型日系 HUD bracket ---------- */
.hero-panel,
.section1 .right,
.section2 .row .box,
.player-overlay .player,
.modal-content{
  position:relative;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow:
    0 26px 92px rgba(0,0,0,.56),
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* bracket 层：用 background 画四角线 + 内侧能量晕染 */
.hero-panel::before,
.section1 .right::before,
.section2 .row .box::before,
.player-overlay .player::before,
.modal-content::before{
  content:"";
  position:absolute;
  inset: 12px;
  pointer-events:none;
  border-radius: calc(var(--radius-xl) - 12px);

  background:
    /* 左上 */
    linear-gradient(var(--hud-bracket), var(--hud-bracket)) left top / 24px 1px no-repeat,
    linear-gradient(var(--hud-bracket), var(--hud-bracket)) left top / 1px 24px no-repeat,
    /* 右上 */
    linear-gradient(var(--hud-bracket), var(--hud-bracket)) right top / 24px 1px no-repeat,
    linear-gradient(var(--hud-bracket), var(--hud-bracket)) right top / 1px 24px no-repeat,
    /* 左下 */
    linear-gradient(var(--hud-bracket), var(--hud-bracket)) left bottom / 24px 1px no-repeat,
    linear-gradient(var(--hud-bracket), var(--hud-bracket)) left bottom / 1px 24px no-repeat,
    /* 右下 */
    linear-gradient(var(--hud-bracket), var(--hud-bracket)) right bottom / 24px 1px no-repeat,
    linear-gradient(var(--hud-bracket), var(--hud-bracket)) right bottom / 1px 24px no-repeat,

    radial-gradient(520px 260px at 18% 12%, var(--hud-glow-sky), transparent 62%),
    radial-gradient(520px 280px at 88% 18%, var(--hud-glow-pink), transparent 62%);
  opacity:.88;
  mix-blend-mode: screen;
}

/* ---------- 能量描边：更“高级”，不刺眼 ---------- */
@keyframes energy-halo {
  0%{ opacity:.20; filter: hue-rotate(0deg); transform: scale(1); }
  50%{ opacity:.34; filter: hue-rotate(110deg); transform: scale(1.01); }
  100%{ opacity:.20; filter: hue-rotate(360deg); transform: scale(1); }
}

.hero-panel::after,
.section1 .right::after,
.section2 .row .box::after,
.player-overlay .player::after,
.modal-content::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  border-radius: calc(var(--radius-xl) + 2px);
  background:
    conic-gradient(from 180deg,
      rgba(64,182,255,0.0),
      rgba(64,182,255,0.34),
      rgba(255,79,182,0.26),
      rgba(56,255,214,0.22),
      rgba(255,211,106,0.16),
      rgba(64,182,255,0.0));
  filter: blur(12px);
  opacity:.22;
  animation: energy-halo 10.5s linear infinite;
  z-index:0;
}

.hero-panel > *, .section1 .right > *, .section2 .row .box > *,
.player-overlay .player > *, .modal-content > *{
  position:relative;
  z-index:1;
}

/* ---------- Header：更像“游戏官网顶部导航条” ---------- */
header{
  border-bottom-color: rgba(255,255,255,.14) !important;
  background: linear-gradient(180deg, rgba(6,8,16,0.86), rgba(6,8,16,0.56)) !important;
}
header nav a, .dropdown_main > a, .download-container > a{
  font-weight: 900 !important;
  letter-spacing:.6px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) !important;
}

/* 顶部按钮：内圈机械描边 */
header nav a::after, .dropdown_main > a::after, .download-container > a::after{
  content:"";
  position:absolute;
  inset:2px;
  pointer-events:none;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.22);
  opacity:.45;
}

/* ---------- Section2 文字：修复深色正文导致发灰 ---------- */
.section2 .row .box p{
  color: rgba(255,255,255,.82) !important;
  text-shadow: 0 10px 22px rgba(0,0,0,.35) !important;
  font-weight: 600 !important;
}

/* ---------- “启动器按钮”质感：下载/确认/取消/CTA ---------- */
@keyframes sheen-lite{
  0%{ transform: translateX(-135%) skewX(-18deg); opacity:0; }
  18%{ opacity:.75; }
  60%{ opacity:.28; }
  100%{ transform: translateX(175%) skewX(-18deg); opacity:0; }
}

.section1 .left .group button,
.download-button,
#confirmDownload,
#cancelDownload{
  font-weight: 900 !important;
  letter-spacing:.7px !important;
  border: 1px solid var(--launcher-stroke) !important;
  background:
    linear-gradient(180deg, var(--launcher-shell), var(--launcher-shell2)) !important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -12px 26px var(--launcher-inset);
}

/* 主CTA：下载/确认下载 */
.section1 .left .group .download-btn,
.download-button,
#confirmDownload{
  border-color: rgba(64,182,255,.32) !important;
  background: linear-gradient(135deg, rgba(64,182,255,0.96), rgba(140,123,255,0.88)) !important;
  box-shadow:
    0 22px 62px rgba(0,0,0,.30),
    0 0 0 10px rgba(64,182,255,.10),
    0 0 44px rgba(64,182,255,.18),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -14px 30px rgba(0,0,0,.24);
}

/* 次CTA：QQ/次要行动 */
.section1 .left .group .qq-btn{
  border-color: rgba(255,79,182,.30) !important;
  background: linear-gradient(135deg, rgba(255,79,182,0.90), rgba(56,255,214,0.78)) !important;
  box-shadow:
    0 22px 62px rgba(0,0,0,.28),
    0 0 0 10px rgba(255,79,182,.10),
    0 0 44px rgba(255,79,182,.18),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -14px 30px rgba(0,0,0,.22);
}

/* 取消按钮更克制 */
#cancelDownload{
  border-color: rgba(255,255,255,.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important;
}

/* hover 扫光 */
.section1 .left .group button::after,
.download-button::after,
#confirmDownload::after,
#cancelDownload::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28), rgba(255,255,255,0));
  transform: translateX(-130%) skewX(-18deg);
  opacity:0;
}
.section1 .left .group button:hover::after,
.download-button:hover::after,
#confirmDownload:hover::after,
#cancelDownload:hover::after{
  opacity:.9;
  animation: sheen-lite .95s var(--ease) both;
}

/* ---------- Modal：更像游戏启动器弹窗 ---------- */
.modal-content{
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background:
    radial-gradient(620px 240px at 20% 10%, rgba(64,182,255,.16), transparent 60%),
    radial-gradient(620px 260px at 88% 18%, rgba(255,79,182,.12), transparent 62%),
    linear-gradient(180deg, rgba(12,14,26,.96), rgba(8,10,18,.90)) !important;
  box-shadow:
    0 30px 96px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.06) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
}

/* ---------- 强制隐藏：吉祥物相关（保留DOM/JS不动） ---------- */
/* ---------- reduce motion：关掉“呼吸能量边/扫光” ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-panel::after,
  .section1 .right::after,
  .section2 .row .box::after,
  .player-overlay .player::after,
  .modal-content::after,
  .section1 .left .group button:hover::after,
  .download-button:hover::after,
  #confirmDownload:hover::after,
  #cancelDownload:hover::after{
    animation:none !important;
  }
}


/* =========================================================
  ✅ FIX v3: 下拉面板不显示（header clip-path 裁切导致）
  - 仅修复视觉/交互：不改结构/不改 JS 逻辑
  - 说明：v2 对 header 加了 clip-path，会裁掉 header 外部的 dropdown 面板
========================================================= */

/* 1) header 禁用 clip-path，避免裁切下拉菜单 */
header{ clip-path: none !important; }

/* 2) 顶部按钮“内圈描边”不要占用 dropdown 的 ::after（它用于箭头） */
header nav a::after{ content: none !important; } /* 先清空（避免 v2 覆盖箭头） */

/* 仅给 nav 的直接子链接加“内圈机械描边”（不会影响 dropdown/download） */
header nav > a{
  position: relative;
  overflow: visible;
}
header nav > a::after{
  content:"";
  position:absolute;
  inset:2px;
  pointer-events:none;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.22);
  opacity:.45;
}

/* 3) 恢复 dropdown 箭头（确保可见） */
header nav .dropdown_main > a::after{
  content:"" !important;
  position:absolute !important;
  right:16px !important;
  top:50% !important;
  width:9px !important;
  height:9px !important;
  border-right:2px solid rgba(255,255,255,.92) !important;
  border-bottom:2px solid rgba(255,255,255,.92) !important;
  transform:translateY(-60%) rotate(45deg) !important;
  transition:transform .22s var(--ease), opacity .22s var(--ease) !important;
  opacity:.95 !important;
  pointer-events:none !important;
}

/* 4) 下拉面板提升层级 + 强制不被裁切 */
header nav .dropdown_xiala{
  z-index: 100000 !important;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,.55));
}

/* =========================================================
  ✅ FIX v4: 头部按钮被“固定高度”挤压/裁切（尤其在字体/缩放/不同系统下）
  - 仅修复样式：不改结构/不改功能/不改 JS
  - 思路：header 从“固定高度”改为“最小高度 + 自适应高度”
========================================================= */

header{
  /* 保留原来的视觉高度基准，但允许内容撑开 */
  height: auto !important;
  min-height: var(--header-h) !important;

  /* 给上下留一点 breathing room，避免按钮顶到边缘 */
  padding-top: 10px !important;
  padding-bottom: 10px !important;

  /* 确保下拉面板与按钮外发光不被裁切 */
  overflow: visible !important;
}

/* nav 项在不同字体渲染下更稳 */
header nav a,
.dropdown_main > a,
.download-container > a{
  line-height: 1.1 !important;
}

/* 顶部进度条贴底（header 高度变动后仍正确） */
.top-progress{
  bottom: 0 !important;
}

/* ✅ 恢复吉祥物三件套（不隐藏） */
#roleAssistant, #assistantBubble, #assistantHint{
  display: block;
  visibility: visible;
  pointer-events: auto;
}

/* 但保持原先的“气泡默认不显示”（由 JS 控制 show/hide） */
#assistantBubble, #assistantHint{
  display: none;
}

/* =========================================================
  ✅ FINAL FIXES (v6)
  - 修复：Header 高度/裁切导致的下拉显示异常
  - 修复：Section2 三卡片不显示（opacity:0/动画初始态）
  - 保留：吉祥物三件套显示（不再隐藏）
  - 仅改视觉：不改结构/不改功能
========================================================= */

/* 1) Header：允许内容溢出 + 高度自适应（避免移动端/字体变化裁切按钮） */
header{
  height: auto !important;
  min-height: var(--header-h) !important;
  overflow: visible !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
header nav{ overflow: visible !important; }
header nav a,
header nav .dropdown_main > a,
header nav .download-container > a{
  line-height: 1.1 !important;
}

/* 2) dropdown：面板固定不被裁切、并增强“点击后自动关闭”视觉状态 */
header nav .dropdown_main{ overflow: visible !important; }
header nav .dropdown_xiala{
  z-index: 100000 !important;
  pointer-events: auto !important;
}

/* 3) Section2：三卡默认可见；动画只在 .box-appear 时播放 */
.section2 .row .box,
.section2 .row .s-box{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}
.box-appear{ animation: pop .9s var(--ease) both !important; }

/* 4) 修复：某些旧样式把 section2 改成白底（来自 bg-random 注入/旧 styles） */
.section2{
  background: linear-gradient(180deg, rgba(8,10,18,0.68), rgba(8,10,18,0.40)) !important;
}

/* 5) 吉祥物：恢复显示（仅保证不被新主题误伤） */
#roleAssistant, #assistantBubble, #assistantHint{
  display: initial !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#assistantBubble, #assistantHint{ display:none !important; } /* 默认由你的 JS 控制显示 */

/* 6) 兼容：clip-path 对 header 禁用（避免裁切下拉） */
header{ clip-path: none !important; }



/* =========================================================
  ✅ Dropdown PRO OVERRIDE (Spring + Drawer + Hover safe)
  - 只覆盖 dropdown 相关：不影响其它功能
========================================================= */

/* 遮罩（移动端抽屉用） */
.dropdown-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  opacity: 0;
  transition: opacity .22s ease;
  z-index: 99990;
  pointer-events: none;
  transform: translateZ(0);
}
body.dropdown-drawer-open .dropdown-backdrop{
  opacity: 1;
  pointer-events: auto;
}

/* 容器 */
header nav .dropdown_main{ overflow: visible !important; }

/* 下拉面板：默认存在（不再 display:none），用 opacity/transform 控制 */
header nav .dropdown_xiala{
  display: block !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transform: translate3d(0,-14px,0) scale(.92) !important;
  transform-origin: 92% 0% !important;

  will-change: transform, opacity !important;
  transition:
    transform .45s cubic-bezier(.2,1.35,.3,1) !important,
    opacity .22s ease !important,
    visibility 0s linear .22s !important;

  contain: layout paint !important;
}

/* 打开：spring */
header nav .dropdown_main.active .dropdown_xiala{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  transform: translate3d(0,0,0) scale(1) !important;
  transition:
    transform .45s cubic-bezier(.2,1.35,.3,1) !important,
    opacity .18s ease !important,
    visibility 0s !important;
}

/* 子菜单 hover 高亮（更明显 + GPU） */
header nav .dropdown_xiala a{
  will-change: transform !important;
  transform: translateZ(0) !important;
}
header nav .dropdown_xiala a:hover{
  transform: translate3d(4px,-1px,0) !important;
  background: linear-gradient(135deg, rgba(64,182,255,.22), rgba(255,79,182,.16)) !important;
  border-color: rgba(255,255,255,.20) !important;
  box-shadow:
    0 14px 36px rgba(0,0,0,.46),
    0 0 0 4px rgba(64,182,255,.10) !important;
}

/* 移动端：抽屉（右侧滑出） */
@media (max-width:768px){
  header nav .dropdown_xiala{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;

    height: 100vh !important;
    width: min(320px, 86vw) !important;

    margin-top: 0 !important;
    border-radius: 0 !important;

    transform: translate3d(104%,0,0) !important;
    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    transition: transform .45s cubic-bezier(.2,1.35,.3,1) !important;
    box-shadow: -22px 0 88px rgba(0,0,0,.62) !important;
  }

  header nav .dropdown_main.active .dropdown_xiala{
    transform: translate3d(0,0,0) !important;
  }
}

/* 无障碍：减少动态时禁用 spring */
@media (prefers-reduced-motion: reduce){
  header nav .dropdown_xiala,
  header nav .dropdown_main.active .dropdown_xiala,
  header nav .dropdown_xiala a{
    transition: none !important;
  }
}

/* =========================================================
  ✅ Section2 三卡：半透白玻璃 + 进站缓慢依次出现（不靠滚动）
  - 默认(无 JS)：卡片正常显示（不会空白）
  - JS 可用(html.js)：先轻隐藏，进入页面后依次添加 .box-appear 渐入
========================================================= */

.section2 .row .box,
.section2 .row .s-box{
  padding: 1.6rem 1.5rem;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.32);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.12));
  box-shadow:
    0 18px 60px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.18);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  overflow: hidden;
  isolation: isolate;
  will-change: transform, filter, opacity;
}

/* 顶部柔光 */
.section2 .row .box::before,
.section2 .row .s-box::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 30% 0%, rgba(255,255,255,0.22), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.10), transparent 60%);
  opacity:.95;
  z-index:0;
}

/* 轻边缘高光（比霓虹更干净） */
.section2 .row .box::after,
.section2 .row .s-box::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: 28px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.16),
    inset 0 -40px 80px rgba(0,0,0,0.10);
  opacity:.9;
  z-index:0;
}

.section2 .row .box > *,
.section2 .row .s-box > *{ position: relative; z-index: 1; }

/* 图标：半透白底徽章 */
.section2 .row .box img,
.section2 .row .s-box img{
  width: 78px;
  height: 78px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 16px 44px rgba(0,0,0,0.22);
}

/* 标题：更清晰的蓝紫渐变字 */
.section2 .row .box h2,
.section2 .row .s-box h2{
  margin-top: 6px;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .6px;
  background: linear-gradient(90deg, #40b6ff, #8c7bff, #ff4fb6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(64,182,255,0.18);
}

/* 正文 */
.section2 .row .box p,
.section2 .row .s-box p{
  color: rgba(255,255,255,0.88);
  font-weight: 600;
  line-height: 1.75;
  text-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

/* hover：轻微抬升 */
.section2 .row .box:hover,
.section2 .row .s-box:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.40);
  box-shadow:
    0 22px 72px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

/* =========================================================
  ✅ 进站依次渐入（关键）
  默认：可见（避免 JS 异常空白）
  JS 可用(html.js)：初始态（淡出+下沉+轻微 blur），随后依次加 .box-appear
========================================================= */

html.js html.js .section2 .row .box.box-appear,
html.js .section2 .row .s-box.box-appear{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  html.js .section2 .row .box,
  html.js .section2 .row .s-box{
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* =========================================================
  ✅ Section2 三卡：更接近截图的“玻璃卡片” + 渐进入场
  - 默认(无 JS)：卡片正常显示（不会空白）
  - JS 可用时(html.js)：先轻隐藏，滚动进入后 .box-appear 触发渐入
========================================================= */

/* 视觉：卡片更“游戏 UI 玻璃” */
.section2 .row .box,
.section2 .row .s-box{
  padding: 1.55rem 1.45rem;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.16);
  background:
    radial-gradient(520px 240px at 18% 12%, rgba(64,182,255,0.16), transparent 60%),
    radial-gradient(520px 280px at 88% 18%, rgba(255,79,182,0.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.05));
  box-shadow:
    0 22px 64px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  overflow: hidden;
  isolation: isolate;
  will-change: transform, filter, opacity;
}

/* 顶部高光 */
.section2 .row .box::before,
.section2 .row .s-box::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(420px 160px at 30% 0%, rgba(64,182,255,0.18), transparent 62%);
  opacity:.9;
  z-index:0;
}

/* 霓虹能量边（轻一点，hover 更明显） */
.section2 .row .box::after,
.section2 .row .s-box::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 30px;
  pointer-events:none;
  background: conic-gradient(from 180deg,
    rgba(64,182,255,0.0),
    rgba(64,182,255,0.34),
    rgba(255,79,182,0.26),
    rgba(56,255,214,0.22),
    rgba(64,182,255,0.0));
  filter: blur(14px);
  opacity: .18;
  z-index:0;
  animation: neon-border 10s linear infinite;
}
.section2 .row .box:hover::after,
.section2 .row .s-box:hover::after{ opacity:.38; }

.section2 .row .box > *,
.section2 .row .s-box > *{ position: relative; z-index: 1; }

/* 图标：更像截图那种“圆角徽章底” */
.section2 .row .box img,
.section2 .row .s-box img{
  width: 78px;
  height: 78px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 46px rgba(0,0,0,0.52);
}

/* 标题：渐变字更亮一点 */
.section2 .row .box h2,
.section2 .row .s-box h2{
  margin-top: 6px;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .6px;
  background: linear-gradient(90deg, #40b6ff, #8c7bff, #ff4fb6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(64,182,255,0.20);
}

/* 正文 */
.section2 .row .box p,
.section2 .row .s-box p{
  color: rgba(255,255,255,0.86);
  font-weight: 600;
  line-height: 1.75;
  text-shadow: 0 10px 26px rgba(0,0,0,0.55);
}

/* hover：更“抬升” */
.section2 .row .box:hover,
.section2 .row .s-box:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.20);
  box-shadow:
    0 26px 74px rgba(0,0,0,0.50),
    0 0 0 10px rgba(64,182,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

/* =========================================================
  ✅ 渐进入场（关键）
  默认：可见（避免 JS 异常空白）
  JS 可用(html.js)：先进入“轻隐藏初始态”，滚动触发 box-appear 后渐入
========================================================= */

html.js html.js .section2 .row .box.box-appear,
html.js .section2 .row .s-box.box-appear{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  html.js .section2 .row .box,
  html.js .section2 .row .s-box{
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* =========================================================
  ✅ Section2 三卡：进站依次“弹出”动画（像 noticeCard） + 半透白背景
  - 不改结构/不改功能：仅覆盖 section2 三卡样式与入场动画
========================================================= */

/* 1) 默认（无 JS 也能看到卡片） */
.section2 .row .box,
.section2 .row .s-box{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;

  /* 半透白玻璃 */
  border: 1px solid rgba(255,255,255,0.34) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.12)) !important;
  box-shadow:
    0 18px 60px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border-radius: 28px !important;
  overflow: hidden;
  isolation: isolate;
  will-change: transform, filter, opacity;
}

/* 2) JS 可用时：先隐藏（只影响 section2），等待 JS 加 .box-appear */
html.js /* 3) pop/bounce 关键帧（更像弹窗弹出） */
@keyframes card-pop {
  0%{
    opacity: 0;
    transform: translateY(32px) scale(0.92);
    filter: blur(8px);
  }
  55%{
    opacity: 1;
    transform: translateY(-10px) scale(1.04);
    filter: blur(0);
  }
  75%{
    transform: translateY(4px) scale(0.995);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 4) JS 加 .box-appear 后：按 --d 延迟依次弹出 */
html.js .section2 .row .box.box-appear,
html.js .section2 .row .s-box.box-appear{
  animation: card-pop 1.25s var(--ease) both !important;
  animation-delay: var(--d, 0ms) !important;
}

/* 5) 尊重“减少动画” */
@media (prefers-reduced-motion: reduce){
  html.js .section2 .row .box,
  html.js .section2 .row .s-box{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* =========================================================
  ✅ Section2 进站弹出（修复“消失空白”）
  关键：默认不隐藏卡片；只有 JS 加了 .will-pop 才进入初始隐藏态
========================================================= */

/* 更像 noticeCard 的弹出动画（更明显的 overshoot + 回弹） */
@keyframes card-pop {
  0%{
    opacity: 0;
    transform: translateY(34px) scale(0.90);
    filter: blur(10px);
  }
  58%{
    opacity: 1;
    transform: translateY(-12px) scale(1.05);
    filter: blur(0);
  }
  78%{
    transform: translateY(5px) scale(0.995);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ✅ 只有 will-pop 才会“先隐藏” */
html.js .section2 .row .box.will-pop{
  opacity: 0;
  transform: translateY(34px) scale(0.90);
  filter: blur(10px);
}

/* ✅ will-pop + box-appear 才播放弹出，并用 --d 控制依次出现 */
html.js .section2 .row .box.will-pop.box-appear{
  animation: card-pop 1.25s var(--ease, cubic-bezier(.22,.9,.22,1)) both;
  animation-delay: var(--d, 0ms);
}

/* reduce motion：直接显示 */
@media (prefers-reduced-motion: reduce){
  html.js .section2 .row .box.will-pop{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* =========================================================
  ✅ 进入网站：整页渐入（不影响其它功能）
  - JS 可用时：html.page-entering 让页面先轻微隐藏
  - window.load 后切换为 html.page-entered，页面渐入完成
  - JS 失效时：不隐藏，避免空白
========================================================= */
html.page-entering body{
  opacity: 0;
  transform: translateY(10px) scale(0.995);
  filter: blur(2px);
}
html.page-entered body{
  opacity: 1;
  transform: none;
  filter: none;
}
html.page-entering body,
html.page-entered body{
  transition:
    opacity 900ms var(--ease2),
    transform 900ms var(--ease2),
    filter 900ms var(--ease2);
}

/* reduce motion：不做整页动画 */
@media (prefers-reduced-motion: reduce){
  html.page-entering body,
  html.page-entered body{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* =========================================================
  ✅ 兼容：如果元素只有 .box-appear（没有 will-pop），也播放弹出动画
  - 解决：你现在 DOM 里出现了 box-appear 但没加 will-pop，导致动画规则没命中
========================================================= */
html.js .section2 .row .box.box-appear,
html.js .section2 .row .s-box.box-appear{
  animation: card-pop 1.25s var(--ease2) both;
  animation-delay: var(--d, 0ms);
}

/* =========================================================
  ✅ Section2 三张卡：整张卡片“弹出”效果（更明显）
  说明：
  - 动画绑定在卡片容器 (.box/.s-box) 本身 => 整张卡一起弹
  - 使用 scale + translate + blur + overshoot
  - 保留你的其它样式/功能不变
========================================================= */

@keyframes card-pop-strong{
  0%{
    opacity: 0;
    transform: translateY(42px) scale(.86);
    filter: blur(10px);
  }
  60%{
    opacity: 1;
    transform: translateY(-14px) scale(1.06);
    filter: blur(0);
  }
  78%{
    transform: translateY(6px) scale(.992);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 默认：不隐藏，避免空白 */
.section2 .row .box,
.section2 .row .s-box{
  transform-origin: 50% 60%;
  backface-visibility: hidden;
}

/* 只要加了 box-appear => 整卡弹出（支持延迟变量 --d） */
html.js .section2 .row .box.box-appear,
html.js .section2 .row .s-box.box-appear{
  animation: card-pop-strong 1.35s var(--ease, cubic-bezier(.22,.9,.22,1)) both !important;
  animation-delay: var(--d, 0ms) !important;
}

/* 减少动画：直接显示 */
@media (prefers-reduced-motion: reduce){
  html.js .section2 .row .box.box-appear,
  html.js .section2 .row .s-box.box-appear{
    animation: none !important;
  }
}