/* ===================================================================
   mochi · virtual pet — stylesheet
   soft pink pastel · mobile-first · cute & rounded
   =================================================================== */

:root{
  --pink-1:#fff2f8;
  --pink-2:#ffe1ee;
  --pink-3:#ffc9e0;
  --pink-deep:#ff7ab0;
  --pink-press:#f25f9c;
  --lilac:#d9c2ff;
  --lilac-deep:#b18bff;
  --mint:#ffd7c2;
  --ink:#7a4f63;
  --ink-soft:#a87f92;
  --white:#fffafc;
  --card-shadow:0 14px 30px -12px rgba(255,122,176,.45);
  --soft-shadow:0 6px 16px -6px rgba(214,120,165,.4);
  --radius:26px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{height:100%;}

body{
  font-family:'Quicksand',-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:linear-gradient(165deg,#ffe6f2 0%,#ffd9ec 38%,#f0e2ff 100%);
  min-height:100dvh;
  overflow-x:hidden;
  position:relative;
}

/* ---------- floating background decoration ---------- */
.bg-decor{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.blob{position:absolute;border-radius:50%;filter:blur(36px);opacity:.55;}
.blob.b1{width:240px;height:240px;background:#ffb8da;top:-70px;left:-60px;}
.blob.b2{width:280px;height:280px;background:#d9c2ff;bottom:-110px;right:-80px;}
.blob.b3{width:180px;height:180px;background:#ffd0c2;top:42%;left:-70px;}
.float{position:absolute;font-size:1.5rem;opacity:.7;animation:drift 9s ease-in-out infinite;}
.float.f1{top:12%;right:10%;animation-delay:0s;}
.float.f2{top:28%;left:8%;animation-delay:1.4s;}
.float.f3{bottom:20%;right:14%;animation-delay:2.6s;}
.float.f4{top:60%;left:12%;animation-delay:3.5s;font-size:1.1rem;}
.float.f5{bottom:34%;left:46%;animation-delay:1.9s;font-size:1.2rem;}
@keyframes drift{
  0%,100%{transform:translateY(0) rotate(-6deg);}
  50%{transform:translateY(-18px) rotate(8deg);}
}

/* ---------- screen frame ---------- */
.screen{
  position:relative;z-index:1;
  width:100%;max-width:460px;margin:0 auto;
  min-height:100dvh;
  padding:22px 18px 30px;
  display:flex;flex-direction:column;
}
.hidden{display:none !important;}

/* =================================================================
   SELECTION SCREEN
   ================================================================= */
.select-inner{
  margin:auto 0;
  display:flex;flex-direction:column;gap:22px;
  animation:rise .6s ease both;
}
.brand{text-align:center;}
.brand-mark{font-size:2.2rem;line-height:1;}
.brand-name{
  font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:2.6rem;color:var(--pink-deep);
  letter-spacing:.5px;
}
.brand-name.small{font-size:1.4rem;}
.brand-tag{color:var(--ink-soft);font-size:.95rem;margin-top:2px;}

.pet-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.pet-card{
  background:var(--white);
  border:2.5px solid transparent;
  border-radius:22px;
  padding:14px 8px 11px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;
  box-shadow:var(--soft-shadow);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.pet-card:active{transform:scale(.94);}
.pet-card .pc-emoji{font-size:2.6rem;line-height:1;}
.pet-card .pc-label{font-size:.85rem;font-weight:600;color:var(--ink-soft);}
.pet-card.selected{
  border-color:var(--pink-deep);
  box-shadow:0 10px 22px -8px rgba(255,122,176,.7);
  transform:translateY(-3px);
}
.pet-card.selected .pc-emoji{animation:pop .4s ease;}
.pet-card.selected .pc-label{color:var(--pink-deep);}

.name-field{display:flex;flex-direction:column;gap:7px;}
.name-field label{
  font-size:.9rem;font-weight:600;color:var(--ink-soft);
  padding-left:6px;
}
.name-field input{
  font-family:'Quicksand',sans-serif;font-weight:600;
  font-size:1rem;color:var(--ink);
  background:var(--white);
  border:2.5px solid #ffd9e8;
  border-radius:18px;
  padding:13px 16px;
  outline:none;
  transition:border-color .18s ease;
}
.name-field input:focus{border-color:var(--pink-deep);}
.name-field input::placeholder{color:#d9b9c8;}

/* =================================================================
   BUTTONS
   ================================================================= */
.btn-primary{
  font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:1.1rem;color:#fff;
  background:linear-gradient(180deg,#ff95c4,#ff6faa);
  border:none;border-radius:20px;
  padding:15px;
  cursor:pointer;
  box-shadow:0 12px 22px -8px rgba(255,111,170,.8);
  transition:transform .15s ease,opacity .2s ease,filter .2s ease;
}
.btn-primary:active{transform:scale(.96);}
.btn-primary:disabled{
  filter:grayscale(.5);opacity:.5;cursor:not-allowed;
  box-shadow:none;
}

.btn-soft{
  font-family:'Fredoka',sans-serif;font-weight:500;
  font-size:1rem;color:var(--pink-deep);
  background:var(--pink-2);
  border:none;border-radius:16px;
  padding:13px;width:100%;
  cursor:pointer;
  transition:transform .15s ease;
}
.btn-soft:active{transform:scale(.96);}
.btn-soft.danger{color:#fff;background:linear-gradient(180deg,#ff8aa8,#ff6f8e);}

/* =================================================================
   MAIN SCREEN
   ================================================================= */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px;
}
.streak-chip{
  background:var(--white);
  border-radius:999px;
  padding:7px 13px;
  font-size:.82rem;font-weight:700;color:var(--pink-deep);
  box-shadow:var(--soft-shadow);
}
.icon-btn{
  width:38px;height:38px;
  display:grid;place-items:center;
  background:var(--white);
  border:none;border-radius:50%;
  font-size:1.1rem;color:var(--pink-deep);
  cursor:pointer;
  box-shadow:var(--soft-shadow);
  transition:transform .15s ease;
}
.icon-btn:active{transform:scale(.9);}
.top-actions{display:flex;gap:8px;}

/* ---------- pet stage ---------- */
.pet-stage{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  padding:14px 0 6px;
  animation:rise .55s ease both;
}
.stage-badge{
  margin-top:9px;
  background:linear-gradient(180deg,#fff,#ffe9f3);
  border:2px solid #ffd0e4;
  border-radius:999px;
  padding:5px 15px;
  font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:.82rem;color:var(--pink-deep);
  box-shadow:var(--soft-shadow);
}
.stage-badge.bump{animation:pop .55s ease;}

/* evolution sparkle burst */
.spark{
  position:absolute;
  font-size:1.1rem;pointer-events:none;z-index:5;
  animation:sparkFly .95s ease-out forwards;
}
@keyframes sparkFly{
  0%  {opacity:0;transform:translate(0,0) scale(.3);}
  25% {opacity:1;}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.15);}
}
.speech-bubble{
  position:relative;
  max-width:88%;
  background:var(--white);
  border-radius:20px;
  padding:11px 16px;
  font-size:.92rem;font-weight:600;text-align:center;
  color:var(--ink);
  box-shadow:var(--soft-shadow);
  margin-bottom:10px;
  animation:pop .4s ease;
}
.speech-bubble::after{
  content:"";position:absolute;left:50%;bottom:-9px;
  transform:translateX(-50%);
  border:9px solid transparent;
  border-top-color:var(--white);border-bottom:0;
}

.pet-wrap{
  position:relative;
  width:190px;height:190px;
  display:grid;place-items:center;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.pet-shadow{
  position:absolute;bottom:14px;
  width:120px;height:22px;
  background:rgba(214,120,165,.35);
  border-radius:50%;filter:blur(7px);
  animation:shadowPulse 2.6s ease-in-out infinite;
}
.pet-emoji{
  font-size:7rem;line-height:1;
  filter:drop-shadow(0 8px 10px rgba(255,122,176,.4));
  animation:idleBounce 2.6s ease-in-out infinite;
  cursor:pointer;
  user-select:none;
}
.mood-face{
  position:absolute;top:18px;right:30px;
  font-size:1.7rem;
  animation:pop .4s ease;
}

/* expression animations */
.pet-emoji.exp-happy   {animation:idleBounce 2.2s ease-in-out infinite;}
.pet-emoji.exp-excited {animation:excitedBounce .5s ease-in-out infinite;}
.pet-emoji.exp-sad     {animation:sadDroop 3.4s ease-in-out infinite;}
.pet-emoji.exp-sleepy  {animation:sleepySway 3.8s ease-in-out infinite;}
.pet-emoji.exp-angry   {animation:angryShake .35s ease-in-out infinite;}
.pet-emoji.react       {animation:reactJump .5s ease;}
.pet-emoji.react-big   {animation:reactJumpBig .55s ease;}
.pet-emoji.glow        {filter:drop-shadow(0 0 14px rgba(255,180,220,.95)) drop-shadow(0 8px 10px rgba(255,122,176,.4));}

/* high-quality pet depth: soft glow halo + slow float */
.pet-wrap::before{
  content:"";position:absolute;
  width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,190,224,.55) 0%,rgba(255,190,224,0) 70%);
  filter:blur(6px);
  z-index:-1;
  animation:haloPulse 3.4s ease-in-out infinite;
}
.pet-stage{animation:rise .55s ease both,floatSoft 5.5s ease-in-out infinite;}
@keyframes floatSoft{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes haloPulse{0%,100%{opacity:.55;transform:scale(1);}50%{opacity:.8;transform:scale(1.12);}}

/* reward glow flash */
.pet-emoji.flash{animation:glowFlash .7s ease;}
@keyframes glowFlash{
  0%,100%{filter:drop-shadow(0 8px 10px rgba(255,122,176,.4));}
  40%{filter:drop-shadow(0 0 26px rgba(255,210,235,1)) drop-shadow(0 0 40px rgba(255,160,210,.9));}
}

.pet-name{
  font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:1.7rem;color:var(--pink-deep);
  margin-top:4px;
}
.pet-day{color:var(--ink-soft);font-size:.85rem;font-weight:600;}

/* ---------- cards ---------- */
.card{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
}
.stats-card{
  padding:16px 18px;
  display:flex;flex-direction:column;gap:13px;
  margin-top:8px;
  animation:rise .6s ease both;
}
.stat-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:5px;
}
.stat-label{font-size:.86rem;font-weight:700;color:var(--ink);}
.stat-val{font-size:.8rem;font-weight:700;color:var(--ink-soft);}
.bar{
  height:14px;
  background:#ffe7f1;
  border-radius:999px;
  overflow:hidden;
}
.bar-fill{
  height:100%;width:70%;
  border-radius:999px;
  transition:width .5s cubic-bezier(.34,1.2,.64,1);
}
.bar-fill.hunger{background:linear-gradient(90deg,#ffb4d4,#ff86b8);}
.bar-fill.mood  {background:linear-gradient(90deg,#d6bcff,#b591ff);}
.bar-fill.energy{background:linear-gradient(90deg,#ffd0b0,#ffab7d);}
.bar-fill.low{filter:saturate(.5) brightness(1.05);}

/* ---------- action buttons ---------- */
.actions{
  display:grid;grid-template-columns:repeat(3,1fr);gap:11px;
  margin-top:14px;
  animation:rise .65s ease both;
}
.action-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:14px 6px;
  border:none;border-radius:20px;
  background:var(--white);
  cursor:pointer;
  box-shadow:var(--card-shadow);
  transition:transform .14s ease,box-shadow .2s ease;
}
.action-btn:active{transform:scale(.93);}
.action-btn:disabled{filter:grayscale(.55);opacity:.55;cursor:not-allowed;}
.action-emoji{font-size:1.8rem;line-height:1;}
.action-text{
  font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:.9rem;color:var(--ink);
}
.action-btn.feed {background:linear-gradient(180deg,#fff,#ffe6f0);}
.action-btn.play {background:linear-gradient(180deg,#fff,#f1e7ff);}
.action-btn.sleep{background:linear-gradient(180deg,#fff,#ffeede);}

/* ---------- secret code ---------- */
.code-card{
  margin-top:14px;
  padding:14px 16px 13px;
  display:flex;flex-direction:column;gap:9px;
  animation:rise .68s ease both;
}
.code-title{
  font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:.95rem;color:var(--pink-deep);
}
.code-input-row{display:flex;gap:8px;align-items:center;}
.code-input-row input{
  flex:1;
  font-family:'Quicksand',sans-serif;font-weight:700;
  font-size:.92rem;color:var(--ink);
  letter-spacing:1px;text-transform:uppercase;
  background:#fff;
  border:2.5px solid #ffd9e8;
  border-radius:15px;
  padding:11px 14px;
  outline:none;
  transition:border-color .18s ease;
}
.code-input-row input:focus{border-color:var(--pink-deep);}
.code-input-row input::placeholder{
  letter-spacing:.3px;text-transform:none;color:#d9b9c8;font-weight:600;
}
.code-redeem{
  flex-shrink:0;
  font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:.9rem;color:#fff;
  background:linear-gradient(180deg,#c9a4ff,#a87dff);
  border:none;border-radius:15px;
  padding:11px 16px;
  cursor:pointer;
  box-shadow:0 8px 16px -7px rgba(168,125,255,.8);
  transition:transform .14s ease;
}
.code-redeem:active{transform:scale(.93);}
.code-hint{
  font-size:.78rem;font-weight:600;
  color:var(--ink-soft);
  padding-left:2px;
  transition:color .2s ease;
}
.code-hint.ok  {color:#3fb37f;}
.code-hint.err {color:#e8729a;}

/* ---------- chat ---------- */
.chat-card{
  margin-top:14px;
  padding:14px 14px 12px;
  display:flex;flex-direction:column;
  animation:rise .7s ease both;
}
.chat-title{
  font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:.95rem;color:var(--pink-deep);
  padding:0 4px 9px;
}
.chat-log{
  display:flex;flex-direction:column;gap:8px;
  height:190px;overflow-y:auto;
  padding:4px 4px 6px;
  scroll-behavior:smooth;
}
.chat-log::-webkit-scrollbar{width:5px;}
.chat-log::-webkit-scrollbar-thumb{background:#ffcfe3;border-radius:999px;}
.chat-msg{
  max-width:80%;
  padding:9px 13px;
  font-size:.88rem;font-weight:500;line-height:1.35;
  border-radius:16px;
  animation:bubbleIn .3s ease both;
  word-wrap:break-word;
}
.chat-msg.pet{
  align-self:flex-start;
  background:var(--pink-2);color:var(--ink);
  border-bottom-left-radius:5px;
}
.chat-msg.user{
  align-self:flex-end;
  background:linear-gradient(180deg,#ff95c4,#ff79b3);
  color:#fff;
  border-bottom-right-radius:5px;
}
.chat-msg.typing{
  display:flex;gap:4px;padding:12px 14px;
}
.chat-msg.typing span{
  width:7px;height:7px;border-radius:50%;
  background:var(--pink-deep);opacity:.6;
  animation:typing 1.1s ease-in-out infinite;
}
.chat-msg.typing span:nth-child(2){animation-delay:.18s;}
.chat-msg.typing span:nth-child(3){animation-delay:.36s;}

.chat-input-row{
  display:flex;gap:8px;align-items:center;
  margin-top:8px;
}
.chat-input-row input{
  flex:1;
  font-family:'Quicksand',sans-serif;font-weight:600;
  font-size:.92rem;color:var(--ink);
  background:#fff;
  border:2.5px solid #ffd9e8;
  border-radius:16px;
  padding:11px 14px;
  outline:none;
  transition:border-color .18s ease;
}
.chat-input-row input:focus{border-color:var(--pink-deep);}
.chat-input-row input::placeholder{color:#d9b9c8;}
.chat-send{
  width:46px;height:46px;flex-shrink:0;
  display:grid;place-items:center;
  font-size:1.2rem;
  background:linear-gradient(180deg,#ff95c4,#ff6faa);
  border:none;border-radius:15px;
  cursor:pointer;
  box-shadow:0 8px 16px -7px rgba(255,111,170,.8);
  transition:transform .14s ease;
}
.chat-send:active{transform:scale(.9);}

.foot{
  text-align:center;font-size:.78rem;color:var(--ink-soft);
  margin-top:auto;padding-top:20px;
}

/* =================================================================
   MENU SHEET + TOAST
   ================================================================= */
.popup-overlay{
  position:fixed;inset:0;z-index:50;
  background:rgba(122,79,99,.32);
  backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fade .2s ease;
}
.popup-overlay.center{align-items:center;padding:20px;}

/* offline messages modal */
.modal-card{
  width:100%;max-width:330px;
  background:var(--pink-1);
  border-radius:26px;
  padding:22px 20px 20px;
  text-align:center;
  display:flex;flex-direction:column;gap:12px;
  box-shadow:0 20px 40px -12px rgba(255,122,176,.6);
  animation:popCard .35s cubic-bezier(.34,1.4,.64,1);
}
.modal-emoji{font-size:2.6rem;line-height:1;}
.modal-title{
  font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:1.25rem;color:var(--pink-deep);
}
.offline-log{display:flex;flex-direction:column;gap:8px;text-align:left;}
.offline-entry{
  background:#fff;border-radius:14px;
  padding:9px 13px;
  box-shadow:var(--soft-shadow);
  animation:bubbleIn .4s ease both;
}
.offline-entry .oe-time{
  display:block;
  font-size:.7rem;font-weight:700;color:var(--ink-soft);
  margin-bottom:1px;
}
.offline-entry .oe-text{font-size:.88rem;font-weight:600;color:var(--ink);}
.offline-entry.now{background:linear-gradient(180deg,#ffe1ee,#ffd0e4);}
.offline-entry.now .oe-text{color:var(--pink-deep);}
@keyframes popCard{from{opacity:0;transform:scale(.8);}to{opacity:1;transform:scale(1);}}
.sheet{
  width:100%;max-width:460px;
  background:var(--pink-1);
  border-radius:28px 28px 0 0;
  padding:14px 22px 28px;
  display:flex;flex-direction:column;gap:11px;
  animation:slideUp .3s cubic-bezier(.34,1.3,.64,1);
}
.sheet-handle{
  width:44px;height:5px;border-radius:999px;
  background:#ffc9e0;margin:0 auto 6px;
}
.sheet-title{
  font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:1.3rem;color:var(--pink-deep);text-align:center;
}
.sheet-text{
  text-align:center;color:var(--ink-soft);
  font-size:.9rem;margin-bottom:4px;
}

.toast{
  position:fixed;left:50%;bottom:30px;z-index:60;
  transform:translateX(-50%);
  background:var(--ink);color:#fff;
  font-weight:600;font-size:.88rem;
  padding:11px 20px;border-radius:999px;
  box-shadow:0 10px 24px -8px rgba(122,79,99,.6);
  animation:toastIn .3s ease;
}

/* =================================================================
   ANIMATIONS
   ================================================================= */
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px);}to{opacity:1;transform:translate(-50%,0);}}
@keyframes pop{0%{transform:scale(.4);}70%{transform:scale(1.15);}100%{transform:scale(1);}}
@keyframes idleBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-13px);}}
@keyframes excitedBounce{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-20px) rotate(4deg);}}
@keyframes sadDroop{0%,100%{transform:translateY(4px) rotate(-3deg);}50%{transform:translateY(8px) rotate(3deg);}}
@keyframes sleepySway{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(6deg);}}
@keyframes angryShake{0%,100%{transform:translateX(-4px) rotate(-2deg);}50%{transform:translateX(4px) rotate(2deg);}}
@keyframes reactJump{0%{transform:translateY(0) scale(1);}40%{transform:translateY(-28px) scale(1.12);}100%{transform:translateY(0) scale(1);}}
@keyframes reactJumpBig{0%{transform:translateY(0) scale(1);}35%{transform:translateY(-46px) scale(1.22) rotate(-6deg);}65%{transform:translateY(-10px) scale(1.1) rotate(5deg);}100%{transform:translateY(0) scale(1);}}
@keyframes shadowPulse{0%,100%{transform:scale(1);opacity:.35;}50%{transform:scale(.8);opacity:.22;}}
@keyframes bubbleIn{from{opacity:0;transform:translateY(8px) scale(.92);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-5px);opacity:1;}}

@media (max-width:340px){
  .pet-emoji{font-size:6rem;}
  .pet-wrap{width:160px;height:160px;}
  .brand-name{font-size:2.2rem;}
}

/* ===================================================================
   SPECIAL PERSONAL CODE EFFECTS — full-screen overlays + particles
   lightweight: pure CSS animations, no images
   =================================================================== */
.fx-overlay{
  position:fixed;inset:0;z-index:90;
  pointer-events:none;
  display:flex;align-items:flex-start;justify-content:center;
  overflow:hidden;
  animation:fxFade .6s ease;
}
.fx-overlay.fx-out{animation:fxFadeOut .8s ease forwards;}
@keyframes fxFade{from{opacity:0;}to{opacity:1;}}
@keyframes fxFadeOut{from{opacity:1;}to{opacity:0;}}

/* central message card shared by all special effects */
.fx-message{
  margin-top:16vh;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(6px);
  border-radius:22px;
  padding:14px 22px;
  font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:1.05rem;color:#a8527a;
  box-shadow:0 14px 34px -10px rgba(168,82,122,.5);
  animation:fxMsg .8s cubic-bezier(.34,1.4,.64,1) both;
  text-align:center;max-width:80%;
}
@keyframes fxMsg{from{opacity:0;transform:scale(.7) translateY(14px);}to{opacity:1;transform:scale(1) translateY(0);}}

/* ---- FLOWER: layered falling petals + parallax + pink glow ---- */
.fx-flower{
  background:
    radial-gradient(circle at 50% 30%,rgba(255,194,224,.6),rgba(255,224,240,.3) 55%,rgba(255,242,249,0) 80%),
    radial-gradient(circle at 50% 80%,rgba(255,176,214,.35),rgba(255,242,249,0) 70%);
  animation:fxFade .6s ease,flowerBreath 3.4s ease-in-out infinite;
}
@keyframes flowerBreath{
  0%,100%{box-shadow:inset 0 0 90px 24px rgba(255,190,222,.22);}
  50%{box-shadow:inset 0 0 150px 46px rgba(255,170,212,.4);}
}
.petal{
  position:absolute;top:-8%;
  width:15px;height:15px;
  background:radial-gradient(circle at 35% 30%,#ffe2ee,#ff97c4);
  border-radius:78% 8% 78% 8%;
  opacity:.92;
  will-change:transform;
  animation:petalFall linear forwards;
}
/* depth layers — closer petals are bigger, faster, blurred for parallax */
.petal.near{filter:blur(.4px);}
.petal.mid {transform-origin:center;opacity:.8;}
.petal.far {filter:blur(1.6px);opacity:.55;width:10px;height:10px;}
@keyframes petalFall{
  0%  {transform:translate3d(0,-12vh,0) rotate(0deg);opacity:0;}
  12% {opacity:.95;}
  50% {transform:translate3d(22px,55vh,0) rotate(280deg);}
  100%{transform:translate3d(-14px,114vh,0) rotate(560deg);opacity:.85;}
}

/* ---- MOONLIGHT: deep gradient + twinkling stars + floating motes ---- */
.fx-moonlight{
  background:
    radial-gradient(circle at 50% 32%,rgba(120,108,196,.5),rgba(58,48,104,0) 60%),
    linear-gradient(180deg,rgba(46,38,86,.9),rgba(28,22,58,.94));
}
.star{
  position:absolute;
  width:6px;height:6px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 6px 2px rgba(202,212,255,.9);
  will-change:opacity,transform;
  animation:twinkle ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{opacity:.12;transform:scale(.55);}
  50%{opacity:1;transform:scale(1.3);}
}
/* slow drifting light motes for depth */
.mote{
  position:absolute;
  width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle,rgba(210,214,255,.9),rgba(210,214,255,0));
  animation:moteFloat linear infinite;
}
@keyframes moteFloat{
  0%{transform:translateY(8vh) translateX(0);opacity:0;}
  20%{opacity:.8;}
  80%{opacity:.8;}
  100%{transform:translateY(-14vh) translateX(18px);opacity:0;}
}
.fx-moon{
  position:absolute;top:13%;left:50%;
  transform:translateX(-50%);
  font-size:3.6rem;
  filter:drop-shadow(0 0 22px rgba(222,226,255,.95));
  animation:moonGlow 3s ease-in-out infinite;
}
@keyframes moonGlow{
  0%,100%{filter:drop-shadow(0 0 16px rgba(222,226,255,.7));}
  50%{filter:drop-shadow(0 0 34px rgba(222,226,255,1));}
}

/* ---- MISSYOU: smooth zoom + blur + vignette ---- */
.fx-missyou{
  background:rgba(255,225,240,.25);
  backdrop-filter:blur(8px);
  animation:fxFade .6s ease,missBlur 3.6s ease forwards;
}
/* soft vignette ring around the screen */
.fx-missyou::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 46%,rgba(0,0,0,0) 46%,rgba(122,79,99,.4) 100%);
  animation:vignettePulse 3.6s ease both;
}
@keyframes vignettePulse{
  0%{opacity:0;}30%{opacity:1;}80%{opacity:1;}100%{opacity:0;}
}
@keyframes missBlur{
  0%{backdrop-filter:blur(0px);}
  35%{backdrop-filter:blur(10px);}
  100%{backdrop-filter:blur(0px);}
}
.fx-missyou .fx-message{animation:missZoom 3.6s ease both;}
@keyframes missZoom{
  0%{opacity:0;transform:scale(.5);}
  30%{opacity:1;transform:scale(1.14);}
  70%{transform:scale(1.05);}
  100%{opacity:1;transform:scale(1);}
}
/* gentle zoom + heartbeat on the pet during MISSYOU */
.pet-wrap.miss-zoom{
  transform:scale(1.32) !important;
  transition:transform 1s cubic-bezier(.34,1.3,.64,1);
  animation:petHeartbeat 1.3s ease-in-out infinite;
}

/* ---- FOREVER: pulsing aura + orbiting sparkles + breathing ---- */
.fx-forever{
  background:radial-gradient(circle at 50% 42%,rgba(255,202,234,.5),rgba(216,194,255,.4) 62%,rgba(255,240,250,.12) 88%);
  animation:fxFade .6s ease,foreverGlow 2.4s ease-in-out infinite;
}
@keyframes foreverGlow{
  0%,100%{box-shadow:inset 0 0 90px 22px rgba(255,182,222,.32);}
  50%{box-shadow:inset 0 0 150px 50px rgba(255,160,212,.6);}
}
/* soft radial light bloom behind the message */
.fx-forever::before{
  content:"";position:absolute;left:50%;top:42%;
  width:340px;height:340px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,200,234,.55),rgba(255,200,234,0) 70%);
  animation:bloomPulse 2.4s ease-in-out infinite;
}
@keyframes bloomPulse{
  0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(.85);}
  50%{opacity:.85;transform:translate(-50%,-50%) scale(1.15);}
}
.fx-heart{
  position:absolute;top:15%;left:50%;
  transform:translateX(-50%);
  font-size:3rem;
  animation:heartbeat 1.3s ease-in-out infinite;
}
@keyframes heartbeat{
  0%,100%{transform:translateX(-50%) scale(1);}
  15%{transform:translateX(-50%) scale(1.22);}
  30%{transform:translateX(-50%) scale(1);}
  45%{transform:translateX(-50%) scale(1.16);}
}
/* sparkles orbit a shared center for FOREVER */
.fx-sparkle{
  position:absolute;left:50%;top:44%;
  font-size:1.1rem;
  will-change:transform,opacity;
  animation:fxOrbit linear infinite;
}
@keyframes fxOrbit{
  0%  {opacity:0;transform:rotate(0deg) translateX(var(--orbit,120px)) rotate(0deg) scale(.5);}
  15% {opacity:1;}
  85% {opacity:1;}
  100%{opacity:0;transform:rotate(360deg) translateX(var(--orbit,120px)) rotate(-360deg) scale(1);}
}
/* heartbeat applied to the pet during FOREVER */
.pet-wrap.heartbeat-fx{animation:petHeartbeat 1.3s ease-in-out infinite;}
@keyframes petHeartbeat{
  0%,100%{filter:drop-shadow(0 0 10px rgba(255,170,215,.6));}
  20%{filter:drop-shadow(0 0 28px rgba(255,150,205,1));}
}

/* rare-event subtle glow ping on the pet */
.pet-emoji.rare-ping{animation:rarePing 1.2s ease;}
@keyframes rarePing{
  0%,100%{filter:drop-shadow(0 8px 10px rgba(255,122,176,.4));}
  45%{filter:drop-shadow(0 0 22px rgba(210,190,255,.95));}
}

@media (max-width:340px){
  .petal{width:11px;height:11px;}
  .fx-message{font-size:.95rem;}
}