/* ==========================================================================
   恒恒 & 阳阳 · 只属于我们的小宇宙
   style.css  —  设计系统 + 全部页面样式
   ========================================================================== */

/* ---------- 0. 设计变量 ----------
 *  配色原则（第四阶段收敛）：
 *    深紫星空 85%  ——  背景与留白
 *    柔和粉   12%  ——  情感、互动、爱
 *    暖金      3%  ——  时间（生日 / 纪念日 / 天数）
 *  去掉了原来的青蓝色，避免三种主色互相争夺注意力。
 * ------------------------------------------------------------ */
:root {
  /* 深紫星空 */
  --bg-0: #0a0714;
  --bg-1: #140c24;
  --bg-2: #1c1233;
  --ink: #f7f3ff;
  --ink-soft: rgba(247, 243, 255, 0.74);
  --ink-dim: rgba(247, 243, 255, 0.46);

  /* 柔和粉（主色） */
  --rose: #f2a6c0;
  --rose-deep: #e07a9e;
  --rose-soft: #f7c8d8;

  /* 紫（辅助，用于渐变过渡） */
  --violet: #b98bf0;
  --violet-deep: #8b5cf6;

  /* 暖金（时间语义，少量使用） */
  --gold: #e8c07d;
  --gold-soft: #f2d8a8;

  /* 语义色 */
  --mint: #8fd9bd;
  --danger: #e8788c;

  /* 表面（去掉 backdrop-filter 后改用纯色半透明） */
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.075);
  --surface-solid: rgba(22, 15, 38, 0.94);

  --glass: rgba(255, 255, 255, 0.045);
  --glass-2: rgba(255, 255, 255, 0.075);
  --line: rgba(255, 255, 255, 0.11);
  --line-soft: rgba(255, 255, 255, 0.065);

  /* 渐变：粉 → 紫 → 金（去掉了青蓝） */
  --grad: linear-gradient(115deg, #f2a6c0 0%, #e07a9e 34%, #b98bf0 72%, #e8c07d 100%);
  --grad-soft: linear-gradient(115deg, rgba(242, 166, 192, .2), rgba(185, 139, 240, .18));
  --grad-gold: linear-gradient(115deg, #f2d8a8 0%, #e8c07d 50%, #d9a860 100%);

  --shadow-lg: 0 24px 60px -28px rgba(0, 0, 0, .8);
  --shadow-card: 0 14px 36px -22px rgba(0, 0, 0, .9);
  --shadow-glow: 0 0 48px -14px rgba(224, 122, 158, .5);

  /* 圆角：统一一套 */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --font-sans: "PingFang SC", "Microsoft YaHei", "Microsoft YaHei UI", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-light: "PingFang SC", "Microsoft YaHei Light", "Microsoft YaHei", "Segoe UI Light", system-ui, sans-serif;
  --font-display: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-serif: "Songti SC", "STSong", "SimSun", "Georgia", serif;
  --font-kai: "KaiTi", "STKaiti", "Kaiti SC", "Songti SC", serif;
  --font-latin: "Georgia", "Times New Roman", "Palatino Linotype", serif;

  --nav-h: 68px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  /* 触控目标最小尺寸 */
  --tap: 44px;
}

/* ---------- 1. 基础重置 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: .01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: rgba(255, 157, 196, .35); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d0917; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 157, 196, .55), rgba(183, 139, 255, .55));
  border-radius: 99px;
  border: 2px solid #0d0917;
}

/* 焦点状态：所有可交互元素都清晰可见（无障碍） */
:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 2px;
  border-radius: 8px;
}

/* 键盘用户的额外提示：按钮加一层内阴影，避免在亮背景上看不清 */
.btn:focus-visible,
.chip:focus-visible,
.gtab:focus-visible,
.stab:focus-visible,
.icon-btn:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(242, 166, 192, .18);
}

/* ---------- 2. 背景层 ---------- */
.bg-layers {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1200px 800px at 15% -10%, #241340 0%, transparent 60%),
    radial-gradient(1000px 700px at 85% 0%, #331230 0%, transparent 55%),
    radial-gradient(900px 900px at 50% 120%, #170f36 0%, transparent 60%),
    linear-gradient(180deg, #0a0714 0%, #0c0917 45%, #090612 100%);
}

#starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .9;
}

.aurora {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(40% 30% at 25% 25%, rgba(255, 110, 160, .16), transparent 70%),
    radial-gradient(35% 28% at 75% 35%, rgba(150, 110, 255, .18), transparent 70%),
    radial-gradient(45% 30% at 55% 75%, rgba(90, 170, 255, .10), transparent 70%);
  filter: blur(30px);
  animation: auroraDrift 26s var(--ease-soft) infinite alternate;
}

@keyframes auroraDrift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  50%  { transform: translate3d(2%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.02); }
}

.grain {
  position: absolute;
  inset: 0;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* 花瓣 / 心形飘落层 */
.petal-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.petal {
  position: absolute;
  top: -8vh;
  will-change: transform, opacity;
  animation: petalFall linear forwards;
  opacity: 0;
}

@keyframes petalFall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: var(--po, .55); }
  90%  { opacity: var(--po, .55); }
  100% { transform: translate3d(var(--drift, 60px), 112vh, 0) rotate(var(--spin, 360deg)); opacity: 0; }
}

/* ---------- 3. 布局 ---------- */
main {
  position: relative;
  z-index: 2;
}

.wrap {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.section {
  position: relative;
  padding: 108px 0;
}

.section-head {
  text-align: center;
  margin-bottom: 56px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 18px;
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 157, 196, .8));
}
.eyebrow::after { background: linear-gradient(90deg, rgba(255, 157, 196, .8), transparent); }

.section-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: .06em;
}

.section-title .accent {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-sub {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: .04em;
}

/* 通用卡片
 * 性能说明：这里【不再使用 backdrop-filter】。
 * 原来全站有 65 个元素带模糊，每个都会建立独立的 GPU 合成层，
 * 中低端手机上滚动会明显掉帧。改用"半透明纯色 + 内高光"，视觉几乎一致。 */
.glass {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    var(--shadow-card);
}

/* 滚动出现动画 */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- 4. 按钮 ---------- */
.btn {
  --btn-bg: var(--glass-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s;
  border: 1px solid var(--line);
  background: var(--btn-bg);
}

.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px) scale(.99); }

/* 主按钮
 * 性能说明：去掉了原来的 gradShift 渐变流动动画。
 * 那个动画会让【每一个】主按钮持续重绘背景，页面上有 9 个主按钮，
 * 等于 9 个永不停止的合成层。静态渐变在视觉上几乎无差别。 */
.btn-primary {
  border: 0;
  color: #2a0f1d;
  font-weight: 700;
  background: var(--grad);
  box-shadow: 0 12px 32px -14px rgba(224, 122, 158, .8);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.btn-primary:hover { box-shadow: 0 18px 44px -14px rgba(224, 122, 158, .95); }

.btn-ghost {
  color: var(--ink);
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .04);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 157, 196, .55);
  box-shadow: 0 14px 36px -18px rgba(255, 157, 196, .8);
}

.btn-sm { height: 40px; padding: 0 20px; font-size: 13.5px; }

/* 图标按钮 */
.icon-btn {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05);
  color: var(--ink-soft);
  font-size: 16px;
  transition: all .3s var(--ease);
}
.icon-btn:hover {
  color: #fff;
  border-color: rgba(255, 157, 196, .6);
  background: rgba(255, 157, 196, .14);
  transform: translateY(-2px);
}
.icon-btn.is-on {
  color: #2a0f1d;
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 8px 24px -10px rgba(255, 111, 159, .9);
}

