/* ========== 唯一星锻师 ========== */
:root {
  /* 锻造主题：熔铁暗底＋熔金＋炉火；冰蓝只留给 LOGO 的星芒 */
  --abyss: #0b0806;
  --night: #120d0a;
  --steel: #1e1611;
  --line: #3a2a1d;
  --ember: #ff7a2e;
  --ember-hi: #ffb067;
  --gold: #f2c46d;
  --gold-hi: #ffe6a8;
  --bronze: #b0702c;
  --frost: #f2c46d;   /* 主强调色（原冰蓝）改为熔金 */
  --ice: #a9ddf7;     /* 星芒点缀 */
  --mist: #f7efe4;
  --dim: #bcae9b;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Hiragino Sans GB", sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 70px; }

body {
  font-family: var(--sans);
  color: var(--mist);
  background: var(--abyss);
  overflow-x: hidden;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
b, strong { font-weight: 700; }
a { color: inherit; }

/* ---------- swal ---------- */
.swal2-styled.swal2-confirm { background-color: var(--ember); color: #1a0f08; }
.swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 3px var(--ember-hi); }

/* ---------- QR ---------- */
#qr {
  position: fixed; z-index: 999; right: 24px; bottom: 24px;
  width: 92px; padding: 6px 8px 8px;
  background: var(--mist); color: var(--night);
  border-radius: 4px; text-align: center; cursor: pointer; display: none;
  box-shadow: 0 0 0 1px var(--frost), 0 0 24px rgba(242, 196, 109, .45);
}
#qr h5 { font-size: 12px; padding: 2px 0 6px; }
#qr img { width: 100%; }

/* ---------- 导航 ---------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 60px;
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(to bottom, rgba(11, 8, 6, .94), rgba(11, 8, 6, .65));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(242, 196, 109, .35);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 6px 20px -8px rgba(255, 140, 50, .35);
}
.logo { position: absolute; left: 14px; top: 0; bottom: 0; height: 40px; margin: auto; display: flex; align-items: center; }
.logo img { height: 40px; width: auto; }
.logo a { display: block; }

#menu_control { position: absolute; opacity: 0; pointer-events: none; }
.menu_btn {
  position: absolute; right: 10px; top: 5px; width: 50px; height: 50px; cursor: pointer;
}
.menu_btn span, .menu_btn::before, .menu_btn::after {
  content: ""; position: absolute; left: 12px; right: 12px; height: 2px; background: var(--mist);
  transition: transform .3s, opacity .3s;
}
.menu_btn span { top: 24px; }
.menu_btn::before { top: 16px; }
.menu_btn::after { top: 32px; }
#menu_control:checked ~ .menu_btn span { opacity: 0; }
#menu_control:checked ~ .menu_btn::before { transform: translateY(8px) rotate(45deg); }
#menu_control:checked ~ .menu_btn::after { transform: translateY(-8px) rotate(-45deg); }
#menu_control:focus-visible ~ .menu_btn { outline: 2px solid var(--frost); }

.navbar_nav {
  position: fixed; top: 60px; right: -260px; width: 240px; height: calc(100vh - 60px);
  background: var(--night); border-left: 1px solid rgba(242, 196, 109, .3);
  transition: right .4s ease;
}
#menu_control:checked ~ .navbar_nav { right: 0; }
.navbar_nav a {
  display: block; padding: 18px 24px; text-decoration: none; font-size: 16px; letter-spacing: .15em; cursor: pointer;
  border-bottom: 1px solid rgba(238, 242, 247, .08);
}
.navbar_nav a:hover, .navbar_nav a:focus-visible { color: var(--ember-hi); outline: none; }

/* ---------- 首屏 ----------
   做法同《决战僵尸》：版型只看「萤幕宽度」切换，不看高度或比例
   （手机内建浏览器的高度会随工具列变动，用高度判断会造成「有时候点进去人物乱飞」）。
   · 宽度 ≥ 900（电脑、横放平板）：16:9 舞台，宽度上限＝(萤幕高度−顶栏)×16/9，超宽萤幕两侧露出背景
   · 600～899：1:1 舞台，宽度＝萤幕宽
   · 599 以下（手机）：1:2 舞台，宽度＝萤幕宽
   人物用 top／left／height（皆为「舞台」的百分比）定位；LOGO 区固定在舞台底部，尺寸跟著舞台宽度（--sw）。 */
.hero {
  /* --sw＝舞台宽度；舞台里所有尺寸都用它换算（不用容器单位，旧版 iOS 也支援） */
  --sw: 100vw;  /* 旧浏览器后备值；支援 min() 的浏览器由下方 @supports 覆盖 */
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(60px + var(--sw) * .5625);
}
@supports (width: min(1px, 2px)) {
  .hero { --sw: min(100vw, calc((100vh - 60px) * 16 / 9)); }
}
.hero_bg {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -4;
   background: var(--night) url(https://na.xn--xysq9ib8h8r3c.xn--fiqs8s/wysds/sym/scene_forge_harbor.sym)  45% 40% / cover no-repeat;
  filter: saturate(1.05) brightness(.9);
}
.hero::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 80% at 50% 45%, transparent 0 40%, rgba(11, 8, 6, .62) 100%),
    linear-gradient(to bottom, rgba(11, 8, 6, .5) 0%, transparent 18%, transparent 62%, rgba(11, 8, 6, .7) 88%, var(--abyss) 100%);
}
/* 炉火光（缓慢呼吸） */
.forge_glow {
  position: absolute; z-index: -2; left: 50%; bottom: -18%; width: 120vmin; height: 70vmin;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 170, 80, .6) 0%, rgba(255, 110, 30, .28) 35%, transparent 70%);
  mix-blend-mode: screen;
  animation: forgeBreath 4.5s ease-in-out infinite alternate;
}
@keyframes forgeBreath { 0% { opacity: .65; } 100% { opacity: 1; } }

