/* ============================================================
   《冰船》FROSTCRAFT SHIP · 官网样式
   视觉基调：极夜冰海 / 冰晶几何 / 星空与黑帆剪影
   配色取自真实素材：logo（冰蓝+深蓝）、卡背（藏蓝→薰衣草）、
   卡面（攻=朱砂 / 装=黄绿 / 人物=金 / 基地=青蓝）
   ============================================================ */

/* ---------- 1. 变量 ---------- */
:root {
  /* 海与夜 */
  --abyss:  #05091a;
  --deep:   #0a1230;
  --navy:   #111c46;
  --indigo: #1b2a5e;
  --steel:  #3a4d84;

  /* 冰 */
  --ice:    #8fd4ee;
  --ice-lt: #cdeef9;
  --frost:  #eaf7fc;

  /* 星与紫 */
  --lav:    #9b8fd6;
  --lav-lt: #c9bfea;

  /* 分类色（对齐真实卡面） */
  --t-attack:    #e0705a;
  --t-event:     #b98ad8;
  --t-equipment: #a8c66c;
  --t-support:   #5fc0d4;
  --t-character: #d9b45e;
  --t-base:      #6fb6d8;
  --gold:        #d9b45e;

  /* 低胜率 / 警示（低数值条形与排名条目） */
  --coral:       #e0705a;
  --coral-deep:  #b85744;

  /* 文本 */
  --text:  #e3edf7;
  --mist:  rgba(206, 226, 244, .74);
  --dim:   rgba(206, 226, 244, .48);
  --faint: rgba(206, 226, 244, .3);

  /* 线与面 */
  --line:  rgba(143, 212, 238, .16);
  --line-2:rgba(143, 212, 238, .3);
  --glass: rgba(16, 28, 70, .42);
  --glass-2: rgba(12, 22, 56, .62);

  --f-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif CN',
             'Songti SC', 'STSong', 'SimSun', Georgia, serif;
  --f-brush: 'Ma Shan Zheng', 'STKaiti', 'KaiTi', 'Noto Serif SC', serif;
  --f-latin: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
             'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  --wrap: 1240px;
  --nav-h: 74px;
  --ease: cubic-bezier(.22, .68, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2. 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--abyss);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.85;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.3; }
p { margin: 0 0 1.05em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

::selection { background: var(--ice); color: var(--abyss); }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 4px; }

/* 霜雾遮罩：噪点 + 暗角 */
.frost-veil {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}
.frost-veil::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 42%, rgba(5, 9, 26, .55) 100%);
  mix-blend-mode: multiply;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--ice); color: var(--abyss); padding: 10px 18px;
}
.skip-link:focus { left: 0; }

/* ---------- 3. 通用 ---------- */
.wrap { width: min(100% - 2.6rem, var(--wrap)); margin-inline: auto; }

.section { position: relative; padding: clamp(4.5rem, 9vw, 8.5rem) 0; overflow: hidden; }

.bg-layer {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .3;
  pointer-events: none;
  z-index: 0;
}
.bg-layer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--abyss) 0%, rgba(5,9,26,.72) 22%, rgba(5,9,26,.72) 78%, var(--abyss) 100%);
}
.bg-layer--rules  { background-image: url('../img/bg-frozen-sea.jpg'); }
.bg-layer--prim   { background-image: url('../img/bg-star-crystal.jpg'); opacity: .38; }
.bg-layer--lab    { background-image: url('../img/bg-compass.jpg'); }
.bg-layer--road   { background-image: url('../img/bg-frozen-sea.jpg'); opacity: .22; }
.bg-layer--join   { background-image: url('../img/bg-break-ice.jpg'); opacity: .55; }
.bg-layer--join::after {
  background: linear-gradient(180deg, var(--abyss) 0%, rgba(10,18,48,.6) 30%, rgba(5,9,26,.9) 100%);
}
.section > .wrap { position: relative; z-index: 1; }

/* 按钮 */
.btn {
  --bg: transparent; --fg: var(--text); --bd: var(--line-2);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .5em; padding: .9em 2.2em;
  border: 1.5px solid var(--bd); border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font-family: var(--f-serif); font-weight: 500; font-size: 1rem; letter-spacing: .16em;
  cursor: pointer; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover { transform: translateY(-3px); }
.btn--primary {
  --bg: linear-gradient(135deg, var(--ice-lt), var(--ice));
  --fg: #06121f; --bd: transparent;
  box-shadow: 0 14px 34px -18px rgba(143, 212, 238, .85);
}
.btn--primary:hover { box-shadow: 0 20px 44px -16px rgba(143, 212, 238, .9); }
.btn--ghost { --fg: var(--mist); }
.btn--ghost:hover { --bd: var(--ice); --fg: var(--frost); }
.btn--sm { padding: .58em 1.5em; font-size: .84rem; }

.icon-btn {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line);
  background: rgba(143, 212, 238, .06);
  color: var(--mist); cursor: pointer;
  transition: all .3s var(--ease);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { border-color: var(--ice); color: var(--ice); }
.icon-btn[aria-pressed="true"] {
  background: rgba(143, 212, 238, .16); border-color: var(--ice); color: var(--ice-lt);
}
.icon-btn .icon-btn__alt { display: none; }
.icon-btn[aria-pressed="false"] .icon-btn__alt { display: block; }
.icon-btn[aria-pressed="false"] > svg:first-of-type { display: none; }

/* 章节标题 */
.sec-head { margin-bottom: clamp(2.4rem, 5vw, 4rem); max-width: 780px; }
.sec-head--center { text-align: center; margin-inline: auto; }
.sec-head__eyebrow {
  font-family: var(--f-latin); font-size: .76rem;
  letter-spacing: .46em; text-transform: uppercase;
  color: var(--ice); opacity: .85; margin-bottom: .7rem;
}
.sec-head__title {
  font-family: var(--f-serif); font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  letter-spacing: .1em; margin-bottom: .85rem;
  background: linear-gradient(180deg, var(--frost) 30%, rgba(205, 238, 249, .6));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec-head__sub { color: var(--mist); font-size: 1.02rem; margin: 0; max-width: 54ch; }

.block-title {
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  letter-spacing: .18em; text-align: center;
  margin: clamp(3rem, 6vw, 5rem) 0 clamp(1.6rem, 3vw, 2.4rem);
  color: var(--ice-lt);
}
.block-title--left { text-align: left; }
.block-title::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 26px; height: 1px; background: var(--ice); opacity: .6;
  margin-right: .9rem;
}
.block-title--left::before { display: none; }

/* 通用面板 */
.panel {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(10px);
}
.panel__title {
  font-family: var(--f-serif); font-weight: 700;
  font-size: 1.05rem; letter-spacing: .18em; color: var(--ice-lt);
  margin-bottom: .4rem;
}
.panel__note { font-size: .84rem; color: var(--dim); margin-bottom: 1.2rem; }

/* ---------- 4. 导航 ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h); display: flex; align-items: center;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.is-stuck {
  background: rgba(6, 12, 32, .82);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 rgba(143, 212, 238, .1), 0 16px 40px -30px #000;
}
.nav__inner {
  width: min(100% - 2.6rem, var(--wrap)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: .65rem; }
.brand__mark { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 0 14px rgba(143,212,238,.45)); }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__text b { font-family: var(--f-brush); font-size: 1.5rem; letter-spacing: .1em; color: var(--frost); }
.brand__text i {
  font-family: var(--f-latin); font-style: normal;
  font-size: .5rem; letter-spacing: .24em; color: var(--faint);
}

.nav__links { display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.6rem); }
.nav__links a:not(.btn) {
  position: relative; font-family: var(--f-serif);
  font-size: .92rem; letter-spacing: .12em; color: var(--mist);
  padding: .3em 0; transition: color .3s var(--ease);
}
.nav__links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--ice);
  transform: scaleX(0); transform-origin: left;
  transition: transform .38s var(--ease);
}
.nav__links a:not(.btn):hover,
.nav__links a:not(.btn).is-active { color: var(--frost); }
.nav__links a:not(.btn):hover::after,
.nav__links a:not(.btn).is-active::after { transform: scaleX(1); }

.nav__toggle {
  display: none; width: 42px; height: 42px;
  border: 0; background: none; padding: 0; cursor: pointer; position: relative;
}
.nav__toggle span {
  position: absolute; left: 9px; width: 24px; height: 1.8px;
  background: var(--ice-lt); border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s var(--ease), top .35s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 14px; }
.nav__toggle span:nth-child(2) { top: 20px; }
.nav__toggle span:nth-child(3) { top: 26px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

/* ---------- 5. 首屏 ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 3rem) 0 0;
  overflow: hidden; isolation: isolate;
}
.hero__bg {
  position: absolute; inset: -4% 0 0; z-index: -2;
  background: url('../img/hero-bg01.jpg') center 34% / cover no-repeat;
  animation: kenburns 30s ease-in-out infinite alternate;
}

/* 月晕：与画面中的月亮对齐，呼吸式辉光 */
.hero__moon {
  position: absolute; z-index: -2;
  left: 36.5%; top: 23%;
  width: 23vw; height: 23vw;
  max-width: 330px; max-height: 330px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(226, 242, 255, .30) 0%, rgba(176, 204, 255, .13) 44%, rgba(155, 143, 214, .05) 62%, transparent 74%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: moonPulse 8s ease-in-out infinite alternate;
}
@keyframes moonPulse {
  from { transform: scale(1) translate3d(0, 0, 0); opacity: .72; }
  to   { transform: scale(1.08) translate3d(0, -1.5%, 0); opacity: 1; }
}

/* 云海雾气：两层反向漂移 */
.hero__mist {
  position: absolute; left: -34%; right: -34%; bottom: -6%;
  height: 52%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 108% at 22% 100%, rgba(143, 212, 238, .10), transparent 72%),
    radial-gradient(ellipse 52% 108% at 78% 100%, rgba(155, 143, 214, .11), transparent 74%);
  filter: blur(46px);
  opacity: .5;
  animation: mistDrift 38s linear infinite alternate;
}
.hero__mist--b {
  opacity: .38;
  filter: blur(64px);
  animation-duration: 56s;
  animation-direction: alternate-reverse;
}
@keyframes mistDrift {
  from { transform: translate3d(-3.5%, 0, 0) scale(1); }
  to   { transform: translate3d(3.5%, -1.6%, 0) scale(1.07); }
}
@keyframes kenburns {
  from { transform: scale(1.02) translateY(0); }
  to   { transform: scale(1.1) translateY(-2%); }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 72% 58% at 50% 44%, rgba(5,9,26,.30) 0%, rgba(5,9,26,.58) 58%, rgba(5,9,26,.88) 100%),
    linear-gradient(180deg, rgba(5,9,26,.66) 0%, transparent 20%, transparent 54%, rgba(5,9,26,.93) 100%);
}

