/* ===== css/yinye.css ===== */
/* =========================================================
   🎧 Music Player Overlay (2D / Kawaii, dark-safe)
   放到 yinye.css：避免 index.html 内联过长
========================================================= */

/* 变量如果你 yinye.css 里没有，也可以只保留 player 需要的 */
:root{
  --ease: cubic-bezier(.2,.8,.2,1);
  --mp-bg: rgba(6, 6, 14, .80);
  --mp-card: rgba(14, 14, 28, .92);
  --mp-card2: rgba(18, 18, 40, .92);
  --mp-text: rgba(255,255,255,.92);
  --mp-text-dim: rgba(255,255,255,.70);
  --mp-shadow: 0 28px 70px rgba(0,0,0,.55);
  --mp-shadow-soft: 0 14px 34px rgba(0,0,0,.35);
}

/* 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(14px) saturate(130%);
  z-index: 2147483647;
  color: var(--mp-text);
}
.player-overlay.active{
  display: flex !important;
  animation: overlay-fade-in .18s ease-out both;
}
.player-overlay::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(255,122,182,.18), transparent 60%),
    radial-gradient(820px 520px at 86% 18%, rgba(124,200,255,.16), transparent 62%),
    radial-gradient(900px 620px at 66% 92%, rgba(118,246,216,.12), transparent 65%),
    radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(2px 2px at 42% 34%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(2px 2px at 78% 14%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(2px 2px at 88% 66%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(2px 2px at 22% 82%, rgba(255,255,255,.35), transparent 60%);
  opacity:.95;
  mix-blend-mode: screen;
}

/* card */
.player-overlay .player{
  width: min(420px, 92vw);
  border-radius: 26px;
  background: linear-gradient(180deg, var(--mp-card), var(--mp-card2));
  border: 3px solid rgba(255,255,255,0.22);
  box-shadow: var(--mp-shadow);
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  padding: 22px 22px 18px;
  animation: modal-pop .26s var(--ease) both;
}
.player-overlay .player::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,122,182,.70), rgba(124,200,255,.62), rgba(118,246,216,.50), rgba(183,156,255,.62));
  opacity:.55;
  filter: blur(10px);
  pointer-events:none;
}
.player-overlay .player::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 260px at 20% 0%, rgba(255,122,182,.16), transparent 60%),
    radial-gradient(540px 280px at 90% 12%, rgba(124,200,255,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 45%);
}
.player-overlay .player *{ position:relative; z-index:1; }

/* close */
.player-overlay .close-btn{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  box-shadow: var(--mp-shadow-soft);
  cursor:pointer;
  color: rgba(255,255,255,.92);
  font-size: 20px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.player-overlay .close-btn:hover{
  transform: translateY(-2px) rotate(10deg);
  background: rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

/* art */
.player-overlay .album-art{
  width: 210px;
  height: 210px;
  border-radius: 18px;
  margin: 12px auto 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 46px rgba(0,0,0,.35);
  position: relative;
}
.player-overlay .album-art::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(90px 90px at 18% 18%, rgba(255,122,182,.35), transparent 60%),
    radial-gradient(110px 110px at 88% 22%, rgba(124,200,255,.28), transparent 62%),
    radial-gradient(120px 120px at 50% 92%, rgba(118,246,216,.20), transparent 65%);
  opacity:.85;
  pointer-events:none;
}
.player-overlay .album-art img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .5s var(--ease), filter .5s var(--ease);
  filter: saturate(1.08) contrast(1.05);
  display:block;
}
.player-overlay .player.playing .album-art img{
  transform: scale(1.06) rotate(-.4deg);
}

/* loader */
.player-overlay .loader{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.42);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index:2;
}
.player-overlay .loader.active{ opacity:1; pointer-events:auto; }
.player-overlay .loader-circle{
  width: 42px;
  height: 42px;
  border: 3px solid rgba(255,255,255,.14);
  border-top-color: rgba(255,255,255,.92);
  border-radius: 50%;
  animation: mp-spin .8s linear infinite;
}

/* song */
.player-overlay .song-info{ margin: 0 6px 10px; text-align:center; }
.player-overlay .song-title{
  font-size: 20px;
  font-weight: 850;
  letter-spacing: .4px;
  color: var(--mp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 12px 26px rgba(0,0,0,.35);
}
.player-overlay .song-artist{
  margin-top: 4px;
  font-size: 14px;
  color: var(--mp-text-dim);
}

/* badge */
.player-overlay .badge-row{
  display:flex;
  justify-content:center;
  gap:8px;
  margin: 10px 0 10px;
}
.player-overlay .badge{
  font-size: 12px;
  color: rgba(255,255,255,.9);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.player-overlay .badge i{ font-style: normal; opacity: .92; }

/* progress */
.player-overlay .progress-container{
  width: 100%;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  overflow:hidden;
  cursor: pointer;
  position: relative;
  margin-top: 10px;
}
.player-overlay .progress-bar{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--sky), var(--mint));
  box-shadow: 0 0 0 6px rgba(255,122,182,.08);
}
.player-overlay .progress-container::after{
  content:"";
  position:absolute;
  top:50%;
  left: calc(var(--mp-handle, 0%) - 9px);
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(255,255,255,.35) 55%, rgba(255,255,255,0) 70%);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(0,0,0,.25), 0 0 0 4px rgba(124,200,255,.10);
  opacity: .95;
  pointer-events:none;
}

/* time */
.player-overlay .time-info{
  display:flex;
  justify-content:space-between;
  font-size: 12px;
  color: var(--mp-text-dim);
  margin-top: 10px;
}

/* ✅ controls：用 grid 让“视觉严格居中” */
.player-overlay .controls{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  margin-top: 16px;
}
.player-overlay .controls #previousButton{
  justify-self: end;
  margin-right: 12px;
}
.player-overlay .controls #playButton{
  justify-self: center;
}
.player-overlay .controls #nextButton{
  justify-self: start;
  margin-left: 12px;
}

.player-overlay .control-btn{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .22s var(--ease), background-color .22s var(--ease), box-shadow .22s var(--ease);
  color: rgba(255,255,255,.92);
  font-size: 18px;
  overflow:hidden;
  position:relative;
}
.player-overlay .control-btn:hover{
  transform: translateY(-2px) scale(1.05);
  background: rgba(255,255,255,.12);
  box-shadow: 0 22px 50px rgba(0,0,0,.30);
}
.player-overlay .control-btn:active{
  transform: translateY(0) scale(.98);
}

.player-overlay .play-pause-btn{
  width: 62px;
  height: 62px;
  border: none;
  background: linear-gradient(135deg, rgba(255,122,182,.96), rgba(124,200,255,.96));
  box-shadow: 0 22px 44px rgba(0,0,0,.28), 0 0 0 10px rgba(255,122,182,.08);
  font-size: 20px;
}

