*{box-sizing:border-box}[hidden]{display:none!important}:root{--pink:#d33f78;--ink:#803e58;--muted:#9b6379;--paper:#fff9f4}html{background:#ffdce8}body{margin:0;min-height:100svh;color:var(--ink);font-family:"Segoe UI",Arial,sans-serif;background-color:#ffdfeb;background-image:linear-gradient(90deg,#fff4f340 50%,transparent 50%),linear-gradient(#fff4f340 50%,transparent 50%);background-size:44px 44px;display:grid;place-items:center;padding:38px 22px;overflow-x:hidden}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #993055;outline-offset:5px}main{position:relative;width:min(100%,680px);outline:none}main::before{content:'';position:absolute;inset:14px -14px -14px 14px;background:#efb5ca;border-radius:42px;transform:rotate(2deg);border:2px solid #e9a7c1}main::after{content:'';position:absolute;width:120px;height:28px;left:calc(50% - 60px);top:-12px;background:#e583a99c;transform:rotate(-5deg);pointer-events:none;z-index:3;box-shadow:0 1px 1px #fff8 inset}.screen{position:relative;isolation:isolate;text-align:center;min-height:650px;border:8px solid #fff8fc;border-radius:40px;padding:40px 48px 36px;background:var(--paper);box-shadow:0 20px 65px #a33b6224;overflow:hidden;animation:appear .35s ease both}.screen::before{content:'';position:absolute;inset:7px;border:1px dashed #edb5c8;border-radius:25px;pointer-events:none;z-index:-1}h1,h2{margin:0;line-height:1.22;letter-spacing:-1.2px;font-weight:750;color:var(--ink);text-wrap:balance}h1{font-size:43px}h1 em{font-style:normal;color:var(--pink)}h2{font-size:32px;max-width:520px;margin-inline:auto}p{font-size:16px;line-height:1.7;color:var(--muted);margin:18px 0 25px}.primary,.secondary{border:0;min-height:52px;padding:14px 27px;border-radius:20px;font-weight:650;transition:transform .18s,background .2s;touch-action:manipulation}.primary{background:var(--pink);color:#fff;box-shadow:0 5px 0 #ad2f60,0 9px 15px #bf3c6820}.primary:hover{background:#c4336c}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #ad2f60}.primary span{margin-left:15px}.secondary{background:#f9e5ed;color:#a6637d;border:1px solid #edc1d1;box-shadow:0 4px 0 #e7c1d0}.text-button{display:block;border:0;background:none;color:#a76a81;font-size:12px;padding:13px 10px;margin:14px auto 0;text-decoration:underline;text-underline-offset:4px}.flower-corner{position:absolute;z-index:-1;pointer-events:none;width:250px;height:250px;border-radius:50%;overflow:hidden;mix-blend-mode:multiply;opacity:.94;-webkit-mask-image:radial-gradient(ellipse,#000 43%,transparent 70%);mask-image:radial-gradient(ellipse,#000 43%,transparent 70%)}.flower-corner img{width:100%;height:100%;object-fit:cover}.flower-left{left:-105px;bottom:-70px;transform:rotate(-25deg)}.flower-right{right:-110px;top:-70px;transform:rotate(150deg)}.welcome .flower-left{width:300px;height:300px;left:-125px;bottom:-95px}.welcome .flower-right{width:270px;height:270px;right:-100px;top:-80px}.date-sticker{position:absolute;left:25px;top:37px;background:#f5b4cd;color:#fff;border:3px solid #fff;outline:1px solid #ec9abb;box-shadow:0 5px 10px #b0507018;transform:rotate(-12deg);font-size:24px;font-weight:800;border-radius:17px;padding:10px 13px;z-index:2}.date-sticker span{font-size:18px;font-weight:400}.cat-frame{position:relative;margin:0 auto 22px;width:175px;height:240px;background:#fff;border:7px solid #f9c8da;outline:5px solid #fff;border-radius:90px 90px 65px 65px;box-shadow:0 10px 0 #f3d6df;transform:rotate(4deg)}.cat-frame>img{width:100%;height:100%;object-fit:contain;border-radius:80px}.tiny-label{position:absolute;bottom:0;left:50%;transform:translate(-50%,45%) rotate(-8deg);background:#fff0cb;border:1px solid #eecf90;border-radius:8px;padding:5px 13px;white-space:nowrap;font-size:12px;font-weight:650;color:#a56b53}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;max-width:380px;margin:27px auto 16px}.tile{padding:7px;aspect-ratio:1;border:2px solid #fff;border-radius:19px;background:repeating-linear-gradient(45deg,#f4b2cb 0 9px,#f8c7db 9px 18px);box-shadow:0 5px 0 #e6a5bf;overflow:hidden;transition:transform .2s}.tile:hover:not(:disabled){transform:rotate(-3deg)}.tile img{width:100%;height:100%;object-fit:cover;display:block;border-radius:11px}.tile .card-back{object-fit:contain;mix-blend-mode:multiply}.tile.matched{box-shadow:0 0 0 2px #a5bb87;background:#e5efd8;transform:rotate(-2deg)}.game-status{font-size:14px;min-height:23px;margin:14px 0}.play{padding-top:80px}.play>p:first-of-type{margin:13px 0}.question{padding-top:48px}.question-photo{display:block;width:190px;height:190px;object-fit:cover;margin:0 auto 30px;border:9px solid #fff;border-radius:23px;box-shadow:0 8px 0 #f3cada,0 0 0 1px #f3cada;transform:rotate(-6deg)}.question h2{font-size:33px;max-width:500px}.answer-arena{position:relative;isolation:isolate;width:min(100%,420px);height:195px;margin:28px auto 0;display:flex;align-items:flex-start;justify-content:center;gap:26px;padding-top:30px}.yes{min-width:127px;z-index:2;transform-origin:center;position:relative}.no{min-width:104px;z-index:3;transition:left .15s,top .15s}.discreet{font-size:11px;color:#b9889b;margin-top:0;padding-bottom:0}.ending{padding-top:35px}.ending-cat{display:block;height:230px;width:165px;object-fit:contain;background:#fff;border-radius:90px;margin:0 auto 20px;transform:rotate(-6deg)}.ending h1{font-size:36px}.ending p{font-size:15px;line-height:1.8;margin:18px 0}.signature{display:block;color:#c24472;font-family:"Times New Roman",serif;font-style:italic;font-size:23px;margin:20px 0 24px}.ending .primary{margin:0 auto}.ending .text-button{margin-top:12px}dialog{max-width:min(88vw,370px);border:6px solid #fff;border-radius:28px;background:#fff4f7;color:var(--ink);padding:30px 23px 25px;text-align:center;box-shadow:0 20px 80px #6e234449}dialog::backdrop{background:#7e35566b;backdrop-filter:blur(4px)}dialog h2{font-size:26px;margin:8px auto 20px}dialog img{width:100%;height:auto;max-height:300px;object-fit:contain;border-radius:17px;display:block;margin:0 0 24px}.close{position:absolute;top:3px;right:5px;border:0;background:transparent;width:38px;height:38px;font-size:27px;color:#a45a76}.wiggle{animation:wiggle .3s}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:10}.confetti i{position:absolute;top:-18px;width:10px;height:16px;border-radius:90% 0 90% 0;animation:fall 2.4s ease-in forwards}.noscript{padding:30px}@keyframes appear{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}@keyframes fall{to{transform:translateY(105vh) rotate(560deg);opacity:0}}@keyframes wiggle{25%{transform:rotate(8deg)}75%{transform:rotate(-8deg)}}@media(max-width:600px){body{padding:29px 16px 35px;display:flex;align-items:center;justify-content:center}main{width:100%}main::before{inset:10px -6px -10px 7px;border-radius:30px;transform:rotate(1.2deg)}.screen{min-height:650px;border-width:6px;border-radius:30px;padding:38px 20px 30px}.screen::before{inset:5px;border-radius:20px}.welcome{padding-top:38px}.cat-frame{width:150px;height:210px;margin-bottom:28px}.date-sticker{left:16px;top:28px;font-size:20px;padding:8px 10px}.welcome h1{font-size:35px;letter-spacing:-1.3px}.welcome p{font-size:14px;margin:18px 0 24px}.flower-corner{width:210px;height:210px}.flower-left{left:-105px;bottom:-75px}.flower-right{right:-115px;top:-90px}.welcome .flower-left{width:240px;height:240px;left:-112px;bottom:-77px}.welcome .flower-right{width:215px;height:215px;right:-100px;top:-80px}.play{padding-top:65px}.play h2{font-size:28px}.play>p:first-of-type{font-size:14px}.game-grid{gap:10px;margin-top:28px}.tile{border-radius:15px;padding:5px}.tile img{border-radius:9px}.question{padding-top:50px}.question-photo{width:170px;height:170px;margin-bottom:32px}.question h2{font-size:28px;line-height:1.35;letter-spacing:-.8px}.answer-arena{height:185px;margin-top:24px;gap:18px}.primary,.secondary{padding:14px 22px;font-size:15px}.yes{min-width:117px}.no{min-width:95px}.ending{padding-top:30px}.ending-cat{height:195px;width:145px}.ending h1{font-size:31px}.ending p{font-size:13px}.signature{font-size:22px}}@media(max-width:350px){.screen{padding-inline:16px}.welcome h1{font-size:30px}.date-sticker{font-size:16px;left:10px;top:22px}.cat-frame{width:135px;height:195px}.question h2{font-size:25px}.question-photo{width:155px;height:155px}.answer-arena{gap:14px}.yes{min-width:106px}.no{min-width:86px}.primary,.secondary{padding-inline:18px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.confetti{display:none}}
/* Clip decoration without making the card an inner scrolling container. */
.screen{overflow:clip}
.flower-game{padding-top:60px}
.flower-game>p{font-size:15px;margin:12px 0 18px}
.flower-garden{position:relative;isolation:isolate;height:265px;max-width:390px;margin:auto;border-radius:70px 70px 30px 30px;background:radial-gradient(ellipse at 50% 100%,#e1ebd0 0,transparent 68%),#fff3f5;border:1px solid #f4d8e2;overflow:clip}
.pick-flower{position:absolute;width:92px;height:92px;padding:0;background:#fff8f5;border:4px solid #fff;box-shadow:0 5px 0 #e8bdcd;border-radius:50%;animation:bloom-sway 3s ease-in-out infinite;touch-action:manipulation;transition:opacity .3s,scale .3s}
.pick-flower img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pick-flower:hover{scale:1.08}
.pick-flower.picked{opacity:0;scale:.2;pointer-events:none}
.bloom-0{left:7%;top:24px;animation-delay:-.4s}
.bloom-1{right:6%;top:18px;animation-delay:-1.4s}
.bloom-2{left:calc(50% - 46px);top:88px;animation-delay:-2.3s}
.bloom-3{left:5%;bottom:42px;animation-delay:-1.1s}
.bloom-4{right:4%;bottom:38px;animation-delay:-2.8s}
.garden-note{position:absolute;bottom:10px;left:8px;right:8px;font-size:11px;color:#7e655c;min-height:18px}
.picked-flowers{display:flex;justify-content:center;gap:9px;margin:16px auto 8px}
.picked-flower{display:flex;flex-direction:column;align-items:center;gap:5px;opacity:.3;font-size:9px;white-space:nowrap;transition:opacity .25s,transform .25s}
.picked-flower img{width:38px;height:38px;border-radius:50%;object-fit:cover;filter:grayscale(1);border:2px solid #e3d7d9}
.picked-flower.collected{opacity:1;transform:translateY(-3px)}
.collected img{filter:none;border-color:#e99cba}
.flower-game .flower-count{font-size:12px;margin:8px 0 16px;color:#b15b7b}
.bouquet-reward{height:100%;position:relative;animation:appear .4s ease}
.bouquet-reward img{display:block;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(#000 65%,transparent 97%);mask-image:linear-gradient(#000 65%,transparent 97%)}
.bouquet-reward span{position:absolute;bottom:13px;left:15px;right:15px;font-size:14px;font-weight:700;color:#944665;background:#fff7efeb;border-radius:12px;padding:9px 4px;box-shadow:0 4px 0 #efcad7}
.ending .ending-cat{height:175px;width:130px;margin-bottom:22px}
.ending h1{font-size:38px}
.ending .wishes{margin:22px auto 28px;padding:22px 10px;background:#ffe5eeaa;border-radius:24px;border:1px solid #edc2d2}
.ending .main-wish{font-size:25px;line-height:1.5;font-weight:750;color:#bf396e;margin:0 0 18px;letter-spacing:-.6px}
.ending .wishes>p:last-child{margin:0;font-size:14px;line-height:1.8}
@keyframes bloom-sway{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-9px) rotate(7deg)}}
@media(max-width:600px){.flower-game{padding-top:47px}.flower-game h2{font-size:28px}.flower-game>p{font-size:13px}.pick-flower{width:74px;height:74px}.bloom-2{left:calc(50% - 37px)}.picked-flowers{gap:7px}.picked-flower{font-size:8px}.picked-flower img{width:34px;height:34px}.ending h1{font-size:32px}.ending .main-wish{font-size:23px}.ending .wishes{padding:20px 8px;margin-block:22px}.ending .wishes>p:last-child{font-size:13px}}
@media(max-width:350px){.flower-game h2{font-size:25px}.pick-flower{width:65px;height:65px}.bloom-2{left:calc(50% - 32px)}.picked-flowers{gap:4px}.picked-flower{font-size:7px}.ending .main-wish{font-size:21px}}
.answer-arena.orbiting{height:200px}
.orbiting .yes{position:absolute;left:50%;top:74px;transform:translateX(-50%)}
.orbiting .no{position:absolute;width:66px;min-width:66px;height:40px;min-height:40px;padding:8px 6px;font-size:12px;transition:left .08s linear,top .08s linear}
.answer-arena.growing{height:215px}
.growing .yes{position:absolute;left:50%;top:30px}
.growing .no{position:absolute;left:50%;top:151px;transform:translateX(-50%)}
@keyframes wiggle{25%{transform:translateX(-50%) rotate(8deg)}75%{transform:translateX(-50%) rotate(-8deg)}}
/* Keep the affirmative answer at its original left/right anchor in every mode. */
.orbiting .no{transition:left .1s ease-out,top .1s ease-out}
dialog{max-height:calc(100svh - 24px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:600px){
 body{padding:24px 14px calc(28px + env(safe-area-inset-bottom))}
 .screen{min-height:min(650px,calc(100svh - 60px))}
 .flower-game h2{font-size:clamp(24px,6.7vw,28px);position:relative}
 .flower-game>h2,.question>h2{isolation:isolate}
 .flower-game>h2::before{content:'';position:absolute;inset:-5px -8px;z-index:-1;background:#fff9f4dd;border-radius:15px}
 .picked-flower{font-size:10px}
 .discreet,.text-button{min-height:44px;display:flex;align-items:center;justify-content:center}
 .question-photo{width:150px;height:150px;margin-bottom:24px}
 .question h2{font-size:26px;line-height:1.3}
 .question{padding-top:36px;padding-bottom:18px}
 .answer-arena{margin-top:18px}
 dialog{padding:26px 19px 22px;max-width:calc(100vw - 28px)}
 dialog h2{font-size:24px}
 dialog img{max-height:min(300px,40svh)}
 .ending .ending-cat{height:150px;width:115px;margin-bottom:17px}
 .ending .wishes{margin:18px auto 22px}
 .ending .main-wish{font-size:clamp(20px,5.6vw,23px)}
}
@media(max-width:350px){.picked-flowers{gap:5px}.picked-flower{font-size:8px}.question h2{font-size:24px}.question-photo{width:135px;height:135px}.question{padding-top:30px}}
@media(max-height:720px) and (max-width:600px){.cat-frame{width:132px;height:182px;margin-bottom:22px}.welcome{padding-top:30px}.welcome h1{font-size:30px}.welcome p{margin:14px 0 20px}.flower-garden{height:245px}.ending h1{font-size:29px}}
.answer-arena,.answer-arena.orbiting,.answer-arena.growing{height:215px}
.answer-arena .yes{position:absolute;left:var(--yes-left);top:30px;transform:none;transform-origin:left top}
.answer-arena .no{position:absolute;left:var(--no-left);top:30px;transform:none}
.answer-arena.growing .no{top:151px}
@keyframes wiggle{25%{transform:rotate(8deg)}75%{transform:rotate(-8deg)}}