/* ============================================================
   style.css — 所有样式
   ============================================================ */

/* --- Reset & Variables --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --pink:#ff6b9d;--pink-l:#ffb3d9;--pink-d:#c44dff;--gold:#ffd700;
  --bg:#0a0015;--text:#ffe8f0;--card:rgba(255,248,250,0.06);
  --font-hand:'STXingkai','华文行楷','Xingkai SC','KaiTi','楷体','Noto Serif SC',serif;
  --font-body:'PingFang SC','Microsoft YaHei','Helvetica Neue',sans-serif;
}
html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font-body);background:var(--bg);color:#fff;-webkit-tap-highlight-color:transparent}

/* --- Canvas Layers --- */
#bgC,#fwC,#ptC,#laC{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
#fwC{pointer-events:auto;z-index:1}
#ptC{z-index:2}#laC{z-index:3}

/* --- Pages --- */
.pages{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10}
.page{position:absolute;top:0;left:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;padding:16px 16px 70px;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s ease;-webkit-overflow-scrolling:touch}
.page.on{opacity:1;visibility:visible}
.page::-webkit-scrollbar{width:3px}
.page::-webkit-scrollbar-thumb{background:rgba(255,150,200,0.15);border-radius:2px}
.sec-t{text-align:center;font-size:clamp(1.15rem,3.5vw,1.8rem);margin:8px 0;background:linear-gradient(135deg,var(--pink),var(--pink-d));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sec-s{text-align:center;color:rgba(255,180,200,0.45);font-size:.78rem;margin-bottom:10px;letter-spacing:2px}

/* --- Music Button (播放/暂停) --- */
.mubtn{position:fixed;top:max(10px,env(safe-area-inset-top));right:10px;z-index:200;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.08);backdrop-filter:blur(10px);border:1px solid rgba(255,150,200,0.25);color:#ff6b9d;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}
.mubtn:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,100,150,0.4)}
.mubtn.pl{animation:spinN 4s linear infinite;border-color:rgba(255,100,150,0.5)}
@keyframes spinN{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* --- Shared Keyframes --- */
@keyframes fInU{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes gShift{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hBeat{0%,100%{transform:translate(-50%,-50%) scale(1)}14%{transform:translate(-50%,-50%) scale(1.3)}28%{transform:translate(-50%,-50%) scale(1)}42%{transform:translate(-50%,-50%) scale(1.15)}56%{transform:translate(-50%,-50%) scale(1)}}
@keyframes inkReveal{0%{clip-path:inset(0 100% 0 0);opacity:.3}30%{opacity:.7}100%{clip-path:inset(0 0 0 0);opacity:1}}

/* ============================================================
   PAGE 1 — Home
   ============================================================ */
#p1{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding-top:max(40px,8vh)}
.m-tit{font-size:clamp(1.8rem,6.5vw,4.2rem);font-weight:800;background:linear-gradient(135deg,var(--pink),var(--pink-d),var(--pink),var(--pink-l));background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gShift 4s ease infinite;letter-spacing:2px;line-height:1.2}
.m-sub{font-size:clamp(.85rem,2.2vw,1.2rem);color:var(--pink-l);margin-top:6px;letter-spacing:4px;animation:fInU 1.5s ease .5s both}

/* Countdown */
.cd-wrap{margin-top:14px;display:flex;gap:5px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:clamp(.9rem,2.8vw,1.6rem)}
.cd-wrap span{background:rgba(255,255,255,0.05);backdrop-filter:blur(8px);padding:4px 9px;border-radius:7px;border:1px solid rgba(255,150,200,0.1);min-width:32px}
.cd-wrap .lb{font-size:.42em;display:block;color:var(--pink-l);border:none;background:none;padding:0;backdrop-filter:none;min-width:auto}
.cd-wrap .nu{font-size:1.1em;font-weight:700}

/* Ink Letter */
.ink-box{position:relative;margin-top:18px;width:92%;max-width:500px;padding:26px 20px 22px;border-radius:14px;background:linear-gradient(160deg,rgba(40,15,25,0.5),rgba(20,8,12,0.3));border:1px solid rgba(255,180,200,0.1);backdrop-filter:blur(6px);min-height:100px;overflow:hidden}
.ink-box::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");opacity:.35;pointer-events:none}
.ink-txt{display:block;font-family:var(--font-hand);font-size:clamp(.9rem,2vw,1.15rem);line-height:2;color:#ffdce8;text-align:center;letter-spacing:1.5px;position:relative;z-index:1}
.ink-txt.show{animation:inkReveal 2.8s ease-in-out forwards}
.ink-sig{display:block;margin-top:12px;text-align:right;font-family:var(--font-hand);font-size:.85rem;color:rgba(255,180,210,0.4);opacity:0;transition:opacity 1.5s ease 1.2s;letter-spacing:3px}
.ink-sig.show{opacity:1}
.ink-dots{position:absolute;inset:0;pointer-events:none;z-index:0}
.ink-d{position:absolute;font-size:var(--ds,12px);color:rgba(255,100,150,0.07);animation:inkB 5s ease-out forwards}
@keyframes inkB{0%{transform:scale(1);opacity:.5}100%{transform:scale(3.5);opacity:0}}

/* --- 3D Cake Container (蛋糕靠左 + 爱心按钮靠右) --- */
#cakeLayoutContainer {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 35px;
  margin: 0 auto 20px;
  width: 95%;
  max-width: 95vw;
  padding-left: 5%;
}
#cake3dContainer {
  width: 480px;
  height: 520px;
  position: relative;
  flex-shrink: 0;
}
#cake3dContainer canvas {
  border-radius: 10px;
}

/* --- Wish Button Container --- */
#wishBtnContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-shrink: 0;
  margin-bottom: 30px;
}

