/* ============================================================
   生辰 · 雨夜南洋骑楼 · 电影感温馨生日页样式
   （从窗内向外望：湿润夜色 + 暖黄路灯 + 骑楼剪影 + 木质窗框 + 玻璃雨滴 + 胶片颗粒）
   ============================================================ */

:root {
  --night: #0d1418;         /* 雨夜底色 */
  --night-2: #141b1f;
  --warm: #e0a94e;          /* 路灯暖光 */
  --warm-dim: #a97c3f;
  --paper: #f4ead8;         /* 信笺纸 */
  --ink: #3a3227;
  --cinnabar: #a23e2f;
  --gold: #b98a4b;
}

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

html { overflow-x: hidden; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Songti SC", "Kaiti SC", serif;
  background: var(--night);
  min-height: 100vh;
  overflow-x: hidden;
  color: #f0e9da;
  line-height: 1.8;
}

/* ---------- 窗景层 ---------- */
.window-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #0d1418;
  background-image: url('/photos/window-scene.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}

/* 可读性柔暗遮罩 */
.scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 10, 14, .55) 0%, rgba(8, 10, 14, .25) 40%, rgba(8, 10, 14, .35) 60%, rgba(8, 10, 14, .7) 100%);
}

/* 窗外夜空（有灯光的湿润雾气） */
.street-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 40% at 50% 30%, rgba(60, 84, 92, .35), transparent 70%),
    linear-gradient(180deg, #10181d, #0b1014 70%);
}

/* 远处路灯暖光 */
.street-light {
  position: absolute;
  top: 20%;
  left: 22%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 169, 78, .55), rgba(224, 169, 78, .18) 45%, transparent 70%);
  filter: blur(8px);
  opacity: .9;
}

/* 骑楼剪影（一排低矮南洋骑楼） */
.shophouse {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  height: 46%;
}
.shophouse .roof {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12%;
  background:
    linear-gradient(180deg, #0a0e11, transparent),
    repeating-linear-gradient(90deg, #0b1013 0 30px, #080c0f 30px 60px);
  filter: blur(.5px);
}
.shophouse .body {
  position: absolute;
  top: 10%;
  bottom: 0;
  left: -4%;
  right: -4%;
  background:
    linear-gradient(180deg, #11181c 0%, #0b0f12 80%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 120px, rgba(255,255,255,.02) 120px 122px);
}
/* 骑楼窗户的暖光 */
.shophouse .window-lit {
  position: absolute;
  width: 11%;
  height: 18%;
  background: radial-gradient(circle at 50% 50%, rgba(224, 169, 78, .75), rgba(224, 169, 78, .28) 60%, transparent 90%);
  filter: blur(4px);
  opacity: .85;
}
.shophouse .window-lit:nth-of-type(1) { top: 26%; left: 14%; }
.shophouse .window-lit:nth-of-type(2) { top: 30%; left: 38%; }
.shophouse .window-lit:nth-of-type(3) { top: 24%; left: 62%; }
.shophouse .window-lit:nth-of-type(4) { top: 32%; left: 80%; }

/* 檐下灯笼（南洋味点缀） */
.shophouse .lantern {
  position: absolute;
  top: 7%;
  width: 3%;
  height: 16%;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 50% 40%, #e08a5a, #a13c2a 75%);
  box-shadow: 0 0 16px rgba(224, 138, 90, .7);
  opacity: .85;
}
.shophouse .lantern:nth-of-type(1) { left: 20%; }
.shophouse .lantern:nth-of-type(2) { left: 66%; }

/* 湿润的青石板路面（反光） */
.wet-road {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 0;
  height: 24%;
  background:
    linear-gradient(180deg, rgba(10, 14, 17, .85), #070a0c),
    repeating-linear-gradient(90deg, rgba(224, 169, 78, .05) 0 3px, transparent 3px 6px);
  filter: blur(1px);
}
.wet-road::before { /* 路面上的暖光倒影 */
  content: "";
  position: absolute;
  top: 10%;
  left: 20%;
  width: 260px;
  height: 6px;
  background: linear-gradient(90deg, transparent, rgba(224, 169, 78, .35), transparent);
  filter: blur(3px);
}

/* 玻璃上的雨（canvas 前景） */
#rain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

/* 胶片颗粒 + 暗角 */
.film-grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image:
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.5) 100%);
  opacity: .7;
}
.film-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity: .18;
  mix-blend-mode: overlay;
}

