/* ============================================================
   栏目样式:六大栏目(新闻/世界观/角色/游戏特色/视听)共用骨架
   视觉延续 style.css 的深色幻想风(底色 #0a0a0f、金橙主色)。
   各组件细节样式放各自 <style scoped>,此处只放全局通用件。
   ============================================================ */

:root {
  --gold: #ffd700;
  --gold-soft: #f7e6b2;
  --orange: #ff8c00;
  --ink: #0a0a0f;
  --panel: rgba(18, 20, 32, 0.72);
  --panel-border: rgba(255, 215, 128, 0.28);
  --text-dim: #b8a26c;
  /* 移动端白色常驻顶栏(.m-header)高度。全站移动端各全屏屏 / 子页顶部据此避让,
     防止 fixed 白条遮挡内容。PC 端白条不显示,此变量不参与布局(全屏屏仍用整 100vh)。
     改白条高度只需改这一处,各处 calc/padding 自动跟随。 */
  --m-header-h: 52px;
}

/* 锚点滚动:导航栏高度补偿由各屏自身 padding-top(110px)承担。
   吸附对齐必须归零——否则 scroll-snap 会把补偿计入吸附区,使每屏下移、
   底部被切并再次露出下一屏(正是本次要根治的问题)。 */
.section-anchor {
  scroll-margin-top: 0;
}

/* ============================================================
   整屏翻页(JS 劫持滚轮,完全参考 col.jfydgame.com 的滚轮行为):
   - 滚动对齐不再交给 CSS scroll-snap(它做不到"一次滚轮=精确切一屏",
     滚轮惯性会连翻多屏或停在两屏之间)。改由客户端插件 fullpage-scroll
     监听 wheel:一次滚轮 → 平滑滚到上/下一屏,带冷却期防连翻。
   - 本文件只保留:平滑滚动基调 + 隐藏滚动条;每屏 100vh、各屏布局不变。
   - scroll-behavior:smooth 作锚点跳转/降级滚动的平滑基调。
   ============================================================ */
html {
  scroll-behavior: smooth;
  /* 锚点跳转的顶部留白(与 .section-anchor 的补偿一致) */
  scroll-padding-top: 0;
  /* 隐藏滚动条(Firefox / IE),滚动功能不受影响 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* 隐藏滚动条(Chrome / Safari / Edge) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}
/* no-snap 类保留为无害空壳:子页面(新闻列表/详情)仍可挂载该类,
   现整页翻页由 JS 接管(且插件仅在首页启用),此处无副作用。 */
html.no-snap {
  scroll-behavior: smooth;
}

/* 区块统一容器:严格整屏高(锁死 100vh,内容多也不撑高,避免相邻屏错位),
   内容垂直+水平居中充盈单屏,深色氛围背景垫底 */
.section {
  position: relative;
  height: 100vh;
  /* 兜底:极端超高内容仍可内部滚动而非撑破吸附节奏 */
  max-height: 100vh;
  width: 100%;
  /* padding: 110px 0 70px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 内容在单屏内垂直居中,营造沉浸的"整屏舞台"观感 */
  justify-content: center;
  overflow: hidden;
  /* 纯 CSS 氛围背景:中心暖色光晕 + 上下压暗,首尾 #0a0a0f 与相邻屏无缝衔接 */
  background:
    radial-gradient(ellipse 78% 58% at 50% 42%, rgba(58, 46, 26, 0.42) 0%, rgba(20, 18, 28, 0.15) 55%, transparent 78%),
    linear-gradient(180deg, #0a0a0f 0%, #12101c 50%, #0a0a0f 100%);
}

/* 区块背景图层(铺满,压暗,置底) */
.section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}
/* 遮罩已移除:背景图原色高清展示,不再叠加半透明压暗层 */
.section > .section-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 70.83vw; /* 原 1360px,按 1920 设计稿等比换算(1360/1920) */
  padding: 0 40px;
}

/* 区块主标题:金色浮雕大字 + 副标 */
.section-title {
  text-align: center;
  margin-bottom: 34px;
}
.section-title h2 {
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  background: linear-gradient(180deg, #fff7df 0%, #f7e6b2 55%, #e6bf6a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.section-title .en {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  letter-spacing: 0.5em;
  color: rgba(247, 230, 178, 0.5);
  text-transform: uppercase;
}

/* ============================================================
   移动端板块顶部大标题(复用件):1:1 复刻新闻模块 .news-m-title
   —— 龙纹横幅金边图(news-m-title.png)+ 金色文字,仅 ≤768px 显示。
   世界观 / 角色 / 游戏特色 / 视听 四大板块共用此类,保持与新闻一致的观感;
   PC/平板(>768px)默认隐藏,不影响各板块原有的全屏/居中布局。 */
.m-section-title {
  display: none;
}
@media (max-width: 768px) {
  .m-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px; /* 与新闻 index-title 一致 */
    margin: 0 0 6px;
    color: #947e4c; /* 与新闻标题同款金色 */
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.08em;
    /* 龙纹金边横幅图(左右金线 + 菱形),沿用新闻同一素材 */
    background: url('/assets/col/news-m-title.png') center / auto 100% no-repeat;
  }
}

/* 通用页签(世界观/游戏特色/新闻共用) */
.tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tab {
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  color: var(--gold-soft);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
}
.tab:hover {
  color: #fff;
  border-color: var(--gold);
}
.tab.active {
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold) 0%, var(--orange) 100%);
  border-color: transparent;
}

/* 通用面板 */
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  backdrop-filter: blur(4px);
}

/* ========== 通用弹窗(角色技能/视频/图片) ========== */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-box {
  position: relative;
  background: linear-gradient(180deg, #1a1a2e 0%, #12121e 100%);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  box-shadow: 0 0 40px rgba(255, 180, 60, 0.15);
  max-width: 92vw;
  max-height: 88vh;
}
.modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--gold) 0%, var(--orange) 100%);
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.25s;
}
.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
}

/* 播放按钮(圆形金环+三角) */
.play-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
}
.play-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}
.play-circle svg {
  width: 26px;
  height: 26px;
  fill: var(--gold);
  margin-left: 3px;
}

/* 响应式:窄屏降级 */
@media (max-width: 900px) {
  .section {
    padding: 10px 0;
  }
  .section > .section-inner {
    padding: 0 18px;
  }
  .section-title h2 {
    font-size: 1.8rem;
  }
}