/* ============================================================================
   MCA 官网 · 全局样式
   ----------------------------------------------------------------------------
   设计思路：
     - 深色星空底 + 青蓝主色 + 少量金色点缀，取自角色立绘的蓝金配色
     - 大量用 clamp() 做流体字号，减少媒体查询数量
     - 所有动画都尊重系统的「减少动态效果」设置（见文件末尾）
     - 不引入任何外部字体 / CDN，国内访问不会卡在字体请求上

   目录：
     01 变量与重置        09 部门
     02 背景层            10 世界观
     03 通用布局          11 作品
     04 顶部导航          12 接下来（路线图）
     05 首屏              13 加入
     06 跑马灯            14 页脚
     07 区块标题          15 返回顶部
     08 企划介绍          16 动效 / 响应式 / 无障碍 / 打印
   ========================================================================== */

/* ---------------------------------------------------------------------------
   01. 变量与重置
   --------------------------------------------------------------------------- */
:root {
  /* 颜色 */
  --bg: #070a12;
  --bg-soft: #0b1020;
  --ink: #e9f1ff;
  --muted: #94a6c6;
  --cyan: #7fd8ff;
  --blue: #5b8cff;
  --gold: #ffcf6b;
  --violet: #b48cff;

  --line: rgba(140, 180, 255, 0.14);
  --line-soft: rgba(140, 180, 255, 0.08);
  --line-strong: rgba(140, 180, 255, 0.3);
  --glass: rgba(13, 19, 36, 0.62);

  /* 排版 */
  --font: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans SC", system-ui, sans-serif;

  /* 尺寸 */
  --nav-h: 72px;
  --radius: 22px;
  --radius-sm: 14px;

  /* 过渡 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* 锚点跳转时留出固定导航的高度，标题不会被挡住 */
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  /* 中文长文的「末行只剩一两个字」问题：
     pretty 会让浏览器把前面几行的断点重新分配，避免最后一行孤零零一个词。
     标题用的是 balance（见上面 h1~h4），这里只管正文。 */
  text-wrap: pretty;
}

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

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

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.01em;
  /* 标题换行时尽量让每行长度均衡，避免最后一行只剩一两个字 */
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 键盘焦点样式：只在键盘操作时出现，不影响鼠标点击 */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 跳过导航链接：平时藏起来，聚焦后才显示 */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--cyan);
  color: #04121f;
  border-radius: 8px;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
}

/* ---------------------------------------------------------------------------
   02. 背景层（星空 + 光晕 + 颗粒）
   --------------------------------------------------------------------------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 78% 6%, rgba(60, 110, 255, 0.2), transparent 60%),
    radial-gradient(900px 600px at 10% 34%, rgba(180, 140, 255, 0.13), transparent 62%),
    linear-gradient(180deg, #070a12 0%, #080c18 48%, #060911 100%);
}

/* 两层星点，尺寸和透明度不同，叠加后产生纵深感 */
.stars {
  position: absolute;
  inset: -10%;
  background-image: url("../assets/stars.svg");
  background-repeat: repeat;
  will-change: transform;
}
.stars--back {
  background-size: 900px 680px;
  opacity: 0.5;
  animation: drift 200s linear infinite;
}
.stars--front {
  background-size: 1500px 1120px;
  opacity: 0.32;
  animation: drift 280s linear infinite reverse;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-180px, -120px, 0); }
}

/* 两团大范围光晕，让深色背景不至于死板 */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.glow--cyan {
  width: 620px;
  height: 620px;
  top: -180px;
  right: -120px;
  background: radial-gradient(circle, rgba(90, 170, 255, 0.55), transparent 70%);
}
.glow--violet {
  width: 520px;
  height: 520px;
  top: 46vh;
  left: -200px;
  background: radial-gradient(circle, rgba(150, 110, 255, 0.36), transparent 70%);
}

/* 极淡的颗粒噪点：压住大面积深色渐变容易出现的色带 */
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   03. 通用布局
   --------------------------------------------------------------------------- */
.container {
  width: min(1180px, 92vw);
  margin-inline: auto;
  position: relative;
}

/* 内容层要盖在背景层之上 */
main,
.site-header,
.site-footer,
.to-top {
  position: relative;
  z-index: 1;
}

.section {
  padding-block: clamp(72px, 9vw, 132px);
}
.section--tight {
  padding-block: clamp(56px, 7vw, 104px);
}

/* 通用按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background-color 0.25s var(--ease), border-color 0.25s var(--ease);
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn--sm {
  padding: 9px 18px;
  font-size: 0.86rem;
}
.btn--primary {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: #04121f;
  box-shadow: 0 10px 30px rgba(80, 150, 255, 0.28);
}
.btn--primary:hover {
  box-shadow: 0 14px 38px rgba(80, 150, 255, 0.42);
}
.btn--ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--cyan);
}

/* 小标签 */
.badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.badge--ghost {
  background: rgba(160, 200, 255, 0.07);
  border: 1px solid var(--line-strong);
  color: #cfe1ff;
}

/* 「待补充」状态文字：虚线底边，一看就知道还没填 */
.is-pending {
  color: var(--gold);
  border-bottom: 1px dashed rgba(255, 207, 107, 0.45);
  padding-bottom: 1px;
}

