/* ================================================================
   方谷 · FANG GU — 静态站样式
   风格：鹰角工业冷色 + MC 标志色融合
   ================================================================ */

/* ---------- 设计变量 ---------- */
:root {
  /* 底色 */
  --bg-0: #191919;   /* 最深 */
  --bg-1: #191919;   /* 主背景 */
  --bg-2: #1f1f22;   /* 卡片 / 面板 */

  /* 主强调：终末地黄 */
  --purple: #fffa00;
  --purple-soft: #fdfd1f;

  /* 次强调：终末地黄 */
  --blue: #fffa00;
  --blue-soft: #d9d9d9;

  /* 辅助：荧光绿（少量，如状态点） */
  --green: #00ffa2;

  /* 文字 */
  --text: #ffffff;
  --text-dim: #999999;

  /* 细线框 */
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --line-purple: rgba(255, 250, 0, 0.45);

  /* 字体 */
  --font-cn: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* 过渡时长 */
  --t-fast: 0.25s;
  --t-mid: 0.5s;

  /* 顶部栏高度 */
  --topbar-h: 56px;
}

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

html {
  color-scheme: dark;
  overflow: hidden;               /* 隐藏页面级滚动条 */
  background: #191919;            /* 纯色铺死，防边缘缝隙露白 */
  outline: none !important;
}

body {
  overflow-x: hidden;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-cn);
  color: var(--text);
  background:
    radial-gradient(1000px 700px at -10% 110%, rgba(255, 250, 0, 0.08), transparent 55%),
    linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 100%);
  background-color: #191919;      /* 渐变底下的纯色兜底 */
  overflow: hidden;
  overflow-x: hidden;
  outline: none !important;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

img, canvas {
  display: block;
}

::selection {
  background: rgba(255, 250, 0, 0.35);
  color: #fff;
}

/* ---------- 顶部固定信息条 ---------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 14, 23, 0.88);
  backdrop-filter: blur(10px);
  z-index: 95;   /* 导航栏浮在渲染区之上：可见可点，模型头顶从后面透出 */
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--t-mid) ease var(--t-mid), transform var(--t-mid) ease var(--t-mid);
  pointer-events: none;
}

body.site-ready .topbar:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 首页（index 0）隐藏导航栏：仅离开首页后显示 */
.topbar.hidden,
body.site-ready .topbar.hidden {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

.topbar-logo {
  font-size: 15px;
  letter-spacing: 0.14em;
  font-weight: 700;
}

.topbar-logo b {
  font-weight: 500;
  color: var(--text-dim);
  margin-left: 8px;
  letter-spacing: 0.3em;
}

.topbar-meta {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--purple-soft);
}

/* ================================================================
   0. 进入动画层（终末地官网风格）
   黑幕 + 中央 logo + slogan + 分割线 + 左缘竖条进度条（30px 宽全高）
   + 背景 blur 渐变消散 + 走满后黄幕平铺遮盖 + leaving 淡出转场
   ================================================================ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg-0);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 黑幕整体淡出：与 .leaving 同参数，加类时只变 opacity 值，过渡立即开始 */
  transition: opacity 0.6s ease;
}

/* 背景层：与 body 首页背景完全同源（光晕位置/强度/底色一致），随进度 blur 3px → 0（轻微进场柔化，不糊色） */
.intro-bg {
  position: absolute;
  inset: -20px;                 /* 放大避免 blur 边缘露黑 */
  background:
    radial-gradient(1000px 700px at -10% 110%, rgba(255, 250, 0, 0.08), transparent 55%),
    linear-gradient(160deg, #191919 0%, #191919 100%);
  filter: blur(3px);
  transform: scale(1.04);
  transition: filter 0.3s linear;
}

/* 中央核心：logo / divider / slogan */
.intro-core {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  animation: intro-core-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

@keyframes intro-core-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.intro-logo {
  font-size: clamp(72px, 14vw, 150px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #ffffff;
}

.intro-divider {
  width: 220px;
  height: 1px;
  margin: 26px 0 22px;
  background: linear-gradient(90deg, transparent, var(--purple) 30%, var(--blue) 70%, transparent);
  box-shadow: 0 0 14px rgba(255, 250, 0, 0.5);
}

.intro-slogan {
  font-size: 13px;
  letter-spacing: 0.55em;
  color: var(--purple-soft);
  text-shadow: 0 0 14px rgba(255, 250, 0, 0.6);
  white-space: nowrap;
}

/* 进度条：左缘 30px 宽竖条（left:0 / top:0 / width 30px / height 100%，终末地官方结构） */
.intro-progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;         /* 终末地官方竖条宽度 */
  height: 100%;        /* 贴边满高 */
  z-index: 3;
}

.intro-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.10);   /* 底槽 */
  overflow: hidden;
}

.intro-progress-bar span {
  position: absolute;
  top: 0;              /* 从上往下填充：容器 top 固定，高度 0 → 100% */
  left: 0;
  width: 100%;
  height: 0%;          /* 高度 0 → 100%（JS 操作 style.height） */
  background: #fffa00;                      /* 纯黄 */
  box-shadow: 0 0 10px rgba(255, 250, 0, 0.6);   /* 微弱光晕 */
}

/* 进度数字：固定在竖条右侧（不跟随条高，避免错位），0% 等宽数字 + 黄色 */
.intro-progress-text {
  position: absolute;
  left: calc(30px + 1rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fffa00;
  font-variant-numeric: tabular-nums;
}

/* 中心吉祥物：数学标准等距视角（isometric）空心线框立方体
   —— SVG 精确等距投影：12 条棱绝对平行、轮廓为正六边形、上下尖头顶点 */
.intro-mascot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 220px;
  margin-left: -130px;
  margin-top: -110px;
  z-index: 3;
  pointer-events: none;
  /* 视觉重心严格居中：viewBox 中心即顶点包围盒重心，不做人为偏移 */
  transform: none;
}

.mascot-svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.15));
}