.hero__inner { text-align: center; padding: 0 1.3rem; }
.hero__eyebrow {
  font-family: var(--f-serif); font-size: .82rem;
  letter-spacing: .38em; color: var(--ice-lt);
  opacity: .9; margin-bottom: 1.2rem;
  text-shadow: 0 2px 18px rgba(5, 9, 26, .9);
}
.hero__title {
  font-family: var(--f-brush);
  font-size: clamp(4.4rem, 15vw, 10rem);
  line-height: .95; letter-spacing: .06em;
  margin: 0 0 .2rem;
  color: var(--frost);
  text-shadow:
    0 0 40px rgba(143, 212, 238, .38),
    0 0 90px rgba(155, 143, 214, .3),
    0 6px 30px rgba(5, 9, 26, .9);
}
.hero__latin {
  font-family: var(--f-latin); font-size: clamp(.6rem, 1.5vw, .92rem);
  letter-spacing: .48em; color: var(--ice); opacity: .82;
  margin-bottom: 1.6rem;
}
.hero__lead {
  font-family: var(--f-serif);
  font-size: clamp(1rem, 2.2vw, 1.24rem);
  letter-spacing: .2em; line-height: 2.15;
  color: var(--frost); opacity: .92; margin-bottom: 2.2rem;
  text-shadow: 0 2px 20px rgba(5, 9, 26, .95);
}
.hero__cta { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.3rem; }
.hero__note {
  font-size: .78rem; letter-spacing: .26em; color: var(--dim);
  text-shadow: 0 2px 14px rgba(5, 9, 26, .9); margin: 0;
}

.hero__stats {
  position: relative; z-index: 1;
  width: min(100% - 2.6rem, var(--wrap)); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(10, 18, 48, .35), transparent);
}
.hero__stats li {
  padding: 1.4rem .8rem 1.8rem;
  text-align: center;
  border-right: 1px solid var(--line);
}
.hero__stats li:last-child { border-right: 0; }
.hero__stats b {
  display: block;
  font-family: var(--f-latin); font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--ice-lt); line-height: 1.1;
}
.hero__stats b i {
  font-style: normal; font-family: var(--f-serif);
  font-size: .8rem; letter-spacing: .1em; color: var(--ice); margin-left: .2em; opacity: .8;
}
.hero__stats span {
  display: block; font-family: var(--f-serif);
  font-size: .92rem; letter-spacing: .16em; margin: .35rem 0 .3rem; color: var(--text);
}
.hero__stats small { display: block; font-size: .72rem; color: var(--faint); line-height: 1.6; }

.hero__scroll {
  position: absolute; bottom: 1.2rem; left: 50%; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  font-size: .66rem; letter-spacing: .3em; color: var(--faint); text-transform: uppercase;
}
.hero__scroll span {
  width: 1px; height: 34px;
  background: linear-gradient(var(--ice), transparent);
  animation: drop 2.4s var(--ease) infinite;
}
@keyframes drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- 6. 双资源 ---------- */
.res__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.res {
  position: relative; padding: clamp(1.8rem, 3.5vw, 2.8rem);
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--glass); backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform .45s var(--ease-out), border-color .45s var(--ease);
}
.res:hover { transform: translateY(-6px); border-color: var(--line-2); }
.res::before {
  content: ''; position: absolute; top: -40%; right: -20%;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(143,212,238,.16), transparent 70%);
}
.res__big {
  font-family: var(--f-latin); font-size: clamp(3.4rem, 8vw, 5.4rem);
  line-height: .9; color: var(--ice-lt); margin: 0;
  text-shadow: 0 0 40px rgba(143, 212, 238, .35);
}
.res--gold .res__big { color: var(--gold); text-shadow: 0 0 40px rgba(217, 180, 94, .35); }
.res__name {
  font-family: var(--f-serif); font-size: 1.2rem;
  letter-spacing: .2em; margin: .5rem 0 .7rem;
}
.res__desc { color: var(--mist); font-size: .95rem; }
.res__cost { margin: 1.1rem 0 0; display: grid; gap: .5rem; }
.res__cost li {
  position: relative; padding-left: 1.3rem;
  font-size: .88rem; color: var(--dim);
}
.res__cost li::before {
  content: ''; position: absolute; left: 0; top: .78em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ice); opacity: .55;
}
.res--gold .res__cost li::before { background: var(--gold); }

