/* A heart for every secret digit. The real input keeps native keyboard support. */
.pin-entry{position:relative;width:240px;height:70px;margin:17px auto 4px;border-radius:15px;background:#d5c6ab08;border:1px solid #d5c6ab35}
.pin-hearts{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:9px;height:100%;padding:10px 13px;pointer-events:none}
.pin-heart{display:grid;place-items:center;position:relative}
.pin-heart svg{width:41px;height:43px;overflow:visible;fill:#d5c6ab06;stroke:#bda67e90;stroke-width:2;transition:fill .2s,filter .2s,stroke .2s}
.pin-heart.filled svg{fill:#e5c797;stroke:#fff0d0;filter:drop-shadow(0 0 8px #eac587a6);animation:pin-heart-pop .4s cubic-bezier(.2,.8,.3,1.3) both}
#pin-input,body.keyboard #pin-input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:15px;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;font-size:16px;letter-spacing:normal;outline:0;box-shadow:none}
.pin-entry:focus-within{border-color:#f4dbad;box-shadow:inset 0 0 0 1px #f4dbad55}
.pin-entry:has(.shake){animation:shake .35s}
body.keyboard .pin-entry{height:54px;margin:8px auto 3px}
body.keyboard .pin-heart svg{width:34px;height:35px}
@keyframes pin-heart-pop{0%{transform:scale(.65)}65%{transform:scale(1.2)}100%{transform:scale(1)}}

/* A single, glowing locket opens into a personal line, then gives way to audio. */
.love-stage{position:relative;min-height:0;display:grid;place-items:center;isolation:isolate}
.love-orbit{position:absolute;left:50%;top:50%;width:min(70%,270px);aspect-ratio:1;border:1px solid #d5c6ab24;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 60px #d5c6ab08,inset 0 0 45px #d5c6ab08;transition:opacity .8s,scale 1s}
.love-orbit:before,.love-orbit:after{content:'';position:absolute;inset:16px;border:1px solid #d5c6ab13;border-radius:50%}.love-orbit:after{inset:-18px;border-style:dashed;opacity:.4}
.love-heart{width:min(64%,220px);height:min(82%,240px);aspect-ratio:1;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:17px 12px 12px;border-radius:50%;background:radial-gradient(ellipse,#d5c6ab13,transparent 70%);touch-action:manipulation}
.love-heart svg{width:100%;height:calc(100% - 28px);min-height:0;overflow:visible;filter:drop-shadow(0 12px 20px #0008) drop-shadow(0 0 18px #d7b27b38)}
.heart-half{transform-origin:50% 50%;transition:transform .9s cubic-bezier(.18,.7,.2,1),opacity .8s .12s}
.heart-half path{fill:url(#love-metal);stroke:#f5e6ca;stroke-width:.65}
.heart-tap-label{font:italic 20px/1.2 Cormorant;color:#f5e6ca;white-space:nowrap;transition:opacity .2s}
.love-stage.opened .left-half{transform:translate(-33px,0) rotate(-18deg);opacity:0}
.love-stage.opened .right-half{transform:translate(33px,0) rotate(18deg);opacity:0}
.love-stage.opened .heart-tap-label{opacity:0}
.love-stage.opened .love-orbit{opacity:.5;scale:1.13}
.love-reveal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:12px 8px;pointer-events:none;animation:love-words-arrive 1s .15s both}
.love-reveal-mark{font:42px/1 Cormorant;color:#e9c68d;filter:drop-shadow(0 0 12px #e9c68d66)}
#love-line{font:500 clamp(32px,6vw,54px)/1.1 Cormorant;color:#f9e9ca;max-width:430px;text-wrap:balance;overflow-wrap:anywhere;text-shadow:0 4px 35px #e7bb6626}
.love-from{font:italic 20px/1.2 Cormorant;color:#c6b698}
#love-audio-intro{font:italic 21px/1.4 Cormorant;color:#ced8e1;max-width:330px;animation:arrive .6s both}
#love-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#love-particles span{position:absolute;left:50%;top:50%;font:30px/1 Cormorant;color:#f0d29f;filter:drop-shadow(0 0 6px #ecc77d88);animation:love-heart-burst 1.7s ease-out both}
@keyframes love-heart-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--heart-x)),calc(-50% + var(--heart-y))) rotate(var(--heart-turn)) scale(1.15)}}
@keyframes love-words-arrive{0%{opacity:0;transform:scale(.86) translateY(8px);filter:blur(5px)}100%{opacity:1;transform:none;filter:none}}
@media(max-width:600px){#love-line{font-size:40px}.love-heart{width:min(66%,205px)}#love-audio-intro{font-size:19px;max-width:285px}}
@media(max-height:650px){.love-heart{width:min(55%,175px);padding:12px 8px 8px}.heart-tap-label{font-size:17px}#love-line{font-size:34px}.love-reveal{gap:7px;padding:3px 8px}.love-reveal-mark{font-size:30px}.love-from{font-size:18px}#love-audio-intro{font-size:17px}.pin-entry{height:60px;margin-top:12px}}
@media(orientation:landscape) and (max-height:500px){.love-stage{grid-column:2!important;grid-row:1/3!important}#love-line{font-size:32px}#love-audio-intro{font-size:16px}}
@media(prefers-reduced-motion:reduce){.pin-heart.filled svg,.love-reveal,#love-audio-intro{animation:none!important}.heart-half,.love-orbit{transition:none!important}#love-particles{display:none}}

#love-line.long-line{font-size:clamp(25px,4.8vw,36px)}
@media(max-height:650px){#love-line.long-line{font-size:25px}}