/* ============================================================
   主页（展示页）
     bg.jpg     1883x909  背景图（铺满整个窗口，不虚化）
     logo2.png  415x197   右上角 logo
     底部动作条：在线玩 / Android 下载 / iOS 下载
   ★ 位置与大小都在下面 :root 的变量里调，改完刷新即可
   ============================================================ */

:root {
  /* ---- 渐变遮罩（让文字/按钮更清楚） ---- */
  --scrim-color: 6, 10, 20;      /* 遮罩颜色（RGB） */
  --scrim-top-h: 22vh;           /* 顶部遮罩高度 */
  --scrim-top-a: .42;            /* 顶部浓度 */
  --scrim-bottom-h: 34vh;        /* 底部遮罩高度 */
  --scrim-bottom-a: .78;         /* 底部浓度 */

  /* ---- 背景图 ---- */
  --bg-blur: 3px;            /* 虚化程度：0 = 不虚化；3px 轻微，8px 更糊 */
  --bg-dim: .97;             /* 亮度：1 = 不变，越低越暗 */

  /* ---- 背景图取景 ----
     横图在宽屏显示：center center 基本能看到整幅
     手机竖屏只露中间约 1/4 宽，要单独指定看哪一段（下面对照着调）
       --bg-position-mobile 取景位置 → 手机上看到的画面
         12% center  → 左边竹子 / 铜钟 / 紫水晶
         40% center  → 左中 浮空山 + 小瀑布
         55% center  → 中间 楼阁 + 大瀑布（主体）
         62% center  → 楼阁 + 青色霓虹字（当前默认，能看到那组发光字）
         80% center  → 蓝龙 + 右侧树
         92% center  → 右侧紫色霓虹字 + 亭台
  */
  --bg-position: center center;        /* PC / 宽屏 */
  --bg-position-mobile: 70% center;    /* 手机（≤820px） */

  /* ---- 左上角品牌区（logo + 标语） ---- */
  --logo-top: 24px;          /* PC 距顶部 */
  --logo-left: 28px;         /* PC 距左侧 */
  /* ---- 手机（≤820px）：位置 + 整体缩放 ---- */
  --logo-top-mobile: 60px;  /* 手机距顶部（保留你调的值） */
  --logo-left-mobile: 14px;  /* 手机距左侧 */
  --logo-scale-mobile: .7;   /* 整块（logo + 标语）缩小 30%：.7 = 70% */

  /* ---- logo 下方标语：缘起九州·出尘惊鸿 ---- */
  --slogan-size: 30px;       /* 字号（手机会被上面的 0.7 一起缩小） */
  --slogan-color: #ffffff;   /* 字色 */
  --slogan-weight: 500;      /* 字重 */
  --slogan-spacing: 10px;     /* 字间距 */
  --slogan-gap: 6px;         /* 与 logo 的间距 */
  --slogan-shadow: 0 1px 5px #000000;  /* 金色渐变 */   /* 渐变字下面的暗影，保证可读 */   /* 描边阴影：深浅背景都看得清 */

  /* ---- 标语下方的轮播 ---- */
  --carousel-top: 350px;
  --carousel-margin-x: 4vw;       /* 左右各留出的宽度（越小越宽） */
  --carousel-bottom-gap: 110px;   /* 底部预留（给动作条） */
  --carousel-max-w: 1280px;       /* 最大宽度 */
  --carousel-scale: .72;

  /* ---- 舞台（轮播与下方介绍共用，保证介绍紧贴轮播底部） ---- */
  --stage-top: var(--carousel-top);
  --stage-w: calc(min(
    calc((100dvh - var(--carousel-top) - var(--carousel-bottom-gap)) * var(--carousel-ratio)),
    calc(100vw - var(--carousel-margin-x) * 2),
    var(--carousel-max-w)
  ) * var(--carousel-scale));
  --stage-h: calc(var(--stage-w) / var(--carousel-ratio));

  /* ---- 轮播下方的弹幕区 ---- */
  --danmaku-h: 300px;            /* 高度上限（空间不够时自动收缩到按钮上方） */
  --dm-gap: clamp(12px, 2vh, 24px);   /* 与轮播底部的间距 */
  --dm-lane-h: 38px;             /* 单条轨道高度（要与 home-danmaku.js 的 LANE_H 一致） */
  --dm-size: 16px;               /* 弹幕字号 */
  --dm-color: #ffffff;           /* 字色 */
  --dm-weight: 600;              /* 字重 */
  --dm-shadow: 0 1px 4px rgba(0, 0, 0, .8), 0 0 12px rgba(0, 0, 0, .5);  /* 描边阴影，压图也清楚 */
  --dm-opacity: .92;
  --dm-like-color: #ff9a9a;      /* ♥ 颜色 */
  --dm-count-color: #ffd9a0;     /* 点赞数字颜色 */             /* 整体透明度 */           /* 字重 */          /* PC 缩放系数：整个轮播大小 ×0.72（想更小改 .6，原尺寸改 1） */
  --carousel-offset-x: 0px;       /* 容器位置：0px = 居中（必须带单位，否则 calc() 失效）；想右移改 7vw */
  --carousel-ratio: 1.632;        /* 图片宽高比 620:380 */
  /* ---- 轮播外框（整个轮播外面那圈线框）---- */
  --carousel-border-w: 5px;                             /* 框线粗细（加粗了） */
  --carousel-border-color: #ffffff;                     /* 框线颜色 */
  --carousel-radius: 0px;        /* 圆角 */
  /* ---- 轮播切换指示线（底部那三根）---- */
  /* ---- 圆圈 123 指示 ---- */
  --dot-size: 26px;              /* 圆圈直径 */
  --dot-font: 13px;              /* 数字大小 */
  --dot-gap: 10px;               /* 圆圈间距 */
  --dot-bottom: 12px;            /* 距轮播底部 */
  --dot-border: rgba(255, 255, 255, .85);   /* 圈线颜色 */
  --dot-bg: rgba(8, 12, 22, .45);           /* 未选中底色 */
  --dot-color: #ffffff;                     /* 未选中数字颜色 */
  --dot-active-bg: #ffffff;                 /* 选中底色 */
  --dot-active-color: #1f2430;              /* 选中数字颜色 */

  /* ---- 底部动作条 ---- */
  --act-bottom: 40px;        /* PC 距底部 */
  --act-bottom-mobile: 18px; /* 手机距底部（另加安全区） */
  --act-h: 52px;             /* 按钮高度 */
  --act-h-mobile: 48px;
  --act-gap: 14px;           /* 按钮间距 */
  --act-w: 190px;            /* PC 按钮最小宽度 */
}