/* bottom row */
.player-overlay .bottom-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 14px;
}
.player-overlay .random-btn{
  flex:0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  box-shadow: 0 14px 28px rgba(0,0,0,.20);
}
.player-overlay .random-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.12);
  box-shadow: 0 18px 36px rgba(0,0,0,.25);
}
.player-overlay .random-btn.active{
  background: linear-gradient(135deg, rgba(183,156,255,.34), rgba(118,246,216,.18));
  border-color: rgba(183,156,255,.35);
}

/* volume */
.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,.16);
  background: rgba(255,255,255,.06);
}
.player-overlay .vol-icon{
  width: 18px;
  height: 18px;
  opacity: .9;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.9);
  font-size: 16px;
}
.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(--pink), var(--sky));
  border: 2px solid rgba(255,255,255,.65);
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
  cursor: pointer;
}
.player-overlay input[type="range"].vol-slider::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pink), var(--sky));
  border: 2px solid rgba(255,255,255,.65);
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
  cursor: pointer;
}

/* responsive */
@media (max-width:768px){
  .player-overlay .album-art{ width:176px; height:176px; }
  .player-overlay .player{ padding: 18px 18px 14px; }
}

/* keyframes 如果你原本就在 index 里定义，也可以保留那里；否则放到 yinye.css */
@keyframes overlay-fade-in { from{opacity:0} to{opacity:1} }
@keyframes modal-pop {
  0%   { opacity:0; transform: translateY(16px) scale(.92); filter: blur(2px); }
  55%  { opacity:1; transform: translateY(-2px) scale(1.02); filter: blur(0); }
  100% { opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes mp-spin{ to{ transform: rotate(360deg) } }


/* ===== Extra polish v3 (micro-interactions, safe) ===== */
.player-overlay .control-btn:focus-visible,
.player-overlay .random-btn:focus-visible,
.player-overlay .close-btn:focus-visible{
  outline: none;
  box-shadow: 0 22px 50px rgba(0,0,0,.35), 0 0 0 4px rgba(124,200,255,.22);
}

.player-overlay .control-btn::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:999px;
  background: radial-gradient(120px 80px at 35% 25%, rgba(255,255,255,.18), transparent 60%);
  opacity:0;
  transition: opacity .22s var(--ease);
  pointer-events:none;
}
.player-overlay .control-btn:hover::after{ opacity:1; }

.player-overlay .progress-container:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}
.player-overlay .progress-container{ transition: transform .18s var(--ease), box-shadow .18s var(--ease); }

@media (prefers-reduced-motion: reduce){
  .player-overlay.active{ animation:none !important; }
  .player-overlay .player{ animation:none !important; }
  .player-overlay *{ transition:none !important; }
}

/* ===== css/styles.css ===== */
/* =========================================================
   核心样式，设置页面通用样式
========================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  transition: all 0.2s;
  user-select: none;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body {
  overflow-x: hidden;
  animation: page-in 2s ease forwards;
}

/* =========================================================
   Header 样式
========================================================= */
header {
  position: fixed;
  z-index: 9999;
  top: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.47);
  backdrop-filter: blur(5px);
  height: 4.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 100px;
}

header .logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

header .logo img {
  width: 36px;
  height: 36px;
}

header .logo h2 {
  color: #e8e2e2;
  font-weight: normal;
  letter-spacing: 2px;
  font-size: 21px;
}

header nav {
  display: flex;
  gap: 3rem;
  padding-right: 2rem;
}

header nav a {
  font-size: 17px;
  color: #e8e2e2;
}

header a:hover {
  color: #fff;
}

header a:hover h2 {
  color: #fff;
}

/* =========================================================
   主要内容部分（section1）样式
========================================================= */
section {
  height: 100vh;
}

.section1 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-size: cover;
  background-attachment: fixed;
}

.section1 .left {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.section1 .left h1 {
  color: #fff;
  font-size: 2.4rem;
  text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);
  animation: left-h1 2s ease-out forwards;
  opacity: 0;
  animation-delay: 1s;
}
.section1 .left h1:hover {
  transform: scale(2.05);
  color: pink;
}

.section1 .left h3 {
  font-size: 17px;
  letter-spacing: 2px;
  animation: left-h3 2s ease-out forwards;
  opacity: 0;
  animation-delay: 0.8s;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ff6422), color-stop(0.15, #22ff26), color-stop(0.3, #ffdd00), color-stop(0.45, #008cff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
  background-image: gradient(linear, left top, right top, color-stop(0, #3fff22), color-stop(0.15, #22ff34), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.section1 .left p {
  margin-top: 1rem;
  max-width: 530px;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  line-height: 1.6;
  animation: left-p 2s ease-out forwards;
  opacity: 0;
  animation-delay: 1.2s;
}

.section1 .left table {
  margin-top: 1rem;
  color: #fff;
  backdrop-filter: blur(16px) saturate(180%);
  border-radius: 12px;
  width: 100%;
  border-collapse: collapse;
  position: relative;
  transition: transform 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  animation: left-table 2s ease-out forwards;
  opacity: 0;
  animation-delay: 1.6s;
}

.section1 .left table::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.15) 100%);
}

.section1 .left table th {
  background: rgba(255, 255, 255, 0.12);
  padding: 6px 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
}

.section1 .left table th::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
}

.section1 .left table td {
  background: rgba(0, 0, 0, 0.25);
  padding: 9px 11px;
  transition: all 0.25s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.section1 .left table td:hover {
  background: rgba(255, 255, 255, 0.15);
}

.section1 .left table td:nth-child(even) {
  background: rgba(0, 0, 0, 0.35);
}

.section1 .left table tr:last-child td {
  border-bottom: none;
}

.section1 .left table .inf-text {
  font-size: 15px;
}

.section1 .left table #copy {
  cursor: pointer;
}

.section1 .left .group {
  margin-top: 2rem;
  display: flex;
  gap: 1.5rem;
  animation: left-group 2s ease-out forwards;
  opacity: 0;
  animation-delay: 1.8s;
}

.section1 .left .group button {
  cursor: pointer;
  padding: 0.7rem 1.4rem;
  font-size: 17px;
  border: none;
}

.section1 .left .group button:hover {
  transform: scale(1.05);
}

.section1 .left .group button:active {
  transform: scale(0.93);
}

.section1 .left .group .download-btn {
  background: #1183e0;
  color: #fff;
  box-shadow: inset 3px 3px 0 #2195f3, inset -3px -3px 0 #0770c5;
}

.section1 .left .group .qq-btn {
  background: #1DB954;
  color: #fff;
  box-shadow: inset 3px 3px 0 #33de6f, inset -3px -3px 0 #0f933d;
}

.section1 .left .group .white-btn {
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.1);
  color: lightpink;
}

.section1 .right {
  cursor: pointer;
  padding: 2.7rem 2rem;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.42);
  background-color: rgba(253, 253, 253);
  max-width: 370px;
  white-space: wrap;
  animation: right_ 2s ease-out forwards;
  opacity: 0;
  animation-delay: 1.8s;
}