/* 走满后：竖条平铺展开覆盖全屏（黄幕）——保持 left:0 / top:0 不变，只动画 width/height，避免错位 */
.intro.covering .intro-progress {
  transition: width 0.5s ease, height 0.5s ease;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;          /* 黄幕压过吉祥物，物理盖住 */
}
/* 黄幕淡出：铺满后停留片刻，自身 0.7s 淡出（遮盖不动，只变透明度） */
.intro.covering .intro-progress.fade {
  opacity: 0;
  /* 保留 width/height 过渡：transition 属性被替换会打断正在进行的覆盖动画，
     导致黄幕没铺满就开始淡出 */
  transition: width 0.5s ease, height 0.5s ease, opacity 0.7s ease;
}
/* 盖住瞬间隐藏方块：黄幕透明后不会露馅（此时方块已被黄幕物理盖住） */
.intro.covering .intro-mascot {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.intro.covering .intro-progress-bar {
  background: #fffa00;
}
.intro.covering .intro-progress-text {
  opacity: 0;
}

/* 黄幕淡出完成：整个黑幕淡出，中央图形随黑幕一起淡出 */
.intro.leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

body.intro-done .intro {
  display: none;
}

/* reduced-motion：加载动画，内容快速淡入 */
@media (prefers-reduced-motion: reduce) {
  .intro {
    transition: opacity 0.35s ease;
    background: var(--bg-0);
  }

  .intro-core {
    animation: none;
    opacity: 1;
  }

  .intro-bg {
    filter: blur(0);
    transition: none;
  }

  .status-dot {
    animation: none !important;
  }

  .archive-card,
  .fyd-card,
  .screen-head {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
  }

  .fyd-title::after {
    transition: none;
  }

  * {
    scroll-behavior: auto !important;
  }
}

/* ================================================================
   1. 横向滚动容器
   ================================================================ */
.site {
  height: 100vh;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;          /* Firefox 隐藏滚动条 */
  scroll-behavior: smooth;
  background: transparent;        /* 透出 body 固定渐变（背景主体由 body 承担，不随横向滚动移动） */
  outline: none !important;
}

.site::-webkit-scrollbar {
  display: none;                  /* WebKit 隐藏滚动条 */
}

/* 进入动画期间锁定主站滚动 */
body.intro-active .site {
  overflow: hidden;
}

body.intro-active .dots {
  display: none;
}

.screen.screen-home {
  padding-top: 0;   /* 首页 topbar 隐藏不占位，大字严格视口垂直居中（双类提高特异性，覆盖 .screen 的 padding-top） */
}

/* 关于页（原资料页改版）：内容可纵向滚到底（页尾备案），不受 .screen 居中裁切限制 */
.screen.screen-info {
  justify-content: flex-start;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

/* 关于页垂直居中找视觉重心：margin auto 均分剩余空间；
   内容超高时 margin 自动归零回到顶部，不裁切顶部内容 */
.screen.screen-info .screen-inner {
  display: flex;
  flex-direction: column;
  flex: 1;   /* 撑满视口高度，供卡片组居中 + footer 贴底 */
}

/* 卡片组：在去掉 footer 的剩余空间里垂直居中（视觉重心）；
   内容超高时 margin auto 会归零贴顶，加固定上间距避免与顶部导航重叠 */
.screen.screen-info .fyd-grid {
  margin-top: 100px;
  margin-bottom: auto;
}

/* 页尾备案：贴页面底部 */
.screen.screen-info .fyd-footer {
  margin-top: auto;
  margin-bottom: 30px;
  padding-bottom: 6px;
}

.screen.screen-info::-webkit-scrollbar {
  width: 6px;
}

.screen.screen-info::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 3px;
}

.screen.screen-info::-webkit-scrollbar-track {
  background: transparent;
}

/* 每个分屏：全屏 flex，横向吸附 */
.screen {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  min-width: 100%;   /* 100vw 在含滚动条时溢出露出白底，改 100% 跟随父容器 */
  width: 100%;
  /* 背景固定不动：去掉随 screen 移动的渐变，透出 body 固定渐变（光晕固定在视口，只有内容滚动） */
  background: transparent;
  outline: none !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--topbar-h);
}

.screen-inner {
  width: 100%;
  max-width: 1180px;
  padding: 0 40px;
}

.screen-inner--wide {
  max-width: 1360px;
}

/* ================================================================
   1·五、终末地平面设计元素（全屏网格 / 四角 bracket）
   ================================================================ */
/* 全屏分层网格：96px 主网格 + 24px 次网格 + 交叉点黄点 + 135° 斜向扫描线
   （明日方舟官网工业情报屏质感，自己的配方），fixed 相对视口：三个 screen 网格叠在同一层，
   横向滚动/纵向滚动都不移动，z-index 0 不抢内容视觉 */
.screen-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* 交叉点小圆点：黄 1px 点阵，落在主网格交点（96px 对齐） */
    radial-gradient(circle at 1px 1px, rgba(255, 250, 0, 0.10) 1px, transparent 1.5px),
    /* 24px 次网格：最淡细线 */
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    /* 96px 主网格：稍亮主线 */
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    /* 135° 斜向扫描光带：低透明度黄，工业情报屏氛围 */
    repeating-linear-gradient(135deg, rgba(255, 250, 0, 0.045) 0, rgba(255, 250, 0, 0.045) 1px, transparent 1px, transparent 120px);
  background-size: 96px 96px, 24px 24px, 24px 24px, 96px 96px, 96px 96px, auto;
}

/* 四角 L 形 bracket：工业 UI 角标，避开 topbar（固定 56px）与滚动条 */
.screen-brackets {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}

.sb {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: rgba(255, 255, 255, 0.15);
}

