/* ============================================================
   婚礼岛 · 动物森友会风格 H5 请柬
   ============================================================ */
:root{
  --sky1:#8fd3ff;
  --sky2:#e8f9ff;
  --grass:#8fd16a;
  --grass-dark:#5fae4e;
  --wood:#c98d54;
  --wood-dark:#a06a3a;
  --wood-deep:#7c4f26;
  --cream:#fff6e3;
  --cream2:#ffefd0;
  --ink:#5b4632;
  --ink-soft:#8a6f52;
  --coral:#ff8a65;
  --rose:#ff8b9e;
  --bell:#ffd76e;
  --dialog-bg:#fffdf4;
  --shadow:0 6px 0 rgba(91,70,50,.18);
  --bounce:cubic-bezier(.34,1.56,.64,1);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:"ZCOOL KuaiLe","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--sky1),var(--sky2) 60%,#d9f4d0);
  overflow-x:hidden;
  min-height:100vh;
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ============ 环境粒子 ============ */
#ambient{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.leaf-p,.petal-p,.balloon-p{position:absolute;top:-60px;will-change:transform}
.leaf-p{width:22px;height:22px;background:#6cbf58;border-radius:0 60% 0 60%;opacity:.85;box-shadow:inset -3px -3px 0 rgba(0,0,0,.08)}
.petal-p{width:14px;height:14px;background:var(--rose);border-radius:80% 0 80% 0;opacity:.9}
.balloon-p{width:34px;height:42px;border-radius:50% 50% 50% 50%/55% 55% 45% 45%;position:relative;opacity:.95}
.balloon-p::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:46px;background:rgba(91,70,50,.4)}

/* ============ 音乐按钮 ============ */
.music-btn{
  position:fixed;top:14px;right:14px;z-index:90;
  width:46px;height:46px;border-radius:50%;
  background:var(--cream);border:3px solid var(--wood-dark);
  box-shadow:var(--shadow);font-size:20px;color:var(--wood-deep);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s var(--bounce);
}
.music-btn:active{transform:scale(.88)}
.music-btn.playing .music-icon{animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ 场景切换 ============ */
.scene{display:none;min-height:100vh;position:relative;z-index:10}
.scene.active{display:block;animation:sceneIn .6s var(--bounce)}
@keyframes sceneIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.scene-sky{background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 55%,#cdeec2 78%,var(--grass) 100%)}
.scene-island{background:linear-gradient(180deg,var(--sky1) 0,var(--sky2) 320px,#e6f6dc 420px,var(--grass) 560px,#7ec85e 100%)}

/* ============ 云 ============ */
.cloud{position:absolute;background:#fff;border-radius:50px;opacity:.95;filter:drop-shadow(0 6px 0 rgba(143,211,255,.4))}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.c1{width:120px;height:38px;top:12%;left:-140px;animation:drift 38s linear infinite}
.c1::before{width:56px;height:56px;top:-28px;left:16px}
.c1::after{width:40px;height:40px;top:-18px;right:18px}
.c2{width:90px;height:30px;top:26%;left:-110px;animation:drift 52s linear infinite 8s}
.c2::before{width:44px;height:44px;top:-22px;left:12px}
.c2::after{width:32px;height:32px;top:-14px;right:12px}
.c3{width:150px;height:44px;top:6%;left:-180px;animation:drift 64s linear infinite 20s}
.c3::before{width:66px;height:66px;top:-32px;left:22px}
.c3::after{width:48px;height:48px;top:-22px;right:24px}
@keyframes drift{to{transform:translateX(calc(100vw + 400px))}}

/* ============ 标题画面 ============ */
#scene-title{display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px}
#scene-title.active{display:flex}
.title-wrap{display:flex;flex-direction:column;align-items:center;gap:26px;z-index:2}
.logo-sign{
  display:inline-block;max-width:calc(100vw - 40px);box-sizing:border-box;margin:0 auto;
  background:linear-gradient(180deg,#dda768,#c98d54);
  border:4px solid var(--wood-deep);border-radius:26px;
  padding:34px 26px 26px;text-align:center;position:relative;
  box-shadow:0 10px 0 rgba(124,79,38,.35), inset 0 4px 0 rgba(255,255,255,.35);
  transform:rotate(-2deg);animation:signWobble 4s ease-in-out infinite;
}
@keyframes signWobble{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(1deg)}}
.logo-sign::before,.logo-sign::after{
  content:"";position:absolute;top:-14px;width:14px;height:26px;background:#8a5a33;
  border-radius:6px;border:3px solid var(--wood-deep);
}
.logo-sign::before{left:24px}
.logo-sign::after{right:24px}
.logo-leaf{font-size:38px;margin-bottom:6px;animation:leafFloat 2.6s ease-in-out infinite}
@keyframes leafFloat{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-8px) rotate(8deg)}}
.logo-title{font-size:clamp(21px,6.6vw,44px);line-height:1.3;color:#fffbe9;text-shadow:3px 3px 0 var(--wood-deep);letter-spacing:1px}
/* 动森风弹跳大字「集合啦！」 */
.ac-word{display:inline-block;font-size:clamp(40px,12.5vw,68px);letter-spacing:2px;margin:2px 0 6px}
.ac-ch{
  display:inline-block;color:#fff8e9;font-weight:900;
  -webkit-text-stroke:1.5px #8a5a33;
  text-shadow:2px 3px 0 rgba(124,79,38,.5);
  transform:rotate(var(--r,0deg));
  animation:chBounce 2.2s ease-in-out infinite;
}
.ac-ch:nth-child(1){animation-delay:0s}
.ac-ch:nth-child(2){animation-delay:.18s}
.ac-ch:nth-child(3){animation-delay:.36s}
.ac-ch:nth-child(4){animation-delay:.54s}
.ac-excl{color:#ffd94d;-webkit-text-stroke-color:#8a5a33}
@keyframes chBounce{0%,100%{transform:rotate(var(--r,0deg)) translateY(0)}50%{transform:rotate(var(--r,0deg)) translateY(-6px)}}
.sub-line{display:inline-block;font-size:clamp(19px,5.4vw,34px);letter-spacing:3px;margin-top:2px}
.logo-sub{font-size:12px;letter-spacing:3px;color:#fff3d6;margin-top:10px;opacity:.9}
.logo-names{margin-top:14px;font-size:22px;color:#fff;text-shadow:2px 2px 0 var(--wood-deep);
  background:rgba(124,79,38,.35);border-radius:999px;padding:6px 22px;display:inline-block}
.amp{color:var(--bell)}
.title-hint{font-size:13px;color:#4c7a3d;background:rgba(255,255,255,.55);padding:4px 14px;border-radius:999px}

/* 大按钮 */
.btn-big{
  background:linear-gradient(180deg,#8fd07f 0%,#69b857 55%,#5cab4c 100%);
  border:4px solid #2f6b28;border-radius:999px;
  padding:15px 54px;box-shadow:0 8px 0 #2f6b28, inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(47,107,40,.35);
  transition:transform .15s var(--bounce), box-shadow .15s;
  animation:btnPulse 2s ease-in-out infinite;
  position:relative;
}
@keyframes btnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.btn-big:active{transform:translateY(6px);box-shadow:0 2px 0 #2f6b28, inset 0 3px 0 rgba(255,255,255,.45);animation:none}
.btn-big-text{font-size:24px;color:#fffbe9;font-weight:700;text-shadow:2px 2px 0 #2f6b28;letter-spacing:6px}

/* 小岛装饰 */
.island-decor{position:absolute;bottom:0;left:0;right:0;pointer-events:none}
.grass-ground{height:120px;background:linear-gradient(180deg,var(--grass),var(--grass-dark));border-radius:50% 50% 0 0/40px 40px 0 0;box-shadow:inset 0 10px 0 rgba(255,255,255,.25)}
.palm{position:absolute;bottom:60px;font-size:64px;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.12))}
.p1{left:6%;transform:rotate(-8deg) scaleX(-1)}
.p2{right:6%;transform:rotate(6deg)}

/* ============ 对话场景 ============ */
#scene-dialog{display:none}
#scene-dialog.active{display:flex;flex-direction:column;justify-content:flex-end}
.dialog-stage{
  min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;padding:24px 18px 42px;gap:18px;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 50%,var(--grass) 88%);
}
.npc-wrap{display:flex;flex-direction:column;align-items:center;animation:npcIn .8s var(--bounce)}
@keyframes npcIn{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.npc-nook{animation:nookBounce 2.2s ease-in-out infinite;filter:drop-shadow(0 10px 0 rgba(91,70,50,.14))}
@keyframes nookBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.nook-svg{width:min(54vw,208px);height:auto;display:block}
.npc-name-tag{margin-top:10px;background:var(--cream);border:3px solid var(--wood-dark);border-radius:999px;padding:4px 18px;font-size:14px;color:var(--ink);box-shadow:var(--shadow)}

/* 动森对话框 */
.ac-dialog{
  width:100%;max-width:560px;min-height:120px;position:relative;
  background:var(--dialog-bg);border:4px solid var(--ink);border-radius:18px;
  padding:22px 20px 26px;box-shadow:0 8px 0 rgba(91,70,50,.25);cursor:pointer;
}
.ac-dialog::before{
  content:"";position:absolute;top:-24px;left:50%;transform:translateX(-50%);
  border:12px solid transparent;border-bottom:14px solid var(--ink);
}
.ac-dialog::after{
  content:"";position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  border:9px solid transparent;border-bottom:11px solid var(--dialog-bg);
}
.ac-dialog-name{
  position:absolute;top:-18px;left:18px;background:var(--ink);color:var(--cream);
  border-radius:10px;padding:4px 16px;font-size:14px;letter-spacing:2px;
}
.ac-dialog-text{font-size:18px;line-height:1.75;min-height:64px;word-break:break-word}
.ac-dialog-text .hl{color:#e0685a}
.ac-dialog-next{position:absolute;right:16px;bottom:10px;font-size:14px;color:var(--ink-soft);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.dialog-skip{font-size:13px;color:var(--ink-soft);opacity:.75;padding:6px 12px}
.dialog-skip:active{opacity:1}
.ac-dialog input.visitor-name{
  font-family:inherit;font-size:17px;border:3px solid var(--wood-dark);border-radius:12px;
  padding:9px 14px;background:#fff;color:var(--ink);outline:none;flex:1;min-width:140px;
}
.name-row{display:flex;gap:10px;margin-top:14px;align-items:center;flex-wrap:wrap}
.name-confirm{padding:9px 18px;font-size:15px;flex:none}
.ac-dialog input.visitor-name:focus{border-color:var(--coral)}

/* ============ 小游戏场景 ============ */
#scene-game{display:none;flex-direction:column}
#scene-game.active{display:flex}
.game-hud{padding:18px;display:flex;justify-content:center}
.hud-counter{
  background:var(--cream);border:4px solid var(--wood-dark);border-radius:999px;
  padding:10px 26px;font-size:20px;box-shadow:var(--shadow);color:var(--ink);
}
.hud-heart{color:var(--rose);margin-right:6px}
.game-stage{flex:1;display:flex;justify-content:center;padding:10px 16px 60px;position:relative}
.game-island{
  width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;position:relative;
}
.game-hint{
  background:rgba(255,253,244,.92);border:3px solid var(--ink);border-radius:14px;
  padding:8px 18px;font-size:15px;margin-bottom:8px;box-shadow:var(--shadow);z-index:3;text-align:center;
}
.tree-wrap{position:relative;width:min(66vw,280px);cursor:pointer;transition:transform .1s;z-index:2;margin-bottom:-26px}
.tree-wrap:active{transform:scale(.97)}
.tree-svg{width:100%;height:auto;filter:drop-shadow(0 6px 0 rgba(0,0,0,.08))}
.tree-wrap.shake{animation:treeShake .5s ease-in-out}
@keyframes treeShake{
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(-7deg)}30%{transform:rotate(6deg)}
  45%{transform:rotate(-5deg)}60%{transform:rotate(4deg)}80%{transform:rotate(-2deg)}
}
.tree-fruit{transition:opacity .3s;transform-origin:center;animation:fruitSwing 3s ease-in-out infinite}
.tree-fruit.f2{animation-delay:.6s}.tree-fruit.f3{animation-delay:1.2s}
@keyframes fruitSwing{0%,100%{transform:rotate(0)}50%{transform:rotate(6deg)}}
.tree-fruit.gone{opacity:0}
.trunk-shadow{width:54%;height:16px;background:rgba(0,0,0,.18);border-radius:50%;margin:-6px auto 0;position:relative;z-index:1}
.game-ground{width:112%;height:150px;background:radial-gradient(ellipse at 50% 0,#a8e585,#7ec85e 55%,#69b449);border-radius:50% 50% 34px 34px/44px 44px 18px 18px;box-shadow:inset 0 10px 0 rgba(255,255,255,.35),inset 0 -14px 0 rgba(0,0,0,.08);margin-top:-26px;position:relative;z-index:1}

/* 掉落果实 */
.fall-fruit{
  position:absolute;width:34px;height:34px;z-index:4;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  animation:fruitFall var(--dur,2.4s) ease-in forwards;
}
.fall-fruit svg{width:100%;height:100%;filter:drop-shadow(0 3px 0 rgba(0,0,0,.15))}
@keyframes fruitFall{
  0%{transform:translateY(0) rotate(0);opacity:1}
  85%{opacity:1}
  100%{transform:translateY(var(--fall,340px)) rotate(340deg);opacity:0}
}
.fall-fruit.collected{animation:collectPop .45s var(--bounce) forwards}
@keyframes collectPop{
  to{transform:scale(1.9) translateY(-30px);opacity:0}
}
.float-score{
  position:absolute;z-index:6;font-size:18px;color:#e0685a;pointer-events:none;
  animation:floatUp .9s ease-out forwards;font-weight:bold;
}
@keyframes floatUp{to{transform:translateY(-70px);opacity:0}}

/* ============ 请柬正文 ============ */
#scene-invite{padding-bottom:40px}
.invite-hero{padding:26px 16px 0;display:flex;flex-direction:column;align-items:center;gap:26px}
.hero-card{
  background:var(--cream);border:5px solid var(--wood-deep);border-radius:26px;
  padding:16px;max-width:420px;width:100%;box-shadow:0 12px 0 rgba(124,79,38,.28);
  transform:rotate(-1deg);
}
.hero-photo-wrap{border-radius:16px;overflow:hidden;border:3px solid var(--wood-dark)}
.hero-photo{width:100%;aspect-ratio:3/3.4;object-fit:cover;object-position:top}
.hero-title{text-align:center;padding:16px 6px 6px}
.hero-badge{display:inline-block;background:#ffe3ea;border:2px dashed var(--rose);color:#d94f63;border-radius:999px;padding:4px 16px;font-size:13px;margin-bottom:10px}
.hero-names{font-size:34px;letter-spacing:2px;text-shadow:2px 2px 0 #f3d9b8}
.hero-date{font-size:19px;margin-top:10px;color:#a4552f}
.hero-venue{font-size:14px;margin-top:6px;color:var(--ink-soft)}

.countdown-board{
  width:100%;max-width:420px;background:linear-gradient(180deg,#dda768,#c98d54);
  border:4px solid var(--wood-deep);border-radius:20px;padding:16px 12px 18px;
  box-shadow:0 8px 0 rgba(124,79,38,.3);text-align:center;
}
.countdown-title{color:#fff8e7;text-shadow:1px 2px 0 var(--wood-deep);font-size:16px;margin-bottom:12px;letter-spacing:2px}
.countdown-cells{display:flex;justify-content:center;gap:8px}
.cd-cell{
  flex:1;max-width:84px;background:var(--cream);border:3px solid var(--wood-deep);
  border-radius:14px;padding:8px 2px;display:flex;flex-direction:column;gap:2px;
  box-shadow:inset 0 -4px 0 rgba(160,106,58,.25);
}
.cd-num{font-size:26px;color:#a4552f;font-variant-numeric:tabular-nums}
.cd-unit{font-size:12px;color:var(--ink-soft)}

/* 通用版块 */
.section{padding:34px 16px 8px;max-width:560px;margin:0 auto}
.wood-sign{
  display:table;margin:0 auto 22px;background:linear-gradient(180deg,#dda768,#c98d54);
  border:4px solid var(--wood-deep);border-radius:16px;padding:10px 34px;
  box-shadow:0 6px 0 rgba(124,79,38,.3);transform:rotate(-1.5deg);
  color:#fffbe9;text-shadow:2px 2px 0 var(--wood-deep);font-size:20px;letter-spacing:2px;
}
.section-note{text-align:center;font-size:14px;color:var(--ink-soft);line-height:1.9;margin:4px 12px 18px}

/* 岛民卡 */
.villager-row{display:flex;flex-direction:column;gap:18px}
.villager-card{
  background:var(--cream);border:4px solid var(--wood-dark);border-radius:22px;
  padding:16px;display:flex;gap:16px;align-items:center;box-shadow:var(--shadow);
  transition:transform .25s var(--bounce);
}
.villager-card:active{transform:scale(.98)}
.villager-photo{width:104px;height:104px;flex:none;border-radius:24px;overflow:hidden;border:3px solid var(--wood-dark);transform:rotate(-3deg);box-shadow:0 4px 0 rgba(91,70,50,.2)}
.villager-photo img{width:100%;height:100%;object-fit:cover;object-position:top}
.villager-name{font-size:24px;color:#a4552f}
.villager-title{display:inline-block;font-size:12px;background:#ffe3ea;color:#d94f63;border-radius:999px;padding:2px 12px;margin:4px 0 8px}
.villager-traits{list-style:none;font-size:13px;color:var(--ink-soft);line-height:1.9}
.villager-traits li::before{content:"🍃 "}

/* 照片墙 */
.gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;padding:6px 2px}
.polaroid{
  background:#fff;padding:10px 10px 34px;border-radius:6px;position:relative;
  box-shadow:0 6px 14px rgba(91,70,50,.28);cursor:pointer;
  transition:transform .25s var(--bounce), box-shadow .25s;
  animation:polaroidIn .7s var(--bounce) backwards;
}
@keyframes polaroidIn{from{opacity:0;transform:translateY(40px) rotate(0)}to{opacity:1}}
.polaroid:hover{transform:scale(1.06) rotate(0deg)!important;box-shadow:0 12px 24px rgba(91,70,50,.35);z-index:3}
.polaroid img{width:138px;height:138px;object-fit:cover;border-radius:3px;pointer-events:none}
.polaroid .p-cap{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:12px;color:#7a6a58}
.polaroid .p-tape{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:64px;height:20px;background:rgba(255,214,110,.85);border-radius:2px;
  box-shadow:0 2px 3px rgba(0,0,0,.12);
}

/* 情报卡 */
.info-card{
  background:var(--cream);border:4px solid var(--wood-dark);border-radius:20px;
  padding:18px;box-shadow:var(--shadow);margin-bottom:18px;
}
.info-row{display:flex;gap:12px;padding:9px 2px;border-bottom:2px dashed #e8d5b5;font-size:15px;line-height:1.7}
.info-row:last-child{border-bottom:none}
.info-label{flex:none;width:44px;color:#a4552f}
.info-value{flex:1;color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:22px}
.btn-ac{
  flex:1 1 40%;max-width:200px;text-align:center;white-space:nowrap;
  background:linear-gradient(180deg,#9ad584,#6cbf58);border:3px solid #3f7d31;border-radius:16px;
  padding:11px 10px;font-size:15px;color:#fff;text-shadow:1px 1px 0 rgba(40,80,25,.5);
  box-shadow:0 5px 0 #3f7d31;text-decoration:none;display:inline-block;
  transition:transform .15s var(--bounce), box-shadow .15s;
}
.btn-ac:active{transform:translateY(4px);box-shadow:0 1px 0 #3f7d31}
.qr-row{display:flex;justify-content:center;gap:26px;flex-wrap:wrap}
.qr-item{text-align:center}
.qr-item img{
  width:132px;height:132px;border:6px solid #fff;border-radius:14px;
  box-shadow:0 6px 0 rgba(91,70,50,.2);background:#fff;
}
.qr-cap{margin-top:10px;font-size:13px;color:var(--ink-soft);background:rgba(255,255,255,.6);border-radius:999px;padding:3px 12px;display:inline-block}

/* RSVP */
.rsvp-card{
  background:var(--cream);border:4px solid var(--wood-dark);border-radius:22px;
  padding:22px 18px;box-shadow:var(--shadow);
}
.rsvp-field{margin-bottom:16px}
.rsvp-field>label{display:block;font-size:14px;color:#a4552f;margin-bottom:7px}
.rsvp-field input[type=text],.rsvp-field input[type=tel],.rsvp-field textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  border:3px solid var(--wood);border-radius:12px;padding:10px 14px;background:#fff;outline:none;
  resize:none;
}
.rsvp-field input:focus,.rsvp-field textarea:focus{border-color:var(--coral)}
.rsvp-radio{display:flex;gap:12px}
.radio-pill{flex:1;cursor:pointer}
.radio-pill input{position:absolute;opacity:0}
.radio-pill span{
  display:block;text-align:center;padding:10px 6px;border:3px solid var(--wood);
  border-radius:14px;background:#fff;font-size:15px;transition:all .2s;
}
.radio-pill input:checked+span{border-color:var(--coral);background:#ffe9e0;box-shadow:0 4px 0 rgba(255,138,101,.4)}
.stepper{display:flex;align-items:center;gap:18px;justify-content:center;background:#fff;border:3px solid var(--wood);border-radius:14px;padding:8px}
.stepper button{width:44px;height:44px;border-radius:12px;background:var(--cream2);border:3px solid var(--wood-dark);font-size:22px;color:var(--ink);box-shadow:0 3px 0 var(--wood-dark)}
.stepper button:active{transform:translateY(2px);box-shadow:none}
.stepper span{font-size:24px;min-width:40px;text-align:center;color:#a4552f}
.btn-submit{width:100%;margin-top:6px}
.rsvp-tip{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:12px}

/* 结尾 */
.invite-footer{padding:36px 16px 20px;max-width:560px;margin:0 auto}
.footer-card{
  background:var(--cream);border:4px solid var(--wood-dark);border-radius:24px;
  padding:28px 20px;text-align:center;box-shadow:var(--shadow);
}
.footer-heart{font-size:40px;color:var(--rose);animation:beat 1.2s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}25%{transform:scale(1.2)}45%{transform:scale(1)}}
.footer-card p{margin-top:10px;font-size:15px;color:var(--ink-soft);line-height:1.8}
.footer-big{font-size:19px!important;color:#a4552f!important}
.footer-small{font-size:12px!important;margin-top:16px!important}

/* ============ 灯箱 ============ */
.lightbox{
  position:fixed;inset:0;z-index:120;background:rgba(43,32,20,.82);
  display:none;align-items:center;justify-content:center;padding:26px;
}
.lightbox.open{display:flex;animation:sceneIn .3s var(--bounce)}
.lightbox-inner{position:relative;max-width:520px;width:100%;text-align:center}
.lightbox-inner img{
  width:100%;max-height:72vh;object-fit:contain;background:#fff;
  border:10px solid #fff;border-bottom-width:52px;border-radius:6px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.lightbox-cap{
  position:absolute;bottom:12px;left:0;right:0;color:#7a6a58;font-size:15px;
}
.lightbox-close{
  position:absolute;top:-16px;right:-6px;width:42px;height:42px;border-radius:50%;
  background:var(--coral);border:3px solid #b3542e;color:#fff;font-size:18px;
  box-shadow:0 4px 0 #b3542e;
}

/* ============ Toast ============ */
.toast{
  position:fixed;left:50%;bottom:44px;transform:translateX(-50%) translateY(120px);
  background:var(--ink);color:var(--cream);padding:12px 24px;border-radius:999px;
  font-size:15px;z-index:200;transition:transform .35s var(--bounce);max-width:84vw;text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.toast.show{transform:translateX(-50%) translateY(0)}

/* 彩带 */
.confetti{position:fixed;width:12px;height:12px;z-index:150;top:-20px;pointer-events:none;animation:confettiFall linear forwards}
@keyframes confettiFall{to{transform:translateY(110vh) rotate(720deg)}}

/* 大屏适配 */
@media (min-width:640px){
  .villager-row{flex-direction:row}
  .villager-card{flex:1}
  .polaroid img{width:158px;height:158px}
  .hero-photo{aspect-ratio:3/3}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01s!important;transition-duration:.01s!important}
}

/* ============ 新增：落地果实（可拾取） ============ */
.fall-fruit.landed{animation:landBounce .45s var(--bounce)}
.fall-fruit.landed::after{
  content:"";position:absolute;left:50%;top:96%;transform:translateX(-50%);
  width:110%;height:7px;background:rgba(0,0,0,.16);border-radius:50%;
}
@keyframes landBounce{
  0%{transform:translateY(-26px) scale(1.1)}
  55%{transform:translateY(3px) scale(.94,.9)}
  100%{transform:translateY(0) scale(1)}
}

/* ============ 新增：婚礼岛地图 ============ */
#scene-map{display:none}
#scene-map.active{display:block}
.map-top{padding:22px 14px 2px;max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.map-hero{
  background:var(--cream);border:4px solid var(--wood-deep);border-radius:20px;
  padding:12px;display:flex;gap:14px;align-items:center;box-shadow:0 8px 0 rgba(124,79,38,.28);
}
.map-hero-photo{width:76px;height:96px;flex:none;border-radius:12px;overflow:hidden;border:3px solid var(--wood-dark)}
.map-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:top}
.map-hero-text{flex:1;min-width:0}
.map-hero-names{font-size:23px;margin-top:5px;text-shadow:2px 2px 0 #f3d9b8}
.map-hero-sub{font-size:12px;color:var(--ink-soft);margin-top:4px;line-height:1.75}
.map-hint{
  text-align:center;font-size:14px;color:#3f7d31;background:rgba(255,255,255,.65);
  border-radius:999px;padding:7px;margin:0 26px;
}
.map-canvas{display:flex;justify-content:center;padding:4px 8px 0}
.island-svg{width:min(94vw,430px);height:auto}
.map-spot{cursor:pointer;opacity:0;animation:spotIn .6s var(--bounce) forwards}
@keyframes spotIn{from{opacity:0}to{opacity:1}}
.map-spot[data-loc="codex"]{animation-delay:.1s}
.map-spot[data-loc="photos"]{animation-delay:.22s}
.map-spot[data-loc="info"]{animation-delay:.34s}
.map-spot[data-loc="rsvp"]{animation-delay:.46s}
.map-spot[data-loc="airport"]{animation-delay:.58s}
.map-spot > *:not(:first-child){animation:spotBob 2.6s ease-in-out infinite;transform-box:fill-box}
.map-spot:nth-of-type(odd) > *:not(:first-child){animation-delay:.7s}
@keyframes spotBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.map-spot:hover{filter:brightness(1.06)}
.map-spot:active{filter:brightness(.9)}
.map-spot .spot-label{
  font-family:"ZCOOL KuaiLe","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px;fill:#5b4632;stroke:#fff8e7;stroke-width:4px;paint-order:stroke;letter-spacing:1px;
}
.map-spot.visited .spot-badge{display:none}
.map-footer{text-align:center;font-size:12px;color:var(--ink-soft);padding:12px 0 24px;opacity:.85}

/* ============ 新增：地点浮层 ============ */
.loc-overlay{
  position:fixed;inset:0;z-index:70;display:none;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,var(--sky1) 0,var(--sky2) 240px,#e6f6dc 340px,var(--grass) 500px,#7ec85e 100%);
}
.loc-overlay.open{display:block;animation:sceneIn .35s var(--bounce)}
.loc-head{
  position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:rgba(255,248,231,.94);border-bottom:3px solid var(--wood-dark);
  backdrop-filter:blur(4px);
}
.loc-back{
  position:relative;z-index:7;
  flex:none;width:54px;height:54px;border-radius:50%;padding:0;
  background:linear-gradient(180deg,#dda768,#c98d54);border:4px solid var(--wood-deep);
  box-shadow:0 5px 0 rgba(124,79,38,.5), inset 0 3px 0 rgba(255,255,255,.35);
  font-size:26px;line-height:1;color:#fffbe9;text-shadow:2px 2px 0 var(--wood-deep);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s var(--bounce), box-shadow .15s;
}
.loc-back:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(124,79,38,.5)}
.loc-title{
  flex:1;text-align:center;
  background:linear-gradient(180deg,#dda768,#c98d54);border:3px solid var(--wood-deep);
  border-radius:14px;padding:7px 10px;font-size:16px;color:#fffbe9;
  text-shadow:2px 2px 0 var(--wood-deep);letter-spacing:2px;
  box-shadow:0 4px 0 rgba(124,79,38,.35);transform:rotate(-.6deg);
  max-width:230px;margin:0 auto;
}
.loc-head .loc-back{margin-right:0}
.loc-head .loc-title{margin-left:0}
.loc-body{max-width:560px;margin:0 auto;padding:20px 16px 60px}

/* ============ 新增：图鉴翻书 ============ */
.book-scene{display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:6px}
.book{position:relative;width:min(86vw,330px);height:min(116vw,446px);perspective:1300px}
.book-page{
  position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.45,.05,.35,1);
}
.book-page .face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:14px;overflow:hidden;
}
.book-page .front{background:var(--cream);border:4px solid var(--wood-dark);box-shadow:var(--shadow)}
.book-page .back{
  transform:rotateY(180deg);border:4px solid var(--wood-dark);
  background:repeating-linear-gradient(45deg,#f6ecd2,#f6ecd2 14px,#efe0bd 14px,#efe0bd 28px);
}
.book-page.flipped{transform:rotateY(-180deg)}
.book-page .cover-face{
  background:linear-gradient(160deg,#dda768,#c98d54);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fffbe9;
  border:4px solid var(--wood-deep);
}
.cover-leaf{font-size:44px;animation:leafFloat 2.6s ease-in-out infinite}
.cover-title{font-size:32px;text-shadow:3px 3px 0 var(--wood-deep);letter-spacing:8px}
.cover-sub{font-size:11px;letter-spacing:3px;opacity:.85}
.cover-hint{margin-top:22px;font-size:13px;opacity:.85;animation:blink 1.4s steps(2) infinite}
.paper-face{display:flex;align-items:center;justify-content:center}
.page-inner{padding:20px 18px;display:flex;flex-direction:column;align-items:center;height:100%;overflow:hidden}
.page-inner.center{justify-content:center;gap:16px}
.villager-photo.big{width:132px;height:132px;border-radius:28px;overflow:hidden;border:4px solid var(--wood-dark);box-shadow:0 5px 0 rgba(91,70,50,.25);margin-bottom:12px;transform:rotate(-2deg)}
.villager-photo.big img{width:100%;height:100%;object-fit:cover;object-position:top}
.ending-text{font-size:15px;line-height:2.1;color:var(--ink-soft);text-align:center}
.book-nav{display:flex;align-items:center;gap:16px}
.book-page-no{font-size:14px;color:var(--ink-soft);background:rgba(255,255,255,.75);padding:4px 14px;border-radius:999px}

/* ============ 修正：机场二维码居中 ============ */
#loc-airport .qr-item{display:flex;flex-direction:column;align-items:center}

/* ============ 修正：游戏岛相对定位（果实落在草地上） ============ */
.game-island{position:relative}