body.hp.home-bg {
  margin: 0;
  background: #0f1420;
  overflow: hidden;
}

/* ---------- 1) 背景图：bg.jpg（铺满窗口，不虚化） ---------- */
.bg-img {
  position: fixed;
  inset: -8px;                         /* 外扩：略大于虚化半径，边缘不露白 */
  width: calc(100% + 16px);
  height: calc(100dvh + 16px);
  object-fit: cover;                   /* 铺满，不留空白 */
  filter: blur(var(--bg-blur)) brightness(var(--bg-dim));   /* 轻度虚化 */
  object-position: var(--bg-position);
  z-index: 0;
  user-select: none;
  -webkit-user-drag: none;
}

@media screen and (max-width: 820px) {
  .bg-img { object-position: var(--bg-position-mobile); }   /* 手机单独取景，避免偏左 */
}

/* ---------- 2) 左上角品牌区：logo2.png + 标语 ----------
   .bg-brand 是整块容器（固定左上），logo 在下、标语在底下，间距由 --slogan-gap 控制
   保证"不管屏幕怎么缩放都在左上角"：
     position: fixed + top/left + 安全区 → 固定左上，刘海屏也不挡
     z-index: 9999                       → 永远最上层
   手机端整块用 scale 缩小（--logo-scale-mobile）
*/
.bg-brand {
  position: fixed;
  top: max(var(--logo-top), env(safe-area-inset-top));
  left: max(var(--logo-left), env(safe-area-inset-left));
  right: auto;
  bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: center;                 /* logo 与标语在 X 轴居中（互相对齐） */
  gap: var(--slogan-gap);              /* logo 与标语的间距 */
  z-index: 9999;
  pointer-events: none;                /* 目前只展示；以后要能点，删掉这行 */
}

.bg-logo {
  display: block;
  width: auto;                         /* 原尺寸 415px，不缩放 */
  height: auto;                        /* 原尺寸 197px */
  max-width: none;
  max-height: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 3px 6px rgb(158 64 36 / 0%));
}

/* logo 下方标语：缘起九州·出尘惊鸿 */
.bg-slogan {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'PingFang SC', sans-serif;
  font-size: var(--slogan-size);
  font-weight: var(--slogan-weight);
  color: var(--slogan-color);
  letter-spacing: var(--slogan-spacing);
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;                  /* 与 logo 同一中轴 */
  text-shadow: var(--slogan-shadow);
  user-select: none;
}