/* 关于 text-wrap：
   试过给短段落加 balance 来消掉「末行只剩一两个字」，
   但中文是按字调行的，balance 为了把每行凑得一样长，
   会把「我们」「编程」「活动」这类词从中间拆开（实测出现「会编 / 程」），
   比短尾行更难接受，所以这里不用 balance，只保留 body 上的 pretty：
   它只在最后一行附近微调，词被拆开的概率低得多。 */

/* ---------------------------------------------------------------------------
   04. 顶部导航
   --------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    backdrop-filter 0.3s var(--ease);
  /* 默认就带一层很淡的毛玻璃。
     原因是不少 App 的内置浏览器会禁用 JS，那时 is-scrolled 永远不会加上，
     导航会变成一条透明的横条，内容直接透上来糊成一片。 */
  background: rgba(7, 10, 18, 0.5);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}

/* 滚动后再加深一点，让导航和内容拉开层次 */
.site-header.is-scrolled {
  background: rgba(7, 10, 18, 0.86);
}

/* 阅读进度条：贴在导航底边，填充比例由 JS 控制 */
.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cyan), var(--blue) 55%, var(--violet));
  transition: transform 0.1s linear;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* 站点标志：只有一枚白色字标，不再带旁边的文字。
   原图是透明底的白字，深色页面上直接放就行；
   高度给 30px，宽度按 3:1 的比例自动算（约 91px）。 */
.brand {
  display: flex;
  align-items: center;
  margin-right: auto;
}
.brand-logo {
  display: block;
  height: 34px;
  width: auto;
  /* 极淡的冷色投影，让白字从星空背景里稍微浮起来一点 */
  filter: drop-shadow(0 2px 10px rgba(110, 170, 255, 0.28));
  transition: opacity 0.25s var(--ease);
}
.brand:hover .brand-logo {
  opacity: 0.82;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.site-nav a {
  position: relative;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  color: var(--muted);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.site-nav a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
}
.site-nav a.is-active {
  color: var(--ink);
}
.site-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform: translateX(-50%);
}

/* ---------------------------------------------------------------------------
   身份组徽章
   彩底 + 黑字，带一点渐变和自发光。颜色对应关系：
     dev       开发者       金
     mbh_elite MBH精英成员  紫
     mbh       MBH普通成员  蓝
     art       创作部成员   橙
     user      普通用户     灰
   --------------------------------------------------------------------------- */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;
  white-space: nowrap;
  color: #0b1020;
}

