:root {
  --eazo-safe-area-top: max(56px, env(safe-area-inset-top, 0px));
  --eazo-safe-area-bottom: max(34px, env(safe-area-inset-bottom, 0px));
  --rose: #d95583;
  --rose-deep: #b93c68;
  --blush: #ffd6e5;
  --lilac: #ded8ff;
  --cream: #fff6e9;
  --ink: #5e5369;
  --cloud: rgba(255, 255, 255, .52);
  --cool: 0;
  --warm: 1;
  --script: "Segoe Print", "Comic Sans MS", "Marker Felt", "Bradley Hand", cursive;
  --round: "Nunito", "Avenir Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body {
  font-family: var(--script);
  color: var(--ink);
  background: #f9d7e9;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; }

.app {
  position: relative;
  min-block-size: 100dvb;
  padding-top: var(--eazo-safe-area-top);
  padding-bottom: var(--eazo-safe-area-bottom);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #ffd9e6 calc((1 - var(--cool)) * 100%), #b8c9df calc(var(--cool) * 100%)) 0%,
      color-mix(in srgb, #eee4ff calc((1 - var(--cool)) * 100%), #7e95ad calc(var(--cool) * 100%)) 100%);
  transition: background 900ms ease;
}

.sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -2; }
.haze { position: absolute; inset: -20%; background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .5), transparent 34%), radial-gradient(circle at 45% 70%, rgba(255, 228, 239, .45), transparent 42%); filter: blur(8px); opacity: calc(.8 - var(--cool) * .28); }
.cloud { position: absolute; opacity: .52; animation: drift var(--dur) linear infinite; transform: translateX(var(--start)); }
.cloud::before, .cloud::after { content: ""; position: absolute; background: var(--cloud); border-radius: 999px; }
.cloud, .cloud::before, .cloud::after { width: var(--w); height: calc(var(--w) * .34); background: var(--cloud); border-radius: 999px; filter: blur(.2px); }
.cloud::before { width: 45%; height: 70%; left: 18%; top: -36%; }
.cloud::after { width: 52%; height: 80%; right: 14%; top: -42%; }
.c1 { --w: 210px; --start: -20vw; --dur: 38s; left: -22%; top: 18%; }
.c2 { --w: 150px; --start: 50vw; --dur: 50s; left: 38%; top: 44%; opacity: .34; }
.c3 { --w: 280px; --start: 75vw; --dur: 70s; left: 18%; top: 76%; opacity: .28; }
@keyframes drift { to { transform: translateX(calc(var(--start) + 120vw)); } }

.particle { position: absolute; pointer-events: none; will-change: transform, opacity; }
.heart { width: 12px; height: 12px; transform: rotate(-45deg); background: rgba(232, 101, 145, .45); border-radius: 3px; animation: heartFloat 8s ease-in-out infinite; }
.heart::before, .heart::after { content: ""; position: absolute; width: 12px; height: 12px; background: inherit; border-radius: 50%; }
.heart::before { top: -6px; left: 0; }
.heart::after { left: 6px; top: 0; }
.glitter { width: 4px; height: 4px; background: rgba(255, 255, 255, .82); border-radius: 50%; box-shadow: 0 0 12px rgba(255, 255, 255, .8); animation: twinkle 4s ease-in-out infinite; }
@keyframes heartFloat { 0%, 100% { transform: translateY(0) rotate(-45deg); } 50% { transform: translateY(-14px) rotate(-45deg); } }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: .92; transform: scale(1.35); } }
.pop { animation: popFall 850ms ease-in forwards !important; }
@keyframes popFall { 45% { opacity: .9; transform: translateY(28px) scale(.8) rotate(-45deg); } 100% { opacity: 0; transform: translateY(80px) scale(1.8) rotate(-45deg); } }

.rain { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 700ms ease; z-index: -1; }
.rain.on { opacity: .72; }
.drop { position: absolute; width: 1px; height: 26px; border-radius: 99px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .72)); animation: rain 1.25s linear infinite; }
@keyframes rain { from { transform: translateY(-40px) translateX(0); } to { transform: translateY(110dvh) translateX(-22px); } }

.stage {
  min-block-size: calc(100dvb - var(--eazo-safe-area-top) - var(--eazo-safe-area-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.2dvh, 18px);
  padding: 12px clamp(18px, 5vw, 40px);
  position: relative;
  z-index: 1;
}

.topline {
  position: absolute;
  top: var(--eazo-safe-area-top);
  left: max(18px, env(safe-area-inset-left, 0px));
  right: max(18px, env(safe-area-inset-right, 0px));
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 6;
}
.lang {
  pointer-events: auto;
  min-width: 88px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .34);
  color: #6d6176;
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(128, 93, 126, .08);
  backdrop-filter: blur(10px);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
}
.lang .seg { opacity: .42; transition: opacity 200ms ease, color 200ms ease; }
.lang .seg.active { opacity: 1; color: var(--rose-deep); font-weight: 700; }

