:root {
  --bg: #0f0a14;
  --ink: #2b1a2e;
  --cream: #fff4e6;
  --pink: #ff5c8a;
  --pink-deep: #c63d68;
  --gold: #ffcf6b;
  --muted: #2a2132;
  --muted-deep: #17111c;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--cream);
  font-family: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- ambience ---------- */

.sky { position: fixed; inset: 0; pointer-events: none; }
.sky i {
  position: absolute;
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 calc(var(--s) * 3) var(--c);
  opacity: .15;
  animation: twinkle var(--d) ease-in-out var(--delay) infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .12; transform: scale(.8); }
  50% { opacity: .8; transform: scale(1.15); }
}

.glow {
  position: fixed;
  left: 50%; top: 38%;
  width: min(90vw, 720px); aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(255, 175, 90, .16), rgba(255, 92, 138, .07) 40%, transparent 68%);
  pointer-events: none;
  transition: background 1.2s ease, scale 1.2s ease;
}
body.celebrate .glow {
  scale: 1.35;
  background: radial-gradient(circle, rgba(255, 207, 107, .3), rgba(255, 92, 138, .14) 42%, transparent 70%);
}

/* ---------- layout ---------- */

.stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  animation: enter .9s var(--spring) both;
}
@keyframes enter {
  from { opacity: 0; transform: translateY(24px) scale(.94); }
}

/* ---------- critter ---------- */

.critter {
  width: clamp(180px, 34vw, 280px);
  aspect-ratio: 1;
  margin-bottom: -6px;
  user-select: none;
  -webkit-user-select: none;
}
.critter svg { width: 100%; height: 100%; overflow: visible; display: block; }

.critter .bod {
  transform-box: view-box;
  transform-origin: 110px 195px;
  animation: bob 2.8s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-4px) scale(.99, 1.01); }
}

.critter .shadow {
  fill: #000;
  opacity: .45;
  transform-box: fill-box;
  transform-origin: center;
}

.arm path {
  fill: none;
  stroke: #fff1de;
  stroke-width: 10;
  stroke-linecap: round;
}
.arm { transform-box: view-box; transition: transform .35s var(--spring); }
.arm-l { transform-origin: 33px 150px; }
.arm-r { transform-origin: 187px 150px; }

.ink { fill: none; stroke: var(--ink); stroke-width: 3.6; stroke-linecap: round; }
.ink.thick { stroke-width: 5; }

.blush { fill: #ff8fb1; opacity: .5; transition: opacity .3s, transform .3s; transform-box: fill-box; transform-origin: center; }

.m { opacity: 0; transition: opacity .12s; }
.critter[data-mood="idle"]  .m-idle,
.critter[data-mood="hope"]  .m-hope,
.critter[data-mood="sad"]   .m-sad,
.critter[data-mood="happy"] .m-happy { opacity: 1; }

.look {
  transform: translate(var(--lx, 0px), var(--ly, 0px));
  transition: transform .12s ease-out;
}

.blink {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 4.6s infinite;
}
@keyframes blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96.5% { transform: scaleY(.1); }
}

.flame {
  transform-box: view-box;
  transform-origin: 110px 42px;
  animation: flicker 1.6s ease-in-out infinite;
  transition: opacity .25s, scale .25s;
}
@keyframes flicker {
  0%, 100% { transform: rotate(-3deg) scale(1, 1); }
  30% { transform: rotate(2deg) scale(.96, 1.06); }
  60% { transform: rotate(-1deg) scale(1.03, .95); }
}
.flame-glow { animation: pulse 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 50% { transform: scale(1.18); opacity: .75; } }

