/* ===== Lucky Box · 행운부적 ===== */
:root{
  --cream:#FCEFB2;
  --ink:#1B1B1B;
  --clover:#6BAF4B;
  --clover-deep:#4E9137;
  --gold:#F3B33F;
  --green-trans:rgba(107,175,75,0.18);
  --pink:#FF6FA5;
  --pink-deep:#E23C7E;
  --gold-deep:#E9A400;
  --font-title:'Gothic A1',sans-serif;
  --font-round:'Gothic A1',sans-serif;
  --font-body:'Gothic A1',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--font-body);
  background:#EDEDE6;
  display:flex;justify-content:center;align-items:stretch;
  color:var(--ink);
  overscroll-behavior:none;
}
.app{
  position:relative;width:100%;max-width:430px;margin:0 auto;
  background:#fff;min-height:100vh;overflow:hidden;
  box-shadow:0 0 40px rgba(0,0,0,.08);
}

/* screens */
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease, visibility .4s;
  background:#fff;
}
.screen.active{opacity:1;visibility:visible;transform:none;}

.screen-body{
  flex:1 1 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;
  padding:8px 30px 44px;gap:30px;
}
.screen-body.center{justify-content:center;}

/* sticker text — pink fill with a white outline, like the reference photo */
.title{
  font-family:var(--font-round);font-weight:900;font-size:28px;margin:0;
  color:var(--pink);text-align:center;line-height:1.35;
  -webkit-text-stroke:4.5px #000;paint-order:stroke fill;
  text-shadow:0 3px 0 rgba(0,0,0,.25);
}
.rub-title{font-size:34px;}