/* ---------- 7. 回合时序 ---------- */
.phase__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.8rem); }
.phase {
  position: relative; padding: 2rem 1.7rem;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--glass-2); backdrop-filter: blur(10px);
  transition: transform .4s var(--ease-out), border-color .4s var(--ease);
}
.phase:hover { transform: translateY(-5px); border-color: var(--line-2); }
.phase__no {
  font-family: var(--f-latin); font-size: 2.6rem;
  color: rgba(143, 212, 238, .22); line-height: 1; margin-bottom: .4rem;
}
.phase__name { font-family: var(--f-serif); font-size: 1.16rem; letter-spacing: .2em; margin-bottom: .2rem; }
.phase__latin { font-family: var(--f-latin); font-size: .6rem; letter-spacing: .3em; color: var(--ice); opacity: .7; margin-bottom: .9rem; }
.phase__desc { font-size: .93rem; color: var(--mist); }
.phase__warn {
  margin: 1rem 0 0; padding: .8rem 1rem;
  border-left: 2px solid var(--coral);
  background: rgba(224, 112, 90, .08);
  border-radius: 0 8px 8px 0;
  font-size: .83rem; color: rgba(255, 220, 212, .82); line-height: 1.8;
}

/* ---------- 8. 收工博弈 ---------- */
.ending__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.8rem); }
.ending {
  padding: 2rem 1.9rem;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--glass); backdrop-filter: blur(10px);
  position: relative; overflow: hidden;
}
.ending::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 0% 0%, rgba(143,212,238,.1), transparent 60%);
  pointer-events: none;
}
.ending--gold::after { background: radial-gradient(120% 90% at 0% 0%, rgba(217,180,94,.12), transparent 60%); }
.ending__name { font-family: var(--f-serif); font-size: 1.35rem; letter-spacing: .18em; }
.ending__latin { font-family: var(--f-latin); font-size: .6rem; letter-spacing: .3em; color: var(--ice); opacity: .7; margin-bottom: .9rem; }
.ending__tag {
  display: inline-block; font-size: .74rem; letter-spacing: .14em;
  padding: .25em .9em; border-radius: 999px; margin-bottom: 1.1rem;
  background: rgba(143,212,238,.12); color: var(--ice-lt);
}
.ending--gold .ending__tag { background: rgba(217,180,94,.14); color: #f0dca8; }
.ending__row { display: flex; gap: .8rem; align-items: flex-start; font-size: .9rem; margin-bottom: .7rem; }
.ending__row b {
  flex: none; font-family: var(--f-serif); font-weight: 500;
  font-size: .76rem; letter-spacing: .14em; padding: .15em .6em;
  border-radius: 4px; white-space: nowrap;
}
.ending__row--gain b { background: rgba(143,212,238,.16); color: var(--ice-lt); }
.ending__row--lose b { background: rgba(224,112,90,.16); color: #f3b3a4; }
.ending__row span { color: var(--mist); }

/* ---------- 9. 六种原初 ---------- */
.prim__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 1.6rem);
}
.prim {
  padding: 2rem 1.7rem;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--glass); backdrop-filter: blur(10px);
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease-out), border-color .4s var(--ease);
}
.prim:hover { transform: translateY(-5px); border-color: rgba(143,212,238,.36); }
.prim__icon {
  width: 50px; height: 50px; color: var(--ice);
  margin-bottom: 1.1rem; opacity: .9;
  filter: drop-shadow(0 0 16px rgba(143,212,238,.4));
}
.prim:nth-child(2) .prim__icon,
.prim:nth-child(4) .prim__icon { color: var(--lav-lt); filter: drop-shadow(0 0 16px rgba(201,191,234,.4)); }
.prim__name { font-family: var(--f-serif); font-size: 1.28rem; letter-spacing: .22em; }
.prim__latin { font-family: var(--f-latin); font-size: .6rem; letter-spacing: .3em; color: var(--ice); opacity: .65; margin-bottom: .9rem; }
.prim__text { font-size: .92rem; color: var(--text); margin-bottom: .7rem; }
.prim__note { font-size: .8rem; color: var(--dim); line-height: 1.8; margin: 0; }

/* 黑卡 */
.black {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: 220px 1fr;
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
  padding: clamp(1.8rem, 4vw, 3rem);
  border: 1px solid var(--line); border-radius: 22px;
  background:
    radial-gradient(ellipse at 12% 50%, rgba(155,143,214,.16), transparent 55%),
    var(--glass-2);
  backdrop-filter: blur(12px);
}
.black__art {
  width: 100%; border-radius: 14px;
  box-shadow: 0 24px 50px -26px #000, 0 0 40px -16px rgba(155,143,214,.5);
}
.black__latin { font-family: var(--f-latin); font-size: .62rem; letter-spacing: .4em; color: var(--lav-lt); margin-bottom: .3rem; }
.black__name { font-family: var(--f-serif); font-size: 1.7rem; letter-spacing: .22em; margin-bottom: .6rem; }
.black__lead { font-family: var(--f-serif); color: var(--ice-lt); font-size: 1rem; letter-spacing: .06em; margin-bottom: 1.2rem; }
.black__points { display: grid; gap: .7rem; }
.black__points li {
  position: relative; padding-left: 1.5rem;
  font-size: .91rem; color: var(--mist);
}
.black__points li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lav); box-shadow: 0 0 10px rgba(155,143,214,.8);
}

/* ---------- 10. 卡牌库 ---------- */
.section--cards { background: linear-gradient(180deg, var(--abyss) 0%, #070d24 50%, var(--abyss) 100%); }

.tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1rem; }
.tabs--sub { margin-bottom: 1.8rem; }
.tabs button {
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(16, 28, 70, .4); color: var(--mist);
  padding: .5em 1.5em; cursor: pointer;
  font-family: var(--f-serif); font-size: .9rem; letter-spacing: .14em;
  transition: all .3s var(--ease);
}
.tabs button:hover { border-color: var(--line-2); color: var(--frost); }
.tabs button.is-on {
  background: linear-gradient(135deg, rgba(143,212,238,.24), rgba(143,212,238,.1));
  border-color: var(--ice); color: var(--frost);
  box-shadow: 0 0 22px -8px rgba(143,212,238,.7);
}
.tabs button small { font-family: var(--f-latin); font-size: .68rem; opacity: .65; margin-left: .45em; }

.cards__count {
  text-align: center; font-size: .8rem; letter-spacing: .2em;
  color: var(--faint); margin-bottom: 1.6rem;
}
.cards__grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(.7rem, 1.6vw, 1.1rem);
}
.cards__grid.is-landscape { grid-template-columns: repeat(3, 1fr); }
.cards__empty { text-align: center; color: var(--dim); padding: 3rem 0; }

