/* 与 portal-web 官网首页一致：方正宋刻本秀楷 */
@font-face {
  font-family: "FZSongKBXKJF";
  src:
    url("./assets/fonts/FZSongKBXKJW-M.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FZSongKBXKJF";
  src:
    url("./assets/fonts/FZSongKBXKJW-M.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FZSongKBXKJF";
  src:
    url("./assets/fonts/FZSongKBXKJW-DB.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FZSongKBXKJF";
  src:
    url("./assets/fonts/FZSongKBXKJW-B.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FZSongKBXKJF";
  src:
    url("./assets/fonts/FZSongKBXKJW-B.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #f4ead7;
  --ink-strong: #fff4dd;
  --muted: #aeb8c2;
  --night: #07101a;
  --night-soft: #0c1823;
  --panel: rgb(7 15 24 / 86%);
  --panel-strong: rgb(5 12 19 / 94%);
  --gold: #d8b56e;
  --gold-bright: #f0d69a;
  --gold-dark: #8d642f;
  --red: #a42b27;
  --line: rgb(216 181 110 / 30%);
  --line-soft: rgb(205 216 226 / 14%);
  /* 与 portal-web 沉浸首页尺寸对齐 */
  --header-height: 92px;
  --content-width: 1200px;
  --hero-stage-width: 2960px;
  --hero-stage-height: 1440px;
  --compact-breakpoint: 900px;
  --font-family-base: "FZSongKBXKJF", serif;

  /* 字号阶梯：桌面值对齐当前临时排版视觉 */
  --text-2xs: 12px;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 22px;
  --text-3xl: 24px;
  --text-4xl: 28px;
  --text-5xl: 30px;
  --text-6xl: 34px;
  --text-7xl: 48px;
  --text-8xl: 48px; /* 原充值标题 50px，并入章节标题档 */

  /* 展示级（首屏 / 法律）保留流体缩放 */
  --text-display: clamp(62px, 6vw, 92px);
  --text-hero-title: clamp(42px, 4.2vw, 64px);
  --text-hero-line: clamp(28px, 3.2vw, 48px);
  --text-countdown: clamp(34px, 4vw, 56px);
  --text-countdown-unit: clamp(16px, 1.8vw, 24px);
  --text-hero-lead: clamp(16px, 1.35vw, 20px);
  --text-legal: clamp(14px, 0.8vw, 18px);

  font-family: var(--font-family-base);
  font-size: var(--text-md);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

.content-empty {
  display: grid;
  min-height: 120px;
  margin: 0;
  padding: 24px;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.news-layout.is-empty {
  grid-template-columns: minmax(0, 1fr);
}

[data-media-cover] > .content-empty {
  min-height: 100%;
}

.main-preview-notice {
  position: fixed;
  z-index: 100;
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: 12px 18px;
  border: 1px solid var(--gold);
  background: var(--night);
  color: var(--gold-bright);
  text-align: center;
}

a.is-unavailable {
  opacity: 0.55;
  cursor: default;
}

[data-media-cover] > video,
.media-original,
.media-original > img {
  display: block;
  width: 100%;
  height: 100%;
}

[data-media-cover] > video {
  object-fit: contain;
}

.media-download {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 14px;
  background: var(--night);
  color: var(--gold-bright);
  border: 1px solid var(--gold);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: #050b12;
  line-height: 1.65;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 8px 14px;
  border: 1px solid var(--gold);
  background: var(--night);
  color: var(--gold-bright);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  min-height: var(--header-height);
  height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(14px, 2.4vw, 46px);
  border-bottom: 1px solid rgb(216 181 110 / 16%);
  background: linear-gradient(180deg, rgb(5 12 20 / 20%), rgb(6 14 23 / 20%));
  box-shadow: none;
  backdrop-filter: none;
  transition: transform 280ms ease, opacity 220ms ease, visibility 220ms ease;
}

.site-header.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(-100%);
}

.brand {
  display: inline-flex;
  width: clamp(123px, 10.5vw, 170px);
  align-items: center;
}

.brand img {
  width: clamp(123px, 10.5vw, 153px);
  height: auto;
  filter: drop-shadow(0 4px 9px rgb(0 0 0 / 42%));
}

.desktop-nav {
  position: relative;
  display: flex;
  min-height: var(--header-height);
  flex-direction: column;
  align-items: stretch;
}

.desktop-nav-primary {
  display: flex;
  min-height: var(--header-height);
  align-items: stretch;
}

.desktop-nav-primary > a {
  position: relative;
  display: flex;
  min-width: 120px;
  flex: 1 1 120px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
  color: rgb(241 232 215 / 76%);
  line-height: 1.15;
  transition: color 180ms ease, background-color 180ms ease;
}

.desktop-nav small {
  color: rgb(178 189 201 / 56%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-xs);
  letter-spacing: 0;
}

.desktop-nav span {
  margin-top: 6px;
  font-size: var(--text-xl);
}

.desktop-nav-primary > a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background: var(--red);
  box-shadow: 0 0 12px rgb(164 43 39 / 72%);
  content: "";
  transform: translateX(-50%);
  transition: width 180ms ease;
}

.desktop-nav-primary > a:hover,
.desktop-nav-primary > a:focus-visible,
.desktop-nav-primary > a.is-active,
.desktop-nav-primary > a.is-current {
  background: rgb(158 124 97 / 50%);
  color: var(--gold-bright);
}

.desktop-nav-primary > a:hover::after,
.desktop-nav-primary > a:focus-visible::after,
.desktop-nav-primary > a.is-active::after,
.desktop-nav-primary > a.is-current::after {
  width: 54px;
}

.nav-mega {
  position: absolute;
  z-index: 45;
  top: 100%;
  right: 0;
  left: 0;
}

.nav-mega[hidden] {
  display: none !important;
}

.nav-mega-panel {
  display: flex;
  align-items: stretch;
  border: 1px solid rgb(216 181 110 / 20%);
  border-top: none;
  background: rgb(164 43 39 / 30%);
}

.nav-mega-column {
  display: flex;
  min-width: 120px;
  flex: 1 1 120px;
  flex-direction: column;
  align-items: center;
  padding: 14px 10px 18px;
  text-align: center;
}

.nav-mega-column.is-empty {
  padding: 0;
}

.nav-mega-column a {
  padding: 6px 10px;
  color: rgb(232 237 241 / 76%);
  font-size: var(--text-lg);
  white-space: nowrap;
  transition: color 160ms ease;
}

.nav-mega-column a:hover,
.nav-mega-column a:focus-visible,
.nav-mega-column a[aria-current="page"] {
  color: var(--gold-bright);
}

.mobile-actions,
.mobile-menu,
.menu-backdrop {
  display: none;
}

.section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  border-bottom: 1px solid rgb(216 181 110 / 14%);
  background-color: var(--night);
  isolation: isolate;
}

.section::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgb(3 9 15 / 30%), rgb(3 9 15 / 78%));
  content: "";
  pointer-events: none;
}

.section-frame {
  position: relative;
  width: min(var(--content-width), calc(100% - 64px));
  margin: 0 auto;
  padding: 108px 0 96px;
}

.section-muted {
  background-color: #0a141e;
}

.wire-label {
  margin: 0 0 11px;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", var(--font-family-base);
  font-size: var(--text-2xl);
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-family-base);
  font-weight: 500;
  letter-spacing: 0;
}

h1 {
  max-width: 640px;
  margin-bottom: 18px;
  color: var(--gold-bright);
  font-size: var(--text-display);
  line-height: 0.98;
  text-shadow: 0 8px 30px rgb(0 0 0 / 62%);
}

#hero-title {
  display: flex;
  max-width: min(720px, 100%);
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  font-size: var(--text-hero-title);
  line-height: 1.05;
}

.hero-title-image {
  display: block;
  width: min(520px, 100%);
  height: auto;
  margin-left: -51px;
  filter: drop-shadow(0 8px 24px rgb(0 0 0 / 55%));
}

.hero-title-line {
  display: block;
  width: max-content;
  max-width: none;
  margin-top: -16px;
  color: rgba(240, 214, 154, 1);
  font-size: var(--text-hero-line);
  line-height: 1.2;
  text-shadow: 0 8px 30px rgb(0 0 0 / 62%);
  white-space: nowrap;
  word-break: keep-all;
}

.hero-countdown {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vw, 22px);
  margin-top: 10px;
  color: var(--gold-bright);
}

.hero-countdown-unit {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.hero-countdown-unit strong {
  min-width: 1.2ch;
  color: #66eac3;
  font-size: var(--text-countdown);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 6px 20px rgb(0 0 0 / 55%);
}

.hero-countdown-unit em {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-countdown-unit);
  font-style: normal;
}

h2 {
  margin-bottom: 0;
  color: var(--gold-bright);
  font-size: var(--text-7xl);
  line-height: 1.15;
  text-shadow: 0 6px 24px rgb(0 0 0 / 42%);
}

h3 {
  line-height: 1.35;
}

.hero {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  background: #07111c;
}

.hero::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(3 9 15 / 34%) 0%, transparent 46%, rgb(3 9 15 / 8%) 72%),
    linear-gradient(180deg, transparent 52%, rgb(3 8 14 / 72%) 100%);
}

