/* ==========================================================================
   小丸的生日 · 样式
   配色取 Sweet Lolita，主色粉色 + 奶油 + 金色点缀
   ========================================================================== */

:root{
  --pink-main:#FFB6D9;
  --pink-soft:#FFD6E8;
  --pink-deep:#FF9CC4;
  --cream:#FFF5F9;
  --rose:#FF6B9D;
  --gold:#E8B84C;
  --gold-deep:#C9982A;
  --plum:#6B3F5C;
  --berry:#E85A7C;
  --lace:#FFE6F0;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"LXGW WenKai","Ma Shan Zheng","Playfair Display",serif;
  color:var(--plum);
  background:
    radial-gradient(circle at 80% 10%, rgba(255,182,217,.6) 0, transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(255,214,232,.6) 0, transparent 50%),
    linear-gradient(180deg,#FFEAF4 0%,#FFF5F9 40%,#FFE0EE 100%);
  min-height:100vh;
  overflow-x:hidden;
}

/* 通用元素 */
.heart{color:var(--rose)}
button{font:inherit}
main{position:relative;z-index:5}

/* ==========================================================================
   蕾丝边 / 蝴蝶结装饰 (SVG data-uri)
   ========================================================================== */
.lace-top,.lace-bottom{
  height:30px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><path fill='%23FFE6F0' d='M0 0h60v10H0z'/><circle cx='10' cy='18' r='10' fill='%23FFE6F0'/><circle cx='30' cy='18' r='10' fill='%23FFE6F0'/><circle cx='50' cy='18' r='10' fill='%23FFE6F0'/><circle cx='10' cy='18' r='4' fill='%23FFFBFD'/><circle cx='30' cy='18' r='4' fill='%23FFFBFD'/><circle cx='50' cy='18' r='4' fill='%23FFFBFD'/><circle cx='20' cy='10' r='2' fill='%23FFB6D9'/><circle cx='40' cy='10' r='2' fill='%23FFB6D9'/></svg>") repeat-x center/auto 100%;
  opacity:.9;
}
.lace-bottom{transform:scaleY(-1)}

.deco-bow{
  display:inline-block;width:30px;height:22px;vertical-align:middle;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'><path fill='%23FF6B9D' stroke='%23E85A7C' stroke-width='1' d='M20 14C14 6 2 6 2 14s12 8 18 0z'/><path fill='%23FF6B9D' stroke='%23E85A7C' stroke-width='1' d='M20 14c6-8 18-8 18 0s-12 8-18 0z'/><ellipse cx='20' cy='14' rx='4' ry='5' fill='%23E85A7C'/><path fill='%23FF9CC4' d='M15 16l-3 10h-2l3-10zm10 0l3 10h2l-3-10z'/></svg>") center/contain no-repeat;
}
.deco-bow.flip{transform:scaleX(-1)}

/* ==========================================================================
   0. 开场礼物盒 Overlay
   ========================================================================== */
.gift-overlay{
  position:fixed;inset:0;z-index:9999;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.4) 0, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.3) 0, transparent 40%),
    linear-gradient(135deg,#FFD6E8 0%,#FFB6D9 55%,#FF9CC4 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;
  transition:opacity .8s ease;
}
.gift-overlay.hide{opacity:0;pointer-events:none}