.sb-tl {
  top: calc(var(--topbar-h) + 14px);
  left: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.sb-tr {
  top: calc(var(--topbar-h) + 14px);
  right: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.sb-bl {
  bottom: 18px;
  left: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.sb-br {
  bottom: 18px;
  right: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

/* 关于页：左上角 bracket 去掉（三页 HTML 结构保持一致，仅 CSS 隐藏） */
.screen-info .sb-tl {
  display: none;
}

/* 屏幕进入动画的初始状态（由 main.js 切换 .is-active 触发） */
.screen .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.screen.is-active .reveal {
  opacity: 1;
  transform: translateY(0);
}

/* 卡片逐个入场：使用 transition-delay 阶梯 */
.screen.is-active .archive-card:nth-child(1) { transition-delay: 0.05s; }
.screen.is-active .archive-card:nth-child(2) { transition-delay: 0.12s; }
.screen.is-active .archive-card:nth-child(3) { transition-delay: 0.19s; }
.screen.is-active .archive-card:nth-child(4) { transition-delay: 0.26s; }
.screen.is-active .archive-card:nth-child(5) { transition-delay: 0.33s; }
.screen.is-active .archive-card:nth-child(6) { transition-delay: 0.40s; }

/* 关于页三卡片的延迟动画定义在「5. 关于页」区块 */

/* ================================================================
   2. 首页
   ================================================================ */
.bg-particles {
  position: absolute;
  inset: 0;
}

.hero-title {
  position: relative;
  z-index: 2;
  font-size: clamp(150px, 26vw, 480px);   /* 雷霆大字：更大更满 */
  font-weight: 900;
  letter-spacing: -0.08em;                 /* 收紧字距 */
  line-height: 1;
  color: #ffffff;                          /* 纯白大字，无任何辉光/渐变 */
}

.hero-sub {
  position: relative;
  z-index: 2;
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: 0.55em;
  color: var(--purple-soft);
  text-shadow: 0 0 14px rgba(255, 250, 0, 0.6);
}

.hero-sub::before,
.hero-sub::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 44px;
  height: 1px;
  margin: 0 18px;
  background: linear-gradient(90deg, transparent, var(--line-strong));
}

.hero-sub::after {
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

/* 首页版本号小字：军工数据标签（复用 hero-sub 的短线装饰结构），大字格式零改动 */
.hero-ver {
  position: relative;
  z-index: 2;
  margin-top: 26px;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--purple-soft);
  font-variant-numeric: tabular-nums;   /* 等宽数字 */
  white-space: nowrap;
}

.hero-ver::before,
.hero-ver::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 44px;
  height: 1px;
  margin: 0 18px;
  background: linear-gradient(90deg, transparent, var(--line-strong));
}

.hero-ver::after {
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

/* 底部滑动指示 */
.swipe-hint {
  position: absolute;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.35em;
  color: var(--text-dim);
  animation: swipe-breathe 2.4s ease-in-out infinite;
}

@keyframes swipe-breathe {
  0%, 100% { opacity: 0.35; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 1;    transform: translateX(-50%) translateY(-6px); }
}

/* ================================================================
   3. 屏幕标题（成员 / 资料通用）
   ================================================================ */
.screen-head {
  margin-bottom: 48px;
  position: relative;
}

/* 成员页：轮盘占满中央，隐藏大标题避免重叠 */
.screen-members .screen-head {
  display: none;
}

.screen-title {
  /* 标签化：半透明黄底 + 1px 黄描边 + 右缘斜切角，白字不变 */
  display: inline-block;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: #ffffff;
  padding: 9px 20px 9px 16px;
  background: rgba(255, 250, 0, 0.08);
  border: 1px solid rgba(255, 250, 0, 0.35);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.screen-note {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.5em;
  color: var(--purple-soft);
}

/* AK 风格几何装饰线 */
.deco-line {
  position: absolute;
  bottom: -22px;
  left: 0;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, var(--purple), transparent);
}

.deco-line::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 1px;
  height: 7px;
  background: var(--purple);
}

.deco-line::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 32px;
  height: 13px;
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
}

/* ================================================================
   4. 成员卡片网格
   ================================================================ */
.screen-members .screen-inner {
  padding-top: 24px;
  padding-bottom: 60px;
}

/* ================================================================
   2·五、成员档案（明日方舟排版）
   ================================================================ */
/* ---- Coverflow 轮盘（屏幕中心为原点，左右滑动，滚轮驱动） ---- */
/* 收拢到 27%：右侧整块留给档案区（模型 + 资料），整体向页面中心靠拢
   max(360px, 27%) 防窄中屏左溢出（轮盘半宽 360px） */
.carousel {
  position: absolute;
  left: max(360px, 27%);
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 60vw);
  height: 420px;
  perspective: 1400px;
  /* 隐形热区判定：整个轮盘区域监听滚轮，不干扰页面翻页 */
}

.carousel-hitzone {
  position: absolute;
  inset: 0;
  /* 隐形热区：透明但可命中滚轮事件 */
  z-index: 5;
}

.archives-carousel {
  position: absolute;
  inset: 0;
  perspective: 1400px;   /* 透视作用于轮盘本体，侧卡 translateZ 才有纵深 */
}

/* 每张卡片：竖版长方形，绝对定位在屏幕中心，用 transform 摆出 coverflow */
.carousel-slide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 400px;
  margin-left: -130px;
  margin-top: -200px;
  pointer-events: none;   /* 非中心卡不可点击 */
  will-change: transform, opacity;
  transition:
    transform 0.45s cubic-bezier(0.25, 1, 0.35, 1),
    opacity 0.45s cubic-bezier(0.25, 1, 0.35, 1);
}

/* 当前卡片：正中最大、不透明、最前、前凸 + 高亮 */
.carousel-slide.active {
  transform: translateX(0) scale(1) translateZ(0);
  opacity: 1;
  z-index: 10;
  pointer-events: auto;   /* 仅中心卡可点击 */
}

/* 两侧卡片：偏移 + 旋转 + 缩小 + 压暗 + 向后退纵深（从中央卡背后过）
   左右严格对称（±260 / ±300），轮盘视觉不歪 */
.carousel-slide.offset-neg-1 {
  transform: translateX(-260px) scale(0.85) translateZ(-160px);
  opacity: 0.5;
  z-index: 8;
}

.carousel-slide.offset-pos-1 {
  transform: translateX(260px) scale(0.85) translateZ(-160px);
  opacity: 0.5;
  z-index: 8;
}

.carousel-slide.offset-neg-2 {
  transform: translateX(-300px) scale(0.7) translateZ(-300px);
  opacity: 0.28;
  z-index: 6;
}

.carousel-slide.offset-pos-2 {
  transform: translateX(300px) scale(0.7) translateZ(-300px);
  opacity: 0.28;
  z-index: 6;
}

/* 更远的卡片隐藏 */
.carousel-slide.offset-neg-3,
.carousel-slide.offset-pos-3 {
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.carousel-dots {
  position: absolute;
  bottom: -46px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 12;
}

.carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}

.carousel-dots button.active {
  background: var(--purple);
  border-color: var(--purple);
}

/* ---- 成员 ID 搜索框（轮盘上方，方谷 UI 风格） ---- */
.member-search {
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  width: 340px;
  padding: 11px 16px;
  background: rgba(20, 20, 22, 0.82);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--purple);
  backdrop-filter: blur(8px);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  z-index: 15;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.member-search:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 24px rgba(255, 250, 0, 0.18);
}

.member-search-icon {
  width: 15px;
  height: 15px;
  color: var(--purple);
  flex-shrink: 0;
}

.member-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);           /* 原生文字正常显示 */
  caret-color: var(--purple);  /* 黄色闪烁光标 */
  font-size: 13px;
  letter-spacing: 0.12em;
  font-family: inherit;
}

/* 打字机文本层：独立 span 渲染，避免高频改 placeholder 触发重绘 */
.member-search-type {
  position: absolute;
  left: 41px;         /* 图标右侧 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

.member-search-type::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 15px;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--purple);
  animation: caret-blink 0.9s steps(1) infinite;
}

@keyframes caret-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

.member-search input::placeholder {
  color: var(--text-dim);
  opacity: 0.85;
  letter-spacing: 0.18em;
}

/* 输入非空：隐藏提示层（避免与用户输入重叠糊团），打字机暂停中 */
.member-search.has-value .member-search-type {
  display: none;
}

/* 手动搜索按钮：方谷斜角风格，悬停黄光 */
.member-search-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: 0.3em;
  font-family: inherit;
  color: var(--bg-0);
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border: none;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: box-shadow var(--t-fast), filter var(--t-fast);
}

.member-search-btn:hover {
  box-shadow: 0 0 18px rgba(255, 250, 0, 0.4);
  filter: brightness(1.08);
}