.hero-layout {
  width: min(var(--content-width), calc(100% - 64px));
  height: 100%;
  min-height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

.hero-media-slot {
  position: absolute;
  z-index: 0;
  inset: 0 50% 0 50%;
  width: 100vw;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(0, 0, 0, 1);
  background: #07111c url("./assets/images/hero-battlefield-v2.webp") center / cover no-repeat;
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
}

.hero-bg-video.is-front {
  z-index: 1;
  opacity: 1;
}

.hero-bg-video.is-ready {
  opacity: 1;
}

.hero-age-rating {
  position: absolute;
  z-index: 2;
  top: calc(var(--header-height) + 24px);
  right: 0;
  width: 64px;
  height: auto;
  filter: drop-shadow(0 4px 12px rgb(0 0 0 / 45%));
}

.hero-copy {
  position: absolute;
  z-index: 2;
  bottom: 86px;
  left: 0;
  width: min(720px, 52%);
}

.hero-summary {
  max-width: 100%;
  margin-top: -4px;
  margin-bottom: -4px;
  padding-top: 0;
  padding-bottom: 0;
  color: rgb(239 232 218 / 78%);
  font-size: var(--text-hero-lead);
  line-height: 1.55;
  text-shadow: 0 3px 12px rgb(0 0 0 / 74%);
}

.hero-actions {
  display: flex;
  margin-top: 28px;
  gap: 14px;
}

.primary-action,
.secondary-action {
  display: inline-grid;
  min-width: 160px;
  min-height: 50px;
  place-items: center;
  padding: 0 26px;
  border: 1px solid rgb(238 211 157 / 66%);
  border-radius: 2px;
  background: linear-gradient(180deg, #e4c47f, #a87435);
  color: #22170c;
  box-shadow: 0 12px 24px rgb(0 0 0 / 24%);
  cursor: pointer;
  font-size: var(--text-md);
  transition: filter 160ms ease, transform 160ms ease;
}

.primary-action {
  font-size: var(--text-xl);
}

.secondary-action {
  background: rgb(4 12 20 / 62%);
  color: var(--gold-bright);
  box-shadow: none;
  font-size: var(--text-xl);
}

.primary-action:hover,
.secondary-action:hover,
.primary-action:focus-visible,
.secondary-action:focus-visible {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.download-panel {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 66px;
  display: grid;
  width: max-content;
  max-width: min(510px, 43%);
  grid-template-columns: 92px max-content max-content;
  align-items: stretch;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgb(216 181 110 / 58%);
  border-radius: 2px;
  background: rgb(5 13 21 / 82%);
  box-shadow: 0 18px 40px rgb(0 0 0 / 34%);
  backdrop-filter: blur(9px);
}

.download-qr {
  text-align: center;
}

.download-qr small {
  display: block;
  margin-top: 5px;
  color: rgb(233 219 190 / 70%);
  font-size: var(--text-sm);
}

.qr-slot {
  display: grid;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  place-items: center;
  border: 1px solid rgb(216 181 110 / 50%);
  background: #e8dfcf;
}

.qr-slot img,
.recharge-qr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.download-buttons {
  display: grid;
  gap: 5px;
}

.download-buttons a,
.emulator-entry {
  display: grid;
  min-height: 39px;
  place-items: center;
  padding: 0 12px;
  border: 1px solid rgb(216 181 110 / 44%);
  background: rgb(7 16 25 / 82%);
  color: var(--gold-bright);
  font-size: var(--text-xs);
  text-align: center;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.download-buttons a {
  width: 191px;
}

.download-buttons a:hover,
.emulator-entry:hover {
  border-color: var(--gold-bright);
  background: rgb(164 43 39 / 28%);
}

.emulator-entry {
  width: 160px;
  min-height: 86px;
}

.hero-scroll-hint {
  position: absolute;
  z-index: 2;
  bottom: 22px;
  left: 50%;
  padding: 0 0 18px;
  color: rgb(240 214 158 / 72%);
  font-size: var(--text-lg);
  letter-spacing: 19.1px;
  transform: translateX(-50%);
}

.hero-scroll-hint::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  content: "";
  transform: translateX(-50%) rotate(45deg);
  animation: hero-scroll-bounce 1.4s ease-in-out infinite;
}

@keyframes hero-scroll-bounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) rotate(45deg);
    opacity: 0.72;
  }

  50% {
    transform: translateX(-50%) translateY(8px) rotate(45deg);
    opacity: 1;
  }
}

#news {
  background: #09131d url("./assets/images/news-bg.webp") center / cover no-repeat;
}

#features {
  background: #08121c url("./assets/images/features-bg.webp") center / cover no-repeat;
}

#guide {
  background: #0a141c url("./assets/images/guide-bg.webp") center / cover no-repeat;
}

#media {
  background: #08121b url("./assets/images/footer-bg.webp") center / cover no-repeat;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 38px;
}

.section-heading > div::after {
  display: block;
  width: 76px;
  height: 1px;
  margin-top: 18px;
  background: linear-gradient(90deg, var(--gold), transparent);
  content: "";
}

.section-note,
.more-link {
  margin: 0;
  color: rgb(219 224 229 / 62%);
  font-size: var(--text-sm);
}

.more-link {
  padding-bottom: 4px;
  border-bottom: 1px solid rgb(216 181 110 / 54%);
  color: var(--gold);
  font-size: var(--text-2xl);
}

.section-tabbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}

.section-tabbar .tab-list {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.tab-list {
  display: flex;
  gap: 0;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line-soft);
}

.tab-list button {
  position: relative;
  min-width: 100px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: rgb(222 228 233 / 58%);
  font-size: var(--text-2xl);
  cursor: pointer;
}

.tab-list button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: transparent;
  content: "";
}

.tab-list button.is-active {
  border: 1px solid var(--line);
  background: rgb(216 181 110 / 20%);
  color: var(--gold-bright);
  font-weight: 700;
}

.tab-list button.is-active::after {
  background: var(--red);
}

.news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(360px, 0.84fr);
  gap: 48px;
}

.featured-story {
  margin: 0;
}

.media-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid rgb(216 181 110 / 26%);
  background: #08121b;
}

.media-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
}

.featured-story:hover .media-slot img,
.media-card:hover .media-slot img {
  transform: scale(1.03);
}

.content-tag {
  margin-bottom: 7px;
  color: var(--gold);
  font-size: var(--text-xl);
}

.featured-story h3 {
  margin-bottom: 8px;
  color: var(--ink-strong);
  font-size: var(--text-3xl);
}

.featured-story > [data-featured-summary] {
  color: #d1dde9;
}

.news-list {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.news-item {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
  transition: color 0.22s ease;
}

.news-item::before {
  content: "";
  position: absolute;
  inset: -4px -8px;
  z-index: -1;
  border-radius: 4px;
  background: transparent;
  transition: background-color 0.22s ease;
}

.news-item:hover::before {
  background: rgba(214, 177, 123, 0.08);
}

.news-item:hover .news-item-date {
  color: rgba(214, 177, 123, 0.92);
}

.news-item:hover .news-item-title {
  color: #f2ead8;
}

.news-item:hover .news-item-title strong {
  color: #f0d8a6;
}

.news-item:hover .news-item-summary {
  color: rgba(152, 166, 186, 0.9);
}

.news-item-top {
  display: grid;
  grid-template-columns: 118px 1fr;
  align-items: center;
  column-gap: 12px;
}

.news-item-date {
  color: rgba(189, 196, 208, 0.9);
  font-size: var(--text-lg);
  white-space: nowrap;
  transition: color 0.22s ease;
}

.news-item-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #d7dde6;
  font-size: var(--text-xl);
  transition: color 0.22s ease;
}

.news-item-title span {
  flex-shrink: 0;
  font-weight: 700;
}

.news-item-title strong {
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.22s ease;
}

.news-item-summary {
  margin: 2px 0 0 130px;
  overflow: hidden;
  color: rgba(118, 130, 147, 0.72);
  font-size: var(--text-md);
  line-height: 1.7;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.22s ease;
}

.news-item-divider {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 4px 0 10px;
}

.feature-stage {
  display: grid;
  min-height: 420px;
  grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgb(4 11 18 / 64%);
  box-shadow: 0 24px 54px rgb(0 0 0 / 28%);
}

.feature-detail {
  padding: 42px 44px;
}

.feature-detail h3 {
  margin-bottom: 15px;
  color: var(--gold-bright);
  font-size: var(--text-6xl);
}

.feature-detail > p:not(.content-tag) {
  color: var(--muted);
  font-size: var(--text-lg);
}

.feature-specs {
  margin: 30px 0 0;
}

.feature-specs div {
  display: grid;
  grid-template-columns: 88px 1fr;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
}

.feature-specs dt {
  color: rgb(205 215 224 / 52%);
  font-size: var(--text-md);
}

.feature-specs dd {
  margin: 0;
  color: rgb(243 235 219 / 84%);
}

.feature-visual-slot {
  min-height: 420px;
  background: url("./assets/images/feature-world.webp") center / cover no-repeat;
  transition: opacity 160ms ease;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}

.feature-grid button {
  display: grid;
  min-height: 106px;
  grid-template-columns: 34px 1fr;
  align-content: center;
  padding: 16px 20px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: rgb(5 13 20 / 70%);
  color: rgb(228 232 236 / 62%);
  cursor: pointer;
  text-align: left;
}

