/* ============================================================
   深夜来信 · 粉色梦幻版
   ============================================================ */

:root {
  --bg: #26162B;
  --bg-deep: #1C0F21;
  --cream: #F9EDF3;
  --rose: #F0A6C0;
  --pink: #FF9EC7;
  --muted: #CBAFC4;
  --dim: #9C7F96;
  --faint: #6E5468;
  --card: rgba(255, 255, 255, 0.05);
  --stroke: rgba(255, 158, 199, 0.14);
  --letter-bg: #FFF3F7;
  --letter-ink: #4A2B3A;
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --hand: "Ma Shan Zheng", "Kaiti SC", "STKaiti", "KaiTi", cursive;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- 首屏 ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 24px 96px;
  overflow: hidden;
}

.stars { position: absolute; inset: 0; pointer-events: none; }
.star {
  position: absolute;
  border-radius: 50%;
  background: var(--cream);
  animation: twinkle 4s ease-in-out infinite;
}
.star--rose { background: var(--pink); }
@keyframes twinkle {
  0%, 100% { opacity: .15; }
  50% { opacity: .75; }
}

.moon-glow {
  position: absolute;
  left: 50%; top: 18%;
  width: 340px; height: 340px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,158,199,.55) 0%, rgba(255,158,199,.20) 45%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}

.moon {
  position: absolute;
  left: 50%; top: 21%;
  width: 180px; height: 180px;
  transform: translateX(-50%);
  cursor: pointer;
  filter: drop-shadow(0 0 34px rgba(255,158,199,.4));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  z-index: 2;
}
.moon:active { transform: translateX(-50%) scale(.96); }
.moon svg { width: 100%; height: 100%; display: block; }

/* 睡在小羊 · 躺在月亮下缘 */
.moon-lamb {
  position: absolute;
  left: 50%; bottom: -30px;
  width: 96px; height: 74px;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(120,40,80,.35));
  animation: lambBreathe 3.6s ease-in-out infinite;
}
@keyframes lambBreathe {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.04); }
}

/* 小猫 · 探出头来 */
.hero-kitty {
  position: relative;
  width: 108px; height: 96px;
  margin-bottom: 6px;
  animation: kittyBob 3s ease-in-out infinite;
}
@keyframes kittyBob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-6px) rotate(1.5deg); }
}

.hero-copy { position: relative; z-index: 3; }
.kicker {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--rose);
  margin-bottom: 16px;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 10vw, 42px);
  line-height: 1.5;
  color: var(--cream);
  margin-bottom: 14px;
}
.hero-hand {
  font-family: var(--hand);
  font-size: 20px;
  color: var(--pink);
}

.scroll-hint {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: rgba(249,237,243,.5);
  font-size: 11px;
  animation: bob 2.4s ease-in-out infinite;
  z-index: 3;
}
.scroll-hint svg { width: 20px; height: 20px; }
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* 点击月亮后飘出的爱心 */
.heart-float {
  position: fixed;
  z-index: 99;
  pointer-events: none;
  animation: heartUp 1.4s ease-out forwards;
}
@keyframes heartUp {
  0% { opacity: 0; transform: translateY(0) scale(.6) rotate(0deg); }
  15% { opacity: .95; }
  100% { opacity: 0; transform: translateY(-160px) scale(1.15) rotate(var(--rot)); }
}

/* 流星（粉色小流星） */
.shooting-star {
  position: fixed;
  z-index: 98;
  width: 90px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--pink));
  opacity: 0;
  pointer-events: none;
  animation: shoot 1.2s ease-out forwards;
}
@keyframes shoot {
  0% { opacity: 0; transform: translate(0,0) rotate(-30deg); }
  20% { opacity: .8; }
  100% { opacity: 0; transform: translate(-220px, 127px) rotate(-30deg); }
}

/* ---------- 章节通用 ---------- */
.chapter { padding: 72px 24px 64px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity: 1; transform: none; }