.bubble {
  max-width: min(92vw, 430px);
  padding: 13px 18px 14px;
  border-radius: 26px 26px 28px 10px;
  background: rgba(255, 255, 255, .48);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 18px 55px rgba(133, 91, 124, .08);
  text-align: center;
  font-size: clamp(17px, 4.7vw, 24px);
  line-height: 1.24;
  color: #6d5570;
  transition: transform 380ms ease, background 500ms ease;
}
.bubble.ask { animation: softAsk 820ms ease; }
@keyframes softAsk { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-6px); } }

.play-space {
  position: relative;
  width: min(100%, 560px);
  min-height: clamp(420px, 66dvh, 650px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2dvh, 22px);
  padding: 2px 0;
}

.bear-wrap { position: relative; width: min(64vw, 245px); aspect-ratio: 1 / .96; display: grid; place-items: center; margin-top: 4px; }
.cloud-seat { position: absolute; left: 6%; right: 6%; bottom: 5%; height: 28%; }
.cloud-seat span { position: absolute; bottom: 0; background: rgba(255, 255, 255, .56); border: 1px solid rgba(255, 255, 255, .65); border-radius: 999px; box-shadow: 0 20px 45px rgba(160, 111, 149, .1); }
.cloud-seat span:nth-child(1) { left: 3%; width: 45%; height: 56%; }
.cloud-seat span:nth-child(2) { left: 24%; width: 53%; height: 82%; }
.cloud-seat span:nth-child(3) { right: 2%; width: 42%; height: 60%; }

