:root {
  --bg-1: #ffe3ef;
  --bg-2: #ffd3e4;
  --bg-3: #fbe4ff;
  --pink-50: #fff6fa;
  --pink-100: #ffe8f1;
  --pink-200: #ffcade;
  --pink-300: #ffa3c4;
  --pink-500: #ff5c93;
  --pink-600: #ef3f7d;
  --text: #6e2443;
  --muted: #a3587a;
  --card: rgba(255, 255, 255, 0.72);
  --card-border: rgba(255, 255, 255, 0.9);
  --shadow: 0 18px 50px -18px rgba(214, 51, 112, 0.35);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: clamp(16px, 1.6vmin + 10px, 22px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  position: fixed;
  inset: 0;
  font-family: "Mali", "Noto Sans Thai", "Sukhumvit Set", "Thonburi", system-ui, sans-serif;
  color: var(--text);
  background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
  background-color: var(--bg-2);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* ---------- floating hearts ---------- */
.hearts {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.float-heart {
  position: absolute;
  left: var(--x);
  top: 100%;
  width: var(--size);
  height: var(--size);
  color: var(--c);
  opacity: var(--o);
  animation: floatUp var(--dur) linear var(--delay) infinite;
  will-change: transform;
}
.float-heart svg { width: 100%; height: 100%; display: block; }
@keyframes floatUp {
  0%   { transform: translate3d(0, 0, 0) rotate(-12deg); }
  50%  { transform: translate3d(var(--sway), -62vh, 0) rotate(12deg); }
  100% { transform: translate3d(0, -125vh, 0) rotate(-12deg); }
}

/* ---------- stage & scenes ---------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
}
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.scene.leaving {
  animation: sceneOut 0.36s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes sceneOut {
  to { opacity: 0; transform: translateY(-14px) scale(0.97); }
}

.card {
  position: relative;
  width: min(100%, 440px);
  margin: auto;
  padding: 2.2rem 1.5rem 2rem;
  text-align: center;
  background: var(--card);
  border: 1.5px solid var(--card-border);
  border-radius: 32px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.scene.active .card {
  animation: cardIn 0.6s var(--ease-out) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.reveal { opacity: 0; }
.scene.active .reveal {
  animation: rise 0.7s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 110ms + 150ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- type ---------- */
h1, p { margin: 0; text-wrap: balance; }
h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pink-600);
}
.lead {
  margin-top: 0.4rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--muted);
}
.question {
  margin-top: 0.6rem;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}
.question.big { font-size: 1.75rem; color: var(--pink-600); }
.note {
  margin-top: 1.1rem;
  font-size: 0.95rem;
  color: var(--muted);
}

.emoji {
  font-size: 3.4rem;
  line-height: 1.2;
  margin-bottom: 0.4rem;
  user-select: none;
  -webkit-user-select: none;
}
.emoji.sm { font-size: 2.6rem; }
.scene.active .bob { animation: rise 0.7s var(--ease-out) both, bob 2.6s ease-in-out 1s infinite; animation-delay: calc(var(--i, 0) * 110ms + 150ms), 1s; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.pop { animation: popIn 0.6s var(--spring) both; }
@keyframes popIn {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- buttons ---------- */
.actions {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.actions.row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  --s: 1;
  --ty: 0px;
  position: relative;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  min-width: 9.5rem;
  min-height: 3rem;
  padding: 0.85em 1.7em;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  scale: var(--s);
  translate: 0 var(--ty);
  transform-origin: 50% 0;
  transition:
    scale 0.55s var(--spring),
    translate 0.55s var(--spring),
    opacity 0.35s ease,
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}
.btn:active { transform: scale(0.95); }
.btn:focus-visible { outline: 3px solid var(--pink-300); outline-offset: 3px; }
.btn .lbl { display: inline-block; }

.btn-yes {
  z-index: 2;
  color: #fff;
  background: linear-gradient(135deg, #ff7aa8 0%, var(--pink-500) 55%, var(--pink-600) 100%);
  box-shadow: 0 10px 24px -8px rgba(239, 63, 125, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-yes::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255, 92, 147, 0.45);
  animation: ring 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes ring {
  0%   { box-shadow: 0 0 0 0 rgba(255, 92, 147, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 92, 147, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 92, 147, 0); }
}

.btn-no, .btn-soft {
  z-index: 1;
  color: var(--pink-600);
  background: #fff;
  box-shadow: 0 6px 16px -8px rgba(214, 51, 112, 0.35), inset 0 0 0 2px var(--pink-200);
}
.btn-ghost {
  margin-top: 1.4rem;
  min-width: 0;
  min-height: 2.6rem;
  font-size: 0.95rem;
  padding: 0.6em 1.4em;
  color: var(--pink-600);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1.5px var(--pink-200);
}

.btn.flipping { animation: flip 0.42s ease-in-out; }
@keyframes flip {
  0%   { rotate: y 0deg; }
  50%  { rotate: y 90deg; }
  100% { rotate: y 0deg; }
}
.btn.wiggle { animation: wiggle 0.45s ease-in-out; }
@keyframes wiggle {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -6deg; }
  40% { rotate: 5deg; }
  60% { rotate: -3deg; }
  80% { rotate: 2deg; }
}

/* runaway No button (lives on <body> once it starts running) */
.btn.runaway {
  position: fixed;
  z-index: 40;
  margin: 0;
  transition: translate 0.42s var(--spring), scale 0.35s var(--spring), opacity 0.3s ease;
}
.btn.gone { scale: 0; opacity: 0; pointer-events: none; }
.btn-placeholder { visibility: hidden; pointer-events: none; }

/* ---------- story ---------- */
.scene-story { cursor: pointer; }
.story-card { padding-bottom: 1.4rem; }
.story {
  display: grid;
  align-items: center;
  min-height: 12.5rem;
}
.story-line {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
}
.story-line.in { visibility: visible; opacity: 1; }
.story-line.in > * { animation: rise 0.75s var(--ease-out) both; }
.story-line.in > :nth-child(1) { animation-delay: 0.05s; }
.story-line.in > :nth-child(2) { animation-delay: 0.3s; }
.story-line.in > :nth-child(3) { animation-delay: 0.65s; }
.story-line.out {
  visibility: visible;
  animation: lineOut 0.35s var(--ease-out) forwards;
}
@keyframes lineOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-12px); }
}
.story-line .s1 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--pink-600);
  line-height: 1.5;
}
.story-line .s2 {
  margin-top: 0.5rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text);
}

