/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --p1:#ff6eb4; --p2:#ff3d8b; --p3:#ff8fd4;
  --lav:#c96fff; --peach:#ffb38a;
  --cream:#fff5fb; --text:#5a1a3a;
}

html,body{height:100%;overflow:hidden}
body{
  font-family:'Nunito',sans-serif;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;position:relative;padding:16px;
  background:var(--cream);
}

/* ── BACKGROUND ── */
.bg{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 90% 60% at 15% 5%,  #ffe0ef 0%, transparent 55%),
    radial-gradient(ellipse 70% 80% at 85% 95%,  #f5d6ff 0%, transparent 55%),
    radial-gradient(ellipse 110% 110% at 50% 50%, #fff5fb 0%, #ffe8f5 100%);
  animation:bgPulse 8s ease-in-out infinite;
}
@keyframes bgPulse{
  0%,100%{opacity:1}
  50%{opacity:.85}
}

/* ── FLOAT LAYER ── */
#floatLayer{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.floater{
  position:absolute;bottom:-60px;
  animation:floatUp linear infinite;
  pointer-events:none;user-select:none;
}
@keyframes floatUp{
  0%  {transform:translateY(0) scale(1) rotate(0deg); opacity:0}
  8%  {opacity:.85}
  92% {opacity:.55}
  100%{transform:translateY(-115vh) scale(.55) rotate(380deg); opacity:0}
}

/* ── WRAP ── */
.wrap{
  position:relative;z-index:10;
  width:100%;max-width:400px;
}

/* ── CARD ── */
.card{
  width:100%;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  border-radius:38px;
  padding:30px 24px 38px;
  text-align:center;
  box-shadow:
    0 16px 70px rgba(255,100,160,.18),
    0 2px 10px rgba(255,100,160,.09),
    inset 0 1px 0 rgba(255,255,255,.95);
  border:1.5px solid rgba(255,160,200,.22);
  animation:cardPop .9s cubic-bezier(.34,1.56,.64,1) both;
  position:relative;overflow:hidden;
}
.card::before{
  content:'';position:absolute;inset:0;border-radius:38px;
  background:linear-gradient(160deg,rgba(255,255,255,.6) 0%,transparent 55%);
  pointer-events:none;
}

@keyframes cardPop{
  from{opacity:0;transform:scale(.72) translateY(60px)}
  to  {opacity:1;transform:scale(1)   translateY(0)}
}

/* ── CHARACTER AREA ── */
.char-area{
  position:relative;
  width:188px;height:188px;
  margin:0 auto 22px;
}

/* Sparkle ring */
.sparkle-ring{
  position:absolute;inset:0;
  width:100%;height:100%;
  animation:spinSlow 10s linear infinite;
  pointer-events:none;
}
@keyframes spinSlow{to{transform:rotate(360deg)}}

/* Bear wrap */
.pookie-wrap{
  position:absolute;
  inset:20px;
  cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.pookie-wrap:hover{transform:scale(1.07) rotate(-3deg)}
.pookie-wrap:active{transform:scale(.93)}
#pookieSvg{width:100%;height:100%;filter:drop-shadow(0 8px 26px rgba(255,100,160,.38))}

/* ── QUESTION ── */
.q-wrap{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-bottom:8px;min-height:60px;
}
.q-text{
  font-family:'Baloo 2',cursive;
  font-size:clamp(20px,5.5vw,25px);
  font-weight:800;
  color:var(--text);
  line-height:1.25;
  transition:opacity .25s,transform .25s;
}
.q-emoji{
  font-size:clamp(22px,6vw,28px);
  display:inline-block;
  animation:emojiWiggle 2.5s ease-in-out infinite;
}
@keyframes emojiWiggle{
  0%,100%{transform:rotate(0) scale(1)}
  20%    {transform:rotate(-12deg) scale(1.1)}
  40%    {transform:rotate(10deg) scale(1.05)}
  60%    {transform:rotate(-8deg) scale(1.08)}
}

/* ── SUBTEXT ── */
.sub{
  font-size:13px;color:#b07090;
  font-weight:700;font-style:italic;
  margin-bottom:28px;min-height:20px;
  transition:opacity .25s;
}

/* ── BUTTONS ── */
.btns{
  display:flex;flex-direction:column;
  gap:14px;align-items:center;
  position:relative;
}

.yes-btn{
  width:100%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#ff6eb4 0%,#ff2070 100%);
  color:#fff;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Baloo 2',cursive;font-size:19px;font-weight:800;
  padding:17px 28px;border-radius:50px;
  box-shadow:0 8px 30px rgba(255,50,120,.38),0 2px 6px rgba(255,50,120,.2);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s;
  position:relative;overflow:hidden;letter-spacing:.2px;
  animation:yesPulse 2.8s ease-in-out infinite;
}
@keyframes yesPulse{
  0%,100%{box-shadow:0 8px 30px rgba(255,50,120,.38),0 2px 6px rgba(255,50,120,.2)}
  50%    {box-shadow:0 12px 44px rgba(255,50,120,.58),0 4px 12px rgba(255,50,120,.3)}
}
.yes-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,transparent 55%);
  border-radius:50px;pointer-events:none;
}
.yes-btn:hover{transform:scale(1.06) translateY(-3px);animation:none;box-shadow:0 16px 48px rgba(255,50,120,.5)}
.yes-btn:active{transform:scale(.96)}