.card {
  position: relative; cursor: pointer;
  border-radius: 14px; overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--line);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease);
  display: flex; flex-direction: column;
}
.card:hover {
  transform: translateY(-8px);
  border-color: var(--line-2);
  box-shadow: 0 30px 56px -30px #000, 0 0 34px -14px rgba(143,212,238,.55);
}
.card__img {
  position: relative; width: 100%; display: block;
  background: linear-gradient(160deg, rgba(143,212,238,.1), rgba(155,143,214,.06));
}
.card__img img { width: 100%; height: auto; display: block; }
.card__bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .8rem; border-top: 1px solid var(--line);
}
.card__type {
  font-size: .68rem; letter-spacing: .16em; padding: .16em .6em;
  border-radius: 4px; white-space: nowrap;
  background: rgba(143,212,238,.12); color: var(--ice-lt);
}
.card[data-type="attack"]    .card__type { background: rgba(224,112,90,.16); color: #f3b3a4; }
.card[data-type="event"]     .card__type { background: rgba(185,138,216,.16); color: #d9b8ec; }
.card[data-type="equipment"] .card__type { background: rgba(168,198,108,.16); color: #d0e59a; }
.card[data-type="support"]   .card__type { background: rgba(95,192,212,.16); color: #a8e2ef; }
.card[data-type="character"] .card__type { background: rgba(217,180,94,.16); color: #eed9a0; }
.card[data-type="base"]      .card__type { background: rgba(111,182,216,.16); color: #b3dcf2; }
.card__name {
  font-family: var(--f-serif); font-size: .93rem; letter-spacing: .08em;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card__wr {
  font-family: var(--f-latin); font-size: .78rem; color: var(--ice);
  flex: none;
}
.card__wr.is-low { color: var(--coral); }
.card__mark {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-serif); font-size: .78rem;
  background: rgba(5,9,26,.78); color: var(--ice-lt);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(4px);
}
.card__mark[data-mark="召"] { color: var(--lav-lt); border-color: rgba(201,191,234,.5); }
.card__mark[data-mark="制"] { color: var(--gold); border-color: rgba(217,180,94,.5); }

/* ---------- 11. 人物与基地 ---------- */
.roster__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 1.6rem);
}
.hero-card {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--glass);
  cursor: pointer;
  transition: transform .45s var(--ease-out), border-color .45s var(--ease), box-shadow .45s var(--ease-out);
}
.hero-card:hover {
  transform: translateY(-7px);
  border-color: var(--line-2);
  box-shadow: 0 32px 58px -32px #000, 0 0 34px -16px rgba(217,180,94,.5);
}
.hero-card__img { position: relative; }
.hero-card__img img { width: 100%; height: auto; display: block; }
.hero-card__skill {
  padding: 1rem 1.2rem 1.2rem;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10,18,48,.5), rgba(10,18,48,.85));
}
.hero-card__skill b {
  display: block; font-family: var(--f-serif);
  font-size: .98rem; letter-spacing: .14em; color: var(--gold);
  margin-bottom: .3rem;
}
.hero-card__skill span { font-size: .8rem; color: var(--dim); line-height: 1.75; }
.hero-card__nums {
  position: absolute; top: 10px; left: 10px;
  display: flex; gap: .35rem;
}
.hero-card__nums i {
  font-style: normal; font-family: var(--f-latin); font-size: .7rem;
  padding: .18em .55em; border-radius: 4px;
  background: rgba(5,9,26,.72); color: var(--ice-lt);
  border: 1px solid var(--line); backdrop-filter: blur(4px);
}

.base__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.6rem); }
.base {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.2rem;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--glass); backdrop-filter: blur(8px);
  transition: transform .4s var(--ease-out), border-color .4s var(--ease);
}
.base:hover { transform: translateY(-4px); border-color: var(--line-2); }
.base__img {
  width: 74px; flex: none; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line);
}
.base__img img { width: 100%; height: auto; display: block; }
.base__body { min-width: 0; }
.base__name {
  font-family: var(--f-serif); font-size: 1.05rem; letter-spacing: .16em;
  display: flex; align-items: baseline; gap: .6rem; margin-bottom: .35rem;
}
.base__name em {
  font-style: normal; font-family: var(--f-latin);
  font-size: .76rem; color: var(--t-base); letter-spacing: .06em;
}
.base__desc { font-size: .83rem; color: var(--mist); margin: 0; line-height: 1.8; }

/* ---------- 12. 平衡实验室 ---------- */
.section--lab { background: linear-gradient(180deg, var(--abyss) 0%, #060b1e 100%); }

.metrics {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; margin-bottom: clamp(2rem, 4vw, 3rem);
  background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.metrics li {
  padding: 1.4rem 1rem; text-align: center; background: rgba(8, 14, 38, .8);
}
.metrics b {
  display: block; font-family: var(--f-latin); font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem); color: var(--ice-lt); line-height: 1.1;
}
.metrics span {
  display: block; font-family: var(--f-serif);
  font-size: .84rem; letter-spacing: .14em; margin: .4rem 0 .2rem;
}
.metrics small { display: block; font-size: .7rem; color: var(--faint); line-height: 1.5; }

.lab__cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.8rem); margin-bottom: clamp(1rem, 2.5vw, 1.8rem);
}
.lab__panel {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--glass); backdrop-filter: blur(10px);
}

/* 条形图 */
.bars { display: grid; gap: 1.05rem; }
.bar { display: grid; grid-template-columns: 88px 1fr 62px; gap: .9rem; align-items: center; }
.bar__label { font-family: var(--f-serif); font-size: .92rem; letter-spacing: .1em; }
.bar__track {
  position: relative; height: 9px; border-radius: 99px;
  background: rgba(143, 212, 238, .1); overflow: hidden;
}
.bar__track::after {
  content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px;
  width: 1px; background: rgba(206,226,244,.28);
}
.bar__fill {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--ice), var(--lav));
  width: 0; transition: width 1.1s var(--ease-out);
  box-shadow: 0 0 14px -2px rgba(143,212,238,.7);
}
.bar__val { font-family: var(--f-latin); font-size: .88rem; color: var(--ice-lt); text-align: right; }
.bars--sm .bar { grid-template-columns: 84px 1fr 56px; }
.bars--sm .bar__label { font-size: .85rem; }
.bars--sm .bar__track { height: 7px; }
.bar.is-low .bar__fill { background: linear-gradient(90deg, var(--coral), #b85744); box-shadow: 0 0 14px -2px rgba(224,112,90,.7); }
.bar.is-low .bar__val { color: #f3b3a4; }
.bar.is-high .bar__fill { background: linear-gradient(90deg, var(--gold), var(--ice)); }

/* 排名 */
.rank { display: grid; gap: .55rem; }
.rank__item {
  display: grid; grid-template-columns: 30px 1fr auto; gap: .8rem; align-items: center;
  padding: .55rem .7rem; border-radius: 9px;
  background: rgba(143,212,238,.04);
  border-left: 2px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.rank__item:hover { background: rgba(143,212,238,.1); }
.rank__item.is-low { border-left-color: var(--coral); }
.rank__item.is-high { border-left-color: var(--gold); }
.rank__no { font-family: var(--f-latin); font-size: .76rem; color: var(--faint); }
.rank__name { font-family: var(--f-serif); font-size: .95rem; letter-spacing: .08em; }
.rank__meta { font-size: .7rem; color: var(--faint); margin-left: .5rem; letter-spacing: .1em; }
.rank__val { font-family: var(--f-latin); font-size: .88rem; color: var(--ice-lt); }
.rank__item.is-low .rank__val { color: #f3b3a4; }

/* 结论 */
.verdict {
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--glass); backdrop-filter: blur(10px);
}
.verdict__list { display: grid; gap: .9rem; margin-bottom: 1.6rem; }
.verdict__list li {
  position: relative; padding-left: 1.6rem;
  font-size: .95rem; color: var(--mist);
}
.verdict__list li::before {
  content: ''; position: absolute; left: 0; top: .78em;
  width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--ice); box-shadow: 0 0 12px rgba(143,212,238,.8);
}
.verdict__advice {
  margin: 0; padding: 1rem 1.2rem;
  border-left: 2px solid var(--gold);
  background: rgba(217, 180, 94, .08);
  border-radius: 0 10px 10px 0;
  font-family: var(--f-serif); font-size: .95rem; color: #f0dca8; line-height: 1.9;
}

/* ---------- 13. 音画 ---------- */
.section--audio { background: linear-gradient(180deg, #070d24 0%, var(--abyss) 100%); }

.sfx__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.7rem, 1.8vw, 1.1rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sfx {
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1.1rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--glass);
  transition: all .3s var(--ease);
  text-align: left; width: 100%;
}
.sfx:hover { border-color: var(--line-2); background: rgba(143,212,238,.08); transform: translateX(4px); }
.sfx__icon {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--ice);
  font-size: .9rem;
}
.sfx.is-playing .sfx__icon { background: rgba(143,212,238,.2); color: var(--frost); animation: pulse .8s var(--ease) infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.12); } }
.sfx__body { min-width: 0; }
.sfx__name { font-family: var(--f-serif); font-size: .98rem; letter-spacing: .16em; }
.sfx__desc { font-size: .76rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.theme {
  display: grid; grid-template-columns: 1fr 220px; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.8rem, 4vw, 3rem);
  border: 1px solid var(--line); border-radius: 20px;
  background:
    radial-gradient(ellipse at 88% 50%, rgba(155,143,214,.18), transparent 55%),
    var(--glass-2);
  backdrop-filter: blur(12px);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.theme__latin { font-family: var(--f-latin); font-size: .6rem; letter-spacing: .36em; color: var(--lav-lt); margin-bottom: .4rem; }
.theme__name { font-family: var(--f-serif); font-size: 1.6rem; letter-spacing: .14em; margin-bottom: .5rem; }
.theme__meta { font-family: var(--f-latin); font-size: .78rem; letter-spacing: .14em; color: var(--ice); margin-bottom: .9rem; }
.theme__desc { font-size: .93rem; color: var(--mist); margin: 0; max-width: 52ch; }
.theme__disc {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(143,212,238,.2), transparent 62%);
  border: 1px solid var(--line);
}
.theme__disc svg { width: 56%; color: var(--ice-lt); opacity: .85; }

.tracks {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .5rem 2rem; counter-reset: t;
}
.tracks__note {
  margin: -.55rem 0 1.1rem;
  max-width: 62ch;
  font-size: .82rem; line-height: 1.8;
  color: var(--dim);
  padding-left: .9rem;
  border-left: 1px solid var(--line);
}
.tracks li {
  counter-increment: t;
  display: grid; grid-template-columns: 30px 1fr auto auto;
  gap: .8rem; align-items: baseline;
  padding: .7rem .4rem; border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.tracks li::before {
  content: counter(t, decimal-leading-zero);
  font-family: var(--f-latin); font-size: .74rem; color: var(--faint);
}
.tracks b { font-family: var(--f-serif); font-weight: 500; letter-spacing: .06em; }
.tracks em {
  font-style: normal; font-size: .72rem; letter-spacing: .12em;
  color: var(--ice); opacity: .7;
  padding: .1em .6em; border-radius: 99px;
  background: rgba(143,212,238,.1);
}
.tracks span { font-family: var(--f-latin); font-size: .8rem; color: var(--dim); }

/* ---------- 14. 路线图 ---------- */
.road { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.road li {
  display: grid; grid-template-columns: 92px 1fr 1fr auto;
  gap: clamp(1rem, 3vw, 2.4rem); align-items: center;
  padding: 1.5rem clamp(1.2rem, 3vw, 2.2rem);
  background: rgba(8, 14, 38, .82);
  transition: background-color .35s var(--ease);
}
.road li:hover { background: rgba(16, 28, 70, .8); }
.road__key {
  font-family: var(--f-latin); font-size: 1.5rem; color: var(--ice);
  letter-spacing: .04em;
}
.road li.is-done .road__key { color: var(--gold); }
.road__name { font-family: var(--f-serif); font-size: 1.08rem; letter-spacing: .18em; }
.road__desc { font-size: .88rem; color: var(--mist); }
.road__accept { font-size: .8rem; color: var(--dim); margin: 0; }
.road__status {
  font-size: .72rem; letter-spacing: .14em; padding: .3em .9em;
  border-radius: 99px; white-space: nowrap;
  background: rgba(143,212,238,.12); color: var(--ice-lt);
}
.road li.is-done .road__status { background: rgba(217,180,94,.14); color: #eed9a0; }

/* ---------- 15. 加入测试 ---------- */
.section--join { text-align: center; }
.join__inner { display: flex; flex-direction: column; align-items: center; }
.join__inner .sec-head { max-width: 46ch; }

.signup { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; width: 100%; margin-bottom: 2.6rem; }
.signup__field {
  display: flex; align-items: center;
  background: rgba(6, 12, 32, .55);
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 0 1.3rem; min-width: min(100%, 340px);
  backdrop-filter: blur(8px);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.signup__field:focus-within { border-color: var(--ice); background: rgba(10, 18, 48, .7); }
.signup__field svg { width: 20px; height: 20px; color: var(--ice); flex: none; }
.signup__field input { border: 0; background: none; outline: none; padding: .95em .7em; width: 100%; color: var(--frost); }
.signup__field input::placeholder { color: var(--faint); }
.signup__msg {
  width: 100%; min-height: 1.6em; margin: .6rem 0 0;
  font-size: .88rem; color: var(--ice-lt); letter-spacing: .08em;
}
.signup__msg.is-error { color: #f3b3a4; }

.platforms {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; width: 100%; margin-bottom: 2.6rem; text-align: left;
}
.platform {
  display: block; padding: 1.2rem 1.3rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(6, 12, 32, .45); backdrop-filter: blur(8px);
  transition: all .35s var(--ease);
}
.platform:hover { transform: translateY(-4px); border-color: var(--ice); background: rgba(16,28,70,.6); }
.platform b { display: block; font-family: var(--f-serif); font-size: 1.02rem; letter-spacing: .14em; margin-bottom: .3rem; }
.platform span { display: block; font-size: .8rem; color: var(--dim); margin-bottom: .5rem; }
.platform em {
  font-style: normal; font-size: .68rem; letter-spacing: .14em;
  padding: .18em .7em; border-radius: 99px;
  background: rgba(143,212,238,.12); color: var(--ice-lt);
}

.join__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem;
  font-size: .82rem; color: var(--dim); letter-spacing: .06em;
  border-top: 1px solid var(--line); padding-top: 1.8rem; width: 100%;
}
.join__meta b { color: var(--ice-lt); font-weight: 500; }

/* ---------- 16. 页脚 ---------- */
.foot { background: #03060f; border-top: 1px solid var(--line); font-size: .9rem; }
.foot__inner {
  display: grid; grid-template-columns: 1.1fr 2fr .8fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.foot__brand { display: flex; align-items: flex-start; gap: .8rem; }
.foot__brand img { width: 44px; height: 44px; flex: none; }
.foot__brand b { display: block; font-family: var(--f-brush); font-size: 1.6rem; letter-spacing: .1em; color: var(--frost); }
.foot__brand span { font-family: var(--f-latin); font-size: .5rem; letter-spacing: .24em; color: var(--faint); }
.foot h4 { font-family: var(--f-serif); font-size: .86rem; letter-spacing: .2em; color: var(--ice-lt); margin-bottom: .9rem; }
.foot__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.foot__links a { display: block; padding: .25em 0; color: var(--dim); transition: color .3s var(--ease), transform .3s var(--ease); }
.foot__links a:hover { color: var(--ice); transform: translateX(4px); }
.foot__social ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.foot__social a {
  display: block; padding: .32em .9em; border: 1px solid var(--line);
  border-radius: 99px; font-size: .76rem; letter-spacing: .08em;
  transition: all .3s var(--ease);
}
.foot__social a:hover { background: rgba(143,212,238,.1); border-color: var(--ice); color: var(--ice-lt); }
.foot__social .is-todo {
  display: block; padding: .32em .9em; border: 1px dashed var(--line-2);
  border-radius: 99px; font-size: .76rem; letter-spacing: .08em;
  color: var(--dim); font-style: italic;
}
.foot__social .is-todo em { font-style: normal; color: var(--gold); font-size: .68rem; margin-left: .3em; }
.foot__bottom { border-top: 1px solid var(--line); padding: 1.2rem 0; }
.foot__bottom .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.foot__bottom p { margin: 0; font-size: .74rem; color: var(--faint); }

/* ---------- 17. 放大层 ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
  background: rgba(3, 6, 15, .9); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__inner {
  width: min(920px, 100%); max-height: 88vh; overflow-y: auto;
  border-radius: 20px; border: 1px solid var(--line-2);
  background: linear-gradient(160deg, #0d1740, #070c22);
  box-shadow: 0 50px 100px -40px #000, 0 0 60px -24px rgba(143,212,238,.35);
  transform: translateY(24px) scale(.97);
  transition: transform .45s var(--ease-out);
}
.lightbox.is-open .lightbox__inner { transform: none; }
.lightbox__close {
  position: absolute; top: clamp(.8rem, 3vw, 1.8rem); right: clamp(.8rem, 3vw, 1.8rem);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(6,12,32,.6);
  color: var(--ice-lt); font-size: 1.6rem; line-height: 1; cursor: pointer;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.lightbox__close:hover { background: rgba(143,212,238,.16); transform: rotate(90deg); }

.lb { display: grid; grid-template-columns: 1fr 1fr; }
.lb--wide { grid-template-columns: 1.25fr 1fr; }
.lb__art { background: rgba(3,6,15,.4); display: grid; place-items: center; padding: 1.6rem; }
.lb__art img { max-height: 70vh; width: auto; max-width: 100%; border-radius: 12px; box-shadow: 0 24px 60px -30px #000; }
.lb__body { padding: clamp(1.6rem, 4vw, 2.8rem); align-self: center; }
.lb__type {
  display: inline-block; font-size: .72rem; letter-spacing: .16em;
  padding: .22em .8em; border-radius: 4px; margin-bottom: .8rem;
  background: rgba(143,212,238,.12); color: var(--ice-lt);
}
.lb__type[data-type="attack"]    { background: rgba(224,112,90,.16); color: #f3b3a4; }
.lb__type[data-type="event"]     { background: rgba(185,138,216,.16); color: #d9b8ec; }
.lb__type[data-type="equipment"] { background: rgba(168,198,108,.16); color: #d0e59a; }
.lb__type[data-type="support"]   { background: rgba(95,192,212,.16); color: #a8e2ef; }
.lb__type[data-type="character"] { background: rgba(217,180,94,.16); color: #eed9a0; }
.lb__type[data-type="base"]      { background: rgba(111,182,216,.16); color: #b3dcf2; }
.lb__name { font-family: var(--f-serif); font-size: 1.9rem; letter-spacing: .16em; margin-bottom: .35rem; }
.lb__latin { font-family: var(--f-latin); font-size: .6rem; letter-spacing: .3em; color: var(--ice); opacity: .7; margin-bottom: 1.2rem; }
.lb__text { font-size: .96rem; color: var(--text); margin-bottom: 1.3rem; }
.lb__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: 1.3rem; }
.lb__stat { padding: .8rem; border-radius: 10px; background: rgba(143,212,238,.06); border: 1px solid var(--line); }
.lb__stat b { display: block; font-family: var(--f-latin); font-size: 1.3rem; color: var(--ice-lt); line-height: 1.1; }
.lb__stat span { display: block; font-size: .72rem; color: var(--faint); letter-spacing: .1em; margin-top: .2rem; }
.lb__skill {
  padding: 1rem 1.2rem; border-left: 2px solid var(--gold);
  background: rgba(217,180,94,.08); border-radius: 0 10px 10px 0;
}
.lb__skill b { display: block; font-family: var(--f-serif); font-size: 1rem; letter-spacing: .14em; color: var(--gold); margin-bottom: .3rem; }
.lb__skill span { font-size: .88rem; color: #f0dca8; line-height: 1.85; }

/* ---------- 18. 杂项 ---------- */
.to-top {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(6, 12, 32, .8);
  color: var(--ice-lt); font-size: 1.05rem; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all .35s var(--ease);
  backdrop-filter: blur(6px);
}
.to-top.is-show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: rgba(143,212,238,.16); border-color: var(--ice); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 19. 响应式 ---------- */
@media (max-width: 1080px) {
  .cards__grid { grid-template-columns: repeat(4, 1fr); }
  .cards__grid.is-landscape { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .roster__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --nav-h: 64px; }
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .6rem 1.4rem 1.6rem;
    background: rgba(6, 12, 32, .97); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 46px -30px #000;
    transform: translateY(-125%); transition: transform .45s var(--ease-out);
  }
  .nav__links.is-open { transform: none; }
  .nav__links a:not(.btn) { padding: .8em 0; border-bottom: 1px solid var(--line); }
  .nav__links a.btn { margin-top: 1rem; justify-content: center; }
  .nav__links .icon-btn { position: absolute; top: 1rem; right: 1.4rem; }

  .hero__stats { grid-template-columns: repeat(3, 1fr); }
  .hero__stats li:nth-child(3n) { border-right: 0; }
  .hero__stats li:nth-child(-n+3) { border-bottom: 1px solid var(--line); }

  .res__grid, .ending__grid, .lab__cols, .prim__grid { grid-template-columns: 1fr; }
  .phase__grid { grid-template-columns: 1fr; }
  .black { grid-template-columns: 1fr; }
  .black__art { max-width: 200px; }
  .theme { grid-template-columns: 1fr; }
  .theme__disc { max-width: 180px; }
  .tracks { grid-template-columns: 1fr; }
  .road li { grid-template-columns: 60px 1fr; gap: .6rem 1rem; }
  .road__desc, .road__accept { grid-column: 2; }
  .road__status { grid-column: 2; justify-self: start; }
  .platforms { grid-template-columns: repeat(2, 1fr); }
  .foot__inner { grid-template-columns: 1fr; }
  .lb, .lb--wide { grid-template-columns: 1fr; }
  .lb__art img { max-height: 42vh; }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  .cards__grid { grid-template-columns: repeat(2, 1fr); }
  .roster__grid, .base__grid, .sfx__grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .hero__stats li { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line); }
  .hero__stats li:nth-child(2n) { border-right: 0 !important; }
  .hero__stats li:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .hero__title { font-size: clamp(3.6rem, 19vw, 5.4rem); }
  .platforms { grid-template-columns: 1fr; }
  .bar { grid-template-columns: 68px 1fr 52px; gap: .6rem; }
  .foot__links { grid-template-columns: repeat(2, 1fr); }
  .lb__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 20. 无障碍与降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__bg { animation: none; }
  .fx-canvas { display: none; }
}

/* ============================================================
   21. v2 · 动效背景 / 音乐 / 加入我们
   ============================================================ */

/* ---------- 全局 Canvas 动效层（极光 + 冰晶） ---------- */
.fx-canvas {
  position: fixed; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .58;
}

/* ---------- 首屏视频背景 ---------- */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s var(--ease-out);
  filter: saturate(1.04) contrast(1.02);
}
.hero__video.is-ready { opacity: .92; }

/* ---------- 首屏入场 ---------- */
.hero-in {
  opacity: 0;
  transform: translateY(28px);
  animation: heroIn 1s var(--ease-out) forwards;
  animation-delay: var(--hero-delay, 0ms);
}
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* ---------- 3D 倾斜 + 光标光晕 ---------- */
.tilt {
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform .55s var(--ease-out),
    opacity .8s var(--ease-out),
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}
.tilt:hover {
  transform: perspective(1000px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)) translateY(-5px);
  box-shadow: 0 26px 50px -30px rgba(143, 212, 238, .35);
}
.tilt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 3;
  background: radial-gradient(420px circle at var(--glowX, 50%) var(--glowY, 50%), rgba(143, 212, 238, .13), transparent 62%);
  mix-blend-mode: screen; opacity: 0;
  transition: opacity .35s ease;
}
.tilt.is-hot::after { opacity: 1; }

/* ---------- 音乐提示 ---------- */
.music-hint {
  position: fixed; right: 26px; bottom: 26px; z-index: 95;
  transform: translateY(24px);
  padding: .72rem 1.4rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(10, 18, 48, .92);
  backdrop-filter: blur(12px); color: var(--ice-lt);
  font-size: .86rem; letter-spacing: .08em; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
  box-shadow: 0 20px 40px -26px #000;
}
.music-hint.is-show { opacity: 1; pointer-events: auto; transform: none; }
.music-hint:hover { border-color: var(--ice); }

/* ---------- 音乐板块 ---------- */
.bg-layer--music { background-image: url('../img/bg-star-crystal.jpg'); opacity: .3; }
.section--music { background: linear-gradient(180deg, #070d24 0%, var(--abyss) 100%); }

.music__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem; margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
.musiccard {
  display: grid; grid-template-columns: 176px 1fr; gap: 1.5rem;
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--glass); backdrop-filter: blur(12px);
}
.musiccard__art {
  position: relative; aspect-ratio: 1; border-radius: 14px;
  background: radial-gradient(circle at 50% 38%, rgba(143, 212, 238, .18), rgba(8, 14, 40, .95));
  display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--line);
}
.musiccard__art svg { width: 58%; color: var(--ice-lt); opacity: .82; }
.musiccard--bgm .musiccard__art {
  background: radial-gradient(circle at 50% 34%, rgba(155, 143, 214, .3), rgba(8, 14, 40, .95));
}
.musiccard__disc {
  position: absolute; inset: 13%; border-radius: 50%;
  border: 1px dashed rgba(143, 212, 238, .26);
  animation: spin 26s linear infinite;
}
.musiccard.is-playing .musiccard__disc { animation-duration: 8s; border-color: rgba(155, 143, 214, .4); }
@keyframes spin { to { transform: rotate(360deg); } }

.musiccard__latin { font-family: var(--f-latin); font-size: .6rem; letter-spacing: .3em; color: var(--lav-lt); }
.musiccard__name { font-family: var(--f-serif); font-size: 1.42rem; letter-spacing: .1em; margin: .35rem 0 .3rem; }
.musiccard__meta { font-family: var(--f-latin); font-size: .74rem; letter-spacing: .13em; color: var(--ice); }
.musiccard__desc { font-size: .88rem; color: var(--mist); line-height: 1.85; margin: .85rem 0 1.15rem; }

.musiccard__ctrl { display: flex; align-items: center; gap: 1rem; }
.playbtn {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%; border: 1px solid var(--line-2);
  background: rgba(143, 212, 238, .1); color: var(--ice-lt);
  display: grid; place-items: center; cursor: pointer;
  transition: all .3s var(--ease);
}
.playbtn:hover { background: rgba(143, 212, 238, .2); border-color: var(--ice); transform: scale(1.07); }
.playbtn__ico { width: 20px; height: 20px; }
.playbtn__ico--pause { display: none; }
.musiccard.is-playing .playbtn__ico--play { display: none; }
.musiccard.is-playing .playbtn__ico--pause { display: block; }

.progress { flex: 1; position: relative; height: 4px; border-radius: 4px; background: rgba(143, 212, 238, .14); }
.progress__bar {
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--ice), var(--lav-lt));
  transition: width .25s linear;
}
.progress__time {
  position: absolute; left: 0; top: 11px;
  font-family: var(--f-latin); font-size: .66rem; color: var(--faint);
}