.feature-grid button.is-active {
  background: rgb(135 41 34 / 28%);
  color: var(--gold-bright);
}

.feature-grid span {
  grid-row: span 2;
  color: var(--gold);
  font-family: Georgia, serif;
}

.feature-grid strong {
  color: inherit;
  font-size: var(--text-xl);
}

.feature-grid small {
  color: rgb(190 201 211 / 48%);
  font-size: var(--text-md);
}

.guide-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.guide-portal {
  position: relative;
  display: flex;
  min-height: 330px;
  flex-direction: column;
  justify-content: end;
  overflow: hidden;
  padding: 34px;
  border: 1px solid var(--line);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 -170px 120px rgb(2 8 13 / 90%);
}

.guide-portal::before {
  position: absolute;
  inset: 0;
  background: rgb(4 11 17 / 12%);
  content: "";
  transition: background-color 240ms ease;
}

.guide-portal:hover::before {
  background: transparent;
}

.guide-portal-official {
  background-image: url("./assets/images/feature-social.webp");
}

.guide-portal-player {
  background-image: url("./assets/images/media-02.webp");
}

.guide-portal span,
.guide-portal strong,
.guide-portal small {
  position: relative;
}

.guide-portal span {
  color: var(--gold);
  font-size: var(--text-lg);
}

.guide-portal strong {
  margin: 6px 0;
  color: var(--ink-strong);
  font-family: var(--font-family-base);
  font-size: var(--text-5xl);
}

.guide-portal small {
  color: rgb(226 231 235 / 62%);
  font-size: var(--text-md);
}

.guide-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}

.guide-list a {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 18px;
  padding: 0 22px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: rgb(5 13 20 / 58%);
  color: rgb(232 236 239 / 76%);
  font-size: var(--text-xl);
}

.guide-list a:hover {
  background: rgb(216 181 110 / 8%);
}

.guide-list span {
  color: var(--gold);
  font-size: var(--text-md);
}

.media-layout {
  display: block;
}

.media-default {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  gap: 22px;
}

.media-featured {
  min-width: 0;
}

.media-featured h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: var(--text-3xl);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  align-self: start;
  gap: 12px 16px;
}

.media-card {
  display: block;
  opacity: 0.52;
  transition: opacity 180ms ease;
}

.media-card:hover {
  opacity: 0.82;
}

.media-card .media-slot {
  margin-bottom: 8px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.media-card strong {
  display: block;
  color: rgb(239 235 226 / 58%);
  font-size: var(--text-2xl);
  font-weight: 500;
  text-align: center;
  transition: color 180ms ease;
}

.media-card.is-active {
  opacity: 1;
}

.media-card.is-active .media-slot {
  border-color: rgb(216 181 110 / 72%);
  box-shadow: 0 0 0 1px rgb(216 181 110 / 28%), 0 10px 24px rgb(0 0 0 / 28%);
}

.media-card.is-active strong {
  color: var(--gold-bright);
}

.music-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 22px;
  min-height: 520px;
}

.music-player {
  position: relative;
  display: flex;
  min-height: 520px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(216 181 110 / 22%);
  /* 深夜蓝面板 + 顶部金色微光，替换原暗红衬底，与全站夜色金调统一 */
  background:
    radial-gradient(62% 46% at 50% 28%, rgb(216 181 110 / 10%), transparent 72%),
    linear-gradient(180deg, rgb(9 18 28 / 97%), rgb(5 11 18 / 98%));
  box-shadow:
    inset 0 0 0 1px rgb(216 181 110 / 8%),
    0 18px 48px rgb(0 0 0 / 30%);
}

.music-player-stage {
  position: relative;
  display: grid;
  flex: 1;
  place-items: center;
  padding: 44px 24px 16px;
}

/* —— 黑胶唱臂：支点 + 唱杆 + 唱头；静止时抬起，播放时落向唱片 —— */
.music-tonearm {
  position: absolute;
  /* 支点固定在唱片右上方碟缘外（约 2 点钟方向外侧），
     休息角 -34° 时唱针停在碟外休息位 */
  top: 45px;
  left: calc(50% + 178px);
  z-index: 2;
  width: 160px;
  height: 160px;
  transform: rotate(-34deg);
  transform-origin: 21px 21px;
  transition: transform 520ms cubic-bezier(0.45, 0, 0.2, 1);
  pointer-events: none;
}

/* 播放角 +7°：唱针落在封面外的胶面纹槽区（约半径 82% 处） */
.music-layout.is-playing .music-tonearm {
  transform: rotate(7deg);
}

/* 支点座：金属座 + 金色饰环 */
.tonearm-pivot {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 28px;
  height: 28px;
  border: 2px solid rgb(216 181 110 / 55%);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #2b333f, #0c131b 72%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 55%);
}

/* 支点轴心 */
.tonearm-pivot::after {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--gold-dark);
  content: "";
}

/* 唱杆：金到钢灰的金属渐变，向左下方探向唱片；
   长度 117px（唱针约在 108px 处），保证播放态只够到纹槽区、够不到封面 */
.tonearm-rod {
  position: absolute;
  top: 20px;
  left: 21px;
  width: 117px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgb(216 181 110 / 88%), rgb(154 158 166 / 92%) 34%, rgb(94 100 110 / 92%));
  box-shadow: 0 1px 2px rgb(0 0 0 / 45%);
  transform: rotate(138deg);
  transform-origin: left center;
}

/* 唱头：唱杆末端的拾音块，随唱杆联动，带金色唱针点 */
.tonearm-head {
  position: absolute;
  right: -6px;
  top: -3.5px;
  width: 17px;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(135deg, #232b36, #0d141c);
  box-shadow:
    inset 0 0 0 1px rgb(216 181 110 / 30%),
    0 2px 5px rgb(0 0 0 / 50%);
  transform: rotate(-14deg);
}

.tonearm-head::after {
  position: absolute;
  bottom: -3px;
  left: 3px;
  width: 2px;
  height: 4px;
  background: var(--gold-bright);
  content: "";
}

/* 唱片：放大一点，外圈压圈 + 细密同心纹，做出黑胶质感 */
.music-vinyl {
  position: relative;
  width: min(340px, 62%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 34%, rgb(8 6 6 / 90%) 34.5%, transparent 35.5%),
    repeating-radial-gradient(circle at center, #181314 0 1px, #0b0909 1px 3px, #131010 3px 4px);
  box-shadow: 0 18px 48px rgb(0 0 0 / 45%);
}

/* 盘面高光：两束随角度变化的反光，替代原来的平面描边 */
.music-vinyl::before {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 215deg,
    transparent 0deg,
    rgb(255 255 255 / 7%) 18deg,
    transparent 44deg,
    transparent 168deg,
    rgb(255 255 255 / 5%) 196deg,
    transparent 226deg
  );
  content: "";
}

/* 中心轴点：金色圆钉 + 暗环 */
.music-vinyl::after {
  position: absolute;
  inset: calc(50% - 4px);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #f8ecd2, var(--gold) 62%, var(--gold-dark));
  box-shadow: 0 0 0 2px rgb(8 6 6 / 88%);
  content: "";
}

/* 专辑封面缩进更多，让出一圈纹槽；外圈补金线 */
.music-vinyl img {
  position: absolute;
  inset: 19%;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 3px rgb(10 8 8 / 88%),
    0 0 0 4px rgb(216 181 110 / 22%);
}

.music-vinyl.is-spinning {
  animation: music-spin 8s linear infinite;
}

@keyframes music-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .music-vinyl.is-spinning,
  .music-eq i {
    animation: none;
  }
}

.music-now {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 8px 28px 22px;
  text-align: center;
}

.music-now strong {
  color: var(--ink-strong);
  font-size: var(--text-3xl);
  font-weight: 500;
}

/* 副标题（专辑/艺人）用暗金，呼应整机金色点缀 */
.music-now span {
  color: rgb(216 181 110 / 62%);
  font-size: var(--text-lg);
}

/* 控制条：深夜蓝底 + 金色顶线，与面板机身统一 */
.music-player-bar {
  border-top: 1px solid rgb(216 181 110 / 18%);
  background: rgb(5 10 16 / 74%);
  backdrop-filter: blur(8px);
}

/* 进度条：4px 金色轨道；透明边框把可点击热区扩到 16px，
   负 margin 抵消边框占位，视觉与布局保持原样 */
.music-progress {
  position: relative;
  height: 4px;
  margin: -8px 0 -4px;
  border-top: 8px solid transparent;
  border-bottom: 4px solid transparent;
  background: rgb(216 181 110 / 12%);
  background-clip: padding-box;
  cursor: pointer;
  /* 拖拽 scrub 时禁用浏览器自身的滚动/缩放手势（移动端） */
  touch-action: none;
}

/* 键盘聚焦时的金色细框（role=slider 可聚焦） */
.music-progress:focus-visible {
  outline: 1px solid rgb(216 181 110 / 55%);
  outline-offset: 3px;
}

/* 已播放段：金色渐变；宽度由 JS 按真实进度写入 */
.music-progress span {
  position: relative;
  display: block;
  width: 8%;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright));
}

