:root {
      --bg: #030814;
      --gold: #e8c062;
      --gold-hi: #ffe9a8;
      --fire: #ff5b2e;
      --fire-d: #c81d11;
      --war: #e23b3b;
      --mag: #4a8af0;
      --tao: #3bbf6b;
      --line: rgba(232, 192, 98, .18);
      --epic: #c084fc;
      --leg: #ffd24a;
      --myth: #ff7849;
      --top: #ff2d2d;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html,
    body {
      background: var(--bg);
      color: #ffffff;
      font-family: "Noto Serif SC", "Songti SC", serif;
      overflow-x: hidden
    }

    body {
      min-height: 100vh;
      background:
        radial-gradient(1100px 650px at 82% -8%, rgba(43, 98, 192, .22), transparent 60%),
        radial-gradient(900px 600px at 8% 108%, rgba(232, 192, 98, .07), transparent 60%),
        radial-gradient(700px 500px at 50% 45%, rgba(120, 165, 255, .07), transparent 70%),
        linear-gradient(180deg, #030814, #071021 40%, #030814);
      background-size: cover
    }

    /* 浮动光球(替代canvas粒子,纯CSS极轻) */
    .orb {
      position: fixed;
      border-radius: 50%;
      filter: blur(70px);
      opacity: .5;
      z-index: 0;
      pointer-events: none;
      animation: float 16s ease-in-out infinite
    }

    .orb.o1 {
      width: 380px;
      height: 380px;
      background: radial-gradient(circle, #2b62c0, transparent 70%);
      top: -100px;
      right: -60px
    }

    .orb.o2 {
      width: 320px;
      height: 320px;
      background: radial-gradient(circle, #e8c062, transparent 70%);
      bottom: -80px;
      left: -40px;
      animation-delay: -5s;
      animation-duration: 20s
    }

    .orb.o3 {
      width: 260px;
      height: 260px;
      background: radial-gradient(circle, #14276b, transparent 70%);
      top: 40%;
      left: 55%;
      animation-delay: -9s;
      animation-duration: 24s;
      opacity: .32
    }

    @keyframes float {

      0%,
      100% {
        transform: translate(0, 0) scale(1)
      }

      33% {
        transform: translate(40px, -30px) scale(1.08)
      }

      66% {
        transform: translate(-30px, 25px) scale(.95)
      }
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      opacity: .045;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")
    }

    /* ===== 固定LOGO(150x150,钉在右上,不随滚动) ===== */
    #logoBox {
      position: fixed;
      top: 11vh;
      right: 5vw;
      width: 150px;
      height: 150px;
      z-index: 150;
      border: 1px dashed rgba(232, 192, 98, .4);
      border-radius: 14px;
      background: rgba(8, 16, 36, .4);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      pointer-events: none
    }

    #logoBox img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: none
    }

    /* 有图:显示图片,隐藏占位样式 */
    #logoBox.has img {
      display: block
    }

    #logoBox.has {
      border: none;
      background: none
    }

    /* 无图:占位提示 */
    #logoBox .logo-ph {
      font-size: 14px;
      color: rgba(232, 192, 98, .5);
      letter-spacing: 3px
    }

    #logoBox.has .logo-ph {
      display: none
    }
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      background: rgba(3, 7, 18, .95);
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      padding: 12px
    }

    nav a {
      color: #ffffff;
      text-decoration: none;
      padding: 8px 20px;
      font-size: 16px;
      letter-spacing: 3px;
      cursor: pointer;
      border-radius: 3px;
      transition: .25s;
      position: relative;
      text-shadow: 0 0 9px rgba(232, 192, 98, .38), 0 0 22px rgba(232, 192, 98, .18)
    }

    nav a:hover,
    nav a.active {
      color: var(--gold-hi);
      text-shadow: 0 0 12px rgba(240, 214, 130, .85), 0 0 30px rgba(232, 192, 98, .5)
    }

    nav a.nav-dl {
      color: #2a1c08;
      font-weight: 700;
      background: linear-gradient(180deg, #f6dc92, var(--gold));
      box-shadow: 0 0 14px rgba(232, 192, 98, .55), 0 0 34px rgba(232, 192, 98, .28);
      text-shadow: 0 1px 0 rgba(255, 244, 200, .6)
    }

    nav a.nav-dl:hover {
      color: #1a1206;
      box-shadow: 0 0 20px rgba(232, 192, 98, .85), 0 0 48px rgba(232, 192, 98, .4)
    }

    nav a.active::after {
      content: "";
      position: absolute;
      left: 20%;
      right: 20%;
      bottom: 2px;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      box-shadow: 0 0 8px var(--gold)
    }

    #app {
      position: relative;
      z-index: 2;
      padding-bottom: 56px
    }

    /* ===== Hero ===== */
    #hero {
      /* ===== 特效主题变量(默认:金光流彩) ===== */
      --fx-grad: linear-gradient(180deg, #fffdf4 0%, #ffe9a8 26%, var(--gold-hi) 50%, var(--gold) 66%, #8a5a1d 100%);
      --fx-sheen: rgba(255, 255, 255, .9);
      --fx-shadow: 0 1px 0 #7a4c14, 0 2px 0 #6b420f, 0 3px 0 #5c380c, 0 5px 8px rgba(0, 0, 0, .6), 0 0 34px rgba(255, 190, 80, .4);
      --fx-glowA: rgba(255, 91, 46, .25);
      --fx-glowB: rgba(255, 150, 60, .65);
      --fx-aura1: rgba(255, 186, 80, .14);
      --fx-aura2: rgba(255, 120, 50, .05);
      --fx-emberA: #ffe1a0;
      --fx-emberB: #ffb35c;
      --fx-beam: #ffe9b0;
      min-height: 80vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 110px 20px 50px;
      position: relative
    }

    .hero-deco {
      font-family: "ZCOOL KuaiLe", serif;
      color: rgba(232, 192, 98, .10);
      font-size: 180px;
      position: absolute;
      letter-spacing: 30px;
      user-select: none;
      pointer-events: none
    }

    .hero-deco.l {
      left: -20px;
      top: 8vh
    }

    .hero-deco.r {
      right: -20px;
      bottom: 8vh
    }

    /* ===== 炫酷主标题 ===== */
    #hero h1 {
      font-family: "Ma Shan Zheng", serif;
      font-size: clamp(56px, 10vw, 128px);
      line-height: 1.1;
      display: flex;
      justify-content: center;
      gap: clamp(4px, 1vw, 10px);
      filter: drop-shadow(0 0 26px rgba(255, 91, 46, .35));
      animation: titleGlow 2.6s ease-in-out infinite alternate;
      position: relative;
      z-index: 2
    }

    #hero h1 span {
      display: inline-block;
      background:
        linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, var(--fx-sheen) 50%, rgba(255, 255, 255, 0) 58%) no-repeat,
        var(--fx-grad);
      background-size: 260% 100%, 100% 100%;
      background-position: 160% 0, 0 0;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: var(--fx-shadow);
      animation:
        slam .8s calc(var(--i) * .18s) cubic-bezier(.2, 1.6, .35, 1) both,
        shine 5.2s calc(1.4s + var(--i) * .5s) linear infinite
    }

    #hero h1 span:nth-child(1) { --i: 0 }
    #hero h1 span:nth-child(2) { --i: 1 }
    #hero h1 span:nth-child(3) { --i: 2 }
    #hero h1 span:nth-child(4) { --i: 3 }

    /* 逐字砸入 */
    @keyframes slam {
      0% { opacity: 0; transform: translateY(-70px) scale(2.8) rotate(-10deg); filter: blur(10px) }
      55% { opacity: 1; transform: translateY(8px) scale(.9) rotate(3deg); filter: blur(0) }
      75% { transform: translateY(-5px) scale(1.08) rotate(-1deg) }
      100% { opacity: 1; transform: none; filter: none }
    }

    /* 流光逐字扫过 */
    @keyframes shine {
      0% { background-position: 160% 0, 0 0 }
      100% { background-position: -160% 0, 0 0 }
    }

    /* 火焰光晕呼吸(颜色随主题变量) */
    @keyframes titleGlow {
      from { filter: drop-shadow(0 0 18px var(--fx-glowA)) }
      to { filter: drop-shadow(0 0 42px var(--fx-glowB)) }
    }

    /* 标题背后的呼吸光团 */
    #hero::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 42%;
      width: min(760px, 92vw);
      height: 300px;
      transform: translate(-50%, -50%);
      background: radial-gradient(ellipse at center, var(--fx-aura1), var(--fx-aura2) 45%, transparent 70%);
      pointer-events: none;
      animation: auraPulse 3.6s ease-in-out infinite alternate
    }

    @keyframes auraPulse {
      from { opacity: .5; transform: translate(-50%, -50%) scale(.92) }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1.06) }
    }

    /* 火星粒子 */
    .ember-field {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 3
    }

    .ember {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle, var(--fx-emberA) 0%, var(--fx-emberB) 40%, transparent 75%);
      opacity: 0;
      animation: emberUp linear infinite
    }

    @keyframes emberUp {
      0% { transform: translate(0, 0) scale(1); opacity: 0 }
      8% { opacity: .95 }
      60% { opacity: .6 }
      100% { transform: translate(var(--sw, 20px), -170px) scale(.15); opacity: 0 }
    }

    /* ===== 特效主题2:光芒万丈(光从左到右射出 + 旋转光芒) ===== */
    #hero.fx-rays {
      --fx-grad: linear-gradient(180deg, #ffffff 0%, #fff6d8 30%, #ffe9a8 55%, #d9a94e 100%);
      --fx-sheen: rgba(255, 255, 255, .95);
      --fx-shadow: 0 1px 0 #b9975a, 0 2px 0 #a6854a, 0 3px 0 #8f6f3c, 0 5px 10px rgba(0, 0, 0, .55), 0 0 40px rgba(255, 240, 190, .55);
      --fx-glowA: rgba(255, 235, 170, .3);
      --fx-glowB: rgba(255, 245, 210, .8);
      --fx-aura1: rgba(255, 240, 190, .18);
      --fx-aura2: rgba(255, 220, 140, .07);
    }

    #hero.fx-rays .fx-rays-wrap,
    #hero.fx-ice .fx-rays-wrap { opacity: 1 }

    #hero.fx-rays .fx-burst,
    #hero.fx-ice .fx-burst { opacity: .12 }

    .fx-rays-wrap {
      position: absolute;
      inset: -20px 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
      opacity: 0;
      transition: opacity .8s
    }

    .fx-rays-wrap i {
      position: absolute;
      left: 0;
      width: 25%;
      border-radius: 2px;
      background: linear-gradient(90deg, transparent, var(--fx-beam), transparent);
      filter: blur(1px);
      transform: translateX(-60vw);
      animation: beamShoot linear infinite
    }

    /* 光束:从左向右射出 */
    @keyframes beamShoot {
      0% { transform: translateX(-60vw) scaleX(.5); opacity: 0 }
      12% { opacity: var(--o, .8) }
      100% { transform: translateX(160vw) scaleX(1.6); opacity: 0 }
    }

    /* 标题背后的旋转光芒(太阳光柱) */
    .fx-burst {
      position: absolute;
      left: 50%;
      top: 44%;
      width: min(1000px, 130vw);
      aspect-ratio: 1;
      transform: translate(-50%, -50%);
      background: repeating-conic-gradient(from 0deg, var(--fx-beam) 0deg 4deg, transparent 4deg 15deg);
      -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%);
      mask-image: radial-gradient(circle, #000 0%, transparent 62%);
      opacity: 0;
      pointer-events: none;
      z-index: 1;
      transition: opacity 1s;
      animation: fxBurstSpin 46s linear infinite
    }

    @keyframes fxBurstSpin {
      from { transform: translate(-50%, -50%) rotate(0deg) }
      to { transform: translate(-50%, -50%) rotate(360deg) }
    }

    /* ===== 特效主题3:烈焰燃烧 ===== */
    #hero.fx-fire {
      --fx-grad: linear-gradient(180deg, #fff3d6 0%, #ffc46b 22%, #ff7a2e 52%, #e8420f 72%, #8f1a05 100%);
      --fx-sheen: rgba(255, 250, 220, .95);
      --fx-shadow: 0 1px 0 #8f2a0a, 0 2px 0 #7a2006, 0 3px 0 #651a05, 0 5px 10px rgba(0, 0, 0, .6), 0 0 36px rgba(255, 110, 30, .55);
      --fx-glowA: rgba(255, 60, 0, .3);
      --fx-glowB: rgba(255, 120, 20, .85);
      --fx-aura1: rgba(255, 110, 40, .16);
      --fx-aura2: rgba(255, 60, 0, .06);
      --fx-emberA: #ffd9a0;
      --fx-emberB: #ff6a2a;
    }

    #hero.fx-fire h1 {
      animation: titleGlow 2.2s ease-in-out infinite alternate, fireJitter .38s steps(2) infinite
    }

    /* 火苗抖动 */
    @keyframes fireJitter {
      0%, 100% { transform: none }
      25% { transform: translateY(-1px) skewX(.4deg) }
      50% { transform: none }
      75% { transform: translateY(1px) skewX(-.4deg) }
    }

    /* ===== 特效主题4:霓虹幻彩(色相轮转) ===== */
    #hero.fx-neon {
      --fx-grad: linear-gradient(180deg, #eaffff 0%, #7df3ff 30%, #7b6bff 60%, #c44dff 100%);
      --fx-sheen: rgba(255, 255, 255, .85);
      --fx-shadow: 0 0 6px #35f0ff, 0 0 18px #18c8ff, 0 0 38px #7b6bff, 0 3px 0 rgba(20, 40, 80, .8), 0 5px 10px rgba(0, 0, 0, .6);
      --fx-aura1: rgba(60, 200, 255, .14);
      --fx-aura2: rgba(120, 80, 255, .07);
      --fx-emberA: #b8f4ff;
      --fx-emberB: #6bb8ff;
    }

    #hero.fx-neon h1 {
      animation: neonSpin 7s linear infinite
    }

    @keyframes neonSpin {
      from { filter: drop-shadow(0 0 22px rgba(53, 240, 255, .45)) hue-rotate(0deg) }
      to { filter: drop-shadow(0 0 22px rgba(53, 240, 255, .45)) hue-rotate(360deg) }
    }

    /* ===== 特效主题5:冰霜寒光 ===== */
    #hero.fx-ice {
      --fx-grad: linear-gradient(180deg, #ffffff 0%, #dff4ff 28%, #9fdcff 55%, #4aa8e8 100%);
      --fx-sheen: rgba(255, 255, 255, .95);
      --fx-shadow: 0 1px 0 #5a8fb8, 0 2px 0 #4a7ca8, 0 3px 0 #3a6a94, 0 5px 10px rgba(0, 10, 30, .55), 0 0 36px rgba(140, 220, 255, .55);
      --fx-glowA: rgba(90, 190, 255, .25);
      --fx-glowB: rgba(160, 230, 255, .75);
      --fx-aura1: rgba(120, 200, 255, .15);
      --fx-aura2: rgba(80, 160, 255, .06);
      --fx-emberA: #eaf8ff;
      --fx-emberB: #8fd0ff;
      --fx-beam: #bfe6ff;
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(30px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    #hero .sub {
      color: #ffffff;
      letter-spacing: 8px;
      margin: 14px 0 30px;
      font-size: 18px;
      animation: rise 1.2s .2s ease both
    }

    .stats {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      justify-content: center;
      animation: rise 1.2s .4s ease both
    }

    .stat {
      background: rgba(8, 16, 36, .7);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 14px 22px;
      min-width: 96px
    }

    .stat .num {
      font-family: "Ma Shan Zheng", serif;
      font-size: 30px;
      color: var(--gold-hi);
      line-height: 1
    }

    .stat .lab {
      font-size: 13px;
      color: rgba(255,255,255,.88);
      margin-top: 6px;
      letter-spacing: 2px
    }

    /* ===== Sections ===== */
    section {
      max-width: 1200px;
      margin: 0 auto;
      padding: 50px 24px;
      scroll-margin-top: 80px
    }

    .s-title {
      font-family: "Ma Shan Zheng", serif;
      font-size: 38px;
      color: var(--gold-hi);
      text-align: center;
      letter-spacing: 6px;
      margin-bottom: 6px
    }

    .s-title small {
      display: block;
      font-family: "Noto Serif SC", serif;
      font-size: 14px;
      color: rgba(255,255,255,.84);
      letter-spacing: 4px;
      margin-top: 6px;
      font-weight: 400
    }

    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .8s, transform .8s
    }

    .reveal.in {
      opacity: 1;
      transform: none
    }

    /* ===== Skills ===== */
    .sk-group {
      margin: 30px 0
    }

    .sk-cat {
      font-size: 19px;
      color: var(--fire);
      letter-spacing: 4px;
      margin-bottom: 14px;
      padding-left: 12px;
      border-left: 3px solid var(--fire)
    }

    .sk-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 14px
    }

    .sk-card {
      display: flex;
      gap: 14px;
      background: linear-gradient(180deg, rgba(10, 20, 44, .85), rgba(4, 10, 26, .85));
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 16px;
      transition: .3s
    }

    .sk-card:hover {
      transform: translateY(-4px);
      border-color: rgba(232, 192, 98, .4);
      box-shadow: 0 8px 30px rgba(0, 0, 0, .5)
    }

    .sk-ico {
      width: 54px;
      height: 54px;
      flex-shrink: 0;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle, rgba(232, 192, 98, .14), transparent 70%);
      border: 1px solid var(--line);
      overflow: hidden
    }

    .sk-ico img {
      width: 48px;
      height: 48px;
      object-fit: contain;
      filter: drop-shadow(0 0 6px var(--fire))
    }

    .sk-body .nm {
      font-size: 18px;
      color: var(--gold-hi);
      letter-spacing: 1px
    }

    .sk-body .nm .jb {
      font-size: 12px;
      color: rgba(255,255,255,.88);
      margin-left: 6px
    }

    .sk-body .eff {
      font-size: 13px;
      color: #ffffff;
      margin: 6px 0;
      line-height: 1.5
    }

    .sk-body .how {
      font-size: 12px;
      color: #7fafd8;
      line-height: 1.5;
      background: rgba(74, 138, 240, .08);
      padding: 5px 8px;
      border-radius: 5px;
      border-left: 2px solid rgba(74, 138, 240, .4)
    }

    .sk-body .how b {
      color: #9ac0ff
    }

    /* ===== 玩法特色 (表格形式) ===== */
    .feature-table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
      background: linear-gradient(180deg, rgba(10, 20, 44, .92), rgba(4, 10, 26, .92));
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--line)
    }

    .feature-table thead {
      background: linear-gradient(180deg, rgba(232, 192, 98, .15), rgba(232, 192, 98, .05))
    }

    .feature-table th {
      padding: 14px 16px;
      text-align: left;
      font-size: 15px;
      color: var(--gold-hi);
      letter-spacing: 2px;
      border-bottom: 1px solid var(--line);
      font-weight: 500
    }

    .feature-table td {
      padding: 12px 16px;
      border-bottom: 1px solid var(--line);
      font-size: 14px;
      color: #ffffff
    }

    .feature-table tr:hover {
      background: rgba(232, 192, 98, .08)
    }

    .feature-table tr:last-child td {
      border-bottom: none
    }

    .feature-name {
      font-family: "Ma Shan Zheng", serif;
      font-size: 18px;
      color: var(--gold-hi);
      letter-spacing: 2px
    }

    .feature-desc {
      font-size: 13px;
      color: rgba(255,255,255,.84);
      line-height: 1.6
    }

    /* ===== 装备展示 ===== */
    .gear-group {
      margin: 30px 0
    }

    .gear-cat {
      font-size: 19px;
      color: var(--fire);
      letter-spacing: 4px;
      margin-bottom: 14px;
      padding-left: 12px;
      border-left: 3px solid var(--fire)
    }

    .gear-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      max-width: 880px;
      margin: 0 auto
    }

    .gear-item {
      background: linear-gradient(180deg, rgba(10, 20, 44, .88), rgba(4, 10, 26, .88));
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      cursor: zoom-in;
      transition: .3s
    }

    .gear-item:hover {
      transform: translateY(-4px);
      border-color: rgba(232, 192, 98, .5);
      box-shadow: 0 8px 30px rgba(0, 0, 0, .55)
    }

    .gear-item img {
      width: 100%;
      display: block;
      object-fit: cover;
      background: radial-gradient(circle, rgba(232, 192, 98, .08), transparent 75%)
    }

    .gear-item .cap {
      padding: 9px 12px;
      font-size: 13px;
      color: #ffffff;
      text-align: center;
      letter-spacing: 2px;
      border-top: 1px solid var(--line);
      background: rgba(232, 192, 98, .05)
    }

    /* 装备展示结尾提示 */
    .gear-more {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      max-width: 880px;
      margin: 26px auto 0;
      color: var(--gold-hi);
      font-size: 18px;
      letter-spacing: 4px;
      text-shadow: 0 0 18px rgba(232, 192, 98, .45)
    }

    .gear-more::before,
    .gear-more::after {
      content: '';
      flex: 1;
      max-width: 180px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold));
    }

    .gear-more::after {
      background: linear-gradient(90deg, var(--gold), transparent)
    }

    /* 系统介绍列表(兽魂/武穆) */
    .sys-intro {
      list-style: none;
      max-width: 980px;
      margin: 0 auto 18px;
      padding: 14px 18px;
      background: rgba(8, 16, 36, .65);
      border: 1px solid var(--line);
      border-radius: 10px;
      font-size: 14px;
      color: #ffffff;
      line-height: 2
    }

    .sys-intro li::before {
      content: '◆';
      color: var(--gold);
      margin-right: 8px;
      font-size: 11px
    }

    .sys-intro + .map-table {
      margin-bottom: 18px
    }

    .sys-tip {
      max-width: 980px;
      margin: 12px auto 0;
      font-size: 13px;
      color: rgba(255,255,255,.84);
      letter-spacing: 1px;
      text-align: center
    }

    /* 品质徽章 */
    .tier {
      display: inline-block;
      padding: 1px 10px;
      border-radius: 9px;
      font-size: 13px;
      letter-spacing: 2px
    }

    .tier-orange {
      background: rgba(255, 150, 40, .16);
      color: #ffb35c;
      border: 1px solid rgba(255, 150, 40, .45)
    }

    .tier-red {
      background: rgba(255, 60, 40, .16);
      color: #ff8a6a;
      border: 1px solid rgba(255, 60, 40, .45)
    }

    /* 灯箱(点击放大) */
    .lb {
      position: fixed;
      inset: 0;
      z-index: 999;
      background: rgba(2, 5, 14, .95);
      display: none;
      align-items: center;
      justify-content: center;
      cursor: zoom-out
    }

    .lb.on {
      display: flex
    }

    .lb img {
      max-width: 88vw;
      max-height: 88vh;
      border-radius: 10px;
      border: 1px solid rgba(232, 192, 98, .4);
      box-shadow: 0 0 60px rgba(232, 192, 98, .15)
    }

    /* ===== 神技表格 ===== */
    .skill-table .cat-row td {
      background: linear-gradient(180deg, rgba(232, 192, 98, .13), rgba(232, 192, 98, .04));
      color: var(--fire);
      letter-spacing: 2px;
      font-weight: 600;
      font-size: 15px
    }

    /* ===== Hidden maps (表格形式) ===== */
    .map-table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
      background: linear-gradient(180deg, rgba(10, 20, 44, .92), rgba(4, 10, 26, .92));
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--line)
    }

    .map-table thead {
      background: linear-gradient(180deg, rgba(232, 192, 98, .15), rgba(232, 192, 98, .05))
    }

    .map-table th {
      padding: 14px 16px;
      text-align: left;
      font-size: 15px;
      color: var(--gold-hi);
      letter-spacing: 2px;
      border-bottom: 1px solid var(--line);
      font-weight: 500
    }

    .map-table td {
      padding: 12px 16px;
      border-bottom: 1px solid var(--line);
      font-size: 14px;
      color: #ffffff
    }

    .map-table tr:hover {
      background: rgba(232, 192, 98, .08)
    }

    .map-table tr:last-child td {
      border-bottom: none
    }

    .map-name {
      font-family: "Ma Shan Zheng", serif;
      font-size: 18px;
      color: var(--gold-hi);
      letter-spacing: 2px
    }

    .map-cond {
      font-size: 13px;
      color: rgba(255,255,255,.84)
    }

    .map-cond b {
      color: var(--gold)
    }

    .map-path {
      font-size: 13px;
      color: #7fafd8;
      white-space: nowrap
    }

    .map-path .arrow {
      color: var(--fire);
      margin: 0 4px
    }

    /* ===== 成长攻略 ===== */
    .gp-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 16px;
      margin: 20px 0
    }

    .gp-card {
      background: linear-gradient(180deg, rgba(10, 20, 44, .88), rgba(4, 10, 26, .88));
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 18px;
      transition: .3s
    }

    .gp-card:hover {
      border-color: rgba(232, 192, 98, .4);
      transform: translateY(-4px)
    }

    .gp-card .ph {
      font-family: "Ma Shan Zheng", serif;
      font-size: 22px;
      color: var(--fire);
      letter-spacing: 4px
    }

    .gp-card .lv {
      font-size: 12px;
      color: rgba(255,255,255,.84);
      letter-spacing: 2px;
      margin: 2px 0 4px
    }

    .gp-card .tt {
      color: var(--gold-hi);
      font-size: 15px;
      letter-spacing: 1px;
      margin-bottom: 10px
    }

    .gp-card .ct {
      white-space: pre-line;
      font-size: 13px;
      color: #ffffff;
      line-height: 2
    }

    /* ===== 神兵锻造 ===== */
    .chain-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 16px;
      margin: 20px 0
    }

    .chain-card {
      background: linear-gradient(180deg, rgba(10, 20, 44, .88), rgba(4, 10, 26, .88));
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 16px 18px;
      transition: .3s
    }

    .chain-card:hover {
      border-color: rgba(232, 192, 98, .4);
      transform: translateY(-4px)
    }

    .chain-card .ct-t {
      font-family: "Ma Shan Zheng", serif;
      font-size: 20px;
      color: var(--gold-hi);
      letter-spacing: 2px
    }

    .chain-card .ct-n {
      font-size: 12px;
      color: #7fafd8;
      letter-spacing: 1px;
      margin: 2px 0 10px
    }

    .chain-card dt {
      font-size: 13px;
      color: var(--gold);
      margin-top: 8px;
      letter-spacing: 1px
    }

    .chain-card dd {
      margin: 2px 0 0;
      font-size: 13px;
      color: #ffffff;
      line-height: 1.7
    }

    footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 200;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px 14px;
      padding: 10px 24px;
      font-size: 13px;
      letter-spacing: 1px;
      background: rgba(3, 7, 18, .95);
      border-top: 1px solid var(--line);
      color: rgba(255,255,255,.78)
    }

    footer .copy {
      color: rgba(255,255,255,.84);
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
      transition: color .2s
    }

    footer .copy:hover {
      color: var(--gold-hi)
    }

    footer .fnav {
      margin-left: auto
    }

    footer .fnav a {
      color: #ffffff;
      cursor: pointer;
      text-decoration: none;
      transition: .2s
    }

    footer .fnav a:hover {
      color: var(--gold-hi)
    }

    @media(max-width:640px) {
      .hero-deco {
        display: none
      }

      footer .fnav {
        display: none
      }

      #logoBox {
        width: 100px;
        height: 100px;
        top: 64px;
        right: 10px;
        border-radius: 8px
      }

      #logoBox .logo-ph {
        font-size: 11px;
        letter-spacing: 1px
      }

      section {
        padding: 36px 16px
      }

      .stats {
        gap: 10px
      }

      .stat {
        padding: 10px 14px;
        min-width: 78px
      }

      .map-table {
        font-size: 12px
      }

      .map-table th,
      .map-table td {
        padding: 8px 10px
      }

      .gear-grid {
        gap: 10px
      }
    }
    /* ===== 左侧悬浮按钮列(下载 / 授权) ===== */
    #fabCol {
      position: fixed;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 180;
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .fabwrap { position: relative }

    .fab {
      writing-mode: vertical-rl;
      font-family: "Ma Shan Zheng", serif;
      font-size: 20px;
      letter-spacing: 7px;
      color: #0b1530;
      padding: 20px 11px;
      background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #b98f3a);
      border: none;
      border-radius: 0 12px 12px 0;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      animation: fabGlow 2.4s ease-in-out infinite;
      transition: transform .3s, filter .3s
    }

    .fab::after {
      content: "";
      position: absolute;
      left: -80%;
      top: -60%;
      width: 60%;
      height: 220%;
      background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
      transform: rotate(16deg);
      transition: left .6s ease
    }

    .fabwrap:hover .fab::after,
    .fabwrap.open .fab::after {
      left: 130%
    }

    @keyframes fabGlow {

      0%,
      100% { box-shadow: 3px 0 12px rgba(232, 192, 98, .28) }

      50% { box-shadow: 3px 0 26px rgba(232, 192, 98, .6) }
    }

    .fabwrap:hover .fab,
    .fabwrap.open .fab {
      transform: translateX(4px);
      filter: brightness(1.08)
    }

    /* 弹出面板 */
    .fab-panel {
      position: absolute;
      left: 100%;
      top: 50%;
      width: 352px;
      max-width: calc(100vw - 78px);
      transform: translateY(-50%) translateX(-16px);
      opacity: 0;
      pointer-events: none;
      background: rgba(3, 7, 18, .97);
      border: 1px solid rgba(232, 192, 98, .4);
      border-radius: 14px;
      padding: 14px 16px 10px;
      box-shadow: 0 18px 46px rgba(0, 0, 0, .6), 0 0 30px rgba(232, 192, 98, .12);
      transition: opacity .35s, transform .35s cubic-bezier(.22, 1, .36, 1)
    }

    .fabwrap:hover .fab-panel,
    .fabwrap.open .fab-panel {
      opacity: 1;
      transform: translateY(-50%) translateX(10px);
      pointer-events: auto
    }

    .fp-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 10px
    }

    .fp-head .fp-t {
      font-family: "Ma Shan Zheng", serif;
      font-size: 21px;
      color: var(--gold-hi);
      letter-spacing: 4px
    }

    .fp-head .fp-sub {
      flex: 1;
      font-size: 12px;
      letter-spacing: 2px;
      color: rgba(255,255,255,.84)
    }

    .fab-close {
      cursor: pointer;
      color: rgba(255,255,255,.84);
      font-size: 16px;
      padding: 2px 6px;
      transition: .25s
    }

    .fab-close:hover {
      color: var(--war)
    }

    /* 链接下载按钮与面板 */
    .fab.link {
      background: linear-gradient(180deg, #7db2ff, var(--mag) 55%, #2b62c0);
      color: #eaf3ff;
      animation: linkGlow 2.8s ease-in-out infinite
    }

    @keyframes linkGlow {

      0%,
      100% { box-shadow: 3px 0 12px rgba(74, 138, 240, .3) }

      50% { box-shadow: 3px 0 26px rgba(74, 138, 240, .6) }
    }

    .link-panel {
      width: 368px;
      max-height: 78vh;
      overflow-y: auto
    }

    .lk-sec {
      margin: 10px 0 2px;
      padding-top: 10px;
      border-top: 1px dashed rgba(232, 192, 98, .16);
      font-size: 13px;
      letter-spacing: 2px;
      color: rgba(255,255,255,.84)
    }

    .lk-sec.hl {
      color: #ffe6a6;
      text-shadow: 0 0 12px rgba(232, 192, 98, .6);
      font-weight: 700;
      letter-spacing: 3px;
      background: linear-gradient(90deg, rgba(232, 192, 98, .22), rgba(232, 192, 98, 0));
      border-left: 3px solid var(--gold);
      padding: 6px 8px;
      border-radius: 4px
    }

    .lk-sec:first-of-type { border-top: 0; margin-top: 0; padding-top: 0 }

    .lk-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 2px
    }

    .lk-row i {
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-style: normal;
      font-family: "Ma Shan Zheng", serif;
      font-size: 18px;
      border: 1px solid
    }

    .lk-row i.and { color: #7fe0a2; border-color: rgba(59, 191, 107, .6) }

    .lk-row i.ios { color: #dcb4ff; border-color: rgba(192, 132, 252, .6) }

    .lk-row i.pc { color: #8ab4f5; border-color: rgba(74, 138, 240, .6) }

    .lk-name {
      flex: 1;
      min-width: 0;
      font-size: 14px;
      letter-spacing: 1px;
      color: #f2ead6
    }

    .lk-name small {
      display: block;
      margin-top: 2px;
      font-size: 11px;
      letter-spacing: 1px;
      color: rgba(255,255,255,.84);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .lk-code {
      flex: 0 0 auto;
      font-family: inherit;
      font-size: 12px;
      letter-spacing: 1px;
      color: var(--gold-hi);
      background: rgba(232, 192, 98, .1);
      border: 1px solid rgba(232, 192, 98, .45);
      border-radius: 999px;
      padding: 3px 10px;
      cursor: pointer;
      transition: .25s
    }

    .lk-code:hover { background: rgba(232, 192, 98, .22) }

    .lk-code.ok {
      color: #3bbf6b;
      border-color: rgba(59, 191, 107, .6)
    }

    .lk-go {
      flex: 0 0 auto;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      color: #0b1530;
      background: linear-gradient(180deg, var(--gold-hi), var(--gold));
      border-radius: 999px;
      padding: 4px 12px;
      text-decoration: none;
      transition: .25s
    }

    .lk-go:hover {
      filter: brightness(1.12);
      box-shadow: 0 0 12px rgba(232, 192, 98, .4)
    }

    /* 授权按钮与面板 */
    .fab.auth {
      background: linear-gradient(180deg, #ff9a6a, var(--fire) 55%, var(--fire-d));
      color: #fff6ec;
      animation: authGlow 2.6s ease-in-out infinite
    }

    @keyframes authGlow {

      0%,
      100% { box-shadow: 3px 0 12px rgba(255, 91, 46, .3) }

      50% { box-shadow: 3px 0 26px rgba(255, 91, 46, .62) }
    }

    .auth-panel { width: 300px }

    .auth-img-box {
      padding: 8px;
      border-radius: 8px;
      background: linear-gradient(160deg, #fdf8ec, #f2e9d0);
      border: 1px solid rgba(232, 192, 98, .5);
      cursor: zoom-in;
      transition: .25s
    }

    .auth-img-box:hover {
      border-color: var(--gold);
      box-shadow: 0 0 18px rgba(232, 192, 98, .25)
    }

    .auth-img-box img {
      display: block;
      width: 100%;
      max-height: 60vh;
      object-fit: contain
    }

    .auth-tip {
      margin-top: 8px;
      text-align: center;
      font-size: 12px;
      letter-spacing: 2px;
      color: rgba(255,255,255,.84)
    }

    /* ===== 右侧悬浮快捷导航 ===== */
    #rnavCol {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 180;
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .rnav {
      writing-mode: vertical-rl;
      font-family: "Ma Shan Zheng", serif;
      font-size: 20px;
      letter-spacing: 7px;
      padding: 20px 11px;
      border: none;
      border-radius: 12px 0 0 12px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform .3s, filter .3s
    }

    .rnav::after {
      content: "";
      position: absolute;
      left: -80%;
      top: -60%;
      width: 60%;
      height: 220%;
      background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
      transform: rotate(16deg);
      transition: left .6s ease
    }

    .rnav:hover::after { left: 130% }

    .rn-map {
      background: linear-gradient(180deg, #e6ccff, var(--epic) 55%, #8b3fd6);
      color: #101d40;
      animation: mapGlow 2.7s ease-in-out infinite
    }

    @keyframes mapGlow {

      0%,
      100% { box-shadow: -3px 0 12px rgba(192, 132, 252, .3) }

      50% { box-shadow: -3px 0 26px rgba(192, 132, 252, .6) }
    }

    .rn-ski {
      background: linear-gradient(180deg, #ff9a6a, var(--fire) 55%, var(--fire-d));
      color: #fff6ec;
      animation: skiGlow 2.9s ease-in-out infinite
    }

    @keyframes skiGlow {

      0%,
      100% { box-shadow: -3px 0 12px rgba(255, 91, 46, .3) }

      50% { box-shadow: -3px 0 26px rgba(255, 91, 46, .6) }
    }

    .rnav:hover {
      transform: translateX(-4px);
      filter: brightness(1.08)
    }

    .rnavwrap { position: relative }

    .rnav-panel {
      position: absolute;
      right: 100%;
      top: 50%;
      width: 760px;
      max-width: calc(100vw - 90px);
      max-height: 80vh;
      overflow-y: auto;
      transform: translateY(-50%) translateX(16px);
      opacity: 0;
      pointer-events: none;
      background: rgba(3, 7, 18, .97);
      border: 1px solid rgba(232, 192, 98, .4);
      border-radius: 14px;
      padding: 14px 16px 12px;
      box-shadow: -18px 18px 46px rgba(0, 0, 0, .6), 0 0 30px rgba(232, 192, 98, .12);
      transition: opacity .35s, transform .35s cubic-bezier(.22, 1, .36, 1)
    }

    .rnavwrap:hover .rnav-panel,
    .rnavwrap.open .rnav-panel {
      opacity: 1;
      transform: translateY(-50%) translateX(-10px);
      pointer-events: auto
    }

    .rnav-body { margin-top: 4px }

    .rnav-body .map-table { margin: 0 }

    @media(max-width:640px) {

      .fab {
        font-size: 18px;
        padding: 15px 9px;
        letter-spacing: 5px
      }

      .fab-panel {
        width: 320px;
        max-width: calc(100vw - 62px)
      }

      .auth-panel { width: 290px }

      .link-panel { width: 300px }

      .rnav {
        font-size: 18px;
        padding: 15px 9px;
        letter-spacing: 5px
      }

      .rnav-panel {
        max-width: calc(100vw - 60px);
        padding: 10px 10px 8px
      }

      .rnav-panel .map-table { font-size: 13px }
    }
  
/* ===== 分页模式新增 ===== */
#app{padding-bottom:110px}
nav a.nav-dl.active{color:#2a1c08;text-shadow:0 1px 0 rgba(255,244,200,.6)}
.page-wrap{max-width:1080px;margin:86px auto 30px;padding:0 18px}
.panel-inner{background:rgba(11,20,42,.55);border:1px solid var(--line);border-radius:12px;padding:18px}
.entries{max-width:1080px;margin:10px auto 40px;padding:0 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.ent-card{display:block;background:linear-gradient(180deg,rgba(15,27,56,.9),rgba(8,15,34,.9));border:1px solid var(--line);border-radius:12px;padding:20px 18px;color:#ffffff;text-decoration:none;transition:.3s}
.ent-card:hover{border-color:rgba(232,192,98,.45);transform:translateY(-4px);color:#ffe6a6}
.ent-card b{display:block;font-size:19px;color:var(--gold-hi);letter-spacing:3px;margin-bottom:6px;font-family:"Ma Shan Zheng",serif;font-weight:400}
.ent-card span{font-size:13px;color:rgba(255,255,255,.88);line-height:1.7}
.ent-card.dl b{color:#ffd76e;text-shadow:0 0 12px rgba(232,192,98,.6)}
.dl-page{max-width:640px;margin:86px auto 30px;padding:24px 26px;background:linear-gradient(180deg,rgba(15,27,56,.9),rgba(8,15,34,.9));border:1px solid var(--line);border-radius:14px}
.dl-page .lk-sec:first-of-type{border-top:0;margin-top:0;padding-top:0}

/* ===== 导航/页脚回紧(字号调大后防换行拥挤) ===== */
    nav{gap:2px;padding:10px 8px}
    nav a{padding:7px 11px;font-size:15px;letter-spacing:1.5px}
    footer{font-size:13px}
    footer .copy{font-size:13px;position:static;transform:none}
    footer .fnav a{font-size:13px}

/* ===== 官方授权页 + 12栏目导航适配 ===== */
    nav{gap:1px;padding:9px 6px}
    nav a{padding:7px 8px;letter-spacing:.5px}
    .auth-page{max-width:680px;margin:0 auto}
    .auth-page .auth-img-box{padding:14px}
    .auth-page .auth-img-box img{width:100%;display:block;border-radius:4px}
    @media(max-width:1000px){
      .page-wrap,.dl-page{margin-top:150px}
    }

/* ===== 玩法特色:查看详情按钮 ===== */
    .feat-more{display:inline-block;margin-left:10px;padding:2px 10px;font-size:12px;letter-spacing:1px;color:var(--gold-hi);text-decoration:none;border:1px solid rgba(232,192,98,.45);border-radius:20px;background:rgba(232,192,98,.08);white-space:nowrap;transition:.25s;vertical-align:middle}
    .feat-more:hover{background:rgba(232,192,98,.22);border-color:var(--gold);box-shadow:0 0 10px rgba(232,192,98,.45);color:#fff3d0}

/* ===== Hero 对刀动画(双天魔神甲屠龙) ===== */
    #hero h1.duel-hide{display:none !important}
    .duel-stage{position:relative;width:min(720px,92vw);height:300px;margin:0 auto;pointer-events:none}
    .duel{position:absolute;bottom:0;width:190px;mix-blend-mode:screen;filter:drop-shadow(0 0 20px rgba(255,180,60,.4)) drop-shadow(0 0 60px rgba(255,120,30,.18))}
    .duel.l{left:calc(50% - 216px);animation:duelL 7s cubic-bezier(.22,.9,.36,1) infinite}
    .duel.r{right:calc(50% - 216px);left:auto;animation:duelR 7s cubic-bezier(.22,.9,.36,1) infinite}
    .duel-spark{position:absolute;left:50%;bottom:120px;width:56px;height:56px;margin-left:-28px;border-radius:50%;
      background:radial-gradient(circle,#fff8e0 0%,#ffd76e 30%,rgba(255,140,40,.55) 60%,transparent 75%);
      opacity:0;mix-blend-mode:screen;filter:blur(1px);animation:duelSpark 7s ease-out infinite}
    @keyframes duelL{
      0%   {transform:translateX(-58vw) }
      30%  {transform:translateX(-14px)}
      38%  {transform:translateX(0)}
      52%  {transform:translateX(-10px)}
      62%  {transform:translateX(0)}
      100% {transform:translateX(-58vw)}
    }
    @keyframes duelR{
      0%   {transform:translateX(58vw)}
      30%  {transform:translateX(14px)}
      38%  {transform:translateX(0)}
      52%  {transform:translateX(10px)}
      62%  {transform:translateX(0)}
      100% {transform:translateX(58vw)}
    }
    @keyframes duelSpark{
      0%,28%{opacity:0;transform:scale(.4)}
      32%  {opacity:1;transform:scale(1.5)}
      40%  {opacity:.25;transform:scale(.9)}
      48%  {opacity:1;transform:scale(2)}
      60%,100%{opacity:0;transform:scale(.4)}
    }
    @media(max-width:760px){
      .duel{width:120px}
      .duel.l{left:calc(50% - 140px)}
      .duel.r{right:calc(50% - 140px)}
      .duel-stage{height:210px}
      .duel-spark{bottom:86px}
    }

/* ===== hero 副标题新文案(996三端介绍+标语) ===== */
    .hero-brief{max-width:640px;margin:14px auto 0;font-size:15px;line-height:1.9;letter-spacing:1px;color:rgba(255,255,255,.85);text-shadow:0 0 10px rgba(0,0,0,.5)}
    .hero-slogans{margin:16px auto 0;display:flex;flex-direction:column;gap:8px}
    .hero-slogans span{font-size:15px;letter-spacing:2px;color:var(--gold-hi);text-shadow:0 0 12px rgba(232,192,98,.45),0 0 28px rgba(232,192,98,.2)}


/* ===== Hero 对刀视频: 铺满hero当背景跑 ===== */
#hero .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:0;pointer-events:none;filter:saturate(1.1) contrast(1.04)}
#hero .hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,8,20,.45) 0%,rgba(3,8,20,.08) 30%,rgba(3,8,20,.12) 55%,rgba(3,8,20,.72) 82%,rgba(3,8,20,.96) 100%)}
#hero .hero-deco{z-index:2}
#hero .sub,#hero .hero-brief,#hero .hero-slogans{position:relative;z-index:3}


/* ===== 主页内嵌下载面板 ===== */
.dl-home{margin:14px auto 40px}

/* =====

/* ===== 鎏金暗黑·复古传奇UI覆盖层(删除本段即回退) ===== */
:root{--bg:#0a0603;--gold:#d4a53c;--gold-hi:#f4d78a;--fire:#e0532a;--fire-d:#a82a12;--line:rgba(212,165,60,.28)}
html,body{background:#0a0603;color:#f0e6d2}
body{background:
radial-gradient(1100px 640px at 84% -8%,rgba(196,140,40,.13),transparent 62%),
radial-gradient(900px 560px at 6% 108%,rgba(150,28,14,.20),transparent 60%),
radial-gradient(760px 520px at 50% 46%,rgba(120,70,16,.09),transparent 70%),
linear-gradient(180deg,#0b0704,#150c05 42%,#0a0603)}
body::before{opacity:.07}
.orb{opacity:.32}
.orb.o1{background:radial-gradient(circle,#8e1a0c,transparent 70%)}
.orb.o2{background:radial-gradient(circle,#b8860b,transparent 70%)}
.orb.o3{background:radial-gradient(circle,#3a2008,transparent 70%);opacity:.22}
/* 鎏金铆钉框:四角金钉+做旧深色金属面板 */
.stat,.sk-card,.gear-item,.gp-card,.chain-card,.ent-card,.dl-page,.panel-inner,.fab-panel,.rnav-panel{
background-image:
radial-gradient(circle 2px at 9px 9px,#e8c062 50%,transparent 55%),
radial-gradient(circle 2px at calc(100% - 9px) 9px,#e8c062 50%,transparent 55%),
radial-gradient(circle 2px at 9px calc(100% - 9px),#e8c062 50%,transparent 55%),
radial-gradient(circle 2px at calc(100% - 9px) calc(100% - 9px),#e8c062 50%,transparent 55%),
linear-gradient(180deg,rgba(36,23,10,.85),rgba(14,9,4,.94));
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat;
border:1px solid rgba(212,165,60,.4);
box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(244,215,138,.12),0 6px 18px rgba(0,0,0,.55)}
/* 表格:青铜刻线框 */
.feature-table,.map-table{border:1px solid rgba(212,165,60,.45);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 8px 22px rgba(0,0,0,.5);background:linear-gradient(180deg,rgba(30,19,9,.9),rgba(12,8,4,.95))}
.feature-table thead,.map-table thead{background:linear-gradient(180deg,rgba(212,165,60,.22),rgba(212,165,60,.06))}
.skill-table .cat-row td{background:linear-gradient(180deg,rgba(212,165,60,.18),rgba(212,165,60,.05))}
/* 导航/页脚:黑漆描金 */
nav{background:linear-gradient(180deg,rgba(18,11,5,.97),rgba(9,6,2,.97));border-bottom:1px solid rgba(212,165,60,.5);box-shadow:0 1px 0 rgba(0,0,0,.85),0 8px 20px rgba(0,0,0,.5)}
nav a{color:#e6d2a4}
nav a:hover,nav a.active{color:var(--gold-hi)}
footer{background:linear-gradient(180deg,rgba(18,11,5,.97),rgba(9,6,2,.97));border-top:1px solid rgba(212,165,60,.5);color:rgba(232,214,168,.72)}
footer .copy{color:rgba(232,214,168,.8)}
footer .fnav a{color:#e6d2a4}
/* 栏目标题:雕刻纹分隔线+暗红宝珠 */
.s-title::after{content:"";display:block;width:min(260px,60%);height:7px;margin:12px auto 0;background:
radial-gradient(circle 2.5px at 50% 50%,#e0532a 70%,transparent 80%),
repeating-linear-gradient(90deg,transparent 0 7px,rgba(212,165,60,.6) 7px 9px,transparent 9px 16px);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
/* 主视觉:龙鳞纹金线底纹 */
#hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
background-image:
radial-gradient(circle 12px at 50% -3px,transparent 10px,rgba(212,165,60,.05) 11px,transparent 13px),
radial-gradient(circle 12px at 50% -3px,transparent 10px,rgba(212,165,60,.04) 11px,transparent 13px);
background-size:26px 18px;background-position:0 0,13px 9px;
-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 85%);
mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 85%)}
/* 悬浮面板内衬 */
.lk-sec{border-top-color:rgba(212,165,60,.22)}
.lk-sec.hl{background:linear-gradient(90deg,rgba(212,165,60,.26),rgba(212,165,60,0))}
.gear-item .cap{background:rgba(212,165,60,.08);border-top-color:rgba(212,165,60,.3)}

/* 鎏金层补充:hero视频全屏居中嵌入 */
#hero .hero-video{object-position:center center}
#hero .hero-shade{background:linear-gradient(180deg,rgba(10,6,3,.6) 0%,rgba(10,6,3,.1) 26%,rgba(10,6,3,.08) 55%,rgba(10,6,3,.75) 82%,rgba(10,6,3,.96) 100%)}

/* 鎏金层补充2:hero视频全屏无缝融合(解除宽度限制+边缘羽化) */
#hero{max-width:none;width:100%;min-height:100vh;padding:150px 20px 90px}
#hero .hero-video{object-position:center center;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 74%,transparent 99%);
mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 74%,transparent 99%)}
#hero .hero-shade{background:
linear-gradient(180deg,rgba(10,6,3,.5) 0%,rgba(10,6,3,0) 24%,rgba(10,6,3,0) 56%,rgba(10,6,3,.72) 84%,rgba(10,6,3,.96) 100%),
linear-gradient(90deg,rgba(10,6,3,.45) 0%,rgba(10,6,3,0) 14%,rgba(10,6,3,0) 86%,rgba(10,6,3,.45) 100%)}

/* 鎏金层补充3:下载面板上移嵌入视频底部 */
.dl-home{position:relative;z-index:6;margin:-330px auto 36px}

/* 鎏金层补充4:四角「冀光传奇」闪烁大字(视频对砍爆炸光环后浮现) */
.hero-deco{font-size:clamp(84px,12vw,168px);letter-spacing:0;line-height:1;color:#f4d78a;opacity:0;text-shadow:0 0 14px rgba(244,215,138,.5),0 0 46px rgba(212,165,60,.32),0 2px 0 rgba(0,0,0,.55)}
.hero-deco.c1{left:1.5vw;top:72px;--sx:42vw;--sy:30vh}
.hero-deco.c2{right:1.5vw;top:72px;--sx:-42vw;--sy:30vh}
.hero-deco.c3{left:1.5vw;bottom:4vh;--sx:42vw;--sy:-28vh}
.hero-deco.c4{right:1.5vw;bottom:4vh;--sx:-42vw;--sy:-28vh}
#hero .hero-deco{z-index:3}
.hero-deco.on{animation:decoFly 2s cubic-bezier(.22,.61,.36,1) both,decoFlicker 2.6s linear 2s infinite}
.hero-deco.c2.on{animation:decoFly 1.9s cubic-bezier(.22,.61,.36,1) both,decoFlicker 2.9s linear 1.9s infinite}
.hero-deco.c3.on{animation:decoFly 2.15s cubic-bezier(.22,.61,.36,1) both,decoFlicker 2.4s linear 2.15s infinite}
.hero-deco.c4.on{animation:decoFly 1.85s cubic-bezier(.22,.61,.36,1) both,decoFlicker 2.75s linear 1.85s infinite}
@keyframes decoFly{
0%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(1.25)}
16%{opacity:1}
72%{opacity:.9}
100%{opacity:1;transform:translate(0,0) scale(1)}
}
@keyframes decoFlicker{
0%,100%{opacity:.92}
7%{opacity:.28}
11%{opacity:.78}
26%{opacity:.55}
32%{opacity:.96}
54%{opacity:.38}
60%{opacity:.85}
78%{opacity:.62}
86%{opacity:1}
}

/* 鎏金层补充5:下载栏上方四条标语(红蓝闪烁·加大加粗) */
.hero-motto{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:auto;margin-bottom:254px}
.hero-motto span{font-size:clamp(19px,2.3vw,27px);font-weight:900;letter-spacing:4px;font-family:"Noto Serif SC",serif;white-space:nowrap;animation:mottoAB 1.9s ease-in-out infinite}
.hero-motto span:nth-child(2),.hero-motto span:nth-child(4){animation-delay:-.95s}
@keyframes mottoAB{
0%,100%{color:#d01812;text-shadow:0 0 14px rgba(215,40,25,.9),0 0 38px rgba(140,10,5,.6)}
30%{opacity:1}
38%{opacity:.45}
42%{opacity:1}
68%{opacity:1}
76%{opacity:.4}
82%{opacity:1}
}

@media(max-height:860px){.dl-home{margin-top:-260px}.hero-motto{margin-bottom:184px}}

/* 鎏金层补充6:手机端标语缩小防超屏 */
@media(max-width:640px){.hero-motto{gap:9px}.hero-motto span{font-size:15px;letter-spacing:2px}}