.swapline .from, .swapline .to {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.6;
}
.swapline .tag {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
  margin-right: 0.2rem;
}
.swapline .from { color: var(--muted); }
.swapline .strike {
  position: relative;
  display: inline-block;
}
.swapline .strike::after {
  content: "";
  position: absolute;
  left: -4%;
  top: 52%;
  width: 108%;
  height: 3px;
  border-radius: 3px;
  background: var(--pink-500);
  transform: scaleX(0);
  transform-origin: left center;
}
.swapline.in .strike::after { animation: strike 0.5s var(--ease-out) 0.85s forwards; }
@keyframes strike { to { transform: scaleX(1); } }
.swapline.in .from { animation: rise 0.7s var(--ease-out) 0.05s both, dim 0.5s ease 1.3s forwards; }
@keyframes dim { to { opacity: 0.55; } }
.swapline .to { margin-top: 0.4rem; color: var(--pink-600); }
.swapline.in .to { animation: popIn 0.7s var(--spring) 1.55s both; }
.swapline .glow {
  display: inline-block;
  text-shadow: 0 0 18px rgba(255, 92, 147, 0.45);
}

.story-foot {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.dots { display: flex; gap: 6px; }
.dots i {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--pink-200);
  transition: width 0.4s var(--ease-out), background-color 0.4s ease;
}
.dots i.on { width: 20px; background: var(--pink-500); }
.hint {
  font-size: 0.9rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hint.show { opacity: 1; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* ---------- beating heart ---------- */
.beat {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 0.6rem;
  color: var(--pink-500);
  filter: drop-shadow(0 8px 14px rgba(239, 63, 125, 0.35));
}
.scene.active .beat {
  animation: rise 0.7s var(--ease-out) both, beat 1.2s ease-in-out 1s infinite;
  animation-delay: calc(var(--i, 0) * 110ms + 150ms), 1s;
}
@keyframes beat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.15); }
  30% { transform: scale(1); }
  45% { transform: scale(1.12); }
  60% { transform: scale(1); }
}

/* ---------- takeover (Yes fills the screen) ---------- */
.takeover {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  border: 0;
  padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
  font: inherit;
  color: #fff;
  background: linear-gradient(150deg, #ff8ab3 0%, var(--pink-500) 50%, var(--pink-600) 100%);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.takeover-big {
  font-size: clamp(3rem, 14vmin, 6rem);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 6px 24px rgba(160, 20, 70, 0.3);
}
.takeover.ready .takeover-big { animation: beat 1.3s ease-in-out infinite; }
.takeover-hint {
  font-size: 1.1rem;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.takeover.ready .takeover-hint { opacity: 0.9; }

/* ---------- celebrate ---------- */
.scene-yay {
  background: radial-gradient(120% 90% at 50% 30%, #fff0f6 0%, #ffd6e7 55%, #ffc2da 100%);
}
.yay {
  width: min(100%, 480px);
  margin: auto;
  text-align: center;
}
.yay h1 { font-size: 2.6rem; }
.yay .question { font-size: 1.6rem; color: var(--pink-600); }
.yay .lead strong { color: var(--text); }
.beat.big { width: 6rem; height: 6rem; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(14px + var(--safe-t));
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  padding: 0.65rem 1.1rem 0.65rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 30px -10px rgba(214, 51, 112, 0.45);
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-130%) scale(0.92);
  transition: transform 0.5s var(--spring), opacity 0.3s ease;
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast.bump { animation: bump 0.4s var(--spring); }
@keyframes bump {
  0% { scale: 1; }
  40% { scale: 1.07; }
  100% { scale: 1; }
}
.toast-emoji { font-size: 1.5rem; line-height: 1; }
.toast-text { line-height: 1.4; }

/* ---------- confetti ---------- */
.confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 70;
  pointer-events: none;
}

/* ---------- sizes ---------- */
@media (min-width: 700px) {
  .card { width: min(100%, 540px); padding: 2.8rem 2.4rem 2.6rem; border-radius: 40px; }
}
@media (max-height: 560px) {
  .card { padding: 1.3rem 1.2rem 1.3rem; }
  .emoji { font-size: 2.4rem; margin-bottom: 0.2rem; }
  .actions { margin-top: 1rem; }
  .beat { width: 3.2rem; height: 3.2rem; }
  .beat.big { width: 4rem; height: 4rem; }
  .story { min-height: 9rem; }
}
@media (max-width: 360px) {
  .question { font-size: 1.3rem; }
  .question.big { font-size: 1.5rem; }
  .swapline .from, .swapline .to { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .float-heart { display: none; }
}