.member-search-btn:active {
  filter: brightness(0.9);
}

/* 卡片本体（竖版长方形，黑色磨砂面板） */
.archive-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 26px 24px 46px;
  background-color: #141416;   /* 黑色实心底：哑光磨砂面板 */
  /* 多层细点噪点纹理（错位叠加模拟磨砂颗粒）+ 上少白下黑渐变（顶部白 0.20 → 向下过渡到黑） */
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1.2px),
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.06) 18%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.35) 100%);
  background-size: 5px 5px, 5px 5px, 9px 9px, 100% 100%;
  background-position: 0 0, 2px 2px, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.18);   /* 1px 白描边 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 24px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition:
    border-color var(--t-fast),
    background-color var(--t-fast),
    box-shadow var(--t-fast),
    transform var(--t-fast);
}

/* 顶部编号行：ID 编号 + ARCHIVE 小字（深灰 + 底部短横线），右上角区域，保留 */
.archive-id {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.7);   /* 黑底上白色 */
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 2;
}

/* 编号行底部短横线装饰：ID 下方一小段深灰实线（加层次） */
.archive-id::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, 0.55);
}

.archive-card:hover {
  border-color: #ffd400;   /* hover 黄边（黑底上更亮） */
  transform: translateY(-3px);   /* 微上浮 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 36px rgba(0, 0, 0, 0.5);
}

.archive-card:focus-visible {
  outline: 1px solid #ffd400;
  outline-offset: 2px;
}

/* 正中间 ID：成员游戏名，大字白色，flex 居中占满 */
.archive-code {
  position: relative;
  z-index: 1;
  max-width: 92%;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  color: #ffffff;
  word-break: break-word;
}

/* 底部钢印序号：11 位大写字母+数字，等宽大字，金属拉丝渐变文字（金属光泽）+ 浮雕压暗 + 轻微旋转 */
.archive-serial {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%) rotate(-2deg);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-indent: 0.22em;   /* 抵消 letter-spacing 尾部空白，保证居中 */
  background: linear-gradient(180deg, #f0f0f0 0%, #c8c8c8 45%, #8a8a8a 55%, #e8e8e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);   /* 压暗浮雕，让金属凸起 */
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* 中央选中卡高亮：黑底 + 白/黄双描边 + 外发光（不破坏整体黑白） */
.carousel-slide.active .archive-card {
  border-color: #fffa00;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(255, 250, 0, 0.35),
    0 0 28px rgba(255, 250, 0, 0.25),
    0 18px 50px rgba(0, 0, 0, 0.55);
}

/* ---- 档案区（右侧隐形边界：上模型展示 / 下详细资料，随轮盘联动） ---- */
.profile-dock {
  position: absolute;
  left: max(
    calc(100vw - max(360px, 27%) - min(380px, calc((100vw - 50% - 120px) * 0.5))),
    calc(50% + 20px)
  );
  right: auto;
  top: 0;   /* 渲染区从页面最顶部开始，模型头顶顶到页面顶 */
  transform: none;
  z-index: 200;   /* 模型真正最顶层：高于 topbar(95)/bottombar(30)/弹窗(100)，只动图层关系 */
  width: min(760px, calc(100vw - 50% - 110px));   /* 左右拉大 */
  height: 100vh;   /* 全高覆盖：从页面顶到底栏底，模型底不被底栏挡 */
  pointer-events: auto;
}

/* 隐形边界：透明容器，无边框无底板，内容直接浮在页面背景上
   上模型弹性区（1fr）/ 下资料固定区（280px），资料区高度固定，内容多时内部滚动，绝不顶模型 */
.profile-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);   /* 仅模型区，名字行已移除腾空间 */
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 模型展示区：实色底板面板（与轮盘卡片同源 #1c1c1f）+ 内部细网格 + 四角 L 形角标，
   只包模型区，不遮下方 280px 资料区；canvas 尺寸/交互不受影响 */
.profile-model {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0 26px;
  padding: 0 18px;
  background-color: #1c1c1f;
  /* 四角 L 形角标（黄实线，8px 缩进）+ 内部 24px 细网格纹理 */
  background-image:
    linear-gradient(rgba(255, 250, 0, 0.65), rgba(255, 250, 0, 0.65)),
    linear-gradient(rgba(255, 250, 0, 0.65), rgba(255, 250, 0, 0.65)),
    linear-gradient(rgba(255, 250, 0, 0.65), rgba(255, 250, 0, 0.65)),
    linear-gradient(rgba(255, 250, 0, 0.65), rgba(255, 250, 0, 0.65)),
    linear-gradient(rgba(255, 250, 0, 0.65), rgba(255, 250, 0, 0.65)),
    linear-gradient(rgba(255, 250, 0, 0.65), rgba(255, 250, 0, 0.65)),
    linear-gradient(rgba(255, 250, 0, 0.65), rgba(255, 250, 0, 0.65)),
    linear-gradient(rgba(255, 250, 0, 0.65), rgba(255, 250, 0, 0.65)),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 24px 24px, 24px 24px;
  background-position:
    8px 8px, 8px 8px,
    right 8px top 8px, right 8px top 8px,
    left 8px bottom 8px, left 8px bottom 8px,
    right 8px bottom 8px, right 8px bottom 8px,
    0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  border: 1px solid rgba(255, 250, 0, 0.35);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);
}

.profile-skin {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  position: relative;
  z-index: 1;
}

.profile-skin:active {
  cursor: grabbing;
}

/* 提示文字去掉：视觉上只有人物模型和介绍，无其他 UI 噪音 */
.profile-hint {
  display: none;
}

@media (max-width: 1280px) {
  /* 中屏（含 1280 笔记本）：轮盘紧凑化 + 档案区镜像对齐，保持不重叠；max(280px, 23%) 防左溢出 */
  .carousel {
    left: max(280px, 23%);
    width: min(560px, 46vw);
  }
  .carousel-slide.offset-neg-1 {
    transform: translateX(-200px) scale(0.85) translateZ(-160px);
  }
  .carousel-slide.offset-pos-1 {
    transform: translateX(200px) scale(0.85) translateZ(-160px);
  }
  .carousel-slide.offset-neg-2 {
    transform: translateX(-240px) scale(0.7) translateZ(-300px);
  }
  .carousel-slide.offset-pos-2 {
    transform: translateX(240px) scale(0.7) translateZ(-300px);
  }
  .profile-dock {
    /* 紧凑轮盘中心 = max(280px, 23%)，档案区镜像对齐到视口宽 - 轮盘中心 */
    left: max(
      calc(100vw - max(280px, 23%) - min(300px, calc((100vw - 50% - 130px) * 0.5))),
      calc(50% + 60px)
    );
    width: min(600px, calc(100vw - 50% - 120px));
  }
}