.gift-box{
  position:relative;width:220px;height:200px;
  animation:wiggle 2.2s ease-in-out infinite;
  filter:drop-shadow(0 18px 24px rgba(233,90,124,.35));
}
.gift-body{
  position:absolute;bottom:0;left:0;right:0;height:140px;
  background:linear-gradient(180deg,#FF9CC4 0%,#FF6B9D 100%);
  border-radius:6px;
  box-shadow:inset 0 -10px 0 rgba(0,0,0,.08);
}
.gift-lid{
  position:absolute;top:0;left:-8px;right:-8px;height:56px;
  background:linear-gradient(180deg,#FFB6D9 0%,#FF9CC4 100%);
  border-radius:6px;
  box-shadow:0 6px 0 rgba(0,0,0,.06);
  transform-origin:left bottom;
  transition:transform .9s cubic-bezier(.6,-.3,.4,1.4);
}
.gift-ribbon-v{
  position:absolute;top:0;left:50%;width:26px;height:100%;
  background:linear-gradient(180deg,#F4CE5E,#E8B84C);
  transform:translateX(-50%);
  box-shadow:inset -3px 0 0 rgba(0,0,0,.1), inset 3px 0 0 rgba(255,255,255,.3);
}
.gift-ribbon-h{
  position:absolute;bottom:0;left:-8px;right:-8px;height:18px;
  background:linear-gradient(180deg,#F4CE5E,#E8B84C);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.1);
}
.gift-bow{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:100px;height:48px}
.bow-left,.bow-right{
  position:absolute;top:4px;width:40px;height:38px;border-radius:50% 30% 50% 30%;
  background:linear-gradient(135deg,#F4CE5E,#E8B84C);
  box-shadow:inset -4px -2px 0 rgba(0,0,0,.12);
}
.bow-left{left:0;transform:rotate(-18deg)}
.bow-right{right:0;transform:rotate(18deg) scaleX(-1)}
.bow-knot{position:absolute;left:50%;top:10px;width:20px;height:26px;background:#C9982A;border-radius:6px;transform:translateX(-50%);box-shadow:inset 0 -3px 0 rgba(0,0,0,.1)}
.bow-tail{position:absolute;top:36px;width:14px;height:26px;background:#E8B84C;box-shadow:inset 0 -3px 0 rgba(0,0,0,.1)}
.bow-tail.l{left:32px;transform:skewX(-12deg)}
.bow-tail.r{right:32px;transform:skewX(12deg)}

.gift-overlay.opening .gift-lid{transform:rotate(-90deg) translate(-40px,-10px)}
.gift-overlay.opening .gift-box{animation:pop .7s ease}
@keyframes wiggle{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.1)}100%{transform:scale(.9) translateY(12px)}}

.gift-hint{
  margin-top:36px;
  font-family:"ZCOOL KuaiLe",serif;color:#fff;
  font-size:22px;text-align:center;
  text-shadow:0 3px 10px rgba(233,90,124,.45);
  letter-spacing:.04em;
}
.gift-hint span{display:inline-block;margin-top:8px;font-size:16px;opacity:.95;animation:blink 1.4s infinite}
@keyframes blink{0%,100%{opacity:.4}50%{opacity:1}}

.gift-overlay:focus-visible{outline:3px solid #fff;outline-offset:-12px}

/* ==========================================================================
   1. Hero
   ========================================================================== */
.hero{padding:20px 20px 40px;text-align:center;position:relative}
.hero .lace-top{margin:-20px -20px 40px}
.hero-inner{max-width:900px;margin:0 auto}
.hero-title{margin:0;line-height:1.05}
.hero-title .en{
  display:block;font-family:"Playfair Display",serif;font-style:italic;
  font-size:clamp(36px,6.5vw,68px);
  color:var(--rose);letter-spacing:.02em;
  text-shadow:0 3px 0 #fff, 0 6px 14px rgba(233,90,124,.18);
}
.hero-title .cn{
  display:block;font-family:"ZCOOL KuaiLe",serif;
  font-size:clamp(44px,8.5vw,92px);color:var(--plum);margin-top:10px;
}
.hero-title .heart{color:var(--rose);margin-left:.1em;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

.hero-sub{
  font-size:clamp(14px,2vw,18px);
  min-height:3.6em;max-width:620px;margin:26px auto;
  line-height:1.9;color:var(--plum);
  font-family:"Ma Shan Zheng","LXGW WenKai",serif;
}
.hero-sub .cursor{
  display:inline-block;width:2px;height:1em;margin-left:2px;
  background:var(--rose);vertical-align:-2px;
  animation:caret 1s infinite;
}
@keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}

.countdown{display:flex;gap:10px;justify-content:center;margin:14px auto 10px;flex-wrap:wrap}
.c-cell{
  background:rgba(255,255,255,.7);backdrop-filter:blur(6px);
  border:2px solid var(--pink-main);border-radius:16px;
  padding:12px 18px;min-width:72px;
  box-shadow:0 6px 14px rgba(255,107,157,.14);
}
.c-cell .n{
  display:block;font-family:"Playfair Display",serif;
  font-size:30px;font-weight:700;color:var(--rose);line-height:1;
}
.c-cell .u{display:block;font-size:12px;color:var(--plum);opacity:.75;margin-top:4px}
.countdown-label{text-align:center;color:var(--plum);opacity:.8;font-size:14px;margin:0 0 24px}
.scroll-hint{display:inline-block;color:var(--rose);text-decoration:none;font-size:14px;margin-top:10px;opacity:.7;animation:bounce 2s infinite}
.scroll-hint:hover{opacity:1}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ==========================================================================
   Sections common
   ========================================================================== */
section{padding:60px 20px;position:relative}
.cake-section,.fortune-section,.game-section,.letter-section{max-width:960px;margin:0 auto}
.section-title{
  font-family:"ZCOOL KuaiLe",serif;
  font-size:clamp(24px,4vw,40px);
  text-align:center;color:var(--rose);margin:0 0 8px;
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
}
.section-hint{text-align:center;font-size:14px;color:var(--plum);opacity:.7;margin:0 0 34px}

.mini-btn{
  font-family:"ZCOOL KuaiLe",serif;
  background:var(--rose);color:#fff;border:none;
  padding:10px 26px;border-radius:999px;cursor:pointer;
  box-shadow:0 4px 12px rgba(233,90,124,.3);
  transition:transform .15s ease, box-shadow .15s ease;
  font-size:15px;letter-spacing:.02em;
}
.mini-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(233,90,124,.42)}
.mini-btn:active{transform:translateY(0)}
.mini-btn.ghost{background:transparent;color:var(--rose);border:2px solid var(--rose);box-shadow:none}
.mini-btn.ghost:hover{background:rgba(255,107,157,.08)}
.mini-btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}

/* ==========================================================================
   2. 蛋糕 + 蜡烛
   ========================================================================== */
.cake-wrap{display:flex;flex-direction:column;align-items:center;gap:24px}
.cake{position:relative;width:300px;height:340px;margin-top:40px}
.cake-layer{
  position:absolute;left:50%;transform:translateX(-50%);
  border-radius:12px 12px 6px 6px;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.05), 0 6px 14px rgba(233,90,124,.18);
}
.cake-layer.top   {bottom:190px;width:150px;height:54px;background:linear-gradient(180deg,#FFEBF4,#FFD6E8);border-top:6px solid #fff}
.cake-layer.middle{bottom:100px;width:210px;height:96px;background:linear-gradient(180deg,#FFC6E0,#FF9CC4);border-top:8px solid #fff;overflow:hidden}
.cake-layer.bottom{bottom:14px;width:270px;height:102px;background:linear-gradient(180deg,#FFB6D9,#FF7AAF);border-top:10px solid #fff}

.cake-drip-top{
  position:absolute;top:-1px;left:0;right:0;height:10px;
  background:radial-gradient(circle at 8px -4px,#fff 8px,transparent 8px) repeat-x;
  background-size:16px 10px;
}
.cake-drip{
  position:absolute;top:-1px;left:0;right:0;height:14px;
  background:radial-gradient(circle at 12px -5px,#fff 10px,transparent 10px) repeat-x;
  background-size:24px 14px;
}
.strawberry{position:absolute;bottom:6px;font-size:22px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.1))}
.cake-pattern{
  position:absolute;inset:auto 10px 10px 10px;height:16px;
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(255,255,255,.35) 10px 12px),
    repeating-linear-gradient(-45deg, transparent 0 10px, rgba(255,255,255,.35) 10px 12px);
  border-radius:4px;
}
.cake-plate{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:320px;height:20px;
  background:linear-gradient(180deg,#fff,#EADCE6);
  border-radius:50%;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.candles{
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  display:flex;gap:16px;margin-bottom:4px;
}
.candle{
  position:relative;width:7px;height:36px;
  background:repeating-linear-gradient(180deg,#fff 0 6px,#FFD6E8 6px 12px);
  border-radius:3px;cursor:pointer;
  transition:filter .2s;
}
.candle:hover{filter:brightness(1.05) drop-shadow(0 0 8px rgba(255,200,80,.6))}
.candle::before{
  content:"";position:absolute;top:-16px;left:50%;
  width:10px;height:16px;
  background:radial-gradient(ellipse at 50% 85%, #FFE48A 0%, #FFB347 55%, rgba(255,160,80,.2) 70%, transparent 80%);
  border-radius:50% 50% 45% 45% / 60% 60% 40% 40%;
  filter:blur(.4px);
  transform:translateX(-50%);
  animation:flame 1.1s ease-in-out infinite alternate;
  transform-origin:bottom center;
  box-shadow:0 0 14px rgba(255,180,70,.55);
}
.candle.out::before{opacity:0;animation:none;box-shadow:none}
.candle.out::after{
  content:"";position:absolute;top:-20px;left:50%;
  width:2px;height:0;
  background:linear-gradient(180deg,rgba(180,180,180,.7),transparent);
  transform:translateX(-50%);
  animation:smoke .9s forwards;
}
@keyframes flame{
  0%  {transform:translateX(-50%) scale(1)   rotate(-3deg)}
  100%{transform:translateX(-50%) scale(1.1) rotate(3deg)}
}
@keyframes smoke{
  0%{height:0;opacity:.9}
  100%{height:36px;opacity:0;transform:translateX(-50%) translateY(-14px)}
}
.candle:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:3px}

.wish{
  text-align:center;padding:22px 30px;
  background:rgba(255,255,255,.75);backdrop-filter:blur(4px);
  border:2px dashed var(--pink-main);border-radius:18px;
  max-width:520px;
  opacity:0;transform:translateY(14px);
  transition:opacity .7s ease, transform .7s ease;
}
.wish.show{opacity:1;transform:translateY(0)}
.wish p{font-family:"Ma Shan Zheng",serif;font-size:20px;color:var(--plum);margin:0;line-height:1.8}

/* ==========================================================================
   3. 抽签卡片
   ========================================================================== */
.cards{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin:20px 0 24px}
.card{perspective:1200px;width:170px;height:230px;cursor:pointer}
.card-inner{
  position:relative;width:100%;height:100%;
  transition:transform .8s cubic-bezier(.4,.1,.3,1);
  transform-style:preserve-3d;
}
.card:hover .card-inner{transform:translateY(-4px)}
.card.flipped .card-inner{transform:rotateY(180deg)}
.card-face{
  position:absolute;inset:0;backface-visibility:hidden;
  border-radius:14px;
  box-shadow:0 8px 18px rgba(233,90,124,.25);
  display:flex;align-items:center;justify-content:center;
  padding:18px;text-align:center;
}
.card-face.back{
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.35) 0,transparent 40%),
    linear-gradient(135deg,#FF9CC4,#FF6B9D);
  border:3px solid var(--gold);
  position:relative;
}
.card-face.back::before{
  content:"♡";color:#fff;font-size:54px;opacity:.85;
  text-shadow:0 2px 8px rgba(0,0,0,.15);
}
.card-face.back::after{
  content:"";position:absolute;inset:8px;
  border:1px dashed rgba(255,255,255,.6);border-radius:10px;pointer-events:none;
}
.card-face.front{
  background:linear-gradient(180deg,#FFFBFD,#FFF0F7);
  border:3px solid var(--pink-main);
  transform:rotateY(180deg);
  position:relative;
}
.card-face.front::before{
  content:"🎀";position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:22px;
}
.card-face.front p{
  font-family:"Ma Shan Zheng",serif;color:var(--plum);
  font-size:16px;line-height:1.7;margin:0;
}
.card:focus-visible{outline:none}
.card:focus-visible .card-inner{outline:3px solid var(--rose);outline-offset:4px;border-radius:14px}
#reshuffle{display:block;margin:10px auto 0}

/* ==========================================================================
   4. 小游戏
   ========================================================================== */
.game-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.game-hud{
  display:flex;gap:24px;
  font-family:"ZCOOL KuaiLe",serif;font-size:18px;color:var(--plum);
}
.game-hud b{color:var(--rose);font-size:22px;margin:0 4px}
#game-canvas{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.6), transparent 60%),
    linear-gradient(180deg,#FFF5F9,#FFE6F0);
  border:3px solid var(--pink-main);border-radius:16px;
  max-width:100%;height:auto;
  touch-action:none;
  box-shadow:0 6px 18px rgba(233,90,124,.15);
}
.game-controls{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.game-over{
  font-family:"ZCOOL KuaiLe",serif;color:var(--rose);font-size:18px;
  text-align:center;margin:10px 0 0;max-width:560px;line-height:1.7;
}

/* ==========================================================================
   5. 信笺
   ========================================================================== */
.letter-section{padding-bottom:20px}
.letter{
  max-width:600px;margin:20px auto 40px;
  background:#FFFCF7;
  background-image:
    repeating-linear-gradient(
      transparent 0,
      transparent 33px,
      rgba(255,107,157,.08) 33px,
      rgba(255,107,157,.08) 34px
    );
  border:2px solid var(--pink-main);
  border-radius:10px;
  padding:42px 38px;
  box-shadow:0 14px 34px rgba(233,90,124,.18);
  position:relative;
  transform:rotate(-.4deg);
}
.letter::before,.letter::after{position:absolute;font-size:32px;line-height:1}
.letter::before{content:"🎀";top:-18px;left:24px}
.letter::after{content:"♡";bottom:12px;right:24px;color:var(--rose);font-size:22px}
.letter-body p{
  font-family:"Ma Shan Zheng","LXGW WenKai",serif;
  font-size:18px;line-height:2;color:var(--plum);margin:0 0 14px;
}
.letter-body .signoff{
  text-align:right;font-family:"Long Cang","Dancing Script",cursive;
  font-size:22px;font-style:italic;color:var(--rose);margin-top:20px;
}
.lace-bottom{margin:10px -20px 0}

/* ==========================================================================
   BGM 按钮
   ========================================================================== */
.bgm-toggle{
  position:fixed;right:20px;bottom:20px;z-index:100;
  width:50px;height:50px;border-radius:50%;
  background:#fff;border:2px solid var(--pink-main);
  color:var(--rose);cursor:pointer;
  box-shadow:0 4px 14px rgba(233,90,124,.28);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s;
}
.bgm-toggle:hover{transform:scale(1.08)}
.bgm-toggle.playing{background:var(--rose);color:#fff;animation:spin 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   背景粒子
   ========================================================================== */
#petals{position:fixed;inset:0;pointer-events:none;z-index:1}
#trail{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.heart-bubble{
  position:absolute;font-size:14px;color:var(--rose);
  animation:bubble .9s ease-out forwards;user-select:none;
  transform:translate(-50%,-50%);
}
@keyframes bubble{
  0%  {opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-130%) scale(.4)}
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media(max-width:560px){
  .hero-title .en{font-size:34px}
  .hero-title .cn{font-size:48px}
  .candles{gap:11px}
  .c-cell{min-width:58px;padding:10px 12px}
  .c-cell .n{font-size:24px}
  .card{width:108px;height:156px}
  .card-face{padding:10px}
  .card-face.back::before{font-size:38px}
  .card-face.front p{font-size:13px;line-height:1.55}
  #game-canvas{width:100%;max-width:560px}
  .letter{padding:30px 22px}
  .letter-body p{font-size:16px}
  .gift-box{transform:scale(.9)}
}

/* 尊重减少动画偏好 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.1s !important;
  }
  #petals{display:none}
  .hero-title .heart{animation:none}
}