.scene {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  width: var(--sw); height: calc(var(--sw) * .5625);
}
.hero_cast { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; -webkit-clip-path: inset(-60px -100vw 0 -100vw); clip-path: inset(-60px -100vw 0 -100vw); }  /* 只裁下方；上方可延伸到顶栏后面 */
.cast, .hero_anim { position: absolute; width: auto; max-width: none; transform: translateX(-50%); }

/* ===== 首屏人物（电脑版）=====
   height＝人物高度（舞台高度的 %，越大越大）
   top＝离舞台顶端的距离（舞台高度的 %，越大越往下）
   left＝人物中心的水平位置（舞台宽度的 %）
   z-index＝前后层次（越大越前面）
   外左 银发｜内左 金发｜中 嫦娥（最大）｜内右 紫发｜外右 银蓝长发 */
.cast_silver { left: 8%; top: 7%;  height: 100%;  z-index: 2; }
.cast_gold   { left: 26%; top: 2%;  height: 125%; z-index: 3; }
.hero_anim   { left: 48%; top: 1%;  height: 160%; z-index: 5; filter: drop-shadow(0 0 26px rgba(255, 138, 61, .35)); }
.cast_purple { left: 72%; top: 1%;  height: 125%; z-index: 3; }
.cast_lady   { left: 92%; top: 3%;  height: 110%;  z-index: 1; }

/* 配角摇曳（中间主角不加）：动画里一并写入置中用的 translateX(-50%)，旧版 iOS 也能正确置中 */
.cast { transform-origin: 50% 100%; }
.cast_silver { animation: swaySoft 5s ease-in-out infinite alternate; }
.cast_lady   { animation: sway 4.2s ease-in-out -1.2s infinite alternate-reverse; }
.cast_purple { animation: sway 4.6s ease-in-out -2.1s infinite alternate; }
.cast_gold   { animation: swayFloat 3.8s ease-in-out -.6s infinite alternate-reverse; }
@keyframes sway      { 0% { transform: translateX(-50%) translateY(0) rotate(-1.2deg); } 100% { transform: translateX(-50%) translateY(calc(var(--sw) * -1 / 100)) rotate(1.2deg); } }
@keyframes swaySoft  { 0% { transform: translateX(calc(-50% - var(--sw) * .4 / 100)) translateY(0) rotate(-.8deg); } 100% { transform: translateX(calc(-50% + var(--sw) * .4 / 100)) translateY(calc(var(--sw) * -.7 / 100)) rotate(.8deg); } }
@keyframes swayFloat { 0% { transform: translateX(-50%) translateY(0) rotate(1.2deg); } 100% { transform: translateX(-50%) translateY(calc(var(--sw) * -1.2 / 100)) rotate(-1.2deg); } }