/* ---------- 平衡实验室声明 ---------- */
.lab__note {
  margin: -1.2rem 0 2rem;
  padding: .85rem 1.1rem;
  border-left: 2px solid var(--gold);
  background: rgba(217, 180, 94, .07);
  border-radius: 0 10px 10px 0;
  color: var(--mist); font-size: .86rem; line-height: 1.85;
  max-width: 78ch;
}

/* ---------- 黑卡（纯 SVG 绘制，等正式美工后替换） ---------- */
.black__card { width: 100%; height: auto; display: block; }
.black__card-stars circle { fill: rgba(206, 226, 244, .78); }
.black__card-text {
  fill: rgba(242, 246, 255, .94);
  font-family: 'Ma Shan Zheng', 'STKaiti', 'KaiTi', 'Noto Serif SC', serif;
  font-size: 96px;
}
.black__card-sub {
  fill: rgba(143, 212, 238, .55);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 13px;
  letter-spacing: .32em;
}
.black__card-crack { filter: drop-shadow(0 0 5px rgba(224, 112, 90, .55)); }

/* ---------- 首屏标题扫光 ---------- */
.hero__title { position: relative; display: inline-block; }
.hero__title::before {
  content: ''; position: absolute; top: -26%; left: 0; width: 100%; height: 152%;
  /* 用 background-position 走位，而不是移动元素本身：
     条带两端都完全在字框外，回卷发生在不可见的瞬间，不再有跳变。 */
  background: linear-gradient(96deg,
    transparent 0%,
    rgba(206, 234, 255, .08) 32%,
    rgba(240, 250, 255, .40) 50%,
    rgba(206, 234, 255, .08) 68%,
    transparent 100%);
  background-size: 300% 100%;
  background-position: 120% 0;
  mix-blend-mode: screen;
  filter: blur(7px);
  pointer-events: none;
  animation: titleSweep 9.5s var(--ease) infinite;
}
@keyframes titleSweep {
  0%   { background-position: 120% 0; opacity: 0; }
  10%  { opacity: 1; }
  52%  { background-position: -20% 0; opacity: 1; }
  64%, 100% { background-position: -20% 0; opacity: 0; }
}