@media screen and (max-width: 820px) {
  .bg-brand {
    top: max(var(--logo-top-mobile), env(safe-area-inset-top));
    left: max(var(--logo-left-mobile), env(safe-area-inset-left));
    /* 手机端整块缩小 30%（logo 与标语一起缩）；用 scale 缩放，改数字即可调 */
    scale: var(--logo-scale-mobile);
    transform-origin: top left;        /* 从左上角缩，边距保持不变 */
  }
}

/* ---------- 3) 标语下方的轮播（三张图，随屏宽自适应） ----------
   宽度同时受三个上限约束（取最小值），再乘 --carousel-scale：
     ① 可用高度 × 宽高比  ② 屏宽 - 左右留白  ③ --carousel-max-w
   位置：--carousel-top（距顶）/ --carousel-offset-x（水平偏移）
*/
.carousel {
  --avail-h: calc(100dvh - var(--carousel-top) - var(--carousel-bottom-gap));
  position: fixed;
  top: var(--carousel-top);
  left: calc(50% + var(--carousel-offset-x));
  transform: translateX(-50%);
  width: calc(min(
    calc(var(--avail-h) * var(--carousel-ratio)),
    calc(100% - var(--carousel-margin-x) * 2),
    var(--carousel-max-w)
  ) * var(--carousel-scale));
  aspect-ratio: 620 / 380;                 /* 始终按原图比例 */
  border: var(--carousel-border-w) solid var(--carousel-border-color);   /* 外框线：整圈白框 */
  border-radius: 12px 0 12px 12px;   /* 左上 / 左下 / 右下 圆角，右上直角与按钮相接 */
  overflow: hidden;
  background: rgba(0, 0, 0, .18);
  box-shadow: 0 12px 34px rgba(12, 18, 32, .45);   /* 只留普通投影，不要蓝色线 */
  z-index: 50;                             /* 背景之上、动作条(100)之下 */
}

.carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity .5s ease, transform 1.1s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.carousel-slide { transform: scale(1.045); }
.carousel-slide.is-active { opacity: 1; transform: scale(1); }

/* 底部圆圈 123 指示（点击可跳转） */
.carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--dot-bottom);
  display: flex;
  align-items: center;
  justify-content: center;   /* 圆圈固定在轮播底部正中 */
  gap: var(--dot-gap);
  z-index: 3;
}
.carousel-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dot-size);
  height: var(--dot-size);
  padding: 0;
  border: 2px solid var(--dot-border);
  border-radius: 50%;
  background: var(--dot-bg);
  color: var(--dot-color);
  font: 700 var(--dot-font)/1 -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.carousel-dot:hover { border-color: #fff; transform: translateY(-1px); }
.carousel-dot.is-active {
  background: var(--dot-active-bg);
  border-color: var(--dot-active-bg);
  color: var(--dot-active-color);
  transform: scale(1.08);
}

/* 手机端：留白更小、不再左右错开（屏幕窄，错开会跑出边） */
@media screen and (max-width: 820px) {
  .carousel-dot { width: 24px; height: 24px; font-size: 12px; }
}
@media screen and (max-width: 820px) {
  :root {
    --carousel-top: 300px;
    --carousel-margin-x: 3vw;
    --carousel-bottom-gap: 140px;
    --carousel-offset-x: 0px;
    --carousel-scale: 1;          /* 手机端不额外缩小 */
  }
}

/* ---------- 4) 底部动作条：在线玩 / Android 下载 / iOS 下载 ---------- */
.land-actions {
  position: fixed;
  left: 50%;
  bottom: calc(var(--act-bottom) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--act-gap);
  z-index: 100;
}

.act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--act-h);
  min-width: var(--act-w);
  padding: 0 22px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .9);
  color: #1f2430;
  font: 600 16px/1 -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px rgba(12, 18, 32, .18);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.act:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(12, 18, 32, .24); }
.act:active { transform: translateY(0); }
.act-ico { width: 20px; height: 20px; flex: 0 0 20px; fill: currentColor; }