.hint{font-family:var(--font-body);font-weight:600;font-size:13px;color:#8A8371;margin:0;text-align:center;}

/* ===== MESSAGE SCREENS ===== */
.msg-screen{cursor:pointer;}
.msg-screen .screen-body{gap:26px;padding:24px 12px 40px;}
.msg-pics{display:flex;gap:12px;width:100%;justify-content:center;align-items:center;}
.msg-pics img{
  display:block;object-fit:cover;
  animation:picIn .5s cubic-bezier(.2,1.2,.4,1) both;
}
.msg-pics.one img{width:min(300px,78vw);max-height:46vh;}
@keyframes picIn{0%{transform:scale(.7) rotate(-4deg);opacity:0}100%{transform:none;opacity:1}}

/* msg2 — the photo is landscape (1.6:1), so to fill a portrait screen it runs
   wider than the frame and lets the sides crop. Stays big; no shrinking. */
.msg-pics.one img.pic-big{
  width:140%;max-width:none;max-height:none;flex:0 0 auto;
}

/* msg3 stage — the dog blinks around while the "regret" pic keeps growing */
.msg-stage{
  position:relative;width:100%;height:54vh;
  display:flex;align-items:center;justify-content:center;
}
.msg-stage img{position:absolute;display:block;object-fit:cover;}

/* shows up second, then swells the whole time */
/* big and still — no growing */
.pic-regret{width:min(360px,88vw);z-index:1;}

/* snaps from spot to spot — holds still, then jumps. stays visible throughout */
.pic-dog{
  width:min(128px,30vw);z-index:2;
  animation:dogRoam 5s steps(1,end) infinite;
}
@keyframes dogRoam{
  0%    {transform:translate(-118px,-140px) rotate(-8deg)}
  16.6% {transform:translate(116px,-112px) rotate(7deg)}
  33.3% {transform:translate(4px,-160px) rotate(-4deg)}
  50%   {transform:translate(122px,96px) rotate(9deg)}
  66.6% {transform:translate(-112px,140px) rotate(-6deg)}
  83.3% {transform:translate(10px,158px) rotate(5deg)}
  100%  {transform:translate(-118px,-140px) rotate(-8deg)}
}

.msg-line{
  font-family:var(--font-round);font-weight:900;font-size:28px;margin:0;text-align:center;line-height:1.4;
  color:var(--pink);-webkit-text-stroke:4.5px #000;paint-order:stroke fill;
  text-shadow:0 3px 0 rgba(0,0,0,.25);
  animation:picIn .5s cubic-bezier(.2,1.2,.4,1) .25s both;
}
.msg-line.big{font-size:40px;}
.msg-line.red{color:#E0402F;}
.msg-line.green{color:var(--clover);}
/* typed out one letter at a time */
.type-line{animation:none;}
.type-line .ch{display:inline-block;animation:chIn .26s cubic-bezier(.22,.61,.36,1) both;}
@keyframes chIn{
  0%{opacity:0;transform:translateY(-5px) scale(.92)}
  100%{opacity:1;transform:none}
}
/* steady red glow — no blinking */
.msg-line.glow-red{
  text-shadow:0 3px 0 rgba(0,0,0,.25),0 0 10px rgba(224,64,47,1),0 0 24px rgba(224,64,47,.9),0 0 46px rgba(224,64,47,.65);
}
.charm-line{font-size:24px;animation:none;}

/* ---- glowing sticker text (must sit after .title/.msg-line to win) ---- */
.sparkle-title{position:relative;animation:pinkGlow 1.8s ease-in-out infinite;}
@keyframes pinkGlow{
  0%,100%{text-shadow:0 3px 0 rgba(0,0,0,.25),0 0 7px rgba(255,111,165,.75),0 0 16px rgba(255,111,165,.45);}
  50%{text-shadow:0 3px 0 rgba(0,0,0,.25),0 0 12px rgba(255,111,165,1),0 0 26px rgba(255,111,165,.85),0 0 44px rgba(255,111,165,.5);}
}
.sparkle-title::before,.sparkle-title::after{
  content:"✨";position:absolute;font-size:20px;
  -webkit-text-stroke:0;text-shadow:none;pointer-events:none;
  animation:twinkle 1.5s ease-in-out infinite;
}
.sparkle-title::before{left:-24px;top:-14px;}
.sparkle-title::after{right:-24px;bottom:-10px;animation-delay:.75s;}
@keyframes twinkle{
  0%,100%{opacity:.2;transform:scale(.65) rotate(-12deg)}
  50%{opacity:1;transform:scale(1.15) rotate(14deg)}
}
/* same treatment in deep yellow — lamp screen + charm caption */
.sparkle-gold{color:var(--gold-deep);animation-name:goldGlow;}
/* pink letters, yellow glow */
.sparkle-gold.pink-text{color:var(--pink);}
@keyframes goldGlow{
  0%,100%{text-shadow:0 3px 0 rgba(0,0,0,.25),0 0 7px rgba(243,179,63,.75),0 0 16px rgba(243,179,63,.45);}
  50%{text-shadow:0 3px 0 rgba(0,0,0,.25),0 0 12px rgba(251,224,138,1),0 0 26px rgba(243,179,63,.9),0 0 46px rgba(243,179,63,.55);}
}

/* ---- clovers drifting down from the top / sides ---- */
.clover-rain{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4;}
.clover-rain img{position:absolute;top:-90px;display:block;will-change:transform;}
@keyframes cloverFall{
  0%{transform:translate(0,0) rotate(0);opacity:0}
  8%{opacity:1}
  90%{opacity:1}
  100%{transform:translate(var(--dx),var(--fall)) rotate(var(--spin));opacity:0}
}

/* ---- buttons ---- */
.btn-green{
  font-family:var(--font-round);font-weight:700;font-size:17px;color:var(--clover-deep);
  background:var(--green-trans);border:2px solid var(--clover);
  border-radius:16px;padding:15px 24px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:transform .1s, background .2s;
}
.btn-green:active{transform:scale(.97);background:rgba(107,175,75,.3);}
.btn-ic{font-size:18px;}
.icon-btn{
  width:56px;height:56px;border-radius:16px;border:2px solid #E6E6E6;background:#fff;
  font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.icon-btn:active{transform:scale(.97);}

/* ===== SCREEN 1 : BOX ===== */
.box-wrap{position:relative;width:300px;max-width:80vw;user-select:none;}
/* box2: title lower (top-aligned) + gap gives the popping lamp room to clear it */
#screen-box2 .screen-body{justify-content:flex-start;padding-top:140px;gap:110px;}
/* the 110px gap is there to give the popping lamp room — pull just the hint back up */
#box-hint2{margin-top:-88px;}
#box-wrap2{aspect-ratio:1;}
.box-img{width:100%;display:block;pointer-events:none;position:relative;z-index:1;}
/* box2 overlays a closed + open box image that crossfade as it opens */
#box-wrap2 .box-img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;}
#box-open-img{opacity:0;}
/* box rocks side to side until it gets opened */
#box-wrap2 .box-img{animation:boxSway 1.5s ease-in-out infinite;transform-origin:50% 85%;}
#box-wrap2.opened .box-img{animation:none;}
@keyframes boxSway{
  0%,100%{transform:translateX(-7px) rotate(-4deg)}
  50%{transform:translateX(7px) rotate(4deg)}
}
/* box shakes as it bursts open */
.box-wrap.opening .box-img{animation:boxshake .55s ease both;}
@keyframes boxshake{
  0%,100%{transform:rotate(0) scale(1)}
  15%{transform:rotate(-3deg) scale(1.03)}
  35%{transform:rotate(3deg) scale(1.04)}
  55%{transform:rotate(-2deg) scale(1.03)}
  75%{transform:rotate(2deg) scale(1.02)}
}

/* lamp pops out of the opened box */
.emerge-lamp{
  position:absolute;left:50%;top:34%;width:60%;
  transform:translate(-50%,0) scale(.15);opacity:0;z-index:3;pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.15));
}
.emerge-lamp.rise{animation:emerge .9s cubic-bezier(.2,1.2,.4,1) forwards;}
@keyframes emerge{
  0%{transform:translate(-50%,45px) scale(.15);opacity:0}
  18%{opacity:1}
  70%{transform:translate(-50%,-138px) scale(1.14)}
  100%{transform:translate(-50%,-120px) scale(1);opacity:1}
}
.emerge-glow{
  position:absolute;left:50%;top:20%;width:70%;height:60%;
  transform:translate(-50%,0) scale(.3);opacity:0;z-index:2;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(251,224,138,.9) 0%,rgba(243,179,63,0) 68%);
}
.emerge-glow.rise{animation:emergeGlow 1s ease forwards;}
@keyframes emergeGlow{0%{opacity:0;transform:translate(-50%,10px) scale(.3)}40%{opacity:1}100%{opacity:.9;transform:translate(-50%,-120px) scale(1.2)}}

