/* ============================================================
   点亮这一岁 · 生日纪念站（浅色版）
   取材料包的「白天」世界：暖白纸底 #fbfaf4 / 天空蓝 #c4dff0 /
   充气字渐变 #ffffff→#cfe6f7→#aabdd4 / 荧光黄徽章 / mono 直角标签
   ============================================================ */

@font-face { font-family:'tiktok'; src:url('fonts/TikTokSans.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'mono'; src:url('fonts/GeistMono.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'tronica-mono'; src:url('fonts/DepartureMono-Regular.otf') format('opentype'); font-weight:400; font-display:swap; }

:root {
  /* 主题基底（light，来自设计库实测值） */
  --bg:#fbfaf4;
  --elevated:#efede7;
  --ink:#141412;
  --text:#1b2b3a;
  --text2:rgba(54,54,48,.66);
  --text3:rgba(54,54,48,.42);
  --text4:rgba(54,54,48,.2);
  --line:rgba(54,54,48,.12);
  /* 场景色（设计库白天场景，像素估算值） */
  --sky:#c4dff0;
  --sky-glow:#e5eff0;
  --sky-deep:#aabdd4;
  --inflatable-hi:#cfe6f7;
  /* 强调色 */
  --lime:#c4dbe7;
  --coral:#ee7b69;
  --cyan:#6bddef;
  --orange:#feb643;
  --purple:#b06bff;
  --warm-panel:#d9d3cc;
  --lilac-panel:#e7e4f4;
  /* 字体 */
  --sans:"tiktok",sans-serif;
  --mono:"mono",monospace;
  --display:"tronica-mono",monospace;
  /* 动效（设计库实测值） */
  --dur-fast:.15s;
  --dur-hover:.2s;
  --ease-std:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-66:cubic-bezier(.66,0,.01,1);
  --pop:cubic-bezier(.34,1.56,.64,1);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  overflow-x:hidden;
}
button { font:inherit; }
:focus-visible { outline:2px solid #617f91; outline-offset:2px; }

/* Owner-selected childhood objects: one transparent atlas, mobile first. */
#childhood-fall {
  position:fixed; inset:0; z-index:2; overflow:hidden;
  pointer-events:none; contain:layout paint; --childhood-size:82px;
}
#childhood-fall[hidden], .childhood-object[hidden] { display:none; }
.childhood-object {
  position:absolute; left:0; top:0;
  width:var(--childhood-size); height:var(--childhood-size);
  background-image:url('childhood/objects-atlas.png');
  background-size:300% 300%; background-repeat:no-repeat;
  filter:drop-shadow(0 5px 7px rgba(76,115,147,.13));
  will-change:transform; pointer-events:none;
}
@media (prefers-reduced-motion:reduce) {
  .childhood-object { will-change:auto; }
}

/* ---------- 画布与顶标 ---------- */
#gl { position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; }

.mono { font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; }
.topline {
  position:fixed; inset:0 0 auto 0; z-index:50; pointer-events:none;
  display:flex; justify-content:space-between; padding:14px 18px;
  font-size:12px; color:var(--text);
  background:linear-gradient(to bottom, rgba(251,250,244,.85), rgba(251,250,244,0));
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent); mask-image:linear-gradient(to bottom,#000 55%,transparent);
}
.tl-dim { color:var(--text3); }
/* 入夜（烟火时刻）：顶标转深底浅字，成为夜空里的 HUD */
body.night .topline {
  color:rgba(240,244,255,.92);
  background:linear-gradient(to bottom, rgba(12,18,44,.55), rgba(12,18,44,0));
}
body.night .tl-dim { color:rgba(240,244,255,.45); }

/* ---------- 叙事流骨架 ---------- */
#flow { position:relative; z-index:1; }
.panel {
  min-height:100vh; min-height:100svh;
  padding:96px 56px; display:flex; flex-direction:column; justify-content:center;
  pointer-events:none; /* 点击穿透到画布（戳泡泡）；交互元素单独恢复 */
}
/* 荧光黄徽章化 kicker（设计库 pill 母题） */
.kicker {
  display:inline-block; align-self:flex-start;
  background:var(--lime); color:#000; border-radius:18px;
  font-size:11.5px; letter-spacing:.1em; padding:3px 7px; margin:0 0 20px;
}
.letter-entry .kicker, .hero .kicker { align-self:center; }
.h2 { font-weight:700; text-transform:uppercase; letter-spacing:-.02em; line-height:1.05; font-size:clamp(1.9rem,4vw,2.9rem); margin:0 0 14px; color:var(--text); }
.lede { font-size:1.05rem; color:var(--text2); max-width:62ch; line-height:1.6; margin:0 0 24px; }
.lede strong { color:var(--ink); }
.note { font-size:11px; color:var(--text3); margin:14px 0 0; }
.lime { color:#617f91; }

/* ---------- 01 HERO ---------- */
.hero { align-items:center; text-align:center; justify-content:center; position:relative; overflow:hidden; }
.prompt {
  position:absolute; bottom:92px; left:50%; transform:translateX(-50%);
  white-space:nowrap;
  font-size:clamp(13px,1.6vw,16px); color:var(--text2);
  animation:prompt-pulse 2.4s var(--ease-std) infinite;
}
.caret { color:#617f91; animation:caret-blink 1.1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity:0; } }
@keyframes prompt-pulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.hero-title { text-align:center; }
.hero-title[hidden], .scroll-hint[hidden] { display:none; }
.display {
  font-weight:700; text-transform:uppercase; line-height:.98; letter-spacing:-.025em;
  font-size:clamp(3rem,11vw,7.5rem); margin:0 0 18px; color:var(--text);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
/* 充气字（设计库浅色 hero 的渐变配方） */
.inflatable-word {
  background:linear-gradient(165deg,#ffffff 8%,var(--inflatable-hi) 48%,var(--sky-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 10px 18px rgba(90,130,190,.35));
}
.hero-sub { color:var(--text2); font-size:1.1rem; margin:0; }
.scroll-hint {
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  font-size:12px; color:var(--text2);
  animation:hint-bob 1.6s var(--ease-std) infinite;
}
@keyframes hint-bob { 0%,100% { transform:translate(-50%,0); } 50% { transform:translate(-50%,8px); } }
.fade-up { animation:fade-up .9s var(--ease-out) both; }
@keyframes fade-up { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }

/* 贴纸（源站 /sticker_img 素材，惊喜小互动：hover 弹起 / 点击 boing） */
.hero-sticker {
  position:absolute; pointer-events:auto; cursor:pointer; user-select:none;
  filter:drop-shadow(0 12px 20px rgba(60,90,140,.28));
  transition:transform .45s var(--pop);
  animation:sticker-float 5s ease-in-out infinite;
}
.st-1 { width:clamp(70px,8.5vw,116px); right:13%; top:15%; transform:rotate(-12deg); }
.st-2 { width:clamp(56px,6.5vw,92px); left:9%; top:24%; transform:rotate(10deg); animation-delay:-1.6s; }
.st-3 { width:clamp(48px,5.5vw,80px); right:24%; bottom:16%; transform:rotate(14deg); animation-delay:-3.2s; }
@keyframes sticker-float { 0%,100% { translate:0 0; } 50% { translate:0 -10px; } }
.st-1:hover { transform:rotate(-4deg) scale(1.16); }
.st-2:hover { transform:rotate(2deg) scale(1.16); }
.st-3:hover { transform:rotate(6deg) scale(1.16); }
.hero-sticker.boing { animation:boing .6s var(--pop); }
@keyframes boing { 0% { scale:1; } 35% { scale:1.28 .82; } 65% { scale:.9 1.12; } 100% { scale:1; } }
@media (prefers-reduced-motion: reduce) { .hero-sticker { animation:none; } }

/* ---------- 02 日历 ---------- */
.cal-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:10px;
  max-width:1240px; width:100%;
}
.cal-month { border:1px solid var(--line); background:rgba(255,255,255,.78); padding:10px; border-radius:18px; }
.cal-label { font-family:var(--display); font-size:11px; letter-spacing:.08em; color:#617f91; margin:0 0 8px; }
.cal-label .in-range { color:var(--text3); font-size:10px; margin-left:6px; }
.cal-week, .cal-days { display:grid; grid-template-columns:repeat(7,1fr); }
.cal-week span { font-family:var(--display); font-size:9px; color:var(--text3); text-align:center; padding:2px 0; }
.cal-days span {
  font-family:var(--mono); font-size:10.5px; text-align:center; padding:3px 0;
  color:var(--text2); border:1px solid transparent; aspect-ratio:1; display:grid; place-items:center;
}
.cal-days .blank { visibility:hidden; }
.cal-days .dim { color:var(--text4); }
.cal-days .day1 { background:var(--lime); color:#000; font-weight:700; }
.cal-days .day365 { border-color:#90bbce; color:#5f8d9f; }

/* ---------- 03 记忆 ---------- */
.mem-track {
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px 18px; pointer-events:auto;
  scrollbar-width:thin; scrollbar-color:var(--text4) transparent;
}
.mem-track::-webkit-scrollbar { height:6px; }
.mem-track::-webkit-scrollbar-thumb { background:var(--text4); }
.mem-card { flex:0 0 min(430px,80vw); scroll-snap-align:start; text-decoration:none; color:inherit; padding:8px; }
.mem-preview {
  position:relative; aspect-ratio:1332/750; overflow:hidden;
  border:1px solid rgba(54,54,48,.16); display:grid; place-items:center;
  box-shadow:0 14px 28px rgba(60,90,140,.14);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.mem-card:hover .mem-preview { transform:translateY(-6px) rotate(-.5deg); box-shadow:0 22px 40px rgba(60,90,140,.2); }
.mem-ph { font-family:var(--display); font-size:12px; color:rgba(0,0,0,.45); text-transform:uppercase; letter-spacing:.1em; }
.mem-pill {
  position:absolute; top:8px; right:8px; background:var(--lime); color:#000;
  font-family:var(--display); font-size:11px; text-transform:uppercase; padding:0 4px;
}
.pv-warm  { background:var(--warm-panel); }
.pv-coral { background:var(--coral); }
.pv-icon  { background:#1d1d1b; }
.pv-lilac { background:var(--lilac-panel); }
.pv-cyan  { background:var(--cyan); }
.pv-icon .mem-ph, .pv-cyan .mem-ph { color:rgba(255,255,255,.6); }
.pv-empty { background:rgba(255,255,255,.5); border:2px dashed var(--text4); }
.pv-empty .mem-ph { color:var(--text3); }
.mem-meta { display:flex; justify-content:space-between; gap:10px; padding-top:12px; font-size:.82rem; text-transform:uppercase; }
.mem-title { font-weight:500; color:var(--ink); }
.mem-year { font-family:var(--display); font-variant-numeric:tabular-nums; color:var(--text2); white-space:nowrap; }
.mem-cap { font-size:.85rem; color:var(--text3); margin:6px 8px 0; line-height:1.55; }

/* ---------- 04 信件入口 ---------- */
.letter-entry { align-items:center; text-align:center; }
.letter-btn {
  pointer-events:auto; cursor:pointer; background:none; border:0; color:var(--text);
  font-weight:700; text-transform:uppercase; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(1.6rem,4.6vw,3.4rem);
  text-decoration:underline; text-underline-offset:8px; text-decoration-thickness:2px;
  transition:color var(--dur-hover) var(--ease-std), text-underline-offset var(--dur-hover) var(--ease-out);
  padding:8px; max-width:20em;
}
.letter-btn:hover { color:#e8654f; text-underline-offset:12px; }

/* ---------- 05 漂流瓶 ---------- */
.bottle-legend { list-style:none; display:flex; gap:22px; padding:0; margin:10px 0 0; font-size:12px; color:var(--text2); flex-wrap:wrap; }
.bottle-legend li { display:flex; align-items:center; gap:8px; }
.dot { width:10px; height:10px; display:inline-block; }
.dot-happy { background:#d9b6a5; }
.dot-sad { background:#90bbce; }
.dot-lost { background:#b3a5cc; }

/* ---------- 06 收尾 ---------- */
.closing { align-items:center; text-align:center; }
.closing-text {
  font-size:clamp(1.15rem,2.6vw,1.9rem); line-height:1.7; color:#4a4038;
  max-width:32em; margin:0;
}
.closing-text b { color:var(--ink); font-weight:600; }
.closing-note { margin-top:34px; color:#8a8073; }

/* ---------- 页脚 ---------- */
.doc-footer {
  position:relative; z-index:1; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:18px 56px; font-size:11px; color:var(--text3);
  pointer-events:none; background:rgba(251,250,244,.7);
}

/* ---------- 弹窗：愿望 ---------- */
.modal {
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:rgba(40,60,100,.32); backdrop-filter:blur(8px); padding:20px;
}
.modal[hidden] { display:none; }
.modal-card {
  width:min(430px,92vw); background:#fffdf7; border:1px solid rgba(54,54,48,.22);
  box-shadow:0 30px 70px rgba(40,70,120,.25);
  padding:26px; animation:fade-up .5s var(--ease-out) both;
}
.modal-card label { display:block; font-size:12px; color:var(--text2); margin:0 0 10px; }
.modal-card input {
  width:100%; padding:12px; background:var(--bg); color:var(--ink);
  border:1px solid var(--text4); border-radius:18px; font-family:var(--sans); font-size:1rem;
  margin-bottom:14px;
}
.modal-card input:focus { border-color:#d9b6a5; outline:none; }
.btn-lime {
  width:100%; font-family:var(--display); text-transform:uppercase; font-size:14px;
  background:var(--lime); color:#000; border:0; border-radius:18px; padding:12px 18px;
  cursor:pointer; transition:filter var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std);
}
.btn-lime:hover { filter:brightness(1.04); transform:translateY(-1px); }
.modal-card .note { text-align:center; }

/* ---------- 弹窗：全屏信件 ---------- */
.letter-modal {
  position:fixed; inset:0; z-index:320; background:rgba(56,76,112,.4);
  backdrop-filter:blur(6px);
  display:grid; place-items:center; padding:4vh 18px;
}
.letter-modal[hidden] { display:none; }
.letter-sheet {
  width:min(720px,100%); max-height:92vh; overflow-y:auto;
  background:#fbfaf4; color:#000; border-radius:18px;
  border:1px solid rgba(54,54,48,.18);
  box-shadow:0 40px 90px rgba(30,55,100,.35);
  padding:34px clamp(20px,5vw,56px) 46px;
  animation:fade-up .5s var(--ease-out) both;
}
.letter-top { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#8a8779; margin-bottom:26px; }
.btn-ghost {
  font-size:12px; background:transparent; color:var(--ink); border:1px solid rgba(0,0,0,.3);
  padding:8px 14px; cursor:pointer; border-radius:18px;
  transition:border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.btn-ghost:hover { border-color:#000; background:var(--lime); }
.letter-body h3 { font-size:clamp(1.6rem,4vw,2.4rem); font-weight:700; text-transform:uppercase; letter-spacing:-.02em; line-height:1.05; margin:0 0 20px; }
.letter-body p { font-size:1rem; line-height:1.625; color:rgba(54,54,48,.85); margin:0 0 16px; max-width:62ch; }
.letter-body .sig { font-family:var(--display); font-size:12px; text-transform:uppercase; color:#8a8779; margin-top:30px; }

/* ---------- 漂流瓶 Toast ---------- */
.toast {
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%);
  z-index:400; width:min(520px,92vw);
  background:#fffdf7; border:1px solid rgba(54,54,48,.2); border-left:3px solid #d9b6a5;
  box-shadow:0 18px 44px rgba(40,70,120,.22);
  padding:14px 18px; font-family:var(--display); font-size:13px; line-height:1.6; color:var(--ink);
  animation:toast-in .35s var(--ease-out) both;
}
.toast[hidden] { display:none; }
.toast .t-cat { display:block; font-size:10px; letter-spacing:.1em; margin-bottom:4px; }
.toast.t-happy { border-left-color:#d9b6a5; } .toast.t-happy .t-cat { color:#977768; }
.toast.t-sad { border-left-color:#90bbce; } .toast.t-sad .t-cat { color:#5f8d9f; }
.toast.t-lost { border-left-color:#b3a5cc; } .toast.t-lost .t-cat { color:#8d7da4; }
@keyframes toast-in { from { opacity:0; transform:translate(-50%,14px); } to { opacity:1; transform:translate(-50%,0); } }
.toast.out { animation:toast-out .3s var(--ease-std) both; }
@keyframes toast-out { to { opacity:0; transform:translate(-50%,10px); } }

/* ---------- 响应式（设计库实测：移动 72px 16px） ---------- */
@media (max-width:1023px) {
  .panel { padding:72px 16px; }
  .doc-footer { padding:18px 16px; }
  .bottle-legend { gap:14px; }
  .st-1 { right:6%; } .st-2 { left:4%; } .st-3 { right:14%; }
}

/* ---------- 动效偏好（设计库原则：尊重 reduced-motion） ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .prompt, .caret, .scroll-hint, .hero-sticker { animation:none; }
  .fade-up, .modal-card, .letter-sheet, .toast { animation-duration:.01s; }
  /* 揭示页与卡片弹出：直接落位，不弹不飘 */
  #wish-modal.revealed .reveal-word { animation:none!important; opacity:1; }
  .wish-stage, #wish-modal.popped .reveal-words, #wish-modal.popped .reveal-hud { transition-duration:.01s; }
  .dream-star, .dream-bokeh { animation:none; }
  .blow-button:not([hidden]) { animation:none; }
}

/* Candle ceremony — mobile first, true black until the wish is sealed. */
body.opening { background:#000; }
body.opening .topline, body.opening .hero-sticker { visibility:hidden; }
body.opening #hero { touch-action:none; }
body.opening .prompt {
  color:rgba(255,245,236,.78); font-size:15px; letter-spacing:.16em;
  bottom:16%; animation:none;
}
/* 吹蜡烛 = 许愿之后的「下一页」入口。
   纯黑舞台上必须够亮够大：实测原来 149×52、深棕 25% 透明度几乎看不见。 */
.blow-button {
  position:absolute; bottom:12%; left:50%; transform:translateX(-50%);
  pointer-events:auto; min-width:min(268px,80vw); min-height:66px;
  padding:12px 30px; display:flex; flex-direction:column; align-items:center; gap:3px;
  border:1px solid rgba(255,214,160,.55); border-radius:30px;
  background:linear-gradient(150deg,rgba(255,232,196,.20),rgba(255,190,116,.10) 62%,rgba(255,168,92,.16));
  color:#ffe9cf; cursor:pointer; backdrop-filter:blur(14px);
  box-shadow:0 0 34px rgba(255,178,102,.24),inset 0 1px 0 rgba(255,240,214,.42);
}
.blow-main {font-size:17px;font-weight:500;letter-spacing:.14em;}
.blow-sub {font-size:10px;letter-spacing:.2em;color:rgba(255,214,176,.82);}
/* 登场：从下方微微浮起，之后转为烛火般的呼吸光晕 */
.blow-button:not([hidden]) {animation:blow-enter .8s var(--pop) both,blow-breathe 2.6s ease-in-out .8s infinite;}
@keyframes blow-enter {from{opacity:0;transform:translateX(-50%) translateY(26px);}to{opacity:1;transform:translateX(-50%);}}
@keyframes blow-breathe {0%,100%{box-shadow:0 0 30px rgba(255,178,102,.2),inset 0 1px 0 rgba(255,240,214,.42);}
  50%{box-shadow:0 0 48px rgba(255,190,120,.36),inset 0 1px 0 rgba(255,240,214,.55);}}
.blow-button:hover {border-color:rgba(255,228,186,.9);}
.blow-button[hidden] { display:none; }
/* ---------- 许愿页：以蛋糕为圆心的滑动驱动全屏扩展 ---------- */
#wish-modal {
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center; padding:0; overflow:hidden;
  background:rgba(9,14,28,.72);
  /* --wp: 滑动进度 0→1；--wx/--wy: 蛋糕圆心（由 JS 写入）。圆心+半径共同构成扩展遮罩 */
  clip-path:circle(calc(var(--wp,0) * var(--wmax,150vmax)) at var(--wx,50%) var(--wy,43%));
  transition:clip-path .12s linear;
}
/* 松手后：够就顺势合拢成整屏，不够就弹回圆心 */
#wish-modal.snapping {transition:clip-path .5s cubic-bezier(.22,.72,.2,1);}
#wish-modal[hidden] { display:none; }
/* 扩张瞬间的暖色光幕：让「打开」像光从蛋糕里漫出来 */
.wish-expansion {position:absolute;inset:0;pointer-events:none;opacity:calc(var(--wp,0) * 1.25);
  background:radial-gradient(circle at var(--wx,50%) var(--wy,43%),
    rgba(255,214,158,.85) 0%,rgba(255,170,96,.42) 30%,rgba(255,140,70,.12) 55%,rgba(255,130,60,0) 76%);
  mix-blend-mode:screen;}
/* 扩展完成后暖光幕退场，把舞台让给浅蓝揭示页 */
#wish-modal.revealed .wish-expansion {opacity:0;transition:opacity .9s ease .25s;}

/* ===== 充气玻璃字组件（图一/图二共用）=====
   三层叠出气球感：::before 体积暗部（下方模糊副本）、主体渐变（上亮下深）、
   ::after 顶部斜向高光。data-text 必须与文本内容一致。 */
.bubble-word {
  position:relative; display:inline-block; white-space:nowrap;
  color:transparent;
  background:linear-gradient(178deg,#f7fcff 4%,#d3e9f9 30%,#96c0e6 60%,#6ea3d5 86%,#8ab7e0 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 3px 3px rgba(255,255,255,.8)) drop-shadow(0 13px 17px rgba(84,130,180,.42));
}
.bubble-word::before {          /* 体积暗部：让字读起来是鼓出来的 */
  content:attr(data-text); position:absolute; inset:0; z-index:-1;
  color:#4d7fac; filter:blur(7px); transform:translateY(.055em) scale(1.02);
}
.bubble-word::after {           /* 顶部高光 */
  content:attr(data-text); position:absolute; inset:0;
  background:linear-gradient(166deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.55) 20%,rgba(255,255,255,0) 46%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transform:translate(-1.2%,-2.8%);
}

/* ===== 图二揭示页：独立透明玻璃字 + 同源天空光纹；保留真实的界面文字 ===== */
.reveal-stage {
  position:absolute; inset:0; overflow:hidden;
  background:#bfdef5;user-select:none;-webkit-user-select:none;
}
.reveal-sky {
  position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;
}
.reveal-hud {position:absolute;inset:0;font-family:var(--mono);font-weight:400;}
.reveal-hud>span {
  position:absolute;font-size:clamp(6px,1.3vw,12px);letter-spacing:.26em;
  color:#344f60;line-height:1.6;white-space:nowrap;
}
.reveal-hud .rh-tl {top:5.9%;left:7.35%;font-size:clamp(7px,1.5vw,14px);letter-spacing:.33em;}
.reveal-hud .rh-tl::after {content:"";display:block;width:3.4vw;max-width:32px;height:1px;background:#7599ac;margin-top:1vh;}
.reveal-hud .rh-tl-sub {top:9.75%;left:7.35%;}
.reveal-hud .rh-tr {top:6%;right:6.6%;display:flex;align-items:center;gap:3.8vw;font-size:clamp(5.5px,1.18vw,11px);letter-spacing:.2em;}
.reveal-hud .rh-tr b {font-weight:400;}
.reveal-hud .rh-burger {width:clamp(7px,2vw,20px);height:auto;opacity:.48;}
.reveal-hud .rh-bl {bottom:7.15%;left:7.35%;}
.reveal-hud .rh-bl::before {content:"";display:block;width:3.4vw;max-width:32px;height:1px;background:#7599ac;margin-bottom:1.1vh;}
.reveal-hud .rh-br {bottom:8.35%;right:6.6%;text-align:right;}
.reveal-hud .rh-br::after {content:"";display:block;width:3.4vw;max-width:32px;height:1px;background:#7599ac;margin:1.1vh 0 0 auto;}
.reveal-words {
  position:absolute;left:50%;top:49.6%;transform:translate(-50%,-50%);
  width:min(95%,90svh,1000px);pointer-events:none;
  transition:filter .7s ease,transform .7s var(--ease-out);
}
.reveal-word {
  display:block;width:100%;height:auto;opacity:0;filter:saturate(.84) brightness(1.025);
}
#wish-modal.revealed .reveal-word {animation:glass-reveal 1.1s cubic-bezier(.2,.65,.2,1) both;}
@keyframes glass-reveal {
  from {opacity:0;transform:translateY(16px) scale(.94);}
  to {opacity:1;transform:none;}
}
/* 许愿卡弹出时：揭示页轻轻退后（压暗 + 微缩），不抢焦点 */
#wish-modal.popped .reveal-words {filter:brightness(.93) saturate(.95);transform:translate(-50%,-50%) scale(.96);
  transition:filter .7s ease,transform .7s var(--ease-out);}
#wish-modal.popped .reveal-hud {opacity:.5;transition:opacity .7s ease;}
/* 滑动态：蛋糕轻微上移让位并压暗，像被「收进」屏幕。
   注意 #ceremony-stage 在 #flow 内部，与 #wish-modal 并非兄弟，故改用 body[data-phase] 驱动 */
body:has(#wish-modal.revealed:not([hidden])) .earth-composition {transform:translate(-50%,-50%);}
body:has(#wish-modal.popped) .cake-body {filter:brightness(.82) saturate(.92);}
.cake-body,.earth-composition {transition:transform .8s var(--ease-out),filter .8s var(--ease-out);}

/* 全屏许愿弹窗的卡片。
   ⚠️ 类名必须叫 wish-stage 不能叫 wish-page：wish.html 用 <body class="wish-page">
   作为整页容器，两者同名会互相覆盖（曾导致卡片被拉成全屏灰蓝竖柱）。 */
.wish-stage {
  position:relative; width:min(440px,88vw); max-height:88svh; overflow-y:auto;
  /* 底部留出 60px：屏幕底部的「↑ 上滑」提示会浮在这一带，卡片内容不能压到它 */
  padding:38px 34px 68px; border-radius:32px; text-align:center; color:#1d3b55;
  background:linear-gradient(158deg,rgba(255,255,255,.94) 0%,rgba(199,231,250,.88) 46%,rgba(148,200,236,.86) 100%);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.96),inset 0 -30px 46px rgba(255,255,255,.32),
    inset 0 0 40px rgba(140,196,235,.30),0 30px 80px rgba(6,22,48,.55);
  backdrop-filter:blur(26px) saturate(2.2); -webkit-backdrop-filter:blur(26px) saturate(2.2);
  /* 滑动拖拽会顺带选中文字，手势页必须禁止选中 */
  user-select:none; -webkit-user-select:none;
  overscroll-behavior:contain;
  /* 必须清掉基类 .modal-card 的 fade-up：它的 fill-mode:both 会把 transform 锁死在
     translateY(0)，吃掉弹出动画。*/
  animation:none;
  /* 揭示页先登场，卡片保持隐藏；#wish-modal.popped 时才弹簧弹出 */
  opacity:0;
  transform:translateY(48px) scale(.88);
  transition:opacity .32s ease,transform .6s var(--pop);
  pointer-events:none;
}
#wish-modal.popped .wish-stage {opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.wish-stage::before {content:"";position:absolute;inset:-40% -10% auto -10%;height:70%;pointer-events:none;
  background:linear-gradient(170deg,rgba(255,255,255,.66),rgba(255,255,255,0) 62%);}
.wish-stage > * {position:relative;}

.wish-stage .wish-eyebrow {font-size:11px;letter-spacing:.34em;color:#5d8aa8;margin:0 0 10px;}
.wish-title {font-family:BirthdayHand,'KaiTi',serif;font-weight:400;font-size:40px;line-height:1.25;
  letter-spacing:.06em;margin:0 0 12px;color:#1b3850;}
.wish-sub {font-size:13px;line-height:1.85;color:#2f5c7a;margin:0 0 22px;}

/* 二维码托底：白色卡 + 柔光，保证任何背景下都扫得出来 */
.wish-frame {position:relative;display:block;width:max-content;margin:0 auto 6px;padding:14px;border-radius:26px;
  background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 10px 30px rgba(30,80,130,.22);}
.wish-qr {width:172px;height:172px;background:#fff;border-radius:14px;overflow:hidden;position:relative;z-index:1;}
/* 二维码生成前的骨架：留一个带扫描纹的占位块，避免卡片中间出现一个空圆点 */
.wish-qr:not(:has(svg)) {background:
  repeating-linear-gradient(90deg,#eef5fa 0 6px,#e2eef6 6px 12px);
  animation:qr-breathe 2.2s ease-in-out infinite;}
.wish-qr svg {display:block;width:100%;height:100%;}
.wish-scan-glow {position:absolute;inset:-6px;border-radius:30px;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 50%,rgba(150,215,255,.5),rgba(150,215,255,0) 68%);
  animation:qr-breathe 3.4s ease-in-out infinite;}
@keyframes qr-breathe {0%,100%{opacity:.5;}50%{opacity:.95;}}

.wish-direct-link {display:inline-block;font-size:12px;color:#3d7ea8;margin:10px 0 20px;
  text-decoration-color:rgba(61,126,168,.45);}
.wish-direct-link[hidden] {display:none;}

/* 上滑提示：贴在视口底部，用一层暗色渐变衬底保证在浅色卡片上也读得清，
   且不与卡片内的隐私文案叠在一起 */
.wish-swipe-hint {position:absolute;left:50%;bottom:max(26px,env(safe-area-inset-bottom));
  transform:translateX(-50%);font-size:11.5px;letter-spacing:.2em;color:rgba(255,244,230,.86);
  text-shadow:0 2px 10px rgba(0,0,0,.6);opacity:0;transition:opacity .5s;pointer-events:none;
  padding:9px 20px;border-radius:999px;
  background:radial-gradient(ellipse at center,rgba(8,16,34,.62),rgba(8,16,34,0) 78%);}
#wish-modal.hint .wish-swipe-hint {opacity:1;animation:hint-bob 2.2s ease-in-out infinite;}
@keyframes hint-bob {0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-7px);}}

.wish-soft-button {
  width:100%; min-height:50px; padding:13px 16px; border:0; border-radius:26px;
  color:#123049; font-size:15px; font-weight:500; letter-spacing:.06em; cursor:pointer;
  background:linear-gradient(140deg,#f6fcff 0%,#c2e2f7 48%,#93cdec 100%);
  box-shadow:0 10px 24px rgba(30,90,145,.30), inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .18s var(--ease-std), box-shadow .18s var(--ease-std), opacity .18s var(--ease-std);
}
.wish-soft-button:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 14px 30px rgba(30,90,145,.36), inset 0 1px 0 rgba(255,255,255,.95); }
.wish-soft-button:disabled {
  color:#3f6a88; background:linear-gradient(140deg,#e6f1f8,#c6dced);
  box-shadow:inset 0 0 0 1px rgba(120,165,200,.45); cursor:default;
}
.wish-status { color:#22506e; font-size:12px; line-height:1.6; min-height:20px; margin:14px 0 0; font-weight:500; }
.wish-stage .wish-privacy { color:#25506d; font-size:11px; line-height:1.6; margin:14px 0 0; }
#light-reveal { position:fixed; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
#light-reveal[hidden] { display:none; }
#light-reveal::before {
  content:""; position:absolute; width:240vmax; height:240vmax; left:50%; top:44%;
  border-radius:50%; transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,#fff4d8 0%,#f3decb 20%,#c6e2ee 43%,rgba(196,223,240,0) 70%);
}
#light-reveal.spread::before { animation:candle-spread 2.9s cubic-bezier(.2,.65,.25,1) both; }
@keyframes candle-spread {
  0% { transform:translate(-50%,-50%) scale(.001); opacity:0; }
  18% { opacity:.85; }
  64% { transform:translate(-50%,-50%) scale(1); opacity:1; }
  100% { transform:translate(-50%,-50%) scale(1.05); opacity:0; }
}
.wish-page { min-height:100svh; display:grid; place-items:center; padding:28px 22px;
  background:radial-gradient(ellipse at top,#e5f3f5,#cbdfee 65%,#eaded6); color:#3f535d; }
.wish-page-card { max-width:380px; width:100%; }
.wish-eyebrow { font-size:12px; letter-spacing:.18em; color:#748990; }
.wish-page-card h1 { font-size:40px; line-height:1.3; font-weight:500; letter-spacing:.04em; }
.wish-page-card label { font-size:14px; }
.wish-page-card textarea { display:block; width:100%; min-height:160px; margin:14px 0 20px;
  background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.8); border-radius:18px;
  padding:16px; font:inherit; font-size:16px; color:#3f535d; resize:vertical; }
.wish-page .wish-privacy { color:#687f87; }
#archive-status { font-size:15px; line-height:1.8; }
.archive-return[hidden] { display:none; }
.archive-return { margin-top:22px; animation:archive-return-in .65s cubic-bezier(.2,.65,.25,1) both; }
.archive-return-button {
  display:flex; align-items:center; justify-content:center; gap:14px; text-decoration:none;
  min-height:58px; border:1px solid rgba(255,255,255,.9); border-radius:999px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.archive-return-button:focus-visible { outline:2px solid #477fa6; outline-offset:4px; }
.archive-return-arrow { font-size:20px; line-height:1; transition:transform .25s ease; }
.archive-return-button:hover .archive-return-arrow { transform:translate(3px,-3px); }
.archive-return-note { margin:16px 0 0; text-align:center; color:#638093; font-size:13px; letter-spacing:.06em; }
@keyframes archive-return-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .archive-return { animation:none; } .archive-return-arrow { transition:none; } }
/* Soft, frosted surfaces throughout the birthday story. */
:root {
  --text:#334e60; --text2:rgba(52,75,89,.78); --text3:rgba(52,75,89,.64);
  --text4:rgba(75,97,110,.3); --line:rgba(255,255,255,.46);
  --coral:#e6c9c4; --cyan:#bfdfe7; --warm-panel:#e7ddd3; --lilac-panel:#dfdbea;
}
.kicker {
  background:rgba(255,255,255,.38); color:#587587; border:1px solid rgba(255,255,255,.6);
  border-radius:999px; padding:7px 13px; font-family:var(--mono); font-size:10px;
  backdrop-filter:blur(18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.h2 { font-weight:500; letter-spacing:.01em; font-size:clamp(1.75rem,3.8vw,2.5rem); }
.display { font-weight:500; letter-spacing:-.035em; font-size:clamp(2.7rem,10vw,6rem); }
.hero-sub { max-width:28em; line-height:1.9; font-size:15px; }
.cal-grid { gap:12px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); }
.cal-month {
  border-radius:22px; background:rgba(250,253,255,.32); border:1px solid rgba(255,255,255,.62);
  padding:13px; backdrop-filter:blur(20px) saturate(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 9px 24px rgba(100,135,160,.06);
}
.cal-label { color:#597b8e; }
.cal-days span { border-radius:50%; }
.cal-days .day1 { background:#c5dce4; color:#375c70; }
.cal-days .day365 { border-color:#98b9cd; color:#567e95; }
.mem-preview { border-radius:24px; border:1px solid rgba(255,255,255,.7); box-shadow:0 15px 32px rgba(100,130,160,.1); }
.mem-pill { border-radius:99px; padding:4px 9px; background:rgba(255,255,255,.5); color:#637b89; backdrop-filter:blur(12px); }
.mem-meta { color:#486372; }
.pv-icon { background:#d4ddeb; }
.pv-icon .mem-ph, .pv-cyan .mem-ph { color:rgba(65,89,106,.58); }
.pv-empty { border:1px dashed rgba(113,148,164,.35); background:rgba(255,255,255,.28); }
.letter-btn {
  border:1px solid rgba(255,255,255,.65); border-radius:30px; padding:30px 26px;
  background:rgba(255,255,255,.24); backdrop-filter:blur(24px); font-weight:500;
  font-size:clamp(1.25rem,3.2vw,2.1rem); text-decoration:none;
  max-width:min(20em,100%); overflow-wrap:anywhere; line-height:1.5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 20px 45px rgba(112,137,163,.08);
}
.letter-btn:hover { background:rgba(255,255,255,.42); color:#597b90; }
.letter-sheet { border-radius:30px; background:rgba(252,252,247,.88); backdrop-filter:blur(28px); border-color:rgba(255,255,255,.65); }
.letter-body h3 { font-weight:500; color:#425b6b; }
.btn-ghost { border-radius:99px; border-color:rgba(98,133,151,.25); color:#587386; }
.toast { border-radius:22px; border:1px solid rgba(255,255,255,.65); background:rgba(255,253,249,.76); backdrop-filter:blur(24px); }
.dot { border-radius:50%; }
.bottle-legend li { border-radius:99px; padding:7px 11px; background:rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(16px); }
.closing-text { color:#68716f; font-weight:400; }
.closing-text b { font-weight:500; color:#455c63; }
.doc-footer { background:rgba(252,253,249,.24); backdrop-filter:blur(20px); }
.match-control {
  position:absolute; top:72%; left:50%; transform:translate(-50%,-50%);
  width:min(290px,80vw); height:86px; pointer-events:auto; touch-action:none;
  border:1px solid rgba(219,191,163,.14); border-radius:43px;
  background:rgba(124,100,79,.025); cursor:grab; --strike:0;
}
#hero { user-select:none; -webkit-user-select:none; }
.match-control[hidden] { display:none; }
.match-control:active { cursor:grabbing; }
.strike-track {
  position:absolute; left:14%; right:14%; top:50%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(227,191,151,.3),transparent);
  opacity:calc(.3 + var(--strike)*.7); pointer-events:none;
}
body.opening .prompt { bottom:12%; color:rgba(243,222,202,.62); font-size:12px; letter-spacing:.12em; }
body.striking .match-control { border-color:rgba(242,184,122,.26); background:rgba(163,109,61,.035); }
@media (max-width:767px) {
  .cal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cal-month { padding:10px; border-radius:19px; }
  .cal-days span { font-size:10px; }
  .letter-sheet { padding:26px 22px; }
  .panel { padding:72px 22px; }
}
@media (prefers-reduced-motion:reduce) {
  #light-reveal.spread::before { animation:none; transform:translate(-50%,-50%) scale(1); opacity:.2; }
}