.section1 .right hr {
  margin: 0.3rem 0;
  width: 0;
}

.section1 .right h3 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "微软雅黑 Light", serif;
}

.section1 .right h3 img {
  width: 24px;
  height: 24px;
}

.section1 .right p {
  padding: 6px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.5;
  max-height: 280px;
  overflow-y: auto;
  color: #1E2022;
}

.section1 .right p a {
  color: #fb769c;
  text-decoration: underline;
}

.section1 .right p a:hover {
  color: royalblue;
}

.section1 .right:hover {
  transition: 0.3s ease-in-out;
  transform: scale(1.03);
  box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.2);
}

/* =========================================================
   Section2 样式
========================================================= */
.section2 {
  position: relative;
  display: flex;
  align-items: center;
  height: fit-content;
  padding: 2rem 0;
  background: #f5f5f5;
}

.section2 .row {
  width: 100%;
  padding: 0 10rem;
  display: flex;
  align-items: start;
  gap: 6rem;
}

.section2 .row .box {
  opacity: 0;
  cursor: pointer;
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.section2 .row .box img {
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
}

.section2 .row .box h2 {
  color: #333333;
  font-size: 20px;
  font-family: "微软雅黑", serif;
}

.section2 .row .box p {
  text-indent: 2rem;
  color: #333333;
  line-height: 1.6;
}

/* =========================================================
   Section3 样式
========================================================= */
.section3 {
  position: relative;
  background-size: cover;
  background-attachment: fixed;
  /* 第二部分背景图 */
  background-image: url('../img/127516912_p0.jpg');
}

.section3 .pictures {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 10rem;
}

.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;
}

.section3 .pictures .parent div {
  position: relative;
}

.section3 .pictures .parent div h2 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-family: "微软雅黑 Light", serif;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.section3 .pictures .parent div p {
  z-index: 100;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  padding: 1.5rem;
  text-indent: 2rem;
  color: #ffffff;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  font-size: 17px;
  line-height: 1.6;
  overflow: hidden;
  border: 2px solid #d5d5d5;
}

.section3 .pictures .parent div p:hover {
  transition: 0.25s ease-out;
  opacity: 1;
}

.section3 .pictures .parent div:active {
  transform: scale(0.95);
}

.section3 .pictures img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 8px;
  object-fit: cover;
}

.section3 .pictures iframe {
  width: 100%;
  height: 100%;
  border: 2px solid #d5d5d5;
}

.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;
}

.section3 footer {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #e8e2e2;
  bottom: 0;
  padding: 1rem 0;
}

.section3 footer a {
  font-size: 14px;
  color: #e8e2e2;
}

.section3 footer:hover {
  color: #fff;
}


/* ===== css/keyframes.css ===== */
@keyframes page-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes left-h1 {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes left-h3 {
    0% {
        opacity: 0;
        transform: translateX(-180px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes left-p {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes left-table {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes left-group {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes right_ {
    0% {
        opacity: 0;
        transform: translateX(200px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ===== css/java-modal.css ===== */
/* ======================================================
   Java 下载弹窗（2026 Game UI Pro）
   - 仅改样式：不改结构/不改 JS API（showModal/closeModal/downloadSelected）
   - 深色玻璃 + 霓虹描边 + 移动端底部抽屉
====================================================== */

:root{
  --jm-bg: rgba(6,8,16,.72);
  --jm-glass: rgba(14,16,28,.92);
  --jm-glass2: rgba(10,12,22,.86);
  --jm-stroke: rgba(255,255,255,.14);
  --jm-stroke2: rgba(255,255,255,.22);
  --jm-text: rgba(255,255,255,.92);
  --jm-text-dim: rgba(255,255,255,.72);
  --jm-sky: #40b6ff;
  --jm-pink: #ff4fb6;
  --jm-lav: #8c7bff;
  --jm-mint: #38ffd6;
  --jm-shadow: 0 32px 96px rgba(0,0,0,.62);
  --jm-ease: cubic-bezier(.22,.9,.22,1);
}

/* 遮罩 */
#versionModal.modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;

  padding:
    calc(16px + env(safe-area-inset-top))
    calc(14px + env(safe-area-inset-right))
    calc(16px + env(safe-area-inset-bottom))
    calc(14px + env(safe-area-inset-left));

  background:
    radial-gradient(1200px 740px at 50% 14%, rgba(0,0,0,.10), rgba(0,0,0,.72) 70%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.70));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

#versionModal.modal.is-open{ display:flex; }

@keyframes jmOverlayIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes jmPop{
  0%{ opacity:0; transform: translateY(18px) scale(.96); filter: blur(2px); }
  60%{ opacity:1; transform: translateY(-2px) scale(1.01); filter: blur(0); }
  100%{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}

#versionModal.modal.is-open{ animation: jmOverlayIn .16s ease-out both; }

/* 面板 */
#versionModal .modal-content{
  width: min(560px, 94vw);
  max-height: calc(100vh - 160px);
  overflow: auto;

  border-radius: 26px;
  padding: 18px 18px 16px;
  position: relative;

  color: var(--jm-text);

  background:
    radial-gradient(620px 260px at 18% 12%, rgba(64,182,255,.16), transparent 62%),
    radial-gradient(620px 280px at 88% 18%, rgba(255,79,182,.12), transparent 62%),
    linear-gradient(180deg, var(--jm-glass), var(--jm-glass2));

  border: 1px solid var(--jm-stroke);
  box-shadow: var(--jm-shadow);

  animation: jmPop .28s var(--jm-ease) both;
  transform: translateZ(0);
  contain: layout paint;
}

/* 能量描边 */
#versionModal .modal-content::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 28px;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(64,182,255,0), rgba(64,182,255,.22), rgba(255,79,182,.18), rgba(64,182,255,0));
  filter: blur(12px);
  opacity:.65;
}
#versionModal .modal-content::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 20px;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) left top / 26px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) left top / 1px 26px no-repeat,
    linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) right top / 26px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) right top / 1px 26px no-repeat,
    linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) left bottom / 26px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) left bottom / 1px 26px no-repeat,
    linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) right bottom / 26px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) right bottom / 1px 26px no-repeat;
  opacity:.55;
  mix-blend-mode: screen;
}

/* header */
#versionModal .modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

#versionModal .modal-header h2{
  margin:0;
  font-size: 18px;
  letter-spacing: .7px;
  font-weight: 900;
  color: var(--jm-text);
  text-shadow: 0 14px 36px rgba(0,0,0,.55);
}

/* close */
#versionModal .close{
  position: static;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;

  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);

  transition: transform .18s var(--jm-ease), box-shadow .18s var(--jm-ease), background-color .18s var(--jm-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);
  background: rgba(255,255,255,.08);
}
#versionModal .close:active{ transform: translateY(0) scale(.98); }

/* body */
#versionModal .modal-body{ padding: 16px 0 10px; }

#versionModal .modal-body .field{
  display:flex;
  flex-direction:column;
  gap: 10px;
  position: relative;
}

