*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden;scroll-behavior:smooth;min-height:100vh;}
body{font-family:'Nunito',sans-serif;cursor:none;background:#c8a8f8;}

/* ══ FIXED CANVAS LAYERS ══ */
.cv{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;}
#cv-sky     {z-index:1;}
#cv-clouds1 {z-index:2;}  /* far clouds */
#cv-paws    {z-index:3;}  /* bg paw prints */
#cv-stars   {z-index:4;}  /* sparkle stars */
#cv-clouds2 {z-index:5;}  /* near clouds */
#cv-balloons{z-index:6;pointer-events:auto;cursor:none;}
#cv-confetti{z-index:98;pointer-events:none;}
#cv-trail   {z-index:99;pointer-events:none;}

/* ══ CURSOR ══ */
#cur{
  position:fixed;pointer-events:none;z-index:9999;
  width:36px;height:36px;
  left:-100px;top:-100px;
  margin-left:-18px;margin-top:-18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='26' r='11' fill='%23FF85B3'/%3E%3Ccircle cx='20' cy='26' r='7' fill='%23FFCCE0'/%3E%3Ccircle cx='12' cy='14' r='5' fill='%23FF85B3'/%3E%3Ccircle cx='28' cy='14' r='5' fill='%23FF85B3'/%3E%3Ccircle cx='8' cy='23' r='4' fill='%23FF85B3'/%3E%3Ccircle cx='32' cy='23' r='4' fill='%23FF85B3'/%3E%3Ccircle cx='16' cy='24' r='2.5' fill='%23FF5C9D'/%3E%3Ccircle cx='24' cy='24' r='2.5' fill='%23FF5C9D'/%3E%3Ccircle cx='20' cy='29' r='2.5' fill='%23FF5C9D'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 2px 4px rgba(120,0,80,.35)) drop-shadow(0 0 10px rgba(255,133,179,.7));
  animation:curPop .85s ease-in-out infinite alternate;
  transition:width .15s,height .15s;
}
#cur.big{width:48px;height:48px;}
@keyframes curPop{from{transform:scale(1) rotate(-5deg)}to{transform:scale(1.18) rotate(5deg)}}

/* ══ APP ══ */
#app{position:relative;z-index:10;}

/* ══ LOADER ══ */
#loader{position:fixed;inset:0;z-index:9999;
  background:linear-gradient(160deg,#C8B4FF,#E8C4FF,#FFD6F0);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity 1s,transform 1s;}
#loader.out{opacity:0;transform:scale(1.06);pointer-events:none;}
.ld-spin{width:80px;height:80px;border-radius:50%;
  background:conic-gradient(#FFE98A,#FFB3D1,#B89DFF,#A8D8EA,#FFE98A);
  animation:ldRot 1s linear infinite;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 30px rgba(180,130,255,.4);}
@keyframes ldRot{to{transform:rotate(360deg)}}
.ld-in{width:62px;height:62px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:2rem;}
.ld-t{font-family:'Fredoka One',cursive;font-size:1.3rem;letter-spacing:2px;
  background:linear-gradient(135deg,#B89DFF,#FF85B3);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:ldFade 1s ease infinite alternate;}
@keyframes ldFade{from{opacity:.4}to{opacity:1}}

/* ══ HERO ══ */
#hero{position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;
  padding:0 24px 80px;overflow:hidden;}

/* top badge */
.top-badge{
  margin-top:30px;position:relative;z-index:20;
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#FFE98A,#FFD740);
  color:#7A4800;font-family:'Fredoka One',cursive;font-size:.95rem;
  padding:10px 28px;border-radius:50px;letter-spacing:1.5px;
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 6px 24px rgba(255,190,50,.4),inset 0 2px 0 rgba(255,255,255,.6),0 0 0 1px rgba(255,210,80,.3);
  animation:badgePop .7s cubic-bezier(.34,1.56,.64,1) 1.5s both;
}
@keyframes badgePop{from{transform:scale(0)rotate(-10deg);opacity:0}to{transform:scale(1);opacity:1}}

/* Skye scene */
#skye-scene{
  position:relative;z-index:20;
  width:min(320px,88vw);margin:16px auto 0;
  animation:skyeFloat 4s ease-in-out infinite;
  filter:drop-shadow(0 20px 40px rgba(140,80,200,.3));
  cursor:pointer;
}
@keyframes skyeFloat{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-20px) rotate(.6deg)}}

/* ── TITLE BLOCK ── */
.title-block{
  position:relative;z-index:20;
  text-align:center;margin:8px auto 0;max-width:380px;
  animation:titleUp 1s cubic-bezier(.34,1.56,.64,1) 1.8s both;
}
@keyframes titleUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}

.t-main{
  font-family:'Fredoka One',cursive;
  font-size:clamp(2rem,8.5vw,3.2rem);
  line-height:1.12;
  color:#fff;
  /* layered text shadow for depth */
  text-shadow:
    0 1px 0 rgba(200,150,255,.8),
    0 2px 0 rgba(180,120,240,.7),
    0 3px 0 rgba(160,100,220,.6),
    0 4px 0 rgba(140,80,200,.5),
    0 5px 0 rgba(120,60,180,.4),
    0 8px 20px rgba(100,40,180,.4),
    0 0 60px rgba(255,180,255,.2);
}
.t-num3{
  font-family:'Fredoka One',cursive;
  font-size:clamp(1.9rem,8vw,3rem);
  background:linear-gradient(170deg,#FFF9A0 0%,#FFE566 35%,#FFB800 65%,#FF8C00 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 3px 6px rgba(180,100,0,.4)) drop-shadow(0 0 16px rgba(255,220,50,.6));
  animation:goldPulse 2s ease infinite;display:inline-block;
}
@keyframes goldPulse{0%,100%{filter:drop-shadow(0 3px 6px rgba(180,100,0,.4)) drop-shadow(0 0 16px rgba(255,220,50,.6))}
  50%{filter:drop-shadow(0 3px 6px rgba(180,100,0,.4)) drop-shadow(0 0 28px rgba(255,220,50,.9))}}

.t-sakura{
  font-family:'Fredoka One',cursive;
  font-size:clamp(2.4rem,10vw,3.8rem);
  background:linear-gradient(160deg,#FFE0EE 0%,#FFB3D1 40%,#FF85B3 70%,#FF5C9D 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 4px 8px rgba(200,50,120,.3)) drop-shadow(0 0 20px rgba(255,133,179,.4));
  display:block;
}

/* Big "3" balloon number */
.big3-wrap{
  display:inline-block;vertical-align:middle;
  animation:big3Float 3.5s ease-in-out infinite .8s;
  filter:drop-shadow(0 8px 20px rgba(180,100,0,.35)) drop-shadow(0 0 30px rgba(255,220,50,.5));
  margin-left:4px;
}
@keyframes big3Float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.04)}}