/* ===== 首屏氛围层 =====
   光晕：主角身后一团炉火金光，把视线拉到中间
   雾：人物脚边一层暖色烟尘，让人物「站在」场景里，不像贴上去的去背图 */
.hero_halo {
  position: absolute; z-index: 3; left: 50%; top: -8%; width: calc(var(--sw) * 70 / 100); aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 236, 190, .55) 0%, rgba(255, 180, 90, .32) 18%, rgba(255, 120, 40, .12) 40%, transparent 66%);
  mix-blend-mode: screen;
}
.hero_fog {
  position: absolute; z-index: 5; left: -20%; right: -20%; bottom: 0; height: 42%; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255, 130, 50, .28), transparent 70%),
    linear-gradient(to bottom, transparent, rgba(40, 18, 8, .45) 55%, rgba(11, 8, 6, .85));
}
/* 主角加一点炉火轮廓光 */
.hero_anim { filter: drop-shadow(0 0 2px rgba(255, 220, 160, .55)) drop-shadow(0 0 28px rgba(255, 138, 61, .4)) !important; }
/* 前景星屑：飘在人物前方，增加景深 */
.sparks_front { z-index: 5; }
.sparks_front .spark { filter: blur(.6px); }

/* LOGO 后方的熔金光晕 */
.hero_logo::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 120%; height: 160%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 170, 80, .45) 0%, rgba(255, 110, 30, .15) 40%, transparent 70%);
  filter: blur(6px);
}
/* 标语两侧的金色饰线＋小星 */
.hero_tag { display: flex; align-items: center; justify-content: center; }
.hero_tag::before, .hero_tag::after {
  content: ""; flex: none; width: 3.2em; height: 9px; margin: 0 .4em;
  background:
    radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) right center / 9px 9px no-repeat,
    linear-gradient(90deg, transparent, var(--gold) 80%) left center / calc(100% - 9px) 1px no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 170, 80, .8));
}
.hero_tag::after { transform: scaleX(-1); }

/* ===== LOGO＋下载区：固定在舞台底部，尺寸跟著舞台宽度（--sw＝舞台宽度）===== */
.hero_front {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; text-align: center;
  padding: calc(var(--sw) * 9 / 100) 20px max(14px, calc(var(--sw) * 1.6 / 100));
}
/* LOGO 区后方的渐层底：宽度撑满整个萤幕（舞台比萤幕窄时两侧也会补到，不会出现一块深色方框） */
.hero_front::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw;
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(transparent 0, transparent 34%, rgba(11, 8, 6, .72) 68%, var(--abyss));
}
.hero_logo { position: relative; width: calc(var(--sw) * 34 / 100); margin: 0 auto 2px; }
.hero_logo img { width: 100%; height: auto; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .75)); }
.hero_tag {
  font-family: var(--serif); font-weight: 700; font-size: clamp(14px, calc(var(--sw) * 1.45 / 100), 26px); letter-spacing: .24em; text-indent: .24em;
  color: var(--ember-hi); margin: 0 0 calc(var(--sw) * 1.1 / 100); text-shadow: 0 2px 10px #000;
}

/* ===== 下载按钮：冰晶刃形钢板 =====
   【防破版】平台 JS 会在 <head> 动态插入 #down-ios-pack { display: block; }（ID 选择器、最后载入，优先权最高），
   以前按钮靠 <a> 本身的 flex 排版，被改成 block 后 ICON 和文字就上下断开。
   现在 <a> 本身就是 block（跟平台一致，被改也不影响）；ICON＋文字放在 .dl_inner 里，
   由 .dl_inner 绝对定位贴满按钮、自己用 flex 置中，关键属性另外写在 HTML 行内 style（!important）。
   尺寸用变数（--w --h --fs --ic），各断点只改变数。 */