/* 末端圆形拖钮：默认收起，hover / 拖拽 / 聚焦时浮现 */
.music-progress span::after {
  position: absolute;
  top: 50%;
  right: -6px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px rgb(216 181 110 / 45%);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 160ms ease, transform 160ms ease;
  content: "";
}

.music-progress:hover span::after,
.music-progress.is-scrubbing span::after,
.music-progress:focus-visible span::after {
  opacity: 1;
  transform: scale(1);
}

.music-player-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px 20px 18px;
}

.music-player-mini {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* 循环模式钮：收成与相邻控制钮一致的 44px，暗金色 */
.music-loop {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(216 181 110 / 58%);
  cursor: pointer;
  transition: color 160ms ease;
}

.music-loop:hover {
  color: var(--gold-bright);
}

.music-loop svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.music-loop .icon-mode-single,
.music-loop .icon-mode-shuffle,
.music-loop.is-single .icon-mode-list,
.music-loop.is-shuffle .icon-mode-list {
  display: none;
}

.music-loop.is-single .icon-mode-single,
.music-loop.is-shuffle .icon-mode-shuffle {
  display: block;
}

/* 已选模式用稍亮的金，避免与 hover 态混为一体 */
.music-loop.is-list,
.music-loop.is-single,
.music-loop.is-shuffle {
  color: rgb(216 181 110 / 72%);
}

.music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* 上一首/下一首：44px 幽灵钮，米白 66% */
.music-controls button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgb(241 232 215 / 66%);
  cursor: pointer;
  transition: color 160ms ease;
}

.music-controls button:hover {
  color: var(--gold);
}

/* 播放主钮：58px 金描边圆钮，金色径向渐变底 + 微光 */
.music-controls button.is-play {
  width: 58px;
  height: 58px;
  border: 1px solid rgb(216 181 110 / 58%);
  background: radial-gradient(circle at 34% 30%, rgb(216 181 110 / 24%), rgb(164 43 39 / 14%));
  color: var(--gold-bright);
  box-shadow: 0 0 20px rgb(216 181 110 / 18%);
}

.music-controls svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.music-controls button.is-play svg {
  width: 28px;
  height: 28px;
}

.music-controls .icon-pause,
.music-controls button.is-playing .icon-play {
  display: none;
}

.music-controls button.is-playing .icon-pause {
  display: block;
}

/* 时间：当前 / 总长，等宽数字防跳动 */
.music-times {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  color: rgb(178 189 201 / 62%);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}

.music-times time:first-child {
  color: var(--gold-bright);
}

.music-times time + time::before {
  margin-right: 6px;
  color: rgb(178 189 201 / 42%);
  content: "/";
}

.music-list-panel {
  display: flex;
  min-height: 520px;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgb(14 22 32 / 94%), rgb(8 13 20 / 94%));
}

.music-track-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 14px;
  overflow: auto;
}

.music-track {
  display: grid;
  grid-template-columns: 42px minmax(0, 1.4fr) minmax(72px, 0.7fr) 52px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  /* 左侧预留 2px 指示条位，选中时点亮，避免切换时横向抖动 */
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: rgb(186 196 208 / 78%);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.music-track:hover {
  background: rgb(216 181 110 / 7%);
}

/* 选中曲目：金色左指示条 + 从左向右淡出的金色底 */
.music-track.is-active {
  border-left-color: var(--gold-bright);
  background: linear-gradient(90deg, rgb(216 181 110 / 15%), rgb(216 181 110 / 4%) 62%, transparent);
  color: var(--gold-bright);
}

.music-track-index {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: inherit;
  font-size: var(--text-md);
}

.music-eq {
  display: none;
  align-items: end;
  justify-content: center;
  gap: 2px;
  width: 16px;
  height: 14px;
}

.music-eq i {
  display: block;
  width: 2px;
  height: 40%;
  background: var(--gold-bright);
  animation: music-eq 0.8s ease-in-out infinite;
}

.music-eq i:nth-child(2) {
  height: 70%;
  animation-delay: 0.12s;
}

.music-eq i:nth-child(3) {
  height: 100%;
  animation-delay: 0.24s;
}

.music-eq i:nth-child(4) {
  height: 55%;
  animation-delay: 0.36s;
}

.music-layout.is-playing .music-track.is-active .music-track-num {
  display: none;
}

.music-layout.is-playing .music-track.is-active .music-eq {
  display: inline-flex;
}

@keyframes music-eq {
  0%,
  100% {
    transform: scaleY(0.45);
  }

  50% {
    transform: scaleY(1);
  }
}

.music-track-title,
.music-track-artist,
.music-track-duration {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}

.music-track-title {
  font-size: var(--text-md);
}

.music-track-duration {
  text-align: right;
}

/* 列表表头：绿色旧样式改为暗金小字，呼应整机金色点缀 */
.music-list-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1.4fr) minmax(72px, 0.7fr) 52px;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--line-soft);
  color: rgb(216 181 110 / 56%);
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
}

.music-list-header .music-track-index,
.music-list-header .music-track-title,
.music-list-header .music-track-artist,
.music-list-header .music-track-duration {
  width: auto;
  height: auto;
  color: rgb(216 181 110 / 66%);
  font-size: var(--text-xs);
  font-weight: 500;
}

.recharge-section {
  min-height: 650px;
  background:
    linear-gradient(90deg, rgb(3 9 15 / 95%) 0%, rgb(5 13 20 / 76%) 52%, rgb(4 10 16 / 45%)),
    url("./assets/images/feature-role.webp") center / cover no-repeat;
}

.recharge-layout {
  display: grid;
  min-height: 650px;
  grid-template-columns: minmax(0, 0.82fr) minmax(440px, 1.18fr);
  align-items: center;
  gap: 72px;
  padding-top: 100px;
  padding-bottom: 82px;
}

.recharge-layout p {
  color: var(--muted);
}

.recharge-copy h2 {
  font-size: var(--text-8xl);
}

.recharge-copy ul {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.recharge-copy li {
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  color: rgb(228 232 235 / 72%);
  font-size: var(--text-xl);
}

.recharge-portal {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  padding: 30px;
  border: 1px solid var(--line);
  background: rgb(5 13 20 / 82%);
  box-shadow: 0 24px 54px rgb(0 0 0 / 28%);
  backdrop-filter: blur(8px);
}

.recharge-portal strong {
  color: var(--gold-bright);
  font-size: var(--text-2xl);
}

.recharge-portal p {
  margin: 8px 0 20px;
  font-size: var(--text-lg);
}

.recharge-portal .primary-action {
  font-size: var(--text-3xl);
}

.recharge-qr {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--gold-dark);
  background: #e9dfcc;
}

.site-footer {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #0d1622;
}

.footer-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-socials {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 141px;
  display: grid;
  width: min(1310px, 68vw);
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
  transform: translateX(-50%);
}

.footer-social {
  position: relative;
  width: min(154px, 8vw);
  aspect-ratio: 142 / 434;
  font-size: calc(min(154px, 8vw) * 24 / 154);
}