.role-badge--dev {
  background: linear-gradient(135deg, #ffe9a8 0%, #f2b23c 100%);
  box-shadow: 0 0 16px rgba(242, 178, 60, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.role-badge--mbh-elite {
  background: linear-gradient(135deg, #d3b4ff 0%, #8b5cf6 100%);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.role-badge--mbh {
  background: linear-gradient(135deg, #a8e4ff 0%, #3f8cff 100%);
  box-shadow: 0 0 16px rgba(63, 140, 255, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.role-badge--art {
  background: linear-gradient(135deg, #ffcf9e 0%, #f97316 100%);
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* 管理员：淡绿色 */
.role-badge--admin {
  background: linear-gradient(135deg, #d8ffe9 0%, #a7f3d0 45%, #34d399 100%);
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  color: #06301f;
}

/* MBH + 创作部：青色 → 橙色渐变，一眼看出是两边都占 */
.role-badge--mbh-art {
  background: linear-gradient(120deg, #7fdcff 0%, #9be7ff 24%, #ffd0a0 68%, #f97316 100%);
  box-shadow: 0 0 18px rgba(127, 216, 255, 0.35), 0 0 26px rgba(249, 115, 22, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  color: #0b1020;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.role-badge--user {
  background: linear-gradient(135deg, #d6dfee 0%, #9aa8bd 100%);
  box-shadow: 0 0 12px rgba(154, 168, 189, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

/* ---------------------------------------------------------------------------
   顶栏的账号入口
   JS 会用 hidden 属性切换「登录」和「昵称」两个链接。
   同时给 [hidden] 加 !important，否则 display:flex 之类的规则会把 hidden 压掉。
   --------------------------------------------------------------------------- */
[hidden] {
  display: none !important;
}

.header-auth {
  flex-shrink: 0;
  font-size: 0.86rem;
  color: #c3d3ea;
  padding: 6px 10px;
  border-radius: 8px;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.header-auth:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
}
.header-auth__name {
  color: var(--cyan);
}

/* 窄屏顶栏放不下，账号入口统一收进侧边栏 */
@media (max-width: 900px) {
  .header-auth {
    display: none;
  }
}

.header-cta {
  flex-shrink: 0;
}

/* 导航不再有汉堡按钮：手机上直接排成一行常驻。
   这样即使 App 内置浏览器禁用了 JS，导航也是完整可用的。 */

/* ---------------------------------------------------------------------------
   05. 首屏
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(24px, 4vw, 52px);
  padding-bottom: 0;
  overflow: hidden;
}

/* 背景大字：极低透明度的实心字形，压在主视觉后面制造纵深。
   早先用过描边，但大字号下描边会变成一道道细线，看着像渲染错误，改回实心。 */
.hero-watermark {
  position: absolute;
  top: 5%;
  right: 2%;
  z-index: 0;
  font-size: clamp(200px, 33vw, 480px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: rgba(126, 174, 255, 0.055);
  user-select: none;
  pointer-events: none;
  /* 底部渐隐，避免字母下缘出现一条硬边 */
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  min-height: min(76vh, 700px);
}

.hero-copy {
  max-width: 620px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  color: var(--muted);
  margin-bottom: 22px;
}
.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(127, 216, 255, 0.14);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(127, 216, 255, 0.14); }
  50%      { box-shadow: 0 0 0 8px rgba(127, 216, 255, 0.04); }
}

.hero-title {
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
/* 关键词用渐变文字，强调「原创」这件事 */
.hero-title em {
  font-style: normal;
  background: linear-gradient(115deg, var(--cyan), var(--violet) 72%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  color: var(--muted);
  font-size: clamp(0.96rem, 1.2vw, 1.06rem);
  max-width: 46ch;
  margin-bottom: 30px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 34px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips li {
  padding: 5px 13px;
  font-size: 0.78rem;
  color: #b9cbe8;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
}

/* 右侧主视觉 */
.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 430px;
}

/* 角色身后的柔光：把人物从背景里「托」出来 */
.hero-halo {
  position: absolute;
  width: min(600px, 108%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(120, 190, 255, 0.28) 0%,
    rgba(110, 130, 255, 0.12) 42%,
    transparent 68%
  );
  filter: blur(18px);
}

/* 角色背后的旋转光环 */
.hero-ring {
  position: absolute;
  width: min(480px, 88%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(127, 216, 255, 0.55) 60deg,
    transparent 120deg,
    rgba(180, 140, 255, 0.45) 200deg,
    transparent 260deg,
    rgba(255, 207, 107, 0.35) 320deg,
    transparent 360deg
  );
  /* 用遮罩挖空中间，只留一圈细边 */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  opacity: 0.5;
  animation: spin 44s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.hero-img {
  position: relative;
  width: min(560px, 100%);
  filter: drop-shadow(0 30px 60px rgba(40, 90, 200, 0.45));
  /* 底部做一点渐隐，避免立绘在画面下缘出现生硬的横切边 */
  -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 90%, transparent 100%);
  /* JS 会写入 --px / --py 做轻微视差 */
  transform: translate3d(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 14px), 0);
  transition: transform 0.6s var(--ease);
}

/* 浮动信息卡：放在主视觉左下角的空白处，避免压住角色手臂 */
.float-card {
  position: absolute;
  left: -6%;
  bottom: 7%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 20px 16px;
  border-radius: 16px;
  background: rgba(10, 16, 30, 0.74);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.float-card__label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.float-card__value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  background: linear-gradient(120deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.float-card__sub {
  font-size: 0.72rem;
  color: #a9bcd9;
}
/* 装饰用的小进度条，暗示「合集还在继续」 */
.float-card__bar {
  margin-top: 9px;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.float-card__bar i {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
}

/* ---------------------------------------------------------------------------
   06. 跑马灯
   --------------------------------------------------------------------------- */
.marquee {
  margin-top: clamp(36px, 5vw, 64px);
  padding: 15px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  /* 两侧淡出，滚动看起来更自然 */
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee__track span {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  color: rgba(180, 205, 240, 0.6);
  white-space: nowrap;
}
.marquee__track i {
  color: var(--cyan);
  font-style: normal;
  font-size: 0.66rem;
  opacity: 0.75;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------------
   07. 区块标题（通用）
   --------------------------------------------------------------------------- */
.section-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  color: var(--cyan);
  margin-bottom: 16px;
  font-weight: 600;
}
/* 序号外面加个小方块，形成统一的章节编号语言 */
.section-kicker span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border-radius: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: #04121f;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
}
.section-kicker--light {
  color: rgba(170, 215, 255, 0.9);
}

.section-title {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  margin-bottom: 16px;
}
.section-title--lg {
  font-size: clamp(1.85rem, 3.5vw, 2.9rem);
  line-height: 1.24;
}

.section-desc {
  color: var(--muted);
  max-width: 54ch;
  margin-bottom: 0;
}

.section-head {
  margin-bottom: clamp(30px, 4vw, 52px);
}

/* 标题与说明左右分栏的版本（作品区在用） */
.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
/* 这里原来用 ch 限制宽度，中文下一个 ch 只有半个字宽，
   结果 34ch 只放得下十几个字，一段话被切成三四行，末行只剩「放。」。
   改用 em（约等于一个汉字宽），一段话刚好两行。 */
.section-desc--side {
  max-width: 23em;
  text-align: right;
  font-size: 0.9rem;
  padding-bottom: 6px;
}

/* ---------------------------------------------------------------------------
   08. 企划介绍
   --------------------------------------------------------------------------- */
/* 抬头不再单独占满一行，而是和正文一起待在左栏，
   右栏的配图从顶部就开始，不会在右上角空出一大块 */
.about-head {
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

/* 引言段落：比正文大一号，作为整节的「入口」 */
.about-lead {
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.85;
  color: #c2d2ea;
  max-width: 46ch;
  margin-top: 20px;
  margin-bottom: 0;
}
.about-lead strong {
  color: #fff;
  font-weight: 700;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
}
.about-left {
  min-width: 0;
}

/* 正文：行高放宽到 1.95，中文长文更好读 */
.about-body p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.95;
  max-width: 52ch;
}
.about-body strong {
  color: var(--ink);
  font-weight: 600;
}

/* .is-draft 只是给你自己看的标记（表示这段还可以继续扩写），
   不改变任何外观，方便全文搜索「is-draft」找到可扩写的段落 */

/* 两个要点：标签 + 说明，横向排列 */
.about-points {
  display: grid;
  gap: 14px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.about-points li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 0.92rem;
  color: #c1d1e8;
}
.about-points__label {
  flex-shrink: 0;
  min-width: 64px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

/* 右侧竖版配图：4:5 比例，和长文并排时视觉更稳 */
.about-art {
  margin: 0;
  /* 桌面端跟随滚动，长文往下读时图不会先跑掉 */
  position: sticky;
  top: calc(var(--nav-h) + 28px);
}
.about-art__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
/* 图片本身偏亮（大面积的树发光），压一层很淡的暗角和底部渐变，
   让它和深色页面更融 */
.about-art__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(6, 10, 20, 0.35));
  pointer-events: none;
}
.about-art__frame::after {
  content: "";
  position: absolute;
  inset: 62% 0 0 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(6, 10, 20, 0.7));
  pointer-events: none;
}
.about-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 人物在画面中间偏下，裁切时往上留一点 */
  object-position: 50% 42%;
  transition: transform 1.2s var(--ease);
}
.about-art:hover img {
  transform: scale(1.045);
}
.about-art figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.76rem;
  color: var(--muted);
}
.about-art__tag {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: #b7c9e4;
  font-size: 0.7rem;
}

/* 三个能力点：横向三列 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(44px, 6vw, 76px);
}
.feature-card {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, rgba(22, 32, 58, 0.5), rgba(10, 15, 28, 0.4));
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.feature-card::before {
  /* 左上角的细光，卡片有小高光 */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(200px 120px at 10% 0%, rgba(127, 216, 255, 0.12), transparent 70%);
  pointer-events: none;
}
.feature-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}
.feature-card__num {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cyan);
  margin-bottom: 18px;
}
.feature-card h3 {
  font-size: 1.06rem;
  margin-bottom: 6px;
}
.feature-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   09. 部门
   --------------------------------------------------------------------------- */
.division-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}

.division-card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(22, 32, 58, 0.66), rgba(10, 15, 28, 0.66));
  border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
  overflow: hidden;
}
.division-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.division-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.division-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: var(--cyan);
  background: rgba(127, 216, 255, 0.1);
  border: 1px solid rgba(127, 216, 255, 0.22);
  flex-shrink: 0;
}
.division-head h3 {
  font-size: 1.14rem;
}
.division-en {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin: 3px 0 0;
}

/* 两张卡用同一个 16:10 的图框，卡片高度才对得齐。
   这个比例是按两张新图折中的：成绩卡是 16:9（左右各裁 5%，
   文字都在），角色设计是竖版（上下裁到腰部，保住脸和手写留言）。 */
.division-thumb {
  position: relative;
  margin: 0 0 22px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: #0a0f1c;
}
/* 封面图：统一裁切，两张卡高度才对得齐 */
.division-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.division-card:hover .division-thumb img {
  transform: scale(1.03);
}
/* 创作部那张是竖版插画，裁切从顶部开始：
   保留头发、脸和右侧的手写留言，从胸口往下切掉 */
.division-thumb--art {
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(127, 216, 255, 0.16), transparent 65%),
    linear-gradient(160deg, #101a33, #0a1020);
}
.division-thumb--art img {
  object-position: 50% 0%;
}
/* 成绩卡是 16:9 的实机截图，左边留出一点余量，
   免得「1000000pts」的首字被圆角切掉 */
.division-thumb:not(.division-thumb--art) img {
  object-position: 10% 50%;
}
.division-thumb__cap {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 10px;
  font-size: 0.66rem;
  color: #cfe0f7;
  background: rgba(6, 10, 20, 0.66);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 战队的白色字标：放在卡片标题行右侧。
   早先试过压在成绩卡左下角，但新换的实机截图整屏都是字，
   压上去会挡住「ALL PERFECT」，所以挪到干净的卡面上来。 */
.division-mark {
  margin-left: auto;
  height: 26px;
  width: auto;
  flex-shrink: 0;
  opacity: 0.9;
}

.division-desc {
  color: var(--muted);
  font-size: 0.93rem;
  margin-bottom: 18px;
}

.division-list {
  display: grid;
  gap: 9px;
  margin-bottom: 22px;
}
.division-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  color: #c3d3ea;
}
/* 用一个小菱形当列表符号，比圆点更贴合「碎片」的视觉 */
.division-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  transform: rotate(45deg);
  border-radius: 1px;
}

.division-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 22px;
}
.division-tags span {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-soft);
  color: #a9bcd9;
}

/* 底部链接推到卡片最下面，两张卡对齐 */
.division-foot {
  margin: auto 0 0;
}

/* 带箭头的文字链接 */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--cyan);
}
.link-arrow::after {
  content: "→";
  transition: transform 0.25s var(--ease);
}
.link-arrow:hover::after {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------------------
   10. 世界观
   --------------------------------------------------------------------------- */
.world {
  position: relative;
  padding-block: clamp(76px, 10vw, 132px);
  overflow: hidden;
  /* 上下淡入淡出，和相邻区块自然衔接 */
  background:
    radial-gradient(720px 400px at 50% 30%, rgba(90, 140, 255, 0.15), transparent 70%),
    linear-gradient(180deg, transparent, rgba(9, 14, 28, 0.85) 32%, rgba(9, 14, 28, 0.85) 72%, transparent);
  border-block: 1px solid var(--line-soft);
}

/* 背景里一圈很淡的巨环：给纯文字区块一点结构感，
   比拉一堆星座线干净得多（之前的连线会横穿卡片，显得很乱） */
.world::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6%;
  width: min(760px, 66vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(127, 216, 255, 0.05);
  box-shadow: inset 0 0 120px rgba(90, 140, 255, 0.05);
  pointer-events: none;
}

.world-inner {
  max-width: 720px;
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.world-inner .section-kicker {
  justify-content: center;
}

.world-quote {
  margin: 0 0 20px;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.01em;
  background: linear-gradient(115deg, #ffffff 8%, #b9d8ff 56%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}

.world-desc {
  color: var(--muted);
  margin: 0 auto;
  max-width: 46ch;
  font-size: 0.95rem;
}

/* 三张设定卡 = 三个「编写位」 */
.lore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
}
.lore-card {
  padding: 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: rgba(12, 18, 34, 0.55);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.lore-card:hover {
  border-color: var(--line-strong);
  background: rgba(16, 24, 44, 0.7);
}
.lore-card__label {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #cfe1ff;
}

/* 「内容编写中」的虚线框：页面上明确留白，等正文填进来 */
.slot {
  padding: 16px 16px 4px;
  border-radius: 10px;
  border: 1px dashed rgba(140, 180, 255, 0.24);
  background: rgba(127, 216, 255, 0.025);
}
.slot__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 8px;
}
.slot__tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(255, 207, 107, 0.8);
}
.slot p {
  margin: 0 0 12px;
  font-size: 0.86rem;
  color: rgba(148, 166, 198, 0.85);
  line-height: 1.7;
}

.world-status {
  margin: 28px 0 0;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   11. 作品
   --------------------------------------------------------------------------- */
.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}

.work {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(13, 19, 36, 0.6);
  border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.work:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
}

/* 主推作品：横向大卡，图片在左文字在右 */
.work--large {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.22fr 1fr;
}

.work-media {
  position: relative;
  overflow: hidden;
}
.work-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.work:hover .work-media img {
  transform: scale(1.04);
}
/* 统一图片比例，两张小卡的高度才会一致。
   大卡用原图的真实比例（1516×912），否则 16:10 会从两侧裁掉几个像素，
   正好把曲绘右下角的「MCA COLLECTION #01」切掉最后一格。 */
.work--large .work-media img {
  aspect-ratio: 1516 / 912;
}
.work:not(.work--large) .work-media img {
  aspect-ratio: 16 / 10;
}

/* 图片左上角的小角标 */
.work-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 11px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #04121f;
  background: linear-gradient(135deg, var(--cyan), #a8e4ff);
  border-radius: 6px;
}

/* 封面上的播放按钮：跳到 B 站投稿。
   放在右上角，和左上角的分类角标形成一条"卡片头部"，
   也不会压住曲绘右下角的「MCA COLLECTION #01」和成绩卡里的人物。 */
.play-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #eaf2ff;
  background: rgba(8, 12, 22, 0.72);
  border: 1px solid rgba(160, 200, 255, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease),
    background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.play-btn svg {
  width: 12px;
  height: 12px;
  fill: var(--cyan);
  flex-shrink: 0;
  transition: fill 0.25s var(--ease);
}
.play-btn:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
  background: rgba(12, 22, 40, 0.88);
  color: #fff;
}
.play-btn:hover svg {
  fill: #b6ecff;
}
/* 鼠标移到整张卡片上时，按钮也跟着亮，提示这里可以点 */
.work:hover .play-btn {
  border-color: rgba(127, 216, 255, 0.6);
}

.work-body {
  padding: clamp(20px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
}
.work--large .work-body {
  justify-content: center;
}

.work-meta {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--cyan);
  margin-bottom: 10px;
}
.work-title {
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  margin-bottom: 10px;
}
.work-desc {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 18px;
}

/* 曲目信息表：字段先摆好，等真实资料再填 */
.work-facts {
  margin: 0 0 20px;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}
.work-facts > div {
  display: flex;
  justify-content: space-between;
  /* 值换行时，第一行和左边的标签对齐，不要整体飘到中间 */
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.82rem;
}
.work-facts dt {
  color: var(--muted);
  flex: 0 0 auto;
}
.work-facts dd {
  margin: 0;
  color: #d7e3f7;
  text-align: right;
  min-width: 0;
}
/* 表格里的外链（目前是「试听」那一行）：用主色 + 细下划线，
   和纯文字的值区分开，但不至于抢过标题 */
.work-facts dd a.ext-link {
  color: var(--cyan);
  border-bottom: 1px solid rgba(127, 216, 255, 0.35);
  padding-bottom: 1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.work-facts dd a.ext-link:hover {
  color: #b6ecff;
  border-bottom-color: var(--cyan);
}

.work-link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--cyan);
  border-bottom: 1px solid rgba(127, 216, 255, 0.4);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
/* 跳到外部站点（B 站）时加个箭头，提示会开新标签页 */
.work-link[target="_blank"]::after {
  content: "↗";
  margin-left: 5px;
  font-size: 0.92em;
  opacity: 0.85;
}
.work-link:hover {
  color: #b6ecff;
  border-bottom-color: var(--cyan);
}
/* 大卡内容本来就居中，链接不用再推到最底 */
.work--large .work-link {
  margin-top: 4px;
}
/* 还没开放的功能用这个类：明确显示为禁用状态，避免点了没反应。
   目前站内的 B 站链接都已经接通，「导览到b站官号」不再用它，
   规则留着，以后加新作品但还没有链接时可以继续用。 */
.work-link.is-disabled {
  color: var(--muted);
  border-bottom-color: var(--line-strong);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   12. 接下来（路线图）
   --------------------------------------------------------------------------- */
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
}
.roadmap-card {
  position: relative;
  padding: 26px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: rgba(11, 17, 31, 0.5);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.roadmap-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}
.roadmap-card__state {
  display: inline-block;
  margin-bottom: 16px;
  padding: 2px 9px;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.roadmap-card h3 {
  font-size: 1.02rem;
  margin-bottom: 6px;
}
.roadmap-card p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.7;
}

/* 已上线的功能卡：整张卡都可以点，状态标记换成主色 */
.roadmap-card--live {
  border-color: rgba(127, 216, 255, 0.26);
  background: linear-gradient(160deg, rgba(22, 34, 62, 0.72), rgba(10, 15, 28, 0.62));
}
.roadmap-card--live .roadmap-card__state {
  color: var(--cyan);
  border-color: rgba(127, 216, 255, 0.35);
  background: rgba(127, 216, 255, 0.08);
}
.roadmap-card--live h3 a {
  transition: color 0.2s var(--ease);
}
/* 链接只包住标题，但用伪元素把点击区域铺满整张卡 */
.roadmap-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.roadmap-card--live:hover h3 a {
  color: var(--cyan);
}

/* ---------------------------------------------------------------------------
   13. 加入
   --------------------------------------------------------------------------- */
/* 加入区下面紧接页脚，底部留白收一点，不然中间会空出一大条 */
.join {
  padding-bottom: clamp(48px, 5vw, 76px);
}

.join-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}

.join-card {
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(22, 32, 58, 0.66), rgba(10, 15, 28, 0.66));
  border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
}
.join-card:hover {
  border-color: var(--line-strong);
}
.join-card h3 {
  font-size: 1.14rem;
  margin-bottom: 10px;
}
.join-desc {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 22px;
  /* 两张卡并排时，一边描述两行、一边一行，会让下面的「招新渠道…」
     整体错开 20 多像素。给描述留出两行的最小高度，两张卡的行首就能对齐。 */
  min-height: 3.5em;
}

.join-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  color: var(--gold);
  margin-bottom: 12px;
}
.join-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(255, 207, 107, 0.7);
}