#versionModal .modal-body label{
  font-size: 13px;
  color: var(--jm-text-dim);
  letter-spacing: .4px;
}

/* 小提示（不改HTML，用伪元素补） */
#versionModal .modal-body .field::after{
  content:"提示：选择版本后点击「确认下载」，推荐与整合包要求一致。";
  display:block;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}


/* select wrap：自定义箭头（原生 select 展开列表样式受系统限制） */
#versionModal .select-wrap{
  position: relative;
}
#versionModal .select-wrap::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:9px;
  height:9px;
  border-right:2px solid rgba(255,255,255,.88);
  border-bottom:2px solid rgba(255,255,255,.88);
  transform: translateY(-60%) rotate(45deg);
  pointer-events:none;
  opacity:.95;
}
#versionModal .select-wrap::before{
  content:"";
  position:absolute;
  right:42px;
  top:50%;
  width:1px;
  height:18px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.10);
  pointer-events:none;
}

/* select */
#versionModal .modal-body select{
  width: 100%;
  height: 46px;
  padding: 0 44px 0 14px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);

  color: rgba(255,255,255,.92);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));

  box-shadow:
    0 14px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12);

  outline: none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  cursor: pointer;

  /* 尝试影响系统弹层配色（支持与否取决于浏览器） */
  color-scheme: dark;

  transition:
    box-shadow .18s var(--jm-ease),
    border-color .18s var(--jm-ease),
    transform .18s var(--jm-ease),
    background-color .18s var(--jm-ease),
    filter .18s var(--jm-ease);
}

#versionModal .modal-body select:focus{
  border-color: rgba(64,182,255,.38);
  box-shadow: 0 0 0 4px rgba(64,182,255,.18), 0 0 0 8px rgba(255,79,182,.12);
  background: rgba(255,255,255,.08);
}

/* footer */
#versionModal .modal-footer{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  margin-top: 0;
}

#versionModal .modal-footer button{
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  user-select:none;
  margin-left: 0;

  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);

  transition: transform .18s var(--jm-ease), box-shadow .18s var(--jm-ease), background-color .18s var(--jm-ease), border-color .18s var(--jm-ease);
}

#versionModal .modal-footer button:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
  background: rgba(255,255,255,.08);
}

#versionModal .modal-footer button:active{ transform: translateY(0) scale(.99); }

#versionModal .modal-footer .download-btn{
  border-color: rgba(64,182,255,.24);
  background: linear-gradient(135deg, rgba(64,182,255,.96), rgba(255,79,182,.78));
  box-shadow:
    0 20px 56px rgba(0,0,0,.34),
    0 0 0 10px rgba(64,182,255,.10),
    inset 0 1px 0 rgba(255,255,255,.22);
}

#versionModal .modal-footer .download-btn:hover{
  box-shadow:
    0 26px 72px rgba(0,0,0,.44),
    0 0 0 12px rgba(255,79,182,.12),
    inset 0 1px 0 rgba(255,255,255,.26);
}

/* body 锁滚动（由 JS 加 .modal-open） */
body.modal-open{
  overflow: hidden !important;
  touch-action: none;
}

/* 移动端：底部抽屉 */
@media (max-width: 768px){
  #versionModal.modal{
    align-items: flex-end;
    padding: 0;
  }

  #versionModal .modal-content{
    width: 100vw;
    max-height: calc(100vh - 12vh);
    border-radius: 26px 26px 0 0;
    padding: 16px 14px 14px;
    animation: jmPop .26s var(--jm-ease) both;
  }
}

/* 无动画 */
@media (prefers-reduced-motion: reduce){
  #versionModal.modal.is-open{ animation:none !important; }
  #versionModal .modal-content{ animation:none !important; }
  #versionModal .modal-footer button,
  #versionModal .close,
  #versionModal .modal-body select{ transition:none !important; }
}

#versionModal .modal-body select:hover{
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 18px 52px rgba(0,0,0,.42),
    0 0 0 8px rgba(64,182,255,.10),
    inset 0 1px 0 rgba(255,255,255,.14);
  filter: saturate(1.06);
}

/* 选项列表（best-effort：Windows/Chrome 展开列表多数由系统控制） */
#versionModal .modal-body select option{
  background: #0e1020;
  color: rgba(255,255,255,.92);
}

/* ===== css/theme-2026.css ===== */
/* =========================================================
  ✅ 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('../img/127516912_p0.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;
  }
}

/* ===== css/simple-mode.css ===== */
/* =========================================================
  简洁模式（完整）
  - 目标：一键“清爽阅读”
  - 隐藏：装饰、头部、樱花、左侧 hero
  - 保留：左下角按钮、画廊区可点击跳转
  - 移动端：公告区也隐藏
  - 关键修复：section2 三张卡在移动端简洁模式下不再向上补位
========================================================= */

body.style-off *{
  animation: none !important;
  transition: none !important;
}

body.style-off{
  --header-h: 0px;
}

/* 隐藏头部 */
body.style-off header{
  display: none !important;
}

/* 隐藏背景装饰层 */
body.style-off::before{
  display: none !important;
}
body.style-off::after{
  display: none !important;
}

/* 隐藏樱花 */
body.style-off #canvas_sakura{
  display: none !important;
}

/* 默认禁用链接点击 */
body.style-off a,
body.style-off a *{
  pointer-events: none !important;
}

/* 放行：左下角按钮 */
body.style-off #toggleStyleBtn,
body.style-off #changeBgBtn,
body.style-off #toggleThemeBtn{
  pointer-events: auto !important;
}

/* 放行：画廊区域链接 */
body.style-off .section3 .pictures .parent a,
body.style-off .section3 .pictures .parent a *{
  pointer-events: auto !important;
}