@media (max-width: 860px) {
  .archives-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .profile-dock {
    display: none;   /* 窄屏隐藏右侧面板，避免挤压轮盘 */
  }
}

/* ================================================================
   5. 关于页（终末地档案风：照片栏 / 友谊墙 / 绝密）
   ================================================================ */
.fyd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.fyd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 595px;   /* 卡片再加高 3/4（340→595）：视觉饱满，内容不足时留白 */
  padding: 24px 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.18);   /* 白描边 */
  background-color: #141416;   /* 黑色镜面光滑金属面板 */
  /* 顶部高光渐变（黑→灰阶，金属反光）+ 细横拉丝条纹（双组错位）
     + 顶部 1px 强高光线（白 0.3，金属边缘反光）+ 底部 150° 黄斜切光带（黑底上更醒目）
     + 右下角 45° 黄斜粗条（首层置顶，压住不透明金属底才可见） */
  background-image:
    linear-gradient(-45deg, transparent 0, transparent 30px, rgba(230, 194, 0, 0.85) 30px, rgba(230, 194, 0, 0.85) 44px, transparent 44px),
    linear-gradient(180deg, #2c2c30 0%, #1a1a1e 55%, #0e0e10 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.07) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    linear-gradient(150deg, transparent 0, transparent 80%, rgba(230, 194, 0, 0.75) 80%, rgba(230, 194, 0, 0.75) 82%, transparent 82%);
  background-size: 100% 100%, 100% 100%, auto, auto, 100% 100%, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat;
  background-origin: border-box;   /* 右下角 45° 粗条以卡片真实角为准（不含内边距偏移） */
  transition:
    border-color var(--t-fast),
    background-color var(--t-fast),
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.fyd-card:hover {
  border-color: rgba(255, 212, 0, 0.95);   /* hover 黄边（黑底上更亮） */
  transform: translateY(-3px);   /* 轻微上浮 */
  box-shadow: 0 0 30px rgba(230, 194, 0, 0.3);
}

/* hover：左上 L 角点亮 */
.fyd-card:hover::before {
  border-color: rgba(230, 194, 0, 1);
}

/* 入口卡（点击打开详情浮层） */
.fyd-card[data-modal] {
  cursor: pointer;
}

.fyd-card[data-modal]:hover {
  box-shadow: 0 0 24px rgba(255, 212, 0, 0.30);
}

.fyd-card[data-modal]:active {
  transform: translateY(1px);
}

/* 四角 L 角标（左上 / 右下 L 形，亮黄适配黑底） */
.fyd-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  border-top: 2px solid rgba(255, 212, 0, 0.9);
  border-left: 2px solid rgba(255, 212, 0, 0.9);
  pointer-events: none;
}

.fyd-card::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-bottom: 2px solid rgba(255, 212, 0, 0.9);
  border-right: 2px solid rgba(255, 212, 0, 0.9);
  pointer-events: none;
}

/* 右下角 45° 斜粗条：照片墙/友谊天地黄、绝密红（独立子元素单层渐变，确保各渲染路径下可见，纯装饰不拦截交互） */
.fyd-corner-stripe {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56px;
  height: 56px;
  background-image: linear-gradient(-45deg, transparent 0, transparent 30px, rgba(230, 194, 0, 0.85) 30px, rgba(230, 194, 0, 0.85) 44px, transparent 44px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

.fyd-card[data-modal="notes"] .fyd-corner-stripe {
  background-image: linear-gradient(-45deg, transparent 0, transparent 30px, rgba(230, 60, 60, 0.9) 30px, rgba(230, 60, 60, 0.9) 44px, transparent 44px);
}

.screen.is-active .fyd-card:nth-child(1) { transition-delay: 0.10s; }
.screen.is-active .fyd-card:nth-child(2) { transition-delay: 0.20s; }
.screen.is-active .fyd-card:nth-child(3) { transition-delay: 0.30s; }

/* 卡片头：编号 + 标题 + 状态（白色分区线适配黑底） */
.fyd-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);   /* 标题区/内容区分区线（白） */
  /* 头部分区纹理：微妙白色小网格 + 底部亮黄渐变分隔光带 */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, transparent, rgba(255, 212, 0, 0.7), transparent);
  background-size: 24px 24px, 24px 24px, 100% 1px;
  background-position: 0 0, 0 0, 0 100%;
}

.fyd-tag {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #1a1a1a;
  background: #e6c200;   /* 黄块黑字（弹窗浮层维持原样） */
  border: none;
  padding: 4px 9px;
  line-height: 1.2;
  /* 编号斜切角色块 */
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}

.fyd-title {
  position: relative;
  flex: 1;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.25em;
  color: var(--text);
  padding-left: 12px;
}

/* 标题左竖线装饰 */
.fyd-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 15px;
  background: var(--purple);
  box-shadow: 0 0 8px rgba(255, 250, 0, 0.5);
}

/* 标题 hover 深黄下划线：从左往右滑入（仅卡片 hover 触发） */
.fyd-title::after {
  content: "";
  position: absolute;
  left: 12px;   /* 与标题文字（padding-left 12px）对齐 */
  right: 0;
  bottom: -5px;
  height: 2px;
  background: linear-gradient(90deg, #ffd400, rgba(255, 212, 0, 0.25));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.35, 1);
}

.fyd-card:hover .fyd-title::after {
  transform: scaleX(1);
}

.fyd-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.fyd-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fyd-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s;
}

.fyd-photo:hover img {
  transform: scale(1.06);
}

.fyd-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

/* 友谊墙 */
.fyd-wall {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 6px;
}

.fyd-wall-item {
  padding-left: 12px;
  border-left: 2px solid rgba(255, 250, 0, 0.4);
}

.fyd-wall-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue-soft);
}

.fyd-wall-msg {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
}

.fyd-wall-time {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(153, 153, 153, 0.45);
}

/* 绝密 */
.fyd-notes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 6px;
}

.fyd-note time {
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--purple-soft);
}

.fyd-note h4 {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text);
}

.fyd-note p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
}

/* ---- 关于页卡片黑底适配：卡片内文字/边框统一改白（浮层深色主题保持不变） ---- */
.fyd-card .fyd-tag {
  color: #ffd400;
  background: rgba(230, 194, 0, 0.08);
  border: 1px solid rgba(255, 212, 0, 0.7);   /* 黄字黄描边，黑底上配黄斜条 */
}

.fyd-card .fyd-title {
  color: #ffffff;
}

.fyd-card .fyd-title::before {
  background: #ffd400;
  box-shadow: 0 0 8px rgba(255, 250, 0, 0.35);
}

.fyd-card .fyd-photo {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
}

.fyd-card .fyd-photo::after {
  border-color: rgba(255, 255, 255, 0.1);
}