.chapter-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.chapter-num {
  font-family: var(--serif);
  font-size: 13px; color: var(--rose);
}
.chapter-line { width: 64px; height: 1px; background: rgba(255,158,199,.25); }
.chapter-date {
  font-size: 11px; letter-spacing: .2em;
  color: var(--dim);
}
.chapter-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.5;
  color: var(--cream);
  margin-bottom: 24px;
}
.chapter-sub { font-size: 14px; color: var(--dim); margin: -12px 0 28px; }
.body-text { font-size: 16px; line-height: 2; margin-bottom: 12px; }
.hand-note {
  font-family: var(--hand);
  font-size: 18px;
  color: var(--pink);
  margin-top: 20px;
}
.hand-note--center { text-align: center; }

/* ---------- 大数字 ---------- */
.big-number {
  padding: 56px 24px;
  text-align: center;
  background: linear-gradient(180deg, #26162B, #361F3D);
}
.big-number__num {
  font-size: 120px;
  font-weight: 200;
  color: var(--rose);
  letter-spacing: .04em;
  line-height: 1.1;
}
.big-number__label { font-family: var(--serif); font-size: 18px; color: var(--cream); margin-top: 8px; }
.big-number__sub { font-size: 13px; color: var(--dim); margin-top: 8px; }

/* ---------- 关于你 · 小事卡 ---------- */
.fact {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 14px;
}
.fact__title { font-family: var(--serif); font-size: 17px; color: var(--cream); margin-bottom: 6px; }
.fact__text { font-size: 14px; line-height: 1.9; }

/* ---------- 信纸 ---------- */
.letter {
  background: var(--letter-bg);
  color: var(--letter-ink);
  border-radius: 6px;
  padding: 30px 26px;
  margin: 32px 0;
  box-shadow: 0 16px 32px rgba(80,20,60,.35);
  position: relative;
}
.letter--two {
  background: linear-gradient(160deg, #FFEFF5, #FFE3EE);
}
.letter__tag {
  font-size: 11px; letter-spacing: .1em;
  color: #C77B9B;
  margin-bottom: 16px;
}
.letter__para { font-size: 15px; line-height: 2; margin-bottom: 10px; white-space: pre-wrap; }
.letter__sign {
  font-family: var(--hand);
  font-size: 16px;
  color: #B06A8C;
  margin-top: 16px;
  text-align: right;
}

/* ---------- 拍立得 ---------- */
.polaroid-zone { margin: 8px 0 8px; }
.zone-label {
  font-size: 11px; letter-spacing: .2em;
  color: var(--dim);
  margin-bottom: 16px;
}
.zone-label--block { margin: 32px 0 16px; }
.zone-note {
  font-size: 11px;
  color: var(--faint);
  margin-top: 14px;
}
.polaroid-row {
  display: flex; flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  padding-top: 8px;
}
.polaroid {
  width: 168px;
  background: #FFFAFC;
  border-radius: 2px;
  padding: 12px 12px 10px;
  box-shadow: -4px 12px 24px rgba(80,20,60,.4);
}
.polaroid:nth-child(1) { transform: rotate(-6deg); }
.polaroid:nth-child(2) { transform: rotate(4deg) translateY(26px); }
.polaroid:nth-child(3) { transform: rotate(-3deg); }
.polaroid__img {
  width: 100%; height: 146px;
  border-radius: 2px;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, #FFD9E8, #FFC4DA);
}
.polaroid__cap {
  font-family: var(--hand);
  font-size: 13px;
  color: #8A5570;
  text-align: center;
  margin-top: 8px;
}
.polaroid__ph {
  width: 100%; height: 146px;
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #C77B9B;
  background: linear-gradient(135deg, #FFD9E8, #FFC4DA);
}

/* ---------- 视频网格 ---------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.vslot {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #3D2246, #2A1631);
  border: 1px solid var(--stroke);
}
.vslot video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.vslot__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(38,22,43,.35);
  cursor: pointer;
}
.vslot__play svg { width: 44px; height: 44px; }
.vslot__cap {
  position: absolute;
  left: 10px; right: 10px; bottom: 8px;
  font-size: 11px;
  color: rgba(249,237,243,.65);
  z-index: 2;
}
.vslot--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: rgba(249,237,243,.5);
}

/* ---------- 照片网格 ---------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.pslot {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--stroke);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: rgba(249,237,243,.5);
}
.pslot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 播放器 ---------- */
.player {
  display: flex; align-items: center; gap: 16px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.player__disc { width: 64px; height: 64px; flex: none; }
.player__disc svg { width: 100%; height: 100%; display: block; }
.player.playing .player__disc { animation: spin 12s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.player__info { flex: 1; min-width: 0; }
.player__tag { font-size: 10px; letter-spacing: .1em; color: var(--rose); }
.player__name {
  font-family: var(--serif);
  font-size: 16px; color: var(--cream);
  margin: 4px 0 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player__progress {
  height: 3px; border-radius: 2px;
  background: #3A2340;
  cursor: pointer;
}
.player__fill {
  height: 100%; width: 0;
  border-radius: 2px;
  background: var(--pink);
}
.player__btn {
  width: 48px; height: 48px;
  flex: none;
  border: none; border-radius: 50%;
  background: var(--rose);
  color: #26162B;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.player__btn svg { width: 20px; height: 20px; }

.playlist { display: flex; flex-direction: column; gap: 2px; }
.track {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  border-radius: 10px;
  cursor: pointer;
}
.track__idx { font-size: 12px; color: var(--faint); width: 20px; flex: none; }
.track__name { flex: 1; font-size: 14px; color: var(--muted); }
.track__note { font-size: 11px; color: var(--pink); }
.track__dur { font-size: 12px; color: var(--faint); }
.track.active { background: rgba(255,158,199,.14); }
.track.active .track__name, .track.active .track__idx, .track.active .track__dur { color: var(--rose); }
.track.missing .track__name::after { content: "（音频待添加）"; font-size: 11px; color: var(--faint); }

/* ---------- 倒计时 ---------- */
.countdown {
  padding: 56px 24px;
  text-align: center;
  background: linear-gradient(180deg, #26162B, #361F3D);
}
.countdown__label { font-size: 12px; letter-spacing: .2em; color: var(--dim); }
.countdown__row {
  display: flex; justify-content: center; gap: 12px;
  margin: 20px 0 16px;
}
.countdown__cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 14px 20px;
}
.countdown__num { font-size: 40px; font-weight: 200; color: var(--cream); line-height: 1.1; }
.countdown__num--rose { color: var(--rose); }
.countdown__unit { font-size: 11px; color: var(--dim); }

/* ---------- 终章 ---------- */
.ending {
  padding: 80px 24px 64px;
  text-align: center;
}
.ending__stars { margin-bottom: 10px; }
.ending__stars svg { width: 200px; }
.ending__duo {
  width: 150px; height: 96px;
  margin: 0 auto 14px;
  animation: kittyBob 3.4s ease-in-out infinite;
}
.ending__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 48px;
  letter-spacing: .12em;
  color: var(--cream);
}
.ending__sub { font-size: 13px; letter-spacing: .15em; color: var(--dim); margin-top: 10px; }
.ending .hand-note { margin-top: 20px; }

/* ---------- 页脚 ---------- */
.footer {
  padding: 28px 24px calc(40px + env(safe-area-inset-bottom));
  text-align: center;
  background: var(--bg-deep);
}
.footer__line {
  display: block;
  width: 120px; height: 1px;
  margin: 0 auto 16px;
  background: rgba(255,158,199,.2);
}
.footer__text { font-size: 11px; color: var(--faint); }
.footer__en { font-family: "Caveat", var(--hand); font-size: 15px; color: var(--dim); margin-top: 4px; }

/* ---------- 降级：减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .star, .scroll-hint, .player.playing .player__disc, .hero-kitty, .moon-lamb, .ending__duo { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}