/* ==========================================================================================
   thanks.css — 感谢名单页：标题屏同款背景 + 居中缓慢向下滚动的名单。
   令牌/字体/边框全部沿用 dl-site 的 theme.css（同一套游戏客户端设计系统）。
   滚动 = 内容整体缓慢上移（即页面"向下滚动"），首尾无缝循环；prefers-reduced-motion 时静止。
   ========================================================================================== */

.thanks-screen { justify-content: center; align-items: center; }

/* 名单区要参与剩余高度分配：否则 70% 的舞台 + 表头 + 底部提示会在矮屏上溢出首屏。
   内容在分配到的高度里垂直居中，保持"居中"的观感。 */
.thanks-main {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
  width: 100%;
  margin-top: -.1rem;
}

/* ---- 头部 --------------------------------------------------------------------------------- */
.thanks-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  animation: rise-in 600ms 80ms var(--ease-out) backwards;
}
.thanks-title { margin-top: .08rem; font-size: .86rem; }
.thanks-dedication {
  display: flex;
  align-items: baseline;
  gap: .14rem;
  margin-top: .06rem;
  font-size: .2rem;
  letter-spacing: .12em;
  color: var(--mint-500);
  text-shadow: 0 0 .2rem rgba(23, 249, 183, .35);
}
.thanks-dedication__name { font-weight: 700; }
.thanks-dedication__role {
  font-family: var(--font-display);
  font-size: .14rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---- 滚动舞台 ----------------------------------------------------------------------------- */
/* 名单区占设备高度的 70%（原来固定 4.4rem ≈ 视口 40%）。dvh 量的是"当前可见"高度，手机上
   浏览器工具栏展开/收起不会让它溢出；flex-shrink 1 + min-height 0 让它在矮屏上被表头和底部
   提示压缩，而不是把提示挤出首屏（stage 是 main 的 flex 子项，故用 height 定基准高度）。 */
.thanks-stage {
  position: relative;
  flex: 0 1 auto;
  width: min(11rem, 90vw);
  height: 70dvh;
  min-height: 0;
  margin-top: .34rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  animation: rise-in 600ms 160ms var(--ease-out) backwards;
}
/* dvh 之前的浏览器：回落 vh（工具栏收起时的高度，略高一点，仍可用）。 */
@supports not (height: 1dvh) {
  .thanks-stage { height: 70vh; }
}
/* 中央定位线：一条极淡的薄荷绿横向细线，强调"居中" */
.thanks-stage::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.6rem;
  height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(78, 216, 175, .22), transparent);
  pointer-events: none;
}

.thanks-roll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .26rem;
  padding: 0;
  will-change: transform;
  animation: thanks-scroll var(--roll-duration, 60s) linear infinite;
  animation-play-state: var(--roll-play, running);
}
@keyframes thanks-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, calc(-1 * var(--roll-distance, 0px)), 0); }
}

/* ---- 名单条目 ----------------------------------------------------------------------------- */
.thanks-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .04rem;
  text-align: center;
  line-height: 1.25;
}
.thanks-item__name {
  font-size: .34rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #f4f6f5;
  text-shadow: 0 .03rem .16rem rgba(0, 0, 0, .65);
  white-space: nowrap;
}
.thanks-item__prefix { color: var(--mint-700); font-weight: 500; }
.thanks-item__role {
  font-family: var(--font-display);
  font-size: .13rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-lo);
  white-space: nowrap;
}
/* ---- 底部提示 ----------------------------------------------------------------------------- */
.thanks-hint {
  margin-top: .3rem;
  color: var(--text-dim);
  letter-spacing: .22em;
  animation: rise-in 600ms 240ms var(--ease-out) backwards;
}

/* ---- 降级 --------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .thanks-roll { animation: none; }
  .thanks-stage {
    overflow-y: auto;
    -webkit-mask-image: none;
    mask-image: none;
    -webkit-overflow-scrolling: touch;
  }
  .thanks-stage::before { display: none; }
}
/* 无 JS / 数据未就绪：舞台保持空但布局不塌 */
.thanks-stage.is-empty .thanks-roll { animation: none; }