.download {
  display: flex; justify-content: center; flex-wrap: nowrap;   /* 永远一排，375／320 宽也不断行 */
  gap: 0; margin-bottom: 16px; padding: 0 4px;
}
/* 按钮框＝锻造金属图（images/btn_frame.webp，原图 4.33:1）
   用 border-image 九宫格：两端的星饰按高度等比缩放、只拉伸中间铁板，
   按钮可以做得比原图「矮胖」（约 3.1:1），文字就能放大。 */
.download a.dl_btn {
  --w: calc((100vw - 56px) / 2);
  --h: calc(var(--w) * .31);
  --fs: clamp(11px, calc(var(--h) * .245), 19px);
  --ic: calc(var(--fs) * 1.1);
  position: relative !important;
  box-sizing: border-box !important; width: var(--w) !important; height: var(--h) !important;
  padding: 0 !important; margin: 0 4px !important; line-height: 1 !important;  /* 按钮间距用 margin（旧 iOS 不支援 flex gap） */
  flex: 0 0 auto; cursor: pointer; text-decoration: none !important;
  background: none !important;
  border: 0 solid transparent !important;
 border-image-source: url(https://na.xn--xysq9ib8h8r3c.xn--fiqs8s/wysds/sym/btn_frame.sym)  !important;
  border-image-slice: 0 92 fill !important;
  border-image-width: 0 calc(var(--h) * .554) !important;
  border-image-repeat: stretch !important;
  border-image-outset: 0 !important;
  font-size: var(--fs) !important; font-weight: 700; letter-spacing: 0; color: #fff3dc !important;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(255, 150, 60, .65);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
  transition: transform .2s, filter .2s;
  animation: none !important; -webkit-animation: none !important;
  -webkit-tap-highlight-color: transparent;
}
.download a.dl_btn { display: block; }
.download a.dl_btn::before, .download a.dl_btn::after { content: none !important; }
/* ICON＋文字的排版层；扫光只在中间的黑铁板内 */
.download a.dl_btn .dl_inner { clip-path: inset(22% calc(var(--h) * .42) 22% calc(var(--h) * .42)); }
.download a.dl_btn .dl_inner::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 26%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 220, 160, .35), transparent);
  transform: skewX(-20deg);
  animation: dlSheen 4.8s ease-in-out infinite;
}
.download a#down-an-pack .dl_inner::before { animation-delay: .6s; }
@keyframes dlSheen {
  0%, 65% { left: -40%; }
  100% { left: 120%; }
}
.download a.dl_btn svg {
  width: var(--ic) !important; height: var(--ic) !important; fill: currentColor;
  filter: drop-shadow(0 0 5px rgba(255, 170, 80, .8));
}
.download a.dl_btn .dl_label { font-size: var(--fs) !important; font-weight: 700 !important; color: #fff3dc !important; }
.download a.dl_btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.12) drop-shadow(0 6px 10px rgba(0, 0, 0, .5)) drop-shadow(0 0 14px rgba(255, 120, 40, .55));
}
.download a.dl_btn:active { transform: translateY(0); filter: brightness(.95); }
.download a.dl_btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }

.reminder {
  max-width: 24em; margin: 6px auto 0; padding: 10px 4px 0; position: relative;
  border-top: 0;
  font-size: 12px; line-height: 1.7; color: rgba(214, 201, 182, .82);
}
.reminder::before {
  content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 196, 109, .5), transparent);
}
.reminder h4 { font-size: 12px; font-weight: 700; color: #ffd98a; }
.reminder p { font-size: 12px; }
.reminder strong { color: var(--mist); white-space: nowrap; }

/* ---------- 通用段落标题 ----------
   金属字＋左右刃形饰条＋下方四芒星，呼应 LOGO */
section { position: relative; }
.sec_title {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 34px; padding-bottom: 30px;
  font-family: var(--serif); font-weight: 900; font-size: clamp(30px, 7vw, 52px);
  letter-spacing: .22em; line-height: 1.2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23f2c46d' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23ffe6a8'/%3E%3Cstop offset='1' stop-color='%23f2c46d' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='11.5' width='240' height='1' fill='url(%23g)'/%3E%3Cpath d='M120 1.5 L122.6 9.4 L132 12 L122.6 14.6 L120 22.5 L117.4 14.6 L108 12 L117.4 9.4Z' fill='%23fff'/%3E%3Cpath d='M98 12 l3 -3 l3 3 l-3 3Z M136 12 l3 -3 l3 3 l-3 3Z' fill='%23ffb27d'/%3E%3C/svg%3E") center bottom / 240px 24px no-repeat;
  filter: drop-shadow(0 0 8px rgba(255, 150, 60, .35));
}
.sec_title span {
  display: inline-block; margin-right: -.22em; padding: .04em 0;
  background: linear-gradient(180deg, #fffaf0 0%, #ffeab4 26%, #f2c46d 46%, #a8601f 64%, #f0c470 82%, #fff4d4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #2a1405) drop-shadow(0 0 1px #2a1405) drop-shadow(0 0 16px rgba(255, 140, 50, .5));
}
/* 左右刃形饰条（刃身渐层＋菱形尖端） */
.sec_title::before, .sec_title::after {
  content: ""; flex: none; width: clamp(34px, 9vw, 104px); height: 12px; margin: 0 .45em;
  background: linear-gradient(90deg, rgba(242, 196, 109, 0), #e0a548 60%, #fff1c4);
  clip-path: polygon(0 46%, 76% 36%, 84% 0, 100% 50%, 84% 100%, 76% 64%, 0 54%);
}
.sec_title::after { transform: scaleX(-1); }

/* ---------- 世界观 ----------
   一整幕：背景＝选中的地点，女战士立于场景中，左侧叙事里的三个地点就是切换入口，
   标语压在女战士脚边收尾。上下不再分成「故事区」和「卡片区」。 */
.story { position: relative; overflow: hidden; isolation: isolate; padding: 8px 0 48px; }
.story_bgs { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; }
.story_bg {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0;
  background: center 30% / cover no-repeat;
  transform: scale(1.06);
  transition: opacity 1s ease, transform 7s ease-out;
}
.story_bg_forge { background-image: url(https://na.xn--xysq9ib8h8r3c.xn--fiqs8s/wysds/sym/scene_lava.sym);  }
.story_bg_town  { background-image: url(https://na.xn--xysq9ib8h8r3c.xn--fiqs8s/wysds/sym/scene_arena.sym);  }
.story_bg_rift  { background-image: url(https://na.xn--xysq9ib8h8r3c.xn--fiqs8s/wysds/sym/scene_entry.sym);  background-position: 78% 30%; }
.story[data-active="forge"] .story_bg_forge,
.story[data-active="town"]  .story_bg_town,
.story[data-active="rift"]  .story_bg_rift { opacity: .85; transform: scale(1); }
.story::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--abyss) 0%, rgba(11, 8, 6, .2) 10%, rgba(11, 8, 6, .3) 34%, rgba(11, 8, 6, .88) 50%, rgba(11, 8, 6, .92) 88%, var(--abyss) 100%);
}

.story_stage { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

.story_art { position: relative; z-index: 0; margin: -27vw -20px 0; pointer-events: none; }
.story_art::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 110%; aspect-ratio: 1; z-index: -1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 61, .3) 0%, rgba(255, 110, 40, .08) 40%, transparent 66%);
}
/* 手机：人物放大，剑往右上超出画面裁切；身体置中 */
.story_art img {
  width: 158%; max-width: none; margin-left: -11%;
  filter: drop-shadow(0 0 24px rgba(0, 0, 0, .55));
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 66%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 66%);
}

.story_text { position: relative; z-index: 1; margin-top: -86vw; }
/* 手机：文字压到人物胸下，后方垫一层由透明到深色的渐层确保可读 */
.story_text::before {
  content: ""; position: absolute; z-index: -1; left: -20px; right: -20px; top: -40px; bottom: -48px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11, 8, 6, 0) 0, rgba(11, 8, 6, .7) 120px, rgba(11, 8, 6, .92) 260px, rgba(11, 8, 6, .92) calc(100% - 60px), rgba(11, 8, 6, 0) 100%);
}
/* 标题置中于整幕上方 */
.story_title { position: relative; z-index: 2; margin: 48px auto 8px; }
.story_hook {
  font-family: var(--serif); font-weight: 900; color: #fff;
  font-size: clamp(22px, 7vw, 50px); line-height: 1.3; letter-spacing: .04em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .9);
  margin-bottom: 14px;
}
.story_hook span { display: block; }
.story_hook span:last-child { color: #ffd2ad; }
.story_sub {
  display: flex; align-items: center; margin-bottom: 14px;
  font-family: var(--serif); font-weight: 700; font-size: clamp(14px, 4.3vw, 17px); letter-spacing: .1em; color: var(--ember-hi);
  text-shadow: 0 0 12px rgba(255, 138, 61, .4), 0 1px 6px #000;
}
.story_sub::before {
  content: ""; width: 28px; height: 2px; flex: none; margin-right: 10px;
  background: linear-gradient(90deg, var(--ember), transparent);
}
.story_body {
  max-width: 30em; font-size: 15px; line-height: 1.95; color: #e6dccd;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
  margin-bottom: 18px;
}

/* 三个地点：故事的延续，也是切换场景的入口 */
.realm_tabs { max-width: 32em; }
.realm_tab {
  --accent: #f2c46d;
  position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; column-gap: 16px;
  width: 100%; padding: 12px 0; margin: 0; border: 0; border-top: 1px solid rgba(242, 196, 109, .16);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.realm_tab:last-child { border-bottom: 1px solid rgba(242, 196, 109, .16); }
.realm_forge { --accent: #ffb27d; }
.realm_town  { --accent: #ffd98a; }
.realm_rift  { --accent: #c9b2ff; }
/* 选中时底部亮起一道强调色光 */
.realm_tab::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--accent), transparent);
  box-shadow: 0 0 10px var(--accent);
  transition: width .6s ease;
}
.realm_tab.is-active::after { width: 100%; }
.tab_thumb {
  display: block; aspect-ratio: 16 / 10; padding: 1px;
  background: rgba(242, 196, 109, .35);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: background .4s;
}
.tab_thumb img {
  width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  filter: brightness(.5) saturate(.7); transition: filter .4s;
}
.realm_forge .tab_thumb img { object-position: 30% 55%; }
.realm_town .tab_thumb img  { object-position: 50% 45%; }
.realm_rift .tab_thumb img  { object-position: 82% 55%; }
.realm_tab.is-active .tab_thumb { background: var(--accent); }
.realm_tab.is-active .tab_thumb img { filter: none; }
.tab_main { display: flex; flex-direction: column; min-width: 0; }
.tab_time { font-size: 12px; font-weight: 700; letter-spacing: .3em; color: var(--accent); opacity: .75; }
.tab_title {
  font-family: var(--serif); font-weight: 900; font-size: 20px; letter-spacing: .12em; line-height: 1.4;
  color: #d6c9b6; transition: color .3s;
}
.tab_desc {
  max-height: 0; overflow: hidden; opacity: 0;
  font-size: 14px; line-height: 1.7; color: #e6dccd; text-wrap: pretty;
  transition: max-height .5s ease, opacity .35s ease;
}
.realm_tab.is-active .tab_time { opacity: 1; }
.realm_tab.is-active .tab_title { color: #fff; text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent); }
.realm_tab.is-active .tab_desc { max-height: 5.2em; opacity: 1; margin-top: 2px; transition-delay: .1s; }
.realm_tab:hover .tab_title { color: #fff; }
.realm_tab:hover:not(.is-active) .tab_thumb img { filter: brightness(.75) saturate(.9); }
.realm_tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (min-width: 600px) {
  .story_text { margin-top: -38vw; }
  .story_text::before { display: none; }
  .story_art img {
    -webkit-mask-image: linear-gradient(to bottom, #000 48%, transparent 80%);
    mask-image: linear-gradient(to bottom, #000 48%, transparent 80%);
  }
  .story_art { margin: 0 -20px; }
  .story_art img { width: 112%; margin-left: -4%; }
}

/* ===== 电脑（≥768）：场景满版；左叙事｜女战士立于场景中 ===== */
@media (min-width: 768px) {
  .story { padding: 0; }
  .story::before {
    background:
      linear-gradient(to bottom, var(--abyss) 0%, rgba(11, 8, 6, 0) 14%, rgba(11, 8, 6, 0) 72%, rgba(11, 8, 6, .85) 92%, var(--abyss) 100%),
      linear-gradient(90deg, rgba(11, 8, 6, .94) 0%, rgba(11, 8, 6, .8) 30%, rgba(11, 8, 6, .25) 55%, rgba(11, 8, 6, .1) 75%, rgba(11, 8, 6, .35) 100%);
  }
  .story_stage {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto; padding-top: 0;
  }
  .story_art { grid-column: 2; grid-row: 2; align-self: end; margin: -150px -80px 0 -40px; }
  .story_art img {
    width: 116%; margin-left: -8%;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 98%);
  }
  .story_text { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0; padding: 36px 24px 40px 0; }
  .story_hook { font-size: clamp(30px, 3.9vw, 50px); }
  .story_sub { font-size: clamp(16px, 1.4vw, 20px); }
  .story_title { grid-column: 1 / span 2; grid-row: 1; margin: 88px auto 0; }
  .story_body { font-size: 16px; }
  .realm_tab { grid-template-columns: 120px minmax(0, 1fr); column-gap: 20px; padding: 14px 0; }
  .tab_title { font-size: 21px; }
  .realm_tab.is-active .tab_title { font-size: 25px; }
  .tab_desc { font-size: 15px; }
}

/* ---------- 游戏特色 ---------- */
.introduce {
  padding: 28px 0 80px;
  background:
    linear-gradient(to bottom, var(--abyss), rgba(11, 8, 6, .7) 28%, rgba(11, 8, 6, .8) 72%, var(--abyss)),
    url(https://na.xn--xysq9ib8h8r3c.xn--fiqs8s/wysds/sym/scene_sky.sym)  center 40% / cover no-repeat;
}
.swiper { padding-bottom: 36px; }
.swiper-slide img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; box-sizing: border-box;
  border: 1px solid rgba(242, 196, 109, .65);
  box-shadow: 0 0 0 4px rgba(242, 196, 109, .1), 0 0 30px rgba(255, 130, 40, .22), 0 12px 40px rgba(0, 0, 0, .65);
}
.swiper-pagination-bullet { background: var(--mist); opacity: .4; width: 22px; height: 4px; border-radius: 0; }
.swiper-pagination-bullet-active { background: linear-gradient(90deg, var(--gold-hi), var(--ember)); opacity: 1; box-shadow: 0 0 8px rgba(255, 140, 50, .7); }
.swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, .3), rgba(0, 0, 0, .15)); }
.swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, .3), rgba(0, 0, 0, .15)); }