.fyd-card .fyd-wall-item {
  border-left-color: rgba(255, 250, 0, 0.45);
}

.fyd-card .fyd-wall-name {
  color: #ffffff;
}

.fyd-card .fyd-wall-msg {
  color: rgba(255, 255, 255, 0.75);
}

.fyd-card .fyd-wall-time {
  color: rgba(255, 255, 255, 0.4);
}

.fyd-card .fyd-note time {
  color: #ffd400;
}

.fyd-card .fyd-note h4 {
  color: #ffffff;
}

.fyd-card .fyd-note p {
  color: rgba(255, 255, 255, 0.75);
}

/* ================================================================
   5-B. 绝密卡专属样式（机密档案：红色警示 accent，与主黄区分）
   ================================================================ */
.fyd-card[data-modal="notes"] {
  border-color: rgba(235, 70, 70, 0.8);   /* 红色描边（提亮） */
  background-color: #141416;   /* 黑色镜面金属底 */
  /* 黑色金属渐变 + 拉丝 + 顶部高光线 + 底部 150° 红色斜切光带（与主黄卡同构，仅换红色 accent） */
  background-image:
    linear-gradient(-45deg, transparent 0, transparent 30px, rgba(230, 60, 60, 0.9) 30px, rgba(230, 60, 60, 0.9) 44px, transparent 44px),
    linear-gradient(180deg, #2c2c30 0%, #1a1a1e 55%, #0e0e10 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.07) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    linear-gradient(150deg, transparent 0, transparent 80%, rgba(230, 60, 60, 0.8) 80%, rgba(230, 60, 60, 0.8) 82%, transparent 82%);
  background-size: 100% 100%, 100% 100%, auto, auto, 100% 100%, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat;
  background-origin: border-box;
}

.fyd-card[data-modal="notes"]:hover {
  border-color: rgba(235, 70, 70, 1);
  box-shadow: 0 0 30px rgba(235, 70, 70, 0.3);
}

/* 四角 L 角标换红（亮红实色） */
.fyd-card[data-modal="notes"]::before,
.fyd-card[data-modal="notes"]::after {
  border-color: #e64646;
}

.fyd-card[data-modal="notes"] .fyd-tag {
  color: #ffffff;
  background: #e03030;   /* 实色红块白字 + 红描边（提亮） */
  border: 1px solid #b02424;
}

.fyd-card[data-modal="notes"] .fyd-title::before {
  background: #e64646;
  box-shadow: 0 0 8px rgba(235, 70, 70, 0.55);
}

/* 绝密卡：头部光带 / 标题 hover 下划线统一换红（提亮） */
.fyd-card[data-modal="notes"] .fyd-card-head {
  border-bottom-color: rgba(235, 70, 70, 0.4);   /* 分区线换红 */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, transparent, rgba(235, 70, 70, 0.7), transparent);
  background-size: 24px 24px, 24px 24px, 100% 1px;
  background-position: 0 0, 0 0, 0 100%;
}

.fyd-card[data-modal="notes"] .fyd-title::after {
  background: linear-gradient(90deg, #e64646, rgba(235, 70, 70, 0.3));
}

/* 绝密卡整卡马赛克遮罩：模糊盖住整卡（含 header/notes/斜条/L 角标），仅入口卡；弹窗不带 */
.fyd-card[data-modal="notes"] .fyd-mask {
  position: absolute;
  inset: 0;
  z-index: 5;
  backdrop-filter: blur(5px) saturate(1.5);
  -webkit-backdrop-filter: blur(5px) saturate(1.5);
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;   /* 不挡点击，点击仍能开弹窗 */
}

/* 遮罩上层中央文字：与头部绝密图形同层置顶 */
.fyd-card[data-modal="notes"] .fyd-mask-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em;   /* 抵消 letter-spacing 尾部空白 */
  color: rgba(235, 70, 70, 0.9);
  white-space: nowrap;
  pointer-events: none;
}

/* 绝密卡头部置顶：浮在遮罩上层 */
.fyd-card[data-modal="notes"] .fyd-card-head {
  position: relative;
  z-index: 10;
}

.fyd-card[data-modal="notes"] .fyd-note time {
  color: #ff5a5a;
}

#modal-notes .fyd-note time {
  color: #ff6b4a;
}

/* 绝密弹窗：橙红 accent 套用 */
#modal-notes .fyd-modal-panel {
  border-color: rgba(255, 107, 74, 0.75);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 44px rgba(255, 107, 74, 0.18);
}

#modal-notes .fyd-modal-head {
  background-color: rgba(255, 107, 74, 0.06);
  /* 头部警戒斜条纹（更清晰） */
  background-image: repeating-linear-gradient(135deg, rgba(255, 107, 74, 0.08) 0, rgba(255, 107, 74, 0.08) 1px, transparent 1px, transparent 12px);
}

#modal-notes .fyd-tag {
  color: #1c1c1f;
  background: #ff6b4a;   /* 实色橙红块黑字 */
  border: none;
}

#modal-notes .fyd-title::before {
  background: #ff6b4a;
  box-shadow: 0 0 8px rgba(255, 107, 74, 0.6);
}

/* 页尾：备案号 + 法律文本（终末地档案底部） */
.fyd-footer {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.fyd-beian {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: rgba(153, 153, 153, 0.9);
}

.fyd-beian a {
  color: rgba(153, 153, 153, 0.9);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}

.fyd-beian a:hover {
  color: var(--blue);
}

.fyd-beian-sep {
  opacity: 0.4;
}

.fyd-legal {
  margin-top: 10px;
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: rgba(153, 153, 153, 0.8);
}

.fyd-legal:first-of-type {
  margin-top: 18px;
}

/* 紧凑页头（无大标题，仅注释行） */
.screen-head--compact {
  margin-bottom: 34px;
}

.screen-head--compact .screen-note {
  margin-top: 0;
}

.screen-head--compact .deco-line {
  bottom: -16px;
}


/* ================================================================
   5-A. 详情浮层（点击入口卡打开，独立滚动，不干扰翻页）
   ================================================================ */
.fyd-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.fyd-modal[hidden] {
  display: none;
}

.fyd-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.fyd-modal-panel {
  position: relative;
  width: min(960px, 94vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 250, 0, 0.28);
  background: linear-gradient(165deg, #1a1a1d, #101012);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 250, 0, 0.06);
  animation: fydModalIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fydModalIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fyd-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 250, 0, 0.02);
}

.fyd-modal-head .fyd-title {
  font-size: 15px;
}

.fyd-modal-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(153, 153, 153, 0.7);
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all var(--t-fast) ease;
}

.fyd-modal-close:hover {
  color: var(--text);
  border-color: rgba(255, 250, 0, 0.5);
  box-shadow: 0 0 12px rgba(255, 250, 0, 0.15);
}