/* 定义列表：标签在左，值在右。
   早期值都是「待公布」这种两三个字，用 flex 两端对齐刚好；
   现在填的是「加入群聊：940410523」这种句子，右对齐会把长句挤成
   好几行、还跟左边的标签隔开老远，所以改成两列网格、值靠左。 */
.join-facts {
  margin: 0;
  display: grid;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.join-facts > div {
  display: grid;
  /* 4.6em 刚好放得下「招新渠道 / 作品要求 / 考核方式 / 成绩要求」四字标签 */
  grid-template-columns: 4.6em 1fr;
  gap: 14px;
  align-items: start;
  font-size: 0.88rem;
}
.join-facts dt {
  color: var(--muted);
  /* 和右边的值对齐到同一条基线上 */
  line-height: 1.75;
}
.join-facts dd {
  margin: 0;
  text-align: left;
  color: #d7e3f7;
  line-height: 1.75;
}

/* 这两处现在填的都是真实内容（群号、考核方式、试听方式），
   不再是「待补充」，所以去掉占位用的金色虚线下划线，
   否则会看着像还没填完，长句换行时下划线还会断成好几截。 */
.join-facts dd.is-pending,
.work-facts dd.is-pending {
  border-bottom: 0;
}

/* 提示框 */
.notice {
  margin-top: clamp(24px, 3vw, 36px);
  padding: 22px 26px;
  border-radius: var(--radius-sm);
  background: rgba(127, 216, 255, 0.05);
  border: 1px solid rgba(127, 216, 255, 0.18);
  border-left: 3px solid var(--cyan);
}
.notice strong {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 4px;
}
.notice p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

/* ---------------------------------------------------------------------------
   14. 页脚
   --------------------------------------------------------------------------- */
.site-footer {
  /* 和上面的「加入」区块不要拉开太大的空档 */
  margin-top: clamp(8px, 1.5vw, 24px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, transparent, rgba(6, 9, 17, 0.92));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 40px;
}

.footer-logo {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.footer-logo span {
  color: var(--cyan);
}
.footer-blurb {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0;
}
.footer-slogan {
  margin: 20px 0 0;
  font-size: 0.64rem;
  letter-spacing: 0.34em;
  color: rgba(148, 166, 198, 0.5);
}

.footer-links,
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-links h4,
.footer-contact h4 {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.footer-links a,
.footer-contact a {
  font-size: 0.9rem;
  color: #c3d3ea;
  width: fit-content;
  transition: color 0.2s var(--ease);
}
.footer-links a:hover,
.footer-contact a:hover {
  color: var(--cyan);
}
.footer-note {
  font-size: 0.78rem;
  color: rgba(148, 166, 198, 0.7);
  margin: 2px 0 0;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.82rem;
  color: rgba(148, 166, 198, 0.85);
}
/* 页脚底部：协议链接 */
.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.78rem;
  color: rgba(148, 166, 198, 0.75);
}

.footer-legal-links a {
  color: rgba(176, 196, 226, 0.9);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.footer-legal-links a:hover {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-copy,
.footer-icp {
  margin: 0;
}
.footer-icp a {
  transition: color 0.2s var(--ease);
}
.footer-icp a:hover {
  color: var(--cyan);
}

.footer-legal {
  padding-bottom: 32px;
  font-size: 0.76rem;
  color: rgba(148, 166, 198, 0.5);
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   15. 返回顶部
   --------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 34px);
  z-index: 90;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(13, 19, 36, 0.8);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.to-top:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* ---------------------------------------------------------------------------
   16. 滚动进场动画
   注意这里的思路：默认状态是「可见」，只有 html 上被 JS 加了 .js 类之后才隐藏。
   这样万一脚本没加载成功（比如被拦截、报错），页面内容也不会整页空白。
   --------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------------
   17. 响应式
   --------------------------------------------------------------------------- */

/* 平板横屏：导航收紧，标题说明改为上下排 */
@media (max-width: 1024px) {
  .site-nav a {
    padding: 8px 10px;
    font-size: 0.88rem;
  }
  .hero-grid {
    min-height: auto;
    padding-block: 20px 0;
  }
  .section-head--row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .section-desc--side {
    text-align: left;
    max-width: 54ch;
  }
  .about-art {
    position: static;   /* 窄屏关掉 sticky，避免和上方内容重叠 */
  }
}

/* 平板竖屏 / 手机横屏：主体改为单列 */
@media (max-width: 900px) {
  .hero-grid,
  .about-grid {
    grid-template-columns: 1fr;
  }
  /* 手机上先看图再看字，首屏更有画面感 */
  .hero-art {
    order: -1;
    min-height: 0;
    margin-bottom: 4px;
  }
  .hero-img {
    width: min(380px, 74%);
  }
  .float-card {
    /* 手机屏幕太窄，浮动卡会压在角色脸上，直接不显示；
       这块信息在下面的作品区也能看到 */
    display: none;
  }
  .hero-watermark {
    font-size: 34vw;
    top: 4%;
    right: -6%;
  }

  .about-art__frame {
    aspect-ratio: 16 / 11;   /* 单列时改成横图，不占太多屏 */
  }

  .division-grid,
  .join-grid,
  .works-grid {
    grid-template-columns: 1fr;
  }
  .feature-grid,
  .lore-grid,
  .roadmap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 大卡在单列下改成上下排 */
  .work--large {
    grid-template-columns: 1fr;
  }
  .work--large .work-media img {
    aspect-ratio: 16 / 10;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* 手机：顶部导航收进侧栏抽屉，避免和账号入口挤成一行 */
@media (max-width: 900px) {
  .site-nav {
    display: none;
  }
  .header-inner {
    justify-content: space-between;
  }
}

/* 手机：导航直接排成一行常驻在顶部。
   不做汉堡菜单，是因为这一步一旦依赖 JS，App 内置浏览器禁用脚本时
   整条导航就会错位、压在内容上。常驻一行也省一次点击。 */
@media (max-width: 760px) {
  /* 手机上也保留「加入我们」这个入口（导航里已经没有「加入」了），
     所以按钮要压紧一点，和四个链接挤在一行里。
     用 .site-header 提一级优先级，否则会被下面 560px 的 .btn 规则改大。 */
  .site-header .header-cta {
    display: inline-flex;
    padding: 7px 10px;
    font-size: 0.78rem;
    flex-shrink: 0;
  }

  .header-inner {
    gap: 8px;
  }

  .site-nav {
    margin-left: auto;
    gap: 0;
    /* 极窄屏（320 左右）放不下时可以横向滑动 */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav::-webkit-scrollbar {
    display: none;
  }
  .site-nav a {
    flex: 0 0 auto;
    padding: 8px 5px;
    font-size: 0.8rem;
    white-space: nowrap;
  }
  .site-nav a.is-active::after {
    display: none;
  }
  .site-nav a.is-active {
    color: var(--cyan);
  }
}

@media (max-width: 560px) {
  :root {
    --nav-h: 64px;
    --radius: 18px;
  }
  /* 手机上给导航留空间，标志缩到 26px */
  .brand-logo {
    height: 26px;
  }
  /* 卡片标题行变窄，队徽跟着收一点，避免把标题挤到换行 */
  .division-mark {
    height: 22px;
  }
  .hero-title {
    font-size: 1.9rem;
  }
  .btn {
    padding: 12px 20px;
    font-size: 0.9rem;
  }
  .hero-actions .btn {
    flex: 1 1 auto;
  }
  /* 手机上三列太挤，全部改单列 */
  .feature-grid,
  .lore-grid,
  .roadmap-grid {
    grid-template-columns: 1fr;
  }
  .about-art figcaption {
    font-size: 0.72rem;
  }
  .br-pc {
    display: none;   /* 手机屏窄，去掉强制换行让文字自然流 */
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .world-quote {
    font-size: 1.28rem;
  }
  .section-kicker {
    font-size: 0.7rem;
  }
}

/* ---------------------------------------------------------------------------
   18. 无障碍：系统开启「减少动态效果」时，关掉所有动画
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .stars,
  .hero-ring,
  .marquee__track,
  .float-card {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
   19. 打印样式（顺手加一个，方便直接把企划介绍打出来）
   --------------------------------------------------------------------------- */
@media print {
  .bg,
  .site-header,
  .to-top,
  .marquee,
  .hero-watermark {
    display: none !important;
  }
  body {
    background: #fff;
    color: #111;
  }
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* --- 权限提示 ------------------------------------------------------------ */
.mca-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translate(-50%, 16px);
  padding: 11px 22px;
  border-radius: 999px;
  background: rgba(12, 18, 34, 0.95);
  border: 1px solid rgba(255, 199, 64, 0.35);
  color: #ffd76a;
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  z-index: 999;
}
.mca-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.deny-panel {
  padding: 56px 24px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px dashed var(--line);
  background: rgba(12, 18, 34, 0.6);
}
.deny-panel__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffd76a;
  margin-bottom: 8px;
}
.deny-panel__desc {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
}


/* --- 审核台入口 + 角标 --------------------------------------------------- */
.side-nav__link--admin {
  color: #ffd76a !important;
}
.pending-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #0b1020;
  background: #c3cddd;
  vertical-align: middle;
}
.pending-badge.is-hot {
  background: #ff6b6b;
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.6);
}


/* --- 顶部小头像 ---------------------------------------------------------- */
.header-avatar {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(127, 216, 255, 0.15);
  border: 1px solid rgba(127, 216, 255, 0.35);
  margin-right: 8px;
  vertical-align: middle;
}
.header-auth {
  display: inline-flex;
  align-items: center;
}


/* ---------------------------------------------------------------------------
   首次加载遮罩
   ------------------------------------------------------------------------ */
#boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #060912;
  transition: opacity 0.5s ease;
}
#boot-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.boot-screen__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
}
.boot-screen__ring {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(127, 216, 255, 0.18);
  border-top-color: #7fdcff;
  animation: boot-spin 0.9s linear infinite;
}
@keyframes boot-spin {
  to { transform: rotate(360deg); }
}
.boot-screen__text {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(160, 185, 215, 0.8);
  text-align: center;
}


/* ---------------------------------------------------------------------------
   滚动条：跟着主题走（默认亮白滚动条在深色背景上太跳）
   ------------------------------------------------------------------------ */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 216, 255, 0.45) rgba(8, 13, 24, 0.9);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(8, 13, 24, 0.9);
}
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid rgba(8, 13, 24, 0.9);
  background: linear-gradient(180deg, rgba(127, 216, 255, 0.55), rgba(96, 140, 220, 0.45));
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(155, 231, 255, 0.8), rgba(120, 170, 255, 0.65));
}
::-webkit-scrollbar-corner {
  background: transparent;
}

