/* =========================================================
   NISNIS CANTIK — tokens
   ========================================================= */
:root{
  --cream:#FFFDF5;
  --cream-2:#FFF6E6;
  --ink:#3D3A33;
  --ink-soft:#6B6559;
  --matcha:#7FB069;
  --matcha-deep:#4C7A3F;
  --matcha-soft:#E4F0D9;
  --strawberry:#FF6B8B;
  --strawberry-soft:#FFE0E8;
  --sunny:#FFC75F;
  --sunny-soft:#FFF1D6;
  --lav:#9D8DF1;
  --lav-soft:#EDE9FE;
  --sky:#5CC8E7;
  --sky-soft:#DFF4FB;

  --r-lg:28px;
  --r-md:20px;
  --r-pill:999px;

  --shadow-sm:0 2px 0 rgba(61,58,51,.12);
  --shadow-md:0 10px 26px -12px rgba(61,58,51,.35);
  --shadow-lg:0 22px 48px -18px rgba(61,58,51,.42);

  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --bounce:cubic-bezier(0.34,1.56,0.64,1);
  --spring:cubic-bezier(0.3,1.4,0.5,1);

  --font-display:"Fredoka",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255,199,95,.20), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(157,141,241,.16), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(127,176,105,.16), transparent 55%);
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
}
.wrap{width:min(720px,92vw);margin-inline:auto}
h1,h2{font-family:var(--font-display);line-height:1.05;margin:0}
button{font-family:inherit}
em{font-style:italic}

/* focus visibility for keyboard players */
:focus-visible{
  outline:3px solid var(--lav);
  outline-offset:3px;
  border-radius:8px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  text-align:center;
  padding:clamp(56px,12vh,120px) 0 84px;
  overflow:hidden;
}
.eyebrow{
  font-size:clamp(.8rem,2.6vw,.95rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--matcha-deep);
  background:var(--matcha-soft);
  display:inline-block;
  padding:.45em 1.1em;
  border-radius:var(--r-pill);
  margin:0 0 1.4em;
}
.lede{
  max-width:44ch;
  margin:1.2em auto 0;
  color:var(--ink-soft);
  font-size:clamp(1rem,3.4vw,1.12rem);
}
.scrollhint{
  margin-top:2.6em;
  font-weight:700;
  color:var(--ink-soft);
  animation:hintBob 2.1s var(--ease-in-out) infinite;
}
@keyframes hintBob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* big draggable name */
.word{
  display:flex;
  gap:clamp(2px,1.6vw,10px);
  justify-content:center;
  flex-wrap:wrap;
  font-size:clamp(2.6rem,13vw,6rem);
  font-weight:700;
  letter-spacing:.01em;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  cursor:grab;
}
.word .ch{
  display:inline-block;
  padding:.02em .06em;
  border-radius:16px;
  transform-origin:50% 75%;
  transition:transform .45s var(--bounce), color .3s ease, background-color .3s ease;
  will-change:transform;
}
.word .ch:active{cursor:grabbing}
.word .ch.pop{animation:chPop .5s var(--bounce)}
@keyframes chPop{
  0%{transform:scale(1)}
  40%{transform:scale(1.28) rotate(-4deg)}
  100%{transform:scale(1)}
}

/* drifting background blobs */
.blobs{position:absolute;inset:0;pointer-events:none;z-index:-1}
.blob{
  position:absolute;
  border-radius:32% 68% 57% 43% / 43% 45% 55% 57%;
  filter:blur(2px);
  opacity:.5;
  animation:float 14s ease-in-out infinite;
}
.b1{width:180px;height:180px;background:var(--sunny-soft);top:6%;left:4%;animation-duration:15s}
.b2{width:140px;height:140px;background:var(--strawberry-soft);top:52%;right:2%;animation-duration:11s;animation-delay:-3s}
.b3{width:110px;height:110px;background:var(--lav-soft);bottom:2%;left:14%;animation-duration:18s;animation-delay:-6s}
@keyframes float{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  33%{transform:translate(14px,-16px) rotate(8deg)}
  66%{transform:translate(-12px,10px) rotate(-6deg)}
}

