/* =========================================================
   冰雾电竞 · 首页霓虹电竞主题（仅首页 body.home 生效）
   依赖 style.css，在其后加载，只做视觉覆盖，不改动后台
   ========================================================= */

body.home {
  --n-bg: #070a18;
  --n-panel: rgba(20, 24, 46, .82);
  --n-panel2: rgba(12, 15, 32, .9);
  --n-line: rgba(120, 160, 255, .20);
  --n-cyan: #3ee0ff;
  --n-purple: #8b5cf6;
  --n-pink: #ff6ec7;
  --n-text: #eaf2ff;
  --n-muted: #93a2c4;
  color-scheme: dark;
  /* 整站底色：深靛蓝底 + 四角极光 + 顶部冷光 / 底部暖粉光 */
  background:
    radial-gradient(1150px 640px at 84% -14%, rgba(139, 92, 246, .38), transparent 62%),
    radial-gradient(950px 580px at -10% 2%, rgba(62, 224, 255, .22), transparent 60%),
    radial-gradient(820px 560px at 110% 46%, rgba(88, 132, 255, .16), transparent 62%),
    radial-gradient(980px 620px at 46% 116%, rgba(255, 110, 199, .20), transparent 64%),
    radial-gradient(700px 460px at 6% 92%, rgba(168, 120, 255, .16), transparent 62%),
    linear-gradient(178deg, #080c1c 0%, #06080f 42%, #0a0818 74%, #100a1c 100%);
  background-attachment: fixed;
  color: var(--n-text);
}
/* 极光层（星点已移至 .cosmos 独立层，这里只留缓慢流动的极光） */
body.home::before {
  content: "";
  position: fixed; inset: -12%; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1100px 660px at 22% 10%, rgba(62, 224, 255, .10), transparent 62%),
    radial-gradient(880px 600px at 88% 26%, rgba(168, 120, 255, .13), transparent 64%),
    radial-gradient(1000px 680px at 58% 94%, rgba(255, 110, 199, .13), transparent 64%);
  animation: bgDrift 38s ease-in-out infinite alternate;
}
/* 双层网格：粗网格给结构，细网格给质感，向下渐隐 */
body.home::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(120, 180, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 180, 255, .055) 1px, transparent 1px),
    linear-gradient(rgba(150, 200, 255, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 200, 255, .026) 1px, transparent 1px);
  background-size: 84px 84px, 84px 84px, 21px 21px, 21px 21px;
  mask-image: radial-gradient(135% 108% at 50% 2%, #000 16%, rgba(0, 0, 0, .55) 48%, transparent 84%);
  -webkit-mask-image: radial-gradient(135% 108% at 50% 2%, #000 16%, rgba(0, 0, 0, .55) 48%, transparent 84%);
}
@keyframes bgDrift {
  0%   { transform: translate3d(-1.6%, -1.1%, 0) scale(1.05); }
  100% { transform: translate3d(1.6%, 1.3%, 0) scale(1.12); }
}
@keyframes bgTwinkle {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}

/* =========================================================
   星空 + 星球 · 流动背景层
   四层星点以不同速度漂移（视差纵深），叠加流星与缓慢公转的星球
   ========================================================= */
body.home .cosmos {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}

/* --- 四层星点：越远越小越暗越慢，越近越大越亮越快 --- */
body.home .star-layer {
  position: absolute; inset: -50% -50% -50% -50%;
  background-repeat: repeat;
  will-change: transform;
}
/* 第 1 层：最远，极暗小星点，几乎不动 */
body.home .star-l1 {
  background-image:
    radial-gradient(rgba(200, 225, 255, .55) 1px, transparent 1.6px),
    radial-gradient(rgba(180, 210, 255, .40) 0.8px, transparent 1.4px);
  background-size: 173px 173px, 97px 97px;
  background-position: 11px 23px, 61px 7px;
  animation: starDrift1 240s linear infinite;
  opacity: .7;
}
/* 第 2 层：中等，最常见的星 */
body.home .star-l2 {
  background-image:
    radial-gradient(rgba(255, 255, 255, .8) 1.1px, transparent 1.8px),
    radial-gradient(rgba(160, 215, 255, .6) 1px, transparent 1.7px),
    radial-gradient(rgba(255, 205, 240, .5) 1px, transparent 1.7px);
  background-size: 211px 211px, 131px 131px, 89px 89px;
  background-position: 37px 51px, 83px 17px, 9px 71px;
  animation: starDrift2 150s linear infinite;
  opacity: .85;
}
/* 第 3 层：较近，亮星，带闪烁 */
body.home .star-l3 {
  background-image:
    radial-gradient(rgba(255, 255, 255, .95) 1.4px, transparent 2.2px),
    radial-gradient(rgba(120, 230, 255, .85) 1.2px, transparent 2px),
    radial-gradient(rgba(255, 150, 220, .75) 1.2px, transparent 2px);
  background-size: 307px 307px, 179px 179px, 253px 253px;
  background-position: 127px 89px, 41px 151px, 203px 33px;
  animation: starDrift3 100s linear infinite, starTwinkle 6.5s ease-in-out infinite;
}
/* 第 4 层：最近，大号光晕星（少量，制造纵深冲击） */
body.home .star-l4 {
  background-image:
    radial-gradient(rgba(255, 255, 255, 1) 1.8px, rgba(120, 200, 255, .35) 2.6px, transparent 5px),
    radial-gradient(rgba(220, 240, 255, .9) 1.6px, rgba(160, 120, 255, .3) 2.4px, transparent 4.5px);
  background-size: 419px 419px, 337px 337px;
  background-position: 173px 211px, 71px 97px;
  animation: starDrift4 70s linear infinite, starTwinkle 4.2s ease-in-out infinite;
}
/* 四层不同方向的漂移：慢的向上偏左，快的向右下，形成错位流动感 */
@keyframes starDrift1 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-173px, -173px, 0); }
}
@keyframes starDrift2 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-211px, -211px, 0); }
}
@keyframes starDrift3 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-307px, -307px, 0); }
}
@keyframes starDrift4 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-419px, -419px, 0); }
}
@keyframes starTwinkle {
  0%, 100% { filter: brightness(.75); }
  50%      { filter: brightness(1.35); }
}

/* --- 流星：斜向划过，三条错开时间 --- */
body.home .shooting-star {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(180, 230, 255, .9);
  opacity: 0;
}
body.home .shooting-star::after {
  content: ""; position: absolute; top: 50%; right: 0;
  width: 130px; height: 1.4px; transform: translateY(-50%);
  background: linear-gradient(270deg, rgba(180, 230, 255, .85), rgba(140, 190, 255, .35) 40%, transparent);
  border-radius: 2px;
}
body.home .ss1 { top: 12%; left: 18%; animation: shoot 11s linear infinite; animation-delay: 2s; }
body.home .ss2 { top: 34%; left: 62%; animation: shoot 15s linear infinite; animation-delay: 7.5s; }
body.home .ss3 { top: 58%; left: 8%;  animation: shoot 19s linear infinite; animation-delay: 13s; }
@keyframes shoot {
  0%     { transform: translate3d(0, 0, 0) rotate(28deg); opacity: 0; }
  3%     { opacity: 1; }
  16%    { transform: translate3d(520px, 285px, 0) rotate(28deg); opacity: 0; }
  100%   { transform: translate3d(520px, 285px, 0) rotate(28deg); opacity: 0; }
}

/* --- 星球：三颗，各自缓慢漂浮 / 光环 --- */
body.home .planet {
  position: absolute; border-radius: 50%;
  will-change: transform;
}

/* 星球 1：右上大行星 —— 冰蓝气态巨星 + 环带
   位置贴着右上角、尺寸收小，让它完整露在内容卡片之外的留白区 */
