/*! Happy 1 Month ♡ — Love Letter — © 2026 Hasib (OVERSHOOT). All rights reserved. Licensed, not sold: see LICENSE.md. */:root{--cream: #f7efe3;--coral: #d97b73;--coral-dk: #b9554d;--pink: #f0b6c6;--pink-lt: #f7d8e0;--gingham: #f3c6d2;--gingham-2: rgba(206,118,142,.28);--maroon: #7a2230;--red: #e23b4e;--red-dk: #b22a3b;--paper: #fdf4ef;--sel: #2f54d6;--heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.6 4.1 13.7a5.1 5.1 0 0 1 7.2-7.2l.7.7.7-.7a5.1 5.1 0 1 1 7.2 7.2z'/%3E%3C/svg%3E");--font-pix: "Press Start 2P", monospace;--font-body: "Pixelify Sans", "Press Start 2P", monospace;--ease: cubic-bezier(.34,1.56,.64,1)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{min-height:100svh;display:grid;place-items:center;padding:24px;font-family:var(--font-body);color:var(--maroon);background:var(--cream);-webkit-font-smoothing:antialiased;overflow:hidden}.heart{display:inline-block;width:14px;height:14px;background:var(--red);-webkit-mask:var(--heart-mask) center/contain no-repeat;mask:var(--heart-mask) center/contain no-repeat}.heart--inline{width:.9em;height:.9em;vertical-align:-.05em}.fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.fx__aurora{position:absolute;inset:-10%}.fx__aurora:before,.fx__aurora:after{content:"";position:absolute;border-radius:50%;will-change:transform}.fx__aurora:before{width:65vmax;height:65vmax;left:-12%;top:-18%;background:radial-gradient(circle at 50% 50%,#ffc1d4d9,#ffc1d400 62%);animation:auroraA 19s ease-in-out infinite alternate}.fx__aurora:after{width:70vmax;height:70vmax;right:-15%;bottom:-20%;background:radial-gradient(circle at 50% 50%,#ffe1c4cc,#ffe1c400 62%);animation:auroraB 24s ease-in-out infinite alternate}@keyframes auroraA{0%{transform:translate(0) scale(1)}to{transform:translate(8vw,6vh) scale(1.18)}}@keyframes auroraB{0%{transform:translate(0) scale(1.1)}to{transform:translate(-7vw,-5vh) scale(.92)}}.fx__vignette{position:absolute;inset:0;background:radial-gradient(125% 110% at 50% 38%,transparent 52%,rgba(120,40,50,.12) 100%)}.fx__grain{position:absolute;inset:0;background:url(/love-letter/textures/grain.png) repeat;background-size:180px 180px;opacity:.4;mix-blend-mode:multiply;animation:grainShift 5s steps(4) infinite}@keyframes grainShift{0%{transform:translate(0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,-1%)}to{transform:translate(0)}}.scene{position:relative;width:100%;max-width:520px;display:grid;place-items:center;z-index:2}.confetti{position:fixed;inset:0;pointer-events:none;z-index:1}.confetti__layer{position:absolute;inset:0;will-change:transform}.confetti .heart{position:absolute;opacity:0;animation:drift linear infinite}@keyframes drift{0%{opacity:0;transform:translateY(10px) rotate(0) scale(.9)}10%{opacity:.9}90%{opacity:.9}to{opacity:0;transform:translateY(-26px) rotate(12deg) scale(1.05)}}.stage,.window{grid-area:1 / 1;position:relative;z-index:1}:root{--wood: #b5793f;--wood-dk: #8a5a2b}.stage--aim{position:relative;width:100%;height:min(80svh,600px);touch-action:none;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%23fff' stroke-width='4'%3E%3Cpath d='M12 2v6M12 16v6M2 12h6M16 12h6'/%3E%3C/g%3E%3Cg stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 2v6M12 16v6M2 12h6M16 12h6'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%23fff'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='%23000'/%3E%3C/svg%3E") 12 12,crosshair;transition:opacity .4s ease,transform .45s var(--ease)}.stage--aim:focus-visible{outline:3px dashed var(--coral-dk);outline-offset:6px;border-radius:16px}.stage--aim.is-gone{opacity:0;transform:scale(.6) translateY(-14px);pointer-events:none}.target{position:absolute;left:50%;top:6%;transform:translate(-50%);display:grid;justify-items:center;gap:18px;pointer-events:none;z-index:2}.target__label{font-size:1.35rem;letter-spacing:.02em;color:var(--maroon);display:flex;align-items:center;gap:.4em}.envelope{position:relative;width:200px;height:142px;border:5px solid var(--coral);border-radius:8px;background:var(--paper);animation:bob 3s ease-in-out infinite;box-shadow:0 18px 0 -8px #b9554d2e}.target.is-pulse .envelope{outline:3px dashed var(--red);outline-offset:8px}.target.is-hit .envelope{animation:hitwobble .45s ease}.envelope__flap{position:absolute;left:50%;top:0;transform:translate(-50%);width:0;height:0;border-left:95px solid transparent;border-right:95px solid transparent;border-top:68px solid var(--pink)}.envelope:after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 2px),var(--coral) calc(50% - 2px) calc(50% + 2px),transparent calc(50% + 2px)) bottom left / 50% 60% no-repeat,linear-gradient(to top left,transparent calc(50% - 2px),var(--coral) calc(50% - 2px) calc(50% + 2px),transparent calc(50% + 2px)) bottom right / 50% 60% no-repeat;opacity:.6}.envelope__seal{position:absolute;left:50%;top:56px;transform:translate(-50%);width:32px;height:32px;z-index:2;filter:drop-shadow(0 2px 0 var(--red-dk))}@keyframes bob{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}@keyframes hitwobble{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(4px,-3px) rotate(5deg)}55%{transform:translate(-4px,2px) rotate(-4deg)}80%{transform:translate(2px,-1px) rotate(2deg)}}.archer{position:absolute;left:50%;bottom:12%;width:180px;height:180px;transform:translate(-50%);pointer-events:none;z-index:3}.bow{position:absolute;left:56px;top:11px;width:34px;height:158px;border:9px solid var(--wood);border-radius:90%/50%;border-right-color:transparent;transform-origin:100% 50%;transform:rotate(-90deg);filter:drop-shadow(0 3px 0 rgba(122,74,34,.22))}.bow:before{content:"";position:absolute;left:-11px;top:50%;width:14px;height:44px;transform:translateY(-50%);background:var(--wood-dk);border-radius:6px}.bow:after{content:"";position:absolute;right:-2px;top:-5px;bottom:-5px;width:3px;background:var(--wood-dk);border-radius:2px}.nock{position:absolute;left:90px;top:90px;width:1px;height:1px}.arrow{position:absolute;left:0;top:0;width:58px;height:16px;transform-origin:0 50%;background:linear-gradient(var(--wood-dk),var(--wood-dk)) left 50% / 42px 4px no-repeat;z-index:6;pointer-events:none;opacity:0;will-change:transform}.arrow.is-on{opacity:1}.arrow:after{content:"";position:absolute;left:40px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:16px solid var(--red);border-top:8px solid transparent;border-bottom:8px solid transparent}.arrow:before{content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-right:13px solid var(--pink);border-top:8px solid transparent;border-bottom:8px solid transparent}.trail{position:absolute;width:11px;height:11px;z-index:5;pointer-events:none;animation:trailFade .5s ease-out forwards}@keyframes trailFade{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(.3)}}.hint{position:absolute;left:0;right:0;bottom:1%;text-align:center;font-size:1rem;color:var(--maroon);opacity:.78;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:.4em;animation:hintpulse 2.4s ease-in-out infinite}@keyframes hintpulse{0%,to{opacity:.55}50%{opacity:.85}}.window{width:min(86vw,360px);border:5px solid var(--coral);border-radius:12px;background:var(--pink-lt);box-shadow:0 22px 44px -20px #7a223080;overflow:hidden;opacity:0;transform:scale(.78);visibility:hidden;transition:opacity .4s ease,transform .5s var(--ease),visibility 0s linear .5s}.window.is-open{opacity:1;transform:scale(1);visibility:visible;transition:opacity .4s ease,transform .55s var(--ease)}.window .titlebar,.window .heartrow,.window .content{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .55s var(--ease)}.window.is-open .titlebar{opacity:1;transform:none;transition-delay:.16s}.window.is-open .heartrow{opacity:1;transform:none;transition-delay:.26s}.window.is-open .content{opacity:1;transform:none;transition-delay:.36s}.window .heartrow>*{opacity:0;transform:scale(.3);transition:opacity .3s ease,transform .4s var(--ease)}.window.is-open .heartrow>*{opacity:1;transform:none}.window.is-open .heartrow>*:nth-child(1){transition-delay:.42s}.window.is-open .heartrow>*:nth-child(2){transition-delay:.48s}.window.is-open .heartrow>*:nth-child(3){transition-delay:.54s}.window.is-open .heartrow>*:nth-child(4){transition-delay:.6s}.window.is-open .heartrow>*:nth-child(5){transition-delay:.66s}.window.is-celebrate{animation:winGlow 1.7s ease-in-out infinite}@keyframes winGlow{0%,to{box-shadow:0 22px 44px -20px #7a223080,0 0 #e23b4e00}50%{box-shadow:0 22px 52px -18px #7a22308c,0 0 42px 6px #e23b4e66}}.titlebar{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;background:var(--pink);border-bottom:4px solid var(--coral)}.titlebar__name{font-family:var(--font-pix);font-size:.72rem;letter-spacing:.12em;color:var(--maroon)}.titlebar__btns{display:flex;gap:5px}.winbtn{width:20px;height:20px;display:grid;place-items:center;font-family:var(--font-pix);font-size:.5rem;line-height:1;color:var(--maroon);background:var(--paper);border:2px solid var(--coral);border-radius:3px;cursor:pointer;transition:transform .12s ease,background .12s ease}.winbtn:hover{transform:translateY(-1px)}.winbtn--x:hover{background:var(--red);color:#fff}.winbtn:focus-visible{outline:2px solid var(--coral-dk);outline-offset:2px}.heartrow{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0;background:var(--pink-lt);border-bottom:4px solid var(--coral)}.heartrow .heart{width:18px;height:18px}.hdot{width:5px;height:5px;background:var(--coral);border-radius:1px}.content{position:relative;padding:22px 18px 24px;min-height:300px;display:grid;justify-items:center;align-content:start;gap:18px;background-color:var(--gingham);background-image:repeating-linear-gradient(0deg,transparent 0 9px,var(--gingham-2) 9px 18px),repeating-linear-gradient(90deg,transparent 0 9px,var(--gingham-2) 9px 18px)}.title{font-weight:600;font-size:1.5rem;line-height:1.15;text-align:center;color:var(--maroon);text-shadow:0 2px 0 rgba(255,255,255,.5)}.cat{width:150px;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;animation:catbob 2.4s ease-in-out infinite;filter:drop-shadow(0 6px 0 rgba(178,42,59,.16))}@keyframes catbob{0%,to{transform:translateY(0) scaleY(1)}50%{transform:translateY(-5px) scaleY(1.02)}}.content.is-won .cat{transform-origin:50% 88%;animation:catdance .8s ease-in-out infinite}@keyframes catdance{0%{transform:rotate(-9deg) translateY(0) scaleY(1)}25%{transform:rotate(-9deg) translateY(-11px) scaleY(1.04)}50%{transform:rotate(9deg) translateY(0) scaleY(1)}75%{transform:rotate(9deg) translateY(-11px) scaleY(1.04)}to{transform:rotate(-9deg) translateY(0) scaleY(1)}}.cat-heart{position:absolute;width:26px;height:26px;z-index:3;opacity:0;pointer-events:none}.content.is-won .cat-heart{opacity:1;animation:floatHeart 1.8s ease-in-out infinite}@keyframes floatHeart{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.12)}}.buttons{display:flex;gap:16px;align-items:center;justify-content:center;min-height:46px}.buttons[hidden]{display:none}.btn{font-family:var(--font-pix);font-size:.74rem;letter-spacing:.06em;padding:11px 16px;color:var(--red-dk);background:var(--paper);border:3px solid var(--coral);border-radius:6px;cursor:pointer;box-shadow:0 4px 0 0 var(--coral);transition:transform .14s var(--ease),background .14s ease,color .14s ease,box-shadow .14s ease}.btn:active{transform:translateY(2px);box-shadow:0 2px 0 0 var(--coral)}.btn:focus-visible{outline:3px dashed var(--coral-dk);outline-offset:3px}.btn--yes{transform-origin:center;position:relative}.btn--yes:before{content:"";position:absolute;inset:0;border-radius:6px;opacity:0;z-index:-1;transition:opacity .3s ease}.btn--yes:hover{background:var(--red);color:#fff;box-shadow:0 4px 0 0 var(--red-dk)}.btn--yes:hover:before,.btn--yes.is-tempting:before{opacity:1;animation:yesGlow 1.2s ease-in-out infinite}@keyframes yesGlow{0%,to{box-shadow:0 0 16px 2px #e23b4e66}50%{box-shadow:0 0 28px 7px #e23b4e99}}.btn--no{position:relative;transition:left .18s var(--ease),top .18s var(--ease),transform .14s var(--ease)}.rain{position:fixed;inset:0;pointer-events:none;z-index:6}.rainheart{position:absolute;top:-6%;pointer-events:none;animation:rainfall linear forwards}@keyframes rainfall{0%{opacity:0;transform:translateY(0) translate(0) rotate(0)}12%{opacity:1}to{opacity:0;transform:translateY(112vh) translate(var(--rx)) rotate(var(--rr))}}.final{font-size:1.05rem;line-height:1.4;text-align:center;color:var(--maroon);max-width:30ch;opacity:0;transform:translateY(8px);transition:opacity .5s ease .15s,transform .5s var(--ease) .15s}.final.is-show{opacity:1;transform:none}.final strong{font-weight:700}.final mark{background:var(--sel);color:#fff;padding:0 .15em;border-radius:2px}.burst{position:absolute;width:18px;height:18px;z-index:5;pointer-events:none;animation:burst .9s ease-out forwards}@keyframes burst{0%{opacity:1;transform:translate(0) scale(.4)}to{opacity:0;transform:translate(var(--bx),var(--by)) scale(1.1)}}.confetti-heart{position:absolute;top:0;left:0;pointer-events:none;opacity:0;will-change:transform,opacity}@media(max-width:480px){body{padding:14px}.envelope{width:164px;height:116px}.envelope__flap{border-left-width:77px;border-right-width:77px;border-top-width:56px}.envelope__seal{top:46px}.target__label{font-size:1.15rem}.title{font-size:1.3rem}.cat{width:128px}.content{padding:18px 14px 20px;min-height:260px;gap:14px}.hint{font-size:.92rem}}@media(prefers-reduced-motion:reduce){.envelope,.cat,.hint,.fx__aurora:before,.fx__aurora:after,.fx__grain,.window.is-celebrate,.btn--yes:before,.content.is-won .cat,.content.is-won .cat-heart{animation:none}.confetti .heart{animation:none;opacity:.55}.window,.stage--aim,.final,.btn{transition-duration:1ms}.burst,.trail,.rainheart,.confetti-heart{display:none}}