/* ===========================================================
   lovelyy — kawaii chibi storybook
   =========================================================== */

:root{
  --cream:#FFF6EA;
  --cream-2:#FDEBD6;
  --ink:#4A3128;
  --ink-soft:#7A5B4C;
  --rose:#FF5E86;
  --rose-soft:#FFB3CB;
  --blush:#FFE1EB;
  --mint:#7EE0C6;
  --butter:#FFD86B;
  --grape:#A98CF5;
  --night:#150C33;

  --line:#E3C8AE;
  --shadow: 0 10px 0 rgba(122,91,76,.16), 0 18px 34px rgba(122,91,76,.18);
  --r-lg:30px; --r-md:20px; --r-sm:13px;

  --f-disp:'Chewy', system-ui, cursive;
  --f-body:'Baloo 2', system-ui, sans-serif;
  --f-hand:'Gaegu', cursive;

  /* motion — built-in easings are too weak, these have punch */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-spring:cubic-bezier(.2,1.45,.35,1);
}

*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--cream);
  overflow:hidden;
  display:grid; place-items:center;
  overscroll-behavior:none;
}

/* soft dotted wallpaper behind the frame (desktop) */
.wallpaper{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(circle at 18% 20%, #FFE3EE 0 36%, transparent 60%),
    radial-gradient(circle at 84% 78%, #E2F6EE 0 34%, transparent 62%),
    radial-gradient(circle at 60% 10%, #FFF2CE 0 28%, transparent 56%),
    var(--cream-2);
}
.wallpaper::after{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(#D8B79A 1.4px, transparent 1.5px);
  background-size:22px 22px; opacity:.28;
}

/* ---------- frame + stage ------------------------------------------- */
.frame{
  position:relative; z-index:1;
  width:100%; height:100dvh;
  display:grid; place-items:center;
  padding:0;
}
.stage{
  position:relative;
  width:100%; height:100dvh;
  max-width:none;
  overflow:hidden;
  background:var(--cream);
  isolation:isolate;
  touch-action:manipulation;
  user-select:none;
}
@media (min-width:720px){
  .frame{padding:24px}
  .stage{
    width:min(520px, 96vw);
    height:min(900px, calc(100dvh - 48px));
    border-radius:36px;
    border:8px solid #FFFDF6;
    box-shadow:0 22px 0 rgba(122,91,76,.10), 0 40px 80px rgba(122,91,76,.28);
  }
}

.scene{position:absolute; inset:0}
.scene-svg{width:100%; height:100%; display:block}
#fx{position:absolute; inset:0; pointer-events:none; z-index:4}

/* ---------- hud ------------------------------------------------------ */
.hud{
  position:absolute; z-index:6; top:0; left:0; right:0;
  display:flex; align-items:center; gap:10px;
  padding:calc(env(safe-area-inset-top) + 12px) 14px 12px;
  pointer-events:none;
}
.brand{
  font-family:var(--f-disp); font-size:20px; letter-spacing:.4px;
  color:#FFFDF6; text-shadow:0 2px 0 rgba(74,49,40,.45), 0 0 14px rgba(255,120,160,.55);
}
.hearts{display:flex; gap:5px; margin-left:auto}
.hh{
  font-size:16px; line-height:1; color:rgba(255,255,255,.42);
  text-shadow:0 1px 0 rgba(74,49,40,.3);
  transition:color 260ms var(--ease-out), transform 320ms var(--ease-spring);
}
.hh.on{color:var(--rose); transform:scale(1.22); text-shadow:0 0 12px rgba(255,94,134,.8)}
.icon-btn{
  pointer-events:auto; cursor:pointer;
  width:34px; height:34px; border:0; border-radius:50%;
  background:rgba(255,253,246,.9); font-size:15px;
  box-shadow:0 3px 0 rgba(122,91,76,.28);
  transition:transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.icon-btn:active{transform:translateY(2px) scale(.94); box-shadow:0 1px 0 rgba(122,91,76,.28)}

/* ---------- task pill ------------------------------------------------ */
.task{
  position:absolute; z-index:6; left:50%; transform:translateX(-50%);
  top:calc(env(safe-area-inset-top) + 52px);
  max-width:min(88%, 400px);
  background:#FFFDF6; border:3px solid var(--line);
  border-radius:999px; padding:8px 18px;
  font-weight:600; font-size:15px; text-align:center;
  box-shadow:0 5px 0 rgba(122,91,76,.2);
  animation:pillIn 340ms var(--ease-spring) both;
  pointer-events:none;
}
.task .bar{display:none}
.task.with-bar{border-radius:18px}
.task.with-bar .bar{
  display:block; height:8px; margin-top:7px; border-radius:99px;
  background:#F0E0CC; overflow:hidden;
}
/* scaleX, not width — width would trigger layout on every pointermove */
.task.with-bar .bar i{
  display:block; height:100%; width:100%; border-radius:99px;
  transform:scaleX(var(--p,0)); transform-origin:left center;
  background:linear-gradient(90deg, var(--butter), var(--rose));
  transition:transform 110ms var(--ease-out);
}
@keyframes pillIn{from{opacity:0; transform:translateX(-50%) translateY(-14px) scale(.92)}}

/* ---------- dialogue box --------------------------------------------- */
.dbox{
  position:absolute; z-index:6; left:12px; right:12px;
  bottom:calc(env(safe-area-inset-bottom) + 14px);
  background:#FFFDF6;
  border:4px solid var(--line);
  border-radius:var(--r-lg);
  padding:20px 22px 24px;
  min-height:118px;
  box-shadow:var(--shadow);
}
.dbox::before{
  content:''; position:absolute; inset:5px; border-radius:calc(var(--r-lg) - 6px);
  border:2px dashed rgba(227,200,174,.7); pointer-events:none;
}
.dbox.pop{animation:boxPop 260ms var(--ease-out)}
@keyframes boxPop{from{transform:translateY(10px) scale(.97); opacity:.5}}
.dname{
  position:absolute; top:-17px; left:22px;
  font-family:var(--f-disp); font-size:17px; letter-spacing:.6px;
  color:#FFFDF6; padding:3px 18px 4px; border-radius:999px;
  background:var(--rose); box-shadow:0 3px 0 rgba(122,91,76,.25);
}
.dbox[data-who="s"] .dname{background:#4E7FE8}
.dbox[data-who="j"] .dname{background:var(--rose)}
.dbox.narr{background:#FFF7E8; border-style:dashed}
.dbox.narr .dtext{font-family:var(--f-hand); font-size:23px; color:var(--ink-soft); letter-spacing:.2px}
.dtext{font-size:18px; line-height:1.42; font-weight:600; min-height:2.6em}
.dnext{
  position:absolute; right:20px; bottom:10px;
  color:var(--rose); font-size:20px; opacity:0;
  transition:opacity 180ms var(--ease-out);
}
.dnext.show{opacity:1; animation:bob 1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}

/* ---------- game pads (ch.3) ----------------------------------------- */
.padrow{
  position:absolute; z-index:6; left:0; right:0;
  bottom:calc(env(safe-area-inset-bottom) + 20px);
  display:flex; justify-content:center; gap:14px;
}
.pad{
  width:62px; height:62px; border:0; border-radius:50%;
  font-family:var(--f-disp); font-size:26px; color:#FFFDF6;
  background:var(--pc); cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.28), inset 0 -4px 0 rgba(0,0,0,.15);
  transition:transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.pad span{display:block; text-shadow:0 2px 0 rgba(0,0,0,.22)}
.pad:active,.pad.hit{transform:translateY(5px) scale(.96); box-shadow:0 1px 0 rgba(0,0,0,.28)}

/* ---------- chapter card --------------------------------------------- */
.card{
  position:absolute; z-index:7; inset:0;
  display:grid; place-content:center; gap:6px; text-align:center;
  background:rgba(28,17,12,.55); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .5s;
}
.card.show{opacity:1}
.card-no{
  font-family:var(--f-hand); font-size:24px; color:var(--butter);
  letter-spacing:3px; text-transform:uppercase;
  opacity:0; animation:none;
}
.card-title{
  font-family:var(--f-disp); font-size:clamp(30px,8vw,42px); color:#FFFDF6;
  line-height:1.16; max-width:9ch; margin:0 auto;
  text-shadow:0 4px 0 rgba(0,0,0,.28);
  opacity:0;
}
.card.show .card-no{animation:cardUp .6s .1s cubic-bezier(.2,1.3,.4,1) both}
.card.show .card-title{animation:cardUp .7s .28s cubic-bezier(.2,1.3,.4,1) both}
@keyframes cardUp{from{opacity:0; transform:translateY(20px) scale(.92)} to{opacity:1}}

/* ---------- overlays -------------------------------------------------- */
.overlay{
  position:absolute; inset:0; z-index:9;
  display:grid; place-items:center; text-align:center;
  padding:26px 20px calc(env(safe-area-inset-bottom) + 26px);
  opacity:0; pointer-events:none; transition:opacity .55s;
  overflow:hidden;
}
.overlay.show{opacity:1; pointer-events:auto}

#title{
  background:
    radial-gradient(circle at 50% 24%, #FFE6F0 0 42%, transparent 70%),
    linear-gradient(170deg,#FFF7E9,#FFE7DC 60%,#FFDCE9);
}
#title::after{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(#F0C3B0 1.3px, transparent 1.4px);
  background-size:20px 20px; opacity:.35; pointer-events:none;
}
.t-inner{position:relative; z-index:2; display:grid; gap:12px; justify-items:center}
.t-tape{
  font-family:var(--f-hand); font-size:19px; color:#B07A5F;
  background:#FFF8E4; padding:4px 16px; border-radius:6px;
  transform:rotate(-2.5deg); box-shadow:0 3px 0 rgba(122,91,76,.14);
}
.t-logo{
  font-family:var(--f-disp); font-size:clamp(58px,17vw,86px); line-height:.94;
  color:var(--rose); letter-spacing:1px; position:relative;
  text-shadow:0 5px 0 #FFF, 0 8px 0 rgba(122,91,76,.18);
  animation:squish 3.4s ease-in-out infinite;
}
.t-heart{position:absolute; top:-6px; right:-30px; font-size:.35em; animation:bob 1.6s ease-in-out infinite}
@keyframes squish{50%{transform:scale(1.04,.96) rotate(-1deg)}}
.t-sub{font-size:15.5px; font-weight:600; color:var(--ink-soft); max-width:26ch}
.t-pair{display:flex; align-items:flex-end; gap:0; margin:2px 0 6px}
.t-ch{width:min(38vw,150px)}
.t-ch svg{width:100%; height:auto; display:block; filter:drop-shadow(0 8px 10px rgba(122,91,76,.22))}
#title-jiji{animation:sway 3s ease-in-out infinite}
#title-saad{animation:sway 3s ease-in-out infinite reverse; margin-left:-14px}
@keyframes sway{50%{transform:translateY(-9px) rotate(2deg)}}
.t-note{font-family:var(--f-hand); font-size:17px; color:#B08A72}

.btn{
  font-family:var(--f-disp); font-size:22px; letter-spacing:.5px;
  color:#FFFDF6; background:var(--rose);
  border:0; border-radius:999px; padding:14px 34px 16px; cursor:pointer;
  box-shadow:0 7px 0 #D93F68, 0 14px 24px rgba(217,63,104,.3);
  transition:transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.btn:active{transform:translateY(5px) scale(.975); box-shadow:0 2px 0 #D93F68}
.btn.ghost{
  background:#FFFDF6; color:var(--rose); font-size:17px; padding:10px 24px 12px;
  box-shadow:0 5px 0 rgba(122,91,76,.2);
}
.btn.ghost em{font-style:normal; font-family:var(--f-body); font-weight:800}
.btn.small{font-size:18px; padding:11px 26px 13px}

/* ---------- finale ---------------------------------------------------- */
.finale{
  background:
    radial-gradient(circle at 50% 30%, rgba(255,120,170,.34) 0 40%, transparent 72%),
    linear-gradient(180deg, rgba(11,6,30,.92), rgba(50,18,60,.94) 60%, rgba(96,32,80,.94));
  color:#FFF6EA;
}
.f-inner{position:relative; z-index:3; display:grid; gap:10px; justify-items:center}
.f-ribbon{
  font-family:var(--f-hand); font-size:19px; color:#FFD86B; letter-spacing:1px;
  border:2px dashed rgba(255,216,107,.55); border-radius:99px; padding:3px 18px;
}
.f-title{
  font-family:var(--f-disp); font-size:clamp(34px,10.5vw,54px); line-height:1.02;
  letter-spacing:.5px; color:#FFFDF6;
  text-shadow:0 4px 0 rgba(0,0,0,.3), 0 0 30px rgba(255,140,180,.65);
}
.f-title span{
  color:var(--butter);
  text-shadow:0 4px 0 rgba(0,0,0,.3), 0 0 34px rgba(255,216,107,.8);
}
.finale.show .f-title{animation:cardUp .8s .2s cubic-bezier(.2,1.3,.4,1) both}
.finale.show .f-sub{animation:cardUp .8s .5s cubic-bezier(.2,1.3,.4,1) both}
.finale.show .f-sig{animation:cardUp .8s .75s cubic-bezier(.2,1.3,.4,1) both}
.finale.show .btn{animation:cardUp .8s .95s cubic-bezier(.2,1.3,.4,1) both}
.f-sub{font-size:19px; font-weight:600; color:#FFE1EB}
.f-line{width:64px; height:3px; border-radius:2px; background:rgba(255,216,107,.7); margin:4px 0}
.f-sig{font-family:var(--f-hand); font-size:21px; color:#FFD3E2}
.f-sig b{color:#FFFDF6}

.heartrain{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.hr{position:absolute; top:-8%; animation:fall linear infinite; opacity:.9}
@keyframes fall{
  0%{transform:translateY(-10%) rotate(0deg); opacity:0}
  10%{opacity:.95}
  100%{transform:translateY(115vh) rotate(320deg); opacity:.2}
}

/* ---------- the characters are alive ---------------------------------- */
.hidden{display:none !important}

/* idle breathing — tiny, but its absence is what makes art feel dead */
.ch{
  transform-box:fill-box; transform-origin:50% 97%;
  animation:breathe 4s cubic-bezier(.37,0,.63,1) infinite;
  will-change:transform;
}
@keyframes breathe{
  50%{transform:scale(1.022,1.028) translateY(-1px)}
}

/* blinks, desynced per character by an inline animation-delay */
.eyes.blinky{
  transform-box:fill-box; transform-origin:50% 60%;
  animation:blink 6.4s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes blink{
  0%,95.4%,100%{transform:scaleY(1)}
  96.6%{transform:scaleY(.06)}
  97.8%{transform:scaleY(1)}
}

.motes .mote{animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translate(4px,-14px); opacity:.85}}
.sunbeam{animation:beam 8s ease-in-out infinite}
@keyframes beam{50%{opacity:.32}}
.clock-hand{transform-origin:0 0; animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.twinkle{animation:tw 3.4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.25} 50%{opacity:1}}
.scenery{animation:pan 3.2s linear infinite}
@keyframes pan{to{transform:translateX(-176px)}}
.ripple{animation:rip 5s ease-in-out infinite}
.ripple2{animation:rip 3.6s ease-in-out infinite reverse}
@keyframes rip{50%{transform:translateX(8px) scaleY(1.1)}}

.hand-hint{animation:hint 1.5s ease-in-out infinite; transform-origin:34px 44px}
@keyframes hint{50%{opacity:.25; transform:scale(1.14)}}
.draggable{cursor:grab}
.draggable:active{cursor:grabbing}

.seat-pick{cursor:pointer}
.seat-glow{animation:glow 1.4s ease-in-out infinite}
@keyframes glow{50%{opacity:.35}}
.shake{animation:shk 420ms var(--ease-out)}
@keyframes shk{20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)}}
.wobble{animation:wob 440ms var(--ease-out)}
@keyframes wob{25%{transform:rotate(-11deg) scale(1.06)} 55%{transform:rotate(9deg)} 80%{transform:rotate(-4deg)}}
/* never from scale(0) — things don't appear out of nothing */
.drop-in{animation:drop 520ms var(--ease-spring) both}
@keyframes drop{from{opacity:0; transform:translateY(-24px) scale(.94)}}
.fade-in{animation:fi 800ms var(--ease-out) both}
@keyframes fi{from{opacity:0; transform:scale(.94)}}

.findable{cursor:pointer}
.doubletake{animation:dbl .7s ease 2}
@keyframes dbl{30%{transform:translate(232px,486px) scale(.72) rotate(-9deg)}}
.found #s4-ring-c{animation:ring .9s ease-out}
@keyframes ring{from{r:14; opacity:0} 40%{opacity:1} to{opacity:.9}}
#s4-ring-c{animation:spin 9s linear infinite; transform-origin:232px 510px}

.heartbeat .scene{animation:beat var(--beat,.9s) ease-in-out infinite}
@keyframes beat{
  0%,100%{transform:scale(1)}
  8%{transform:scale(1.012)}
  16%{transform:scale(1)}
  24%{transform:scale(1.008)}
}
.stage.night .brand{text-shadow:0 2px 0 rgba(0,0,0,.5), 0 0 18px rgba(255,150,200,.8)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}