.bear { position: relative; width: 128px; height: 150px; animation: bearBreathe 4.8s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes bearBreathe { 50% { transform: translateY(-3px) scale(1.012); } }
.ear { position: absolute; top: 13px; width: 36px; height: 36px; border-radius: 50%; background: var(--cream); border: 1.4px solid rgba(133, 99, 108, .36); }
.ear.left { left: 15px; } .ear.right { right: 15px; }
.ear::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #ffdbe5; opacity: .7; }
.head { position: absolute; top: 24px; left: 20px; width: 88px; height: 78px; background: var(--cream); border: 1.4px solid rgba(133, 99, 108, .38); border-radius: 45% 45% 48% 48%; box-shadow: inset -8px -12px 20px rgba(230, 198, 179, .16); }
.body { position: absolute; left: 29px; top: 85px; width: 70px; height: 58px; background: var(--cream); border: 1.4px solid rgba(133, 99, 108, .34); border-radius: 48% 48% 42% 42%; }
.paw { position: absolute; left: 84px; top: 94px; width: 23px; height: 37px; background: var(--cream); border: 1.3px solid rgba(133, 99, 108, .32); border-radius: 999px; transform: rotate(-18deg); transform-origin: 50% 10%; }
.bear.wave .paw { animation: wave 760ms ease-in-out infinite; }
@keyframes wave { 50% { transform: rotate(23deg) translateY(-5px); } }
.eye { position: absolute; top: 32px; width: 5px; height: 5px; background: #5a4e5b; border-radius: 50%; transition: all 260ms ease; }
.eye.left { left: 29px; } .eye.right { right: 29px; }
.mood-1 .eye, .mood-2 .eye { height: 4px; transform: translateY(1px) scaleX(1.25); }
.mood-3 .eye, .mood-4 .eye { height: 3px; transform: translateY(2px) scaleX(1.7); }
.mood-5 .eye { height: 2px; transform: translateY(3px) scaleX(2.1); }
.happy .eye { width: 12px; height: 7px; background: transparent; border-bottom: 2px solid #5a4e5b; border-radius: 0 0 999px 999px; }
.muzzle { position: absolute; left: 33px; top: 42px; width: 22px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, .42); }
.nose { position: absolute; left: 42px; top: 42px; width: 6px; height: 4px; border-radius: 50%; background: #6b5a60; }
.mouth { position: absolute; left: 44px; top: 51px; width: 10px; height: 7px; border-left: 1.5px solid #6b5a60; border-bottom: 1.5px solid #6b5a60; border-radius: 0 0 0 10px; transform: rotate(-36deg); transition: all 240ms ease; }
.mood-2 .mouth, .mood-3 .mouth { transform: rotate(38deg); }
.mood-4 .mouth, .mood-5 .mouth { width: 13px; height: 10px; transform: rotate(44deg) translateX(-1px); }
.happy .mouth { left: 38px; top: 49px; width: 19px; height: 11px; border: 0; border-bottom: 2px solid #6b5a60; border-radius: 0 0 999px 999px; transform: none; }
.cheek { position: absolute; top: 49px; width: 15px; height: 8px; background: rgba(246, 153, 174, .42); border-radius: 50%; }
.cheek.left { left: 14px; } .cheek.right { right: 14px; }
.tear { position: absolute; left: 67px; top: 56px; width: 8px; height: 12px; background: rgba(143, 184, 219, .72); border-radius: 70% 70% 70% 10%; transform: rotate(22deg); opacity: 0; }
.tear.roll { animation: tearRoll 900ms ease-in forwards; }
@keyframes tearRoll { 0% { opacity: 0; transform: translateY(-5px) rotate(22deg) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(42px) rotate(22deg) scale(1); } }

.controls {
  position: relative;
  width: min(100%, 450px);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.stay {
  min-width: min(82vw, 330px);
  min-height: 58px;
  padding: 12px 38px;
  border: 0;
  border-radius: 999px;
  color: #fff8fb;
  background: linear-gradient(180deg, #e86f9b, var(--rose-deep));
  box-shadow: 0 18px 46px rgba(202, 67, 112, .23), 0 0 0 8px rgba(255, 255, 255, .18);
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  font-size: clamp(21px, 6vw, 31px);
}
.leave {
  position: absolute;
  min-width: 58px;
  min-height: 44px;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  background: rgba(255, 255, 255, .42);
  color: rgba(100, 86, 109, .72);
  box-shadow: 0 8px 24px rgba(112, 92, 118, .08);
  cursor: pointer;
  white-space: nowrap;
  font-size: 15px;
  z-index: 3;
  left: 50%; top: 84px;
  transform: translateX(-50%);
  transition: left 520ms cubic-bezier(.18, 1.45, .32, 1), top 520ms cubic-bezier(.18, 1.45, .32, 1), opacity 220ms ease;
}
.leave.caught { outline: 2px solid rgba(185, 60, 104, .2); background: rgba(255, 255, 255, .62); }
.instruction { max-width: min(88vw, 380px); text-align: center; font-size: clamp(13px, 3.55vw, 16px); line-height: 1.35; color: rgba(94, 83, 105, .72); margin: 2px 0 0; }

.ending {
  position: absolute;
  inset: 0;
  padding-top: var(--eazo-safe-area-top);
  padding-bottom: var(--eazo-safe-area-bottom);
  display: none;
  align-items: center;
  justify-content: center;
  padding-left: clamp(18px, 5vw, 42px);
  padding-right: clamp(18px, 5vw, 42px);
  z-index: 5;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(4px);
}
.ending.show { display: flex; }
.polaroid {
  width: min(100%, 390px);
  max-height: calc(100dvb - var(--eazo-safe-area-top) - var(--eazo-safe-area-bottom) - 20px);
  overflow: auto;
  background: rgba(255, 253, 249, .88);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 18px 18px 26px 26px;
  padding: 16px 16px 24px;
  box-shadow: 0 26px 80px rgba(88, 70, 92, .16);
  text-align: center;
}
.photo {
  min-height: 180px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 219, 232, .76), rgba(226, 219, 255, .68));
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 14px;
  position: relative;
}
.ending.leave-end .photo { background: linear-gradient(180deg, rgba(174, 194, 214, .78), rgba(126, 149, 173, .56)); }
.mini-bear { transform: scale(.72); }
.caption { font-size: clamp(18px, 5vw, 23px); line-height: 1.24; margin: 4px auto 6px; color: #685669; }
.closing { font-size: 15px; line-height: 1.42; color: rgba(94, 83, 105, .76); margin: 0 auto 14px; }
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.result-actions button, .details-toggle {
  min-height: 44px;
  border-radius: 999px;
  padding: 9px 20px;
  border: 1px solid rgba(210, 130, 160, .28);
  background: rgba(255, 255, 255, .58);
  color: #6b5770;
  cursor: pointer;
  white-space: nowrap;
  font-size: 16px;
}
.result-actions button:first-child { background: var(--rose); color: white; border-color: transparent; }
details { text-align: left; margin-top: 8px; }
summary { list-style: none; text-align: center; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.said { margin: 12px 0 0; padding: 0 0 0 18px; font-size: 15px; line-height: 1.55; color: rgba(94, 83, 105, .78); }
.said li { margin-bottom: 4px; }

.toast { position: fixed; left: 50%; bottom: calc(var(--eazo-safe-area-bottom) + 10px); transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; padding: 10px 16px; box-shadow: 0 16px 40px rgba(90, 70, 90, .13); transition: 240ms ease; z-index: 8; max-width: min(88vw, 360px); text-align: center; font-size: 15px; color: #6b5770; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.heart-burst { animation: burst 900ms cubic-bezier(.1, .75, .25, 1) forwards !important; }
@keyframes burst { to { opacity: 0; transform: translate(var(--bx), var(--by)) rotate(-45deg) scale(2.4); } }

@media (min-width: 720px) {
  .play-space { min-height: clamp(500px, 70dvh, 720px); }
  .bear-wrap { width: 270px; }
  .bear { transform: scale(1.08); }
  .bubble { margin-top: 12px; }
}

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