/* 空状态 / 错误提示 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 54px 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .02);
}

.empty-ico {
  font-size: 34px;
  line-height: 1;
  opacity: .85;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 18px rgba(255, 157, 196, .5));
}

.empty-title {
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--ink);
}

.empty-desc {
  max-width: 420px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--ink-dim);
}

/* 照片加载失败占位 */
.ph-broken {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 220px;
  padding: 28px 18px;
  text-align: center;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, .025) 0 12px,
      transparent 12px 24px),
    linear-gradient(160deg, #241a38, #1a1228);
}

.ph-broken span { font-size: 30px; opacity: .55; }
.ph-broken b { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); letter-spacing: .04em; }
.ph-broken small { font-size: 11.5px; color: var(--ink-dim); font-weight: 300; line-height: 1.7; }

.photo-card.is-broken { cursor: pointer; }

/* 灯箱图片加载失败 */
.lb-broken {
  display: grid;
  place-items: center;
  min-width: min(420px, 84vw);
  min-height: 260px;
  padding: 40px 28px;
  border-radius: var(--r-md);
  border: 1px dashed var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--ink-dim);
  font-size: 14px;
  text-align: center;
  line-height: 1.9;
}

/* 生日当天 */
.cd-today {
  margin: 18px auto 0;
  padding: 9px 24px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: .08em;
  color: #2a0f1d;
  font-weight: 700;
  background: var(--grad);
  box-shadow: 0 12px 34px -14px rgba(255, 111, 159, .95);
  
}

/* 注意：必须让 [hidden] 生效——作者样式里的 display 会覆盖 UA 的 hidden */
.cd-today[hidden],
[hidden] { display: none !important; }

.cd-grid.is-birthday .cd-num {
  background: linear-gradient(180deg, #fff 20%, #ffd9a8 70%, #ffb3c9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* 纪念日卡片：今天高亮 */
.anniv.is-today {
  border-color: rgba(255, 157, 196, .65);
  background: linear-gradient(110deg, rgba(255, 157, 196, .16), rgba(183, 139, 255, .1));
  box-shadow: 0 0 40px -18px rgba(255, 111, 159, .95);
}

/* noscript 提示 */
.noscript-tip {
  position: relative;
  z-index: 10;
  margin: 40px auto;
  max-width: 560px;
  padding: 20px 24px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 157, 196, .35);
  background: rgba(24, 16, 40, .92);
  color: var(--ink);
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
}

/* ---------- 6b. 首页专属照片 ---------- */
.hero-photo {
  margin: 0 auto 30px;
  width: 200px;
  height: 200px;
  position: relative;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.hero-photo.is-loaded { opacity: 1; transform: none; }

/* 金色细环 + 柔和光晕：把视线先引到"人"身上 */
.hero-photo::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 32px;
  border: 1px solid rgba(232, 192, 125, .45);
  box-shadow:
    0 0 40px -12px rgba(242, 166, 192, .55),
    inset 0 0 24px rgba(232, 192, 125, .12);
  pointer-events: none;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 26px;
  display: block;
  background: var(--surface);
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .9);
}

/* 低端设备不显示光晕，只留边框 */
.is-eco .hero-photo::before {
  box-shadow: none;
  border-color: rgba(232, 192, 125, .3);
}

/* ---------- 6c. 首页数字：语义配色 ---------- */
.stat {
  min-width: 128px;
  padding: 16px 22px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  transition: border-color .3s, transform .3s var(--ease);
}

.stat:hover { border-color: var(--line); transform: translateY(-2px); }