body.home .planet-1 {
  top: calc(56px + 2%);
  right: 2.5%;
  width: 148px; height: 148px;
  z-index: 2;
  /* 球体本身也要有独立背景层，才能遮住身后的环带 */
  background:
    /* ① 高光：受光面左上，小而集中，做出球体的「亮斑」 */
    radial-gradient(circle at 30% 24%, rgba(248, 253, 255, 1) 0%, rgba(200, 228, 255, .85) 6%, rgba(150, 195, 255, .40) 15%, transparent 27%),
    /* ② 表面云带：明暗相间的横向弧带，做出气态行星的带纹层次 */
    radial-gradient(ellipse 88% 10% at 40% 33%, rgba(205, 232, 255, .34), transparent 66%),
    radial-gradient(ellipse 92% 8% at 56% 41%, rgba(22, 30, 76, .54), transparent 68%),
    radial-gradient(ellipse 84% 9% at 44% 49%, rgba(190, 222, 255, .30), transparent 66%),
    radial-gradient(ellipse 90% 8% at 52% 57%, rgba(20, 27, 70, .50), transparent 68%),
    radial-gradient(ellipse 80% 7% at 46% 65%, rgba(180, 215, 255, .26), transparent 66%),
    radial-gradient(ellipse 70% 6% at 48% 73%, rgba(18, 24, 62, .42), transparent 68%),
    /* ③ 球体基色：受光→背光的连续过渡，终结线在 62% 附近 */
    radial-gradient(circle at 30% 24%,
      #a8c8fa 0%, #84a6ea 13%, #6079d0 28%, #42549f 44%, #2a3675 60%, #1a2150 76%, #0e1230 89%, #06070f 100%);
  box-shadow:
    inset -16px -13px 36px rgba(0, 0, 0, .82),      /* 暗面加深 */
    inset 10px 8px 24px rgba(170, 210, 255, .30),   /* 受光面提亮 */
    inset 0 0 48px rgba(90, 130, 240, .18),         /* 内侧边缘蓝光 */
    0 0 24px rgba(120, 165, 255, .36),              /* 外层大气辉光 */
    0 0 64px rgba(100, 140, 255, .24),
    0 0 130px rgba(110, 95, 240, .15);
  animation: planetFloat 26s ease-in-out infinite alternate;
  opacity: .95;
}
/* 球体表面前景雾：暗化右下 + 微弱大气，让球更立体；z-index 高于环带后半段，形成遮挡 */
body.home .planet-1::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, transparent 34%, rgba(10, 14, 40, .30) 66%, rgba(4, 5, 16, .66) 100%),
    /* 大气边缘：右下外侧一圈极淡的蓝白弧光 */
    radial-gradient(circle at 74% 78%, rgba(140, 190, 255, .16), transparent 30%);
  pointer-events: none;
  z-index: 1;
}

/* 环带：拆成「后半段（在球后）」+「前半段（在球前）」两层，才有真实的穿插层次 */
body.home .planet-1 .planet-ring {
  position: absolute; left: 50%; top: 50%;
  width: 250px; height: 250px;
  margin: -125px 0 0 -125px;
  border-radius: 50%;
  /* 环带本体：多道明暗相间的同心环，模拟真实的碎石带层次 */
  background: radial-gradient(circle,
    transparent 38.5%,
    rgba(150, 195, 255, .04) 39.5%,
    rgba(205, 230, 255, .34) 42.5%,      /* 内环外沿（亮） */
    rgba(160, 200, 250, .10) 44.5%,
    rgba(226, 242, 255, .42) 46.5%,      /* 中环（最亮） */
    rgba(150, 190, 245, .09) 48.5%,
    rgba(195, 222, 255, .26) 50.5%,      /* 外环 */
    rgba(130, 170, 230, .05) 53%,
    transparent 56%);
  box-shadow: 0 0 20px rgba(140, 185, 255, .16);
  transform: rotateX(73deg) rotateZ(-24deg);
  animation: ringSpin 46s linear infinite;
  pointer-events: none;
  z-index: -1;   /* 沉到球体之后 */
}
@keyframes ringSpin {
  from { transform: rotateX(73deg) rotateZ(-24deg); }
  to   { transform: rotateX(73deg) rotateZ(336deg); }
}
/* 环带前半段：单独一个伪元素，用 clip-path 只保留椭圆下半部分，盖在球体前面 */
body.home .planet-1::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 250px; height: 250px;
  margin: -125px 0 0 -125px;
  border-radius: 50%;
  background: radial-gradient(circle,
    transparent 38.5%,
    rgba(150, 195, 255, .06) 39.5%,
    rgba(215, 236, 255, .46) 42.5%,
    rgba(170, 208, 252, .14) 44.5%,
    rgba(238, 248, 255, .56) 46.5%,
    rgba(160, 198, 248, .12) 48.5%,
    rgba(205, 230, 255, .36) 50.5%,
    rgba(140, 178, 235, .07) 53%,
    transparent 56%);
  /* 只保留下半圈（视觉上从球体前方绕过的一段），并提亮 */
  clip-path: inset(50% 0 0 0);
  transform: rotateX(73deg) rotateZ(-24deg);
  animation: ringSpin 46s linear infinite;
  pointer-events: none;
  z-index: 3;    /* 浮到球体之前 */
}

/* 星球 2：左下小行星 —— 粉紫岩质，带陨石坑 */
body.home .planet-2 {
  bottom: 10%; left: -22px;
  width: 108px; height: 108px;
  background:
    /* 小面积高光（岩质星体反射更集中） */
    radial-gradient(circle at 36% 30%, rgba(255, 238, 250, .95) 0%, rgba(255, 150, 220, .5) 13%, transparent 30%),
    /* 明暗过渡 */
    radial-gradient(circle at 36% 30%, #b25c9e 0%, #8a3f7d 20%, #5f2a63 44%, #341440 68%, #160a22 88%, #0a0413 100%);
  box-shadow:
    inset -11px -9px 26px rgba(0, 0, 0, .76),
    inset 6px 5px 18px rgba(255, 180, 235, .22),
    0 0 18px rgba(255, 120, 205, .24),
    0 0 52px rgba(220, 100, 200, .18),
    0 0 110px rgba(180, 80, 200, .12);
  animation: planetFloat 21s ease-in-out infinite alternate;
  animation-delay: -6s;
  opacity: .9;
}
/* 陨石坑：亮暗成对，才有凹陷感（亮边在上、暗底在下） */
body.home .planet-2::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(ellipse 13% 11% at 26% 40%, rgba(0, 0, 0, .34) 38%, rgba(255, 200, 240, .16) 62%, transparent 78%),
    radial-gradient(ellipse 9% 8% at 63% 30%, rgba(0, 0, 0, .28) 36%, rgba(255, 200, 240, .14) 60%, transparent 76%),
    radial-gradient(ellipse 10% 9% at 48% 66%, rgba(0, 0, 0, .30) 36%, rgba(255, 200, 240, .13) 60%, transparent 76%),
    radial-gradient(ellipse 7% 6% at 74% 55%, rgba(0, 0, 0, .24) 34%, rgba(255, 200, 240, .12) 58%, transparent 74%),
    radial-gradient(ellipse 6% 5% at 20% 68%, rgba(0, 0, 0, .22) 34%, transparent 70%);
  pointer-events: none;
}

