/* christmas-papercut（鎏金纸雕圣诞）样式
 * 高定圣诞海报：穆夏风纸雕 + 暖红光漫射 + 分形雪松 + 鎏金浆果 + 丝网印刷质感
 */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* 上下留白：卡片再高也不会顶头/贴底（超高时页面可滚动） */
  padding: 24px 0;
  /* 微信 webview 的 100vh 经常算错导致 body 塌高、卡片顶头，
     用 JS 实测的 --card-vh（index.js 里设置），不支持的浏览器回退 100vh */
  min-height: var(--card-vh, 100vh);
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  color: #f6ecd6;
  background: #3a0e1a; /* 兜底底色（canvas 会被覆盖） */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- 主画布：纸雕背景 + 特效层 ---- */
#papercut-bg, #fx-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- 丝网印刷质感：半调波纹 + 颗粒噪点（叠加在背景之上、文字之下）---- */
.retro-overlay {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* 半调圆点 */
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.045) 1px, transparent 1.4px),
    radial-gradient(circle, rgba(20, 0, 6, 0.06) 1px, transparent 1.4px);
  background-size: 5px 5px, 7px 7px;
  background-position: 0 0, 3px 3px;
  mix-blend-mode: overlay;
  opacity: 0.85;
}
.retro-noise {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  /* 细颗粒噪点（用重复径向渐变模拟，避免外部图片） */
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.035) 0.5px, transparent 0.8px);
  background-size: 3px 3px;
  mix-blend-mode: soft-light;
  opacity: 0.6;
}

/* ---- 三段曲线装饰性文字（SVG）---- */
.curve-text {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
.curve-text .t1 { fill: #e9cf8f; font-size: 13px; letter-spacing: 3px; font-family: Georgia, "Times New Roman", serif; }
.curve-text .t2 { fill: #f7e9c8; font-size: 15px; letter-spacing: 4px; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
.curve-text .t3 { fill: #d9a24a; font-size: 16px; letter-spacing: 2px; font-family: Georgia, "Times New Roman", serif; }

/* ---- 错落字母（Merry Christmas.）---- */
.scatter {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.scatter .lt {
  position: absolute;
  font-family: Georgia, "Didot", "Times New Roman", serif;
  font-weight: 700;
  transform-origin: center;
  animation: lt-float 6s ease-in-out infinite;
  text-shadow: 0 0 14px rgba(255, 190, 90, 0.35), 0 2px 3px rgba(40, 0, 8, 0.4);
}
.scatter .lt.c-gold  { color: #e9cf8f; }
.scatter .lt.c-ivory { color: #f7e9c8; }
.scatter .lt.c-red   { color: #e8747f; }

@keyframes lt-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot)); }
  50%      { transform: translateY(-7px) rotate(var(--rot)); }
}

/* ---- 主卡 ---- */
.card {
  position: relative;
  z-index: 8;
  text-align: center;
  padding: 26px 24px;
  margin: auto;
  max-width: 420px;
  width: calc(100% - 44px);
  border-radius: 14px;
  /* 半透明墨黑卡面，让纸雕透出来 */
  background: linear-gradient(160deg, rgba(26, 4, 10, 0.78), rgba(48, 8, 18, 0.7));
  border: 1px solid rgba(233, 207, 143, 0.35);
  box-shadow:
    0 0 0 1px rgba(233, 207, 143, 0.18),
    0 18px 44px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(2px);
  animation: card-in 1.4s ease both;
}

.festival-tag {
  font-size: 13px;
  letter-spacing: 3px;
  color: #e9cf8f;
  margin-bottom: 10px;
  text-shadow: 0 0 12px rgba(233, 207, 143, 0.4);
}

.card-title {
  font-size: 24px;
  font-weight: 700;
  color: #f7e9c8;
  letter-spacing: 2px;
  margin-bottom: 6px;
  font-family: Georgia, "Didot", "Times New Roman", serif;
}
.card-title em { font-style: normal; color: #e8747f; }

.card-to {
  font-size: 16px;
  font-weight: 600;
  color: #e9cf8f;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.divider {
  width: 84px;
  height: 1px;
  margin: 0 auto 14px;
  background: linear-gradient(90deg, transparent, #d9a24a, transparent);
}

.card-msg {
  white-space: pre-wrap;
  font-size: 15px;
  line-height: 1.85;
  color: #f2e6c8;
  min-height: 1.85em;
}

.card-from {
  margin-top: 18px;
  font-size: 14px;
  color: #d9a24a;
  opacity: 0.95;
  letter-spacing: 1px;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- 底部徽章（纸雕林之间的鎏金小签）---- */
.holly-tag {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: 8;
  font-size: 12px;
  letter-spacing: 3px;
  color: rgba(233, 207, 143, 0.75);
  pointer-events: none;
}