/* 粉色 = 爱（在一起的天数） */
.stat-days .stat-num {
  background: linear-gradient(180deg, #f7c8d8 0%, #f2a6c0 55%, #e07a9e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 金色 = 时间（距离生日） */
.stat-bday .stat-num {
  background: linear-gradient(180deg, #f7e4c0 0%, #e8c07d 55%, #d9a860 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 紫色 = 记忆（照片数量） */
.stat-photos .stat-num {
  background: linear-gradient(180deg, #dcc4ff 0%, #b98bf0 60%, #9b6ddb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 4b. 占位 / 待填写 标记 ----------
 *  用途：config.js 里还没替换成真实内容的条目，
 *  必须让人一眼看出"这是示例，不是真实回忆"。 */

/* 照片卡左上角"示例"角标 */
.photo-card.is-placeholder::after {
  content: "示例";
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: .08em;
  color: #2a1a08;
  background: linear-gradient(115deg, #f2d8a8, #e8c07d);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .6);
}

/* 时间轴占位：整张卡片加虚线边框 + 金色调 */
.tl-card.is-placeholder {
  border-style: dashed;
  border-color: rgba(232, 192, 125, .42);
  background: rgba(232, 192, 125, .045);
}

/* 情书占位 */
.envelope.is-placeholder {
  border-style: dashed;
  border-color: rgba(232, 192, 125, .38);
}

/* 问答占位 */
.quiz-q.is-placeholder {
  color: var(--gold-soft);
}

/* 空日期不占位 */
.tl-date:empty { display: none; }
.ph-meta time:empty { display: none; }

/* 通用的"待填写"小标签 */
.badge-todo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.7;
  white-space: nowrap;
  vertical-align: middle;
  color: #2a1a08;
  background: linear-gradient(115deg, #f2d8a8, #e8c07d);
  border: 1px solid rgba(232, 192, 125, .5);
  margin-left: 8px;
}

/* ---------- 5. 顶部导航 ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 clamp(18px, 4vw, 46px);
  transition: background .45s var(--ease), border-color .45s, height .45s var(--ease), box-shadow .45s;
  border-bottom: 1px solid transparent;
}

.nav.is-stuck {
  height: 60px;
  background: rgba(10, 7, 20, .72);
  border-bottom-color: var(--line-soft);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 10px 40px -24px #000;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 16px;
  letter-spacing: .12em;
  flex-shrink: 0;
}

.brand-heart {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 0 22px -4px rgba(255, 111, 159, .9);
  animation: heartbeat 2.6s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.16); }
  24% { transform: scale(.98); }
  36% { transform: scale(1.1); }
  52% { transform: scale(1); }
}

.brand-text { font-weight: 500; color: var(--ink-soft); }
.brand-text b { font-weight: 600; color: var(--ink); }
.brand-text i { font-style: normal; color: var(--rose); margin: 0 5px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav-links a {
  position: relative;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: .08em;
  transition: color .3s, background .3s;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  transform: translateX(-50%);
  transition: width .35s var(--ease);
}

.nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 18px; }
.nav-links a.active { color: #fff; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 6px;
}

.menu-btn { display: none; }

/* 移动端抽屉 */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(8, 6, 15, .86);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.drawer.open { opacity: 1; pointer-events: auto; }

.drawer nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.drawer a {
  padding: 14px 40px;
  font-size: 21px;
  letter-spacing: .14em;
  color: var(--ink-soft);
  transition: color .3s, transform .3s var(--ease);
}
.drawer a:hover { color: #fff; transform: translateX(4px); }

/* ---------- 6. 首页 Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-h) + 32px) 24px 132px;
  text-align: center;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: min(920px, 100%);
}

.kicker {
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: .58em;
  text-transform: uppercase;
  color: rgba(242, 166, 192, .9);
  margin-bottom: 18px;
  padding-left: .58em;
  animation: fadeUp 1.2s var(--ease) both;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(46px, 9.2vw, 100px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: .08em;
  background: linear-gradient(180deg, #fff 12%, #ffe0ec 46%, #ddc6ff 82%, #c0ddff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 90px rgba(255, 157, 196, .28);
  animation: fadeUp 1.2s .08s var(--ease) both;
}

.hero-title .amp {
  font-family: var(--font-latin);
  font-style: italic;
  font-size: .78em;
  color: var(--rose);
  -webkit-text-fill-color: var(--rose);
  margin: 0 .06em;
}

.hero-sub {
  margin-top: 18px;
  font-size: clamp(14px, 1.7vw, 17px);
  font-weight: 300;
  letter-spacing: .22em;
  color: var(--ink-soft);
  animation: fadeUp 1.2s .16s var(--ease) both;
}

.typed-wrap {
  height: 30px;
  margin-top: 18px;
  font-size: clamp(14px, 1.6vw, 17px);
  color: var(--rose);
  letter-spacing: .08em;
  animation: fadeUp 1.2s .24s var(--ease) both;
}

.caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -.16em;
  background: currentColor;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

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

/* Hero 计数 */
.hero-stats {
  margin: 34px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  animation: fadeUp 1.2s .32s var(--ease) both;
}

.stat-num {
  display: block;
  font-family: var(--font-latin);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  letter-spacing: .24em;
  color: var(--ink-dim);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 32px;
  animation: fadeUp 1.2s .4s var(--ease) both;
}

/* 飘浮的心 */
.float-hearts { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

.float-hearts span {
  position: absolute;
  font-size: var(--fs, 18px);
  color: var(--c, var(--rose));
  opacity: 0;
  filter: drop-shadow(0 0 12px currentColor);
  animation: floatUp var(--dur, 14s) linear var(--delay, 0s) infinite;
}

@keyframes floatUp {
  0%   { opacity: 0; transform: translate3d(0, 20vh, 0) scale(.6) rotate(0deg); }
  10%  { opacity: .85; }
  70%  { opacity: .55; }
  100% { opacity: 0; transform: translate3d(var(--dx, 40px), -80vh, 0) scale(1.1) rotate(25deg); }
}

/* 向下滚动提示 */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: .34em;
  color: var(--ink-dim);
  animation: fadeUp 1.4s 1s var(--ease) both;
}

.scroll-cue i {
  display: block;
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, rgba(255, 157, 196, .9), transparent);
  animation: cueDrop 2.4s var(--ease-soft) infinite;
  transform-origin: top;
}

@keyframes cueDrop {
  0% { transform: scaleY(.2); opacity: .2; }
  50% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(.2); opacity: .2; }
}

/* ---------- 7. 照片墙 ---------- */
.photos-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 34px;
}

.chip {
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .03);
  color: var(--ink-dim);
  font-size: 13px;
  letter-spacing: .08em;
  transition: all .3s var(--ease);
}
.chip:hover { color: var(--ink); border-color: rgba(255, 157, 196, .4); }
.chip.active {
  color: #2a0f1d;
  font-weight: 600;
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 8px 22px -12px rgba(255, 111, 159, .9);
}

.photos-grid {
  position: relative;
  width: 100%;
  transition: height .45s var(--ease);
}

.photo-card {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 280px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .6s var(--ease),
    transform .6s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s,
    top .4s var(--ease),
    left .4s var(--ease),
    width .35s var(--ease);
}

.photo-card.in { opacity: 1; transform: none; }

/* 悬停：只做轻微上浮 + 边框变粉，不做缩放（真实照片不该变形） */
.photo-card:hover,
.photo-card:focus-visible {
  border-color: rgba(242, 166, 192, .55);
  box-shadow: 0 18px 40px -24px rgba(224, 122, 158, .8);
  transform: translateY(-3px);
}

.photo-card:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 2px;
}

.photo-card img {
  width: 100%;
  height: auto;
  display: block;
  background: #1a1228;
  /* 加载中的骨架 */
  min-height: 80px;
  transition: opacity .5s var(--ease);
}

.photo-card img[data-loading="1"] {
  background:
    linear-gradient(100deg,
      rgba(255, 255, 255, .04) 30%,
      rgba(255, 255, 255, .09) 50%,
      rgba(255, 255, 255, .04) 70%);
  background-size: 220% 100%;
  animation: skeleton 1.4s ease-in-out infinite;
}

@keyframes skeleton {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* 说明区：从"压在图上"改成"图片下方的独立区域"，
   保证手机上也能完整看到标题和日期，不再依赖 hover */
.photo-card .ph-body {
  position: relative;
  inset: auto;
  padding: 13px 15px 15px;
  background: transparent;
  pointer-events: none;
}

.photo-card .ph-title {
  font-size: 14.5px;
  line-height: 1.45;
}

.photo-card .ph-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-dim);
}

.photo-card .ph-meta {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}

/* 图片下方的标题改成深色背景上的浅色文字 */
.photo-card .ph-title {
  color: var(--ink);
  text-shadow: none;
}

/* 悬停时给标题一点颜色反馈 */
.photo-card:hover .ph-title { color: var(--rose-soft); }

.ph-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .03em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

.ph-desc {
  margin-top: 3px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .66);
  font-weight: 300;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ph-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .5);
}

.ph-tag {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 10.5px;
  letter-spacing: .08em;
}

.ph-heart {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 6, 18, .5);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transform: scale(.7);
  transition: all .4s var(--ease);
}
.photo-card:hover .ph-heart { opacity: 1; transform: none; }
.ph-heart.liked { opacity: 1; transform: none; color: var(--rose-deep); background: #fff; }
.ph-heart.pop { animation: pop .5s var(--ease); }

/* 触屏设备没有 hover：让点赞按钮始终可见（修复：以前完全看不见却能点到）
   同时用 CSS 媒体查询 + JS 的 .is-touch 兜底，兼容汇报不准的浏览器 */
@media (hover: none), (pointer: coarse) {
  .ph-heart {
    opacity: 1;
    transform: none;
    background: rgba(10, 6, 18, .58);
    border: 1px solid rgba(255, 255, 255, .22);
    width: 44px;
    height: 44px;
    font-size: 14px;
  }
  .ph-heart.liked {
    color: var(--rose-deep);
    background: #fff;
    border-color: #fff;
  }
  .photo-card .ph-desc { display: -webkit-box; }
}

/* JS 兜底：html.is-touch 时同样显示 */
.is-touch .ph-heart {
  opacity: 1;
  transform: none;
  background: rgba(10, 6, 18, .58);
  border: 1px solid rgba(255, 255, 255, .22);
  width: 44px;
  height: 44px;
  font-size: 14px;
}
.is-touch .ph-heart.liked {
  color: var(--rose-deep);
  background: #fff;
  border-color: #fff;
}
.is-touch .photo-card .ph-desc { display: -webkit-box; }
@keyframes pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.photos-empty {
  position: relative;
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-dim);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 30px;
  background: rgba(6, 4, 12, .9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.lightbox.open { opacity: 1; pointer-events: auto; }

.lb-figure {
  position: relative;
  max-width: min(940px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transform: scale(.94);
  transition: transform .5s var(--ease);
}
.lightbox.open .lb-figure { transform: none; }

.lb-figure img {
  max-height: 72vh;
  width: auto;
  border-radius: var(--r-md);
  box-shadow: 0 40px 90px -30px #000, 0 0 0 1px rgba(255, 255, 255, .1);
  object-fit: contain;
}

.lb-cap { text-align: center; }
.lb-cap h4 { font-size: 18px; letter-spacing: .05em; }
.lb-cap p { margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); font-weight: 300; }
.lb-cap time { display: block; margin-top: 8px; font-size: 11.5px; letter-spacing: .2em; color: var(--ink-dim); }

.lb-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line);
  font-size: 20px;
  color: #fff;
  transition: all .3s var(--ease);
}
.lb-btn:hover { background: var(--grad); color: #2a0f1d; transform: translateY(-50%) scale(1.06); }
.lb-prev { left: max(10px, calc(50% - 560px)); }
.lb-next { right: max(10px, calc(50% - 560px)); }

.lb-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line);
  font-size: 18px;
  transition: all .3s;
}
.lb-close:hover { background: rgba(255, 90, 120, .25); transform: rotate(90deg); }