/* 星球 3：右侧小卫星 —— 冷青灰，带极细环 */
body.home .planet-3 {
  top: 62%; right: -14px;
  width: 74px; height: 74px;
  background:
    radial-gradient(circle at 34% 30%, rgba(232, 252, 255, .96) 0%, rgba(110, 220, 250, .5) 14%, transparent 32%),
    radial-gradient(circle at 34% 30%, #5f9db8 0%, #3d7590 22%, #1f4560 48%, #0f2438 72%, #060e1a 92%, #03070e 100%);
  box-shadow:
    inset -8px -7px 20px rgba(0, 0, 0, .74),
    inset 5px 4px 14px rgba(150, 235, 255, .2),
    0 0 14px rgba(62, 200, 240, .22),
    0 0 40px rgba(62, 190, 235, .16),
    0 0 84px rgba(50, 160, 220, .10);
  animation: planetFloat 18s ease-in-out infinite alternate;
  animation-delay: -11s;
  opacity: .88;
}
body.home .planet-3::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(ellipse 12% 10% at 60% 34%, rgba(0, 0, 0, .26) 38%, rgba(200, 245, 255, .12) 62%, transparent 78%),
    radial-gradient(ellipse 8% 7% at 34% 62%, rgba(0, 0, 0, .22) 36%, transparent 74%),
    radial-gradient(circle at 34% 30%, rgba(220, 245, 255, .08) 0%, transparent 40%,
      rgba(4, 8, 18, .30) 74%, rgba(2, 4, 10, .52) 100%);
  pointer-events: none;
}
/* 细环：同样改成环带渐变 */
body.home .planet-3 .planet-ring {
  position: absolute; left: 50%; top: 50%;
  width: 132px; height: 132px;
  margin: -66px 0 0 -66px;
  border-radius: 50%;
  background: radial-gradient(circle,
    transparent 42%,
    rgba(150, 232, 255, .26) 46%,
    rgba(210, 246, 255, .42) 49.5%,
    rgba(140, 210, 245, .14) 53%,
    transparent 57%);
  box-shadow: 0 0 12px rgba(62, 200, 240, .16);
  transform: rotateX(78deg) rotateZ(16deg);
  animation: ringSpin3 30s linear infinite;
  pointer-events: none;
}
@keyframes ringSpin3 {
  from { transform: rotateX(78deg) rotateZ(16deg); }
  to   { transform: rotateX(78deg) rotateZ(376deg); }
}

/* 屏幕较窄时隐藏部分星球，避免和内容打架 */
@media (max-width: 1420px) {
  /* 内容区左右留白变窄，缩小星球并往外推 */
  body.home .planet-1 { width: 124px; height: 124px; right: 1%; opacity: .78; }
  body.home .planet-1 .planet-ring,
  body.home .planet-1::before { width: 208px; height: 208px; margin: -104px 0 0 -104px; }
  body.home .planet-3 { display: none; }
  body.home .planet-2 { width: 86px; height: 86px; left: -30px; opacity: .68; }
}
/* 1180 以下两侧已无留白，星球移到内容区外/大幅淡化 */
@media (max-width: 1180px) {
  body.home .planet-1 {
    width: 104px; height: 104px; right: -38px; top: -26px;
    opacity: .45;
  }
  body.home .planet-1 .planet-ring,
  body.home .planet-1::before { width: 176px; height: 176px; margin: -88px 0 0 -88px; }
  body.home .planet-2 { width: 64px; height: 64px; left: -40px; opacity: .32; }
  body.home .shooting-star::after { width: 96px; }
}
/* 900 以下：只保留顶部一颗极淡的星球当氛围 */
@media (max-width: 900px) {
  body.home .planet-1 { width: 78px; height: 78px; right: -28px; top: -20px; opacity: .26; }
  body.home .planet-1 .planet-ring,
  body.home .planet-1::before { width: 132px; height: 132px; margin: -66px 0 0 -66px; opacity: .5; }
  body.home .planet-2 { display: none; }
  body.home .shooting-star::after { width: 80px; }
}
@media (max-width: 640px) {
  /* 小屏内容占满，星球几乎全隐藏，只留一点点氛围 */
  body.home .planet-1 { opacity: .14; }
  body.home .planet-2 { display: none; }
  body.home .shooting-star { display: none; }
}

/* 尊重「减少动效」：停掉所有星空动画，保留静态星空与星球 */
@media (prefers-reduced-motion: reduce) {
  body.home::before { animation: none; }
  body.home .star-layer,
  body.home .shooting-star,
  body.home .planet,
  body.home .planet-ring { animation: none !important; }
  body.home .shooting-star { display: none; }
}
body.home .container { position: relative; z-index: 1; }