.fyd-modal-body {
  padding: 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.fyd-modal-body::-webkit-scrollbar {
  width: 6px;
}

.fyd-modal-body::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 3px;
}

.fyd-photos--modal {
  grid-template-columns: repeat(4, 1fr);
}

.fyd-wall--modal {
  gap: 20px;
}

.fyd-notes--modal {
  gap: 20px;
}

/* 浮层入场动画（配合 reveal 类不冲突） */

/* 浮层打开时：锁页面滚动（浮层内部独立滚动） */
body.modal-open {
  overflow: hidden;
}

body.modal-open .screen-info {
  overflow: hidden;
}
/* ================================================================
   6. 底部指示点导航
   ================================================================ */
.dots {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  backdrop-filter: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--t-mid) ease var(--t-mid), transform var(--t-mid) ease var(--t-mid);
  pointer-events: none;
}

/* 首页隐藏指示点：仅离开首页后显示 */
body.site-ready .dots:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dots.hidden,
body.site-ready .dots.hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.dot {
  padding: 5px 12px;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  border: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}

.dot:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.dot.active {
  color: var(--bg-0);
  background: var(--purple);
  box-shadow: 0 0 14px rgba(255, 250, 0, 0.45);
}

/* ================================================================
   响应式
   ================================================================ */
@media (max-width: 980px) {
  .archives-grid,
  .fyd-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fyd-photos {
    grid-template-columns: repeat(3, 1fr);
  }

  .fyd-photos--modal {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 窄屏内容可能超过一屏：允许纵向滚动，避免卡片被裁切 */
  .screen-members,
  .screen-info {
    justify-content: flex-start;
    overflow-y: auto;
  }

  .screen-inner {
    padding: 0 24px;
  }

  .topbar-meta {
    display: none;
  }
}

@media (max-width: 620px) {
  .archives-grid,
  .fyd-grid {
    grid-template-columns: 1fr;
  }

  /* 预览 16 张 2 列会撑爆卡片：缩为 4 列小图，16 张整 4 行 */
  .fyd-photos {
    grid-template-columns: repeat(4, 1fr);
  }

  .fyd-photos--modal {
    grid-template-columns: repeat(2, 1fr);
  }

  .fyd-modal {
    padding: 12px;
  }

  .fyd-modal-body {
    padding: 14px;
  }

  .hero-title {
    font-size: clamp(120px, 30vw, 220px);
  }

  .hero-sub {
    font-size: 10px;
    letter-spacing: 0.35em;
  }

  .hero-sub::before,
  .hero-sub::after {
    display: none;
  }

  .hero-ver {
    font-size: 10px;
    letter-spacing: 0.2em;
    margin-top: 18px;
  }

  .hero-ver::before,
  .hero-ver::after {
    display: none;
  }

  .screen-head {
    margin-bottom: 36px;
  }

  .swipe-hint {
    bottom: 34px;
  }


}

/* ================================================================
   7. 四类卡片 · 科幻科技 × 工业 × 档案风重设计（v=20260811bv）
   色调不变：黑底 + 黄/白 accent；全部 CSS 实现，无图片
   ================================================================ */

/* ---------- A. 轮盘卡（成员档案）：HUD 读数 + 刻度角标 + 条码 + 扫描光 ---------- */
.archive-card {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1.2px),
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.06) 18%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.35) 100%),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 5px 5px, 5px 5px, 9px 9px, 100% 100%, 26px 26px, 26px 26px;
  background-position: 0 0, 2px 2px, 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, no-repeat, repeat, repeat;
}

/* 左上 HUD 读数标签：REC//ACTIVE + 黄刻度线 */
.archive-card::before {
  content: "REC//ACTIVE";
  position: absolute;
  top: 12px;
  left: 14px;
  padding: 2px 6px 3px 18px;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 8px;
  letter-spacing: 0.26em;
  color: rgba(255, 250, 0, 0.85);
  text-shadow: 0 0 8px rgba(255, 250, 0, 0.45);
  background:
    linear-gradient(rgba(255, 250, 0, 0.85), rgba(255, 250, 0, 0.85)) 6px 50% / 6px 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 250, 0, 0.4) 0 1px, transparent 1px 3px) 6px 50% / 8px 1px no-repeat;
  border: 1px solid rgba(255, 250, 0, 0.22);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  pointer-events: none;
  z-index: 2;
}

/* 底部档案条码 + 刻度（工业贴标） */
.archive-card::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 13px;
  width: 46px;
  height: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.8) 0 1px, transparent 1px 2px, rgba(255,255,255,0.8) 2px 4px, transparent 4px 5px, rgba(255,255,255,0.55) 5px 6px, transparent 6px 8px, rgba(255,255,255,0.8) 8px 9px, transparent 9px 11px),
    linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25)) 0 0 / 100% 1px no-repeat,
    linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25)) 0 100% / 100% 1px no-repeat;
  opacity: 0.75;
  pointer-events: none;
  z-index: 2;
}

/* 中央选中卡：REC 标签点亮 + 呼吸 glow + 边框流光 */
.carousel-slide.active .archive-card::before {
  color: #fffa00;
  animation: archive-blink 1.6s ease-in-out infinite;
}

@keyframes archive-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.carousel-slide.active .archive-card {
  animation: archive-glow 2.4s ease-in-out infinite;
}

@keyframes archive-glow {
  0%, 100% {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 1px rgba(255,250,0,0.35), 0 0 24px rgba(255,250,0,0.22), 0 18px 50px rgba(0,0,0,0.55);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 1px rgba(255,250,0,0.55), 0 0 40px rgba(255,250,0,0.35), 0 18px 50px rgba(0,0,0,0.55);
  }
}

/* 轮盘卡 hover：扫描光带扫过（多层渐变模拟） */
.archive-card:hover {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1.2px),
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.06) 18%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.35) 100%),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, transparent 0%, rgba(255, 250, 0, 0.10) 46%, rgba(255, 250, 0, 0.18) 50%, rgba(255, 250, 0, 0.10) 54%, transparent 100%);
  background-size: 5px 5px, 5px 5px, 9px 9px, 100% 100%, 26px 26px, 26px 26px, 100% 220%;
  background-position: 0 0, 2px 2px, 0 0, 0 0, 0 0, 0 0, 0 110%;
  background-repeat: repeat, repeat, repeat, no-repeat, repeat, repeat, no-repeat;
  transition: background-position 0.5s ease, border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.archive-card:hover {
  background-position: 0 0, 2px 2px, 0 0, 0 0, 0 0, 0 0, 0 -110%;
}

/* ---------- B. 角色模型卡（档案面板）重做：纯图形组合（B2 覆盖在文件末尾） ---------- */
@keyframes hud-ring-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.35; }
}

/* ---------- C. 关于页普通卡（照片墙/友谊天地）：HUD 角标 + 头部状态灯 + 档案标 ---------- */
.fyd-card-head {
  position: relative;
}



