/* ============================================================
   夜七首页动态背景 —— 纯 CSS + 极简 JS，无外部素材
   组成：① 三个缓慢漂移的大光斑  ② 星点层  ③ 鼠标跟随光晕
   全部 pointer-events:none，不影响任何点击
   ============================================================ */
.y7-bg{position:fixed;inset:0;height:100vh;height:100dvh;z-index:-1;overflow:hidden;pointer-events:none;
       background:linear-gradient(160deg,#221838 0%,#2e2150 45%,#1c1430 100%)}

/* ① 光斑 */
.y7-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;
        will-change:transform}
.y7-orb.a{width:46vw;height:46vw;left:-8vw;top:-6vw;
          background:radial-gradient(circle,#8b6cf0 0%,rgba(139,108,240,0) 70%);
          animation:y7-f1 26s ease-in-out infinite}
.y7-orb.b{width:38vw;height:38vw;right:-6vw;top:26vh;
          background:radial-gradient(circle,#6242e0 0%,rgba(98,66,224,0) 70%);
          animation:y7-f2 34s ease-in-out infinite}
.y7-orb.c{width:32vw;height:32vw;left:26vw;bottom:-10vw;
          background:radial-gradient(circle,#3f6ee0 0%,rgba(63,110,224,0) 70%);
          opacity:.34;animation:y7-f3 40s ease-in-out infinite}
@keyframes y7-f1{0%,100%{transform:translate(0,0) scale(1)}
                 50%{transform:translate(9vw,7vh) scale(1.16)}}
@keyframes y7-f2{0%,100%{transform:translate(0,0) scale(1)}
                 50%{transform:translate(-8vw,-6vh) scale(1.10)}}
@keyframes y7-f3{0%,100%{transform:translate(0,0) scale(1)}
                 50%{transform:translate(6vw,-8vh) scale(1.20)}}

/* ② 星点层（两层不同大小/速度，制造纵深） */
.y7-stars,.y7-stars2{position:absolute;inset:-50% 0;opacity:.5}
.y7-stars{
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%,rgba(255,255,255,.85) 50%,transparent),
    radial-gradient(1.2px 1.2px at 34% 64%,rgba(200,190,255,.75) 50%,transparent),
    radial-gradient(1.6px 1.6px at 58% 18%,rgba(255,255,255,.7) 50%,transparent),
    radial-gradient(1.1px 1.1px at 76% 52%,rgba(185,164,255,.8) 50%,transparent),
    radial-gradient(1.5px 1.5px at 88% 82%,rgba(255,255,255,.65) 50%,transparent),
    radial-gradient(1.2px 1.2px at 22% 88%,rgba(200,190,255,.7) 50%,transparent);
  background-size:100% 100%;
  animation:y7-drift 70s linear infinite;
}
.y7-stars2{
  background-image:
    radial-gradient(1px 1px at 45% 35%,rgba(255,255,255,.6) 50%,transparent),
    radial-gradient(1px 1px at 68% 72%,rgba(185,164,255,.6) 50%,transparent),
    radial-gradient(1px 1px at 8% 58%,rgba(255,255,255,.55) 50%,transparent),
    radial-gradient(1px 1px at 92% 28%,rgba(200,190,255,.55) 50%,transparent);
  background-size:100% 100%;
  animation:y7-drift 120s linear infinite reverse;
  opacity:.35;
}
@keyframes y7-drift{from{transform:translateY(0)}to{transform:translateY(22vh)}}

/* ③ 鼠标跟随光晕 */
.y7-glow{position:absolute;width:520px;height:520px;border-radius:50%;
  left:0;top:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle,rgba(139,108,240,.18) 0%,rgba(139,108,240,0) 68%);
  transform:translate(-50%,-50%);will-change:transform}
.y7-bg.glow-on .y7-glow{opacity:1}

/* 内容整体抬到背景之上 */
.wrap{position:relative;z-index:1}

/* 无障碍 + 省电：关掉动画，光斑留在原位 */
/* 系统开了"减少动态效果"时怎么办？
   一开始我写的是 animation:none —— 结果整页变成一块死渐变，
   连背景都不动了，用户以为页面坏了。
   正确做法：只关掉可能引起前庭不适的（视差、3D 倾斜、跟随鼠标），
   氛围类的慢速漂移放慢并减弱即可。 */
@media (prefers-reduced-motion: reduce){
  .y7-orb{animation-duration:110s !important;opacity:.28}
  .y7-stars{animation-duration:260s !important;opacity:.3}
  .y7-stars2{display:none}
  .y7-glow{display:none}
}
/* 窄屏：减负，光斑缩小、星点变淡 */
@media (max-width:640px){
  .y7-orb{filter:blur(50px);opacity:.36}
  .y7-stars2{display:none}
  .y7-glow{display:none}
}

/* 暗遮罩：上浅下深，跟原来的紫色调融合 */

/* 手机：不加载视频，改用静态首帧，省流量也省电 */
@media (max-width:640px){
  
  
  
}

/* 系统开了"减少动态效果"：视频也关掉 */
/* 开了"减少动态效果"：不播视频，但换成静态首帧 ——
   纯渐变的降级太寡淡，静态水墨图一样好看，只是不动 */
@media (prefers-reduced-motion: reduce){
  
  
}

/* ============================================================
   可读性加固 v2（2026-10-13）
   起因：换上有大片白灰天空的水墨视频后，手机端浅色文字糊在亮背景上
   思路：背景压暗 -> 卡片加深 -> 文字加影，三层叠起来保证对比度
   ============================================================ */

/* ① 遮罩加厚，再叠一层中心径向压暗 */

/* ② 视频再压一点，降到"看得见但不抢戏" */

/* ③ 卡片改成半透明深色 + 背景模糊，不再依赖背景对比度 */

.credit-all{text-shadow:0 2px 8px rgba(0,0,0,.6)}

/* ④ 文字加投影，浅背景上也立得住 */
h1,.slogan,h3.sec,.featured h2,.featured p{text-shadow:0 2px 14px rgba(0,0,0,.72)}
.card .name,.card .desc,.card .foot,
.adv-t,.adv-d,.credit .cn,.credit .cr,footer,footer a{text-shadow:0 1px 8px rgba(0,0,0,.62)}
.tab,.btn{text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* ============================================================
   响应式布局优化
   ============================================================ */
@media (max-width:900px){
  .wrap{padding-top:34px}
  h1{font-size:26px}
  .featured{padding:22px 20px;gap:16px}
  .featured .info{min-width:100%}
  .featured .btn{width:100%;text-align:center}
  .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .adv{grid-template-columns:1fr}
}

@media (max-width:640px){
  body{padding:26px 12px 30px !important}
  h1{font-size:22px}
  .slogan{font-size:12.5px}
  .featured{padding:18px 16px;border-radius:16px}
  .featured h2{font-size:18px}
  .featured p{font-size:12.5px;line-height:1.8}
  .featured .btn{font-size:15px;padding:13px 20px}
  .grid{grid-template-columns:1fr;gap:12px}
  .adv{gap:11px;margin-bottom:30px}
  .adv-item{padding:15px 16px}
  .adv-ic{width:34px;height:34px;font-size:16px}
  .adv-t{font-size:13.5px}
  .adv-d{font-size:12.2px;line-height:1.8}
  .adv-note{margin:-16px 0 30px;padding:13px 15px;font-size:12.2px}
  h3.sec{font-size:14px;margin-bottom:14px}
  .card{padding:18px}
  .credit-row{flex-direction:column;gap:11px}
  .credit{padding:15px 17px}
  .credit .av{width:38px;height:38px}
  .credits{margin-top:34px}
  footer{margin-top:36px;font-size:12px;line-height:1.9}

  /* 手机：遮罩更厚、卡片更实，白灰背景上也能看清 */
  
  
  
  /* 手机上光斑和星点减负，别糊成一团 */
  .y7-orb{opacity:.26;filter:blur(56px)}
  .y7-stars{opacity:.34}
  .y7-stars2{display:none}
}

/* 超宽屏：内容别拉太散 */
@media (min-width:1600px){
  .wrap{max-width:1120px}
}

/* ============================================================
   横向溢出兜底
   光斑/星点是大尺寸绝对定位元素，窄屏上会把文档撑宽，这里锁一下横向。

   【别再用 minmax(0,1fr) 做网格列】
   这里踩过两次坑，都是同一个原因：
     · repeat(auto-fill, minmax(0,1fr)) → auto-fill 认为列可以无限窄，
       于是创建出一大堆零宽列，卡片被压成一条竖线，文字一个字一行
     · repeat(2, minmax(0,1fr))        → 列可以缩到内容宽度以下，
       数字被裁成 "1,84"、"98.4" 这种
   规则：网格列要么给真实下限（minmax(150px,1fr)），
        要么用显式等分（1fr 1fr / repeat(4,1fr)）。
   ============================================================ */
html,body{overflow-x:hidden;max-width:100%}
/* 这里必须是 minmax(150px,1fr) 而不是 minmax(0,1fr)：
   auto-fit 的最小值给 0 的话，所有格子都能挤进一行，
   手机上 4 格各分到 91px，数字直接被裁掉。
   给个真实下限，auto-fit 才会自动折成 2 列。 */
/* 桌面 4 列；窄屏见下面的媒体查询 */
.stats{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){ .stats{grid-template-columns:1fr 1fr} }
@media (max-width:820px){
  /* 用显式的 1fr 1fr，不要 minmax(0,1fr) ——
     后者允许列缩到 0，窄屏上内容会溢出到视口外被裁掉。
     1fr 1fr 是等分两列，永远不会出这个问题。 */
  .stats{grid-template-columns:1fr 1fr !important;gap:9px}
  .stat{padding:15px 6px;overflow:visible}
  .sv{font-size:22px;letter-spacing:-.8px}
  .sv i{font-size:11.5px;margin-left:1px}
  .sk{font-size:11px;letter-spacing:0;white-space:nowrap}
}

/* ============================================================
   ?fx=on 强制开启（覆盖 prefers-reduced-motion）
   用途：站长自己看效果、或者明确想忽略系统设置的场景。
   系统设置本身不动，只是这一页强制播。
   ============================================================ */
body.fx-force .y7-orb{animation:y7-f1 26s ease-in-out infinite !important;opacity:.5 !important}
body.fx-force .y7-orb.b{animation:y7-f2 34s ease-in-out infinite !important}
body.fx-force .y7-orb.c{animation:y7-f3 40s ease-in-out infinite !important;opacity:.34 !important}
body.fx-force .y7-stars{animation:y7-drift 70s linear infinite !important;opacity:.5 !important}
body.fx-force .y7-stars2{display:block !important;animation:y7-drift 120s linear infinite reverse !important}
body.fx-force .y7-glow{display:block !important}