/* 隐藏左侧 hero */
body.style-off .section1 .left,
body.style-off .section1 .left.hero-panel{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 不在全局强行隐藏 section2
   因为 enhance-core.js 会保留三张卡显示 */
body.style-off .section2,
body.style-off #features{
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* =========================================================
   移动端简洁模式
   - 公告隐藏
   - 保留 section1 原有占位，避免 section2 三卡往上顶
========================================================= */
@media (max-width: 768px){

  /* 右侧公告隐藏 */
  body.style-off .section1 .right,
  body.style-off .section1 .right > div,
  body.style-off .section1 .right .notice,
  body.style-off .section1 .right .rule,
  body.style-off .section1 .right .card,
  body.style-off .section1 .right .box,
  body.style-off .section1 .right .contact{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 关键修复：
     不压缩 section1 的高度，不让 section2 顶上来
     只把 section1 变成透明占位层 */
  body.style-off .section1{
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    /* 保持原本首屏占位 */
    height: auto !important;
    min-height: calc(var(--mobile-vh, 1vh) * 100 - 90px) !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    margin: 0 !important;
    overflow: hidden !important;

    /* 视觉上不显示 */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.style-off .section1::before,
  body.style-off .section1::after{
    display: none !important;
    content: none !important;
  }

  /* section1 里的所有块都不可见，但占位由 section1 自己保留 */
  body.style-off .section1 > *{
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 三张卡保留原位置，不额外往上拉 */
  body.style-off .section2,
  body.style-off #features{
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: auto !important;
  }

  body.style-off .section2 .row{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.style-off .section2 .row .box,
  body.style-off .section2 .row .s-box{
    transform: none !important;
  }
}

/* 系统减少动态 */
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  body::before{
    animation: none !important;
  }
}

/* ===== css/mobile-adapt.css ===== */
/* =========================================================
   Mobile Adapt - Clean Fixed
   仅作用于移动端，不改 PC 端样式
========================================================= */

:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --mobile-vh: 1vh;

  --m-border: 1px solid rgba(255,255,255,.10);
  --m-shadow: 0 14px 34px rgba(0,0,0,.28);
  --m-bg-1: linear-gradient(180deg, rgba(10,12,24,.95), rgba(15,18,37,.85));
  --m-bg-2: linear-gradient(180deg, rgba(18,20,34,.90), rgba(11,13,25,.82));
  --m-bg-3: linear-gradient(180deg, rgba(34,25,58,.52), rgba(14,18,35,.84));
  --m-btn-bg: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  --m-btn-active: linear-gradient(135deg, rgba(127,72,191,.92), rgba(188,76,155,.82));
}

#mobileNavToggle{
  display:none;
}

/* 默认先隐藏移动端动态菜单，防止桌面端闪出 */
.mobile-ios-nav-shell,
#mobileNavToggle{
  display:none !important;
}

@media (max-width: 900px){
  .section1,
  .section2,
  .section3,
  .section3 .pictures,
  footer{
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box;
  }

  .section1 .left,
  .section1 .right,
  .section2 .row .box,
  .section2 .row .s-box,
  .section3 .pictures > *,
  header nav > *{
    min-width:0;
    box-sizing:border-box;
  }
}