/* ================= 平板 / PC ================= */
@media (min-width: 768px) {
  #qr { display: block; }
  .menu_btn { display: none; }
  .navbar_nav {
    position: absolute; top: 0; right: 16px; width: auto; height: 60px; display: flex;
    background: none; border: 0;
  }
  .navbar_nav a { border: 0; padding: 0 22px; line-height: 60px; position: relative; }
  .navbar_nav a::after {
    content: ""; position: absolute; left: 22px; right: 22px; bottom: 12px; height: 2px;
    background: var(--ember); transform: scaleX(0); transition: transform .25s;
  }
  .navbar_nav a:hover::after, .navbar_nav a:focus-visible::after { transform: scaleX(1); }


}

/* 电脑（≥768）：LOGO 区与按钮跟著舞台宽度 */
@media (min-width: 768px) {
  .download { gap: 0; }
  .download a.dl_btn { margin: 0 calc(var(--sw) * .7 / 100) !important; }
  .download a.dl_btn { --w: min(calc(var(--sw) * 17 / 100), 290px); }
  .reminder { max-width: 22em; font-size: clamp(12px, calc(var(--sw) * .85 / 100), 15px); }
  .reminder h4, .reminder p { font-size: inherit; }
}

/* ---------- 767 以下（手机版）：1:2 舞台 ----------
   全站统一切换点：767 以下手机版、768 以上电脑版（平板直放看电脑版等比缩小）。
   舞台内的尺寸一律用 --sw（舞台宽度）换算；手机舞台＝萤幕宽（100vw），完全不看萤幕高度。
   后排上方：银发（左）、银蓝长发（右）；中排：金发（左）、紫发（右）；前排中间：嫦娥（最大）
   嫦娥往下放，LOGO 区压到她的腰部 */