/* ---------- 百分比数值可读性 ---------- */
.bar__val, .rank__val {
  font-family: var(--f-serif);
  font-variant-numeric: tabular-nums;
  font-size: .96rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--frost);
}
.bars--sm .bar { grid-template-columns: 100px 1fr 56px; }
.bars--sm .bar__label { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bars--sm .bar__val { font-size: .9rem; }
.rank__val { font-size: .96rem; }

/* ---------- 加入我们 ---------- */
.joindev {
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--glass); backdrop-filter: blur(12px);
  margin-bottom: 1.3rem;
}
.joindev__head { max-width: 64ch; margin-bottom: 1.7rem; }
.joindev__title { font-family: var(--f-serif); font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: .06em; margin: .35rem 0 .6rem; }
.joindev__lead { color: var(--mist); font-size: .96rem; line-height: 1.95; }
.joindev__roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.role {
  padding: 1.15rem; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(8, 16, 40, .5);
}
.role__name { font-family: var(--f-serif); font-size: 1.06rem; letter-spacing: .16em; margin-bottom: .5rem; }
.role__desc { font-size: .83rem; color: var(--dim); line-height: 1.75; margin-bottom: .85rem; }
.role__tags { display: flex; flex-wrap: wrap; gap: .38rem; list-style: none; margin: 0; padding: 0; }
.role__tags li {
  font-size: .67rem; padding: .2rem .55rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ice); letter-spacing: .04em;
}
.joindev__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.7rem; padding-top: 1.3rem; border-top: 1px solid var(--line);
}
.joindev__note { color: var(--faint); font-size: .84rem; line-height: 1.8; flex: 1 1 320px; }
.joindev__mail {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .72rem 1.3rem; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ice-lt);
  text-decoration: none; font-size: .9rem; letter-spacing: .04em;
  transition: all .3s var(--ease); white-space: nowrap;
}
.joindev__mail svg { width: 20px; height: 20px; flex: none; }
.joindev__mail:hover { background: rgba(143, 212, 238, .12); border-color: var(--ice); }
.joindev__mail.is-todo { border-style: dashed; color: var(--dim); }