/* --- Wish Button (Large Heart) --- */
#wishBtn {
  width: 180px;
  height: 180px;
  background: linear-gradient(135deg, #ff6b9d, #c44dff);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: white;
  transition: all 0.3s ease;
  box-shadow: 0 8px 30px rgba(255,80,140,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
#wishBtn:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 40px rgba(255,80,140,0.7);
}
#wishBtn span {
  font-size: 84px;
  animation: heartBeat 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(255,255,255,0.4));
}
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.15); }
  28% { transform: scale(1); }
  42% { transform: scale(1.12); }
  56% { transform: scale(1); }
}

/* --- Wish Button Label --- */
#wishBtnLabel {
  color: rgba(255,180,200,0.7);
  font-size: 1.1rem;
  letter-spacing: 3px;
  font-family: 'STXingkai', serif;
  text-shadow: 0 2px 8px rgba(255,100,150,0.3);
}

/* --- Floating Ink Characters --- */
.floating-char {
  font-family: 'STXingkai', '华文行楷', 'Xingkai SC', 'KaiTi', serif;
  color: #ffdce8;
  text-shadow:
    0 0 10px rgba(255,150,200,0.3),
    0 2px 4px rgba(0,0,0,0.2),
    0 4px 8px rgba(255,100,150,0.15);
  letter-spacing: 1px;
}

/* Birthday Message */
.bd-msg{text-align:center;margin-top:75px;animation:fInU 1.5s ease .8s both}
.bd-icons{font-size:clamp(1.1rem,3vw,1.6rem);letter-spacing:6px;margin-bottom:8px;animation:flt 3s ease-in-out infinite}
.bd-txt{font-family:var(--font-hand);font-size:clamp(1.1rem,3.2vw,1.7rem);color:var(--pink-l);text-shadow:0 0 20px rgba(255,150,200,0.4),0 2px 4px rgba(0,0,0,0.2);letter-spacing:3px;background:linear-gradient(135deg,var(--pink-l),var(--gold),var(--pink-l));background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gShift 3s ease infinite}