@media (max-width: 767px) {
  .hero { --sw: 100vw; }
  .scene { width: 100vw; height: 200vw; }
  /* 首屏高度＝舞台的 90%：LOGO 区往上提、压到主角腰部，矮手机第一屏也看得到下载按钮 */
  .hero { min-height: calc(60px + 180vw); }
  .cast_silver { left: 40%; top: 1%;    height: 51%; }
  .cast_lady   { left: 70%; top: 0%;  height: 56%; }
  .cast_gold   { left: 21%; top: 13%;   height: 76%; }
  .cast_purple { left: 78%; top: 13%;   height: 74%; }
  .hero_anim   { left: 50%; top: 20%;  height: 100%; }
  .hero_front { bottom: 20vw; padding: 26vw 4vw 4vw; }
  .download { gap: 0; }
  .download a.dl_btn { --w: calc((100vw - 56px) / 2); }
  .hero_logo { width: 68vw; }
  .hero_tag { font-size: 4.2vw; margin-bottom: 4vw; letter-spacing: .14em; text-indent: .14em; }
  .hero_tag::before, .hero_tag::after { width: 1.6em; margin: 0 .25em; }
  .hero_halo { top: 9%; width: 90vw; }
  .reminder { font-size: 3.2vw; }
  .reminder h4, .reminder p { font-size: inherit; }
}
/* 较宽的手机／小平板：按钮不再变大 */
@media (min-width: 520px) and (max-width: 767px) {
  .download a.dl_btn { --w: 230px; }
}
/* 很窄的手机：提醒文字不小于 11px */
@media (max-width: 343px) {
  .reminder { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .forge_glow { animation: none; }
  .download a.dl_btn .dl_inner::before { animation: none !important; }
  .cast, .cast_silver, .cast_lady, .cast_purple, .cast_gold { animation: none; }
  .dl_btn, .story_bg, .realm_tab::after, .tab_thumb, .tab_thumb img, .tab_desc { transition: none; }
}

/* 手机：区块间留白缩小 */
@media (max-width: 767px) {
  .introduce { padding-top: 32px; padding-bottom: 40px; }
  .introduce .sec_title { margin-bottom: 24px; }
}

/* ---------- 更多游戏 BANNER（仅手机） ---------- */
.more_game { width: 90%; max-width: 520px; margin: 0 auto; padding: 0 0 40px; text-align: center; }
#more_game_btn {
  display: block; overflow: hidden; border-radius: 12px;
  border: 2px solid rgba(242, 196, 109, .55);
  box-shadow: 0 0 0 4px rgba(242, 196, 109, .12), 0 0 24px rgba(242, 196, 109, .35), 0 8px 24px rgba(0, 0, 0, .6);
}
#more_game_btn img { width: 100%; display: block; }
@media (min-width: 768px) {
  .mobile { display: none !important; }
}