/* ---------- 木质窗框 ---------- */
.window-frame {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.window-frame .bar {
  position: absolute;
  background: linear-gradient(180deg, #1a110a, #120c06);
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.window-frame .h1 { top: 0; left: 0; right: 0; height: 7px; }
.window-frame .h2 { bottom: 0; left: 0; right: 0; height: 7px; }
.window-frame .v1 { left: 0; top: 0; bottom: 0; width: 7px; }
.window-frame .v2 { right: 0; top: 0; bottom: 0; width: 7px; }
/* 中竖梃 */
.window-frame .bar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%; width: 5px;
  background: linear-gradient(180deg, #1a110a, #120c06);
  transform: translateX(-50%);
}
.window-frame .bar.v1::after, .window-frame .bar.v2::after { display: none; }

/* ---------- 主内容（翻页长信） ---------- */
.page {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: max(72px, env(safe-area-inset-top)) 20px 110px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow-x: hidden; /* 防个别元素横向溢出，导致 fixed 底栏/按钮视觉偏移 */
}

.seal {
  display: inline-block;
  margin-bottom: 22px;
  padding: 6px 16px;
  color: #fff;
  background: var(--cinnabar);
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: .3em;
  text-indent: .3em;
  font-family: "Kaiti SC", serif;
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
}

/* ---------- 一页 ---------- */
.sheet {
  display: none;
  width: 100%;
}
.sheet.active { display: flex; flex-direction: column; align-items: center; width: 100%; animation: fadeUp .6s ease both; }

/* 封面 */
.sheet.cover .cover-eyebrow {
  color: rgba(245,239,226,.6);
  letter-spacing: .4em;
  text-indent: .4em;
  font-size: 13px;
  font-family: "Kaiti SC", serif;
  margin-bottom: 26px;
}
.sheet.cover .cover-title {
  font-family: "Kaiti SC", "STKaiti", serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 8vw, 3rem);
  line-height: 1.5;
  color: #f5efe2;
  letter-spacing: .1em;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.sheet.cover .cover-sign {
  margin-top: 30px;
  color: rgba(245,239,226,.55);
  letter-spacing: .2em;
  font-family: "Kaiti SC", serif;
}

/* 内文页（毛玻璃） */
.sheet-eyebrow {
  color: #ffcf7a;
  font-size: 12px;
  letter-spacing: .3em;
  text-indent: .3em;
  margin-bottom: 18px;
  font-family: "Kaiti SC", serif;
}
.sheet-body {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 32px 26px 24px;
  background: rgba(244, 236, 220, .13);
  border: 1px solid rgba(244, 236, 220, .22);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
}
.sheet-body p {
  margin-bottom: 15px;
  font-size: clamp(15px, 4.2vw, 17px);
  line-height: 2;
  color: #f5efe2;
  font-family: "Kaiti SC", "STKaiti", "Songti SC", serif;
}
.sheet-body b, .sheet-body .sheet-highlight { color: #ffcf7a; font-weight: 500; }
.sheet-body .sheet-highlight { display: block; }
.sheet-body .sheet-emoji { text-align: center; font-size: 24px; }
.sheet-body .sheet-keysub {
  color: #ffcf7a;
  letter-spacing: .1em;
  font-weight: 500;
}

/* 翻页按钮 */
.next-hint {
  margin-top: 26px;
  padding: 10px 26px;
  align-self: center; /* 显式水平居中，不随正文内容宽度漂移 */
  background: none;
  border: 1px solid rgba(240,233,218,.5);
  border-radius: 999px;
  color: #f0e9da;
  font-size: 14px;
  letter-spacing: .2em;
  font-family: "Kaiti SC", serif;
  cursor: pointer;
  transition: all .25s;
}
.next-hint:hover { background: rgba(240,233,218,.9); color: #171c20; }

/* 双按钮行 */
.sheet-buttons { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 24px; }

/* 幽灵按钮（链接） */
.ghost-btn {
  display: inline-block;
  padding: 11px 24px;
  background: none;
  border: 1px solid rgba(240,233,218,.55);
  border-radius: 999px;
  color: #f0e9da;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .15em;
  font-family: "Kaiti SC", serif;
  cursor: pointer;
  transition: all .25s;
  box-sizing: border-box;
  max-width: 100%;
}
.ghost-btn:hover { background: rgba(240,233,218,.9); color: #171c20; }

/* 落款页 */
.sheet.end .end-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 30px 40px;
}
.sheet.end .end-emoji { font-size: 40px; margin-bottom: 22px; }
.sheet.end .end-line {
  font-family: "Kaiti SC", serif;
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  color: #f5efe2;
  margin-bottom: 20px;
}
.sheet.end .end-sign {
  color: rgba(245,239,226,.8);
  letter-spacing: .15em;
  font-family: "Kaiti SC", serif;
  margin-bottom: 30px;
}
.sheet.end .rain-btn { margin-top: 6px; }

/* ---------- 底部翻页条 ---------- */
.letter-nav {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100vw - 24px); /* 窄屏防溢出 */
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  background: rgba(13, 18, 22, .75);
  border: 1px solid rgba(240,233,218,.15);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(240,233,218,.35);
  background: none;
  color: #f0e9da;
  font-size: 16px;
  cursor: pointer;
}
.nav-btn:disabled { opacity: .3; cursor: default; }
#page-indicator {
  color: rgba(245,239,226,.75);
  font-size: 12px;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.nav-dots { display: flex; gap: 5px; }
.nav-dots .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(240,233,218,.3);
  cursor: pointer;
}
.nav-dots .dot.on { background: #ffcf7a; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}