.lb-count {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--ink-dim);
}

/* ---------- 8. 我们的故事（时间轴） ---------- */
.timeline {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 10px 0;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 157, 196, .5) 8%,
    rgba(183, 139, 255, .45) 50%,
    rgba(143, 216, 255, .4) 92%,
    transparent 100%);
}

.tl-item {
  position: relative;
  width: 50%;
  padding: 0 46px 44px 0;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.tl-item.in { opacity: 1; transform: none; }

.tl-item:nth-child(even) {
  margin-left: 50%;
  padding: 0 0 44px 46px;
}

.tl-dot {
  position: absolute;
  top: 14px;
  right: -15px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  background: linear-gradient(150deg, #2a1a40, #1a1029);
  border: 1px solid rgba(255, 157, 196, .55);
  box-shadow: 0 0 0 5px rgba(10, 7, 20, .9), 0 0 24px -4px rgba(255, 157, 196, .8);
  z-index: 1;
}

.tl-item:nth-child(even) .tl-dot { right: auto; left: -15px; }

.tl-card {
  position: relative;
  padding: 20px 24px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line-soft);
  transition: transform .45s var(--ease), border-color .45s, background .45s, box-shadow .45s;
}

.tl-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 157, 196, .45);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 24px 50px -30px rgba(255, 111, 159, .8);
}

.tl-date {
  display: inline-block;
  font-family: var(--font-latin);
  font-size: 11.5px;
  letter-spacing: .24em;
  color: var(--rose);
  margin-bottom: 8px;
}

.tl-title {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: .05em;
  color: #fff;
}

.tl-text {
  margin-top: 7px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-soft);
  font-weight: 300;
  letter-spacing: .02em;
}

.tl-item:nth-child(odd) .tl-card { text-align: right; }
.tl-item:nth-child(odd) .tl-text { color: var(--ink-soft); }

/* 结尾 */
.tl-end {
  position: relative;
  width: 100%;
  text-align: center;
  padding-top: 6px;
}
.tl-end span {
  display: inline-block;
  padding: 8px 22px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--ink-dim);
  background: rgba(10, 7, 20, .9);
  border: 1px solid var(--line-soft);
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .timeline::before { left: 15px; }
  .tl-item,
  .tl-item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding: 0 0 26px 46px;
  }
  .tl-dot,
  .tl-item:nth-child(even) .tl-dot { left: 0; right: auto; top: 12px; }
  .tl-item:nth-child(odd) .tl-card { text-align: left; }
}

/* ---------- 9. 生日倒计时 ---------- */
.countdown-card {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 5vw, 60px);
  border-radius: var(--r-xl);
  text-align: center;
}

.countdown-card::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 380px;
  background: radial-gradient(50% 60% at 50% 40%, rgba(255, 157, 196, .26), transparent 70%);
  pointer-events: none;
}

.countdown-card > * { position: relative; z-index: 1; }

.bd-label {
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--ink-dim);
}

.bd-name {
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.6vw, 38px);
  letter-spacing: .1em;
  color: #fff;
}
.bd-name em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cd-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 22px);
  max-width: 760px;
  margin: 38px auto 0;
}

.cd-cell {
  position: relative;
  padding: clamp(16px, 2.4vw, 26px) 8px clamp(12px, 1.8vw, 18px);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025));
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px -28px #000;
  overflow: hidden;
}

.cd-cell::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 157, 196, .8), transparent);
}

.cd-num {
  display: block;
  font-family: var(--font-latin);
  font-size: clamp(32px, 6vw, 62px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 20%, #ffcfe0 70%, #c9aaff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(255, 157, 196, .3);
}

.cd-unit {
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  letter-spacing: .3em;
  color: var(--ink-dim);
}

.cd-cell.tick .cd-num { animation: tick .45s var(--ease); }
@keyframes tick {
  0% { transform: translateY(-14%); opacity: .35; filter: blur(2px); }
  100% { transform: none; opacity: 1; filter: none; }
}

.cd-foot {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  justify-content: center;
  font-size: 13.5px;
  color: var(--ink-soft);
  font-weight: 300;
  letter-spacing: .06em;
}
.cd-foot b { color: var(--rose); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 年进度条 */
.bd-progress {
  max-width: 620px;
  margin: 30px auto 0;
}
.bd-progress .bar {
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}
.bd-progress .bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--grad);
  box-shadow: 0 0 18px rgba(255, 157, 196, .8);
  transition: width 1.2s var(--ease);
}
.bd-progress .cap {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11.5px;
  letter-spacing: .18em;
  color: var(--ink-dim);
}

/* 纪念日列表 */
.anniv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.anniv {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  transition: transform .4s var(--ease), border-color .4s, background .4s;
}
.anniv:hover { transform: translateY(-4px); border-color: rgba(255, 157, 196, .45); background: var(--glass-2); }

.anniv-ico {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 19px;
  background: var(--grad-soft);
  border: 1px solid var(--line-soft);
}

.anniv-t { font-size: 14px; font-weight: 500; letter-spacing: .04em; }
.anniv-d { margin-top: 2px; font-size: 12px; color: var(--ink-dim); letter-spacing: .06em; }
.anniv-n {
  margin-left: auto;
  font-family: var(--font-latin);
  font-size: 21px;
  font-weight: 600;
  color: var(--rose);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.anniv-n small { font-size: 11px; color: var(--ink-dim); margin-left: 2px; font-family: var(--font-sans); }

/* 今日一句 */
.today-note {
  margin-top: 26px;
  padding: 22px 26px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: linear-gradient(100deg, rgba(255, 157, 196, .09), rgba(183, 139, 255, .07));
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-kai);
  font-size: 16px;
  color: rgba(255, 245, 250, .88);
  letter-spacing: .05em;
}
.today-note .q { font-family: var(--font-serif); font-size: 34px; line-height: 1; color: var(--rose); opacity: .7; }

/* ---------- 10. 小游戏 ---------- */
.games-shell { display: grid; gap: 22px; }

.games-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.gtab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .035);
  color: var(--ink-soft);
  font-size: 14px;
  letter-spacing: .06em;
  transition: all .35s var(--ease);
}
.gtab:hover { color: #fff; border-color: rgba(255, 157, 196, .45); transform: translateY(-2px); }
.gtab.active {
  color: #2a0f1d;
  font-weight: 600;
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 12px 30px -14px rgba(255, 111, 159, .9);
}
.gtab .g-ico { font-size: 16px; }

.game-panel { display: none; }
.game-panel.active { display: block; animation: fadeUp .6s var(--ease); }

.game-card {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3vw, 34px);
  border-radius: var(--r-lg);
}

.game-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.game-head h3 {
  font-size: 19px;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.game-head .tip { font-size: 12.5px; color: var(--ink-dim); font-weight: 300; letter-spacing: .05em; }

.game-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.hud {
  min-width: 84px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-soft);
  text-align: center;
}
.hud span { display: block; font-size: 10px; letter-spacing: .22em; color: var(--ink-dim); }
.hud b {
  display: block;
  font-family: var(--font-latin);
  font-size: 19px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.canvas-wrap {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #221536 0%, #120c20 60%, #0c0817 100%);
  border: 1px solid var(--line-soft);
  /* 默认允许竖向滚动，只在游戏进行中才锁死（由 JS 加 .is-playing） */
  touch-action: pan-y;
}

.canvas-wrap.is-playing { touch-action: none; }

#catchCanvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(62vh, 560px);
  cursor: none;
  touch-action: pan-y;
}

.canvas-wrap.is-playing #catchCanvas {
  cursor: none;
  touch-action: none;
}

.game-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  background: rgba(10, 7, 20, .72);
  transition: opacity .45s var(--ease);
}
.game-overlay.hide { opacity: 0; pointer-events: none; }