/* ===== SCREEN 2 : LAMP ===== */
.lamp-wrap{position:relative;width:300px;max-width:82vw;display:flex;align-items:center;justify-content:center;touch-action:none;}
.lamp-img{width:100%;display:block;pointer-events:none;position:relative;z-index:2;}
.lamp-img.rubbing{animation:wiggle .18s ease-in-out infinite;}
@keyframes wiggle{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
.lamp-img.dim{animation:lampdim .5s ease forwards;}
@keyframes lampdim{0%{opacity:1}100%{opacity:0}}
/* glow sits ABOVE the lamp so the light covers it (hides the lamp on white bg) */
.lamp-glow{
  position:absolute;z-index:6;width:150%;height:150%;left:-25%;top:-25%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,200,1) 0%,rgba(251,224,138,1) 30%,rgba(243,179,63,.85) 52%,rgba(243,179,63,0) 74%);
  opacity:0;transform:scale(.35);
}
.lamp-glow.show{animation:glowburst 1s ease forwards;}
@keyframes glowburst{0%{opacity:0;transform:scale(.35)}25%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(3)}}
.rub-progress{
  width:210px;max-width:72vw;height:13px;border-radius:7px;background:#EFEFEF;
  border:1.5px solid #E2E2E2;overflow:hidden;
  opacity:0;transform:translateY(6px);transition:opacity .25s ease, transform .25s ease;
}
.rub-progress.show{opacity:1;transform:none;}
.rub-progress i{display:block;height:100%;width:0;border-radius:7px;
  background:linear-gradient(90deg,var(--clover),var(--gold));transition:width .12s;}
.flash{position:absolute;inset:0;pointer-events:none;z-index:10;opacity:0;
  background:radial-gradient(circle at 50% 45%,#FFF4C8 0%,#FBE08A 40%,var(--gold) 100%);}
.flash.go{animation:flash 1.1s ease forwards;}
@keyframes flash{0%{opacity:0}35%{opacity:0}75%{opacity:1}100%{opacity:1}}

/* ===== SCREEN 3 : CHARM ===== */
/* two captions + buttons now share this screen, so tighten it up */
#screen-charm .screen-body{gap:16px;padding:8px 26px 28px;}
.charm-wrap{position:relative;width:300px;max-width:78vw;}
.charm-wrap.pop{animation:charmpop .6s cubic-bezier(.2,1.3,.5,1) both;}
@keyframes charmpop{0%{transform:scale(.4) rotate(-6deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.charm-img{width:100%;display:block;}
.charm-photo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.charm-actions{display:flex;gap:12px;width:300px;max-width:78vw;margin-top:18px;position:relative;z-index:6;}
.charm-actions .btn-green{flex:1;justify-content:center;}

/* celebration icons — rise from bottom to top */
.celebrate{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5;}
.cel{position:absolute;bottom:-8%;font-size:30px;will-change:transform,opacity;}
.cel-img{display:block;height:auto;filter:drop-shadow(0 3px 5px rgba(0,0,0,.14));}
@keyframes rise{
  0%{transform:translateY(0) translateX(0) scale(.6) rotate(0);opacity:0}
  12%{opacity:1}
  85%{opacity:1}
  100%{transform:translateY(var(--rise)) translateX(var(--drift)) scale(1.1) rotate(var(--rot));opacity:0}
}
.confetti-pc{position:absolute;bottom:-6%;width:9px;height:14px;border-radius:2px;opacity:.9;will-change:transform;}
@keyframes riseConfetti{
  0%{transform:translateY(0) rotate(0);opacity:1}
  100%{transform:translateY(var(--rise)) rotate(540deg);opacity:0}
}