/* ---------- 现在的船员（团队介绍） ---------- */
.crew { margin-bottom: 1.7rem; }
.crew__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-bottom: 1rem; }
.crew__title { font-family: var(--f-serif); font-size: 1.05rem; letter-spacing: .22em; color: var(--ice-lt); margin: 0; }
.crew__lead { color: var(--faint); font-size: .84rem; margin: 0; }
.crew__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.crew-card {
  display: flex; gap: 1.05rem; padding: 1.15rem 1.25rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(8, 16, 40, .5);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.crew-card:hover { border-color: var(--line-2); background: rgba(16, 28, 70, .55); }
.crew-card__avatar {
  flex: none; width: 58px; height: 58px; border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--f-brush); font-size: 1.72rem; line-height: 1; color: var(--frost);
  background: linear-gradient(150deg, rgba(27, 42, 94, .92), rgba(10, 18, 48, .92));
  border: 1px solid var(--line-2);
  text-shadow: 0 0 18px rgba(143, 212, 238, .45);
}
.crew-card__body { min-width: 0; }
.crew-card__head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .3rem; }
.crew-card__name { font-family: var(--f-serif); font-size: 1.08rem; letter-spacing: .12em; margin: 0; }
.crew-card__role {
  font-family: var(--f-serif); font-size: .7rem; letter-spacing: .14em;
  color: var(--gold); padding: .12rem .5rem;
  border: 1px solid rgba(217, 180, 94, .35); border-radius: 999px; white-space: nowrap;
}
.crew-card__school { font-size: .76rem; color: var(--ice); opacity: .85; margin: 0 0 .45rem; }
.crew-card__bio { font-size: .8rem; color: var(--dim); line-height: 1.75; margin: 0 0 .7rem; }
.crew-card__duty { display: flex; flex-wrap: wrap; gap: .38rem; list-style: none; margin: 0; padding: 0; }
.crew-card__duty li {
  font-size: .67rem; padding: .2rem .55rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ice); letter-spacing: .04em;
}
@media (max-width: 860px) {
  .crew__grid { grid-template-columns: 1fr; }
}

.joinplayer {
  display: grid; grid-template-columns: 1.12fr .88fr;
  gap: 1.3rem; margin-bottom: 1.6rem;
}
.joinplayer__col {
  padding: clamp(1.3rem, 3vw, 2rem);
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--glass); backdrop-filter: blur(12px);
}
.joinplayer__title { font-family: var(--f-serif); font-size: clamp(1.28rem, 2.6vw, 1.75rem); letter-spacing: .06em; margin: .35rem 0 .6rem; }
.joinplayer__lead { color: var(--mist); font-size: .92rem; line-height: 1.95; margin-bottom: 1.4rem; }
.channels { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.channel {
  display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: .95rem;
  padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(8, 16, 40, .45); transition: all .3s var(--ease);
}
.channel:hover { border-color: var(--line-2); background: rgba(16, 28, 70, .6); }
.channel__icon {
  width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(143, 212, 238, .1); color: var(--ice);
}
.channel__icon svg { width: 22px; height: 22px; }
.channel__body b { display: block; font-family: var(--f-serif); font-size: .98rem; letter-spacing: .1em; }
.channel__body span { font-size: .78rem; color: var(--faint); }
.channel__link { font-family: var(--f-latin); font-size: .74rem; color: var(--ice); }
.channel.is-todo .channel__link { color: var(--gold); font-style: italic; }
.channel__pending {
  font-family: var(--f-serif); font-size: .76rem; letter-spacing: .1em;
  color: var(--gold); font-style: italic;
  border: 1px dashed rgba(217,180,94,.45); border-radius: 99px;
  padding: .22em .85em; white-space: nowrap;
}
.channel__copy {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--f-latin); font-size: .8rem; letter-spacing: .06em;
  color: var(--ice-lt); background: rgba(143,212,238,.08);
  border: 1px solid var(--line-2); border-radius: 99px;
  padding: .3em .5em .3em .9em; cursor: pointer;
  transition: all .3s var(--ease);
}
.channel__copy:hover { border-color: var(--ice); background: rgba(143,212,238,.16); color: var(--frost); }
.channel__copy em {
  font-style: normal; font-size: .66rem; letter-spacing: .1em;
  color: var(--frost); background: rgba(143,212,238,.22);
  border-radius: 99px; padding: .18em .6em;
}
.channel__copy.is-done { border-color: var(--gold); }
.channel__copy.is-done em { background: rgba(217,180,94,.28); color: var(--gold); }

/* ---------- v2 响应式 ---------- */
@media (max-width: 1080px) {
  .joindev__roles { grid-template-columns: repeat(2, 1fr); }
  .music__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .joinplayer { grid-template-columns: 1fr; }
  .musiccard { grid-template-columns: 132px 1fr; gap: 1.1rem; }
  .musiccard__name { font-size: 1.22rem; }
  .musiccard__desc { font-size: .84rem; }
}

@media (max-width: 620px) {
  .joindev__roles { grid-template-columns: 1fr; }
  .musiccard { grid-template-columns: 1fr; }
  .musiccard__art { max-width: 150px; }
  .channel { grid-template-columns: 38px 1fr; }
  .channel__link { grid-column: 2; text-align: left; }
  .channel__pending, .channel__copy { grid-column: 2; justify-self: start; }
  .joindev__foot { flex-direction: column; align-items: flex-start; }
  .music-hint { bottom: 18px; font-size: .8rem; padding: .6rem 1.1rem; }
}