.game-overlay .ov-inner { max-width: 380px; }
.game-overlay h4 { font-size: 24px; letter-spacing: .08em; margin-bottom: 10px; }
.game-overlay p { font-size: 14px; color: var(--ink-soft); font-weight: 300; line-height: 1.9; }
.game-overlay .btn { margin-top: 22px; }

/* 记忆翻牌 */
.memory-wrap {
  display: grid;
  place-items: center;
  padding: 8px 0 4px;
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 14px);
  width: min(520px, 100%);
}

.mcard {
  position: relative;
  aspect-ratio: 1;
  border-radius: 16px;
  perspective: 900px;
  background: none;
  padding: 0;
}

.mcard-inner {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  transform-style: preserve-3d;
  transition: transform .55s var(--ease);
}

.mcard.flipped .mcard-inner,
.mcard.matched .mcard-inner { transform: rotateY(180deg); }

.mface {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: clamp(24px, 4vw, 34px);
}

.mface.back {
  background: linear-gradient(150deg, rgba(255, 157, 196, .22), rgba(183, 139, 255, .16));
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .5);
  font-size: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.mface.back::after {
  content: "♥";
  font-size: clamp(18px, 3vw, 26px);
  color: rgba(255, 255, 255, .35);
}

.mface.front {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 255, 255, .2);
}

.mcard.matched .mface.front {
  background: linear-gradient(160deg, rgba(255, 157, 196, .38), rgba(183, 139, 255, .28));
  box-shadow: 0 0 26px -6px rgba(255, 157, 196, .85), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.mcard:not(.matched):hover .mcard-inner { transform: translateY(-3px) rotateY(0deg); }
.mcard.flipped:not(.matched):hover .mcard-inner { transform: rotateY(180deg); }

/* 默契问答 */
.quiz-wrap { max-width: 720px; margin: 0 auto; }

.quiz-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.quiz-progress {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.quiz-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--grad);
  box-shadow: 0 0 14px rgba(255, 157, 196, .8);
  transition: width .5s var(--ease);
}

.quiz-count {
  font-family: var(--font-latin);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--ink-dim);
  white-space: nowrap;
}

.quiz-q {
  font-size: clamp(18px, 2.4vw, 23px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .03em;
  margin-bottom: 24px;
  min-height: 2.6em;
}

.quiz-opts { display: grid; gap: 12px; }

.qopt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .035);
  text-align: left;
  font-size: 15px;
  letter-spacing: .03em;
  transition: all .3s var(--ease);
  overflow: hidden;
}

.qopt .key {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  font-family: var(--font-latin);
  font-size: 12px;
  color: var(--ink-dim);
  transition: all .3s;
}

.qopt:hover:not(:disabled) {
  border-color: rgba(255, 157, 196, .55);
  background: rgba(255, 157, 196, .1);
  transform: translateX(4px);
}
.qopt:hover:not(:disabled) .key { background: var(--grad); color: #2a0f1d; }

.qopt:disabled { cursor: default; }

.qopt.correct {
  border-color: rgba(143, 240, 200, .8);
  background: rgba(143, 240, 200, .16);
  box-shadow: 0 0 30px -10px rgba(143, 240, 200, .7);
}
.qopt.correct .key { background: var(--mint); color: #06231a; }

.qopt.wrong {
  border-color: rgba(255, 110, 130, .7);
  background: rgba(255, 110, 130, .14);
  animation: shake .45s;
}
.qopt.wrong .key { background: #ff6e82; color: #2a0710; }

.quiz-note {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-family: var(--font-kai);
  letter-spacing: .05em;
  background: rgba(255, 255, 255, .05);
  border-left: 3px solid var(--rose);
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(8px);
  transition: all .45s var(--ease);
}
.quiz-note.show { opacity: 1; transform: none; }

.quiz-result { text-align: center; padding: 20px 0 6px; }
.quiz-result .score {
  font-family: var(--font-latin);
  font-size: 62px;
  font-weight: 600;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.quiz-result .score small { font-size: 20px; color: var(--ink-dim); -webkit-text-fill-color: var(--ink-dim); }
.quiz-result h4 { margin-top: 12px; font-size: 21px; letter-spacing: .08em; }
.quiz-result p { margin-top: 8px; color: var(--ink-soft); font-weight: 300; font-size: 14px; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* 游戏通用小提示 */
.hint-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: .05em;
}
.hint-row kbd {
  display: inline-block;
  padding: 1px 7px;
  margin: 0 2px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06);
  font-family: var(--font-sans);
  font-size: 11px;
}

/* ---------- 11. 秘密空间 ---------- */
.secret-shell {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: clamp(24px, 4vw, 52px);
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(255, 157, 196, .12), transparent 60%),
    rgba(255, 255, 255, .035);
  border: 1px solid var(--line-soft);
}

.secret-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .4) 0 1px, transparent 1.6px),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, .35) 0 1px, transparent 1.6px);
  background-size: 180px 180px, 240px 240px, 320px 320px;
  opacity: .35;
  pointer-events: none;
}

/* 锁屏 */
.lock {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin: 10px auto;
  text-align: center;
  transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s;
}
.lock.hide { opacity: 0; transform: scale(.96); filter: blur(8px); pointer-events: none; position: absolute; inset: 0; }

.lock-heart {
  width: 92px;
  height: 92px;
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 34px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .3), rgba(255, 157, 196, .18) 45%, rgba(183, 139, 255, .12));
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 0 50px -12px rgba(255, 111, 159, .8), inset 0 1px 0 rgba(255, 255, 255, .3);
  
}

.lock h3 { font-size: 22px; letter-spacing: .1em; }
.lock p.sub { margin-top: 10px; font-size: 13.5px; color: var(--ink-dim); font-weight: 300; letter-spacing: .06em; }

.pass-form {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}

.pass-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(10, 7, 20, .5);
  transition: border-color .3s, box-shadow .3s;
}
.pass-field:focus-within {
  border-color: rgba(255, 157, 196, .7);
  box-shadow: 0 0 0 4px rgba(255, 157, 196, .1);
}

.pass-field input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  background: none;
  outline: none;
  letter-spacing: .3em;
  font-size: 16px;
  color: #fff;
}
.pass-field input::placeholder { letter-spacing: .1em; color: var(--ink-dim); font-size: 14px; }

.pass-field .btn { height: 44px; padding: 0 24px; }

.lock-msg {
  min-height: 20px;
  font-size: 13px;
  color: #ff8fa3;
  letter-spacing: .04em;
  transition: opacity .3s;
}
.lock-msg.ok { color: var(--mint); }

.lock-hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: .04em;
}

.lock.shake { animation: shake .5s; }

/* 解锁后 */
.secret-body {
  position: relative;
  z-index: 1;
  display: none;
}
.secret-body.show { display: block; animation: fadeUp .8s var(--ease); }

.secret-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 30px;
}
.stab {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  color: var(--ink-soft);
  font-size: 13.5px;
  letter-spacing: .1em;
  transition: all .3s var(--ease);
}
.stab.active { background: var(--grad); color: #2a0f1d; font-weight: 600; border-color: transparent; }
.stab:hover:not(.active) { color: #fff; border-color: rgba(255, 157, 196, .5); }

.spane { display: none; }
.spane.active { display: block; animation: fadeUp .5s var(--ease); }

/* 信封 / 情书 */
.letters { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; }

.envelope {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  overflow: hidden;
  transition: border-color .4s, box-shadow .4s;
}
.envelope:hover { border-color: rgba(255, 157, 196, .45); box-shadow: 0 24px 60px -34px rgba(255, 111, 159, .8); }

.env-head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  text-align: left;
}

.env-seal {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 18px;
  color: #fff;
  background: radial-gradient(circle at 32% 28%, #ffb3cd, #ff6f9f 55%, #b6487a);
  box-shadow: 0 8px 22px -10px rgba(255, 111, 159, .95), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .5s var(--ease);
}
.envelope.open .env-seal { transform: rotate(-12deg) scale(.92); }

.env-meta { flex: 1; min-width: 0; }
.env-title { font-size: 15.5px; font-weight: 500; letter-spacing: .04em; }
.env-date { font-size: 11.5px; letter-spacing: .18em; color: var(--ink-dim); margin-top: 3px; }

.env-arrow {
  font-size: 13px;
  color: var(--ink-dim);
  transition: transform .5s var(--ease);
}
.envelope.open .env-arrow { transform: rotate(180deg); }

.env-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--ease);
}
.envelope.open .env-body { grid-template-rows: 1fr; }