/* ---------- 炉火星屑（首屏、世界观；由 main.js 产生） ---------- */
.sparks { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.story .sparks { z-index: 0; }
.story_stage { z-index: 1; }
.spark {
  position: absolute; bottom: -12px; left: var(--x);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: #ffe2a0;
  box-shadow: 0 0 6px 2px rgba(255, 140, 40, .85), 0 0 14px 4px rgba(255, 90, 20, .35);
  opacity: 0;
  animation: sparkRise var(--d) linear var(--delay) infinite;
}
@keyframes sparkRise {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  8%   { opacity: 1; }
  70%  { opacity: .8; }
  100% { transform: translate(var(--dx), -85vh) scale(.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sparks { display: none; } }

/* ---------- 超宽萤幕（≥1800）：世界观版心放宽、字放大，不会缩在中间一小块 ---------- */
@media (min-width: 1800px) {
  .story_stage { max-width: 1560px; }
  .story_body { font-size: 18px; max-width: 34em; }
  .realm_tabs { max-width: 36em; }
  .realm_tab { grid-template-columns: 140px minmax(0, 1fr); }
  .tab_title { font-size: 23px; }
  .realm_tab.is-active .tab_title { font-size: 28px; }
  .tab_desc { font-size: 16px; }
  .sec_title { font-size: 58px; }
}