/* =========================================================
   PANELS
   ========================================================= */
.panel{
  position:relative;
  width:min(760px,94vw);
  margin:0 auto 26px;
  padding:clamp(28px,6vw,52px) clamp(20px,5vw,44px);
  background:rgba(255,253,245,.88);
  border:2px solid rgba(61,58,51,.08);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  text-align:center;
  backdrop-filter:blur(6px);
}
.panel.center{display:flex;flex-direction:column;align-items:center}
.panel-title{
  font-size:clamp(1.5rem,5vw,2.1rem);
  font-weight:700;
  margin-bottom:.35em;
}
.panel-sub{
  margin:0 auto 1.6em;
  max-width:48ch;
  color:var(--ink-soft);
  font-size:clamp(.95rem,3vw,1.05rem);
}
.tag{
  display:inline-block;
  vertical-align:middle;
  font-family:var(--font-body);
  font-size:.6em;
  font-weight:900;
  letter-spacing:.06em;
  background:var(--sunny);
  color:#6B4A00;
  padding:.3em .7em;
  border-radius:var(--r-pill);
  transform:rotate(-3deg);
}

/* =========================================================
   GACHAPON MACHINE
   ========================================================= */
.machine{
  position:relative;
  width:min(430px,86vw);
  margin:8px auto 0;
}
.machine-globe{
  position:relative;
  height:190px;
  background:linear-gradient(180deg,#FFFFFF,var(--matcha-soft));
  border:3px solid var(--matcha-deep);
  border-bottom:none;
  border-radius:26px 26px 12px 12px;
  overflow:hidden;
  box-shadow:inset 0 -14px 26px -18px rgba(76,122,63,.7);
}
/* pile of capsules inside */
.machine-globe::after{
  content:"";
  position:absolute;
  inset:auto 26px 8px;
  height:54px;
  border-radius:50% 50% 10px 10px / 70% 70% 10px 10px;
  background:
    radial-gradient(circle at 20% 40%, var(--strawberry) 0 12px, transparent 13px),
    radial-gradient(circle at 45% 55%, var(--sunny) 0 12px, transparent 13px),
    radial-gradient(circle at 70% 40%, var(--lav) 0 12px, transparent 13px),
    radial-gradient(circle at 88% 60%, var(--sky) 0 10px, transparent 11px),
    linear-gradient(180deg,#F2F7EC,#DCE8CE);
}
.machine-body{
  background:var(--matcha-deep);
  color:#F2F7EC;
  border-radius:0 0 22px 22px;
  padding:18px 20px 22px;
  position:relative;
}
.machine-body::before{
  content:"";
  position:absolute;
  top:-6px;left:14px;right:14px;height:8px;
  background:var(--matcha-deep);
  border-radius:6px;
}
.readout{
  font-weight:700;
  font-size:clamp(.95rem,3.2vw,1.05rem);
  min-height:3.2em;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:.2em .4em;
  transition:opacity .2s ease, transform .2s var(--ease-out);
}
.readout.swap{opacity:0;transform:translateY(8px)}
.readout em{color:var(--sunny)}

/* the capsule that drops */
.capsule{
  position:absolute;
  left:50%;bottom:-30px;
  width:74px;height:96px;
  transform:translateX(-50%) translateY(0) rotate(0deg);
  opacity:0;
  z-index:3;
  filter:drop-shadow(0 8px 10px rgba(61,58,51,.28));
  transition:transform .62s var(--ease-in-out), opacity .3s ease;
}
.capsule.ready{opacity:1}
.capsule.drop{transform:translateX(-50%) translateY(64px) rotate(16deg)}
.capsule-top{
  position:absolute;top:0;left:0;right:0;height:50%;
  background:var(--strawberry);
  border-radius:40px 40px 6px 6px;
}
.capsule-bottom{
  position:absolute;bottom:0;left:0;right:0;height:50%;
  background:#FFFDF5;
  border-radius:6px 6px 40px 40px;
  border-top:3px dashed rgba(61,58,51,.25);
}
.capsule::after{ /* shine */
  content:"";
  position:absolute;top:8px;left:12px;
  width:16px;height:22px;
  background:rgba(255,255,255,.75);
  border-radius:50%;
  transform:rotate(-18deg);
}

/* lever */
.lever{
  position:absolute;
  right:-6px;top:34px;
  width:96px;height:56px;
  border:none;
  background:transparent;
  cursor:pointer;
  transform-origin:88% 50%;
  transition:transform .3s var(--spring);
  -webkit-tap-highlight-color:transparent;
}
.lever:active{transform:rotate(24deg) scale(.96)}
.lever-stick{
  position:absolute;
  top:50%;left:14px;right:22px;
  height:8px;
  background:var(--ink);
  border-radius:var(--r-pill);
  transform:translateY(-50%);
}
.lever-ball{
  position:absolute;
  top:50%;left:4px;
  width:34px;height:34px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #FFE3EC, var(--strawberry) 72%);
  color:#fff;
  font-weight:900;
  font-size:.62em;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  box-shadow:var(--shadow-sm);
}

/* =========================================================
   FLIP CARDS
   ========================================================= */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;
}
.flip{
  position:relative;
  width:100%;
  height:172px;
  padding:0;
  border:none;
  background:transparent;
  perspective:900px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.flip-inner{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transition:transform .55s var(--ease-in-out);
}
.flip[aria-pressed="true"] .flip-inner{transform:rotateY(180deg)}
.face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.15em;
  text-align:center;
  padding:16px;
  border-radius:var(--r-md);
  font-size:2.1rem;
  border:2px solid rgba(61,58,51,.1);
}
.face b{font-family:var(--font-display);font-size:1.05rem}
.face small{font-size:.72rem;font-weight:700;color:var(--ink-soft);letter-spacing:.05em;text-transform:uppercase}
.face.front{
  background:var(--cream-2);
  box-shadow:var(--shadow-sm);
}
.face.back{
  transform:rotateY(180deg);
  background:linear-gradient(160deg,var(--matcha-soft),#FFF6E6);
  font-size:.95rem;
  font-weight:700;
  color:var(--ink);
  box-shadow:var(--shadow-md);
}
.flip:hover .face.front{transform:scale(1.03)}
.flip:nth-child(1) .face.front{background:var(--sunny-soft)}
.flip:nth-child(2) .face.front{background:var(--matcha-soft)}
.flip:nth-child(4) .face.front{background:var(--strawberry-soft)}
.flip:nth-child(5) .face.front{background:var(--lav-soft)}
.flip:nth-child(6) .face.front{background:var(--sky-soft)}

/* =========================================================
   RUNAWAY BUTTON
   ========================================================= */
.runaway{
  position:relative;
  margin-top:.4em;
  padding:1em 1.8em;
  font-family:var(--font-display);
  font-size:clamp(1.05rem,4vw,1.35rem);
  font-weight:700;
  color:#fff;
  background:var(--strawberry);
  border:none;
  border-radius:var(--r-pill);
  cursor:pointer;
  box-shadow:0 5px 0 #C94A6B, var(--shadow-md);
  transition:transform .28s var(--ease-out), background-color .3s ease, box-shadow .28s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.runaway:hover{transform:scale(1.06) rotate(-1.5deg)}
.runaway:active{transform:scale(.94);box-shadow:0 2px 0 #C94A6B}
.runaway.escapes{transform:translate(var(--mx,0),var(--my,0)) scale(1.08) rotate(var(--mr,0deg))}
.runaway.caught{
  background:var(--matcha);
  box-shadow:0 5px 0 var(--matcha-deep), var(--shadow-md);
  animation:caughtWiggle .6s var(--bounce);
}
@keyframes caughtWiggle{
  0%{transform:rotate(0)}
  25%{transform:rotate(-7deg) scale(1.08)}
  55%{transform:rotate(6deg) scale(1.05)}
  100%{transform:rotate(0)}
}
.runaway-note{
  min-height:1.6em;
  margin:1.1em 0 0;
  font-weight:700;
  color:var(--ink-soft);
  font-size:.95rem;
}

/* =========================================================
   MOOD + BOWL
   ========================================================= */
.moods{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.mood{
  padding:.7em 1.15em;
  font-weight:800;
  font-size:.95rem;
  color:var(--ink);
  background:#fff;
  border:2px solid rgba(61,58,51,.12);
  border-radius:var(--r-pill);
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease-out), background-color .25s ease, color .25s ease, border-color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.mood:hover{transform:translateY(-3px) scale(1.04)}
.mood.active{
  background:var(--matcha);
  border-color:var(--matcha-deep);
  color:#fff;
  transform:translateY(-2px);
}
.mood-reply{
  min-height:2.2em;
  margin:1.2em auto 0;
  max-width:46ch;
  font-weight:700;
  color:var(--ink);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease, transform .35s var(--ease-out);
}
.mood-reply.show{opacity:1;transform:translateY(0)}

.bowl-stage{margin-top:1.4em}
.bowl{
  display:inline-block;
  cursor:pointer;
  transform-origin:50% 85%;
  transition:transform .3s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
  padding:.4em;
  border-radius:24px;
}
.bowl:hover{transform:scale(1.04)}
.bowl.poke{animation:pokeWobble .5s var(--ease-in-out)}
@keyframes pokeWobble{
  0%{transform:scale(1) rotate(0)}
  30%{transform:scale(.93) rotate(-5deg)}
  60%{transform:scale(1.06) rotate(4deg)}
  100%{transform:scale(1) rotate(0)}
}
.bowl.happy .face .mouth{stroke:var(--strawberry);stroke-width:5}
.bowl.happy .blush{opacity:1}
.blush{opacity:0;transition:opacity .3s ease}
.bowl-hint{
  margin:.2em 0 0;
  font-weight:700;
  color:var(--ink-soft);
  font-size:.9rem;
}

/* floating hearts from poke */
.heart{
  position:fixed;
  z-index:60;
  pointer-events:none;
  font-size:1.5rem;
  animation:heartFloat 1s var(--ease-out) forwards;
  will-change:transform,opacity;
}
@keyframes heartFloat{
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  20%{opacity:1;transform:translate(0,-14px) scale(1.1)}
  100%{opacity:0;transform:translate(var(--dx,0),-96px) scale(.8) rotate(var(--dr,0deg))}
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  text-align:center;
  padding:clamp(48px,9vh,88px) 0 108px;
}
.footer-big{
  font-family:var(--font-display);
  font-size:clamp(1.25rem,4.6vw,1.7rem);
  font-weight:600;
  margin:0 0 .7em;
}
.footer-small{
  color:var(--ink-soft);
  font-size:.85rem;
  margin:0;
}

/* =========================================================
   FLOATING SOUND TOGGLE + CONFETTI
   ========================================================= */
.sound{
  position:fixed;
  top:max(14px,env(safe-area-inset-top));
  right:14px;
  z-index:70;
  width:46px;height:46px;
  border-radius:50%;
  border:2px solid rgba(61,58,51,.14);
  background:#fff;
  font-size:1.15rem;
  cursor:pointer;
  box-shadow:var(--shadow-md);
  transition:transform .2s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.sound:hover{transform:scale(1.1)}
.sound[aria-pressed="false"]{opacity:.55}
#confetti{
  position:fixed;
  inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:50;
}

/* =========================================================
   REDUCED MOTION — gentler, not zero
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .word .ch{transition:color .3s ease,background-color .3s ease}
  .scrollhint{animation:none}
  .blob{animation:none}
}