.env-inner { overflow: hidden; }

.paper {
  margin: 0 18px 18px;
  padding: clamp(20px, 3vw, 34px);
  border-radius: 12px;
  background:
    repeating-linear-gradient(180deg, transparent 0 33px, rgba(120, 90, 70, .09) 33px 34px),
    linear-gradient(170deg, #fffaf4, #fdf2ea);
  color: #4a3a44;
  box-shadow: 0 16px 40px -24px rgba(0, 0, 0, .9), inset 0 0 40px rgba(200, 160, 140, .12);
  font-family: var(--font-kai);
  font-size: 16.5px;
  line-height: 34px;
  letter-spacing: .03em;
  white-space: pre-line;
  position: relative;
}
.paper::before {
  content: "❦";
  position: absolute;
  top: 10px;
  right: 16px;
  color: rgba(180, 130, 120, .35);
  font-size: 18px;
}

/* 愿望清单 */
.wishes { max-width: 720px; margin: 0 auto; }

.wish-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--ink-dim);
}
.wish-progress .bar {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.wish-progress .bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad);
  border-radius: 99px;
  box-shadow: 0 0 16px rgba(255, 157, 196, .8);
  transition: width .7s var(--ease);
}

.wish-list { display: grid; gap: 10px; }

.wish {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  transition: all .3s var(--ease);
  text-align: left;
  width: 100%;
  font-size: 14.5px;
  letter-spacing: .02em;
}
.wish:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 157, 196, .4); transform: translateX(4px); }

.wish-box {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1.5px solid rgba(255, 255, 255, .3);
  font-size: 12px;
  color: transparent;
  transition: all .3s var(--ease);
}

.wish.done .wish-box {
  background: var(--grad);
  border-color: transparent;
  color: #2a0f1d;
  box-shadow: 0 0 18px -4px rgba(255, 157, 196, .9);
}
.wish.done .wish-text { color: var(--ink-dim); text-decoration: line-through; text-decoration-color: rgba(255, 157, 196, .7); }

.wish-text { flex: 1; transition: color .3s; }
.wish.done { background: rgba(255, 157, 196, .06); }

/* 悄悄话 */
.whisper {
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(30px, 5vw, 54px) clamp(20px, 4vw, 44px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: radial-gradient(80% 120% at 50% 0%, rgba(255, 157, 196, .14), rgba(255, 255, 255, .02));
  position: relative;
}
.whisper .mark {
  font-family: var(--font-serif);
  font-size: 60px;
  line-height: .6;
  color: rgba(255, 157, 196, .5);
  display: block;
  margin-bottom: 14px;
}
.whisper p {
  font-family: var(--font-kai);
  font-size: clamp(18px, 2.6vw, 24px);
  line-height: 1.85;
  letter-spacing: .06em;
  color: #fff;
  min-height: 3.7em;
  transition: opacity .4s;
}
.whisper .btn { margin-top: 26px; }
.whisper .idx { margin-top: 16px; font-family: var(--font-latin); font-size: 11.5px; letter-spacing: .3em; color: var(--ink-dim); }

/* ---------- 11a. 账号面板（远程模式） ---------- */
.auth-panel {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin: 6px auto 10px;
  padding: 30px 26px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .035);
}

.auth-head { text-align: center; margin-bottom: 22px; }

.auth-ico {
  display: inline-grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 14px;
  border-radius: 50%;
  font-size: 26px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .26), rgba(255, 157, 196, .16) 50%, rgba(183, 139, 255, .1));
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 0 40px -12px rgba(255, 111, 159, .7);
}

.auth-head h3 { font-size: 19px; letter-spacing: .06em; }
.auth-head .sub {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-dim);
  font-weight: 300;
  line-height: 1.8;
}

.auth-form { display: grid; gap: 12px; }

.af-field { display: grid; gap: 6px; text-align: left; }
.af-field > span {
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--ink-dim);
}
.af-field input {
  height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(10, 7, 20, .55);
  color: #fff;
  outline: none;
  font-size: 15px;
  transition: border-color .3s, box-shadow .3s;
}
.af-field input::placeholder { color: var(--ink-dim); font-size: 13.5px; }
.af-field input:focus {
  border-color: rgba(255, 157, 196, .7);
  box-shadow: 0 0 0 4px rgba(255, 157, 196, .1);
}

.af-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.af-actions .btn { flex: 1 1 auto; min-width: 120px; }
.af-actions .btn-primary { height: 46px; }

.auth-couple { display: grid; gap: 12px; }
.ac-note {
  font-size: 12.5px;
  color: var(--ink-soft);
  text-align: center;
  letter-spacing: .03em;
  line-height: 1.8;
}
.ac-row { display: flex; gap: 10px; }
.ac-row input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(10, 7, 20, .55);
  color: #fff;
  outline: none;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ac-row input:focus { border-color: rgba(255, 157, 196, .7); }
.ac-row .btn { flex-shrink: 0; height: 42px; }

.ac-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(143, 240, 200, .1);
  border: 1px solid rgba(143, 240, 200, .3);
  font-size: 12.5px;
  color: #b8f5dc;
}
.ac-invite b {
  font-family: var(--font-latin);
  font-size: 20px;
  letter-spacing: .24em;
  color: #fff;
}

.auth-logout {
  display: block;
  margin: 20px auto 0;
}

/* ---------- 11b. 秘密空间 · 加密版新增样式 ---------- */