.side-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 216, 255, 0.5) transparent;
}
.side-nav::-webkit-scrollbar {
  width: 6px;
}
.side-nav::-webkit-scrollbar-track {
  background: transparent;
}
.side-nav::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 999px;
  background: rgba(127, 216, 255, 0.45);
}
.side-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(155, 231, 255, 0.7);
}

.score-editor,
.wiki-dial__sheet,
.wiki-wheel__panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 216, 255, 0.5) transparent;
}
.score-editor::-webkit-scrollbar,
.wiki-dial__sheet::-webkit-scrollbar,
.wiki-wheel__panel::-webkit-scrollbar {
  width: 6px;
}
.score-editor::-webkit-scrollbar-thumb,
.wiki-dial__sheet::-webkit-scrollbar-thumb,
.wiki-wheel__panel::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 999px;
  background: rgba(127, 216, 255, 0.45);
}


/* --- 顶栏北京时间 ---------------------------------------------------------- */
.header-clock {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(127, 216, 255, 0.18);
  background: rgba(8, 14, 26, 0.55);
  color: rgba(180, 205, 235, 0.85);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .header-clock {
    display: none;   /* 手机顶栏本来就挤，时间交给设备状态栏 */
  }
}


/* --- 入队要求里的外链（协作文档） ------------------------------------------ */
.join-doc-link {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(127, 216, 255, 0.4);
  transition: color 0.18s var(--ease), text-decoration-color 0.18s var(--ease);
}
.join-doc-link:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}