.footer-social-frame {
  position: absolute;
  left: 0;
  top: -23px;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.footer-social-icon {
  position: absolute;
  left: 0;
  top: calc(8% + 16px);
  width: 100%;
  aspect-ratio: 1;
}

.footer-social-icon img {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: block;
  width: 52%;
  max-height: 56%;
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.footer-social-icon img.is-taptap {
  width: 60%;
  max-height: none;
}

.footer-social-copy {
  position: absolute;
  left: 50%;
  top: 41.67%;
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  transform: translateX(-50%);
  pointer-events: none;
}

.footer-social-copy span {
  color: rgb(188 193 198 / 92%);
  font-size: 1em;
  line-height: 1.15;
  writing-mode: vertical-rl;
}

.footer-social-copy img {
  width: 0.75em;
}

.footer-logo {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 24.5%;
  width: min(200px, 11vw);
  height: auto;
  transform: translateX(-50%);
}

.footer-legal {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 7.6%;
  width: min(980px, 60vw);
  transform: translateX(-50%);
  color: rgb(66 77 91 / 92%);
  font-size: var(--text-legal);
  line-height: 1.9;
  text-align: center;
}

.footer-legal p {
  margin: 0;
}

.video-dialog {
  width: min(940px, calc(100% - 48px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #050c13;
  color: var(--ink);
}

.video-dialog::backdrop {
  background: rgb(0 0 0 / 78%);
  backdrop-filter: blur(5px);
}

.video-dialog > button {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  min-width: 58px;
  min-height: 34px;
  border: 1px solid var(--line);
  background: rgb(5 12 18 / 84%);
  color: var(--gold-bright);
  cursor: pointer;
}

.video-placeholder {
  display: grid;
  min-height: 500px;
  place-items: center;
  align-content: center;
  text-align: center;
}

.video-placeholder img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  opacity: 0.7;
}

.video-placeholder video {
  display: block;
  width: 100%;
  max-height: min(76vh, 720px);
  background: #000;
}

.video-placeholder strong,
.video-placeholder span {
  position: absolute;
  text-shadow: 0 4px 20px #000;
}

.video-placeholder strong {
  margin-top: 260px;
  color: var(--gold-bright);
  font-size: var(--text-4xl);
}

.video-placeholder span {
  margin-top: 330px;
  color: rgb(232 237 241 / 72%);
}

@media (max-width: 1440px) {
  .footer-socials {
    width: 78vw;
  }
}

@media (max-width: 1100px) {
  .footer-socials {
    width: 90vw;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 14px;
  }

  .footer-logo {
    bottom: 18%;
    width: 150px;
  }

  .footer-legal {
    bottom: 4%;
    width: 84vw;
  }
}

@media (max-width: 1180px) {
  :root {
    --text-hero-lead: clamp(15px, 1.5vw, 18px);
  }

  .desktop-nav-primary > a,
  .nav-mega-column {
    min-width: 100px;
  }

  .download-panel {
    max-width: 470px;
  }

  .hero-copy {
    width: min(680px, 56%);
  }
}

@media (max-width: 900px) {
  :root {
    --header-height: calc(68px + env(safe-area-inset-top, 0px));

    /* 移动端常规字号：整体下探一档，展示级单独收敛 */
    --text-2xs: 11px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-md: 14px;
    --text-lg: 15px;
    --text-xl: 16px;
    --text-2xl: 17px;
    --text-3xl: 18px;
    --text-4xl: 20px;
    --text-5xl: 22px;
    --text-6xl: 26px;
    --text-7xl: 30px;
    --text-8xl: 32px;

    --text-display: 34px;
    --text-hero-title: 28px;
    --text-hero-line: clamp(16px, 4.5vw, 20px);
    --text-countdown: clamp(24px, 7vw, 32px);
    --text-countdown-unit: 12px;
    --text-hero-lead: 14px;
    --text-legal: 12px;
  }

  .site-header {
    height: var(--header-height);
    padding: env(safe-area-inset-top, 0px) 12px 0;
    background: rgb(5 12 20 / 94%);
  }

  .brand {
    width: auto;
  }

  .brand img {
    width: 108px;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .recharge-shortcut {
    display: grid;
    min-width: 56px;
    min-height: 34px;
    place-items: center;
    border: 1px solid rgb(216 181 110 / 62%);
    background: rgb(164 43 39 / 26%);
    color: var(--gold-bright);
    font-size: var(--text-xs);
  }

  .menu-button {
    display: grid;
    width: 40px;
    height: 40px;
    place-content: center;
    gap: 5px;
    padding: 0;
    border: 1px solid rgb(216 181 110 / 32%);
    background: transparent;
    cursor: pointer;
  }

  .menu-button span {
    display: block;
    width: 19px;
    height: 1px;
    background: var(--gold-bright);
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .menu-button[aria-expanded="true"] span:first-child {
    transform: translateY(6px) rotate(45deg);
  }

  .menu-button[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .menu-button[aria-expanded="true"] span:last-child {
    transform: translateY(-6px) rotate(-45deg);
  }

  .menu-backdrop {
    position: fixed;
    z-index: 44;
    inset: var(--header-height) 0 0;
    display: block;
    background: rgb(0 0 0 / 62%);
    backdrop-filter: blur(4px);
  }

  .mobile-menu {
    position: fixed;
    z-index: 45;
    top: var(--header-height);
    right: 0;
    display: block;
    width: min(86vw, 360px);
    height: calc(100svh - var(--header-height));
    overflow-y: auto;
    padding: 22px 20px 36px;
    border-left: 1px solid var(--line);
    background:
      linear-gradient(180deg, rgb(6 14 22 / 96%), rgb(5 12 19 / 98%)),
      url("./assets/images/news-bg.webp") center / cover;
    box-shadow: -20px 0 48px rgb(0 0 0 / 36%);
  }

  .mobile-menu-heading {
    margin-bottom: 14px;
    color: var(--gold);
    font-size: var(--text-2xs);
  }

  .mobile-menu > a,
  .mobile-menu summary {
    min-height: 50px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--line-soft);
    color: rgb(241 235 223 / 88%);
    cursor: pointer;
    list-style: none;
  }

  .mobile-menu summary::after {
    float: right;
    color: var(--gold);
    content: "+";
  }

  .mobile-menu details[open] summary::after {
    content: "−";
  }

  .mobile-submenu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 0 16px;
  }

  .mobile-submenu a {
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    color: rgb(210 218 224 / 72%);
    font-size: var(--text-xs);
  }

  .section {
    min-height: 0;
  }

  .section-frame {
    width: min(100% - 32px, 680px);
    padding: 72px 0 64px;
  }

  .hero,
  .hero-layout {
    height: 100svh;
    min-height: 0;
  }

  .hero-media-slot {
    top: var(--header-height);
    background-position: 48% 28%;
  }

  .hero-bg-video {
    object-position: 48% 26%;
  }

  .hero-age-rating {
    display: block;
    top: calc(var(--header-height) + 52px);
    right: 4px;
    width: 52px;
  }

  .hero::before {
    background: linear-gradient(180deg, transparent 58%, rgb(3 8 14 / 42%) 74%, rgb(3 8 14 / 94%) 100%);
  }

  .hero-copy {
    bottom: 82px;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
    text-align: center;
  }

  h1 {
    max-width: 100%;
    margin-bottom: 6px;
  }

  #hero-title {
    max-width: 100%;
    align-items: center;
    gap: 0;
  }

  .hero-title-line {
    margin-top: -4px;
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }

  .hero-countdown {
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
  }

  .hero-countdown-unit em {
    font-size: var(--text-xs);
  }

  .hero-title-image {
    width: min(240px, 68%);
    margin-left: 0;
  }

  .hero-summary {
    display: none;
  }

  .hero-actions {
    justify-content: center;
    margin-top: 12px;
    gap: 8px;
  }

  .primary-action,
  .secondary-action {
    min-width: 126px;
    min-height: 42px;
    padding: 0 16px;
    font-size: var(--text-sm);
  }

  .download-panel {
    right: 0;
    bottom: 16px;
    left: 0;
    display: flex;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
    gap: 4px;
    padding: 5px 8px;
  }

  .download-qr {
    display: none;
  }

  .download-buttons {
    display: flex;
    flex: 2;
    min-width: 0;
    gap: 4px;
  }

  .download-buttons a {
    width: auto;
    min-width: 0;
    flex: 1;
    min-height: 44px;
    padding: 0 4px;
    font-size: var(--text-2xs);
    white-space: nowrap;
  }

  .emulator-entry {
    display: none;
  }

  .hero-scroll-hint {
    display: none;
  }

  .section-heading {
    align-items: flex-start;
    margin-bottom: 28px;
  }

  .section-note {
    display: none;
  }

  .more-link {
    margin-top: 0;
    white-space: nowrap;
  }

  .section-tabbar {
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 22px;
  }

  .tab-list {
    overflow-x: auto;
    margin-right: -16px;
    margin-bottom: 22px;
    scrollbar-width: none;
  }

  .tab-list::-webkit-scrollbar {
    display: none;
  }

  .tab-list button {
    min-width: 74px;
  }

  .news-layout,
  .feature-stage,
  .media-default,
  .music-layout,
  .recharge-layout {
    grid-template-columns: 1fr;
  }

  .news-layout {
    gap: 28px;
  }

  .news-item {
    padding: 12px 4px;
  }

  .news-item-top {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .news-item-date {
    grid-row: 2;
    font-size: var(--text-xs);
  }

  .news-item-title {
    grid-row: 1;
    align-items: flex-start;
    line-height: 1.45;
  }

  .news-item-title strong {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .news-item-summary {
    margin: 7px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .feature-stage {
    display: flex;
    min-height: 0;
    flex-direction: column-reverse;
  }

  .feature-visual-slot {
    min-height: 230px;
  }

  .feature-detail {
    padding: 28px 22px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-grid button {
    min-height: 90px;
    padding: 12px 14px;
  }

  .guide-layout {
    grid-template-columns: 1fr;
  }

  .guide-portal {
    min-height: 260px;
  }

  .guide-list {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .media-grid {
    gap: 12px;
  }

  .media-card strong {
    font-size: var(--text-xs);
  }

  .music-layout {
    gap: 16px;
    min-height: 0;
  }

  .music-player,
  .music-list-panel {
    min-height: 0;
  }

  .music-player {
    min-height: 420px;
  }

  .music-vinyl {
    width: min(220px, 52%);
  }

  /* 移动端唱臂与桌面同角度（休息 -34° / 播放 +7°），支点与杆长按唱片比例内收 */
  .music-tonearm {
    top: 33px;
    left: calc(50% + 75px);
  }

  .tonearm-rod {
    width: 61px;
  }

  .music-now strong {
    font-size: var(--text-lg);
  }

  .music-player-meta {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    text-align: center;
  }

  .music-player-mini,
  .music-times {
    justify-content: center;
    text-align: center;
  }

  .music-track,
  .music-list-header {
    grid-template-columns: 36px minmax(0, 1fr) 48px;
  }

  .music-track-artist,
  .music-list-header .music-track-artist {
    display: none;
  }

  .recharge-section {
    background-position: 38% center;
  }

  .recharge-layout {
    min-height: 0;
    gap: 34px;
    padding-top: 78px;
    padding-bottom: 70px;
  }

  .recharge-portal {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    padding: 20px;
  }

  .recharge-portal .primary-action {
    min-width: 112px;
  }

  .site-footer {
    height: auto;
    min-height: 0;
    padding: 32px 16px 0;
  }

  .footer-bg {
    object-position: 50% center;
  }

  .footer-socials {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 560px);
    margin: 0 auto;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 10px;
    transform: none;
  }

  .footer-social {
    width: min(100px, 25vw);
    font-size: var(--text-2xs);
  }

  .footer-logo {
    position: relative;
    left: auto;
    bottom: auto;
    display: block;
    width: 150px;
    margin: 24px auto 12px;
    transform: none;
  }

  .footer-legal {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(100%, 560px);
    margin: 0 auto;
    padding-bottom: env(safe-area-inset-bottom);
    transform: none;
    color: rgb(149 159 172 / 88%);
    font-size: var(--text-2xs);
    line-height: 1.75;
  }

  .video-placeholder,
  .video-placeholder img {
    min-height: 280px;
    height: 280px;
  }

  .video-placeholder strong {
    margin-top: 140px;
    font-size: var(--text-3xl);
  }

  .video-placeholder span {
    margin-top: 195px;
    font-size: var(--text-2xs);
  }
}

@media (max-width: 390px) {
  :root {
    --text-display: 30px;
    --text-hero-title: 24px;
    --text-hero-line: clamp(15px, 4.8vw, 18px);
    --text-7xl: 26px;
    --text-8xl: 28px;
  }

  .section-frame {
    width: calc(100% - 28px);
  }

  .hero-title-image {
    width: min(210px, 62%);
  }

  .hero-copy {
    bottom: 76px;
  }

  .hero-actions .primary-action,
  .hero-actions .secondary-action {
    min-width: 0;
    flex: 1;
  }

  .download-buttons a {
    padding: 0 2px;
  }

  .feature-grid small {
    display: none;
  }
}

/* Unfolded phones have enough width to keep the artwork visible beside a compact copy block. */
@media (min-width: 601px) and (max-width: 900px) {
  :root {
    --text-hero-line: 18px;
  }

  .section-frame {
    width: calc(100% - 48px);
    max-width: none;
  }

  .hero-copy {
    bottom: 112px;
    width: min(390px, 48vw);
    padding: 0;
  }

  .hero-title-image {
    width: min(230px, 100%);
  }

  .hero-title-line {
    margin-top: -4px;
    white-space: nowrap;
  }

  .hero-countdown {
    gap: 8px;
    margin-top: 5px;
  }

  .hero-countdown-unit em {
    font-size: var(--text-2xs);
  }

  .hero-summary {
    overflow: hidden;
    margin-top: 0;
    font-size: var(--text-2xs);
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero-actions {
    gap: 8px;
    margin-top: 10px;
  }

  .primary-action,
  .secondary-action {
    min-width: 126px;
    min-height: 40px;
    font-size: var(--text-xs);
  }

  .download-panel {
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
  }
}

/* Narrow phones need a shorter lower-third so faces remain unobstructed. */
@media (max-width: 600px) {
  .hero-age-rating {
    top: calc(var(--header-height) + 42px);
    right: 10px;
    width: 48px;
  }

  .hero-copy {
    bottom: 116px;
  }

  .hero-title-image {
    width: min(220px, 66vw);
  }

  .hero-title-line {
    margin-top: -4px;
    white-space: nowrap;
  }

  .hero-countdown {
    gap: 7px;
    margin-top: 5px;
  }

  .hero-countdown-unit em {
    font-size: var(--text-2xs);
  }

  .hero-summary {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 0;
    font-size: var(--text-2xs);
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .hero-actions {
    gap: 8px;
    margin-top: 10px;
  }

  .primary-action,
  .secondary-action {
    min-height: 40px;
    font-size: var(--text-xs);
  }

  .download-panel {
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* —— 世界观二级页（结构参考资料站章节叙事页） —— */
.world-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* 氛围底层：顶部金色微光 + 两侧下方墨晕，让内容以下区域有呼吸感而非纯黑 */
  background:
    radial-gradient(120% 55% at 50% 0%, rgb(216 181 110 / 9%), transparent 62%),
    radial-gradient(46% 34% at 10% 76%, rgb(29 170 168 / 7%), transparent 70%),
    radial-gradient(44% 36% at 90% 84%, rgb(164 43 39 / 8%), transparent 72%),
    #050b12;
}

.world-page .site-header {
  background: linear-gradient(180deg, rgb(5 12 20 / 88%), rgb(6 14 23 / 52%));
  backdrop-filter: blur(8px);
}

.world-main {
  position: relative;
  /* 撑满剩余视口高度，配合 body flex 让 footer 贴底（替代原 min-height:100vh） */
  flex: 1 0 auto;
  padding: 0 0 72px;
  overflow: hidden;
}

.world-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(5 11 18 / 36%), rgb(5 11 18 / 62%)),
    url("./assets/images/guide-bg.webp") center 18% / cover no-repeat;
  /* 适度提亮，让左侧角色剪影隐约可见 */
  filter: saturate(0.9) brightness(0.92);
  /* 底部渐隐，透出 body 氛围层，避免下半屏纯黑 */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 88%);
}

/* —— 子页顶部 hero 条（world / guide / strategy 共用，视觉对齐 guide-detail 头图） —— */
.subpage-hero {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: clamp(240px, 30vw, 340px);
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--header-height) + 48px) 24px 42px;
  box-shadow: inset 0 -1px 0 rgb(216 181 110 / 18%);
}

/* 三页统一复用详情页头图：background-size / 取景与 guide-detail 完全一致
   （宽度驱动缩放、顶部对齐，人物大小跨页一致），仅用叠色渐变区分栏目气质 */
.subpage-hero--world {
  background:
    linear-gradient(180deg, rgb(5 11 18 / 62%) 0%, rgb(5 11 18 / 34%) 46%, rgb(5 11 18 / 94%) 100%),
    url("./assets/images/news-detail/header-hero.webp") center top / 100% auto no-repeat;
}

.subpage-hero--guide {
  background:
    linear-gradient(180deg, rgb(5 11 18 / 55%) 0%, rgb(19 28 38 / 42%) 46%, rgb(5 11 18 / 94%) 100%),
    url("./assets/images/news-detail/header-hero.webp") center top / 100% auto no-repeat;
}

.subpage-hero--strategy {
  background:
    linear-gradient(180deg, rgb(5 11 18 / 58%) 0%, rgb(164 43 39 / 16%) 46%, rgb(5 11 18 / 94%) 100%),
    url("./assets/images/news-detail/header-hero.webp") center top / 100% auto no-repeat;
}

.subpage-hero-title {
  margin: 0;
  color: #f4f5f7;
  font-size: var(--text-6xl);
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: 0.12em;
  text-shadow: 0 8px 24px rgb(0 0 0 / 32%);
}

.subpage-hero-sub {
  margin: 8px 0 0;
  color: rgb(216 181 110 / 72%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
}

.world-shell {
  position: relative;
  z-index: 1;
  width: min(960px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
}

.world-tabs {
  display: flex;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(8px, 1.6vw, 16px);
  box-sizing: border-box;
}

.world-tab {
  min-width: min(148px, 100%);
  flex: 0 1 clamp(120px, 22vw, 168px);
  padding: 14px 18px 12px;
  border: 1px solid rgb(216 181 110 / 28%);
  background: rgb(7 15 24 / 48%);
  color: rgb(241 232 215 / 72%);
  text-align: center;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.world-tab span {
  display: block;
  font-size: var(--text-3xl);
  line-height: 1.2;
}

.world-tab small {
  display: block;
  margin-top: 4px;
  color: rgb(178 189 201 / 56%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
}

.world-tab:hover,
.world-tab:focus-visible {
  color: var(--gold-bright);
  border-color: rgb(216 181 110 / 52%);
}

.world-tab.is-active {
  background: rgb(164 43 39 / 72%);
  border-color: rgb(216 181 110 / 46%);
  color: var(--ink-strong);
  box-shadow: 0 0 24px rgb(164 43 39 / 28%);
}

.world-tab.is-active small {
  color: rgb(241 232 215 / 70%);
}

/* —— 章节舞台：左侧章节名录 + 右侧卷轴面板 —— */
.world-stage {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: clamp(20px, 3.2vw, 44px);
  align-items: start;
}

/* 章节名录：竖向名录，选中章以金线 + 淡红晕染标识，替代原六边形按钮 */
.world-chapters {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 6px;
}

.world-chapter {
  display: flex;
  min-height: 0;
  margin: 0;
  padding: 14px 18px 13px;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid transparent;
  border-left: 2px solid rgb(216 181 110 / 26%);
  background: transparent;
  color: rgb(241 232 215 / 68%);
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.world-chapter em {
  font-size: var(--text-xs);
  font-style: normal;
  color: rgb(178 189 201 / 62%);
  letter-spacing: 0.12em;
}

.world-chapter strong {
  margin-top: 5px;
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.world-chapter:hover,
.world-chapter:focus-visible {
  color: var(--gold-bright);
  border-left-color: rgb(216 181 110 / 60%);
}

.world-chapter.is-active {
  border-left-color: var(--gold-bright);
  background: linear-gradient(90deg, rgb(164 43 39 / 30%), rgb(164 43 39 / 6%) 68%, transparent);
  color: var(--ink-strong);
}

.world-chapter.is-active em {
  color: var(--gold);
}

/* 卷轴式章节面板：左文右图，配图随章节切换 */
.world-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 36%);
  gap: clamp(24px, 3.6vw, 52px);
  align-items: center;
  width: 100%;
  min-height: 380px;
  padding: clamp(30px, 4.2vw, 56px);
  border: 1px solid rgb(216 181 110 / 24%);
  background: linear-gradient(158deg, rgb(9 18 28 / 88%), rgb(5 12 19 / 80%));
  box-shadow:
    inset 0 0 0 1px rgb(216 181 110 / 8%),
    0 18px 48px rgb(0 0 0 / 30%);
}

.world-panel-title {
  margin: 0 0 20px;
  color: var(--gold-bright);
  font-size: var(--text-5xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
}

/* 标题下的金线装饰，拉出排版层次 */
.world-panel-title::after {
  display: block;
  width: 88px;
  height: 1px;
  margin-top: 16px;
  background: linear-gradient(90deg, var(--gold), transparent);
  content: "";
}

.world-panel-body {
  max-width: 34em;
  color: rgb(241 232 215 / 88%);
  font-size: var(--text-lg);
  line-height: 2.05;
  text-align: left;
}

.world-panel-body p {
  margin: 0 0 1.1em;
}

.world-panel-body p:last-child {
  margin-bottom: 0;
}

/* 引首句放大提色，形成「引子 → 正文」的阅读节奏 */
.world-panel-body p:first-child {
  color: var(--gold-bright);
  font-size: var(--text-xl);
  letter-spacing: 0.04em;
}

/* 章节配图：左缘墨色渐隐融入面板；默认第一章图，兜底不支持 :has 的环境 */
.world-visual {
  align-self: stretch;
  min-height: 300px;
  background: url("./assets/images/feature-world.webp") center / cover no-repeat;
  filter: saturate(0.9) brightness(0.9);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(100deg, transparent 0%, #000 30%);
}

/* 按名录选中态切换配图（纯 CSS :has，无需改 JS）：
   第一章 踏月入世 → 山水；第二章 门派风云 → 门派角色；第三章 天下将变 → 乱世氛围 */
.world-main:has([data-world-chapter="1"].is-active) .world-visual {
  background-image: url("./assets/images/feature-world.webp");
}

.world-main:has([data-world-chapter="2"].is-active) .world-visual {
  background-image: url("./assets/images/feature-role.webp");
}

.world-main:has([data-world-chapter="3"].is-active) .world-visual {
  background-image: url("./assets/images/media-03.webp");
}

.world-rail {
  position: fixed;
  z-index: 20;
  top: 42%;
  right: clamp(12px, 2.4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 148px;
  transform: translateY(-50%);
}

.world-rail-card {
  padding: 14px 12px 12px;
  border: 1px solid rgb(216 181 110 / 28%);
  background: rgb(7 15 24 / 86%);
  text-align: center;
}

.world-rail-card p {
  margin: 0 0 10px;
  color: rgb(241 232 215 / 78%);
  font-size: var(--text-2xs);
}

.world-rail-card img {
  display: block;
  width: 118px;
  height: 118px;
  margin: 0 auto;
  object-fit: cover;
  background: #fff;
}

.world-back {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: var(--red);
  color: var(--ink-strong);
  font-size: var(--text-md);
  box-shadow: 0 0 18px rgb(164 43 39 / 36%);
  transition: background-color 180ms ease, color 180ms ease;
}

.world-back:hover,
.world-back:focus-visible {
  background: #c03934;
  color: #fff;
}

.world-footer {
  position: relative;
  z-index: 2;
  /* 不收缩，配合 body flex 始终落在视口底部 */
  flex: 0 0 auto;
  /* 覆盖基础 .site-footer 的 100dvh 整屏高度（那是首页完整版页脚的设计），
     子页简版页脚按内容自适应，避免页脚本身制造一屏空黑 */
  height: auto;
  min-height: 0;
  padding-top: 48px;
  padding-bottom: 36px;
  /* 透出 body 氛围层，页脚不再是一块纯黑 */
  background: transparent;
}

.world-footer .footer-bg,
.world-footer .footer-socials {
  display: none;
}

/* 基础 .footer-logo / .footer-legal 是按首页整屏页脚（100dvh）做的绝对定位，
   简版页脚改为纵向流式排列：Logo 完整显示在法务文字上方，间距参考完整版但保持紧凑 */
.world-footer .footer-logo {
  position: static;
  width: min(220px, 48vw);
  height: auto;
  margin: 0 auto 20px;
  transform: none;
}

.world-footer .footer-legal {
  position: static;
  width: min(680px, calc(100% - 48px));
  margin: 0 auto;
  transform: none;
  /* 基础样式的深灰是为首页亮底页脚准备的，子页深底上提亮，与移动端断点用色一致 */
  color: rgb(149 159 172 / 88%);
}

/* —— 资料站分类入口 —— */
.guide-shell {
  width: min(1100px, calc(100% - 48px));
  align-items: stretch;
}

.strategy-list-panel {
  width: 100%;
  padding: clamp(22px, 3vw, 36px) clamp(18px, 3vw, 40px);
  border: 1px solid rgb(232 237 241 / 28%);
  background: rgb(5 12 19 / 78%);
  box-shadow:
    inset 0 0 0 1px rgb(216 181 110 / 10%),
    0 18px 48px rgb(0 0 0 / 28%);
}

.strategy-list-panel .news-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.strategy-list-panel .news-item-date {
  color: rgba(214, 177, 123, 0.78);
}

.strategy-list-panel .news-item-title {
  color: rgb(241 232 215 / 90%);
}

.strategy-list-panel .news-item-title strong {
  color: rgb(244 234 215 / 92%);
}

.strategy-list-panel .news-item-summary {
  color: rgba(178, 189, 201, 0.72);
}

.strategy-list-panel .news-item-divider {
  opacity: 0.55;
  margin: 6px 0;
}

/* ===== 攻略分页控件（.strategy-page 作用域） ===== */
/* 金色面板质感按钮：上一页 / 页码 / 下一页，当前页金色高亮 */
.strategy-page .strategy-pager,
.news-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.strategy-page .strategy-pager[hidden] {
  display: none;
}

.strategy-page-btn {
  min-width: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  background: rgb(7 15 24 / 86%);
  color: rgb(241 232 215 / 72%);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    border-color 200ms ease,
    color 200ms ease;
}

.strategy-page-btn:hover:not(:disabled) {
  border-color: rgb(216 181 110 / 45%);
  color: var(--gold-bright);
}

/* 当前页：金色高亮 */
.strategy-page-btn.is-current {
  border-color: rgb(216 181 110 / 58%);
  background: linear-gradient(180deg, rgb(216 181 110 / 18%), rgb(216 181 110 / 8%));
  color: var(--gold-bright);
}

.strategy-page-btn:disabled {
  opacity: 0.38;
  cursor: default;
}

.strategy-page-btn:focus-visible {
  outline: 1px solid rgb(216 181 110 / 55%);
  outline-offset: 2px;
}

/* ===== 攻略列表对齐 portal-web 首页新闻列表（.strategy-page 作用域） ===== */
/* 参照：apps/portal-web/components/sections/NewsSection.vue（http://localhost:3000/ 首页新闻公告）。
   参照舞台 1204×1060 按 min(100vw/1204, 100vh/1060, 1) 整体缩放；
   列表 .listWrap/.list 设计宽 1169px、内边距 0 28px（条目宽 1113px）。
   下面面板宽 = 列表宽 + 2px 边框，使 [data-strategy-list] 及条目与 3000 端同视口实测等宽；
   字号 / 行高 / 间距取参照设计值（未缩放计算值），配色保留 main 自己的金 / 深夜蓝 token。 */
.strategy-page .guide-shell {
  /* 参照舞台宽 1204px，给 1169+2 的面板留位（高视口缩放为 1 时不溢出） */
  width: min(1204px, calc(100% - 24px));
}

.strategy-page .strategy-list-panel {
  /* 1169/1204 ≈ 0.97093（宽受限），1169/1060 ≈ 1.10283（高受限），上限为设计宽 */
  width: calc(min(100vw * 0.97093, 100vh * 1.10283, 1169px) + 2px);
  max-width: 100%;
  padding-inline: 0;
  margin-inline: auto;
}

.strategy-page .strategy-list-panel .news-list {
  /* 参照内边距也随舞台缩放：28/1204 ≈ 0.023256（宽受限），28/1060 ≈ 0.026415（高受限） */
  padding: 0 min(100vw * 0.023256, 100vh * 0.026415, 28px);
}

/* 分隔线间距对齐参照（覆盖上方 .strategy-list-panel 旧的 6px 0） */
.strategy-page .news-item-divider {
  margin: 4px 0 10px;
}

/* 条目排版数值对齐参照设计值（3000 端计算值，未随舞台缩放） */
.strategy-page .news-item-top {
  grid-template-columns: 150px 1fr;
  column-gap: 17px;
}

.strategy-page .news-item-date {
  font-size: 24px;
  line-height: 1.6;
}

.strategy-page .news-item-title {
  gap: 8px;
  font-size: 28px;
  line-height: 1.6;
}

/* 参照桌面端摘要自然换行（main 基础样式为单行省略，此处放开） */
.strategy-page .news-item-summary {
  margin: 2px 0 0 181px;
  overflow: visible;
  font-size: 20px;
  text-overflow: clip;
  white-space: normal;
}

/* 移动端（≤900px）：参照列表宽 = min(100vw - 32px, 560px)，条目竖排 */
@media (max-width: 900px) {
  .strategy-page .guide-shell {
    width: min(calc(100% - 32px), 560px);
  }

  .strategy-page .strategy-list-panel {
    width: 100%;
    padding-inline: 0;
    border-inline: 0;
  }

  .strategy-page .strategy-list-panel .news-list {
    padding: 0;
  }

  /* 覆盖上方桌面横排（本作用域优先级高于基础移动端规则，需显式还原竖排） */
  .strategy-page .news-item-top {
    grid-template-columns: 1fr;
    column-gap: 6px;
  }

  .strategy-page .news-item-date {
    font-size: 13px;
  }

  .strategy-page .news-item-title {
    font-size: 16px;
    line-height: 1.45;
  }

  .strategy-page .news-item-summary {
    display: -webkit-box;
    margin: 7px 0 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .strategy-page .news-item-divider {
    margin: 0;
  }
}

.guide-hub {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 28px;
  padding: 8px 0 24px;
}

.guide-category {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.guide-category-title {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  background:
    linear-gradient(90deg, rgb(164 43 39 / 88%) 0%, rgb(141 74 42 / 72%) 42%, rgb(216 181 110 / 18%) 100%);
  box-shadow: inset 0 -1px 0 rgb(216 181 110 / 22%);
}

.guide-category-title h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.guide-entry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.guide-entry {
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgb(216 181 110 / 22%);
  background: rgb(244 234 215 / 92%);
  color: #2d333b;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.guide-entry:hover,
.guide-entry:focus-visible {
  border-color: rgb(164 43 39 / 55%);
  background: #fff8ea;
  color: #1d2228;
  transform: translateY(-1px);
}

.guide-entry-icon {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  /* 浅底卡片上用深金描边保证可读性，图标本身 stroke=currentColor */
  color: var(--gold-dark);
  transition: color 160ms ease;
}

/* 内联 SVG 线性图标：统一视觉大小，与占位容器对齐 */
.guide-entry-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}

/* 条目 hover / 聚焦时图标随边框一起提为朱红 */
.guide-entry:hover .guide-entry-icon,
.guide-entry:focus-visible .guide-entry-icon {
  color: var(--red);
}

.guide-entry span:last-child {
  font-size: var(--text-md);
  font-weight: 600;
  white-space: nowrap;
}

/* —— 资料详情（对齐新闻公告详情排版） —— */
.guide-detail-page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  /* 在原有纸纹底上叠加轻微金色/红色墨晕，消除下半屏空黑 */
  background:
    radial-gradient(100% 46% at 50% 0%, rgb(216 181 110 / 7%), transparent 62%),
    radial-gradient(42% 30% at 88% 86%, rgb(164 43 39 / 7%), transparent 72%),
    #131c26 url("./assets/images/news-detail/page-background.webp") center top / 100% 88px repeat-y;
}

.guide-detail-page .site-header {
  background: linear-gradient(180deg, rgb(5 12 20 / 88%), rgb(6 14 23 / 42%));
  backdrop-filter: blur(8px);
}

.guide-detail-header-bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: min(600px, calc(100vw * 600 / 1920));
  /* 与子页 hero 条统一：宽度驱动缩放、顶部对齐（元素高度已按 1920:600 等比，视觉不变） */
  background: url("./assets/images/news-detail/header-hero.webp") center top / 100% auto no-repeat;
  pointer-events: none;
}

.guide-detail-main {
  position: relative;
  z-index: 2;
  /* 撑满剩余视口高度，配合 body flex 让 footer 贴底 */
  flex: 1 0 auto;
  box-sizing: border-box;
  width: min(1160px, 100vw);
  margin: 0 auto;
  padding: 92px 20px 160px;
}

.guide-detail-state {
  padding: 360px 0 220px;
  color: rgba(208, 216, 227, 0.88);
  font-size: var(--text-4xl);
  text-align: center;
}

.guide-detail-top {
  position: relative;
  min-height: 420px;
}

.guide-detail-back {
  position: absolute;
  top: 280px;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #c7a36d;
  font-size: var(--text-lg);
  letter-spacing: 3px;
  opacity: 0.88;
  text-decoration: none;
}

.guide-detail-back img {
  width: 63px;
}

.guide-detail-header {
  max-width: 1160px;
  margin: 0 auto;
  padding-top: 268px;
  text-align: center;
}

.guide-detail-header h1 {
  margin: 0;
  color: #f4f5f7;
  font-size: var(--text-6xl);
  font-weight: 400;
  line-height: 1.36;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.guide-detail-meta {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
  color: rgba(108, 116, 125, 0.86);
  font-size: var(--text-lg);
}

.guide-detail-article {
  position: relative;
  max-width: 1160px;
  margin: -2px auto 0;
}

.guide-detail-content {
  max-width: 100%;
  margin: 0 auto;
  color: rgba(112, 123, 137, 0.88);
  font-size: var(--text-hero-lead);
  line-height: 1.9;
}

.guide-detail-content p {
  margin: 0 0 12px;
}

.guide-detail-content h2,
.guide-detail-content h3 {
  margin: 34px 0 14px;
  color: rgba(203, 209, 217, 0.92);
  font-size: 1.18em;
  font-weight: 400;
}

.guide-detail-content ul,
.guide-detail-content ol {
  margin: 16px 0 16px 26px;
}

.guide-detail-content li {
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .world-main {
    /* hero 条已承担顶部位移，此处只保留下间距 */
    padding-bottom: 48px;
  }

  .subpage-hero {
    min-height: 200px;
    padding: calc(var(--header-height) + 30px) 16px 28px;
  }

  .subpage-hero-title {
    font-size: var(--text-3xl);
    letter-spacing: 0.1em;
  }

  .subpage-hero-sub {
    font-size: var(--text-2xs);
    letter-spacing: 0.22em;
  }

  .world-shell {
    width: min(100% - 28px, 960px);
    gap: 20px;
  }

  .world-tabs {
    width: 100%;
    justify-content: center;
    gap: 8px;
  }

  .world-tab {
    flex: 1 1 calc(33.333% - 8px);
    min-width: 96px;
    max-width: 160px;
    padding: 12px 8px 10px;
  }

  .world-tab span {
    font-size: var(--text-xl);
  }

  /* 窄屏下 100% auto 图高不足以铺满 hero 条，改用 cover（三页仍保持同一取景逻辑） */
  .subpage-hero--world,
  .subpage-hero--guide,
  .subpage-hero--strategy {
    background-position: 0 0, center top;
    background-size: auto, cover;
  }

  .world-stage {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* 章节名录改为横向紧凑排列 */
  .world-chapters {
    position: static;
    flex-direction: row;
    gap: 8px;
  }

  .world-chapter {
    flex: 1 1 0;
    align-items: center;
    padding: 10px 8px;
    border-left: 1px solid transparent;
    border-bottom: 2px solid rgb(216 181 110 / 26%);
    text-align: center;
  }

  .world-chapter strong {
    font-size: var(--text-lg);
  }

  .world-chapter.is-active {
    border-bottom-color: var(--gold-bright);
    background: linear-gradient(0deg, rgb(164 43 39 / 30%), transparent 78%);
  }

  .world-panel {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 20px 16px 26px;
    gap: 18px;
  }

  /* 配图提为面板顶部横幅，底缘渐隐融入正文 */
  .world-visual {
    min-height: 168px;
    order: -1;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  }

  .world-panel-title {
    margin-bottom: 14px;
    font-size: var(--text-3xl);
  }

  .world-panel-body {
    font-size: var(--text-md);
    line-height: 1.9;
  }

  .world-rail {
    position: static;
    width: min(100% - 28px, 960px);
    margin: 24px auto 0;
    transform: none;
    flex-direction: row;
    align-items: stretch;
  }

  .world-rail-card {
    flex: 1;
  }

  .world-rail-card img {
    width: 96px;
    height: 96px;
  }

  .world-back {
    flex: 1;
    align-self: center;
  }

  .guide-shell {
    width: min(100% - 28px, 1100px);
  }

  .guide-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .guide-entry {
    min-height: 50px;
    padding: 8px 10px;
  }

  .guide-entry span:last-child {
    font-size: var(--text-sm);
  }

  .guide-detail-main {
    padding: 84px 16px 100px;
  }

  .guide-detail-top {
    min-height: 280px;
  }

  .guide-detail-back {
    top: 168px;
    gap: 8px;
    font-size: var(--text-md);
    letter-spacing: 1px;
  }

  .guide-detail-back img {
    width: 40px;
  }

  .guide-detail-header {
    padding-top: 168px;
  }

  .guide-detail-header h1 {
    font-size: var(--text-3xl);
  }

  .guide-detail-meta {
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: var(--text-sm);
  }

  .guide-detail-content {
    font-size: var(--text-md);
  }
}


.featured-link { display: block; }
.news-pager { align-items: center; }