/* 模式横幅：诚实告知当前安全级别 */
.sec-mode {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 26px;
  padding: 13px 18px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.75;
  letter-spacing: .02em;
}
.sec-mode.is-local {
  background: rgba(255, 196, 120, .1);
  border: 1px solid rgba(255, 196, 120, .34);
  color: #ffd9a8;
}
.sec-mode.is-remote {
  background: rgba(143, 240, 200, .09);
  border: 1px solid rgba(143, 240, 200, .32);
  color: #b8f5dc;
}
.sm-badge {
  flex-shrink: 0;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  background: rgba(0, 0, 0, .28);
}
.sm-text { flex: 1; min-width: 200px; opacity: .92; }
.sm-text b { color: #fff; font-weight: 600; }

/* 口令强度条 */
.pass-meter {
  margin-top: 4px;
  display: grid;
  gap: 6px;
  text-align: left;
}
.pm-bar {
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.pm-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  transition: width .4s var(--ease), background .4s;
}
.pm-bar span.pm-weak { background: linear-gradient(90deg, #ff7a8c, #ff9dc4); }
.pm-bar span.pm-good { background: linear-gradient(90deg, #ffd68a, #8ff0c8); }
.pm-bar span.pm-strong { background: linear-gradient(90deg, #8ff0c8, #8fd8ff); }

.pm-text {
  font-size: 11.5px;
  letter-spacing: .03em;
  color: var(--ink-dim);
}
.pm-text.pm-weak { color: #ff9aa8; }
.pm-text.pm-good { color: #ffd9a8; }
.pm-text.pm-strong { color: #9df0cf; }

.lock-actions { margin-top: 18px; }

/* 今天：双卡布局 */
.today-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px;
  margin-bottom: 8px;
}
@media (max-width: 760px) {
  .today-grid { grid-template-columns: 1fr; gap: 14px; }
}

.today-card {
  padding: 24px 26px;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 170px;
}

.tc-label {
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--rose);
  text-transform: uppercase;
}

.tc-text {
  font-family: var(--font-kai);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.9;
  letter-spacing: .04em;
  color: #fff;
  flex: 1;
}

.tc-foot {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink-dim);
}

.mem-card { display: grid; gap: 6px; }
.mem-title { font-size: 16px; font-weight: 600; letter-spacing: .04em; color: #fff; }
.mem-text {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-soft);
  font-weight: 300;
}
.mem-date {
  font-family: var(--font-latin);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ink-dim);
}

/* 愿望：统计 */
.wish-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.ws-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line-soft);
}
.ws-label { font-size: 11px; letter-spacing: .14em; color: var(--ink-dim); }
.ws-value {
  font-family: var(--font-latin);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ws-rose .ws-value { color: var(--rose); }
.ws-violet .ws-value { color: var(--violet); }
.ws-mint .ws-value { color: var(--mint); font-size: 13px; }
.ws-gold .ws-value { color: var(--gold); }

/* 愿望：添加 */
.wish-add {
  display: flex;
  gap: 10px;
  margin: 18px 0;
}
.wish-add input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(10, 7, 20, .5);
  outline: none;
  font-size: 14px;
  color: #fff;
  transition: border-color .3s, box-shadow .3s;
}
.wish-add input::placeholder { color: var(--ink-dim); }
.wish-add input:focus {
  border-color: rgba(255, 157, 196, .7);
  box-shadow: 0 0 0 4px rgba(255, 157, 196, .1);
}
.wish-add .btn { flex-shrink: 0; height: 44px; }

/* 愿望条目：新版是 div 不是 button */
.wish {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .03);
  transition: all .3s var(--ease);
  text-align: left;
  width: 100%;
  font-size: 14.5px;
}
.wish:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 157, 196, .4); }

.wish-box {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, .3);
  font-size: 13px;
  line-height: 1;
  color: transparent;
  cursor: pointer;
  transition: all .3s var(--ease);
  background: none;
  padding: 0;
}
.wish-box:hover { border-color: var(--rose); background: rgba(255, 157, 196, .12); }
.wish.done .wish-box {
  background: var(--grad);
  border-color: transparent;
  color: #2a0f1d;
  font-weight: 700;
  box-shadow: 0 0 18px -4px rgba(255, 157, 196, .9);
}
.wish.done .wish-text {
  color: var(--ink-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 157, 196, .7);
}
.wish.done { background: rgba(255, 157, 196, .06); }

.wish-text { flex: 1; min-width: 0; transition: color .3s; word-break: break-word; }

.wish-meta {
  flex-shrink: 0;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--ink-dim);
  white-space: nowrap;
}

.wish-actions {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .25s;
}
.wish:hover .wish-actions,
.wish:focus-within .wish-actions { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .wish-actions { opacity: 1; }
}

.wish-act {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .05);
  color: var(--ink-dim);
  font-size: 12px;
  transition: all .25s;
  padding: 0;
}
.wish-act:hover { color: #fff; background: rgba(255, 157, 196, .2); border-color: rgba(255, 157, 196, .5); }
.wish-act.wish-del:hover { background: rgba(255, 90, 120, .25); border-color: rgba(255, 90, 120, .6); }
.wish-act.wish-save:hover { background: rgba(143, 240, 200, .22); border-color: rgba(143, 240, 200, .6); }

.wish-edit {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 157, 196, .6);
  background: rgba(10, 7, 20, .7);
  color: #fff;
  outline: none;
  font-size: 14px;
}

/* 时光信箱 */
.capsule-wrap { max-width: 760px; margin: 0 auto; }

.capsule-intro {
  text-align: center;
  margin-bottom: 22px;
  font-family: var(--font-kai);
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-soft);
  letter-spacing: .04em;
}

.capsule-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .035);
  margin-bottom: 26px;
}
@media (max-width: 620px) {
  .capsule-form { grid-template-columns: 1fr; padding: 18px; }
}

.cf-field { display: grid; gap: 6px; }
.cf-field > span {
  font-size: 11.5px;
  letter-spacing: .18em;
  color: var(--ink-dim);
}
.cf-full { grid-column: 1 / -1; }

.cf-field input,
.cf-field textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(10, 7, 20, .5);
  color: #fff;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .3s, box-shadow .3s;
  resize: vertical;
}
.cf-field input:focus,
.cf-field textarea:focus {
  border-color: rgba(255, 157, 196, .7);
  box-shadow: 0 0 0 4px rgba(255, 157, 196, .1);
}
.cf-field textarea { line-height: 1.8; min-height: 110px; }

.cf-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.cf-note { font-size: 12.5px; color: var(--ink-dim); letter-spacing: .03em; }

/* 时光信箱卡片 */
.capsule-list { display: grid; gap: 14px; }

.capsule {
  position: relative;
  padding: 18px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .035);
  transition: border-color .4s, box-shadow .4s;
}
.capsule.is-locked {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 10px, transparent 10px 20px),
    rgba(255, 255, 255, .03);
  border-color: rgba(255, 196, 120, .28);
}
.capsule.is-open {
  border-color: rgba(255, 157, 196, .4);
  box-shadow: 0 20px 50px -34px rgba(255, 111, 159, .9);
}

.cap-head { display: flex; align-items: center; gap: 14px; }
.cap-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 18px;
  background: var(--grad-soft);
  border: 1px solid var(--line-soft);
}
.cap-meta { flex: 1; min-width: 0; }
.cap-title { font-size: 14.5px; font-weight: 600; letter-spacing: .04em; color: #fff; }
.cap-sub { margin-top: 3px; font-size: 11.5px; letter-spacing: .08em; color: var(--ink-dim); }

.cap-seal {
  display: grid;
  place-items: center;
  padding: 22px 0 6px;
}
.cap-lock-glyph { font-size: 34px; opacity: .55; filter: drop-shadow(0 0 18px rgba(255, 196, 120, .5)); }

.cap-locked-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-dim);
  letter-spacing: .04em;
  padding-bottom: 6px;
}

.cap-body {
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: 12px;
  background:
    repeating-linear-gradient(180deg, transparent 0 32px, rgba(120, 90, 70, .09) 32px 33px),
    linear-gradient(170deg, #fffaf4, #fdf2ea);
  color: #4a3a44;
  font-family: var(--font-kai);
  font-size: 16px;
  line-height: 33px;
  letter-spacing: .03em;
  white-space: pre-line;
}

/* 底部工具 */
.sec-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}

.sec-note {
  margin-top: 12px;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--ink-dim);
}

/* Tab 横向滚动（手机） */
@media (max-width: 620px) {
  .secret-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    margin-inline: -4px;
  }
  .secret-tabs::-webkit-scrollbar { display: none; }
  .stab {
    flex-shrink: 0;
    padding: 9px 16px;
    font-size: 12.5px;
    letter-spacing: .04em;
  }
  .wish-add { flex-wrap: wrap; }
  .wish-add input { flex: 1 1 100%; }
  .wish-add .btn { flex: 1 1 100%; }
  .wish { flex-wrap: wrap; }
  .wish-meta { width: 100%; padding-left: 36px; }
  .wish-actions { margin-left: auto; }
  .today-card { padding: 20px; }
}

/* ---------- 12. 页脚 ---------- */
.footer {
  position: relative;
  z-index: 2;
  padding: 70px 24px 54px;
  text-align: center;
  border-top: 1px solid var(--line-soft);
  margin-top: 40px;
  background: linear-gradient(180deg, transparent, rgba(10, 7, 20, .6));
}