@media (max-width: 768px){
  html.mobile-ios-nav-ready #mobileNavToggle{
    display:inline-flex !important;
  }

  html.mobile-ios-nav-ready .mobile-ios-nav-shell{
    display:block !important;
  }

  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    min-height:calc(var(--mobile-vh, 1vh) * 100);
    -webkit-text-size-adjust:100%;
  }

  img,
  video,
  iframe,
  canvas,
  svg{
    max-width:100%;
    height:auto;
  }

  body::before,
  body::after,
  .section1,
  .section3{
    background-attachment:scroll !important;
  }

  body :where(h1,h2,h3,p,a,span,td,th,button){
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* 关键修复：手机端不要依赖动画来显示内容 */
  .section1 .left h1,
  .section1 .left h3,
  .section1 .left p,
  .section1 .left table,
  .section1 .left .group,
  .section1 .right,
  .section2 .row .box,
  .section2 .row .s-box,
  .section3 .pictures > *{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    animation:none !important;
    transition-property:color, background-color, box-shadow, border-color, opacity, transform !important;
  }

  /* ---------- Header ---------- */
  header{
    position:sticky !important;
    top:0;
    z-index:10030 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px 12px !important;
    width:100%;
    min-height:auto !important;
    height:auto !important;
    padding:
      max(10px, var(--safe-top))
      max(12px, var(--safe-right))
      12px
      max(12px, var(--safe-left)) !important;
    border-bottom-left-radius:18px;
    border-bottom-right-radius:18px;
    background:var(--m-bg-1) !important;
    backdrop-filter:blur(16px) saturate(145%);
    -webkit-backdrop-filter:blur(16px) saturate(145%);
    box-shadow:0 10px 30px rgba(0,0,0,.22);
  }

  header .logo{
    grid-column:1 / 2 !important;
    width:100%;
    min-height:44px;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px;
    padding:0 !important;
    margin:0;
    min-width:0;
    text-align:left;
  }

  header .logo img{
    width:34px !important;
    height:34px !important;
    flex:0 0 34px;
  }

  header .logo h2{
    margin:0;
    font-size:16px !important;
    line-height:1.2;
    text-align:left !important;
  }

  header nav{
    display:none !important;
  }

  /* ---------- Toggle ---------- */
  #mobileNavToggle{
    grid-column:2 / 3;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    padding:0;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) !important;
    box-shadow:0 16px 40px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.14);
    color:rgba(255,255,255,.96) !important;
    outline:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    position:relative;
    z-index:3;
  }

  /* 兼容当前 JS：mobile-nav-toggle__box + 3个 i */
  #mobileNavToggle .mobile-nav-toggle__box{
    position:relative;
    width:18px;
    height:14px;
    display:block;
  }

  #mobileNavToggle .mobile-nav-toggle__box i{
    position:absolute;
    left:0;
    width:100%;
    height:2.2px;
    border-radius:999px;
    background:currentColor;
    display:block;
    transform-origin:center;
    transition:
      transform .32s cubic-bezier(.22,.9,.22,1),
      opacity .22s ease,
      top .32s cubic-bezier(.22,.9,.22,1);
  }

  #mobileNavToggle .mobile-nav-toggle__box i:nth-child(1){ top:0; }
  #mobileNavToggle .mobile-nav-toggle__box i:nth-child(2){ top:5.9px; }
  #mobileNavToggle .mobile-nav-toggle__box i:nth-child(3){ top:11.8px; }

  body.mobile-ios-nav-open #mobileNavToggle .mobile-nav-toggle__box i:nth-child(1){
    top:5.9px;
    transform:rotate(45deg);
  }

  body.mobile-ios-nav-open #mobileNavToggle .mobile-nav-toggle__box i:nth-child(2){
    opacity:0;
  }

  body.mobile-ios-nav-open #mobileNavToggle .mobile-nav-toggle__box i:nth-child(3){
    top:5.9px;
    transform:rotate(-45deg);
  }

  /* 兼容旧结构：mobile-nav-toggle__lines */
  #mobileNavToggle .mobile-nav-toggle__lines{
    position:relative;
    width:18px;
    height:14px;
    display:block;
  }

  #mobileNavToggle .mobile-nav-toggle__lines::before,
  #mobileNavToggle .mobile-nav-toggle__lines::after,
  #mobileNavToggle .mobile-nav-toggle__lines span{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:2.2px;
    border-radius:999px;
    background:currentColor;
    transform-origin:center;
    transition:
      transform .32s cubic-bezier(.22,.9,.22,1),
      opacity .22s ease,
      top .32s cubic-bezier(.22,.9,.22,1);
  }

  #mobileNavToggle .mobile-nav-toggle__lines::before{ top:0; }
  #mobileNavToggle .mobile-nav-toggle__lines span{ top:5.9px; }
  #mobileNavToggle .mobile-nav-toggle__lines::after{ top:11.8px; }

  body.mobile-ios-nav-open #mobileNavToggle .mobile-nav-toggle__lines::before{
    top:5.9px;
    transform:rotate(45deg);
  }

  body.mobile-ios-nav-open #mobileNavToggle .mobile-nav-toggle__lines span{
    opacity:0;
  }

  body.mobile-ios-nav-open #mobileNavToggle .mobile-nav-toggle__lines::after{
    top:5.9px;
    transform:rotate(-45deg);
  }

  /* ---------- Mobile nav ---------- */
  .mobile-ios-nav-shell{
    grid-column:1 / -1;
    width:100%;
    max-height:0;
    opacity:0;
    overflow:hidden;
    pointer-events:none;
    transform:translateY(-10px) scale(.985);
    transition:
      max-height .42s cubic-bezier(.22,.9,.22,1),
      opacity .28s ease,
      transform .42s cubic-bezier(.22,.9,.22,1);
  }

  body.mobile-ios-nav-open .mobile-ios-nav-shell{
    max-height:520px;
    opacity:1;
    pointer-events:auto;
    overflow:visible;
    transform:translateY(0) scale(1);
  }

  .mobile-ios-nav-stage{
    margin-top:6px;
    padding:12px;
    border-radius:22px;
    background:linear-gradient(180deg, rgba(10,16,34,.92), rgba(8,12,26,.88));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 24px 58px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10);
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    position:relative;
    isolation:isolate;
  }

  .mobile-ios-nav-stage::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:
      radial-gradient(80% 80% at 0% 0%, rgba(87,161,255,.16), transparent 60%),
      radial-gradient(65% 75% at 100% 0%, rgba(255,105,180,.14), transparent 64%);
    opacity:.95;
  }

  .mobile-ios-nav-grid,
  .mobile-ios-server-panel{
    position:relative;
    z-index:1;
  }

  .mobile-ios-nav-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    align-items:start;
  }

  .mobile-ios-nav-item{
    min-width:0;
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 14px;
    border-radius:16px;
    text-decoration:none !important;
    color:rgba(255,255,255,.96) !important;
    font-size:14px !important;
    font-weight:700;
    line-height:1.1;
    text-align:center;
    white-space:nowrap;
    border:1px solid rgba(255,255,255,.11);
    background:var(--m-btn-bg);
    box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  .mobile-ios-nav-label{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mobile-ios-server-trigger{
    justify-content:space-between;
    background:var(--m-btn-active);
    border-color:rgba(255,255,255,.16);
  }

  .mobile-ios-nav-caret{
    width:8px;
    height:8px;
    border-right:2px solid rgba(255,255,255,.96);
    border-bottom:2px solid rgba(255,255,255,.96);
    transform:rotate(45deg);
    transition:transform .28s ease;
    flex:0 0 auto;
  }

  body.mobile-ios-server-open .mobile-ios-nav-caret{
    transform:rotate(-135deg);
  }

  .mobile-ios-server-panel{
    width:100%;
    display:none;
    border-radius:18px;
    padding:12px;
    background:linear-gradient(180deg, rgba(14,22,44,.98), rgba(10,17,34,.94));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 18px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
    overflow:hidden;
  }

  body.mobile-ios-server-open .mobile-ios-server-panel{
    display:block;
    animation:mobileServerPanelIn .24s ease;
  }

  @keyframes mobileServerPanelIn{
    from{ opacity:0; transform:translateY(-8px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .mobile-ios-server-panel__head{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding-bottom:8px;
  }

  .mobile-ios-server-panel__head strong{
    color:#fff;
    font-size:14px;
    line-height:1.2;
  }

  .mobile-ios-server-panel__head span{
    color:rgba(255,255,255,.62);
    font-size:11px;
    line-height:1.35;
  }

  .mobile-ios-server-list{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    max-height:260px;
    overflow:auto;
    padding-right:2px;
  }

  .mobile-ios-server-item{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px;
    border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.08);
    color:#fff !important;
    text-decoration:none !important;
    text-align:left;
  }

  .mobile-ios-server-item__main{
    min-width:0;
    display:grid;
    gap:4px;
  }

  .mobile-ios-server-item__main strong{
    font-size:13px;
    line-height:1.2;
    color:#fff;
  }

  .mobile-ios-server-item__main small{
    font-size:11px;
    line-height:1.25;
    color:rgba(255,255,255,.58);
  }

  .mobile-ios-server-item__arrow{
    flex:0 0 auto;
    font-size:16px;
    opacity:.88;
  }

  /* ---------- Main content ---------- */
  .top-progress{
    margin-top:2px;
  }

  .section1{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    align-items:start !important;
    height:auto !important;
    min-height:calc(var(--mobile-vh, 1vh) * 100 - 90px);
    padding-top:18px !important;
    padding-bottom:18px !important;
  }

  .section1 .left,
  .section1 .right{
    width:100% !important;
    margin:0 !important;
  }

  .section1 .left{
    padding:18px 14px !important;
    border-radius:22px !important;
    background:var(--m-bg-3) !important;
    border:var(--m-border) !important;
    box-shadow:var(--m-shadow) !important;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  .section1 h1{
    font-size:clamp(26px, 7vw, 38px) !important;
    line-height:1.08 !important;
    margin-bottom:14px !important;
  }

  .section1 h3{
    font-size:clamp(18px, 4.8vw, 24px) !important;
    line-height:1.35 !important;
    margin-bottom:14px !important;
  }

  .section1 p{
    font-size:14px !important;
    line-height:1.9 !important;
  }

  .section1 table{
    display:block;
    width:100% !important;
    margin-top:18px !important;
    overflow-x:auto;
    border-radius:16px;
    background:linear-gradient(180deg, rgba(14,18,36,.88), rgba(9,11,23,.76));
    border:1px solid rgba(255,255,255,.08);
  }

  .section1 table td,
  .section1 table th{
    white-space:nowrap;
    font-size:14px !important;
    padding:12px 10px !important;
  }

  .section1 .group{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin-top:18px !important;
  }

  .section1 .group a,
  .section1 .group button,
  .section1 .right .contact a,
  .section1 .right .contact button{
    width:100% !important;
    min-height:54px !important;
    padding:14px 16px !important;
    border-radius:999px !important;
    font-size:15px !important;
    line-height:1.2 !important;
  }

  .section1 .right,
  .section1 .right > div,
  .section1 .right .contact,
  .section1 .right .notice,
  .section1 .right .rule,
  .section1 .right .card,
  .section1 .right .box{
    width:100% !important;
    border-radius:18px !important;
    box-sizing:border-box;
  }

  .section1 .right > div,
  .section1 .right .notice,
  .section1 .right .rule,
  .section1 .right .card,
  .section1 .right .box{
    padding:16px 14px !important;
    background:var(--m-bg-2) !important;
    border:var(--m-border) !important;
    box-shadow:var(--m-shadow) !important;
  }

  .section2,
  .section3{
    height:auto !important;
  }

  .section2 .row,
  .section3 .pictures,
  .section3 .picture-list,
  .section3 .img_list,
  .section3 .video_list{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .section2 .row .box,
  .section2 .row .s-box,
  .section3 .pictures > *,
  .section3 .img_list > *,
  .section3 .video_list > *{
    width:100% !important;
    margin:0 !important;
    border-radius:18px !important;
    overflow:hidden;
  }

  .section3 iframe,
  .section3 video,
  .section3 img{
    width:100% !important;
    border-radius:16px !important;
  }

  .modal,
  .modal-content,
  .player-overlay,
  .player-overlay .player,
  .java-modal,
  .java-modal .modal-content{
    max-width:100%;
    box-sizing:border-box;
  }

  .modal-content,
  .player-overlay .player,
  .java-modal .modal-content{
    width:min(calc(100vw - 20px), 520px) !important;
    margin:0 auto !important;
    border-radius:18px !important;
  }

  .player-overlay .player,
  .modal-content{
    max-height:calc(var(--mobile-vh, 1vh) * 84);
  }

  /* ---------- 移动端公告关闭按钮 ---------- */
  .notice-close-btn{
    display:none !important;
  }

  #noticeCard{
    position:relative !important;
  }

  #noticeCard .notice-close-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:10px;
    right:10px;
    width:34px;
    height:34px;
    padding:0;
    margin:0;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    background:linear-gradient(180deg, rgba(14,18,36,.78), rgba(8,10,20,.62));
    color:#fff;
    font-size:22px;
    line-height:1;
    font-weight:500;
    cursor:pointer;
    z-index:50;
    box-shadow:0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    pointer-events:auto !important;
  }

  #noticeCard .notice-close-btn:active{
    transform:scale(.96);
  }

  #noticeCard.notice-card-hidden{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}

@media (max-width: 480px){
  header{
    padding-left:max(10px, var(--safe-left)) !important;
    padding-right:max(10px, var(--safe-right)) !important;
  }

  .section1,
  .section2,
  .section3,
  footer{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .section1 .left,
  .section1 .right > div,
  .section1 .right .notice,
  .section1 .right .rule,
  .section1 .right .card,
  .section1 .right .box{
    padding:14px 12px !important;
  }

  .section1 h1{ font-size:clamp(22px, 8vw, 32px) !important; }
  .section1 h3{ font-size:clamp(16px, 4.9vw, 20px) !important; }

  .section1 p,
  .section1 table td,
  .section1 table th,
  .mobile-ios-nav-item,
  .mobile-ios-server-item{
    font-size:13px !important;
  }

  .mobile-ios-nav-item{
    min-height:46px;
    padding:0 12px;
    border-radius:15px;
  }
}

@media (prefers-reduced-motion: reduce){
  .mobile-ios-nav-shell,
  .mobile-ios-server-panel,
  #mobileNavToggle .mobile-nav-toggle__box i,
  #mobileNavToggle .mobile-nav-toggle__lines::before,
  #mobileNavToggle .mobile-nav-toggle__lines::after,
  #mobileNavToggle .mobile-nav-toggle__lines span{
    transition:none !important;
    animation:none !important;
  }
}
/* =========================================================
   公告关闭按钮
   PC端隐藏 / 移动端显示
========================================================= */

/* 默认全部隐藏（PC端） */
#closeNoticeBtn,
.notice-close-btn{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* 移动端启用 */
@media (max-width:768px){

  #noticeCard{
    position:relative !important;
  }

  #closeNoticeBtn,
  #noticeCard .notice-close-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;

    position:absolute;
    top:10px;
    right:10px;

    width:34px;
    height:34px;

    border-radius:999px;
    border:1px solid rgba(255,255,255,.16);

    background:linear-gradient(
      180deg,
      rgba(14,18,36,.78),
      rgba(8,10,20,.62)
    );

    color:#fff;
    font-size:20px;
    font-weight:600;

    cursor:pointer;

    z-index:80;

    box-shadow:
      0 8px 18px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.10);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;

    pointer-events:auto !important;
  }

  #closeNoticeBtn:active{
    transform:scale(.95);
  }

  /* 关闭后隐藏公告 */
  #noticeCard.notice-card-hidden{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

}