.smoke circle { fill: #d9cfd9; opacity: 0; transform-box: fill-box; transform-origin: center; }
.critter.blown .flame { opacity: 0; scale: .2; }
.critter.blown .smoke circle { animation: smoke 1.6s ease-out forwards; }
.critter.blown .smoke circle:nth-child(2) { animation-delay: .15s; }
.critter.blown .smoke circle:nth-child(3) { animation-delay: .3s; }
@keyframes smoke {
  0% { opacity: .7; transform: translate(0, 0) scale(.6); }
  100% { opacity: 0; transform: translate(6px, -38px) scale(2.2); }
}

/* moods */
.critter[data-mood="hope"] .bod { animation: hope .9s ease-in-out infinite; }
@keyframes hope {
  0%, 100% { transform: translateY(0) scale(1.03); }
  50% { transform: translateY(-7px) scale(1.04, 1.02); }
}
.critter[data-mood="hope"] .blush { opacity: .85; transform: scale(1.2); }
.critter[data-mood="hope"] .arm-l { transform: rotate(-28deg); }
.critter[data-mood="hope"] .arm-r { transform: rotate(28deg); }

.critter[data-mood="sad"] .bod { animation: flinch .45s ease-out; }
@keyframes flinch {
  0% { transform: translateX(0) scale(1); }
  25% { transform: translateX(-7px) scale(.97, 1.02) rotate(-3deg); }
  55% { transform: translateX(5px) rotate(2deg); }
  100% { transform: translateX(0) scale(.98, 1); }
}
.critter[data-mood="sad"] .arm-l { transform: rotate(60deg); }
.critter[data-mood="sad"] .arm-r { transform: rotate(-60deg); }
.critter[data-mood="sad"] .tear { animation: tear 1s ease-in forwards; }
@keyframes tear { from { transform: translateY(-4px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(12px); opacity: 0; } }

.critter[data-mood="happy"] .bod { animation: hop .62s cubic-bezier(.3, 0, .5, 1) infinite alternate; }
@keyframes hop {
  0% { transform: translateY(0) scale(1.08, .92); }
  35% { transform: translateY(-12px) scale(.96, 1.05); }
  100% { transform: translateY(-26px) scale(1, 1); }
}
.critter[data-mood="happy"] .shadow { animation: shadow .62s cubic-bezier(.3, 0, .5, 1) infinite alternate; }
@keyframes shadow { to { transform: scale(.7); opacity: .25; } }
.critter[data-mood="happy"] .blush { opacity: .9; transform: scale(1.25); }
.critter[data-mood="happy"] .arm-l { animation: wave-l .31s ease-in-out infinite alternate; }
.critter[data-mood="happy"] .arm-r { animation: wave-r .31s ease-in-out infinite alternate; }
@keyframes wave-l { from { transform: rotate(-10deg); } to { transform: rotate(-55deg); } }
@keyframes wave-r { from { transform: rotate(10deg); } to { transform: rotate(55deg); } }

.critter.wishable { cursor: pointer; }
.critter.wishable .flame-glow { animation-duration: .9s; }

/* ---------- copy ---------- */

.title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.title .line1 {
  font-size: clamp(1.7rem, 5vw, 2.9rem);
  background: linear-gradient(92deg, #ff7aa8 10%, var(--gold) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.title .line2 {
  font-size: clamp(1.2rem, 3.4vw, 1.9rem);
  font-weight: 600;
  color: var(--cream);
}
.title .w {
  display: inline-block;
  animation: word .6s var(--spring) both;
  animation-delay: calc(var(--i) * 70ms);
}
.title .line1.split { background: none; color: inherit; }
.title .line1.split .w {
  background: linear-gradient(92deg, #ff7aa8, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 .04em;
}
@keyframes word {
  from { opacity: 0; transform: translateY(18px) scale(.6) rotate(-6deg); }
}

.dock { display: grid; place-items: center; margin-top: 6px; min-height: 64px; }
.dock > * { grid-area: 1 / 1; }

.hint {
  margin: 0;
  max-width: 22em;
  min-height: 1.4em;
  font-size: clamp(.95rem, 2.4vw, 1.1rem);
  font-weight: 500;
  color: rgba(255, 244, 230, .7);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s, transform .5s var(--spring);
}
.hint.show { opacity: 1; transform: none; }

/* ---------- buttons ---------- */

.actions {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  transition: opacity .35s, transform .35s;
}

.btn {
  font: inherit;
  font-size: clamp(1.05rem, 2.6vw, 1.2rem);
  font-weight: 600;
  border: 0;
  border-radius: 16px;
  padding: .62em 1.7em;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.yes {
  color: #fff;
  background: linear-gradient(180deg, #ff6f98, var(--pink));
  box-shadow: 0 6px 0 var(--pink-deep), 0 14px 30px -8px rgba(255, 92, 138, .6);
  scale: var(--grow, 1);
  transition: scale .45s var(--spring), translate .12s, box-shadow .12s, filter .2s;
}
.yes:hover { translate: 0 -2px; box-shadow: 0 8px 0 var(--pink-deep), 0 18px 36px -8px rgba(255, 92, 138, .75); filter: brightness(1.05); }
.yes:active { translate: 0 5px; box-shadow: 0 1px 0 var(--pink-deep), 0 8px 18px -8px rgba(255, 92, 138, .6); }

.no {
  color: rgba(255, 244, 230, .82);
  background: var(--muted);
  box-shadow: 0 6px 0 var(--muted-deep);
}
.no.ghost { visibility: hidden; pointer-events: none; }
.no.loose {
  position: fixed;
  left: 0; top: 0;
  z-index: 5;
  transition: transform .42s var(--spring), opacity .3s, scale .3s;
}
.no.loose.instant { transition: none; }
.no.gone { opacity: 0; scale: .2; pointer-events: none; }

body.celebrate .actions { opacity: 0; transform: scale(.6); pointer-events: none; }

/* ---------- fx ---------- */

.fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }

@media (prefers-reduced-motion: reduce) {
  .critter .bod, .blink, .flame, .flame-glow, .sky i { animation: none !important; }
  .no.loose { transition: opacity .3s; }
  .title .w { animation-duration: .01s; }
}