.footer .f-heart {
  font-size: 26px;
  color: var(--rose);
  
  display: inline-block;
  filter: drop-shadow(0 0 16px rgba(255, 111, 159, .9));
}

.footer p { margin-top: 14px; font-size: 13px; color: var(--ink-dim); letter-spacing: .1em; font-weight: 300; }
.footer .f-names {
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: .3em;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

/* ---------- 13. Toast / 弹窗 ---------- */
.toast-stack {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  width: min(92vw, 460px);
}

.toast {
  max-width: 100%;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(24, 16, 40, .92);
  border: 1px solid rgba(255, 157, 196, .35);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9), 0 0 30px -14px rgba(255, 157, 196, .8);
  font-size: 13.5px;
  letter-spacing: .05em;
  color: #fff;
  text-align: center;
  animation: toastIn .5s var(--ease), toastOut .5s var(--ease) 2.6s forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(.95); }
  to { opacity: 1; transform: none; }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(-10px) scale(.97); }
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 4, 12, .82);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease);
}
.modal.open { opacity: 1; pointer-events: auto; }

.modal-card {
  position: relative;
  max-width: 480px;
  width: 100%;
  padding: 40px 32px;
  border-radius: var(--r-lg);
  text-align: center;
  background: linear-gradient(165deg, rgba(48, 28, 66, .96), rgba(24, 15, 40, .97));
  border: 1px solid rgba(255, 157, 196, .3);
  box-shadow: 0 40px 100px -30px #000, 0 0 80px -30px rgba(255, 111, 159, .7);
  transform: scale(.94) translateY(10px);
  transition: transform .5s var(--ease);
}
.modal.open .modal-card { transform: none; }

.modal-card .big { font-size: 46px; margin-bottom: 12px; }
.modal-card h3 { font-size: 23px; letter-spacing: .1em; }
.modal-card p { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); font-weight: 300; line-height: 2; }
.modal-card .btn { margin-top: 26px; }

/* 彩带 canvas */
#fxCanvas {
  position: fixed;
  inset: 0;
  z-index: 140;
  pointer-events: none;
  display: none;
}
#fxCanvas.on { display: block; }

/* 回到顶部 */
.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 70;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(20, 13, 34, .8);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: all .4s var(--ease);
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--grad); color: #2a0f1d; }

/* ---------- 13b. 弹窗关闭按钮 ---------- */
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1;
  transition: background .25s, color .25s, transform .25s;
  z-index: 2;
}
.modal-close:hover {
  background: rgba(224, 122, 158, .25);
  border-color: rgba(224, 122, 158, .6);
  color: #fff;
  transform: rotate(90deg);
}

/* ---------- 13c. 省电模式 ----------
 *  用户点导航栏的 ◐ 按钮，或系统检测到低端设备时自动加上 .is-eco。
 *  原则：关掉装饰，保留内容可读性。 */
.is-eco .aurora { animation: none; opacity: .55; }
.is-eco .float-hearts { display: none; }
.is-eco .petal-layer { display: none; }
.is-eco .brand-heart { animation: none; }
.is-eco .footer .f-heart { animation: none; }
.is-eco .cd-today { animation: none; }
.is-eco .caret { animation: none; }
.is-eco .lock-heart { animation: none; }
.is-eco .scroll-cue i { animation: none; }

/* 低端设备：进一步关掉滚动出现动画（改为直接显示） */
.is-low-end .reveal,
.is-low-end .tl-item,
.is-low-end .photo-card {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.is-low-end .photo-card img[data-loading="1"] {
  animation: none;
  background: rgba(255, 255, 255, .05);
}

/* 减少动效偏好：同样生效 */
@media (prefers-reduced-motion: reduce) {
  .float-hearts,
  .petal-layer { display: none; }
  .aurora { animation: none; }
  .hero-photo { opacity: 1; transform: none; }
}

/* ---------- 14. 响应式 ---------- */
@media (max-width: 1180px) {
  .nav { gap: 14px; padding: 0 20px; }
  .nav-links a { padding: 9px 10px; font-size: 13px; letter-spacing: .04em; }
  .brand-text { display: none; }
}

@media (max-width: 860px) {
  :root { --nav-h: 62px; }
  .nav-links { display: none; }
  .menu-btn { display: inline-grid; }
  .section { padding: 72px 0; }
  .wrap { width: calc(100% - 32px); }
  .cd-grid { gap: 8px; }
  .hero-stats { gap: 10px; }
  .stat { min-width: 104px; padding: 12px 16px 10px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-btn { width: 44px; height: 44px; }
  .lightbox { padding: 16px; }
  .lb-figure img { max-height: 62vh; }
  .paper { font-size: 15.5px; line-height: 32px; }

  /* 移动端：所有可点元素至少 44×44 */
  .icon-btn { width: 44px; height: 44px; }
  .chip { min-height: 44px; padding: 10px 20px; }
  .stab { min-height: 44px; }
  .gtab { min-height: 44px; }
  .ph-heart { width: 44px; height: 44px; font-size: 16px; }
  .wish-act { width: 44px; height: 44px; }
  .wish-box { width: 28px; height: 28px; }
  .lb-close { width: 44px; height: 44px; }
  .modal-close { width: 44px; height: 44px; }

  /* 照片卡在窄屏上信息更紧凑 */
  .photo-card .ph-body { padding: 11px 13px 13px; }
  .photo-card .ph-title { font-size: 13.5px; }
  .photo-card .ph-desc { font-size: 12px; -webkit-line-clamp: 2; }
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  .section-head { margin-bottom: 34px; }
  .hero { padding-top: calc(var(--nav-h) + 20px); padding-bottom: 70px; }
  .hero-photo { width: 140px; height: 140px; margin-bottom: 18px; }
  .hero-photo::before { inset: -7px; border-radius: 26px; }
  .hero-photo img { border-radius: 21px; }
  .hero-title { font-size: clamp(36px, 11vw, 54px); }
  .hero-sub { letter-spacing: .1em; font-size: 13px; }
  .hero-actions .btn { height: 48px; padding: 0 22px; font-size: 14px; flex: 1 1 100%; }
  .cd-grid { grid-template-columns: repeat(2, 1fr); }
  .cd-num { font-size: 38px; }
  .countdown-card { padding: 24px 16px 28px; }
  .game-head h3 { font-size: 17px; }
  .game-hud { margin-left: 0; width: 100%; }
  .hud { flex: 1; min-width: 0; }
  .memory-grid { gap: 8px; }
  .mcard { border-radius: 12px; }
  .mface { border-radius: 12px; }
  .qopt { padding: 14px 16px; font-size: 14px; }
  .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
  .anniv-n { font-size: 18px; }
  .secret-shell { padding: 20px 14px 24px; }
  .lock-heart { width: 76px; height: 76px; font-size: 28px; }
  .toast-stack { bottom: 78px; width: calc(100vw - 32px); }
  .toast { font-size: 12.5px; padding: 10px 18px; }
  .hero-stats { max-width: 100%; gap: 8px; }
  .hero-stats .stat { flex: 1 1 0; min-width: 0; padding: 12px 8px 10px; }
  .stat-num { font-size: 21px; }
  .stat-label { font-size: 9.5px; letter-spacing: .06em; white-space: nowrap; }
  .section-title { font-size: 25px; }
  .section-sub { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* 打印（把情书打印出来送她） */
@media print {
  .bg-layers, .nav, .drawer, .petal-layer, .to-top, .footer, .lightbox, .modal, .toast-stack { display: none !important; }
  body { background: #fff; color: #222; }
  .paper { color: #333; box-shadow: none; }
}