/* 头部右端：档案状态读数（科幻绿字变体 → 黄） */
.fyd-card-head::after {
  content: "STATUS//OK";
  position: absolute;
  top: 1px;
  right: 2px;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 7px;
  letter-spacing: 0.28em;
  color: rgba(255, 212, 0, 0.75);
  text-shadow: 0 0 6px rgba(255, 212, 0, 0.35);
  pointer-events: none;
}

/* 卡片左缘档案竖带：深色条 + 竖排 ARCHIVE 文字（工业标签） */
.fyd-card {
  border-left: 3px solid rgba(255, 212, 0, 0.28);
}

/* 四角 HUD 角标升级：内刻度线（左上/右下 L 角 + 刻度） */
.fyd-card::before {
  width: 24px;
  height: 24px;
  border-top: 2px solid rgba(255, 212, 0, 0.9);
  border-left: 2px solid rgba(255, 212, 0, 0.9);
}

.fyd-card::after {
  width: 24px;
  height: 24px;
  border-bottom: 2px solid rgba(255, 212, 0, 0.9);
  border-right: 2px solid rgba(255, 212, 0, 0.9);
}

/* 照片墙格子：左上小角标（科幻取景框） */
.fyd-photo {
  position: relative;
}
.fyd-photo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-top: 1px solid rgba(255, 212, 0, 0.75);
  border-left: 1px solid rgba(255, 212, 0, 0.75);
  pointer-events: none;
  z-index: 1;
}

/* 友谊墙条目：菱形档位标记（左缘升级） */
.fyd-wall-item {
  position: relative;
}


/* ---------- D. 绝密卡：警戒条 + 密级红 + 弹窗 TOP SECRET 水印 ---------- */
/* 入口卡头（遮罩上层可见）：警戒红状态 + 红点 */
.fyd-card[data-modal="notes"] .fyd-card-head::after {
  content: "STATUS//RESTRICTED";
  color: #ff5a5a;
  text-shadow: 0 0 6px rgba(255, 90, 90, 0.45);
}



/* 弹窗：头部警戒条（黄黑斜纹）+ 红密级读数 */
#modal-notes .fyd-modal-head {
  position: relative;
}
#modal-notes .fyd-modal-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(-45deg, #ff6b4a 0 10px, #1c1c1f 10px 20px);
  pointer-events: none;
}
#modal-notes .fyd-modal-head::after {
  content: "SECURITY LV.5";
  position: absolute;
  top: 10px;
  right: 52px;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 7px;
  letter-spacing: 0.3em;
  color: rgba(255, 107, 74, 0.9);
  text-shadow: 0 0 6px rgba(255, 107, 74, 0.5);
  pointer-events: none;
}

/* 弹窗 body：TOP SECRET 斜水印（低透明度红字） */
#modal-notes .fyd-modal-body {
  position: relative;
}
#modal-notes .fyd-modal-body::before {
  content: "TOP SECRET";
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: 0.35em;
  color: rgba(255, 107, 74, 0.055);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
#modal-notes .fyd-notes {
  position: relative;
  z-index: 1;
}

/* 绝密弹窗角标：纯红 L 形（无刻度） */
#modal-notes .fyd-modal-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 24px;
  height: 24px;
  border-top: 2px solid rgba(255, 107, 74, 0.95);
  border-left: 2px solid rgba(255, 107, 74, 0.95);
  pointer-events: none;
  z-index: 2;
}
#modal-notes .fyd-modal-panel {
  position: relative;
}

/* ================================================================
   B6. 角色模型卡：旋转区域直角框（左上/右下 HUD 角标）
   基于实测：模型旋转包围盒左上 (25.41%, 18.31%)、右下 (69.39%, 79.20%)
   ================================================================ */
.profile-model {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ================================================================
   7B. 成员档案区 · 终末地干员档案风重做（v=20260811ce）
   结构：背景水印层 / 顶部 REC+名字条+星级 / 中间 3D 模型 / 底部大标题+三色线+标签+简介
   切换：clip-path 从左展开滑入（数据仍由轮盘驱动）
   ================================================================ */
.profile-panel {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;   /* 撑满 dock，model 的 100% 有参照 */
  overflow: visible;
}

/* 背景装饰层：黄旗斜纹 + 水印大字 */
.profile-bg {
  display: none;   /* 渲染区全透明，水印/斜纹背景移除 */
}

.profile-bg-text {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  max-width: 96%;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: clamp(90px, 12vw, 190px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: rgba(255, 255, 255, 0.045);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  pointer-events: none;
}

/* 顶部：REC + 名字条 + 星级 */
.profile-header {
  display: none;   /* 诊断期临时隐藏，先看渲染区位置 */
}

.profile-rec {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #191919;
  background: #fffa00;
  box-shadow: 0 0 12px rgba(255, 250, 0, 0.35);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.profile-rec-bracket {
  color: rgba(25, 25, 25, 0.45);
}

.profile-namebar {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #fff;
}

.profile-namebar-page {
  color: rgba(255, 255, 255, 0.5);
}

/* 中间模型区：绝对定位铺满 panel（导航栏下 → 页面底部） */
.profile-model {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;   /* 覆盖旧版 column，让 align-items:flex-end 真正底部对齐画布 */
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  background: transparent;   /* 渲染区透明（诊断红框已撤） */
  border: none;
  box-shadow: none;
  overflow: visible;
}

/* 切换动画：clip-path 从左展开 + 滑入（终末地干员切换同款） */
@keyframes profile-reveal {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transform: translateX(-26px);
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateX(0);
  }
}

.profile-panel.anim-in {
  animation: profile-reveal 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 成员页/关于页：只模糊各自页面的网格背景（grid 已 absolute 跟随页面，不会波及首页）
   前景内容（轮盘/档案/卡片）z 高于网格，保持清晰 */
.screen-members .screen-grid,
.screen-info .screen-grid {
  filter: blur(7px) brightness(0.85);
}

/* ================================================================
   下边栏：与导航栏同款样式，不填内容（对称装饰框）
   ================================================================ */
.bottombar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--topbar-h) / 2);   /* 高度减半（28px） */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  gap: 20px;
  border-top: 1px solid var(--line);
  background: rgba(10, 14, 23, 0.92);
  backdrop-filter: blur(10px);
  z-index: 30;   /* 与 topbar 同级 */
  opacity: 0;
  transform: translateY(12px);   /* 与 topbar 对称：从下往上滑入 */
  transition: opacity var(--t-mid) ease var(--t-mid), transform var(--t-mid) ease var(--t-mid);
  pointer-events: none;
}

/* 与 topbar 同显隐逻辑：离开首页后显示 */
body.site-ready .bottombar:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bottombar.hidden,
body.site-ready .bottombar.hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}