/* Strawberry cream palette */
:root{
  --bg:#fff7f2; --dot:#ffe1ea; --pink:#ffb7d0; --deep:#d4476f; --ink:#6b3f33;
  --box:rgba(255,251,247,.95); --paper:#fffdf7; --rule:#f4c7dd;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:"Baloo 2",system-ui,sans-serif;color:var(--ink);background:var(--bg);user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer}
.hidden{display:none!important}
.outline{color:#fff;-webkit-text-stroke:6px var(--deep);paint-order:stroke fill}

/* drifting polka dots, like the DDLC menu */
.dots{position:fixed;inset:-60px;pointer-events:none;
  background-image:radial-gradient(var(--dot) 18%,transparent 19%),radial-gradient(var(--dot) 18%,transparent 19%);
  background-size:44px 44px;background-position:0 0,22px 22px;animation:drift 10s linear infinite}
@keyframes drift{to{transform:translate(44px,44px)}}

/* slow falling hearts behind everything */
.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.ambient span{position:absolute;top:-30px;color:var(--pink);opacity:.7;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(calc(100dvh + 60px)) rotate(320deg)}}

.screen{position:fixed;inset:0;display:flex;flex-direction:column;max-width:560px;margin:0 auto}

/* title */
#title{align-items:center;justify-content:center;text-align:center;gap:6px;cursor:pointer;padding:20px}
#title h1{font-weight:800;font-size:clamp(44px,13vw,64px);line-height:.95;margin:6px 0;animation:bob 3s ease-in-out infinite}
.title-chibi{width:150px;animation:bob 3s ease-in-out infinite reverse}
.tap{font-weight:800;font-size:20px;color:var(--deep);margin:10px 0 0;animation:blink 1.2s infinite}
.fineprint{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 14px);left:20px;right:20px;font-size:12px;line-height:1.35;font-weight:600;opacity:.65}
.fineprint p{margin:6px 0 0}
.fineprint a{color:var(--deep)}
@keyframes bob{50%{transform:translateY(-8px)}}
@keyframes blink{50%{opacity:.25}}
.leaving{animation:leave .45s forwards}
@keyframes leave{to{opacity:0;transform:scale(1.08)}}
.entering{animation:enter .5s}
@keyframes enter{from{opacity:0}}

/* scene */
.top{display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top) + 12px) 14px 0;position:relative;z-index:3}
.chip.off{opacity:.55}
.chip{background:var(--box);border:3px solid var(--pink);border-radius:999px;padding:2px 12px;font-weight:800;font-size:15px;color:var(--deep)}
.stage{flex:1;position:relative;min-height:0}
.natwrap{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-end;pointer-events:none;
  animation:breathe 4s ease-in-out infinite;transform-origin:bottom center}
@keyframes breathe{50%{transform:scaleY(1.008)}}
#nat{height:100%;max-height:560px;max-width:100%;object-fit:contain;object-position:bottom;pointer-events:auto;cursor:pointer;
  filter:drop-shadow(0 6px 0 rgba(212,71,111,.08));transform-origin:bottom center}
#nat.hop{animation:hop .4s}
#nat.shake{animation:shake .4s}
@keyframes hop{45%{transform:translateY(-22px)}}
@keyframes shake{25%{transform:rotate(-2.5deg)}75%{transform:rotate(2.5deg)}}
.deco{position:absolute;width:84px;pointer-events:none}
.deco-a{left:-6px;top:3%;transform:rotate(-14deg);animation:wiggle 5s ease-in-out infinite}
.deco-b{right:-4px;bottom:-26px;width:96px;transform:rotate(10deg);z-index:1}
@keyframes wiggle{50%{transform:rotate(-6deg) translateY(-4px)}}

.bottom{padding:0 12px calc(env(safe-area-inset-bottom) + 8px);position:relative;z-index:3}
.textbox{position:relative;background:var(--box);border:4px solid var(--pink);border-radius:14px;padding:20px 16px 12px;
  min-height:118px;font-size:18px;line-height:1.35;cursor:pointer;box-shadow:0 6px 18px rgba(107,63,51,.1)}