.act-play { background: #3f6bff; border-color: #3f6bff; color: #fff; }
.act-play:hover { background: #3157e0; }
.act-android .act-ico { color: #22b573; }
.act-ios .act-ico { color: #1f2430; }

/* 手机端：在线玩整宽在上，两个下载并排在下一行 */
@media screen and (max-width: 820px) {
  .land-actions {
    left: 16px;
    right: 16px;
    transform: none;
    bottom: calc(var(--act-bottom-mobile) + env(safe-area-inset-bottom));
    flex-wrap: wrap;
    gap: 10px;
  }
  .act { min-width: 0; height: var(--act-h-mobile); font-size: 15px; padding: 0 14px; border-radius: 24px; }
  .act-play { flex: 1 1 100%; }
  .act-android, .act-ios { flex: 1 1 0; }
}

/* ============================================================
   细节打磨层（放在最后，方便覆盖）
   ============================================================ */

/* ① 顶部/底部渐变遮罩：让 logo、标语、按钮在浅色背景上也看得清
   z-index 40 → 压住背景图(0)，但不影响轮播(50)、品牌区(9999)、按钮(100) */
body.hp.home-bg::before,
body.hp.home-bg::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 40;
}
body.hp.home-bg::before {
  top: 0;
  height: var(--scrim-top-h);
  background: linear-gradient(to bottom, rgba(var(--scrim-color), var(--scrim-top-a)), rgba(var(--scrim-color), 0));
}
body.hp.home-bg::after {
  bottom: 0;
  height: var(--scrim-bottom-h);
  background: linear-gradient(to top, rgba(var(--scrim-color), var(--scrim-bottom-a)), rgba(var(--scrim-color), 0));
}

/* ⑤ 进场依次淡入上浮：品牌区 → 轮播 → 按钮 */
@keyframes hpRiseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hpRiseInCenter {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.bg-brand     { animation: hpRiseIn .7s cubic-bezier(.22, .8, .3, 1) .05s both; }
.carousel     { animation: hpRiseInCenter .7s cubic-bezier(.22, .8, .3, 1) .22s both; }
.land-actions { animation: hpRiseIn .7s cubic-bezier(.22, .8, .3, 1) .38s both; }

/* 系统开了"减少动态效果"时，去掉动画/过渡（只影响动效，不影响显示） */
@media (prefers-reduced-motion: reduce) {
  .bg-brand, .carousel, .land-actions { animation: none; }
  .carousel-slide { transition: none; transform: none; }
  .carousel-progress > i { animation: none; width: 100%; }
}

/* ============================================================
   轮播下方的介绍（动态字：打字机 + 闪烁光标）
   位置紧跟轮播底部：top = 轮播顶 + 轮播高 + --intro-gap
   ============================================================ */ 

@media screen and (max-width: 820px) {
  
  
}

/* ============================================================
   轮播下方的弹幕区（宽度随轮播；高度上限 --danmaku-h）
   位置：紧贴轮播底部 → 一直延伸到动作条上方，空间不足自动变矮
   ============================================================ */
.danmaku {
  position: fixed;
  top: calc(var(--stage-top) + var(--stage-h) + var(--dm-gap));
  left: calc(50% + var(--carousel-offset-x));
  transform: translateX(-50%);
  width: var(--stage-w);                                   /* 宽度 = 轮播宽度 */
  bottom: calc(var(--act-bottom) + var(--act-h) + 22px);   /* 到按钮上方为止 */
  max-height: var(--danmaku-h);                            /* 高度上限 300px */
  overflow: hidden;
  z-index: 55;                     /* 背景(0)/遮罩(40) 之上、动作条(100) 之下 */
  pointer-events: none;            /* 纯展示，不挡点击 */
  /* 左右两端淡出，弹幕进出更自然 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.danmaku-lane {
  position: relative;
  height: var(--dm-lane-h);
  line-height: var(--dm-lane-h);
}
.dm-item {
  position: absolute;
  top: 0;
  left: 100%;                      /* 从右边缘外进入 */
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'PingFang SC', sans-serif;
  font-size: var(--dm-size);
  font-weight: var(--dm-weight);
  color: var(--dm-color);
  opacity: var(--dm-opacity);
  text-shadow: var(--dm-shadow);
  will-change: transform;
  animation-name: dmRun;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* 点赞数：♥ + 数字（在文案前面） */
.dm-like {
  font-style: normal;
  margin-right: 3px;
  color: var(--dm-like-color);
}
.dm-count {
  margin-right: 8px;
  font-size: .86em;
  font-weight: 700;
  color: var(--dm-count-color);
}
@keyframes dmRun {
  from { transform: translate(0, var(--dm-dy, 0)); }
  to   { transform: translate(calc(-1 * var(--dm-travel, 120%)), var(--dm-dy, 0)); }
}

@media screen and (max-width: 820px) {
  .danmaku {
    --dm-gap: clamp(16px, 3vh, 34px);   /* 手机端再往下一点 */ --danmaku-h: 240px; --dm-lane-h: 32px; --dm-size: 14px; }
}