/* =========================================================
   MOBILE SPEED OPTIMIZATION 20260603
   仅移动端生效：降低渲染成本、减少首屏动画/毛玻璃/大范围重绘
========================================================= */
@media (max-width: 768px){
  html{
    scroll-behavior:auto !important;
  }

  *, *::before, *::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }

  body{
    animation:none !important;
    background-attachment:scroll !important;
  }

  header,
  .section1 .left,
  .section1 .right,
  .section2 .row .box,
  .section2 .row .s-box,
  .modal-content,
  .mobile-ios-nav-shell,
  .mobile-ios-server-panel{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    filter:none !important;
  }

  .section2,
  .section3,
  footer{
    content-visibility:auto;
    contain-intrinsic-size:1px 900px;
  }

  .section3 iframe:not([src]){
    min-height:220px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.18);
  }

  .section3 .pictures img{
    aspect-ratio:16/9;
    object-fit:cover;
  }

  .tilt{
    transform:none !important;
  }

  .corner-btn{
    box-shadow:none !important;
  }
}


/* =========================================================
   MOBILEOPT2 - 全端性能兜底
   - 限制全局 transition: all 的重绘范围
   - 移动端进一步降低大面积阴影/滤镜和首屏外渲染成本
========================================================= */
body *{
  transition-property: color, background-color, border-color, opacity, transform, box-shadow, filter !important;
}

@media (max-width: 768px){
  body::before,
  body::after{
    animation:none !important;
    transform:none !important;
    filter:none !important;
  }

  .section1,
  .section2,
  .section3,
  .section1 .left,
  .section1 .right,
  .section2 .row .box,
  .section2 .row .s-box,
  .section3 .pictures .parent > div,
  .player-overlay .player{
    box-shadow:0 8px 22px rgba(0,0,0,.20) !important;
    will-change:auto !important;
  }

  .section2 .row .box,
  .section2 .row .s-box,
  .section3 .pictures .parent > div{
    contain:layout paint style;
  }

  .player-overlay:not(.active),
  .modal:not(.show):not(.active){
    content-visibility:hidden;
  }
}