.textbox p{margin:0}
.name{position:absolute;top:-19px;left:14px;background:var(--pink);border:3px solid #fff;border-radius:10px;padding:0 16px;font-weight:800;font-size:18px}
.arrow{position:absolute;right:12px;bottom:6px;color:var(--deep);font-size:13px;animation:blink 1s infinite}
.quick{display:flex;justify-content:space-around;margin-top:6px}
.quick button{background:none;border:0;font-weight:800;font-size:17px;padding:8px 6px}
.quick button:active,.chip:active,.btn:active{transform:scale(.92)}

/* tap sparkles + poke hearts */
.fx{position:fixed;pointer-events:none;z-index:50;font-size:18px;color:var(--deep);animation:rise .9s ease-out forwards}
@keyframes rise{to{transform:translate(var(--dx,0),var(--dy,-90px)) scale(1.3);opacity:0}}

/* panels */
.panel{position:fixed;inset:0;z-index:10;background:rgba(107,63,51,.28);display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 44px) 16px calc(env(safe-area-inset-bottom) + 16px);animation:enter .2s}
.card,.paper{width:100%;max-width:380px;max-height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;text-align:center;position:relative;animation:pop .3s}
.card::-webkit-scrollbar,.paper::-webkit-scrollbar{display:none}
.card{background:var(--bg);border:4px solid var(--pink);border-radius:22px;padding:26px 18px 20px;overflow:visible}
@keyframes pop{from{transform:scale(.85)}}
.card h2{margin:0 0 4px;font-size:30px;line-height:1.05;font-weight:800}
.sub{font-weight:700;color:var(--deep);margin:0 0 16px}
.card-sticker{position:absolute;width:88px;top:-52px;right:-4px;transform:rotate(10deg)}
.btn{margin-top:16px;background:var(--pink);border:3px solid #fff;border-radius:999px;font-weight:800;font-size:18px;padding:4px 22px;
  box-shadow:0 3px 0 var(--deep)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.row{display:flex;justify-content:center;gap:8px}

/* birthday */
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.countdown div{background:#fff;border:3px solid var(--pink);border-radius:12px;padding:6px 0}
.countdown b{display:block;font-size:30px;line-height:1.1;color:var(--deep)}
.countdown span{font-size:12px;font-weight:700}
.confetti{position:fixed;top:-20px;z-index:40;pointer-events:none;font-size:20px;animation:fall linear forwards}

/* notebook paper (poem + game) */
.paper{background:var(--paper);padding:26px 22px 18px;text-align:left;font-family:Mali;font-size:17px;line-height:30px;
  background-image:linear-gradient(transparent 29px,var(--rule) 30px);background-size:100% 30px;background-attachment:local;
  box-shadow:0 10px 30px rgba(0,0,0,.18);border-radius:4px}
.paper h2{font-family:Mali;font-size:22px;line-height:30px;margin:0 0 30px}
.paper .btn{font-family:"Baloo 2";display:block;margin:20px auto 0}
.paper .row .btn{margin:20px 0 0}
.paper-sticker{position:absolute;width:74px;right:6px;top:6px;transform:rotate(12deg)}
#poemBody p{margin:0 0 30px}
#poemBody .ps{font-size:14px;opacity:.7}

/* reasons flip card */
.flip{height:230px;perspective:900px;cursor:pointer}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .55s;transform-style:preserve-3d}
.flip.flipped .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.flip-front{background:var(--pink);border:4px solid #fff;box-shadow:0 5px 0 var(--deep);color:#fff}
.flip-front span{font-size:72px;line-height:1}
.flip-front small{font-weight:800;font-size:16px}
.flip-back{background:#fff;border:4px solid var(--pink);transform:rotateY(180deg);font-family:Mali;font-size:19px;line-height:1.4}

/* poem game */
.game-head{display:flex;justify-content:space-between;align-items:baseline}
.game-head h2{margin:0}
.game-head span{font-weight:600;color:var(--deep)}
.game-hint{margin:0 0 6px;font-size:14px}
.words{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.words button{background:none;border:0;font-family:Mali;font-size:18px;line-height:30px;height:30px;text-align:left;padding:0 4px;border-radius:4px}
.words button:active{background:var(--dot)}
.game-chibi{display:flex;justify-content:center;height:110px;align-items:flex-end}
.game-chibi img{height:100px;transform-origin:bottom center}
.game-chibi img.hop{animation:hop .45s}
.game-chibi img.meh{animation:shake .4s}
.result h3{font-size:20px;margin:0}
.result p{margin:0;white-space:pre-line}

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