/* ---------- 顶栏 ---------- */
body.home .topbar {
  background: rgba(7, 9, 20, .82);
  border-bottom: 1px solid var(--n-line);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
body.home .brand { color: #fff; text-shadow: 0 0 18px rgba(62, 224, 255, .45); }
body.home .brand .logo {
  background: linear-gradient(135deg, #3ee0ff, #8b5cf6);
  color: #06121f;
  box-shadow: 0 0 22px rgba(62, 224, 255, .55);
}
body.home .nav-links a { color: var(--n-muted); }
body.home .nav-links a:hover { color: #fff; background: rgba(139, 92, 246, .22); }

/* ---------- 封面上沿「趴扶」Q 版角色 ---------- */
body.home .banner-wrap { position: relative; margin-top: 0; }
@keyframes moeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ---------- 顶部霓虹封面 ---------- */
body.home .banner {
  position: relative; overflow: hidden; margin-bottom: 24px;
  border-radius: 24px; padding: 34px 30px 30px;
  min-height: 430px; display: flex; align-items: center;
  background:
    radial-gradient(620px 360px at 92% 4%, rgba(255, 75, 216, .26), transparent 62%),
    radial-gradient(640px 440px at 0% 96%, rgba(62, 224, 255, .20), transparent 60%),
    linear-gradient(140deg, #161d40 0%, #0c1024 52%, #1a0f33 100%);
  border: 1px solid rgba(130, 170, 255, .26);
  box-shadow: 0 26px 64px rgba(3, 6, 22, .65), inset 0 0 70px rgba(62, 224, 255, .06);
}
/* 角色立绘背景层 */
body.home .banner-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
body.home .bg-chr {
  position: absolute; bottom: 0; height: 100%; width: auto;
  object-fit: cover; object-position: top center;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 13%, #000 93%, rgba(0,0,0,.62) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 13%, #000 93%, rgba(0,0,0,.62) 100%);
  filter: saturate(1.10) contrast(1.10) brightness(1.10) drop-shadow(0 10px 26px rgba(0,0,0,.55));
}
body.home .bg-chr-1 { left: 23%; height: 80%; opacity: .95; }
body.home .bg-chr-2 { left: 42%; height: 98%; opacity: 1; }
body.home .bg-chr-3 { right: 2%; height: 90%; opacity: 1; }
/* 压暗遮罩：保证左侧文字可读 */
body.home .banner-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,7,15,.94) 0%, rgba(6,7,15,.78) 22%, rgba(6,7,15,.34) 44%, rgba(6,7,15,.06) 58%, rgba(6,7,15,0) 70%, rgba(6,7,15,.26) 100%),
    linear-gradient(to top, rgba(6,7,15,.78) 0%, rgba(6,7,15,.10) 22%, rgba(6,7,15,0) 38%);
}
body.home .banner-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    linear-gradient(rgba(130, 190, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 190, 255, .08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(85% 90% at 26% 40%, #000 25%, transparent 74%);
  -webkit-mask-image: radial-gradient(85% 90% at 26% 40%, #000 25%, transparent 74%);
}
body.home .banner-inner { position: relative; z-index: 2; display: flex; align-items: center; width: 100%; }
body.home .banner-left { flex: 1; min-width: 0; max-width: 56%; }
body.home .banner-chip {
  display: inline-block; margin-bottom: 14px;
  padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  color: var(--n-cyan); background: rgba(62, 224, 255, .12);
  border: 1px solid rgba(62, 224, 255, .45);
  box-shadow: 0 0 20px rgba(62, 224, 255, .28) inset;
}
body.home .banner-title {
  font-size: 46px; font-weight: 900; letter-spacing: 3px; line-height: 1.1; margin-bottom: 10px;
  background: linear-gradient(92deg, #8ff2ff 0%, #b6a6ff 46%, #ff8ae0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(120, 200, 255, .45));
}
body.home .banner-desc { font-size: 15px; color: #c7d4f2; margin-bottom: 16px; }
body.home .banner-badges { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
body.home .banner-badges span {
  font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px;
  color: #dbe6ff; background: rgba(120, 160, 255, .12);
  border: 1px solid rgba(130, 170, 255, .3);
}
body.home .banner-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
body.home .cta-main {
  display: inline-block; padding: 12px 30px; border-radius: 13px;
  font-weight: 800; font-size: 15px; letter-spacing: .5px; color: #06121f;
  background: linear-gradient(135deg, #4ff0ff, #8b5cf6);
  box-shadow: 0 10px 30px rgba(62, 224, 255, .45), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  transition: transform .15s, box-shadow .15s;
}
body.home .cta-main:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(62, 224, 255, .6); }
body.home .cta-tip { font-size: 12.5px; color: var(--n-muted); }
/* （角色立绘已改为封面背景层，不再单独展示卡片） */

/* ---------- 品牌标识（WB 徽标，透明PNG） ---------- */
body.home .brand-mark {
  height: 36px; width: auto; display: block;
  filter: drop-shadow(0 0 14px rgba(62, 224, 255, .34));
}
body.home .banner-mark {
  display: block; height: 84px; width: auto; margin: 0 0 16px;
  filter: drop-shadow(0 8px 24px rgba(3, 6, 22, .6)) drop-shadow(0 0 22px rgba(62, 224, 255, .30));
}
body.home .foot-mark {
  display: block; height: 70px; width: auto; margin: 0 auto 12px; opacity: .62;
  filter: drop-shadow(0 0 18px rgba(62, 224, 255, .32));
}
body.home .nav-mini { display: none; }

/* ---------- 通用区块 ---------- */
body.home .block {
  margin-bottom: 24px; padding: 20px;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(19, 24, 46, .88), rgba(10, 13, 28, .9));
  border: 1px solid var(--n-line);
  box-shadow: 0 18px 44px rgba(3, 6, 22, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
}
body.home .block-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
body.home .block-head h2 {
  font-size: 20px; font-weight: 800; color: #fff; padding-left: 12px;
  border-left: 3px solid var(--n-cyan);
  text-shadow: 0 0 18px rgba(62, 224, 255, .55);
}
body.home .block-sub { font-size: 12px; color: var(--n-muted); }

/* ---------- 套餐筛选 ---------- */
body.home .filters { margin-bottom: 18px; }
body.home .chip {
  background: rgba(20, 26, 50, .85); border: 1px solid var(--n-line); color: var(--n-muted);
  box-shadow: none;
}
body.home .chip:hover { border-color: rgba(62, 224, 255, .55); color: #fff; background: rgba(30, 40, 72, .9); }
body.home .chip.active {
  background: linear-gradient(135deg, #4ff0ff, #8b5cf6); color: #06121f; border-color: transparent;
  box-shadow: 0 0 24px rgba(62, 224, 255, .5);
}

/* ---------- 套餐卡片 ---------- */
body.home .card {
  background: linear-gradient(168deg, rgba(22, 28, 54, .95), rgba(11, 15, 32, .96));
  border: 1px solid rgba(130, 170, 255, .20);
  box-shadow: 0 14px 34px rgba(3, 6, 22, .55);
}
body.home .card:hover {
  border-color: rgba(62, 224, 255, .6);
  box-shadow: 0 0 0 1px rgba(62, 224, 255, .32), 0 20px 46px rgba(3, 6, 22, .65);
}
body.home .card .thumb {
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(62, 224, 255, .22), transparent 60%),
    linear-gradient(135deg, #1b2450, #2a1a54);
}
body.home .card .thumb-ic { color: #dff3ff; }

/* Q 版角色：一张卡一个，完整人物悬浮在卡片右上角（探出卡片边界） */
body.home .card { overflow: visible; }
body.home .card:hover { z-index: 10; }
body.home .card .thumb {
  height: 156px;
  border-radius: var(--radius) var(--radius) 0 0; overflow: hidden;
}
body.home .card .card-moe {
  position: absolute; top: -34px; right: -8px; z-index: 6;
  pointer-events: none;
  animation: moeFloat 3.6s ease-in-out infinite;
}
body.home .card .card-moe img {
  display: block; width: auto; height: 168px;
  filter: drop-shadow(0 10px 18px rgba(2, 5, 18, .6));
}
/* 挥手版盖在趴姿版上，默认透明 */
body.home .card .card-moe .moe-wave {
  position: absolute; left: 0; top: 0; opacity: 0;
  transform-origin: 50% 100%;
  transform: scale(var(--ws, 1));
}
/* 挥手版人物比趴姿版小一圈（AI 构图差异），按各自比例放大补偿，切换时大小位置衔接 */
body.home .card .card-moe.moe-bqw .moe-wave { --ws: 1.243; }
body.home .card .card-moe.moe-evita .moe-wave { --ws: 1.077; }
body.home .card .card-moe.moe-talia .moe-wave { --ws: 1.345; }
body.home .card .card-moe .moe-idle { transition: opacity .1s ease; }
/* 鼠标移到卡片上：切成挥手版 + 左右摆动打招呼 */
body.home .card:hover .card-moe .moe-idle { opacity: 0; }
body.home .card:hover .card-moe .moe-wave {
  opacity: 1;
  animation: moeWave .5s ease-in-out infinite;
}
/* 打招呼气泡 */
body.home .card .card-moe .moe-hi {
  position: absolute; top: 4px; right: 84%;
  padding: 3px 9px; border-radius: 999px 999px 999px 4px;
  background: linear-gradient(135deg, #ff8bd0, #ff5bb8); color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: .5px; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(255, 91, 184, .45);
  opacity: 0; transform: scale(.5) translateX(6px); transform-origin: 100% 100%;
  transition: opacity .18s ease, transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
body.home .card:hover .card-moe .moe-hi { opacity: 1; transform: scale(1) translateX(0); }
@keyframes moeWave {
  0%   { transform: scale(var(--ws, 1)) rotate(-5deg) translateY(0); }
  50%  { transform: scale(var(--ws, 1)) rotate(7deg) translateY(-7px); }
  100% { transform: scale(var(--ws, 1)) rotate(-5deg) translateY(0); }
}
/* 三个角色交错一点，避免整排完全同步 */
body.home .card:nth-child(3n+2) .card-moe { animation-delay: .6s; }
body.home .card:nth-child(3n+3) .card-moe { animation-delay: 1.2s; }
body.home .card .cat { color: var(--n-cyan); }
body.home .card .cat::before { background: var(--n-cyan); box-shadow: 0 0 10px var(--n-cyan); }
body.home .card .name { color: #fff; }
body.home .card .meta, body.home .card .desc { color: var(--n-muted); }
body.home .price { color: var(--n-pink); text-shadow: 0 0 16px rgba(255, 110, 199, .5); }
body.home .card .stepper button {
  background: rgba(20, 26, 50, .9); border-color: var(--n-line); color: var(--n-cyan);
}
body.home .card .stepper button:hover { border-color: var(--n-cyan); background: rgba(62, 224, 255, .16); }
body.home .card .stepper .q { color: #fff; }
body.home .fab {
  background: #eaf6ff; color: #0b1533;
  box-shadow: 0 8px 22px rgba(62, 224, 255, .4);
}
body.home .fab:hover { background: linear-gradient(135deg, #4ff0ff, #8b5cf6); color: #06121f; }
body.home .empty { color: var(--n-muted); }

/* ---------- 下单流程 ---------- */
body.home .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
body.home .step {
  display: flex; gap: 11px; align-items: flex-start; padding: 15px 14px;
  border-radius: 15px; background: rgba(20, 26, 50, .58);
  border: 1px solid rgba(130, 170, 255, .16);
}
body.home .step-n {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #06121f;
  background: linear-gradient(135deg, #4ff0ff, #8b5cf6);
  box-shadow: 0 0 18px rgba(62, 224, 255, .45);
}
body.home .step-tx b { display: block; color: #fff; font-size: 14px; }
body.home .step-tx p { color: var(--n-muted); font-size: 12px; margin-top: 2px; }

/* ---------- 底部说明 ---------- */
body.home .note-block {
  text-align: center; padding: 18px 16px 6px;
  color: var(--n-muted); font-size: 12.5px; letter-spacing: .5px;
}

/* ---------- 底部预约篮 ---------- */
body.home .cartbar {
  background: rgba(13, 17, 34, .94);
  border: 1px solid rgba(62, 224, 255, .3);
  box-shadow: 0 -8px 34px rgba(3, 6, 22, .65), 0 0 30px rgba(62, 224, 255, .12);
}
body.home .cartbar .info { color: var(--n-muted); }
body.home .cartbar .info b { color: var(--n-pink); }
body.home .cartbar .go {
  background: linear-gradient(135deg, #4ff0ff, #8b5cf6); color: #06121f;
  box-shadow: 0 10px 26px rgba(62, 224, 255, .45);
}
body.home .cartbar .go:hover { box-shadow: 0 14px 34px rgba(62, 224, 255, .6); }

/* ---------- 下单成功页（深色适配） ---------- */
body.home .success h2 { color: #fff; }
body.home .success p { color: var(--n-muted); }
body.home .success .box {
  background: rgba(18, 24, 46, .95); border: 1px solid var(--n-line); color: var(--n-text);
  box-shadow: 0 18px 44px rgba(3, 6, 22, .55);
}
body.home .success .box .r { border-bottom-color: rgba(130, 170, 255, .16); }
body.home .success .box .r b { color: #fff; }

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
  body.home .banner-wrap { margin-top: 0; }
  body.home .banner { min-height: 330px; padding: 22px 18px; border-radius: 20px; }
  body.home .banner-left { max-width: 100%; }
  body.home .bg-chr-1 { display: none; }
  body.home .bg-chr-2 { left: 20%; height: 78%; opacity: .8; }
  body.home .bg-chr-3 { right: 0; height: 76%; opacity: .85; }
  body.home .banner-title { font-size: 32px; letter-spacing: 2px; }
  body.home .banner-desc { font-size: 13.5px; }
  body.home .block { padding: 15px; border-radius: 18px; }
  body.home .block-head h2 { font-size: 17px; }
  body.home .steps { grid-template-columns: repeat(2, 1fr); }
  body.home .cta-main { padding: 11px 24px; }
  body.home .brand-mark { height: 26px; }
  body.home .card .thumb { height: 126px; }
  body.home .card .card-moe { top: -22px; right: -4px; }
  body.home .card .card-moe img { height: 116px; }
  body.home .topbar .nav-links a { padding: 6px 8px; }
  body.home .nav-full { display: none; }
  body.home .nav-mini { display: inline; }
  body.home .banner-mark { height: 62px; margin-bottom: 12px; }
  body.home .foot-mark { height: 54px; }
}

/* ---------- 套餐详情弹窗（粉色可爱风 · 纯展示只读） ---------- */
body.home .card { cursor: pointer; }
body.home #svcModal.modal-mask {
  background: rgba(92, 34, 72, .42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.home .svc-modal {
  background:
    radial-gradient(rgba(255, 255, 255, .92) 1.5px, transparent 1.6px) 0 0 / 16px 16px,
    linear-gradient(165deg, #fff6fb 0%, #ffeef7 46%, #fdf0ff 100%);
  border: 2px solid #ffc6e0;
  border-radius: 26px;
  color: #6b3a55;
  box-shadow:
    0 26px 60px rgba(150, 40, 100, .28),
    0 0 0 6px rgba(255, 255, 255, .55),
    inset 0 0 40px rgba(255, 190, 222, .35);
}
body.home .svc-modal h3 {
  background: linear-gradient(135deg, #ffa8d4 0%, #ff7ab8 55%, #ff9ed6 100%);
  color: #fff;
  font-size: 18px;
  letter-spacing: .5px;
  text-shadow: 0 2px 8px rgba(190, 50, 115, .38);
  border-radius: 24px 24px 0 0;
}
body.home .svc-modal h3::after { content: ' \2661'; font-size: 15px; opacity: .9; }

body.home .svc-rows { font-size: 14px; }
body.home .svc-rows .r {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 14px; margin-bottom: 8px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(255, 190, 222, .8);
  border-radius: 14px;
  color: #b0708f;
}
body.home .svc-rows .r:first-child {
  align-items: center;
  padding: 12px 16px; margin-bottom: 10px;
  background: linear-gradient(135deg, #fff2f9 0%, #ffe0f0 100%);
  border: 1px solid #ffbcda;
  box-shadow: 0 6px 14px rgba(255, 140, 190, .18);
}
body.home .svc-rows .r b { color: #7d3f60; font-weight: 700; }
body.home .svc-price {
  font-size: 27px; font-weight: 900; line-height: 1; color: #ff4d97;
  text-shadow: 0 2px 0 #ffd9ea, 0 0 16px rgba(255, 130, 185, .5);
}
body.home .svc-price i { font-style: normal; font-size: 16px; margin-right: 2px; }
body.home .svc-desc { padding: 10px 4px 2px; }
body.home .svc-desc .k { display: block; color: #d94f97; font-weight: 700; margin-bottom: 6px; }
body.home .svc-desc p { margin: 0; color: #6b3a55; line-height: 1.7; }
body.home .svc-tip { margin: 16px 0 0; text-align: center; font-size: 12.5px; color: #c07ba0; }
body.home .svc-tip::before { content: '\2661  '; color: #ff8fc5; }

/* 详情介绍（弹窗内的长文板块） */
body.home .svc-block {
  margin-top: 16px; padding: 14px 4px 2px;
  border-top: 2px dashed #ffcfe5;
}
body.home .blk-title {
  display: inline-block; margin-bottom: 12px; padding: 4px 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .5px; color: #fff;
  background: linear-gradient(135deg, #ffa3cf, #ff6fb0);
  border-radius: 999px;
  box-shadow: 0 5px 12px rgba(255, 120, 180, .35);
}
body.home .blk-title::before { content: '\2661  '; }
body.home .svc-detail { color: #6b3a55; line-height: 1.74; }
body.home .d-p { margin: 8px 0; }
body.home .d-kv { display: flex; gap: 10px; padding: 5px 0; align-items: flex-start; }
body.home .d-kv .k {
  flex: 0 0 auto; min-width: 62px; padding: 1px 8px;
  color: #d94f97; font-weight: 700;
  background: rgba(255, 214, 234, .7);
  border-radius: 8px;
  text-align: center;
}
body.home .d-kv .v { flex: 1; color: #5c2d47; }
body.home .d-li { position: relative; margin: 6px 0 6px 2px; padding-left: 16px; }
body.home .d-li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff8fc5;
  box-shadow: 0 0 0 3px rgba(255, 190, 222, .5);
}
body.home .d-li.d-num::before { display: none; }
body.home .d-li.d-num { padding-left: 0; color: #a83e78; font-weight: 700; }
body.home .svc-figure { margin-top: 14px; }
body.home .svc-figure img {
  display: block; width: 100%; border-radius: 14px;
  border: 2px solid #ffcfe5;
}

/* 粉色圆润按钮 */
body.home .svc-modal .btn-primary {
  padding: 10px 30px; border-radius: 999px;
  background: linear-gradient(135deg, #ffa0cf 0%, #ff5fa2 100%);
  box-shadow: 0 8px 18px rgba(255, 95, 162, .4);
}
body.home .svc-modal .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(255, 95, 162, .52);
}
body.home .svc-modal .modal-actions { margin-top: 18px; }

/* =========================================================
   投诉反馈弹窗
   ========================================================= */
body.home #fbModal.modal-mask { background: rgba(8, 16, 38, .62); }
body.home .fb-modal {
  background: linear-gradient(168deg, rgba(22, 28, 54, .99), rgba(11, 15, 32, .99));
  border: 1px solid rgba(130, 170, 255, .28);
  box-shadow: 0 26px 64px rgba(3, 6, 22, .7), 0 0 0 1px rgba(62, 224, 255, .12);
  color: var(--n-text);
}
body.home .fb-modal h3 {
  background: linear-gradient(135deg, #4ff0ff, #8b5cf6);
  color: #06121f; font-weight: 800;
}
body.home .fb-modal .fb-sub {
  margin: -6px 0 16px; font-size: 13px; color: var(--n-muted);
}
body.home .fb-modal .field label { color: #aebfe0; }
body.home .fb-modal .field label .req { color: #ff6ec7; }
body.home .fb-modal .field input,
body.home .fb-modal .field textarea {
  background: rgba(10, 14, 30, .78);
  border: 1px solid rgba(130, 170, 255, .22);
  color: var(--n-text);
}
body.home .fb-modal .field input::placeholder,
body.home .fb-modal .field textarea::placeholder { color: #63719a; }
body.home .fb-modal .field input:focus,
body.home .fb-modal .field textarea:focus {
  border-color: var(--n-cyan);
  box-shadow: 0 0 0 3px rgba(62, 224, 255, .16);
  background: rgba(12, 18, 38, .9);
}
body.home .fb-types { display: flex; flex-wrap: wrap; gap: 8px; }
body.home .fb-type {
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 600;
  color: var(--n-muted);
  background: rgba(20, 26, 50, .85);
  border: 1px solid var(--n-line);
  transition: all .16s;
}
body.home .fb-type:hover { border-color: rgba(62, 224, 255, .55); color: #fff; }
body.home .fb-type.active {
  background: linear-gradient(135deg, #4ff0ff, #8b5cf6);
  color: #06121f; border-color: transparent;
  box-shadow: 0 0 18px rgba(62, 224, 255, .45);
}
body.home .fb-tip { min-height: 20px; font-size: 13px; margin-top: 4px; text-align: center; }
body.home .fb-tip.err { color: #ff8bb8; }
body.home .fb-tip.ok { color: #6ee7a8; }
body.home .fb-modal .btn-ghost {
  background: rgba(20, 26, 50, .9); border-color: var(--n-line); color: var(--n-muted);
}
body.home .fb-modal .btn-ghost:hover { border-color: var(--n-cyan); color: #fff; background: rgba(30, 40, 72, .95); }
body.home .fb-modal .btn-primary {
  background: linear-gradient(135deg, #4ff0ff, #8b5cf6); color: #06121f;
  box-shadow: 0 8px 20px rgba(62, 224, 255, .4);
}
body.home .fb-modal .btn-primary:disabled { opacity: .6; cursor: not-allowed; }

@media (max-width: 640px) {
  body.home .fb-modal .row2 { flex-direction: column; gap: 0; }
}

/* =========================================================
   陪玩评价区（独立区块 · 头像 + 三项星级评分）
   ========================================================= */
body.home .player-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
}
body.home .player-card {
  position: relative; overflow: hidden;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: linear-gradient(168deg, rgba(24, 30, 58, .95), rgba(12, 16, 34, .96));
  border: 1px solid rgba(130, 170, 255, .20);
  box-shadow: 0 12px 30px rgba(3, 6, 22, .5);
  transition: transform .2s, border-color .2s, box-shadow .2s;
  animation: pcIn .45s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: var(--pc-delay, 0ms);
}
@keyframes pcIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.home .player-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 88% -10%, rgba(139, 92, 246, .22), transparent 62%);
}
body.home .player-card:hover {
  transform: translateY(-5px);
  border-color: rgba(62, 224, 255, .55);
  box-shadow: 0 0 0 1px rgba(62, 224, 255, .28), 0 20px 44px rgba(3, 6, 22, .62);
}
/* --- 头部：头像 + 名字 --- */
body.home .player-card .p-head { position: relative; z-index: 1; display: flex; gap: 13px; align-items: center; margin-bottom: 13px; }
body.home .player-card .p-avatar-ring {
  position: relative; flex: none;
  width: 60px; height: 60px; border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(135deg, #4ff0ff, #8b5cf6 55%, #ff6ec7);
  box-shadow: 0 0 20px rgba(62, 224, 255, .42);
}
body.home .player-card .p-avatar {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; object-position: 50% 12%;
  background: linear-gradient(135deg, #1b2450, #2a1a54);
}
body.home .player-card .p-avatar-ph {
  display: grid; place-items: center; color: #dff3ff;
  font-size: 24px; font-weight: 800;
}
body.home .player-card .p-online {
  position: absolute; right: 1px; bottom: 3px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #22e07a; border: 2.5px solid #0b0f22;
  box-shadow: 0 0 10px rgba(34, 224, 122, .85);
}
body.home .player-card .p-id { min-width: 0; flex: 1; }
body.home .player-card .p-name {
  font-size: 16.5px; font-weight: 800; color: #fff; letter-spacing: .4px;
  text-shadow: 0 0 16px rgba(62, 224, 255, .35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.home .player-card .p-title {
  font-size: 12px; color: var(--n-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.home .player-card .p-orders { font-size: 11.5px; color: #7f8fb5; margin-top: 3px; }
body.home .player-card .p-orders b { color: var(--n-cyan); font-size: 13px; }

/* --- 三项评分 --- */
body.home .player-card .p-scores {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 7px;
  padding: 11px 12px; margin-bottom: 11px;
  border-radius: 13px;
  background: rgba(10, 14, 30, .62);
  border: 1px solid rgba(130, 170, 255, .13);
}
body.home .player-card .score-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
body.home .player-card .score-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: #c3d1ef; white-space: nowrap;
}
body.home .player-card .sc-ic { font-style: normal; font-size: 13px; filter: saturate(1.2); }
body.home .player-card .stars { display: inline-flex; align-items: center; gap: 2px; }
body.home .player-card .stars .st {
  font-style: normal; font-size: 13px; line-height: 1;
  transition: transform .2s;
}
body.home .player-card .stars .st.on { color: #ffc531; text-shadow: 0 0 9px rgba(255, 197, 49, .62); }
body.home .player-card .stars .st.off { color: rgba(140, 160, 200, .28); }
body.home .player-card .stars .st-num {
  margin-left: 5px; font-size: 11.5px; font-weight: 800;
  color: #ffd76b; letter-spacing: .3px;
}
body.home .player-card:hover .stars .st.on { animation: stPop .42s ease both; }
body.home .player-card:hover .stars .st.on:nth-child(2) { animation-delay: .05s; }
body.home .player-card:hover .stars .st.on:nth-child(3) { animation-delay: .1s; }
body.home .player-card:hover .stars .st.on:nth-child(4) { animation-delay: .15s; }
body.home .player-card:hover .stars .st.on:nth-child(5) { animation-delay: .2s; }
@keyframes stPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.32) rotate(-8deg); }
  100% { transform: scale(1); }
}

/* --- 标签 / 评语 --- */
body.home .player-card .p-tags {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
body.home .player-card .p-tag {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  color: #bcd6ff; background: rgba(120, 160, 255, .13);
  border: 1px solid rgba(130, 170, 255, .26);
}
body.home .player-card .p-comment {
  position: relative; z-index: 1;
  font-size: 12.5px; line-height: 1.66; color: var(--n-muted);
  padding-left: 10px; border-left: 2px solid rgba(255, 110, 199, .45);
}

@media (max-width: 640px) {
  body.home .player-grid { grid-template-columns: 1fr; gap: 12px; }
  body.home .player-card { padding: 14px 14px 12px; border-radius: 16px; }
  body.home .player-card .p-avatar-ring { width: 52px; height: 52px; }
  body.home .player-card .p-name { font-size: 15px; }
  body.home .player-card .stars .st { font-size: 12px; }
  body.home .svc-modal { border-radius: 22px; }
  body.home .svc-modal h3 { border-radius: 20px 20px 0 0; }
  body.home .svc-rows .r { padding: 8px 12px; }
  body.home .svc-price { font-size: 23px; }
}


/* =========================================================
   背景音乐 · 悬浮唱片按钮（右下角固定）
   设计：霓虹唱片 + 呼吸光晕 + 播放时音波跳动
   ========================================================= */
body.home .bgm-dock {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  background: linear-gradient(150deg, rgba(62, 224, 255, .16), rgba(139, 92, 246, .20) 52%, rgba(255, 110, 199, .16));
  border: 1px solid rgba(140, 180, 255, .32);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow:
    0 8px 26px rgba(0, 0, 0, .46),
    0 0 0 1px rgba(255, 255, 255, .05) inset,
    0 0 22px rgba(62, 224, 255, .12);
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, border-color .3s ease;
}
body.home .bgm-dock:hover {
  transform: translateY(-3px) scale(1.06);
  border-color: rgba(160, 200, 255, .55);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(255, 255, 255, .08) inset,
    0 0 30px rgba(62, 224, 255, .34),
    0 0 52px rgba(139, 92, 246, .24);
}
body.home .bgm-dock:active { transform: scale(.95); }
body.home .bgm-dock:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: 3px; }

/* 呼吸光晕：关闭时几乎不动，开启时明显脉动 */
body.home .bgm-glow {
  position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(62, 224, 255, .30), transparent 68%);
  opacity: 0; transition: opacity .45s ease;
}
body.home .bgm-dock.on .bgm-glow { opacity: 1; animation: bgmPulse 2.6s ease-in-out infinite; }
@keyframes bgmPulse {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(1.26); opacity: .14; }
}

/* 唱片本体 */
body.home .bgm-disc {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, .075) 0 1.5px,
      transparent 1.5px 4px),
    conic-gradient(from 0deg, #1a2350, #2a1a54, #14284a, #2b1d52, #1a2350);
  box-shadow: 0 0 0 1px rgba(140, 180, 255, .22) inset, 0 2px 8px rgba(0, 0, 0, .5);
}
body.home .bgm-disc.spin { animation: bgmSpin 7.5s linear infinite; }
@keyframes bgmSpin { to { transform: rotate(360deg); } }

/* 唱片中心：渐变轴心 + 中心孔 */
body.home .bgm-art {
  position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--n-cyan), var(--n-purple) 55%, var(--n-pink));
  box-shadow: 0 0 12px rgba(62, 224, 255, .55);
  opacity: .92;
}
body.home .bgm-hole {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #070a18; box-shadow: 0 0 0 1.5px rgba(160, 200, 255, .35);
}

/* 播放 / 暂停图标：叠在唱片上，默认不显示，hover 时浮出来 */
body.home .bgm-ic {
  position: absolute; width: 22px; height: 22px; fill: #fff;
  opacity: 0; transform: scale(.7);
  transition: opacity .22s ease, transform .22s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7));
}
body.home .bgm-ic-pause { display: none; }
body.home .bgm-dock:hover .bgm-ic-play  { opacity: 1; transform: scale(1); }
body.home .bgm-dock.on .bgm-ic-play  { display: none; }
body.home .bgm-dock.on .bgm-ic-pause { display: block; }
body.home .bgm-dock.on:hover .bgm-ic-pause { opacity: 1; transform: scale(1); }
/* 播放中：轴心略缩，保留霓虹渐变（不模糊，维持质感） */
body.home .bgm-dock.on .bgm-art {
  width: 15px; height: 15px; opacity: .9;
  box-shadow: 0 0 10px rgba(62, 224, 255, .7), 0 0 22px rgba(255, 110, 199, .35);
  transition: width .25s ease, height .25s ease, opacity .25s ease;
}
/* hover：轴心进一步让位给播放/暂停图标 */
body.home .bgm-dock:hover .bgm-art {
  width: 15px; height: 15px; opacity: .30;
  transition: width .25s ease, height .25s ease, opacity .25s ease;
}
body.home .bgm-dock.on:hover .bgm-art { opacity: .22; }

/* 音波条：开启时才跳，放在按钮左上方 */
body.home .bgm-bars {
  position: absolute; left: -4px; bottom: 8px;
  display: flex; align-items: flex-end; gap: 2.5px; height: 15px;
  opacity: 0; transition: opacity .3s ease;
}
body.home .bgm-dock.on .bgm-bars { opacity: 1; }
body.home .bgm-bars i {
  display: block; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--n-cyan), var(--n-purple));
  box-shadow: 0 0 6px rgba(62, 224, 255, .6);
  animation: bgmBar 1.05s ease-in-out infinite;
}
body.home .bgm-bars i:nth-child(1) { height: 6px;  animation-delay: 0s; }
body.home .bgm-bars i:nth-child(2) { height: 13px; animation-delay: .18s; }
body.home .bgm-bars i:nth-child(3) { height: 9px;  animation-delay: .36s; }
@keyframes bgmBar {
  0%, 100% { transform: scaleY(.38); opacity: .55; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* 悬浮提示气泡（桌面 hover / 触摸设备靠 title） */
body.home .bgm-tip {
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap; font-size: 12px; font-weight: 600;
  color: #dff3ff; padding: 6px 11px; border-radius: 9px;
  background: rgba(12, 15, 32, .92);
  border: 1px solid rgba(130, 170, 255, .30);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}
body.home .bgm-dock:hover .bgm-tip {
  opacity: 1; transform: translateY(-50%) translateX(0);
}

@media (max-width: 640px) {
  body.home .bgm-dock { right: 14px; bottom: 14px; width: 54px; height: 54px; z-index: 55; }
  body.home .bgm-disc { width: 40px; height: 40px; }
  body.home .bgm-art  { width: 17px; height: 17px; }
  body.home .bgm-ic   { width: 19px; height: 19px; }
  body.home .bgm-tip  { display: none; }   /* 触屏无需气泡文字 */
}

/* 尊重系统「减少动效」偏好 */
@media (prefers-reduced-motion: reduce) {
  body.home .bgm-disc.spin,
  body.home .bgm-dock.on .bgm-glow,
  body.home .bgm-bars i { animation: none !important; }
}

/* =========================================================
   看板娘 · Q 版艾薇塔（睡觉 / 鼠标唤醒）
   左下角固定，睡觉时有呼吸起伏 + Zzz 飘动，hover 时醒来打招呼
   ========================================================= */
body.home .evita-dock {
  position: fixed; left: -14px; bottom: 0; z-index: 45;
  /* 图片原始比例约 985:960（≈1.026），盒子按同比例设，contain 下刚好铺满不留空 */
  width: 178px; height: 174px;
  display: flex; align-items: flex-end; justify-content: center;
  cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  opacity: .92;
  transition: opacity .4s ease, transform .4s ease;
}
body.home .evita-dock:hover,
body.home .evita-dock.awake { opacity: 1; }

/* 背后的柔光：睡觉时微弱的青紫光，醒来变亮变粉 */
body.home .evita-glow {
  position: absolute; left: 50%; bottom: -10px;
  width: 240px; height: 150px; margin-left: -120px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(139, 92, 246, .30), rgba(62, 224, 255, .12) 45%, transparent 72%);
  filter: blur(18px);
  opacity: .75;
  transition: opacity .5s ease, background .5s ease;
  pointer-events: none;
}
body.home .evita-dock:hover .evita-glow,
body.home .evita-dock.awake .evita-glow {
  opacity: 1;
  background: radial-gradient(ellipse, rgba(255, 110, 199, .38), rgba(139, 92, 246, .20) 45%, transparent 72%);
}

/* 图片容器：两张图叠放，靠透明度切换 */
body.home .evita-body {
  position: relative; width: 100%; height: 100%;
  display: block;
  animation: evitaBreathe 4.2s ease-in-out infinite;
  transform-origin: 50% 100%;
  transition: filter .4s ease;
}
/* 呼吸：轻微上下 + 极小的纵向缩放（像在起伏） */
@keyframes evitaBreathe {
  0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); }
  50%      { transform: translateY(4px) scaleY(1.018) scaleX(.994); }
}

body.home .evita-pic {
  position: absolute; inset: 0;
  display: block;
  transition: opacity .32s ease, transform .32s cubic-bezier(.34, 1.56, .64, 1);
}
body.home .evita-pic picture,
body.home .evita-pic img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
}
body.home .evita-pic-sleep { opacity: 1; transform: scale(1); }
body.home .evita-pic-awake { opacity: 0; transform: scale(.96); }

/* 醒来：切换显隐 + 轻微弹跳 */
body.home .evita-dock:hover .evita-pic-sleep,
body.home .evita-dock.awake .evita-pic-sleep { opacity: 0; transform: scale(.97); }
body.home .evita-dock:hover .evita-pic-awake,
body.home .evita-dock.awake .evita-pic-awake { opacity: 1; transform: scale(1); }

/* 醒来时停止呼吸动画，改成一个轻快的"起身"动作 */
body.home .evita-dock:hover .evita-body,
body.home .evita-dock.awake .evita-body {
  animation: evitaWake 2.6s ease-in-out infinite;
}
@keyframes evitaWake {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35%      { transform: translateY(-11px) rotate(-1.6deg); }
  70%      { transform: translateY(-3px) rotate(1.2deg); }
}

/* 睡眠气泡：睡觉时显示 */
body.home .evita-bubble {
  position: absolute; top: 14px; right: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .5px;
  color: #cfe6ff;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(14, 18, 38, .9);
  border: 1px solid rgba(130, 175, 255, .35);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
  white-space: nowrap;
  opacity: 0;
  /* 用 CSS 变量承载水平位移，让浮动动画只作用于 Y 轴，两者不冲突 */
  transform: translateX(var(--bub-x, 0));
  animation: evitaBubbleFloat 3.6s ease-in-out infinite;
  pointer-events: none;
  transition: opacity .3s ease;
}
body.home .evita-bubble::after {
  content: ""; position: absolute; left: 20px; bottom: -5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(14, 18, 38, .9);
  border-right: 1px solid rgba(130, 175, 255, .35);
  border-bottom: 1px solid rgba(130, 175, 255, .35);
  transform: rotate(45deg);
}
/* 只在没有唤醒时显示气泡（用 :not 配合 JS 的 awake 类） */
body.home .evita-dock:not(:hover):not(.awake) .evita-bubble { opacity: .92; }
@keyframes evitaBubbleFloat {
  0%, 100% { transform: translateX(var(--bub-x, 0)) translateY(0); }
  50%      { transform: translateX(var(--bub-x, 0)) translateY(-6px); }
}
/* 醒来时气泡换成招呼语（内容由 JS 改） */
body.home .evita-dock:hover .evita-bubble,
body.home .evita-dock.awake .evita-bubble {
  opacity: 1;
  color: #ffe3f3;
  background: rgba(46, 16, 40, .92);
  border-color: rgba(255, 140, 205, .5);
  animation: evitaHelloPop .5s cubic-bezier(.34, 1.56, .64, 1);
}
body.home .evita-dock:hover .evita-bubble::after,
body.home .evita-dock.awake .evita-bubble::after {
  background: rgba(46, 16, 40, .92);
  border-color: rgba(255, 140, 205, .5);
}
@keyframes evitaHelloPop {
  0%   { transform: translateX(var(--bub-x, 0)) scale(.7); opacity: 0; }
  60%  { transform: translateX(var(--bub-x, 0)) scale(1.08); opacity: 1; }
  100% { transform: translateX(var(--bub-x, 0)) scale(1); opacity: 1; }
}

/* 触摸设备：用 .awake 类代替 :hover */
@media (hover: none) {
  body.home .evita-dock:hover .evita-pic-sleep,
  body.home .evita-dock:hover .evita-pic-awake,
  body.home .evita-dock:hover .evita-body,
  body.home .evita-dock:hover .evita-bubble,
  body.home .evita-dock:hover .evita-glow { /* 交给 .awake 类控制 */ }
}

/* 各档屏幕尺寸适配
   策略：宽屏（>1300）贴左边缘浮在内容之上；
         中屏（900-1300）容器贴边，下沉到卡片之下做背景装饰；
         窄屏（<=900）改为右下角悬浮，与右下 BGM 按钮上下错开，保证手机上看得见
   所有尺寸均按图片原始比例 1.026 计算高度（高 = 宽 / 1.026），避免 contain 留白 */
@media (max-width: 1420px) {
  body.home .evita-dock { width: 158px; height: 154px; left: -16px; }
}
@media (max-width: 1300px) {
  /* 容器开始贴边，看板娘下沉到卡片之下，只露出边缘部分 */
  body.home .evita-dock { z-index: 0; opacity: .5; }
  body.home .evita-dock:hover,
  body.home .evita-dock.awake { opacity: .78; }
}
@media (max-width: 1180px) {
  body.home .evita-dock { width: 138px; height: 134px; left: -14px; opacity: .42; }
  body.home .evita-dock:hover,
  body.home .evita-dock.awake { opacity: .72; }
}

/* ---- 窄屏 / 手机：右下角悬浮，与 BGM 按钮纵向叠成一组挂件 ---- */
@media (max-width: 900px) {
  body.home .evita-dock {
    left: auto; right: 8px; bottom: 78px;   /* BGM 顶边在 bottom:68，留 10px 间隙 */
    width: 108px; height: 105px;
    z-index: 44;                            /* 回到内容之上 */
    opacity: .82;                           /* 手机内容满宽，压低做轻量挂件 */
  }
  body.home .evita-dock:hover,
  body.home .evita-dock.awake { opacity: 1; }
  body.home .evita-glow { width: 134px; height: 86px; margin-left: -67px; bottom: -12px; }
  /* 气泡移到人物正上方居中，避免压住卡片文字 */
  body.home .evita-bubble {
    font-size: 11px; padding: 4px 9px;
    top: -16px; left: 50%; right: auto;
    --bub-x: -50%;
  }
  body.home .evita-bubble::after { left: 50%; margin-left: -4px; }
}
/* 平板（641-900）：BGM 按钮仍用桌面尺寸 62px（bottom 22 + 62 = 84），看板娘需抬高到 96 以上 */
@media (max-width: 900px) and (min-width: 641px) {
  body.home .evita-dock { bottom: 100px; right: 14px; width: 122px; height: 119px; }
  body.home .evita-glow { width: 152px; height: 96px; margin-left: -76px; bottom: -14px; }
}
@media (max-width: 640px) {
  body.home .evita-dock { right: 8px; bottom: 74px; width: 94px; height: 92px; opacity: .8; }
  body.home .evita-glow { width: 118px; height: 74px; margin-left: -59px; bottom: -10px; }
  body.home .evita-bubble { font-size: 10.5px; padding: 3px 8px; top: -14px; }
}
@media (max-width: 420px) {
  body.home .evita-dock { right: 6px; bottom: 72px; width: 80px; height: 78px; opacity: .78; }
  body.home .evita-glow { width: 98px; height: 62px; margin-left: -49px; bottom: -9px; }
  body.home .evita-bubble { font-size: 10px; padding: 3px 7px; top: -13px; }
}

/* 尊重「减少动效」 */
@media (prefers-reduced-motion: reduce) {
  body.home .evita-body,
  body.home .evita-dock .evita-body,
  body.home .evita-bubble { animation: none !important; }
}