/* ============================================================
   像素婚礼请柬 · 星露谷风格设计系统
   字体：缝合像素字体 Fusion Pixel（12px，请使用 12 的倍数字号）
   ============================================================ */

@font-face {
  font-family: "Fusion Pixel";
  src: url("../assets/fonts/fusion-pixel-12px-proportional-zh_hans.otf.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Fusion Pixel";
  src: url("../assets/fonts/fusion-pixel-12px-proportional-latin.otf.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F;
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* 星露谷配色 */
  --ink: #4a2f1d;          /* 深棕 · 描边/正文 */
  --ink-soft: #7a4e2d;     /* 浅棕 */
  --cream: #fff8e7;        /* 奶油 · 面板底色 */
  --cream-2: #ffefc9;      /* 奶油深 · 信封盖 */
  --paper: #fffdf5;        /* 纸白 */
  --sky: #9bd8ff;
  --sky-deep: #7cc0f5;
  --grass: #6dbe45;
  --grass-dark: #4e9a3a;
  --wood: #b98a5a;
  --wood-dark: #8b5a2b;
  --red: #e85d75;          /* 爱心红 */
  --red-dark: #c24b5e;
  --pink: #ffb3c1;
  --gold: #ffc94d;
  --gold-dark: #e0a82e;
  --blue: #4a7fd4;         /* 背带裤蓝 */
  --blue-dark: #3a66ae;

  --border: 4px solid var(--ink);
  --shadow-hard: 0 8px 0 rgba(74, 47, 29, 0.85);
  --shadow-btn: 0 6px 0 var(--ink);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Fusion Pixel", "Microsoft YaHei", "PingFang SC", monospace;
  font-size: 24px;               /* 12px × 2，像素字体最佳倍率 */
  line-height: 1.7;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky-deep) 18%, #c9ec9a 18.2%, var(--grass) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

img, svg { image-rendering: pixelated; }

/* 信封未打开时锁定滚动 */
body.lock { overflow: hidden; }

main { max-width: 560px; margin: 0 auto; }

/* ============================================================
   通用组件
   ============================================================ */

/* 像素面板 */
.panel {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  padding: 36px 28px;
  margin: 0 20px;
  position: relative;
}
.panel::before {
  content: "";
  position: absolute; inset: 8px;
  border: 2px solid rgba(138, 91, 43, 0.35);
  pointer-events: none;
}

/* 区块 */
.section { padding: 64px 0 24px; }

/* —— 邀请函区装饰：山谷邮差狐狸（右下）+ 花草（左下） —— */
#notice, #notice-bride, #notice-groom { position: relative; padding-bottom: 104px; }
.notice-deco {
  position: absolute; right: 12px; bottom: 0; width: 96px; z-index: 1;
  pointer-events: none;
}
.notice-deco img {
  display: block; width: 100%; height: auto;
  image-rendering: pixelated; transform: rotate(-4deg);
  filter: drop-shadow(3px 4px 0 rgba(74, 47, 29, 0.35));
}
.notice-flowers { position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 1; pointer-events: none; }
.notice-flowers svg { position: absolute; }
body.night .notice-deco img { filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.45)) brightness(0.68) saturate(0.85); }
body.night .notice-flowers svg { filter: brightness(0.75); }

/* 标题（模板式：英文眉题 + 中文大标题） */
.sec-title {
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .08em;
  margin-bottom: 32px;
  color: #7a412f;
  text-shadow: 2px 2px #f6d470, -1px -1px #fff0ae;
}
.sec-title::before {
  content: 'WEDDING INVITATION';
  display: block;
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  color: inherit;
  opacity: .8;
  text-shadow: none;
}
#notice .sec-title::before { content: 'WEDDING INFO'; }
#notice-bride .sec-title::before { content: "THE BRIDE'S BANQUET"; }
#notice-groom .sec-title::before { content: "THE GROOM'S BANQUET"; }
.quest-title::before { content: 'A NEW QUEST'; }
#ceremony .sec-title::before { content: 'THE CEREMONY'; }
#map .sec-title::before { content: 'HOW TO ARRIVE'; }
#rsvp .sec-title::before { content: 'JOIN THE CELEBRATION'; }
.guests-title::before { content: 'FRIENDS OF THE VALLEY'; }
.games-section .sec-title::before { content: 'WEDDING FUN FAIR'; }
.sec-title .heart {
  display: inline-block; width: 20px; height: 20px;
  vertical-align: -2px; margin: 0 10px;
  animation: heartbeat 1.6s ease-in-out infinite;
}

/* 像素按钮（经典游戏浮雕感） */
.btn {
  display: inline-flex;
  align-items: center; justify-content: center; gap: 12px;
  font-family: inherit;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  background: var(--cream-2);
  border: 4px solid;
  border-color: var(--paper) var(--wood-dark) var(--wood-dark) var(--wood);
  box-shadow: var(--shadow-btn);
  padding: 14px 28px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.05s, box-shadow 0.05s;
  user-select: none;
}
.btn:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 var(--ink);
}
.btn-primary {
  background: var(--red);
  color: var(--paper);
  border-color: #ff9aac var(--red-dark) var(--red-dark) #f78da1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.btn-wood {
  background: var(--wood);
  color: var(--paper);
  border-color: #d9b183 var(--wood-dark) var(--wood-dark) #c69a6b;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.btn-block { display: flex; width: 100%; }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn svg { flex: none; }

/* 入场动画 */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* 提示气泡 toast */
#toast {
  position: fixed;
  left: 50%; bottom: 90px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--cream);
  border: 4px solid var(--paper);
  padding: 14px 24px;
  font-size: 24px;
  z-index: 200;
  max-width: 88vw;
  text-align: center;
  animation: pop-in 0.3s ease;
}
#toast[hidden] { display: none; }

@keyframes pop-in {
  from { transform: translateX(-50%) scale(0.8); opacity: 0; }
  to   { transform: translateX(-50%) scale(1); opacity: 1; }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.2); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
  60% { transform: scale(1); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes drift {
  0%   { transform: translateX(-60px); }
  50%  { transform: translateX(60px); }
  100% { transform: translateX(-60px); }
}

@keyframes blink-arrow {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(6px); opacity: 0.35; }
}

/* ============================================================
   开屏信封
   ============================================================ */

#envelope-screen {
  position: fixed; inset: 0;
  z-index: 100;
  background: linear-gradient(180deg, #a8dcff 0%, var(--sky) 40%, #d8f2c8 60%, var(--grass) 100%);
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity 0.5s ease;
}
#envelope-screen.fade-out { opacity: 0; pointer-events: none; }

/* 开屏漂浮星星 */
.env-star {
  position: absolute; width: 4px; height: 4px;
  background: #fff9cf; box-shadow: 3px 2px #ffffff8f;
  animation: starBlink var(--twinkle, 2.2s) ease-in-out infinite alternate;
}

.envelope-wrap {
  position: relative;
  width: 336px;
  height: 240px;
  cursor: pointer;
  animation: bob 2.6s ease-in-out infinite;
}
.envelope-wrap > svg { position: absolute; top: 0; left: 0; }
.env-back { filter: drop-shadow(0 12px 0 rgba(74, 47, 29, 0.28)); }

/* 地面椭圆阴影（不随信封浮动） */
.env-shadow {
  width: 250px; height: 22px; margin-top: 8px;
  background: radial-gradient(ellipse at center, rgba(74, 47, 29, 0.38), transparent 70%);
  pointer-events: none;
}

/* 信封盖：以顶边为轴向上翻开（定格动画：帧进式翻转） */
.flap-wrap {
  position: absolute;
  top: 0; left: 0;
  width: 336px; height: 132px;
  transform-origin: 50% 0;
  transition: transform 0.5s steps(5, end);
}
.envelope-wrap.open .flap-wrap { transform: scaleY(-1); }

/* 拆封前魔法颤动（3 帧定格） */
.envelope-wrap.shake { animation: env-shake 0.3s steps(3) 1; }
@keyframes env-shake {
  0% { transform: translateX(0); }
  33% { transform: translateX(-3px); }
  66% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* 蜡封星光爆裂（霍格沃兹式魔法光点） */
.sparkle {
  position: absolute; z-index: 6;
  width: 5px; height: 5px;
  background: #ffe27a;
  box-shadow: 3px 2px #fff3a080;
  animation: sparkle-out 0.55s steps(5) forwards;
  pointer-events: none;
}
@keyframes sparkle-out {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(var(--dx, 20px), var(--dy, -20px)) scale(0.2); opacity: 0; }
}

