/* ==========================================================================
   sections.css — 每一屏的布局（移动端优先，只留一个桌面断点）
   --------------------------------------------------------------------------
   规则：每屏只有一个视觉主角（hero），其余都是配角。
   ========================================================================== */

/* ==========================================================================
   屏 0 · 开球
   ========================================================================== */

.intro {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  text-align: center;
}

.ball {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 30%,
    var(--c-ball-light),
    var(--c-accent) 55%,
    var(--c-ball-dark)
  );
  box-shadow: var(--shadow-card);
}

/* 排球的缝线：两条弧线 + 一条横线 */
.ball::before,
.ball::after {
  content: '';
  position: absolute;
  border: 2px solid rgba(255, 246, 236, 0.85);
}

.ball::before {
  inset: 12% 26%;
  border-radius: 50%;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.ball::after {
  left: 6%;
  right: 6%;
  top: 50%;
  border-width: 2px 0 0;
}

.ball--bounce { animation: ball-bounce 1.1s var(--ease) infinite alternate; }

@keyframes ball-bounce {
  from { transform: translateY(-12px); }
  to { transform: translateY(8px) scaleY(0.94); }
}

.intro__sub { font-size: var(--fs-small); opacity: 0.72; }

/* ==========================================================================
   屏 1 · 部員登録（登录门）
   ========================================================================== */

.gate__hint {
  margin-bottom: var(--s-3);
  font-size: var(--fs-small);
  color: var(--c-second);
}

.gate__msg { margin-top: var(--s-3); }

/* ==========================================================================
   屏 2 · 主视觉
   ========================================================================== */

.hero {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  text-align: center;
}

.hero__en {
  font-family: var(--font-mono);
  font-size: clamp(20px, 6vw, 32px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-accent);
  transform: skewX(-8deg);
}

.hero__name {
  font-family: var(--font-jp);
  font-size: var(--fs-display);
  font-weight: 900;
  letter-spacing: var(--ls-tight);
}

.hero__date {
  font-family: var(--font-mono);
  font-size: var(--fs-deco);
  letter-spacing: var(--ls-deco);
  opacity: 0.7;
}

.hero__meta {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.hero__line { font-size: var(--fs-small); opacity: 0.75; }

/* ==========================================================================
   屏 3 · 信
   ========================================================================== */

.letter__body { display: grid; gap: var(--s-3); }

.letter__p { font-size: var(--fs-body); line-height: var(--lh-body); max-width: 32ch; }

.quote {
  margin-top: var(--s-4);
  padding-left: var(--s-2);
  border-left: 4px solid var(--c-accent);
  color: var(--c-second);
  font-size: var(--fs-small);
  font-style: italic;
}

/* ==========================================================================
   屏 4 · 照片墙
   ========================================================================== */

.wall {
  /* 照片比例千奇百怪又一律不裁剪 → 用多列瀑布流（masonry）。
     每张卡按自己的高度往下排，不会像 grid 那样被"同一行最高的那张"拉出空洞。 */
  columns: 2;
  column-gap: var(--s-2);
  /* 顶部留白：给第一行的钉子，否则它会顶到上面的「CH.02 写真」标题上 */
  padding-top: calc(var(--pin-size) / 2 + var(--s-2));
}

.wall .polaroid {
  /* 别让卡片被拆到两列之间 */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  /* 下方留白：给下一张卡片的钉子（露在照片外的那一半）腾地方 */
  margin-bottom: calc(var(--pin-size) / 2 + var(--s-3));
}

/* 注：旧的"偶数卡下沉"错位在这里删掉了 —— 瀑布流里每张卡本来就高低不同，
   再手工错位反而会把列排出空洞。 */

/* 照片墙下面那句话（原来的"操作说明"换成了这一句） */
.wall__line {
  margin: var(--s-6) 0 0;
  padding: 0 var(--s-3);
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(16px, 4.6vw, 19px);
  line-height: 1.9;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   两张背景壁纸
   --------------------------------------------------------------------------
   照片墙用 bg-gallery（烏野全队那张，偏暗）→ 压深色薄纱 + 浅色字，
   白相纸压在暗背景上最跳；
   结尾用 bg-outro（全队合影那张，偏亮）→ 压米白薄纱 + 深色字。
   两张图都是 16:9，用 cover 铺满整个 section；想换取景就改 --wallpaper-focus。
   ========================================================================== */

.shell--wallpaper {
  position: relative;
  background-color: var(--c-paper); /* 图还没加载出来时的兜底 */
  background-image: var(--wallpaper);
  background-size: cover;
  background-position: var(--wallpaper-focus, 50% 50%);
  background-repeat: no-repeat;
}

/* 薄纱：中间薄、上下略厚 —— 中间留给照片，标题和结尾处对比更强 */
.shell--wallpaper::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      var(--wallpaper-veil) 0%,
      transparent 26%,
      transparent 74%,
      var(--wallpaper-veil) 100%
    ),
    var(--wallpaper-veil);
}

/* 内容压在薄纱之上 */
.shell--wallpaper > .net-divider,
.shell--wallpaper > .container {
  position: relative;
  z-index: 1;
}

/* 照片墙 = 背景2（暗调，深纱 + 浅字） */
.shell--wall-gallery {
  --wallpaper: url('../img/bg/bg-gallery.webp');
  --wallpaper-focus: 50% 45%;
  --wallpaper-veil: rgba(20, 17, 15, 0.42);
}

/* 结尾 = 背景1（暖亮，米白纱 + 深字） */
.shell--wall-outro {
  --wallpaper: url('../img/bg/bg-outro.webp');
  --wallpaper-focus: 50% 40%;
  --wallpaper-veil: rgba(255, 246, 236, 0.62);
}

/* ==========================================================================
   屏 5 · 游戏区
   ========================================================================== */

.games-lead {
  margin-bottom: var(--s-3);
  font-size: var(--fs-small);
  color: rgba(255, 246, 236, 0.72);
}

/* ==========================================================================
   屏 6 · 吹蜡烛
   ========================================================================== */

.cake-wrap { display: grid; justify-items: center; padding-block: var(--s-4); }

/* ==========================================================================
   屏 7 · 彩蛋
   ========================================================================== */

.egg__lock {
  display: grid;
  gap: var(--s-1);
  justify-items: center;
  padding: var(--s-6) var(--s-3);
  border: var(--bw) dashed rgba(255, 246, 236, 0.35);
  border-radius: var(--r-md);
  text-align: center;
}

.egg__cond {
  font-family: var(--font-mono);
  font-size: var(--fs-deco);
  color: var(--c-accent);
}

.egg__content { display: grid; justify-items: center; gap: var(--s-3); text-align: center; }

.egg__content .polaroid { width: min(72vw, 300px); }

/* 宽幅照片（比例 > 1.4，比如彩蛋那张 2.3:1 的全景）→ 相纸也放宽，
   否则不裁剪的前提下它会缩得很小 */
.egg__content .polaroid--wide { width: min(94vw, 620px); }

/* ==========================================================================
   屏 8 · 结尾
   ========================================================================== */

.outro { display: grid; justify-items: center; gap: var(--s-3); text-align: center; }

/* "空一行"之后的入口按钮：比其它元素多留一段空白，读起来就是另起一行 */
.outro__letter {
  margin-top: var(--s-4);
  text-decoration: none;
}

.sharecard {
  width: min(320px, 86vw);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: var(--s-1);
  border: var(--bw) solid var(--c-accent);
  border-radius: var(--r-md);
  background: var(--c-ink);
  color: var(--c-paper);
  box-shadow: var(--shadow-card);
}

.sharecard__name {
  font-family: var(--font-jp);
  font-size: var(--fs-h2);
  font-weight: 900;
}

.sharecard__year {
  font-family: var(--font-mono);
  font-size: clamp(48px, 16vw, 72px);
  line-height: 1;
  color: var(--c-accent);
}

.sharecard__foot { font-size: var(--fs-deco); letter-spacing: var(--ls-deco); }

/* ==========================================================================
   桌面端：只改三件事 —— 版心、分栏、列数
   ========================================================================== */

@media (min-width: 900px) {
  .container {
    max-width: var(--w-desktop);
    padding-inline: var(--s-6);
  }

  .shell { padding-block: var(--s-12); }

  .t-body,
  .letter__p { max-width: 46ch; }

  /* 左标题（sticky）+ 右内容 */
  .container--split {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: var(--s-8);
    align-items: start;
  }

  .container--split .chapter {
    position: sticky;
    top: var(--s-6);
    margin-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-1);
  }

  .wall {
    columns: 3;
    column-gap: var(--s-3);
  }

  .games {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
    align-items: start;
  }

  .game + .game { margin-top: 0; }

  .games-lead { max-width: 46ch; }
}