/* =========================================================
   NIGHT MOBILE FIX 20260603
   移动端夜间模式显示兜底：提高对比度、修复透明面板/菜单/弹窗/表单显示
   仅在手机宽度生效，不改变页面功能
========================================================= */
@media (max-width: 768px){
  html,
  body{
    color-scheme: dark;
    background-color:#050711 !important;
  }

  body{
    color:rgba(255,255,255,.92) !important;
  }

  body::before{
    opacity:.34 !important;
    mix-blend-mode:screen !important;
  }

  body::after{
    opacity:.86 !important;
    mix-blend-mode:normal !important;
    background:
      radial-gradient(900px 560px at 50% 10%, rgba(26,37,88,.32), rgba(2,3,10,.86) 68%),
      linear-gradient(180deg, rgba(2,3,10,.52), rgba(2,3,10,.90)) !important;
  }

  header{
    background:linear-gradient(180deg, rgba(5,7,16,.98), rgba(8,11,24,.96)) !important;
    border-bottom:1px solid rgba(255,255,255,.13) !important;
    box-shadow:0 8px 20px rgba(0,0,0,.36) !important;
  }

  header::before{
    opacity:.30 !important;
  }

  header .logo h2,
  header .logo,
  header a,
  .mobile-ios-nav-label,
  .mobile-ios-server-item__main strong{
    color:rgba(255,255,255,.96) !important;
    text-shadow:0 1px 2px rgba(0,0,0,.55) !important;
  }

  #mobileNavToggle,
  .mobile-ios-nav-stage,
  .mobile-ios-server-panel,
  .mobile-ios-nav-item,
  .mobile-ios-server-item{
    color:rgba(255,255,255,.95) !important;
    border-color:rgba(255,255,255,.14) !important;
  }

  #mobileNavToggle,
  .mobile-ios-nav-item{
    background:linear-gradient(180deg, rgba(29,36,68,.98), rgba(13,17,36,.96)) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  .mobile-ios-nav-stage,
  .mobile-ios-server-panel{
    background:linear-gradient(180deg, rgba(8,12,28,.99), rgba(5,8,20,.98)) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  .mobile-ios-nav-stage::before{
    opacity:.42 !important;
  }

  .mobile-ios-server-trigger{
    background:linear-gradient(135deg, rgba(71,92,196,.98), rgba(133,64,165,.96)) !important;
  }

  .mobile-ios-server-item{
    background:linear-gradient(180deg, rgba(21,27,55,.98), rgba(10,14,30,.97)) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  .mobile-ios-server-item__main small{
    color:rgba(220,230,255,.72) !important;
  }

  .section1 .left,
  .section1 .right,
  .section1 .right > div,
  .section1 .right .notice,
  .section1 .right .rule,
  .section1 .right .card,
  .section1 .right .box,
  .section2 .row .box,
  .section2 .row .s-box,
  .section3 .pictures .parent > div,
  .hero-panel{
    background:linear-gradient(180deg, rgba(10,14,30,.96), rgba(7,10,22,.93)) !important;
    border-color:rgba(255,255,255,.13) !important;
    color:rgba(255,255,255,.92) !important;
    box-shadow:0 8px 22px rgba(0,0,0,.32) !important;
  }

  .section1 .left::before,
  .section1 .right::before,
  .section2 .row .box::before,
  .section2 .row .s-box::before,
  .hero-panel::before{
    opacity:.38 !important;
  }

  .section1 .left::after,
  .section1 .right::after,
  .section2 .row .box::after,
  .section2 .row .s-box::after,
  .hero-panel::after{
    opacity:.10 !important;
  }

  .section1 h1,
  .section1 h2,
  .section1 h3,
  .section2 h1,
  .section2 h2,
  .section2 h3,
  .section3 h1,
  .section3 h2,
  .section3 h3,
  .modal-content h1,
  .modal-content h2,
  .modal-content h3{
    color:rgba(255,255,255,.98) !important;
    text-shadow:0 2px 10px rgba(0,0,0,.48) !important;
  }

  .section1 p,
  .section2 p,
  .section3 p,
  .section1 li,
  .section2 li,
  .section3 li,
  .section1 span,
  .section2 span,
  .section3 span,
  .section1 td,
  .section1 th{
    color:rgba(235,241,255,.88) !important;
  }

  .section1 table{
    background:rgba(5,8,19,.86) !important;
    border-color:rgba(255,255,255,.12) !important;
  }

  .section1 table tr,
  .section1 table td,
  .section1 table th{
    background:transparent !important;
    border-color:rgba(255,255,255,.10) !important;
  }

  .section1 a,
  .section2 a,
  .section3 a,
  footer a{
    color:#8dd6ff !important;
  }

  .section1 .group a,
  .section1 .group button,
  .section1 .right .contact a,
  .section1 .right .contact button{
    color:#fff !important;
    border-color:rgba(255,255,255,.15) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.30) !important;
  }

  input,
  textarea,
  select,
  button{
    color-scheme:dark;
  }

  input,
  textarea,
  select,
  #versionModal .modal-body select{
    background:#0b1022 !important;
    color:rgba(255,255,255,.94) !important;
    border-color:rgba(255,255,255,.16) !important;
    -webkit-text-fill-color:rgba(255,255,255,.94);
  }

  select option,
  #versionModal .modal-body select option{
    background:#0b1022 !important;
    color:#fff !important;
  }

  #versionModal.modal,
  .player-overlay{
    background:rgba(1,3,10,.76) !important;
  }

  #versionModal .modal-content,
  .player-overlay .player,
  .java-modal .modal-content{
    background:linear-gradient(180deg, rgba(11,15,31,.99), rgba(6,9,21,.99)) !important;
    color:rgba(255,255,255,.94) !important;
    border-color:rgba(255,255,255,.15) !important;
    box-shadow:0 -10px 34px rgba(0,0,0,.50) !important;
  }

  #versionModal .modal-body,
  #versionModal .modal-body label,
  #versionModal .modal-footer,
  .player-overlay .player *{
    color:rgba(255,255,255,.90) !important;
  }

  #versionModal .close,
  #closeNoticeBtn,
  #noticeCard .notice-close-btn,
  .corner-btn,
  .floating-btn{
    color:#fff !important;
    background:linear-gradient(180deg, rgba(28,34,64,.96), rgba(11,15,31,.94)) !important;
    border-color:rgba(255,255,255,.16) !important;
    opacity:.86 !important;
  }

  .corner-btn{
    box-shadow:0 6px 16px rgba(0,0,0,.34) !important;
  }

  .top-progress,
  .top-progress i{
    background-color:rgba(255,255,255,.10) !important;
  }

  footer,
  .section3 footer{
    background:linear-gradient(180deg, rgba(6,8,16,.78), rgba(4,6,14,.96)) !important;
    color:rgba(235,241,255,.82) !important;
    border-top-color:rgba(255,255,255,.10) !important;
  }

  body.theme-neo .section1::after,
  body.dark-mode .section1::after,
  body.night-mode .section1::after,
  body[data-theme="dark"] .section1::after,
  html[data-theme="dark"] body .section1::after{
    opacity:.10 !important;
    animation:none !important;
  }

  body.theme-neo .section3 .pictures .parent > div,
  body.dark-mode .section3 .pictures .parent > div,
  body.night-mode .section3 .pictures .parent > div,
  body[data-theme="dark"] .section3 .pictures .parent > div,
  html[data-theme="dark"] body .section3 .pictures .parent > div{
    animation:none !important;
  }
}

@media (max-width: 768px) and (prefers-color-scheme: dark){
  html,
  body{
    background-color:#050711 !important;
  }

  img,
  iframe,
  video{
    color-scheme:normal;
  }
}