/* 金色蜡封（盖尖上，嵌像素爱心） */
.wax-seal {
  position: absolute; left: 145px; top: 82px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e85d75, #a52f45 68%, #7c1f33);
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 3px #f7c36b, 3px 4px 0 rgba(42, 26, 8, 0.4);
  display: flex; align-items: center; justify-content: center;
}

/* 右上角像素邮票 */
.env-stamp {
  position: absolute; right: 24px; top: 10px;
  width: 56px; height: 64px;
  background: #fffdf5;
  border: 2px solid #b98a5a;
  box-shadow: inset 0 0 0 2px #f3e7d0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  z-index: 5;
}
.env-stamp::after {
  content: '';
  width: 40px; height: 12px;
  background: repeating-linear-gradient(180deg, #d9c3a5 0 2px, transparent 2px 5px);
  opacity: .8;
}

/* 收件人像素字条 */
.env-address {
  position: absolute; left: 50%; top: 76%;
  transform: translate(-50%, -50%);
  z-index: 4;
  background: rgba(255, 248, 231, .94);
  border: 2px solid #7a4e2d;
  box-shadow: 2px 3px 0 rgba(42, 26, 8, .35);
  padding: 5px 14px 3px;
  font-size: 16px; font-weight: 900;
  letter-spacing: 3px; color: #4a2f1d;
  white-space: nowrap;
}

/* 信纸从信封里滑出 */
.letter {
  position: absolute;
  left: 50%; top: 58%;
  width: 62%; height: 40%;
  transform: translate(-50%, 0);
  background: var(--paper);
  border: 3px solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  z-index: 2;
  font-size: 24px;
  letter-spacing: 2px;
  transition: transform 0.45s steps(4, end) 0.35s;
}
.envelope-wrap.open .letter { transform: translate(-50%, -150%); }
.env-front { z-index: 3; }
.flap-wrap { z-index: 4; }

/* 信封整体上浮微转淡出（定格帧进） */
.envelope-wrap.leave {
  animation: none;
  transition: transform 0.5s steps(4, end), opacity 0.45s ease 0.08s;
  transform: scale(1.35) translateY(-4%) rotate(-2deg);
  opacity: 0;
}

/* 自然轻提示（不设按钮）：柔和呼吸 */
.open-hint {
  margin-top: 40px;
  font-size: 16px;
  letter-spacing: 2px;
  color: rgba(255, 251, 232, 0.9);
  text-shadow: 0 2px 0 rgba(74, 47, 29, 0.35);
  animation: hint-pulse 2.6s ease-in-out infinite;
  cursor: pointer;
}
@keyframes hint-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.open-hint.hide { opacity: 0; transition: opacity 0.2s ease; }

/* 信封让开后，封面以「镜头定焦」方式进场 */
#hero.entering { animation: hero-enter 1.2s cubic-bezier(0.22, 0.9, 0.3, 1); }
@keyframes hero-enter {
  from { transform: scale(1.06); filter: blur(3px); }
  to { transform: scale(1); filter: blur(0); }
}

/* ============================================================
   音乐开关
   ============================================================ */

#music-toggle {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 90;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream);
  border: 4px solid;
  border-color: var(--paper) var(--wood-dark) var(--wood-dark) var(--wood);
  box-shadow: var(--shadow-btn);
  cursor: pointer;
}
#music-toggle svg { display: block; }
#music-toggle.off svg { opacity: 0.45; }
#music-toggle::after {
  content: "";
  position: absolute;
  width: 50px; height: 5px;
  background: var(--red);
  border: 1px solid var(--ink);
  transform: rotate(-45deg);
  display: none;
}
#music-toggle.off::after { display: block; }
#music-toggle[hidden] { display: none; }

/* ============================================================
   主视觉 Hero（花园封面：AI 混搭插画 + 蝴蝶/爱心/绿叶 + Ken Burns）
   ============================================================ */

#hero {
  position: relative;
  /* 480px 壳内全幅封面：整图铺满 hero，无天空底 */
  min-height: min(100svh, calc(100vw * 2.1667)); /* 窄屏=原图比例整幅；宽屏不超过视口 */
  padding: max(52px, 7svh) 24px 22px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: #fff5ce;
}
/* 顶部渐暗遮罩：压在封面图上，让树冠区的名字/日期与背景拉开对比度 */
#hero::after {
  content: ''; position: absolute; z-index: 1; inset: 0 0 auto;
  height: 46%;
  background: linear-gradient(to bottom, rgba(18, 9, 2, .62) 0%, rgba(18, 9, 2, .42) 26%, rgba(18, 9, 2, .22) 52%, transparent 100%);
  pointer-events: none;
}
/* 桌面：整图铺满视口高度（壳 480 定宽 + 视口高度 cover，只裁两侧少量） */
@media (min-width: 521px) {
  #hero { min-height: min(100svh, 900px); }
}

#hero-scene { position: absolute; z-index: 1; inset: 0; pointer-events: none; }

/* 封面图（assets/bg/封面2）：铺满 hero，随壳宽缩放、不放大 */
.hero-mountains {
  position: absolute; z-index: 1; inset: 0;
  will-change: transform;
}
.hero-mountains img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: center 40%;
  image-rendering: auto; /* 照片图不用像素缩放 */
}

/* 心形起点下移到石亭下缘 */
@media (min-width: 768px) {
  .heart-rise { bottom: 40%; }
}