.btn-icon{font-size:22px;animation:heartBeat 1.4s ease-in-out infinite}
@keyframes heartBeat{
  0%,100%{transform:scale(1)}
  14%    {transform:scale(1.3)}
  28%    {transform:scale(1)}
  42%    {transform:scale(1.2)}
}

.no-btn{
  border:2px solid rgba(200,120,180,.3);
  background:rgba(255,242,252,.88);
  color:#c07090;
  font-family:'Nunito',sans-serif;font-weight:700;
  border-radius:50px;padding:12px 28px;
  cursor:pointer;
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
  font-size:14px;white-space:nowrap;
  position:relative;
}
.no-btn:hover{background:rgba(255,220,242,.95);transform:scale(1.04)}
.no-btn:active{transform:scale(.94)}

/* ── YES SCREEN ── */
#yesScreen{
  position:fixed;inset:0;z-index:100;
  display:none;align-items:center;justify-content:center;
  flex-direction:column;text-align:center;padding:36px 28px;
  overflow:hidden;
}
#yesScreen.show{display:flex}
#yesScreen::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(140deg,#ff6eb4 0%,#bf5fff 55%,#ff4081 100%);
  animation:bgBurst .65s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes bgBurst{from{transform:scale(1.4);opacity:0}to{transform:scale(1);opacity:1}}

.yes-inner{position:relative;z-index:2}

.yes-bear{
  width:140px;height:140px;margin:0 auto 18px;
  animation:yesBearPop .7s cubic-bezier(.34,1.56,.64,1) both .15s;
  opacity:0;
}
@keyframes yesBearPop{
  from{opacity:0;transform:scale(0) rotate(-25deg) translateY(30px)}
  to  {opacity:1;transform:scale(1) rotate(0)      translateY(0)}
}
.yes-bear svg{
  width:100%;height:100%;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.12));
  animation:yesBearFloat 3s ease-in-out infinite .8s;
}
@keyframes yesBearFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  50%    {transform:translateY(-10px) rotate(3deg)}
}

.yes-title{
  font-family:'Baloo 2',cursive;font-weight:800;
  font-size:clamp(38px,12vw,54px);
  color:#fff;
  text-shadow:0 4px 22px rgba(0,0,0,.15);
  margin-bottom:14px;
  animation:slideUp .5s ease both .38s;opacity:0;
  position:relative;
}
.yes-title::after{
  content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  width:60%;height:3px;border-radius:3px;
  background:rgba(255,255,255,.5);
}

.yes-msg{
  font-size:15px;color:rgba(255,255,255,.93);
  line-height:1.85;margin-bottom:34px;font-weight:700;
  animation:slideUp .5s ease both .52s;opacity:0;
}

@keyframes slideUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

.again-btn{
  border:2.5px solid rgba(255,255,255,.65);
  background:rgba(255,255,255,.22);
  color:#fff;font-family:'Baloo 2',cursive;font-weight:700;font-size:15px;
  padding:14px 34px;border-radius:50px;cursor:pointer;
  backdrop-filter:blur(12px);
  transition:all .22s ease;
  animation:slideUp .5s ease both .68s;opacity:0;
  position:relative;
}
.again-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.06)}
.again-btn:active{transform:scale(.96)}

/* ── CONFETTI ── */
#confettiLayer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.confetti{
  position:absolute;top:-20px;
  border-radius:3px;
  animation:cFall linear forwards;
}
@keyframes cFall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}

/* ── SHAKE ── */
@keyframes shake{
  0%,100%{transform:none}
  20%    {transform:translateX(-12px) rotate(-2.5deg)}
  40%    {transform:translateX(12px)  rotate(2.5deg)}
  60%    {transform:translateX(-8px)}
  80%    {transform:translateX(8px)}
}
.shake{animation:shake .42s ease!important}

/* ── POOKIE BOUNCE ── */
@keyframes pookieBounce{
  0%  {transform:scale(1)}
  35% {transform:scale(1.18) rotate(-6deg)}
  65% {transform:scale(.94)  rotate(4deg)}
  100%{transform:scale(1)   rotate(0)}
}

/* ── MOBILE TWEAKS ── */
@media(max-width:360px){
  .card{padding:24px 16px 30px;border-radius:28px}
  .char-area{width:158px;height:158px}
}
@media(min-height:700px){
  .card{padding:36px 28px 44px}
}