/* Cake */
.ck-wrap{margin-top:16px;opacity:1;transition:all .8s ease}
.ck-wrap.hide{opacity:0;transform:scale(.5) translateY(20px);pointer-events:none}
.ck-3d{width:160px;height:135px;position:relative;margin:0 auto}
.ck-l{border-radius:7px;margin:0 auto;box-shadow:0 3px 16px rgba(0,0,0,0.15);position:relative}
.ck-l.b{width:160px;height:48px;background:linear-gradient(135deg,#ff8eb5,#ff5a8f);border-radius:7px 7px 4px 4px}
.ck-l.b::after{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:rgba(255,255,255,0.14);border-radius:7px 7px 0 0}
.ck-l.m{width:132px;height:42px;background:linear-gradient(135deg,#ffb0cc,#ff7aa8);margin:-3px auto 0;border-radius:5px 5px 3px 3px}
.ck-l.m::after{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:rgba(255,255,255,0.14);border-radius:5px 5px 0 0}
.ck-l.t{width:104px;height:38px;background:linear-gradient(135deg,#ffccdd,#ffa0c0);margin:-3px auto 0;border-radius:4px 4px 3px 3px}
.ck-l.t::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:rgba(255,255,255,0.18);border-radius:4px 4px 0 0}
.ck-cr{position:absolute;top:-5px;left:-2px;right:-2px;height:10px;background:radial-gradient(ellipse at 15% 50%,#fff5f8 35%,transparent 35%),radial-gradient(ellipse at 40% 50%,#fff5f8 35%,transparent 35%),radial-gradient(ellipse at 65% 50%,#fff5f8 35%,transparent 35%),radial-gradient(ellipse at 90% 50%,#fff5f8 35%,transparent 35%);background-size:28% 100%;background-repeat:repeat-x}
.cn-row{position:absolute;top:-21px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
.cn{width:9px;height:26px;background:linear-gradient(180deg,#ffeb3b,#ff9800);border-radius:4px 4px 1px 1px;position:relative;cursor:pointer;transition:all .35s ease}
.cn::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:4px;height:7px;background:radial-gradient(circle,#fff7a0 40%,#ff9800 100%);border-radius:50%;animation:cnFlk .22s ease-in-out infinite alternate}
.cn.lit::before{box-shadow:0 0 6px #ff9800,0 0 12px #ff6600}
.cn.out::before{background:#888;box-shadow:none;animation:none}
.cn.out{background:linear-gradient(180deg,#ccc,#999);transform:scaleY(.8)}
@keyframes cnFlk{0%{transform:translateX(-50%) scale(1);opacity:1}100%{transform:translateX(-50%) scale(1.12,.88);opacity:.7}}
.wsh{font-size:clamp(.9rem,2vw,1.1rem);color:#ffccdd;min-height:26px;opacity:0;transition:opacity .7s ease;font-family:var(--font-hand);margin-top:8px}
.wsh.show{opacity:1}
.wsh-h{color:rgba(255,180,200,0.35);font-size:.72rem;margin-top:3px}
.arr-dn{margin-top:4px;font-size:1.2rem;color:rgba(255,180,200,0.25);animation:flt 2s ease-in-out infinite}
.ci-row{margin-top:6px;display:flex;gap:10px;font-size:1.2rem;flex-wrap:wrap;justify-content:center}
.ci-row span{display:inline-block;animation:flt 3s ease-in-out infinite}
.ci-row span:nth-child(2){animation-delay:.4s}.ci-row span:nth-child(3){animation-delay:.8s}.ci-row span:nth-child(4){animation-delay:1.2s}.ci-row span:nth-child(5){animation-delay:1.6s}

/* ============================================================
   PAGE 4 — 3D Carousel (Memories, was PAGE 2)
   ============================================================ */
#p4{display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:2000px}
#p4 .sec-t{position:relative;top:-36px;margin-bottom:15px}
.ring-wrap{width:100%;height:58vh;min-height:380px;position:relative;display:flex;align-items:center;justify-content:center}
/* 场景 — 俯视视角，完全照搬 test.html .scene */
.ring-scene{position:relative;transform-style:preserve-3d;transform:rotateX(-32deg);transition:transform .1s ease;cursor:grab}
.ring-scene:active,.ring-scene.dragging{cursor:grabbing}
/* 旋转专辑 — 完全照搬 test.html .album */
.ring-album{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateY(0deg)}
/* 卡片 — 完全照搬 test.html .photo */
.rcard{position:absolute;width:150px;height:200px;left:50%;top:50%;margin-left:-75px;margin-top:-100px;border-radius:18px;background:#1a1a2e;border:4px solid rgba(255,182,193,0.25);box-shadow:0 20px 40px rgba(0,0,0,0.7);transform-style:preserve-3d;backface-visibility:visible;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;cursor:pointer;transition:box-shadow .3s ease,transform .3s ease,filter .3s ease,border-color .3s ease,width .3s ease,height .3s ease,margin .3s ease}
.rcard img{width:100%;height:100%;object-fit:cover;display:block;border-radius:14px;transition:transform .3s ease;position:absolute;top:0;left:0}
/* 悬停放大+光晕 — 完全照搬 test.html .photo:hover */
.rcard:hover{width:190px;height:250px;margin-left:-95px;margin-top:-125px;box-shadow:0 0 45px 22px rgba(255,105,180,0.9),0 0 90px 45px rgba(255,20,147,0.5),0 25px 50px rgba(0,0,0,0.9);border-color:rgba(255,105,180,0.9);z-index:50;filter:brightness(1.12)}
.rcard:hover img{transform:scale(1.02)}
/* 卡片文字 — 完全照搬 test.html .card-label */
.rcard .rl{position:relative;z-index:5;background:rgba(10,10,30,0.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:6px 14px;border-radius:30px;font-size:14px;font-weight:500;letter-spacing:.5px;color:#fff0f5;text-shadow:0 2px 8px rgba(0,0,0,0.8);border:1px solid rgba(255,182,193,0.25);box-shadow:0 4px 15px rgba(0,0,0,0.4);margin-bottom:14px;pointer-events:none;transition:all .3s ease;white-space:nowrap;font-family:'Segoe UI','PingFang SC',system-ui,sans-serif}
.rcard:hover .rl{background:rgba(255,105,180,0.35);border-color:rgba(255,105,180,0.7);box-shadow:0 0 30px rgba(255,105,180,0.5);color:#fff;transform:scale(1.05)}
.rcard.fading{opacity:.15}
/* 中心爱心 */
.phrt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:44px;animation:hBeat 1s ease-in-out infinite;filter:drop-shadow(0 0 28px rgba(255,50,100,0.5));pointer-events:none;z-index:5}
/* 背景光晕 — 照搬 test.html .glow-bg */
.ring-wrap::before{content:'';position:absolute;top:10%;left:10%;width:80%;height:80%;background:radial-gradient(circle at center,rgba(255,105,180,0.06),transparent 70%);pointer-events:none;z-index:0;border-radius:50%;filter:blur(80px);animation:pulseGlow 8s infinite alternate}
@keyframes pulseGlow{0%{opacity:.2;transform:scale(1) translate(0,0)}100%{opacity:.6;transform:scale(1.3) translate(40px,-30px)}}
@media(max-width:600px){
  .ring-scene{transform:rotateX(-28deg)}
  .rcard{width:110px;height:150px;margin-left:-55px;margin-top:-75px;border-width:3px}
  .rcard:hover{width:140px;height:185px;margin-left:-70px;margin-top:-92px}
  .rcard .rl{font-size:11px;padding:4px 12px;margin-bottom:10px}
}

/* ============================================================
   PAGE 3 — Love Letter Book
   ============================================================ */
#p3{display:flex;flex-direction:column;align-items:center;justify-content:center}
.bk-wrap{position:relative;padding:5px;border-radius:3px 16px 16px 3px;background:linear-gradient(145deg,rgba(160,100,80,0.35),rgba(100,55,35,0.18));box-shadow:0 8px 40px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.04);width:92%;max-width:380px;transform:translateX(50%);overflow:visible}
/* Static left panel — provides a symmetric "left page" when cover is open */
.bk-wrap::before{content:'';position:absolute;right:calc(100% - 2px);top:5px;width:calc(100% - 10px);height:calc(100% - 10px);border-radius:10px 3px 3px 10px;background:linear-gradient(175deg,rgba(252,240,232,0.18),rgba(245,228,216,0.08));box-shadow:inset 0 0 30px rgba(180,120,80,0.02),0 2px 8px rgba(0,0,0,0.04);border:1px solid rgba(180,120,100,0.04);z-index:0;pointer-events:none}
.bk-cont{width:100%;aspect-ratio:3/4;max-height:55vh;position:relative;perspective:1300px;margin:0 auto}
.bk{width:100%;height:100%;position:relative;transform-style:preserve-3d}
.pg-flip{position:absolute;width:100%;height:100%;transform-style:preserve-3d;transform-origin:left center;transition:transform .65s cubic-bezier(.4,0,.2,1);cursor:pointer;transform:translateZ(var(--tz,0)) rotateY(0deg)}
.pg-flip.flipped{transform:translateZ(var(--tz,0)) rotateY(-180deg);pointer-events:none}
.pg-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:3px 10px 10px 3px;padding:24px 20px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(175deg,#fcf0e8 0%,#f5e4d8 40%,#efe0d0 100%);color:#4a2a1e;box-shadow:inset 0 0 25px rgba(180,120,80,0.05),0 2px 10px rgba(0,0,0,0.08);overflow:visible}
.pg-face::before{content:'';position:absolute;left:10px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,transparent,rgba(180,120,100,0.06),transparent)}
.pg-face.back{transform:rotateY(180deg);background:linear-gradient(175deg,#efe0d0 0%,#f5e4d8 40%,#fcf0e8 100%);backface-visibility:hidden}
.pg-face .hi{font-size:20px;margin-bottom:10px;text-align:center}
.letter-ct{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;overflow:hidden}
.letter-greet{font-family:var(--font-hand);font-size:clamp(.82rem,1.8vw,.98rem);line-height:1.9;color:#4a2a1e;letter-spacing:.8px;text-align:left;margin:0 0 6px;text-indent:0}
.letter-body{font-family:var(--font-hand);font-size:clamp(.82rem,1.8vw,.98rem);line-height:1.9;color:#4a2a1e;letter-spacing:.8px;text-align:left;text-indent:2em;margin:0}
.letter-body.ink-reveal{animation:inkReveal 2.5s ease-in-out forwards}
/* Cover page */
.cover-ct{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;gap:10px}
.cover-icon{font-size:48px;animation:flt 3s ease-in-out infinite}
.cover-title{font-family:var(--font-hand);font-size:clamp(1.1rem,2.5vw,1.5rem);color:#4a2a1e;letter-spacing:3px;text-align:center}
.cover-sub{font-family:var(--font-hand);font-size:clamp(.75rem,1.6vw,.9rem);color:rgba(100,60,40,0.45);letter-spacing:2px;text-align:center}
/* Back-face doodle illustration */
.bk-illus{flex:1;display:flex;align-items:center;justify-content:center;width:75%;margin:0 auto;backface-visibility:hidden;transform:translateZ(0)}
.bk-illus svg{width:100%;height:auto;max-height:65%;display:block;backface-visibility:hidden}
.pg-face .pn{position:absolute;bottom:12px;right:15px;font-size:11px;color:rgba(100,60,40,0.3);font-family:Georgia,serif;font-style:italic}
.bk-nav{display:flex;gap:14px;margin-top:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.bk-nav button{background:rgba(255,180,200,0.08);border:1px solid rgba(255,180,200,0.15);color:var(--pink-l);padding:6px 16px;border-radius:16px;cursor:pointer;font-size:13px;transition:all .3s}
.bk-nav button:hover{background:rgba(255,180,200,0.2)}
.bk-nav .pi{color:rgba(255,180,200,0.55);font-size:12px;font-family:Georgia,serif;min-width:50px;text-align:center}

/* ============================================================
   PAGE 2 — Gift Hunt
   ============================================================ */
#p2{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:10px}
.gift-content{width:92%;max-width:600px;display:flex;flex-direction:column;align-items:center;gap:12px;transition:opacity .35s ease,transform .35s ease}
.gift-content.fade-out{opacity:0;transform:translateY(-10px)}
.gift-content.fade-in{animation:giftFadeIn .4s ease forwards}
@keyframes giftFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Clue text box (reuse ink-box pattern) */
.gift-clue-box{position:relative;width:100%;padding:22px 18px 18px;border-radius:14px;background:linear-gradient(160deg,rgba(40,15,25,0.5),rgba(20,8,12,0.3));border:1px solid rgba(255,180,200,0.1);backdrop-filter:blur(6px);min-height:70px;overflow:hidden}
.gift-clue-box::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");opacity:.35;pointer-events:none}
.gift-clue-txt{display:block;font-family:var(--font-hand);font-size:clamp(.85rem,1.8vw,1.05rem);line-height:2;color:#ffdce8;text-align:center;letter-spacing:1.2px;position:relative;z-index:1;min-height:40px}
.gift-clue-dots{position:absolute;inset:0;pointer-events:none;z-index:0}

/* Map + Photo + Location */
.gift-main{display:flex;gap:16px;width:100%;align-items:flex-start}
.gift-map{flex-shrink:0;width:300px;height:320px;border-radius:14px;background:rgba(20,10,18,0.5);border:1px solid rgba(255,180,200,0.12);overflow:hidden;position:relative}
.gift-map svg{width:100%;height:100%;display:block}
.gift-info{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.gift-photo-wrap{width:100%;max-width:200px;aspect-ratio:1;border-radius:14px;overflow:hidden;border:2px solid rgba(255,180,210,0.2);background:rgba(255,200,220,0.05);display:flex;align-items:center;justify-content:center;position:relative}
.gift-photo{width:100%;height:100%;object-fit:contain;display:block;position:absolute;inset:0;z-index:1}
.gift-photo.revealed{animation:photoReveal .6s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes photoReveal{0%{transform:scale(0);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
.gift-photo-mystery{font-size:3.5rem;opacity:.35;z-index:0;animation:flt 2.5s ease-in-out infinite;transition:all .3s ease}
.gift-photo-placeholder{font-size:4rem;opacity:.3}
/* Checkmark overlay */
.gift-photo-check{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;font-size:3rem;opacity:0;pointer-events:none;filter:drop-shadow(0 0 10px rgba(0,255,100,0.6))}
.gift-photo-check.show{animation:checkPop .7s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes checkPop{0%{transform:scale(0) rotate(-30deg);opacity:0}50%{transform:scale(1.3) rotate(5deg);opacity:1}100%{transform:scale(1) rotate(0deg);opacity:1}}
.gift-loc{font-size:.85rem;color:rgba(255,200,220,0.6);text-align:center;line-height:1.6;margin:0;letter-spacing:.5px}

/* Map dot pulse animation */
.gift-map-dot{transition:all .3s ease}
.gift-map-dot.active{animation:mapDotPulse 1.5s ease-in-out infinite}
@keyframes mapDotPulse{0%,100%{r:8;opacity:.9}50%{r:12;opacity:.5}}

/* Input row */
.gift-input-row{display:flex;gap:10px;width:100%;max-width:420px;align-items:center}
.gift-input{flex:1;padding:12px 16px;border-radius:22px;border:1px solid rgba(255,150,200,0.2);background:rgba(255,255,255,0.06);color:#fff;font-size:.9rem;outline:none;transition:all .3s;font-family:var(--font-body);letter-spacing:1px}
.gift-input:focus{border-color:var(--pink);box-shadow:0 0 16px rgba(255,80,140,0.15)}
.gift-input::placeholder{color:rgba(255,255,255,0.25)}
.gift-input.wrong{animation:inputShake .5s ease;border-color:rgba(255,80,80,0.5)}
@keyframes inputShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.gift-btn{padding:12px 24px;border-radius:22px;border:none;background:linear-gradient(135deg,var(--pink),var(--pink-d));color:#fff;font-size:.9rem;cursor:pointer;letter-spacing:2px;transition:all .3s;white-space:nowrap;font-family:var(--font-body)}
.gift-btn:hover{transform:scale(1.04);box-shadow:0 4px 20px rgba(255,80,140,0.3)}
.gift-btn:active{transform:scale(.97)}

/* Gift nav (上一个/下一个) */
.gift-nav-row{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:14px}
.gift-nav-btn{padding:10px 22px;border-radius:22px;border:none;background:linear-gradient(135deg,var(--pink),var(--pink-d));color:#fff;font-size:.85rem;cursor:pointer;letter-spacing:2px;transition:all .3s;white-space:nowrap;font-family:var(--font-body)}
.gift-nav-btn:hover{transform:scale(1.04);box-shadow:0 4px 20px rgba(255,80,140,0.3)}
.gift-nav-btn:active{transform:scale(.97)}
.gift-nav-btn:disabled{opacity:.3;cursor:default;pointer-events:none;transform:none;box-shadow:none}
.gift-nav-btn:disabled:hover{transform:none;box-shadow:none}
.gift-nav-info{color:rgba(255,200,220,0.6);font-size:.8rem;letter-spacing:1px;min-width:50px;text-align:center}

/* Progress dots */
.gift-progress{display:flex;gap:12px;margin-top:4px;align-items:center}
.gp-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.12);transition:all .35s ease}
.gp-dot.on{background:var(--pink);box-shadow:0 0 10px rgba(255,107,157,0.5)}
.gp-dot.done{background:rgba(255,107,157,0.5);box-shadow:0 0 6px rgba(255,107,157,0.25)}

/* Complete screen */
.gift-complete{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;animation:fInU .8s ease both}
.gift-comp-icon{font-size:5rem;animation:flt 1.5s ease-in-out infinite}
.gift-comp-title{font-family:var(--font-hand);font-size:clamp(1.3rem,3vw,1.8rem);background:linear-gradient(135deg,var(--pink),var(--pink-d));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gift-comp-sub{font-size:.9rem;color:rgba(255,200,220,0.5);text-align:center;line-height:1.8;letter-spacing:1px}
.gift-wish-btn{padding:14px 40px;border-radius:30px;border:none;background:linear-gradient(135deg,var(--pink),var(--pink-d));color:#fff;font-size:1.1rem;cursor:pointer;letter-spacing:3px;font-family:var(--font-hand);transition:all .3s ease;box-shadow:0 6px 25px rgba(255,80,140,0.4);margin-top:12px;animation:fInU .8s ease both}
.gift-wish-btn:hover{transform:scale(1.06);box-shadow:0 10px 35px rgba(255,80,140,0.6)}
.gift-wish-btn:active{transform:scale(.96)}

/* Responsive */
@media(max-width:600px){
  .gift-main{flex-direction:column;align-items:center}
  .gift-map{width:260px;height:280px}
  .gift-input-row{max-width:100%}
}

/* ============================================================
   PAGE 5 — Wish Pool (许愿池)
   ============================================================ */
#p5{display:flex;flex-direction:column;align-items:center;padding-top:8px}

/* --- Pool Visual --- */
.wpl-visual{position:relative;width:min(260px,65vw);height:min(260px,65vw);margin:14px auto 10px;display:flex;align-items:center;justify-content:center}
.wpl-pool{width:92%;height:92%;border-radius:50%;background:radial-gradient(ellipse at 40% 30%,rgba(100,180,220,0.35),rgba(60,120,180,0.18) 40%,rgba(30,60,100,0.25) 70%,rgba(10,20,40,0.35) 100%);border:2px solid rgba(180,210,240,0.18);box-shadow:0 0 40px rgba(120,180,220,0.12),inset 0 0 30px rgba(100,160,200,0.1);position:relative;overflow:hidden}

/* Sheen / surface reflection */
.wpl-sheen{position:absolute;top:15%;left:18%;width:35%;height:14%;background:radial-gradient(ellipse,rgba(255,255,255,0.18),transparent 70%);border-radius:50%;animation:wplShn 4s ease-in-out infinite;pointer-events:none}
@keyframes wplShn{
  0%{transform:translate(0,0) scale(1);opacity:.7}
  50%{transform:translate(8px,3px) scale(1.15);opacity:.9}
  100%{transform:translate(0,0) scale(1);opacity:.7}
}

/* Floating hearts on water surface */
.wpl-hearts{position:absolute;inset:0;pointer-events:none}
.wpl-hearts span{position:absolute;font-size:14px;opacity:.25;animation:wplHrt 5s ease-in-out infinite}
@keyframes wplHrt{
  0%,100%{transform:translateY(0) scale(1);opacity:.2}
  50%{transform:translateY(-6px) scale(1.1);opacity:.45}
}

/* Coin element */
.wpl-coin{position:absolute;top:-50px;left:50%;transform:translateX(-50%);font-size:36px;opacity:0;pointer-events:none;z-index:5;filter:drop-shadow(0 2px 6px rgba(255,215,0,.5))}
.wpl-coin.tossing{animation:wplCoin .7s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes wplCoin{
  0%{top:-50px;opacity:0;transform:translateX(-50%) rotate(0deg)}
  15%{opacity:1}
  60%{top:calc(50% - 18px);transform:translateX(-50%) rotate(540deg)}
  75%{top:calc(50% - 10px);transform:translateX(-50%) rotate(600deg)}
  90%{top:calc(50% - 22px);transform:translateX(-50%) rotate(680deg)}
  100%{top:calc(50% - 18px);opacity:0;transform:translateX(-50%) rotate(720deg)}
}

/* Ripple / splash */
.wpl-splash{position:absolute;top:50%;left:50%;pointer-events:none;z-index:4}
.wpl-ripple{position:absolute;border:1.5px solid rgba(255,215,0,0.5);border-radius:50%;animation:wplRip .9s cubic-bezier(.25,.46,.45,.94) forwards;pointer-events:none}
@keyframes wplRip{
  0%{width:4px;height:4px;margin-left:-2px;margin-top:-2px;opacity:1}
  100%{width:220px;height:220px;margin-left:-110px;margin-top:-110px;opacity:0}
}

/* --- Input Row --- */
.wpl-input-row{display:flex;gap:8px;width:100%;max-width:420px;padding:0 12px;align-items:center}
.wpl-input{flex:1;padding:11px 16px;border-radius:22px;border:1px solid rgba(180,210,240,0.2);background:rgba(255,255,255,0.06);color:#fff;font-size:.88rem;outline:none;transition:all .3s;font-family:var(--font-body);letter-spacing:.5px}
.wpl-input:focus{border-color:rgba(120,180,220,0.5);box-shadow:0 0 16px rgba(100,160,220,0.12)}
.wpl-input::placeholder{color:rgba(255,255,255,0.25)}
.wpl-add-btn{padding:11px 18px;border-radius:22px;border:none;background:linear-gradient(135deg,var(--pink),var(--pink-d));color:#fff;font-size:.85rem;cursor:pointer;letter-spacing:1px;white-space:nowrap;font-family:var(--font-body);transition:all .3s;flex-shrink:0}
.wpl-add-btn:hover{transform:scale(1.04);box-shadow:0 4px 18px rgba(255,80,140,.3)}
.wpl-add-btn:active{transform:scale(.97)}

/* Hint text */
.wpl-hint{color:rgba(255,200,220,0.35);font-size:.75rem;margin-top:8px;letter-spacing:1px;text-align:center;transition:opacity .4s ease}

/* --- Wish List --- */
.wpl-list{width:100%;max-width:420px;margin-top:14px;display:flex;flex-direction:column;gap:8px;max-height:28vh;overflow-y:auto;padding:0 4px}
.wpl-list::-webkit-scrollbar{width:3px}
.wpl-list::-webkit-scrollbar-thumb{background:rgba(255,150,200,0.12);border-radius:2px}
.wpl-item{background:linear-gradient(160deg,rgba(255,245,248,0.06),rgba(255,220,240,0.02));border:1px solid rgba(180,210,240,0.1);border-radius:14px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;animation:wplIn .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes wplIn{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.wpl-item-txt{color:rgba(255,220,240,0.85);font-size:.88rem;letter-spacing:.5px;line-height:1.4;flex:1;word-break:break-word}
.wpl-item-del{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,150,150,0.15);background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.3);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .25s;margin-left:10px}
.wpl-item-del:hover{background:rgba(255,80,80,0.15);border-color:rgba(255,80,80,0.3);color:rgba(255,120,120,0.7)}

/* --- Actions / Complete Button --- */
.wpl-actions{width:100%;max-width:280px;margin-top:16px;display:flex;justify-content:center}
.wpl-done-btn{padding:13px 36px;border-radius:26px;border:none;background:linear-gradient(135deg,var(--gold),#ffb347);color:#3a1a00;font-size:.95rem;font-weight:600;cursor:pointer;letter-spacing:2px;font-family:var(--font-body);transition:all .3s;box-shadow:0 4px 20px rgba(255,215,0,.25)}
.wpl-done-btn:hover{transform:scale(1.05);box-shadow:0 6px 28px rgba(255,215,0,.4)}
.wpl-done-btn:active{transform:scale(.96)}
.wpl-done-btn:disabled{opacity:.5;cursor:default;pointer-events:none;transform:none;box-shadow:none}
.wpl-done-btn.loading{opacity:.7;pointer-events:none}

/* --- Done / Success State --- */
.wpl-done{width:100%;max-width:360px;margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:12px;animation:fInU .8s ease both}
.wpl-done-icon{font-size:3.5rem;animation:flt 2s ease-in-out infinite}
.wpl-done-title{font-family:var(--font-hand);font-size:1.3rem;background:linear-gradient(135deg,var(--pink),var(--pink-d));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2px}
.wpl-done-sub{font-size:.85rem;color:rgba(255,200,220,0.5);text-align:center;line-height:1.8;letter-spacing:.5px}
.wpl-memories-btn{padding:14px 36px;border-radius:28px;border:none;background:linear-gradient(135deg,var(--pink),var(--pink-d));color:#fff;font-size:1rem;cursor:pointer;letter-spacing:2px;font-family:var(--font-hand);transition:all .3s;box-shadow:0 6px 24px rgba(255,80,140,.35);margin-top:8px}
.wpl-memories-btn:hover{transform:scale(1.05);box-shadow:0 10px 32px rgba(255,80,140,.55)}
.wpl-memories-btn:active{transform:scale(.96)}

/* Error toast */
.wpl-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:rgba(255,60,60,0.9);color:#fff;padding:10px 24px;border-radius:22px;font-size:.82rem;z-index:1200;animation:wplTst 2.5s ease forwards;pointer-events:none;letter-spacing:1px}
@keyframes wplTst{0%{opacity:0;transform:translateX(-50%) translateY(10px)}15%{opacity:1;transform:translateX(-50%) translateY(0)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}

/* --- Responsive --- */
@media(max-width:600px){
  .wpl-visual{width:min(200px,55vw);height:min(200px,55vw)}
  .wpl-input-row{flex-direction:column;gap:8px}
  .wpl-add-btn{width:100%}
  @keyframes wplRip{
    0%{width:4px;height:4px;margin-left:-2px;margin-top:-2px;opacity:1}
    100%{width:160px;height:160px;margin-left:-80px;margin-top:-80px;opacity:0}
  }
}

/* --- Bottom Nav --- */
.btmnav{position:fixed;bottom:0;left:0;width:100%;z-index:100;background:rgba(6,0,14,0.9);backdrop-filter:blur(20px);border-top:1px solid rgba(255,180,210,0.06);display:flex;justify-content:space-around;padding:4px 0 calc(4px + env(safe-area-inset-bottom))}
.ni{display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px 6px;cursor:pointer;transition:all .3s;border:none;background:none;color:rgba(255,255,255,0.3);font-size:8px;min-width:42px;font-family:var(--font-body)}
.ni .nii{font-size:16px;transition:transform .3s}
.ni.on{color:var(--pink)}.ni.on .nii{transform:scale(1.12)}.ni:hover{color:rgba(255,255,255,0.55)}

/* --- Lightbox --- */
.lb{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.93);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .4s ease;backdrop-filter:blur(10px)}
.lb.on{opacity:1;visibility:visible}
.lb .lb-c{position:absolute;top:max(18px,env(safe-area-inset-top));right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);border:none;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1010;transition:background .3s}
.lb .lb-c:hover{background:rgba(255,255,255,0.15)}

/* Lightbox card + description layout */
.lb-card-wrap{display:flex;align-items:center;justify-content:center;gap:40px;width:90%;max-width:900px;animation:lbIn .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes lbIn{0%{opacity:0;transform:scale(.7) translateY(30px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.lb-card{flex-shrink:0;width:clamp(200px,30vw,360px);height:clamp(260px,39vw,468px);border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(255,80,140,0.3),0 0 40px rgba(255,80,140,0.1);border:2px solid rgba(255,200,220,0.2);transition:transform .3s}
.lb-card:hover{transform:scale(1.02)}
.lb-card img,.lb-card svg{width:100%;height:100%;display:block;object-fit:cover}
.lb-card-fb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:5rem;background:linear-gradient(145deg,#2a2a4a,#1a1a2e);border-radius:14px}
.lb-card-fb span{opacity:.5}
.lb-desc{flex:1;min-width:200px;max-width:420px;color:#fff;padding:20px}
.lb-desc-icon{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:12px}
.lb-desc-title{font-size:clamp(1.2rem,2.5vw,1.8rem);font-weight:700;background:linear-gradient(135deg,var(--pink),var(--pink-d));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px}
.lb-desc-text{font-size:clamp(.9rem,1.6vw,1.1rem);line-height:1.8;color:rgba(255,240,245,0.85);letter-spacing:.5px}
.lb-desc-edit-hint{margin-top:20px;font-size:.78rem;color:rgba(255,180,200,0.35);border-top:1px solid rgba(255,180,200,0.1);padding-top:14px}

@media(max-width:600px){
  .lb-card-wrap{flex-direction:column;gap:20px}
  .lb-card{width:clamp(160px,45vw,220px);height:clamp(208px,58.5vw,286px)}
  .lb-desc{text-align:center;padding:10px}
}

/* --- Loading --- */
.pload{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .8s ease}
.pload.hide{opacity:0;pointer-events:none}
.pload .lh{font-size:45px;animation:loadingP .8s ease-in-out infinite}@keyframes loadingP{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.pload .lt{margin-top:14px;color:var(--pink-l);font-size:13px;letter-spacing:3px}

/* --- Scrollbar --- */
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,150,200,0.12);border-radius:2px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:600px){
  #cake3dContainer{width:340px;height:300px}
  #wishBtn{width:150px;height:150px}
  #wishBtn span{font-size:70px}
  #cakeLayoutContainer{gap:30px;flex-wrap:wrap}
}
@media(min-width:601px) and (max-width:900px){
  #cake3dContainer{width:480px;height:420px}
  #wishBtn{width:165px;height:165px}
  #wishBtn span{font-size:78px}
  #cakeLayoutContainer{gap:35px}
}
@media(min-width:901px){
  .bk-cont{max-height:50vh}
}