/* subtitle */
.t-sub{
  font-family:'Fredoka One',cursive;
  font-size:clamp(.95rem,3.5vw,1.15rem);
  color:#fff;letter-spacing:.5px;
  text-shadow:0 2px 12px rgba(80,0,120,.6),0 1px 0 rgba(0,0,0,.3);
  margin-top:12px;
  background:rgba(80,0,140,.25);
  backdrop-filter:blur(4px);
  padding:8px 20px;border-radius:30px;
  display:inline-block;
  border:1px solid rgba(255,255,255,.2);
}

/* CTA button */
.cta-wrap{position:relative;z-index:20;margin:22px auto 0;display:flex;flex-direction:column;align-items:center;gap:10px;
  animation:titleUp 1s cubic-bezier(.34,1.56,.64,1) 2.2s both;}
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Fredoka One',cursive;font-size:1.2rem;color:#fff;
  background:linear-gradient(135deg,#FF85B3,#FF5C9D,#E8487A);
  padding:18px 48px;border-radius:60px;text-decoration:none;
  border:4px solid rgba(255,255,255,.85);
  box-shadow:0 8px 0 #B83365,0 14px 36px rgba(200,50,120,.45),inset 0 2px 0 rgba(255,255,255,.45),0 0 0 8px rgba(255,133,179,.1);
  position:relative;overflow:hidden;cursor:pointer;
  transition:transform .12s,box-shadow .12s;
  animation:btnBounce 2.8s ease infinite 2.6s;
}
.cta-btn::after{content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:shimmer 2.5s ease infinite;}
@keyframes shimmer{from{left:-100%}to{left:200%}}
.cta-btn:hover{transform:translateY(-4px);box-shadow:0 12px 0 #B83365,0 20px 48px rgba(200,50,120,.55),inset 0 2px 0 rgba(255,255,255,.45);}
.cta-btn:active{transform:translateY(4px);box-shadow:0 3px 0 #B83365,0 6px 20px rgba(200,50,120,.3),inset 0 2px 0 rgba(255,255,255,.45);}
@keyframes btnBounce{0%,65%,100%{transform:translateY(0)}80%{transform:translateY(-9px)}90%{transform:translateY(-4px)}}
.cta-arrow{font-size:1.5rem;opacity:.8;animation:arrow 1.4s ease infinite;}
@keyframes arrow{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* sparkle pop effect */
.s-pop{position:fixed;pointer-events:none;z-index:9999;animation:sPop .9s ease forwards;}
@keyframes sPop{from{transform:scale(0)translate(0,0);opacity:1}to{transform:scale(1.5)translate(var(--dx),var(--dy));opacity:0}}

/* ripple */
.ripple{position:fixed;pointer-events:none;z-index:9997;border-radius:50%;
  border:2.5px solid rgba(255,200,240,.7);
  animation:ripple .7s ease forwards;}
@keyframes ripple{from{width:0;height:0;opacity:.9;transform:translate(-50%,-50%)}to{width:120px;height:120px;opacity:0;transform:translate(-50%,-50%)}}

/* ══ INFO SECTION ══ */
#info{position:relative;z-index:10;padding:70px 20px 80px;
  background:linear-gradient(160deg,#F8F0FF 0%,#EEF5FF 55%,#FFF0F8 100%);}
.sec-eye{display:block;font-family:'Fredoka One',cursive;font-size:.82rem;
  letter-spacing:4px;text-transform:uppercase;color:#B89DFF;text-align:center;margin-bottom:10px;}
.sec-h{font-family:'Fredoka One',cursive;font-size:clamp(1.7rem,6vw,2.6rem);
  text-align:center;margin-bottom:36px;color:#C26EBF;
  text-shadow:0 2px 0 #E8C4FF,0 4px 16px rgba(180,80,180,.2);}
.cards-g{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:400px;margin:0 auto;}
.ic{background:rgba(255,255,255,.88);border-radius:24px;padding:24px 16px 20px;
  text-align:center;backdrop-filter:blur(12px);
  box-shadow:0 6px 28px rgba(180,120,220,.14),0 2px 6px rgba(0,0,0,.04);
  border:2.5px solid transparent;
  transform:translateY(0);opacity:1;transition:transform .65s cubic-bezier(.34,1.56,.64,1),opacity .5s,box-shadow .3s;}
.ic.show{transform:translateY(0);opacity:1;}.ic:hover{transform:translateY(-8px) scale(1.02)!important;box-shadow:0 20px 50px rgba(180,120,220,.24);}
.ic.p{border-color:#FFB3D1;}.ic.b{border-color:#B3DFFF;}.ic.y{border-color:#FFE98A;}.ic.l{border-color:#D9C3FF;}
.ic-ico{width:56px;height:56px;border-radius:50%;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;font-size:1.55rem;
  animation:iconHov 2.5s ease-in-out infinite;}
@keyframes iconHov{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.ic.p .ic-ico{background:linear-gradient(135deg,#FFD6E8,#FFB3D1);}
.ic.b .ic-ico{background:linear-gradient(135deg,#D6EEFF,#B3DFFF);}
.ic.y .ic-ico{background:linear-gradient(135deg,#FFFAC4,#FFE98A);}
.ic.l .ic-ico{background:linear-gradient(135deg,#EDE0FF,#D9C3FF);}
.ic-lbl{font-family:'Fredoka One',cursive;font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:#ccc;margin-bottom:5px;}
.ic-val{font-family:'Fredoka One',cursive;font-size:1.12rem;color:#555;line-height:1.3;}

/* ══ PARADE ══ */
#parade{position:relative;z-index:10;padding:70px 20px 80px;overflow:hidden;
  background:linear-gradient(180deg,#1a0e3a 0%,#0e0828 100%);}
#parade::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(140,80,220,.18) 0%,transparent 70%);}
.par-h{font-family:'Fredoka One',cursive;font-size:clamp(1.7rem,6vw,2.6rem);
  text-align:center;margin-bottom:8px;color:#fff;
  text-shadow:0 0 30px rgba(200,150,255,.5),0 4px 14px rgba(0,0,0,.3);}
.par-sub{font-family:'Nunito',sans-serif;font-weight:700;font-size:clamp(.9rem,3.5vw,1.1rem);
  color:rgba(255,255,255,.65);text-align:center;margin-bottom:44px;max-width:300px;margin-left:auto;margin-right:auto;}
.chars-row{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;max-width:480px;margin:0 auto;}
.cch{display:flex;flex-direction:column;align-items:center;gap:10px;
  transform:scale(1);opacity:1;transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.cch.show{transform:scale(1);opacity:1;}
.cch-svg{animation:chBob ease-in-out infinite;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4));transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .3s;}
@keyframes chBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.cch:hover .cch-svg{filter:drop-shadow(0 14px 28px rgba(200,150,255,.6));transform:translateY(-13px) scale(1.09);}
.cch-name{font-family:'Fredoka One',cursive;font-size:.9rem;color:#fff;padding:5px 16px;border-radius:30px;box-shadow:0 4px 14px rgba(0,0,0,.25);}

/* ══ RSVP ══ */
#rsvp{position:relative;z-index:10;padding:70px 20px 80px;
  background:linear-gradient(160deg,#F5E8FF 0%,#EAE0FF 50%,#E8F0FF 100%);overflow:hidden;}
#rsvp::before{content:'🐾 🐾 🐾 🐾 🐾 🐾 🐾 🐾 🐾 🐾 🐾 🐾';position:absolute;bottom:0;left:0;right:0;
  font-size:1.5rem;letter-spacing:8px;color:rgba(180,130,255,.1);white-space:nowrap;overflow:hidden;
  pointer-events:none;animation:pawScroll 14s linear infinite;}
@keyframes pawScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rsvp-card{background:rgba(255,255,255,.8);backdrop-filter:blur(16px);
  border:3px solid rgba(255,255,255,.9);border-radius:36px;padding:48px 28px 44px;
  max-width:380px;margin:0 auto;text-align:center;
  box-shadow:0 20px 60px rgba(160,100,220,.18),0 4px 12px rgba(0,0,0,.04);
  transform:translateY(50px);opacity:0;transition:transform .75s cubic-bezier(.34,1.56,.64,1),opacity .5s;}
.rsvp-card.show{transform:translateY(0);opacity:1;}
.rsvp-pill{display:inline-block;font-family:'Fredoka One',cursive;font-size:.85rem;letter-spacing:3px;text-transform:uppercase;
  background:linear-gradient(135deg,#D9C3FF,#B89DFF);color:#fff;padding:8px 24px;border-radius:50px;
  margin-bottom:20px;box-shadow:0 4px 16px rgba(180,130,255,.35);}
.rsvp-title{font-family:'Fredoka One',cursive;font-size:clamp(1.8rem,7vw,2.8rem);color:#C26EBF;
  text-shadow:0 2px 0 #E8C4FF;margin-bottom:14px;}
.rsvp-msg{font-family:'Nunito',sans-serif;font-weight:700;font-size:1rem;color:#8877AA;line-height:1.65;
  margin-bottom:32px;max-width:300px;margin-left:auto;margin-right:auto;}
.rsvp-msg strong{color:#C26EBF;}
.rsvp-btn{display:inline-flex;align-items:center;gap:10px;font-family:'Fredoka One',cursive;font-size:1.25rem;color:#fff;
  background:linear-gradient(135deg,#C89DFF,#A86EFF,#8B3FFF);
  padding:20px 40px;border-radius:60px;border:4px solid rgba(255,255,255,.8);
  box-shadow:0 8px 0 #6B30CC,0 14px 36px rgba(140,63,255,.4),inset 0 2px 0 rgba(255,255,255,.4);
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .12s,box-shadow .12s;animation:rsvpPulse 2.5s ease infinite;}
.rsvp-btn::after{content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2.2s ease infinite 1s;}
.rsvp-btn:hover{transform:translateY(-4px);box-shadow:0 12px 0 #6B30CC,0 20px 44px rgba(140,63,255,.55),inset 0 2px 0 rgba(255,255,255,.4);}
.rsvp-btn:active{transform:translateY(4px);box-shadow:0 3px 0 #6B30CC,0 8px 20px rgba(140,63,255,.3),inset 0 2px 0 rgba(255,255,255,.4);}
@keyframes rsvpPulse{0%,100%{box-shadow:0 8px 0 #6B30CC,0 14px 36px rgba(140,63,255,.4),inset 0 2px 0 rgba(255,255,255,.4)}
  50%{box-shadow:0 8px 0 #6B30CC,0 14px 52px rgba(140,63,255,.65),inset 0 2px 0 rgba(255,255,255,.4)}}
.rsvp-decos{font-size:1.6rem;margin-top:22px;animation:decoWig 1.8s ease infinite;}
@keyframes decoWig{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* ══ FINALE ══ */
#finale{position:relative;z-index:10;padding:70px 20px 100px;text-align:center;
  background:linear-gradient(180deg,#F5E8FF 0%,#FFF5FF 50%,#EEF5FF 100%);overflow:hidden;}
.fin-emoji{font-size:2.3rem;margin-bottom:20px;animation:emojiD 1.5s ease infinite;}
@keyframes emojiD{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.fin-title{font-family:'Fredoka One',cursive;font-size:clamp(1.8rem,7vw,3rem);line-height:1.2;margin-bottom:14px;
  background:linear-gradient(135deg,#C26EBF,#B89DFF,#4BAEE8);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:hueR 5s linear infinite;}
@keyframes hueR{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
.fin-info{font-family:'Fredoka One',cursive;font-size:1rem;color:#B89DFF;line-height:1.8;}
.fin-paws{font-size:2rem;margin-top:20px;letter-spacing:6px;opacity:.35;}
.fin-sig{font-family:'Fredoka One',cursive;font-size:.75rem;letter-spacing:3px;color:#ccc;text-transform:uppercase;margin-top:26px;}

/* ══════════════════════════════
   MOBILE FIRST — GLOBAL FIXES
══════════════════════════════ */

/* Hide desktop cursor on touch screens */
@media (hover:none),(pointer:coarse){
  #cur{display:none!important;}
  body{cursor:auto!important;}
  #cv-trail{display:none!important;}
  #cv-balloons{cursor:auto!important;}
}

/* ── HERO mobile ── */
#hero{
  padding:0 16px 60px;
  min-height:100svh;
  justify-content:flex-start;
  gap:0;
}
.top-badge{
  margin-top:20px;
  font-size:.82rem;
  padding:9px 20px;
  letter-spacing:1px;
}
#skye-scene{
  width:min(280px,82vw);
  margin:8px auto 0;
}
.title-block{
  margin:4px auto 0;
  padding:0 8px;
}
.t-main{font-size:clamp(1.6rem,7.5vw,2.6rem);line-height:1.1;}
.t-sakura{font-size:clamp(2rem,9vw,3.2rem);}
.t-num3{font-size:clamp(1.6rem,7vw,2.6rem);}
.big3-wrap svg{width:58px!important;}
.t-sub{font-size:.88rem;margin-top:8px;}
.cta-wrap{margin:16px auto 0;}
.cta-btn{
  font-size:1.05rem;
  padding:16px 28px;
  border-radius:50px;
  width:min(300px,90vw);
  justify-content:center;
}

/* ── MISSION section mobile ── */
#info{padding:48px 14px 60px!important;background:transparent!important;}

/* ── PARADE mobile ── */
#parade{padding:50px 16px 60px;}
.chars-row{gap:14px;}
.cch-svg{width:80px!important;height:106px!important;}
.cch-name{font-size:.78rem;padding:4px 12px;}

/* ── RSVP mobile ── */
#rsvp{padding:50px 16px 60px;}
.rsvp-card{padding:36px 20px 32px;border-radius:28px;}
.rsvp-pill{font-size:.75rem;padding:7px 18px;letter-spacing:2px;}
.rsvp-title{font-size:clamp(1.5rem,7vw,2.2rem);}
.rsvp-msg{font-size:.92rem;}
.rsvp-btn{
  font-size:1.1rem;
  padding:17px 28px;
  width:min(280px,90vw);
  justify-content:center;
}

/* ── FINALE mobile ── */
#finale{padding:50px 16px 80px;}
.fin-title{font-size:clamp(1.6rem,7vw,2.4rem);}
.fin-info{font-size:.92rem;}

/* ── very small phones (≤380px) ── */
@media (max-width:380px){
  .top-badge{font-size:.74rem;padding:8px 14px;}
  #skye-scene{width:72vw;}
  .t-main{font-size:6.8vw;}
  .t-sakura{font-size:8.5vw;}
  .cards-row1,.cards-row2{gap:9px;}
  .mci{padding:18px 12px 18px!important;}
  .card-val{font-size:1.1rem!important;}
  .card-lbl{font-size:.74rem!important;}
  .ico{width:62px!important;height:62px!important;font-size:1.7rem!important;}
  .ico-wrap{top:-32px!important;}
  .mco{padding-top:40px!important;}
}
#paw-nav{
  position:fixed;top:0;left:0;right:0;z-index:9990;
  padding:0 20px;
  height:60px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(30,0,60,.65);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1.5px solid rgba(200,120,255,.35);
  box-shadow:0 4px 28px rgba(100,0,180,.3);
  transition:background .3s,box-shadow .3s;
}
#paw-nav.scrolled{
  background:rgba(40,0,80,.82);
  box-shadow:0 4px 32px rgba(120,0,200,.35);
}

/* Logo */
.nav-logo{
  font-family:'Fredoka One',cursive;
  font-size:1.2rem;
  color:#fff;
  -webkit-text-fill-color:#fff;
  display:flex;align-items:center;gap:7px;
  text-decoration:none;letter-spacing:.3px;
  text-shadow:0 2px 10px rgba(255,150,255,.6);
}
.nav-logo-icon{font-size:1.3rem;}

/* Links */
.nav-links{
  display:flex;align-items:center;gap:2px;
}
.nav-link{
  font-family:'Fredoka One',cursive;font-size:.9rem;
  color:rgba(255,220,255,.85);text-decoration:none;
  padding:7px 14px;border-radius:30px;
  transition:background .2s,transform .15s,color .2s;
  white-space:nowrap;
}
.nav-link:hover{
  background:rgba(255,255,255,.15);
  color:#fff;
  transform:translateY(-2px);
}
.nav-link.active{
  background:linear-gradient(135deg,#A855F7,#FF5C9D);
  color:#fff!important;
  box-shadow:0 3px 0 rgba(100,0,150,.5),0 5px 14px rgba(168,85,247,.4);
}

/* CTA pill in nav */
.nav-rsvp{
  font-family:'Fredoka One',cursive;font-size:.85rem;
  background:linear-gradient(135deg,#FF85B3,#FF5C9D);
  color:#fff;text-decoration:none;
  padding:9px 20px;border-radius:30px;
  border:2px solid rgba(255,255,255,.5);
  box-shadow:0 3px 0 #B83365,0 6px 16px rgba(200,50,120,.4);
  transition:transform .12s,box-shadow .12s;
  white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.2);
}
.nav-rsvp:hover{transform:translateY(-2px);box-shadow:0 5px 0 #B83365,0 9px 20px rgba(200,50,120,.4);}
.nav-rsvp:active{transform:translateY(2px);box-shadow:0 1px 0 #B83365;}

/* Mobile hamburger */
.nav-burger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  padding:6px;border-radius:10px;border:none;background:transparent;
  -webkit-tap-highlight-color:transparent;
}
.nav-burger span{
  display:block;width:22px;height:2.5px;border-radius:2px;
  background:rgba(255,220,255,.9);
  transition:transform .3s,opacity .3s;
}
.nav-burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* Mobile dropdown */
.nav-mobile{
  display:none;position:fixed;top:60px;left:0;right:0;z-index:9989;
  background:rgba(30,0,60,.96);backdrop-filter:blur(20px);
  border-bottom:1.5px solid rgba(200,120,255,.3);
  padding:12px 16px 16px;
  flex-direction:column;gap:4px;
  box-shadow:0 8px 24px rgba(100,0,180,.3);
  transform:translateY(-10px);opacity:0;
  transition:transform .25s,opacity .25s;
  pointer-events:none;
}
.nav-mobile.open{transform:translateY(0);opacity:1;pointer-events:auto;display:flex;}
.nav-mobile .nav-link{font-size:.95rem;padding:12px 16px;color:rgba(255,220,255,.9);}
.nav-mobile .nav-rsvp{text-align:center;margin-top:6px;padding:12px;}

@media(max-width:600px){
  .nav-links,.nav-rsvp{display:none;}
  .nav-burger{display:flex;}
}

/* Push hero content down */
#app > section:first-of-type,
#hero{ padding-top: calc(60px + 20px) !important; }
/* ─── TITLE ─── */
.mis-title-wrap{text-align:center;position:relative;z-index:20;margin-bottom:4px;animation:titleUp 1s cubic-bezier(.34,1.56,.64,1) .3s both;}
.mis-title-top{font-family:'Fredoka One',cursive;font-size:clamp(2rem,8vw,3rem);line-height:1.05;
  background:linear-gradient(150deg,#FF85B3,#FF5C9D,#C26EBF);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
.mis-title-bot{font-family:'Fredoka One',cursive;font-size:clamp(2.4rem,10vw,3.8rem);line-height:1.05;
  background:linear-gradient(160deg,#FFF9A0,#FFE566,#FFB800,#FF8C00);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 18px rgba(255,200,50,.55));
  display:flex;align-items:center;justify-content:center;gap:8px;
  animation:goldPulse2 2.5s ease infinite;}
@keyframes goldPulse2{0%,100%{filter:drop-shadow(0 0 18px rgba(255,200,50,.55))}50%{filter:drop-shadow(0 0 30px rgba(255,200,50,.9))}}
.deco-icon{font-size:1.6rem;}
.mis-subtitle{font-family:'Nunito',sans-serif;font-weight:800;font-size:1rem;
  color:rgba(255,255,255,.9);text-align:center;text-shadow:0 2px 10px rgba(140,60,200,.5);margin-bottom:28px;}
.mis-subtitle strong{color:#FFE98A;}

/* ─── MOBILE CARD STACK ─── */
/* Row 1: two small cards side by side */
.cards-row1{display:flex;gap:12px;width:100%;max-width:min(440px,100%);margin:0 auto 14px;}
.cards-row1 .mco{flex:1;min-width:0;}
/* Row 2: two cards side by side */
.cards-row2{display:flex;gap:12px;width:100%;max-width:min(440px,100%);margin:0 auto;align-items:flex-start;}
.cards-row2 .mco{flex:1;min-width:0;}

/* ─── CARD OUTER (for overflow visible + icon protrusion) ─── */
.mco{position:relative;padding-top:48px;
  transform:translateY(0) scale(1);opacity:1;
  transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .5s;}
.mco.show{transform:translateY(0) scale(1);opacity:1;}
.mco:active .mci{transform:scale(.97);}

/* ─── CARD INNER ─── */
.mci{border-radius:22px;padding:20px 16px 20px;overflow:hidden;position:relative;
  transition:transform .2s,box-shadow .2s;}

.mco-pink .mci{background:linear-gradient(150deg,#FFF0F6,#FFE0EE,#FFD0E6);
  border:2.5px solid rgba(255,255,255,.9);
  box-shadow:0 8px 28px rgba(255,100,160,.22),0 2px 8px rgba(0,0,0,.06),inset 0 2px 0 rgba(255,255,255,.8);}
.mco-blue .mci{background:linear-gradient(150deg,#F0F6FF,#E0EEFF,#D0E4FF);
  border:2.5px solid rgba(255,255,255,.9);
  box-shadow:0 8px 28px rgba(80,150,255,.2),0 2px 8px rgba(0,0,0,.06),inset 0 2px 0 rgba(255,255,255,.8);}
.mco-gold .mci{background:linear-gradient(150deg,#FFFBEE,#FFF4D0,#FFEAAA);
  border:2.5px solid rgba(255,255,255,.9);
  box-shadow:0 8px 28px rgba(200,150,30,.24),0 2px 8px rgba(0,0,0,.06),inset 0 2px 0 rgba(255,255,255,.8);}
.mco-lilac .mci{background:linear-gradient(150deg,#FAF0FF,#F0E0FF,#E6D0FF);
  border:2.5px solid rgba(255,255,255,.9);
  box-shadow:0 8px 28px rgba(160,90,255,.2),0 2px 8px rgba(0,0,0,.06),inset 0 2px 0 rgba(255,255,255,.8);}

/* ─── ICON CIRCLE (floats above card top) ─── */
.ico-wrap{position:absolute;top:-38px;left:50%;transform:translateX(-50%);z-index:10;}
.ico{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:2rem;border:4px solid rgba(255,255,255,.95);
  box-shadow:0 6px 20px rgba(0,0,0,.16),inset 0 2px 0 rgba(255,255,255,.6);
  animation:iconBob2 2.8s ease-in-out infinite;}
@keyframes iconBob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ico-pink{background:linear-gradient(145deg,#FFE4F0,#FF9EC5,#FF6AA8);}
.ico-blue{background:linear-gradient(145deg,#DCF0FF,#88CEFF,#4AACF0);}
.ico-gold{background:linear-gradient(145deg,#FFFBCC,#FFE040,#FFAA00);
  box-shadow:0 6px 20px rgba(255,170,0,.45),0 0 28px rgba(255,210,30,.4),inset 0 2px 0 rgba(255,255,255,.65);}
.ico-lilac{background:linear-gradient(145deg,#F0E0FF,#C490FF,#9A50F0);}

/* gold pulse */
.gold-glow2{position:absolute;top:-28px;left:50%;transform:translateX(-50%);
  width:80px;height:80px;border-radius:50%;pointer-events:none;z-index:9;
  background:radial-gradient(circle,rgba(255,210,30,.75),rgba(255,140,0,.3),transparent);
  animation:ggP 2s ease infinite;}
@keyframes ggP{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.6);opacity:.9}}

/* ─── CARD TEXT ─── */
.card-lbl{font-family:'Nunito',sans-serif;font-weight:900;font-size:.82rem;
  line-height:1.3;margin-bottom:5px;text-align:center;letter-spacing:.2px;}
.clbl-pink{color:#E03878;}.clbl-blue{color:#2E90D0;}.clbl-gold{color:#A86800;}.clbl-lilac{color:#7030B8;}
.card-val{font-family:'Fredoka One',cursive;font-size:1.25rem;color:#1a1a2e;
  line-height:1.25;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.08);}

/* star decorations */
.sc{position:absolute;font-size:.8rem;animation:scAnim 2s ease-in-out infinite alternate;z-index:2;}
@keyframes scAnim{from{opacity:.2;transform:scale(.75)}to{opacity:.65;transform:scale(1.2)}}

/* paw bg */
.cpbg{position:absolute;inset:0;pointer-events:none;border-radius:22px;overflow:hidden;}
.cpbg span{position:absolute;font-size:1.8rem;opacity:.06;animation:pawBgSpin 9s linear infinite;}
@keyframes pawBgSpin{to{transform:rotate(360deg)}}

/* ─── CARD BUTTONS ─── */
.cbt{display:block;width:100%;font-family:'Fredoka One',cursive;font-size:.95rem;
  color:#fff;padding:13px 16px;border-radius:28px;text-align:center;
  border:3px solid rgba(255,255,255,.85);text-decoration:none;
  margin-top:14px;position:relative;overflow:hidden;
  transition:transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent;}
.cbt::after{content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  animation:shimmer 2.5s ease infinite;}
.cbt:active{transform:scale(.96);}
.cbt-pink{background:linear-gradient(135deg,#FF85B3,#FF4D94);
  box-shadow:0 5px 0 #BB2E6A,0 9px 22px rgba(255,80,150,.4),inset 0 1px 0 rgba(255,255,255,.4);}


/* Floating tap-spawned particles */
@keyframes heroFly{0%{transform:translate(0,0) scale(1) rotate(0);opacity:1}100%{transform:translate(var(--hx),var(--hy)) scale(0) rotate(var(--hr));opacity:0}}
.hero-particle{position:fixed;pointer-events:none;z-index:9999;font-size:1.4rem;animation:heroFly .9s ease-out forwards;}

/* Pop ring */
@keyframes popRing{0%{transform:translate(-50%,-50%) scale(0);opacity:.9}100%{transform:translate(-50%,-50%) scale(3.5);opacity:0}}
.pop-ring{position:fixed;pointer-events:none;z-index:9998;width:60px;height:60px;border-radius:50%;border:3px solid;animation:popRing .5s ease-out forwards;}

/* Balloon pop */
@keyframes balloonPop{0%{transform:scale(1)}30%{transform:scale(1.3)}60%{transform:scale(.1) rotate(20deg)}100%{transform:scale(0);opacity:0}}
.balloon-popping{animation:balloonPop .4s ease-out forwards!important;}

/* Skye dance */
@keyframes skyeDance{
  0%{transform:translateY(0) rotate(0) scale(1)}
  15%{transform:translateY(-18px) rotate(-8deg) scale(1.08)}
  35%{transform:translateY(-22px) rotate(8deg) scale(1.12)}
  55%{transform:translateY(-14px) rotate(-5deg) scale(1.06)}
  75%{transform:translateY(-8px) rotate(4deg) scale(1.04)}
  100%{transform:translateY(0) rotate(0) scale(1)}
}
#skye-scene.dancing{animation:skyeDance .8s cubic-bezier(.34,1.56,.64,1)!important;}

/* Sakura name sparkle */
.t-sakura{cursor:pointer;transition:transform .2s;}
.t-sakura:hover{transform:scale(1.08);}
@keyframes sakuraPop{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-3deg)}80%{transform:scale(1.05) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
.t-sakura.popping{animation:sakuraPop .5s cubic-bezier(.34,1.56,.64,1)!important;}

/* Floating hearts after character tap */
@keyframes heartFloat{0%{transform:translateY(0) scale(0) rotate(-15deg);opacity:1}50%{transform:translateY(-60px) scale(1.2) rotate(10deg);opacity:1}100%{transform:translateY(-120px) scale(.5) rotate(-5deg);opacity:0}}
.hero-heart{position:fixed;pointer-events:none;z-index:9999;font-size:1.6rem;animation:heartFloat 1.2s ease-out forwards;}

/* Tap ripple */
@keyframes tapRipple{0%{transform:translate(-50%,-50%) scale(0);opacity:.7}100%{transform:translate(-50%,-50%) scale(4);opacity:0}}
.tap-ripple{position:fixed;pointer-events:none;z-index:9997;width:40px;height:40px;border-radius:50%;background:rgba(255,180,230,.4);animation:tapRipple .6s ease-out forwards;}

/* Title rainbow pulse */
@keyframes rainbowPulse{0%{filter:hue-rotate(0deg) drop-shadow(0 0 8px rgba(255,150,200,.6))}50%{filter:hue-rotate(40deg) drop-shadow(0 0 20px rgba(255,100,200,.9))}100%{filter:hue-rotate(0deg) drop-shadow(0 0 8px rgba(255,150,200,.6))}}
.t-sakura.rainbow{animation:rainbowPulse .8s ease!important;}

/* Stars twinkling on hero */
.hero-tap-star{position:fixed;pointer-events:none;z-index:9999;font-size:1.2rem;
  animation:heroFly 1s ease-out forwards;}

/* Shooting star */
@keyframes shootStar{0%{left:-5%;top:var(--sy);opacity:0;transform:rotate(var(--sa)) scaleX(1)}10%{opacity:1}90%{opacity:.8}100%{left:110%;top:calc(var(--sy) + var(--sd));opacity:0;transform:rotate(var(--sa)) scaleX(4)}}
.shoot-star{position:fixed;pointer-events:none;z-index:9996;font-size:1rem;animation:shootStar 1.4s ease-in-out forwards;}
#parade{
  position:relative;z-index:10;padding:60px 16px 70px;overflow:hidden;
  background:linear-gradient(180deg,#1a0838 0%,#120526 50%,#0a0320 100%);
}
/* deep purple star field glow */
#parade::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 45%,rgba(160,80,255,.18),transparent 70%),
             radial-gradient(ellipse 50% 40% at 30% 60%,rgba(255,100,200,.08),transparent 60%),
             radial-gradient(ellipse 50% 40% at 70% 30%,rgba(100,150,255,.08),transparent 60%);}
/* floor glow under Zuma */
#parade::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:60%;height:120px;
  background:radial-gradient(ellipse 100% 100% at 50% 100%,rgba(255,120,50,.18),rgba(200,80,255,.08),transparent);
  pointer-events:none;}

.par-h{font-family:'Fredoka One',cursive;font-size:clamp(1.8rem,6.5vw,2.8rem);
  text-align:center;margin-bottom:6px;color:#fff;
  text-shadow:0 0 30px rgba(200,130,255,.6),0 3px 12px rgba(0,0,0,.4);}
.par-h-dog{display:inline-block;font-size:1em;vertical-align:middle;margin-right:8px;
  filter:drop-shadow(0 0 8px rgba(255,180,255,.6));animation:dogWig 2s ease-in-out infinite;}
@keyframes dogWig{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.par-sub{font-family:'Nunito',sans-serif;font-weight:700;font-size:.95rem;
  color:rgba(255,255,255,.6);text-align:center;margin-bottom:36px;}

/* ── CHARACTER GRID ── */
.chars-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 10px;max-width:420px;margin:0 auto;}
.chars-row2{display:flex;justify-content:center;margin-top:16px;}

/* ── CHIBI CHARACTER CARD ── */
.cch{
  display:flex;flex-direction:column;align-items:center;gap:0;
  transform:scale(0) translateY(30px);opacity:0;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  width:88px;
}
.cch.show{transform:scale(1) translateY(0);opacity:1;}

.cch-body{
  width:88px;position:relative;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.5)) drop-shadow(0 2px 6px rgba(0,0,0,.3));
  animation:chibiBob ease-in-out infinite;
  transition:filter .25s,transform .25s;
}
@keyframes chibiBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.cch:active .cch-body{transform:scale(.9);}
/* glow on hover/active */
.cch:hover .cch-body,.cch:active .cch-body{
  filter:drop-shadow(0 0 18px var(--glow,rgba(255,200,100,.7))) drop-shadow(0 8px 20px rgba(0,0,0,.5));
}

/* name badge pill */
.cch-badge{
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:7px 14px;border-radius:30px;
  font-family:'Fredoka One',cursive;font-size:.88rem;color:#fff;
  border:2.5px solid rgba(255,255,255,.35);
  box-shadow:0 4px 0 var(--shadow,#333),0 7px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.3);
  position:relative;overflow:hidden;margin-top:6px;white-space:nowrap;
}
.cch-badge::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  animation:shimmer 2.8s ease infinite;}
#rsvp{
  position:relative;z-index:10;
  padding:60px 16px 0;
  background:linear-gradient(180deg,#E8D8FF 0%,#F0E0FF 40%,#F8EEFF 100%);
  overflow:hidden;
}
#rsvp::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 50% 30%,rgba(255,255,255,.5),transparent);}

/* floating confetti pieces */
.rsvp-confetti{position:absolute;pointer-events:none;animation:rConfFall linear infinite;}
@keyframes rConfFall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

.rsvp-card{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(20px);
  border:3px solid rgba(255,255,255,.95);
  border-radius:32px;
  padding:32px 24px 0;
  max-width:400px;margin:0 auto;
  text-align:center;
  box-shadow:0 16px 60px rgba(160,100,220,.16),0 4px 14px rgba(0,0,0,.05);
  transform:translateY(50px);opacity:0;
  transition:transform .75s cubic-bezier(.34,1.56,.64,1),opacity .5s;
  overflow:hidden;
  position:relative;
}
.rsvp-card.show{transform:translateY(0);opacity:1;}

/* sparkles on card */
.rsvp-spark{position:absolute;font-size:.8rem;animation:rSpark 2s ease-in-out infinite alternate;}
@keyframes rSpark{from{opacity:.2;transform:scale(.7)}to{opacity:.8;transform:scale(1.3)}}

.rsvp-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Fredoka One',cursive;font-size:.82rem;letter-spacing:2.5px;text-transform:uppercase;
  background:linear-gradient(135deg,#C49DFF,#A066FF);
  color:#fff;padding:10px 22px;border-radius:50px;
  margin-bottom:20px;
  box-shadow:0 5px 18px rgba(160,100,255,.4),0 2px 0 rgba(255,255,255,.3) inset;
}

.rsvp-title{
  font-family:'Fredoka One',cursive;
  font-size:clamp(2rem,8vw,2.8rem);
  line-height:1.1;
  background:linear-gradient(145deg,#A044FF,#7B1FE0);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 2px 0 rgba(180,120,255,.3));
  margin-bottom:16px;
}

.rsvp-msg{
  font-family:'Nunito',sans-serif;font-weight:700;
  font-size:.97rem;color:#7755AA;line-height:1.65;
  margin-bottom:26px;
}
.rsvp-msg strong{color:#A044FF;font-weight:900;}

/* Purple 3D button */
.rsvp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Fredoka One',cursive;font-size:1.35rem;color:#fff;
  background:linear-gradient(160deg,#A855F7,#7C3AED);
  padding:18px 36px;border-radius:50px;
  border:3px solid rgba(255,255,255,.4);
  box-shadow:0 7px 0 #5B21B6,0 12px 30px rgba(120,60,255,.45),inset 0 2px 0 rgba(255,255,255,.35);
  text-decoration:none;cursor:pointer;
  position:relative;overflow:hidden;
  transition:transform .12s,box-shadow .12s;
  width:min(320px,88%);
  animation:rsvpBounce 2.8s ease infinite 2s;
}
.rsvp-btn::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  animation:shimmer 2.5s ease infinite;}
.rsvp-btn:hover{transform:translateY(-4px);box-shadow:0 11px 0 #5B21B6,0 18px 40px rgba(120,60,255,.55),inset 0 2px 0 rgba(255,255,255,.35);}
.rsvp-btn:active{transform:translateY(5px);box-shadow:0 2px 0 #5B21B6,0 5px 15px rgba(120,60,255,.3),inset 0 2px 0 rgba(255,255,255,.35);}
@keyframes rsvpBounce{0%,65%,100%{transform:translateY(0)}80%{transform:translateY(-8px)}90%{transform:translateY(-4px)}}

/* scene at bottom of card: chibi + cake + gifts + balloons on cloud */
.rsvp-scene{
  position:relative;
  height:145px;
  margin-top:22px;
  overflow:visible;
}
/* cloud base — BEHIND characters */
.rsvp-cloud{
  position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  width:115%;height:75px;
  background:radial-gradient(ellipse 60% 80% at 20% 60%,rgba(255,255,255,.98),rgba(240,240,255,.85));
  border-radius:50% 50% 0 0 / 70% 70% 0 0;
  box-shadow:0 -8px 30px rgba(200,180,255,.3);
  z-index:1;
}
.rsvp-cloud::before{content:'';position:absolute;top:-26px;left:10%;
  width:38%;height:55px;border-radius:50%;
  background:rgba(255,255,255,.95);}
.rsvp-cloud::after{content:'';position:absolute;top:-34px;left:35%;
  width:50%;height:65px;border-radius:50%;
  background:rgba(255,255,255,.95);}

/* ALL items ABOVE the cloud */
.rsvp-chibi{position:absolute;bottom:45px;left:4%;width:100px;z-index:3;
  animation:rchibiBob 3s ease-in-out infinite;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.2));}
@keyframes rchibiBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}

.rsvp-cake{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);font-size:3rem;z-index:3;
  animation:cakeFloat 2.5s ease-in-out infinite .4s;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));}
@keyframes cakeFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}
.rsvp-gift{position:absolute;bottom:52px;right:20%;font-size:2.5rem;z-index:3;
  animation:giftFloat 2.8s ease-in-out infinite .7s;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));}
@keyframes giftFloat{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-7px) rotate(-3deg)}}
.rsvp-balloons{position:absolute;bottom:55px;right:3%;font-size:2.2rem;z-index:3;
  animation:ballFloat 2.2s ease-in-out infinite 1s;line-height:1.1;}
@keyframes ballFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
#mem-game{
  position:relative;z-index:10;
  padding:60px 16px 70px;
  background:linear-gradient(180deg,#2a1060 0%,#1a0848 40%,#0e0530 100%);
  overflow:hidden;text-align:center;
}
#mem-game::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(180,100,255,.18),transparent),
             radial-gradient(ellipse 50% 40% at 20% 70%,rgba(255,100,180,.10),transparent),
             radial-gradient(ellipse 50% 40% at 80% 60%,rgba(100,160,255,.10),transparent);}

/* floating bg stars */
.mg-star{position:absolute;pointer-events:none;animation:mgStar ease-in-out infinite alternate;}
@keyframes mgStar{from{opacity:.08;transform:scale(.6)}to{opacity:.5;transform:scale(1.2)}}

/* header */
.mg-title{font-family:'Fredoka One',cursive;font-size:clamp(2rem,8vw,2.8rem);
  background:linear-gradient(135deg,#FFE566,#FFB3E0,#C084FC);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 2px 12px rgba(255,180,255,.4));
  margin-bottom:6px;position:relative;z-index:2;}
.mg-sub{font-family:'Nunito',sans-serif;font-weight:800;font-size:.9rem;
  color:rgba(255,220,255,.6);margin-bottom:22px;position:relative;z-index:2;letter-spacing:.5px;}

/* stats bar */
.mg-stats{display:flex;justify-content:center;gap:10px;margin-bottom:24px;position:relative;z-index:2;flex-wrap:wrap;}
.mg-stat{font-family:'Fredoka One',cursive;font-size:.95rem;
  background:rgba(255,255,255,.08);backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.15);
  padding:8px 18px;border-radius:30px;color:#fff;
  display:flex;align-items:center;gap:6px;white-space:nowrap;}
.mg-stat span{color:#FFE566;font-size:1.1rem;}

/* board */
.mg-board{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  max-width:min(420px,92vw);
  margin:0 auto 26px;
  position:relative;z-index:2;
}

/* card */
.mg-card{
  aspect-ratio:1;
  cursor:pointer;
  perspective:600px;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
.mg-card-inner{
  width:100%;height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  border-radius:16px;
}
.mg-card.flipped .mg-card-inner{ transform:rotateY(180deg); }
.mg-card.matched .mg-card-inner{ transform:rotateY(180deg); }

/* card faces */
.mg-front,.mg-back{
  position:absolute;inset:0;border-radius:16px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

/* BACK — paw pattern */
.mg-back{
  background:linear-gradient(145deg,#9B4DCA,#7B2FBE,#6A1FA8);
  border:2px solid rgba(255,255,255,.2);
  box-shadow:0 4px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15);
}
.mg-back::before{content:'🐾';font-size:clamp(1.6rem,5vw,2rem);
  opacity:.35;filter:grayscale(1) brightness(2);}
.mg-back::after{content:'';position:absolute;inset:0;border-radius:16px;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.15),transparent 60%);}

/* FRONT — character */
.mg-front{
  background:linear-gradient(145deg,#2a0a5e,#1a0838);
  border:2px solid rgba(255,255,255,.18);
  transform:rotateY(180deg);
  flex-direction:column;gap:2px;
  box-shadow:inset 0 0 30px rgba(200,100,255,.1);
  padding:6px 4px 4px;
}
.mg-chibi{width:72%;max-width:72px;flex-shrink:0;}
.mg-chibi svg{width:100%;height:auto;display:block;}
.mg-front .mg-emoji{font-size:clamp(2rem,7vw,2.6rem);line-height:1;}
.mg-front .mg-name{font-family:'Fredoka One',cursive;font-size:clamp(.58rem,2vw,.72rem);
  color:rgba(255,230,255,.85);letter-spacing:.5px;margin-top:2px;}

/* matched glow */
.mg-card.matched .mg-front{
  background:linear-gradient(145deg,#3d0e7a,#280860);
  border-color:rgba(255,220,100,.5);
  box-shadow:0 0 20px rgba(255,200,50,.35),inset 0 0 20px rgba(255,200,80,.1);
  animation:mgMatchPulse .5s ease;
}
@keyframes mgMatchPulse{
  0%{transform:rotateY(180deg) scale(1)}
  40%{transform:rotateY(180deg) scale(1.12)}
  100%{transform:rotateY(180deg) scale(1)}
}

/* wrong shake */
.mg-card.wrong .mg-card-inner{
  animation:mgWrong .4s ease;
}
@keyframes mgWrong{
  0%,100%{transform:rotateY(180deg) translateX(0)}
  25%{transform:rotateY(180deg) translateX(-6px)}
  75%{transform:rotateY(180deg) translateX(6px)}
}

/* hover lift */
.mg-card:not(.flipped):not(.matched):hover .mg-card-inner{
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 8px 24px rgba(200,100,255,.3);
}

/* new game button */
.mg-btn{
  font-family:'Fredoka One',cursive;font-size:1.15rem;
  background:linear-gradient(135deg,#A855F7,#7C3AED);
  color:#fff;border:none;cursor:pointer;
  padding:14px 36px;border-radius:40px;
  box-shadow:0 5px 0 #5B21B6,0 10px 25px rgba(120,50,220,.4);
  border:2px solid rgba(255,255,255,.3);
  transition:transform .15s,box-shadow .15s;
  position:relative;z-index:2;
  -webkit-tap-highlight-color:transparent;
}
.mg-btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 #5B21B6,0 14px 30px rgba(120,50,220,.4);}
.mg-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #5B21B6,0 6px 15px rgba(120,50,220,.4);}

/* victory overlay */
.mg-win{
  position:absolute;inset:0;z-index:20;
  background:rgba(10,3,30,.92);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  opacity:0;pointer-events:none;
  transition:opacity .5s;
}
.mg-win.show{opacity:1;pointer-events:auto;}
.mg-win-emoji{font-size:4rem;animation:winBounce .8s cubic-bezier(.34,1.56,.64,1) infinite alternate;}
@keyframes winBounce{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-16px) rotate(5deg)}}
.mg-win-title{font-family:'Fredoka One',cursive;font-size:clamp(1.8rem,7vw,2.6rem);
  background:linear-gradient(135deg,#FFE566,#FFB3E0);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-align:center;line-height:1.1;}
.mg-win-score{font-family:'Nunito',sans-serif;font-weight:900;font-size:1.1rem;
  color:rgba(255,220,255,.8);text-align:center;}
.mg-win-score strong{color:#FFE566;font-size:1.4rem;}
.mg-win-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
#finale{
  position:relative;z-index:10;
  padding:50px 20px 60px;
  background:linear-gradient(180deg,#E2CCFF 0%,#EDD8FF 60%,#F5E8FF 100%);
  text-align:center;
  overflow:hidden;
}
.fin-title{
  font-family:'Fredoka One',cursive;
  font-size:clamp(2.1rem,9.5vw,3.2rem);
  line-height:1.15;
  background:linear-gradient(160deg,#7C3AED,#A855F7,#C084FC);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 3px 0 rgba(200,160,255,.5));
  position:relative;z-index:2;
  margin:0;
}
.fin-sig{
  font-family:'Fredoka One',cursive;font-size:.72rem;
  letter-spacing:3px;color:#C4A8E8;text-transform:uppercase;
  margin-top:24px;position:relative;z-index:2;
}