/* 蝴蝶：外层漂移轨迹 + 内层扇翅 */
.bfly { position: absolute; z-index: 2; pointer-events: none; }
.bfly svg { display: block; transform-origin: 50% 50%; animation: flutter .32s ease-in-out infinite alternate; }
.bfly.d1 { animation: bfly-fly1 18s ease-in-out infinite; }
.bfly.d2 { animation: bfly-fly2 23s ease-in-out infinite; }
.bfly.d3 { animation: bfly-fly3 28s ease-in-out infinite; }
@keyframes flutter { from { transform: scaleX(1) rotate(-8deg); } to { transform: scaleX(.4) rotate(8deg); } }
@keyframes bfly-fly1 {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-7vw, -9vh) rotate(-10deg); }
  50% { transform: translate(4vw, -16vh) rotate(8deg); }
  75% { transform: translate(-3vw, -6vh) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
@keyframes bfly-fly2 {
  0% { transform: translate(0, 0) rotate(0); }
  30% { transform: translate(8vw, -6vh) rotate(9deg); }
  60% { transform: translate(3vw, -15vh) rotate(-8deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
@keyframes bfly-fly3 {
  0% { transform: translate(0, 0) rotate(0); }
  35% { transform: translate(-5vw, -12vh) rotate(7deg); }
  70% { transform: translate(6vw, -8vh) rotate(-10deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

/* 爱心上飘（从新人脚下附近升起） */
.heart-rise { position: absolute; z-index: 2; bottom: 45%; pointer-events: none; opacity: 0; animation: heart-rise linear infinite; }
.heart-rise svg { display: block; }
@keyframes heart-rise {
  0% { transform: translateY(0) scale(.8) rotate(-6deg); opacity: 0; }
  12% { opacity: .95; }
  55% { transform: translateY(-26vh) scale(1) rotate(-8deg); }
  100% { transform: translateY(-54vh) scale(1.05) rotate(8deg); opacity: 0; }
}

/* 绿叶飘落（复用花瓣雨的落态） */
.leaf-fall { position: absolute; z-index: 2; top: -6vh; pointer-events: none; animation: leaf-fall 8s linear infinite; }
.leaf-fall svg { display: block; }
@keyframes leaf-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: .9; }
  50% { transform: translate3d(6vw, 50vh, 0) rotate(200deg); }
  100% { transform: translate3d(-4vw, 110vh, 0) rotate(400deg); opacity: .7; }
}

/* 文字块压在图内招牌（3%-13%）下方、树冠+金色挂饰带（14%-25%）区域，
   靠顶部渐暗遮罩（.hero-bg-wrap::after）拉开对比；新人头部在图内 42%-46% 不受影响 */
/* 文字块：招牌下方树冠与石亭之间（名字中线图内 ~30%），任何窗口高度下随 hero 比例定位 */
.hero-copy {
  position: absolute; z-index: 4; left: 0; right: 0; top: 30%;
  transform: translateY(-35%);
  text-align: center;
}
.eyebrow {
  margin: 0 0 6px; color: #fff3c4; font-size: 12px; font-weight: 900;
  letter-spacing: .18em;
  text-shadow: 0 -1px 0 #e8c86a, 0 1px 0 #e8c86a, -1px 0 0 #e8c86a, 1px 0 0 #e8c86a,
    0 1px 0 #3d2b1a, 1px 0 0 #3d2b1a, -1px 1px 0 #3d2b1a, 1px 1px 0 #3d2b1a,
    0 2px 0 #2a1a08, 2px 2px 0 rgba(42, 26, 8, .45);
}

/* 新人名字（缝合像素粗体 Fusion Pixel：淡奶黄内填 + 浅金过渡 + 深棕硬像素描边 + 右下厚度阴影） */
.game-title {
  margin: 0 auto 8px;
  color: #fff3c4;
  font-family: 'Fusion Pixel', Impact, 'Arial Black', sans-serif;
  font-size: 24px; /* 2×12 像素网格，锐利 */
  text-rendering: geometricPrecision;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .04em;
  white-space: nowrap;
  text-shadow:
    0 -1px 0 #e8c86a, 0 1px 0 #e8c86a, -1px 0 0 #e8c86a, 1px 0 0 #e8c86a,
    -1px -1px 0 #e8c86a, 1px -1px 0 #e8c86a, -1px 1px 0 #e8c86a, 1px 1px 0 #e8c86a,
    0 -2px 0 #3d2b1a, 0 2px 0 #3d2b1a, -2px 0 0 #3d2b1a, 2px 0 0 #3d2b1a,
    -2px -2px 0 #3d2b1a, 2px -2px 0 #3d2b1a, -2px 2px 0 #3d2b1a, 2px 2px 0 #3d2b1a,
    3px 3px 0 #2a1a08, 4px 4px 0 rgba(42, 26, 8, .55);
  transform: scaleX(.94);
}

/* 日期（第三层，同配色层次：金边 + 棕边 + 右下厚度） */
.hero-date {
  margin: 0;
  color: #fff3c4;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
  text-shadow:
    0 -1px 0 #e8c86a, 0 1px 0 #e8c86a, -1px 0 0 #e8c86a, 1px 0 0 #e8c86a,
    -1px -1px 0 #3d2b1a, 1px -1px 0 #3d2b1a, -1px 1px 0 #3d2b1a, 1px 1px 0 #3d2b1a,
    0 2px 0 #3d2b1a, 2px 0 0 #3d2b1a, 2px 2px 0 #2a1a08, 3px 3px 0 rgba(42, 26, 8, .5);
}

/* 专属邀请横幅（小徽章式） */
.hero-guest {
  margin: 8px 0 0; display: inline-block;
  padding: 4px 14px;
  color: #fff3c0; font-size: 12px; letter-spacing: .14em;
  background: #6b4226e8; border: 3px solid #3d2b1a;
  box-shadow: inset 0 0 0 2px #d6aa67, 4px 5px #2a1a08;
  text-shadow: 2px 2px #2a1a08;
}

/* 开启按钮（木纹像素面板，浮在底部对话框「好久不见」下方） */
.scroll-hint {
  position: absolute; z-index: 6; left: 50%; bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
  padding: 5px 12px 4px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  border: 3px solid #5b3a1a; color: #fff3c0; background: #8a5a2b;
  box-shadow: inset 0 0 0 2px #d6aa67, 3px 4px #2a1a08;
  font-size: 12px; font-weight: 900; letter-spacing: .1em;
  cursor: pointer; animation: none;
}
.scroll-hint:active { transform: translate(calc(-50% + 3px), 3px); box-shadow: inset 0 0 0 2px #d6aa67, 2px 3px #2a1a08; }
.scroll-hint b { color: #ffd25e; font: 900 16px/1 sans-serif; animation: bob 1.2s ease-in-out infinite; }

/* ============================================================
   故事对话框（星露谷 NPC 对话样式）
   ============================================================ */

.dialog-box {
  display: flex;
  gap: 20px;
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  padding: 24px;
  min-height: 220px;
  cursor: pointer;
}
.dialog-portrait {
  flex: none;
  width: 88px; height: 88px;
  border: 4px solid var(--ink);
  background: #b8e0ff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.dialog-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dialog-speaker {
  align-self: flex-start;
  font-size: 20px;
  background: var(--gold);
  border: 3px solid var(--ink);
  padding: 2px 16px;
  margin-bottom: 14px;
  box-shadow: 0 3px 0 rgba(74, 47, 29, 0.5);
}
.dialog-text {
  font-size: 24px;
  line-height: 1.8;
  word-break: break-word;
}
.dialog-text .caret { color: var(--red); animation: blink-arrow 0.7s step-end infinite; display: inline-block; }
.dialog-next {
  margin-top: auto;
  align-self: flex-end;
  color: var(--ink-soft);
  animation: blink-arrow 1.2s ease-in-out infinite;
}
.dialog-box.done .dialog-next { animation: none; color: var(--ink); }

/* ============================================================
   照片墙
   ============================================================ */

#gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 20px;
}
.photo-card {
  background: var(--paper);
  border: var(--border);
  padding: 10px;
  box-shadow: 0 6px 0 rgba(74, 47, 29, 0.6);
  cursor: zoom-in;
  transition: transform 0.15s ease;
}
.photo-card:nth-child(odd) { transform: rotate(-1.6deg); }
.photo-card:nth-child(even) { transform: rotate(1.4deg); }
.photo-card:active { transform: scale(0.96) rotate(0); }
.photo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 3px solid rgba(138, 91, 43, 0.4);
}
/* [hidden] 会输给作者样式的 display，显式补回（同 #lightbox 惯例） */
#gallery-grid[hidden], .gallery-heading[hidden], .gallery-toggle-row[hidden] { display: none; }

/* 照片栏展开 / 收起按钮 */
.gallery-toggle-row {
  position: relative;   /* 寻宝爱心锚点宿主 */
  display: flex;
  justify-content: center;
  margin: -6px 0 20px;
}
.btn-sm {
  font-size: 14px;
  padding: 9px 18px;
  gap: 8px;
}

/* 灯箱（渐隐渐显 + 左右翻页 + 计数器） */
#lightbox {
  position: fixed; inset: 0;
  z-index: 150;
  background: rgba(34, 22, 10, 0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
#lightbox.on { opacity: 1; }
#lightbox[hidden] { display: none; }
.lb-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-in;
}
#lightbox img {
  max-width: 92vw; max-height: 78vh;
  border: 4px solid var(--paper);
  box-shadow: 0 0 0 4px var(--ink);
  transition: opacity 0.2s ease;
}
.lb-nav, .lb-close {
  position: absolute;
  z-index: 2;
  width: 44px; height: 44px;
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  background: var(--cream-2);
  border: 4px solid;
  border-color: var(--paper) var(--wood-dark) var(--wood-dark) var(--wood);
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
}
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
.lb-close { top: 10px; right: 10px; }
.lb-counter {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--cream);
  border: 3px solid var(--paper);
  padding: 4px 16px;
  font-size: 18px;
  font-weight: 700;
}
body.night #lightbox { background: rgba(10, 13, 24, 0.94); }
body.night .lb-counter { background: #26365e; border-color: #9db4e8; color: #fff3d6; }
body.night .lb-nav, body.night .lb-close { background: #26365e; color: #fff3d6; border-color: #4a6aab #1b2a4a #1b2a4a #33507f; }

/* ============================================================
   婚礼信息
   ============================================================ */

.info-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 3px dashed rgba(138, 91, 43, 0.4);
}
.info-row:last-of-type { border-bottom: none; }
.info-row .icon {
  flex: none;
  width: 56px; height: 56px;
  background: var(--cream-2);
  border: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.info-label { font-size: 12px; font-weight: 900; color: #7e4139; letter-spacing: .14em; }
.info-value { font-size: 18px; line-height: 1.7; word-break: break-all; white-space: pre-line; }

/* 住宿 & 接送说明（金色提示框，配置了才显示） */
.info-notice {
  display: flex;
  gap: 16px;
  margin: 26px 0 8px;
  padding: 18px 16px;
  background: #fff3d1;
  border: 4px solid;
  border-color: #e6c66a var(--gold-dark) var(--gold-dark) #f4d06f;
  box-shadow: 0 5px 0 rgba(74, 47, 29, 0.45);
}
.info-notice[hidden] { display: none; }
.info-notice-icon {
  flex: none;
  width: 48px; height: 48px;
  background: var(--gold);
  border: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.info-notice-title { font-size: 22px; letter-spacing: 3px; margin-bottom: 8px; }
.info-notice-body { min-width: 0; }
.info-notice-body p { font-size: 20px; line-height: 1.8; white-space: pre-line; word-break: break-word; }

/* 婚礼月历（7 列，婚礼日红心高亮） */
.wedding-cal {
  margin: 28px 0 8px;
  background: var(--paper);
  border: var(--border);
  box-shadow: 0 5px 0 rgba(74, 47, 29, 0.5);
  padding: 20px 14px 16px;
}
.cal-head { text-align: center; margin-bottom: 16px; }
.cal-head-title { font-size: 28px; letter-spacing: 4px; }
.cal-head-sub { font-size: 18px; color: var(--ink-soft); margin-top: 4px; letter-spacing: 1px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.cal-wd { text-align: center; font-size: 18px; color: var(--ink-soft); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 14px;
  border: 2px solid transparent;
}
.cal-day.cal-empty { visibility: hidden; }
.cal-day.cal-wed {
  background: var(--red);
  color: var(--paper);
  border-color: var(--red-dark);
  box-shadow: 0 3px 0 rgba(74, 47, 29, 0.4);
}
.cal-wed-mark { font-size: 10px; line-height: 1.3; letter-spacing: 0; white-space: normal; }

/* 今日行程（序号徽章 + 时间 + 说明） */
.mini-heading {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 26px 0 14px;
  font-size: 16px; font-weight: 900; letter-spacing: .1em; color: #683c32;
}
.mini-heading-icon {
  width: 32px; height: 32px;
  background: var(--cream-2);
  border: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.schedule-grid { display: grid; gap: 10px; }
.schedule-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--paper);
  border: var(--border);
  border-color: var(--ink) var(--wood-dark) var(--wood-dark) var(--wood);
  box-shadow: 0 5px 0 rgba(74, 47, 29, 0.55);
  padding: 12px 16px;
}
.schedule-index {
  flex: none;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--red);
  color: var(--paper);
  border: 3px solid var(--red-dark);
  font-size: 16px;
}
.schedule-body { flex: 1; min-width: 0; }
/* 左右对齐：环节名靠左、时间靠右同一行，说明独占下一行 */
.schedule-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.schedule-body b { font-size: 16px; font-weight: 900; color: var(--red-dark); letter-spacing: .1em; }
.schedule-body small {
  flex: none;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: .06em;
}
.schedule-body p { margin-top: 4px; font-size: 14px; line-height: 1.7; word-break: break-word; }

/* 交通指引：模板 location-card（样图2 样式） */
.location-card {
  margin: 26px 20px 0;
  padding: 19px;
  border: 5px solid #865035;
  background: #f4d48e;
  box-shadow: 7px 8px #a47a50;
  text-align: center;
}
.location-overline {
  margin: 0 0 6px;
  color: #a34b51;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}
.location-venue { margin: 0 0 8px; color: #91414a; font-size: 18px; font-weight: 900; }
.transport-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 17px 0;
}
.transport-cell {
  min-height: 117px;
  padding: 8px 5px;
  display: grid;
  justify-items: center;
  align-content: start;
  border: 4px solid #865035;
  background: #fff0bd;
  text-align: center;
}
.transport-cell img {
  width: 68px; height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
}
.transport-cell b { font-size: 14px; font-weight: 900; letter-spacing: .1em; color: #7a4e2d; }
.transport-text { font-size: 12px; line-height: 1.7; color: #7a4e2d; word-break: break-word; }

/* 婚宴模块：可展开的「完整婚礼信息」块（默认收起，点击展开） */
.banquet-more {
  margin: 18px 0 0;
  text-align: center;
}
.banquet-more-btn {
  display: inline-block;
  margin: 0 auto;
  padding: 9px 16px;
  border: 3px solid var(--ink);
  background: var(--cream-2);
  color: var(--ink);
  box-shadow: 0 4px 0 rgba(74, 47, 29, 0.55);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
  cursor: pointer;
}
.banquet-more-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(74, 47, 29, 0.55);
}
.bm-arrow {
  display: inline-block;
  margin-right: 8px;
  color: var(--red-dark);
}
.banquet-more-body {
  margin-top: 16px;
  border-top: 2px dashed rgba(122, 78, 45, 0.4);
  padding-top: 2px;
}
.banquet-more-body .mini-heading { margin-top: 20px; }

/* 婚宴模块顶部的相册（任意张照片：横滑 + 圆点 + 自动轮播，点开全屏；空数组整块移除） */
.banquet-album { margin: 0 0 18px; }
.album-swipe {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.album-swipe::-webkit-scrollbar { display: none; }
.album-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
  background: var(--cream);
  border: 4px solid var(--wood-dark);
  box-shadow: 0 5px 0 rgba(74, 47, 29, 0.45);
  cursor: zoom-in;
}
.album-slide.hidden { display: none; }
.album-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
body.night .album-slide { background: #2c315a; border-color: #6a8cc0; }
.album-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 6px 0 0;
}
.album-dot {
  width: 10px; height: 10px;
  background: rgba(74, 47, 29, 0.28);
  border: 2px solid var(--ink);
  transition: background 0.2s ease;
}
.album-dot.active { background: var(--red); }
body.night .album-dot { background: rgba(255, 255, 255, 0.2); border-color: #9db4e8; }
body.night .album-dot.active { background: #ff9aac; }

/* 按钮排：三枚红底像素按钮等分一行（婚宴信息块与山谷地图卡片共用） */
.action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.action-row .pixel-button {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 9px 4px;
  border-width: 3px;
  font-size: 11px;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* 红色像素导航按钮 + 卡片次要按钮 */
.pixel-button {
  display: block;
  width: fit-content;
  margin: 6px auto 0;
  min-width: 164px;
  padding: 10px 15px;
  border: 4px solid #6e2f42;
  color: #fff5c9;
  background: #b94d60;
  box-shadow: inset 0 0 0 2px #e77b78, 4px 5px #563247;
  text-align: center;
  text-decoration: none;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
  -webkit-tap-highlight-color: transparent;
}
.pixel-button:active {
  transform: translate(2px, 3px);
  box-shadow: inset 0 0 0 2px #e77b78, 2px 2px #563247;
}

/* 倒计时 */
.countdown {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 24px 0;
}
.cd-box {
  flex: 1;
  max-width: 96px;
  min-width: 0;
  background: var(--ink);
  color: var(--cream);
  border: 3px solid var(--ink);
  border-color: var(--ink) var(--wood-dark) var(--wood-dark) var(--wood);
  padding: 10px 2px 6px;
  text-align: center;
}
.cd-box .cd-num { font-size: 24px; line-height: 1.2; color: var(--gold); }
.cd-box .cd-label { font-size: 12px; letter-spacing: 1px; }
.cd-days .cd-num { font-size: 20px; }

/* ============================================================
   回执表单
   ============================================================ */

#rsvp-counter {
  text-align: center;
  font-size: 22px;
  color: var(--ink-soft);
  letter-spacing: 2px;
  margin-bottom: 24px;
}
#rsvp-counter b { color: var(--red); font-weight: normal; }

.field { margin-bottom: 26px; }
.field > label {
  display: block;
  font-size: 22px;
  letter-spacing: 3px;
  margin-bottom: 10px;
  color: var(--ink-soft);
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="datetime-local"],
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 24px;
  color: var(--ink);
  background: var(--paper);
  border: 4px solid var(--ink);
  padding: 12px 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  user-select: text;
  -webkit-user-select: text;
}
.field input:focus, .field textarea:focus {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(255, 201, 77, 0.45);
}
.field textarea { height: 120px; resize: none; }
.field .req { color: var(--red); }

/* 参加与否：像素单选胶囊 */
.radio-pills { display: flex; gap: 14px; }
.radio-pills label {
  flex: 1;
  text-align: center;
  font-size: 24px;
  padding: 12px 0;
  background: var(--paper);
  border: 4px solid var(--ink);
  cursor: pointer;
  letter-spacing: 2px;
}
.radio-pills input { display: none; }
.radio-pills label.checked {
  background: var(--grass);
  color: var(--paper);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
.radio-pills label.checked.no {
  background: var(--ink-soft);
  color: var(--cream);
}

/* 人数步进器 */
.stepper {
  display: inline-flex;
  align-items: center;
  border: 4px solid var(--ink);
  background: var(--paper);
}
.stepper button {
  font-family: inherit;
  font-size: 28px;
  width: 60px; height: 60px;
  background: var(--cream-2);
  border: none;
  cursor: pointer;
  color: var(--ink);
}
.stepper button:active { background: var(--gold); }
.stepper .stepper-val {
  width: 76px;
  text-align: center;
  font-size: 30px;
  border-left: 3px solid var(--ink);
  border-right: 3px solid var(--ink);
  line-height: 60px;
  height: 60px;
}

.rsvp-success {
  text-align: center;
  padding: 30px 0;
}
.rsvp-success .big-heart { animation: heartbeat 1.5s ease-in-out infinite; }
.rsvp-success p { margin-top: 18px; font-size: 30px; letter-spacing: 4px; }
.rsvp-success .rsvp-summary { margin-top: 16px; font-size: 20px; letter-spacing: 2px; color: var(--ink-soft); line-height: 1.8; word-break: break-word; }

/* 住宿单选胶囊 */
.accommodation-pills label { font-size: 22px; }

/* 留言字数统计 */
.msg-count { display: block; text-align: right; margin-top: 6px; font-size: 18px; color: var(--ink-soft); }
.msg-count b { color: var(--red); font-weight: normal; }

/* 表单内联错误 */
.rsvp-error {
  margin: 4px 0 16px;
  padding: 10px 14px;
  border: 3px solid #7b303c;
  background: #f6c9cf;
  color: #7b303c;
  font-size: 20px;
  line-height: 1.6;
  text-align: center;
}
#rsvp-error[hidden] { display: none; }

/* 隐私说明 */
.form-note { margin-top: 14px; text-align: center; font-size: 16px; line-height: 1.7; color: var(--ink-soft); letter-spacing: 1px; }

/* ============================================================
   页脚
   ============================================================ */

footer {
  text-align: center;
  padding: 80px 20px 60px;
  color: var(--cream);
  text-shadow: 0 3px 0 rgba(74, 47, 29, 0.5);
}
.footer-names { font-size: 36px; letter-spacing: 6px; }
.footer-date { margin-top: 10px; font-size: 24px; letter-spacing: 4px; }
.footer-btns { margin-top: 36px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.footer-note { margin-top: 40px; font-size: 20px; letter-spacing: 2px; opacity: 0.85; }

/* ============================================================
   后台管理页
   ============================================================ */

.admin-body { background: var(--grass); }
.admin-main { max-width: 720px; margin: 0 auto; padding: 40px 0 80px; }

.admin-login { max-width: 420px; margin: 60px auto 0; }
.admin-login h1 { text-align: center; font-size: 36px; letter-spacing: 4px; margin-bottom: 30px; color: var(--cream); text-shadow: 0 4px 0 rgba(74, 47, 29, 0.5); }

.admin-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  margin: 0 20px 24px;
}
.admin-header h1 { font-size: 36px; color: var(--cream); letter-spacing: 4px; text-shadow: 0 4px 0 rgba(74, 47, 29, 0.5); }

.admin-stats { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 20px 24px; }
.stat-card {
  flex: 1; min-width: 130px;
  background: var(--cream);
  border: var(--border);
  box-shadow: 0 6px 0 rgba(74, 47, 29, 0.7);
  padding: 18px 12px;
  text-align: center;
}
.stat-card .stat-num { font-size: 40px; color: var(--red); }
.stat-card .stat-label { font-size: 20px; color: var(--ink-soft); letter-spacing: 2px; }

.admin-table-wrap { background: var(--cream); border: var(--border); box-shadow: var(--shadow-hard); margin: 0 20px; padding: 8px; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 20px; }
.admin-table th, .admin-table td {
  border-bottom: 3px dashed rgba(138, 91, 43, 0.35);
  padding: 12px 10px;
  text-align: left;
  white-space: nowrap;
}
.admin-table th { color: var(--ink-soft); font-weight: normal; letter-spacing: 2px; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table td.msg { white-space: normal; min-width: 140px; word-break: break-word; }
.badge { padding: 2px 10px; font-size: 20px; border: 3px solid var(--ink); }
.badge.yes { background: var(--grass); color: var(--paper); }
.badge.no { background: var(--ink-soft); color: var(--cream); }
.btn-del {
  font-family: inherit; font-size: 18px;
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: 4px 12px;
  cursor: pointer;
  color: var(--red-dark);
}
.btn-del:active { background: var(--red); color: var(--paper); }

.admin-err { color: var(--red); font-size: 22px; text-align: center; margin-top: 16px; }

/* ============================================================
   视差远景层 + 夜间主题
   ============================================================ */

/* 远山（模板 hero-mountains 山景图，顶部渐隐融入天空） */
#hero-scene .hills {
  position: absolute; left: -3%; right: -3%; bottom: -6px;
  height: min(680px, 75svh); will-change: transform;
}
#hero-scene .hills img {
  display: block; width: 100%; height: 100%; object-fit: fill;
  image-rendering: pixelated;
  -webkit-mask-image: linear-gradient(transparent 0 18%, #0003 22%, #000b 28%, #000 34%);
  mask-image: linear-gradient(transparent 0 18%, #0003 22%, #000b 28%, #000 34%);
}

/* 闪烁星光（白天隐藏，夜间主题显示在封面上方） */
#hero-scene .sky-stars { position: absolute; z-index: 1; inset: 0; overflow: hidden; display: none; }
body.night #hero-scene .sky-stars { display: block; }
#hero-scene .sky-stars::after {
  content: ''; position: absolute; left: -10%; right: -10%; top: 43%; height: 27%;
  opacity: .22; background: linear-gradient(180deg, transparent, #b9e5df 48%, transparent);
  filter: blur(14px);
}
#hero-scene .sky-stars i {
  position: absolute; width: 3px; height: 3px; background: #fff9cf;
  box-shadow: 4px 2px #ffffff8f;
  animation: starBlink var(--twinkle, 2.2s) ease-in-out infinite alternate;
}
@keyframes starBlink { from { opacity: .25; } to { opacity: 1; } }

/* 花瓣雨（婚礼节用） */
.petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.petal { position: absolute; top: -6vh; animation: petal-fall 8s linear infinite; }
.petal svg { display: block; }

@keyframes petal-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translate3d(7vw, 52vh, 0) rotate(180deg); }
  100% { transform: translate3d(-5vw, 112vh, 0) rotate(360deg); opacity: 0.85; }
}

/* ---------- 夜间主题（18:00 – 6:00 自动切换） ---------- */
body.night { background: linear-gradient(180deg, #101a38 0%, #1d2b58 22%, #2a3f7a 22.2%, #16224a 100%); }
body.night #envelope-screen { background: linear-gradient(180deg, #17224a 0%, #24376e 40%, #141d3d 60%, #0d1430 100%); }
body.night .sec-title { color: #fff3d6; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.45); }
body.night .open-hint, body.night footer { color: #ffe9c9; }
/* 夜间：封面压暗成夜空 + 保留星光；邀请横幅保持木纹暖色 */
body.night .hero-mountains img { filter: brightness(0.6) saturate(0.9); }
body.night .hero-guest { background: #6e2f4a; border-color: #ffb3c1 #2c1a30 #2c1a30 #f78da1; }

/* ============================================================
   任务卡（紫色夜晚区块）
   ============================================================ */

.quest-section {
  margin: 0 calc(50% - 50vw);          /* 全宽铺紫，内容仍居中 */
  padding: 64px 0 24px;
  background:
    radial-gradient(circle, #6b5488 1px, transparent 2px) 0 0 / 23px 23px,
    linear-gradient(180deg, #45306b, #2a1b40 55%, #382443);
}
.quest-section .sec-title { color: #fff1bd; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); }
.quest-section .heart { filter: brightness(1.2); }

.quest-card {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 44px 24px 20px;
  background: #352148;
  border: 6px solid #a36e4c;
  outline: 4px solid #4e2942;
  box-shadow: inset 0 0 0 3px #765274, 0 8px 0 rgba(29, 19, 41, 0.9);
  color: #faecd1;
}
.quest-pin {
  position: absolute; top: -26px; left: 50%;
  transform: translateX(-50%);
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border: 5px solid #ffbd65;
  color: #fff;
  background: #c84e64;
  box-shadow: 0 4px 0 #21152c;
  font-size: 36px;
  animation: bob 2s ease-in-out infinite;
}
.quest-card > p { font-size: 15px; line-height: 1.9; margin-bottom: 18px; }
.quest-list {
  list-style: none;
  display: grid; gap: 12px;
  padding: 16px 0;
  border-top: 2px dashed #805979;
  border-bottom: 2px dashed #805979;
}
.quest-list li {
  display: grid;
  grid-template-columns: 32px 58px 1fr;
  gap: 6px; align-items: center;
  font-size: 14px; line-height: 1.7;
}
.quest-list .quest-star { display: flex; align-items: center; justify-content: center; }
.quest-list b { color: #ffc57d; font-size: 15px; font-weight: 900; letter-spacing: .1em; }
.quest-list span:last-child { color: #faecd1; word-break: break-word; }
.quest-reward {
  margin-top: 16px;
  padding: 10px 8px;
  border: 3px solid #7c5579;
  background: #281a37;
  color: #ffe893;
  text-align: center;
  font-size: 14px;
  letter-spacing: .06em;
  letter-spacing: 2px;
}

/* ============================================================
   山谷友人（祝福信 + 礼物栏 + 动物席位墙）
   ============================================================ */

.blessing-card {
  margin: 0 20px;
  background: var(--paper);
  border: var(--border);
  box-shadow: 0 6px 0 rgba(74, 47, 29, 0.6);
  padding: 24px 16px;
  text-align: center;
}
.blessing-title {
  display: inline-block;
  background: var(--gold);
  border: 3px solid var(--ink);
  padding: 4px 20px;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .12em;
}
.blessing-card p { font-size: 15px; line-height: 2; letter-spacing: .06em; }

/* 宾客墙（出席名单：约 30 种随机头像 + 名字 + 同行角标，紧凑小格） */
.animal-grid {
  margin: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px;
  padding: 8px;
  background: var(--wood);
  border: var(--border);
  box-shadow: 0 6px 0 rgba(74, 47, 29, 0.6);
}
.portrait-cell {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: 5px 2px 4px;
  overflow: hidden;
}
.portrait-cell img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.portrait-icon { display: flex; align-items: center; justify-content: center; min-height: 40px; }
.portrait-icon svg { width: 80%; height: auto; }
.portrait-cell .animal-name {
  font-size: 10px;
  letter-spacing: 0;
  line-height: 1.3;
  text-align: center;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 同行人数：头像右上角小角标 */
.portrait-cell .guest-count {
  position: absolute;
  top: 2px; right: 2px;
  font-size: 9px;
  line-height: 1;
  color: #8a5a2b;
  background: var(--gold);
  border: 2px solid var(--ink);
  padding: 1px 3px;
  white-space: nowrap;
}
.wall-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 12px;
  color: #7a4e2d;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
}
.wall-empty svg { opacity: 0.8; }
body.night .portrait-cell { background: #26365e; border-color: #9db4e8; }
body.night .portrait-cell .animal-name { color: #fff3d6; }
body.night .portrait-cell .guest-count { background: #6b5488; color: #fff3d6; border-color: #9db4e8; }
body.night .wall-empty { color: #cdd8f5; }

/* ============================================================
   浮动工具栏 + 动效优化
   ============================================================ */

.floating-tools {
  position: fixed;
  right: 14px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: grid;
  gap: 10px;
}
#floating-tools[hidden] { display: none; }
.tool-slot {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream);
  border: 4px solid;
  border-color: var(--paper) var(--wood-dark) var(--wood-dark) var(--wood);
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  position: relative;
}
.tool-slot:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.tool-slot svg { display: block; }
.tool-slot.off svg { opacity: 0.45; }
.tool-slot.off::after {
  content: "";
  position: absolute;
  width: 46px; height: 5px;
  background: var(--red);
  border: 1px solid var(--ink);
  transform: rotate(-45deg);
}

/* 离屏区块暂停动画（省电） */
.animations-paused *, .animations-paused *::before, .animations-paused *::after {
  animation-play-state: paused !important;
}

/* 键盘焦点可见 */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 3px;
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ============================================================
   游戏游园会（钓祝福 / 种花园 / 寻宝集心 / 像素烟花 / 占卜运势 / 成就）
   ============================================================ */

.games-intro {
  margin: 0 20px 24px;
  text-align: center;
  font-size: 20px;
  color: var(--wood);
  letter-spacing: 1px;
}
.games-grid { display: grid; gap: 28px; padding: 0 14px; }
.games-grid > * { min-width: 0; }
.game-card {
  background: var(--paper);
  border: var(--border);
  box-shadow: 0 6px 0 rgba(74, 47, 29, 0.5);
  padding: 20px 18px;
  position: relative;
}
.game-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.game-icon {
  width: 58px; height: 58px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: inset 3px 3px 0 rgba(138, 91, 43, 0.3);
}
.game-head-text h3 { font-size: 26px; margin: 0 0 2px; letter-spacing: 2px; }
.game-head-text p { font-size: 16px; color: var(--wood); margin: 0; }

/* ① 钓祝福 */
.pond {
  position: relative;
  height: 170px;
  margin-bottom: 14px;
  border: var(--border);
  overflow: hidden;
  background: var(--sky);
}
.pond img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  image-rendering: pixelated;
}
.pond-scene { position: absolute; inset: 0; pointer-events: none; }
.ripple {
  position: absolute; left: 50%; top: 48%;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border: 3px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  animation: ripple-ring 1.1s ease-out infinite;
}
@keyframes ripple-ring {
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}
.bobber {
  position: absolute; left: 50%; top: 18px;
  animation: bobber-bob 0.9s ease-in-out infinite;
}
@keyframes bobber-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}
.fish-pop {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  animation: fish-jump 0.85s ease-out forwards;
}
@keyframes fish-jump {
  0% { transform: translate(-50%, 26px) scale(0.4); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%, -30px) scale(1); }
}
.fish-log {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 4px;
  max-height: 140px;
  overflow: auto;
}
.fish-log li {
  font-size: 16px;
  color: var(--ink);
  padding: 5px 0;
  border-bottom: 1px dashed var(--wood);
}
.fish-log li::before { content: "🐟 "; }

/* ② 种花园 */
.garden-bed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.garden-plot {
  position: relative;
  min-height: 96px;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--wood);
  border: 3px solid var(--ink);
  box-shadow: inset 3px 3px 0 rgba(138, 91, 43, 0.4);
  cursor: pointer;
}
.garden-plot.bloomed { background: var(--grass); }
.plot-tip {
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  text-align: center;
  font-size: 14px;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
.garden-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.seed-picks { display: flex; gap: 8px; flex: 1; }
.seed-pick {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream);
  border: 3px solid var(--ink);
  cursor: pointer;
  opacity: 0.7;
}
.seed-pick.picked {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--red);
}
.garden-count {
  margin: 8px 0 0;
  text-align: center;
  font-size: 16px;
  color: var(--wood);
}

/* ③ 寻宝集心 */
.treasure-progress {
  text-align: center;
  font-size: 18px;
  color: var(--wood);
  margin: 0 0 10px;
}
.treasure-progress b { font-size: 26px; color: var(--red); }
.treasure-chest {
  text-align: center;
  background: var(--cream);
  border: 3px dashed var(--ink);
  padding: 16px 12px;
}
.treasure-chest p { margin: 0 0 4px; font-size: 22px; }
.treasure-chest span { font-size: 16px; color: var(--wood); }
.treasure-host { position: relative; }
.treasure-heart {
  position: absolute;
  z-index: 20;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  animation: treasure-glim 1.6s ease-in-out infinite;
}
@keyframes treasure-glim {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}
.treasure-heart.got { animation: treasure-got 0.6s ease-out forwards; }
@keyframes treasure-got {
  to { transform: scale(1.8); opacity: 0; }
}

/* ④ 像素烟花 */
.firework-sky {
  position: relative;
  height: 180px;
  margin-bottom: 14px;
  border: var(--border);
  overflow: hidden;
  cursor: crosshair;
  background:
    radial-gradient(2px 2px at 14% 22%, #fff8d0 50%, transparent 51%),
    radial-gradient(2px 2px at 32% 66%, #fff8d0 50%, transparent 51%),
    radial-gradient(2px 2px at 55% 30%, #fff8d0 50%, transparent 51%),
    radial-gradient(2px 2px at 71% 12%, #fff8d0 50%, transparent 51%),
    radial-gradient(2px 2px at 86% 52%, #fff8d0 50%, transparent 51%),
    radial-gradient(2px 2px at 8% 82%, #fff8d0 50%, transparent 51%),
    radial-gradient(2px 2px at 46% 84%, #fff8d0 50%, transparent 51%),
    radial-gradient(2px 2px at 64% 76%, #fff8d0 50%, transparent 51%),
    radial-gradient(2px 2px at 92% 88%, #fff8d0 50%, transparent 51%),
    linear-gradient(#1b2a52, #2c1b40);
}
.spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: spark-fly 1s ease-out forwards;
}
@keyframes spark-fly {
  0% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

/* ⑤ 占卜运势 */
.fortune-input { display: flex; gap: 10px; margin-bottom: 12px; }
.fortune-input input {
  flex: 1;
  min-width: 0;
  border: var(--border);
  background: var(--paper);
  font: inherit;
  font-size: 18px;
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
}
.fortune-input input:focus { box-shadow: 0 0 0 3px var(--gold); }
.fortune-card {
  text-align: center;
  background: var(--cream);
  border: var(--border);
  padding: 16px 14px;
  animation: pop-in 0.35s ease-out;
}
@keyframes pop-in {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.fortune-ic { display: flex; justify-content: center; }
.fortune-level {
  display: inline-block;
  margin: 8px 0 2px;
  padding: 2px 18px;
  color: #fff;
  border: 3px solid var(--ink);
  font-size: 20px;
  letter-spacing: 4px;
}
.fortune-who { font-size: 14px; color: var(--wood); margin: 6px 0 0; }
.fortune-card p { font-size: 18px; margin: 8px 0 0; line-height: 1.7; }

/* 成就面板 */
.ach-mask {
  position: fixed; inset: 0;
  background: rgba(30, 20, 40, 0.55);
  z-index: 90;
}
.ach-panel {
  position: fixed;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(480px, 100%);
  max-height: 80vh;
  overflow: auto;
  background: var(--paper);
  border: var(--border);
  border-bottom: 0;
  padding: 16px;
  z-index: 91;
  box-shadow: 0 -8px 0 rgba(74, 47, 29, 0.4);
}
.ach-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ach-head-icon { display: flex; align-items: center; }
.ach-head h3 { margin: 0; flex: 1; font-size: 26px; letter-spacing: 2px; }
#ach-close {
  width: 38px; height: 38px;
  background: var(--red);
  color: #fff;
  border: 3px solid var(--ink);
  font-size: 18px;
  cursor: pointer;
}
.ach-summary {
  text-align: center;
  font-size: 16px;
  color: var(--wood);
  margin: 0 0 12px;
}
.ach-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ach-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--cream);
  border: 3px solid var(--ink);
  padding: 8px;
}
.ach-item.locked { opacity: 0.55; filter: grayscale(1); }
.ach-icon { flex: none; display: flex; align-items: center; }
.ach-body b { display: block; font-size: 15px; line-height: 1.4; }
.ach-body span { font-size: 12px; color: var(--wood); }

/* 夜间主题：游园会换夜色皮肤 */
body.night .games-intro { color: #cdd8f5; }
body.night .game-card { background: #1d2b4d; border-color: #9db4e8; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.5); }
body.night .game-head-text h3 { color: #fff3d6; }
body.night .game-head-text p,
body.night .plot-tip,
body.night .garden-count,
body.night .treasure-progress,
body.night .fish-log li,
body.night .fortune-who { color: #cdd8f5; }
body.night .fish-log li { border-bottom-color: #4a5b8a; }
body.night .game-icon,
body.night .seed-pick,
body.night .treasure-chest,
body.night .fortune-card,
body.night .ach-panel { background: #26365e; border-color: #9db4e8; color: #fff3d6; }
body.night .ach-item { background: #26365e; border-color: #9db4e8; }
body.night .ach-item b { color: #fff3d6; }
body.night .ach-item span,
body.night .ach-summary { color: #cdd8f5; }
body.night .garden-plot { background: #5a4a3a; border-color: #9db4e8; }
body.night .garden-plot.bloomed { background: #2e4f2a; }
body.night .fortune-input input { background: #26365e; border-color: #9db4e8; color: #fff3d6; }
body.night .treasure-heart svg { filter: brightness(1.4); }

/* ============================================================
   v2 星露谷化：480px 手机壳 · 棋盘区块 · 木框 · 锯齿泥土 · 山谷动效
   ============================================================ */

:root {
  --shell-bg: #10131e;
  --wood2: #78442e;
  --wood2-light: #bd7640;
  --check-a: #eaf6c8;
  --check-b: #cdeaa6;
  --check-a-night: #2a3f6a;
  --check-b-night: #223358;
  --orange-a: #f7c36b;
  --orange-b: #eda855;
}

/* —— 手机壳 —— */
body { background: var(--shell-bg); }
body.night { background: #0a0d18; }
main#invitation {
  width: min(100%, 480px);
  margin-inline: auto;
  background: var(--grass);
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.75);
  overflow: clip;
}
body.night main#invitation { background: #16224a; }

#envelope-screen {
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 480px);
}

@media (min-width: 520px) {
  #music-toggle { right: calc((100vw - 480px) / 2 + 14px); }
  .floating-tools { right: calc((100vw - 480px) / 2 + 14px); }
}

/* —— 主视觉天空：hero 自带星露谷天空渐变（见 #hero 定义） —— */

/* —— 区块背景 —— */

/* 草地棋盘（邀请函 / 游园会 / 山谷友人） */
.sec-checker {
  background:
    radial-gradient(circle, rgba(74, 47, 29, 0.10) 1.5px, transparent 2.5px) 0 0 / 32px 32px,
    linear-gradient(180deg, var(--check-a), var(--check-b));
}
body.night .sec-checker {
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.25) 1.5px, transparent 2.5px) 0 0 / 32px 32px,
    linear-gradient(180deg, var(--check-a-night), var(--check-b-night));
}

/* 橙色棋盘（婚礼节） */
.sec-orange {
  background:
    radial-gradient(circle, rgba(74, 47, 29, 0.12) 1.5px, transparent 2.5px) 0 0 / 32px 32px,
    linear-gradient(180deg, var(--orange-a), var(--orange-b));
}
body.night .sec-orange {
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.25) 1.5px, transparent 2.5px) 0 0 / 32px 32px,
    linear-gradient(180deg, #5d4a2e, #4a3a24);
}

/* 羊皮纸（山谷地图） */
.sec-map {
  background:
    radial-gradient(circle, rgba(74, 47, 29, 0.10) 1.5px, transparent 2.5px) 0 0 / 32px 32px,
    linear-gradient(180deg, #f7e3b8, #eed3a0);
}
body.night .sec-map {
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.25) 1.5px, transparent 2.5px) 0 0 / 32px 32px,
    linear-gradient(180deg, #4a3c60, #3b2f52);
}
body.night .location-card {
  background: #2c315a;
  border-color: #6a8cc0;
  box-shadow: 7px 8px rgba(0, 0, 0, 0.55);
}
body.night .location-overline { color: #f0a3aa; }
body.night .location-venue { color: #ffd9dc; }
body.night .transport-cell { background: #262b52; border-color: #6a8cc0; }
body.night .transport-cell b,
body.night .transport-text { color: #d9e2ff; }
body.night .banquet-more-btn {
  background: #262b52;
  border-color: #6a8cc0;
  color: #d9e2ff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.55);
}
body.night .bm-arrow { color: #f0a3aa; }
body.night .banquet-more-body { border-top-color: rgba(217, 226, 255, 0.3); }

/* 回执与页脚：常驻夜色（与任务卡同族） */
#rsvp {
  background:
    radial-gradient(circle, #6b5488 1px, transparent 2px) 0 0 / 23px 23px,
    linear-gradient(180deg, #45306b, #2a1b40 55%, #382443);
}
#rsvp .sec-title { color: #fff1bd; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); }
#rsvp .heart { filter: brightness(1.2); }
footer {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.14) 1.5px, transparent 2.5px) 0 0 / 32px 32px,
    linear-gradient(180deg, #101a38 0%, #1d2b58 45%, #0d1430 100%);
}

/* —— 木框（相框公式） —— */
.wood-frame {
  border: 6px solid var(--wood2);
  outline: 4px solid var(--wood2-light);
  outline-offset: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 3px rgba(255, 240, 210, 0.35), 8px 9px 0 rgba(74, 47, 29, 0.35);
  position: relative;
}
.wood-frame::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(255, 240, 210, 0.4);
  pointer-events: none;
  z-index: 2;
}
body.night .wood-frame {
  border-color: #33507f;
  outline-color: #4a6aab;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.12), 8px 9px 0 rgba(0, 0, 0, 0.5);
}
body.night .wood-frame::before { border-color: rgba(255, 255, 255, 0.15); }

/* —— 锯齿泥土分隔（每节颜色由 --zz 指定） —— */
.sec-dirt { position: relative; }
.sec-dirt::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -16px;
  height: 16px;
  background:
    linear-gradient(45deg, var(--zz, #8b5a2b) 25%, transparent 0) 0 0 / 16px 16px,
    linear-gradient(135deg, var(--zz, #8b5a2b) 25%, transparent 0) 0 0 / 16px 16px;
  background-repeat: repeat-x;
  z-index: 3;
  pointer-events: none;
}
#notice.sec-dirt::after   { --zz: #8b5a2b; }
#notice-bride.sec-dirt::after { --zz: #b2688a; }
#notice-groom.sec-dirt::after { --zz: #8b5a2b; }
#quest.sec-dirt::after    { --zz: #2a1b40; }
#games.sec-dirt::after    { --zz: #8b5a2b; }
#ceremony.sec-dirt::after { --zz: #b8742e; }
#map.sec-dirt::after      { --zz: #8b5a2b; }
#rsvp.sec-dirt::after     { --zz: #2a1b40; }
#guests.sec-dirt::after   { --zz: #8b5a2b; }

/* —— 任务卡（壳内取消全宽出血） —— */
.quest-section { margin: 0; }
.quest-card { max-width: none; margin: 0 14px; }

/* —— 山谷动效：mascot 跳跃 / 作物弹跳 / 图钉光圈 —— */
.mascot-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 28px 14px 0;
}
.mascot { display: flex; animation: mascot-hop 1.5s ease-in-out infinite; }
.mascot svg { display: block; }
.mascot img { display: block; width: 56px; image-rendering: pixelated; }
@keyframes mascot-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.blessing-card { position: relative; margin-top: 46px; }
.mascot-peek {
  position: absolute;
  left: 0; right: 0; top: -34px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.mascot-peek .mascot { animation: mascot-hop 1.7s ease-in-out infinite; }

.harvest-row {
  margin: 20px;
  display: flex;
  justify-content: center;
  gap: 16px;
}
.harvest-row .crop { display: flex; animation: harvest-bounce 2.2s ease-in-out infinite; }
@keyframes harvest-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.ending-mascot {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.ending-mascot .mascot { animation: mascot-hop 1.8s ease-in-out infinite; }
.ending-mascot .mascot img { width: 88px; }

/* —— 婚礼节：照片轮播（双层 crossfade，--fade-ms 由 JS 设置） —— */
.ceremony-board { margin: 0 14px 24px; background: var(--cream); }
#ceremony-slides {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream);
  cursor: zoom-in;
}
#ceremony-slides img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  border: 3px solid rgba(138, 91, 43, 0.4);
  transition: opacity var(--fade-ms, 800ms) ease;
}
#ceremony-slides img.on { opacity: 1; }
#ceremony-slides img.pix { image-rendering: pixelated; }
.slideshow-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 4px;
}
.slideshow-dots .dot {
  width: 10px; height: 10px;
  background: rgba(74, 47, 29, 0.28);
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: background 0.2s ease;
}
.slideshow-dots .dot.active { background: var(--red); }
#ceremony-board[hidden], #ceremony-slides[hidden] { display: none; }
body.night #ceremony-slides { background: #26365e; }
body.night .slideshow-dots .dot { background: rgba(255, 255, 255, 0.2); border-color: #9db4e8; }
body.night .slideshow-dots .dot.active { background: #ff9aac; }
.dialog-box { margin: 0 14px 24px; }
.gallery-heading { margin-top: 8px; }

/* —— 山谷地图：女方/男方两场地左右滑动 + 上方选项卡 + 左右箭头 —— */
.map-tabs {
  display: flex;
  gap: 10px;
  margin: 0 14px 16px;
}
.map-tab {
  flex: 1;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .07em;
  padding: 10px 6px;
  border: 4px solid #6e2f42;
  background: var(--cream);
  color: #7a4e2d;
  box-shadow: 4px 5px #563247;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.map-tab:active { transform: translate(2px, 3px); box-shadow: 2px 2px #563247; }
.map-tab.active {
  background: #b94d60;
  color: #fff5c9;
  box-shadow: inset 0 0 0 2px #e77b78, 4px 5px #563247;
}
body.night .map-tab { background: #2c315a; border-color: #6a8cc0; color: #cdd9f5; }
body.night .map-tab.active { background: #b94d60; border-color: #6e2f42; color: #fff5c9; }
.map-swipe {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.map-swipe::-webkit-scrollbar { display: none; }
.map-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
}
.map-photo { margin: 0 14px 20px; background: var(--cream); }
.map-photo img {
  display: block;
  width: 100%;
  height: auto;
}
/* 底部控制行：左箭头 + 圆点 + 右箭头 */
.map-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 6px 0 10px;
}
.map-arrow {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  font-family: inherit;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  border: 4px solid #6e2f42;
  background: #b94d60;
  color: #fff5c9;
  box-shadow: inset 0 0 0 2px #e77b78, 3px 4px #563247;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.map-arrow:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: inset 0 0 0 2px #e77b78, 1px 2px #563247;
}
.map-arrow:disabled { opacity: 0.35; cursor: default; }
.map-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.map-dot {
  width: 10px; height: 10px;
  background: rgba(74, 47, 29, 0.28);
  border: 2px solid var(--ink);
  transition: background 0.2s ease;
}
.map-dot.active { background: var(--red); }
body.night .map-dot { background: rgba(255, 255, 255, 0.2); border-color: #9db4e8; }
body.night .map-dot.active { background: #ff9aac; }

/* —— 游园会卡片装饰（暖色光源夜间不压暗） —— */
.game-art {
  margin-bottom: 14px;
  border: var(--border);
  background: var(--cream);
}
.game-art img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
}
.firework-sky .campfire {
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  width: 96px;
  height: auto;
  pointer-events: none;
}
body.night .game-art img,
body.night .pond img,
body.night .firework-sky .campfire { filter: none; }

/* —— 按压手感：按钮向右下压入 —— */
.btn:active { transform: translate(3px, 3px); box-shadow: 0 3px 0 var(--ink); }
.tool-slot:active { transform: translate(3px, 3px); box-shadow: 0 3px 0 var(--ink); }

/* ============================================================
   其他
   ============================================================ */

.hidden { display: none !important; }

/* 系统“减弱动态效果”：全部动画关闭 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 400px) {
  body { font-size: 20px; }
  .panel { padding: 28px 18px; }
  .mascot img { width: 44px; }
  .mascot-row { gap: 8px; }
  .mascot-peek { gap: 6px; }
  .ending-mascot .mascot img { width: 72px; }
}