:root {
  --red: #ec3159;
  --deep-red: #b5123c;
  --wine: #7f0d2c;
  --cream: #fff7f2;
  --soft-pink: #ffe1e5;
  --ink: #5a1f31;
  --shadow: 0 20px 50px rgba(132, 8, 43, 0.19);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #e72d54; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Prompt", sans-serif;
  background:
    radial-gradient(circle at 10% 14%, rgba(255, 255, 255, .2) 0 3px, transparent 4px),
    radial-gradient(circle at 90% 80%, rgba(255, 255, 255, .13) 0 4px, transparent 5px),
    linear-gradient(145deg, #f65370 0%, #e82852 42%, #bf123d 100%);
}

body::before, body::after {
  position: fixed;
  z-index: 0;
  width: 42vmax;
  height: 42vmax;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  filter: blur(4px);
}
body::before { top: -26vmax; left: -20vmax; background: rgba(255, 230, 229, .13); }
body::after { right: -29vmax; bottom: -28vmax; background: rgba(96, 0, 25, .14); }

button { font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #ffbd39; outline-offset: 4px; }

.ambient-hearts { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ambient-heart { position: absolute; bottom: -8vh; color: rgba(255,255,255,.32); font-size: clamp(18px, 3vw, 34px); animation: drift var(--duration) linear var(--delay) infinite; }
@keyframes drift { to { transform: translate(var(--sway), -116vh) rotate(24deg); opacity: 0; } }

.sound-toggle {
  position: fixed; z-index: 5; top: 18px; right: 18px; display: inline-flex; gap: 7px; align-items: center;
  padding: 8px 12px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; color: white;
  background: rgba(120, 4, 37, .22); box-shadow: 0 4px 15px rgba(90, 0, 26, .1); cursor: pointer; font-size: .76rem;
  backdrop-filter: blur(8px);
}
.sound-toggle span:first-child { font-size: 1.05rem; }

.app-shell { position: relative; z-index: 1; display: grid; place-items: center; min-height: 100vh; padding: 78px 18px 36px; }

.love-meter { position: absolute; top: 27px; left: 50%; display: flex; align-items: center; gap: 9px; width: min(310px, calc(100% - 122px)); color: white; transform: translateX(-50%); font-size: .72rem; }
.meter-heart { color: #fff5e9; font-size: 1.13rem; animation: heartbeat 1.5s ease-in-out infinite; }
.meter-track { height: 7px; flex: 1; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .27); }
.meter-fill { width: 0%; height: 100%; border-radius: inherit; background: #fff5ed; box-shadow: 0 0 12px white; transition: width .65s cubic-bezier(.2,.9,.3,1.2); }
.meter-label { min-width: 43px; text-align: right; }

.scene { width: min(100%, 490px); text-align: center; animation: scene-in .45s both ease-out; }
.scene[hidden] { display: none; }
@keyframes scene-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.scene:first-of-type { color: white; }
.scene h1, .scene h2 { margin: 0; font-family: "Mali", cursive; font-weight: 700; line-height: 1.24; letter-spacing: -.035em; }
h1 { font-size: clamp(2.22rem, 7.3vw, 3.45rem); text-shadow: 0 4px 0 rgba(145, 0, 39, .12); }
h2 { color: #a50c35; font-size: clamp(1.85rem, 6vw, 2.65rem); }
h2 em { color: var(--red); font-style: normal; }
.eyebrow { margin: 0 0 11px; font-weight: 600; font-size: .79rem; letter-spacing: .08em; }
.scene:first-of-type .eyebrow { color: #ffe8e4; }
.subtext, .card > p:not(.eyebrow) { margin: 16px auto 22px; font-size: .93rem; line-height: 1.75; }
.tiny-note { margin: 14px 0 0; opacity: .82; font-size: .72rem; }

.hero-bear { position: relative; width: 142px; height: 131px; margin: 0 auto 14px; filter: drop-shadow(0 13px 17px rgba(118, 0, 36, .2)); }
.bear-ear { position: absolute; top: 8px; width: 52px; height: 52px; border-radius: 50%; background: #fff6e8; }
.ear-left { left: 8px; }.ear-right { right: 8px; }
.bear-face { position: absolute; inset: 27px 11px 0; border-radius: 48% 48% 45% 45%; background: #fff6e8; }
.eye { position: absolute; top: 43px; color: #7d3940; font-family: sans-serif; font-size: 22px; }.left-eye { left: 32px; }.right-eye { right: 32px; }
.snout { position: absolute; top: 55px; left: 50%; color: #8b4650; transform: translateX(-50%); font: 27px/1 serif; }
.blush { position: absolute; top: 67px; width: 19px; height: 8px; border-radius: 50%; background: #ffabb3; opacity: .8; }.b-left { left: 15px; }.b-right { right: 15px; }
.bear-paws { position: absolute; right: -7px; bottom: -3px; transform: rotate(-9deg); font-size: 45px; }
.sticker { position: absolute; font-family: sans-serif; font-size: 32px; font-weight: 700; }.sticker-left { top: 75px; left: 8%; transform: rotate(-16deg); }.sticker-right { top: 153px; right: 8%; color: #ffe6b8; transform: rotate(14deg); }

.card { overflow: hidden; padding: clamp(27px, 6vw, 39px) clamp(21px, 7vw, 43px); border: 1px solid rgba(255,255,255,.82); border-radius: 31px; background: var(--cream); box-shadow: var(--shadow); }
.card .eyebrow { color: #e54a68; }
.sad-bear, .mini-bear, .cry-bear { margin-bottom: 7px; color: #bd6c6d; font: 4rem/1 "Mali", cursive; letter-spacing: -.24em; transform: translateX(-.14em); }
.sad-bear { animation: sob 2.2s ease-in-out infinite; }
@keyframes sob { 50% { transform: translate(-.14em, 3px) rotate(-3deg); } }
.promise { display: flex; gap: 10px; align-items: center; max-width: 320px; margin: 0 auto 25px; padding: 10px 15px; border-radius: 14px; color: #8b3143; background: #ffe4e5; text-align: left; }
.promise span { font-size: 1.55rem; }.promise p { margin: 0; font-size: .75rem; line-height: 1.5; }

.cta-button, .yes-button, .open-letter { border: 0; border-radius: 999px; color: white; background: linear-gradient(135deg, #f84d70, #d91c48); box-shadow: 0 9px 18px rgba(197, 17, 58, .28); cursor: pointer; font-weight: 600; transition: transform .2s, box-shadow .2s, filter .2s; }
.cta-button:hover, .yes-button:hover, .open-letter:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 21px rgba(197, 17, 58, .35); }
.cta-button:active, .yes-button:active, .open-letter:active { transform: translateY(1px) scale(.98); }
.cta-button { min-width: 220px; padding: 13px 21px; }.cta-button span { margin-left: 7px; font-size: 1.13rem; }
.pulse { animation: glow 1.65s infinite; } @keyframes glow { 50% { box-shadow: 0 9px 18px rgba(197,17,58,.28), 0 0 0 10px rgba(255,255,255,.12); } }
.is-disabled { cursor: not-allowed; filter: grayscale(.5) opacity(.55); box-shadow: none; }.is-disabled:hover { transform: none; box-shadow: none; }

.game-card { padding-bottom: 30px; }.mini-bear { margin-bottom: 2px; color: #df5570; font-size: 3.4rem; }
.game-card > p { margin: 10px auto 15px !important; font-size: .81rem !important; line-height: 1.5 !important; }.game-card strong { color: var(--red); }
.score-row { display: flex; justify-content: space-between; margin: 0 auto 8px; font-size: .75rem; color: #955064; }.score-row b { color: #df254d; }
.heart-game { position: relative; height: 230px; margin: 0 auto 17px; overflow: hidden; border: 2px dashed #f8b3bd; border-radius: 22px; background: linear-gradient(150deg, #fff2f1, #ffe1e5); }
.game-heart { position: absolute; display: grid; place-items: center; width: 47px; height: 47px; border: 0; border-radius: 50%; color: #fff; background: #f5506e; box-shadow: 0 5px 10px rgba(216, 34, 69, .22); cursor: pointer; font-size: 1.56rem; animation: heart-pop .45s both ease-out, heart-wiggle 1.35s ease-in-out infinite; }
.game-heart:hover { filter: brightness(1.09); }.game-heart:active { transform: scale(.86); }
@keyframes heart-pop { from { opacity: 0; transform: scale(.1) rotate(-25deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes heart-wiggle { 50% { margin-top: -4px; } }
.game-heart.collected { pointer-events: none; animation: collected .4s both ease-in; } @keyframes collected { to { opacity: 0; transform: scale(1.7) rotate(22deg); } }

.letter-card h2 { font-size: clamp(1.8rem, 5.8vw, 2.4rem); }.envelope-wrap { margin: 12px auto 20px; perspective: 800px; }
.envelope { position: relative; width: min(100%, 340px); height: 235px; margin: auto; padding-top: 32px; border-radius: 10px; background: #f58b9c; box-shadow: 0 12px 17px rgba(166, 38, 67, .16); }
.envelope::before, .envelope::after { position: absolute; z-index: 1; bottom: 0; width: 0; height: 0; border-style: solid; content: ""; }.envelope::before { left: 0; border-width: 116px 170px; border-color: transparent transparent #f9a4b0 #f9a4b0; }.envelope::after { right: 0; border-width: 116px 170px; border-color: transparent #ffb9c2 #ffb9c2 transparent; }
.envelope-flap { position: absolute; z-index: 3; top: 0; left: 0; width: 0; height: 0; border-width: 82px 170px 0; border-style: solid; border-color: #e95e78 transparent transparent; transform-origin: top; transition: transform .45s ease; }
.letter { position: relative; z-index: 2; width: 84%; min-height: 195px; margin: 0 auto; padding: 20px 18px; border-radius: 5px; color: #814052; background: #fffdf8; box-shadow: 0 1px 4px rgba(119, 21, 43, .13); text-align: left; transition: transform .4s ease; }
.envelope.is-open .envelope-flap { transform: rotateX(180deg); z-index: 1; }.envelope.is-open .letter { transform: translateY(-18px); }
.letter-count { display: block; color: #e05b72; font-size: .66rem; font-weight: 700; letter-spacing: .09em; }.letter p { min-height: 89px; margin: 13px 0 8px; font-family: "Mali", cursive; font-size: .96rem; font-weight: 600; line-height: 1.7; }.letter-sign { display: block; color: #c76377; text-align: right; font-size: .64rem; }
.letter-controls { display: flex; justify-content: center; align-items: center; gap: 9px; }.round-button { width: 35px; height: 35px; border: 1px solid #f1a6b1; border-radius: 50%; color: #d84462; background: transparent; cursor: pointer; }.open-letter { min-width: 210px; padding: 10px 13px; font-size: .78rem; }.text-next { margin-top: 17px; border: 0; color: #c33a55; background: transparent; cursor: pointer; font-weight: 600; font-size: .78rem; }

.ask-card { min-height: 479px; }.cry-bear { color: #e27382; font-size: 3.65rem; }.ask-card > p:not(.eyebrow) { margin: 11px auto 4px; }
.choice-zone { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 13px; height: 133px; margin: 0 -12px; }
.yes-button { padding: 13px 17px; font-size: .92rem; }.no-button { position: relative; padding: 10px 12px; border: 1px solid #ee98a6; border-radius: 999px; color: #bc4058; background: #fff0ef; cursor: pointer; font-size: .77rem; white-space: nowrap; transition: left .27s cubic-bezier(.3,.9,.45,1.25), top .27s cubic-bezier(.3,.9,.45,1.25), transform .2s; }
.no-button.is-running { position: absolute; }.escape-pop { animation: message-pop .3s both ease; } @keyframes message-pop { from { transform: scale(.85); opacity: .4; } to { transform: scale(1); opacity: 1; } }

.gift-card { min-height: 494px; }.gift-card h2 { font-size: clamp(1.78rem, 5.8vw, 2.42rem); }.gift-prompt { margin: 8px 0 0 !important; color: #a14b5d; font-size: .79rem !important; }.confetti-static { color: #ef7790; font-size: 1.06rem; letter-spacing: .08em; }.gift-box { position: relative; display: block; width: 174px; height: 178px; margin: 8px auto 3px; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 13px 10px rgba(173, 25, 55, .2)); }
.gift-base { position: absolute; z-index: 1; bottom: 0; left: 14px; width: 146px; height: 116px; border-radius: 7px 7px 13px 13px; background: linear-gradient(135deg, #fa6b7e, #df234e); }.gift-lid { position: absolute; z-index: 2; top: 37px; left: 5px; width: 164px; height: 40px; border-radius: 7px; background: linear-gradient(135deg, #ff8997, #e72c56); transition: transform .6s cubic-bezier(.17,.88,.33,1.45); transform-origin: left bottom; }.gift-ribbon { position: absolute; z-index: 3; background: #ffdf9f; }.gift-ribbon.vertical { bottom: 0; left: 78px; width: 18px; height: 116px; }.gift-ribbon.horizontal { top: 37px; left: 5px; width: 164px; height: 40px; background: linear-gradient(90deg, transparent 45%, #ffdf9f 45% 56%, transparent 56%); }.gift-bow { position: absolute; z-index: 4; top: 10px; left: 50%; color: #ffdf9f; transform: translateX(-50%); font-size: 48px; text-shadow: 26px 2px 0 #ffdf9f, -26px 2px 0 #ffdf9f; transition: transform .65s ease; }
.gift-box:hover { transform: translateY(-4px) rotate(-1deg); }.gift-box.is-open .gift-lid { transform: translate(-16px, -67px) rotate(-19deg); }.gift-box.is-open .gift-bow { transform: translate(-50%, -42px) rotate(-16deg); opacity: .7; }.gift-box.is-open { animation: box-bounce .56s .12s ease; } @keyframes box-bounce { 50% { transform: translateY(10px) scale(.94); } }
.final-note { margin: -2px auto 0; animation: scene-in .5s both ease; }.big-heart { display: inline-block; color: #ed3158; font-size: 1.8rem; animation: heartbeat 1.25s infinite; }.final-note p { margin: 3px 0; font-weight: 600; font-size: .88rem; }.final-note .sweet-line { margin-top: 7px; color: #d7274f; font-family: "Mali", cursive; font-size: 1rem; line-height: 1.55; }.restart { margin-top: 12px; border: 0; color: #bd4760; background: transparent; cursor: pointer; font-size: .72rem; text-decoration: underline; }
@keyframes heartbeat { 30% { transform: scale(1.18); } 48% { transform: scale(1); } 65% { transform: scale(1.1); } }

.celebration { position: fixed; z-index: 20; inset: 0; overflow: hidden; pointer-events: none; }.burst-heart { position: absolute; top: 50%; left: 50%; color: var(--color); font-size: var(--size); text-shadow: 0 4px 10px rgba(121, 0, 32, .18); animation: heart-burst 1.55s both cubic-bezier(.1,.75,.24,1); }
@keyframes heart-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--rot)) scale(1.15); } }

@media (max-width: 430px) { .sound-toggle { top: 13px; right: 13px; padding: 7px 9px; }.sound-toggle #soundText { display: none; }.love-meter { top: 21px; width: min(235px, calc(100% - 95px)); }.app-shell { padding: 66px 14px 25px; }.card { border-radius: 26px; }.heart-game { height: 213px; }.ask-card { min-height: 457px; }.gift-card { min-height: 472px; }.sticker-left { left: 3%; }.sticker-right { right: 3%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }