@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@600;700;800&display=swap');

:root {
  --ink: #513f46;
  --cream: #fffaf0;
  --pink: #ed7f9d;
  --pink-dark: #cf5f7e;
  --yellow: #f6d77d;
  --blue: #91d8d2;
  --green: #7fc899;
  --shadow: 0 10px 0 rgba(108, 73, 75, .12), 0 18px 35px rgba(101, 63, 70, .14);
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; background: #f7cad8; }
body { min-height: 100dvh; touch-action: manipulation; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
#app { position: relative; width: 100%; min-height: 100dvh; overflow: hidden; background: linear-gradient(#bfe8ef 0 61%, #a8d899 61%); }
#app::after { content: ""; position: fixed; inset: 61% 0 0; opacity: .28; background-image: radial-gradient(#fff 1.8px, transparent 2px); background-size: 20px 20px; pointer-events: none; }

.screen { position: absolute; inset: 0; display: none; overflow-x: hidden; overflow-y: auto; padding: max(22px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom)); z-index: 2; }
.screen.active { display: block; animation: screenIn .45s cubic-bezier(.2,.8,.2,1) both; }
.scene { min-height: calc(100dvh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.center-scene { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.sky-decor { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.cloud { position: absolute; width: 90px; height: 28px; background: rgba(255,255,255,.75); border-radius: 30px; }
.cloud::before, .cloud::after { content:""; position:absolute; background:inherit; border-radius:50%; }
.cloud::before { width:42px; height:42px; left:15px; bottom:2px; }.cloud::after { width:32px; height:32px; right:12px; bottom:1px; }
.cloud-a { top: 11%; left: -22px; }.cloud-b { top: 22%; right: -35px; transform: scale(.72); }
.floating-heart { position:absolute; top:17%; right:18%; color:#fff; font-size:22px; opacity:.7; animation: float 3s ease-in-out infinite; }

h1 { font-family:"Baloo 2", sans-serif; line-height:.95; margin:0; color:#594149; }
.eyebrow { display:inline-block; padding:6px 13px; border-radius:20px; background:#fff5; font-size:11px; font-weight:800; letter-spacing:2px; }
.speech-bubble { position:relative; z-index:4; max-width:330px; padding:16px 22px; border:3px solid #fff; border-radius:28px; background:rgba(255,253,245,.96); font-family:"Baloo 2"; font-size:20px; line-height:1.15; box-shadow:var(--shadow); }
.speech-bubble::after { content:""; position:absolute; left:50%; bottom:-15px; width:24px; height:24px; background:#fffdf5; transform:translateX(-50%) rotate(45deg); border-right:3px solid #fff; border-bottom:3px solid #fff; }
.speech-bubble.big { font-size:22px; max-width:360px; }.speech-bubble strong { color:var(--pink-dark); font-weight:800; }

.character-slot { position:relative; display:flex; align-items:flex-end; justify-content:center; }
.character-slot.large { width:min(78vw, 330px); height:min(45dvh, 390px); }
.character-slot > img { display:none; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 9px rgba(67,77,65,.18)); }
.character-slot.has-image > img { display:block; }.character-slot.has-image > :not(img) { display:none; }
.character-placeholder { position:relative; width:210px; height:310px; filter:drop-shadow(0 14px 8px rgba(70,73,61,.2)); }
.character-placeholder .face { position:absolute; z-index:2; top:43px; left:37px; width:138px; height:134px; border-radius:46% 46% 50% 50%; background:#c98967; border:4px solid #5d443d; }
.character-placeholder .hair { position:absolute; z-index:3; top:23px; left:32px; width:148px; height:72px; border-radius:70px 70px 30px 30px; background:#3d302d; border:4px solid #5d443d; transform:rotate(-3deg); }
.character-placeholder .hair::after { content:""; position:absolute; right:5px; top:48px; width:28px; height:52px; border-radius:50%; background:#3d302d; }
.character-placeholder .face i { position:absolute; top:63px; width:13px; height:18px; border-radius:50%; background:#3e3433; }
.character-placeholder .face i:first-child { left:30px; }.character-placeholder .face i:nth-child(2) { right:30px; }
.character-placeholder .face b { position:absolute; left:53px; top:90px; width:28px; height:13px; border-bottom:5px solid #744a49; border-radius:50%; }
.character-placeholder .body { position:absolute; left:25px; bottom:0; width:163px; height:150px; border-radius:62px 62px 24px 24px; background:#f6cb72; border:4px solid #5d443d; }
.party-hat { position:absolute; z-index:5; top:-18px; left:81px; width:62px; height:70px; padding-top:18px; color:white; background:#ee7e9e; clip-path:polygon(50% 0,100% 100%,0 100%); font-size:18px; }
.holding-gift .tiny-gift { position:absolute; z-index:5; left:65px; bottom:12px; font-size:76px; }.wave { position:absolute; z-index:6; right:-4px; top:115px; font-size:74px; transform-origin:bottom left; animation:wave 1s ease-in-out infinite alternate; }

.primary-btn, .secondary-btn { position:relative; z-index:5; min-height:57px; border-radius:30px; padding:13px 24px; font-weight:800; box-shadow:0 7px 0 #b54f6d, 0 12px 22px #71404f35; background:linear-gradient(#f58aa7,#e57090); color:white; letter-spacing:.2px; }
.primary-btn { min-width:190px; font-size:18px; }.primary-btn span { float:right; margin-left:20px; font-size:25px; line-height:18px; }
.primary-btn:active { transform:translateY(5px); box-shadow:0 2px 0 #b54f6d; }
.secondary-btn { min-height:48px; margin-top:20px; padding:10px 17px; font-size:13px; box-shadow:0 5px 0 #b54f6d; }

.password-layout { min-height:calc(100dvh - 44px); display:grid; grid-template-columns:44% 56%; margin:-22px -20px; }
.couple-panel { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:18px 8px; background:linear-gradient(#afe1df,#85c8a0); text-align:center; }
.couple-panel p { max-width:135px; padding:10px; border-radius:15px; background:#fff9; font-family:"Baloo 2"; font-size:13px; font-weight:700; line-height:1.15; }
.character-slot.couple { width:100%; height:42dvh; }
.couple-placeholder { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.mini-person { display:flex; align-items:center; justify-content:center; width:92px; height:190px; border:4px solid #5d443d; border-radius:50px 50px 28px 28px; font-size:40px; box-shadow:0 10px 15px #49654e40; }
.p-one { margin-right:-35px; background:#f5ca70; transform:rotate(-7deg); }.p-two { background:#ef94ad; transform:rotate(7deg); }
.couple-placeholder span { position:absolute; top:15%; color:#ef5f82; font-size:44px; animation:pulse 1.2s infinite; }
.pin-panel { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:28px 10px; background:#fff7ec; }
.pin-panel h1 { font-size:32px; text-align:center; }.pin-dots { display:flex; gap:9px; margin:18px 0 5px; }
.pin-dots i { width:15px; height:15px; border:2px solid #d07a91; border-radius:50%; background:transparent; transition:.2s; }.pin-dots i.filled { background:#df7592; transform:scale(1.1); }
.pin-message { height:18px; margin:3px 0 10px; font-size:12px; color:#a1757f; }.pin-message.error { color:#cf536b; animation:shake .35s; }
.keypad { display:grid; grid-template-columns:repeat(3, 50px); gap:9px; }
.keypad button { width:50px; height:50px; border:2px solid #ead8d4; border-radius:50%; background:white; color:#654d53; font-family:"Baloo 2"; font-size:21px; font-weight:700; box-shadow:0 3px 0 #dec8c4; }
.keypad button:active { transform:translateY(2px); box-shadow:0 1px 0 #dec8c4; background:#ffe8ed; }.keypad .key-empty { opacity:0; pointer-events:none; }

.celebration .confetti { position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(#ef6689 3px,transparent 4px),radial-gradient(#f3c958 3px,transparent 4px),radial-gradient(#60bba8 3px,transparent 4px); background-size:53px 55px,67px 61px,71px 69px; animation:confetti 8s linear infinite; opacity:.8; }
.gifts-scene { position:relative; min-height:calc(100dvh - 44px); display:flex; flex-direction:column; justify-content:center; }
.gifts-scene header { text-align:center; margin-bottom:24px; }.gifts-scene h1 { margin:8px 0; font-size:39px; }.gifts-scene header p { margin:0; font-size:14px; font-weight:700; }
.gift-grid { display:grid; gap:14px; max-width:390px; width:100%; margin:0 auto; }
.gift-card { position:relative; min-height:132px; display:flex; align-items:center; justify-content:center; padding:10px; border:3px solid #fff8; border-radius:27px; box-shadow:var(--shadow); overflow:hidden; transition:.25s; }
.gift-card:active { transform:scale(.97); }.gift-card.pink { background:#f3a6b9; }.gift-card.yellow { background:#f3d682; }.gift-card.blue { background:#88d3d0; }
.gift-box { text-align:center; font-size:76px; filter:drop-shadow(0 5px 3px #75545c35); animation:giftBob 2s ease-in-out infinite; }
.gift-card strong { align-self:end; font-family:"Baloo 2"; font-size:19px; }.gift-card small { align-self:start; font-weight:700; opacity:.65; }
.done-badge { display:none; position:absolute; top:10px; right:12px; width:25px; height:25px; border-radius:50%; background:#fff; color:#66ac7e; text-align:center; line-height:25px; font-weight:900; }.gift-card.opened .done-badge { display:block; }.gift-card.opened { filter:saturate(.7); }
.progress-dots { display:flex; justify-content:center; gap:8px; margin-top:23px; }.progress-dots i { width:9px; height:9px; border-radius:50%; border:2px solid #fff; }.progress-dots i.done { background:white; }
.corner-next { position:fixed; top:max(16px,env(safe-area-inset-top)); right:15px; z-index:10; padding:10px 15px; border-radius:22px; color:#fff; background:#db6c8a; font-weight:800; box-shadow:0 4px 0 #ae516a; animation:popIn .4s both; }.hidden { display:none !important; }

.overlay-screen { z-index:20; background:linear-gradient(#f9ccd8,#f3a9bb); }
.envelope-stage { min-height:calc(100dvh - 44px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-family:"Baloo 2"; font-weight:700; }
.envelope-wrap { position:relative; width:280px; height:245px; margin-top:20px; perspective:700px; }
.envelope { position:absolute; left:0; bottom:0; z-index:2; width:280px; height:180px; border-radius:5px 5px 18px 18px; background:linear-gradient(145deg,#e87f9d 0 50%,#d76b8a 51%); box-shadow:var(--shadow); animation:envelopeOpen 1.15s .2s both; }
.envelope::after { content:""; position:absolute; inset:0; background:#ef91aa; clip-path:polygon(0 100%,50% 45%,100% 100%); border-radius:0 0 18px 18px; }
.flap { position:absolute; z-index:4; width:100%; height:110px; background:#f1a0b6; clip-path:polygon(0 0,50% 100%,100% 0); transform-origin:top; animation:flapOpen .8s .45s both; }
.envelope-heart { position:absolute; z-index:5; left:118px; top:72px; width:44px; height:44px; border-radius:50%; background:#fff0e8; color:#d95f80; font-size:27px; line-height:44px; }
.envelope-letter { position:absolute; z-index:1; bottom:18px; left:25px; width:230px; height:160px; border-radius:12px; background:#fffaf0; box-shadow:0 5px 12px #7c475833; animation:letterRise .8s 1s both; }
.envelope-letter span { display:block; margin-top:35px; color:#e46e8e; font-size:54px; animation:pulse 1s infinite; }

.surprise-screen { background:linear-gradient(#f7d3dd,#f3b1c2); }.surprise-content { min-height:calc(100dvh - 44px); max-width:430px; margin:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.surprise-content h1 { margin:9px 0 19px; font-size:32px; }.polaroid { width:min(83vw,340px); padding:12px 12px 22px; transform:rotate(-2deg); background:#fffaf2; box-shadow:0 12px 25px #6f3e4d30; }
.polaroid > img { display:none; width:100%; aspect-ratio:4/3; object-fit:cover; }.polaroid.has-image > img { display:block; }.polaroid.has-image .photo-placeholder { display:none; }
.photo-placeholder { aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:linear-gradient(#9bdbdf 0 55%,#7fc48c 55%); border:2px dashed #fff; }.photo-placeholder span { font-size:58px; }.photo-placeholder b { color:#fff; text-shadow:0 2px #4c7b70; }.photo-placeholder small { padding:3px 8px; border-radius:8px; background:#fff9; }
.polaroid p { margin:13px 5px 0; font-family:"Baloo 2"; font-size:14px; line-height:1.28; font-weight:700; }
.letter-content { justify-content:flex-start; padding-top:25px; padding-bottom:28px; }.love-letter { position:relative; width:min(90vw,380px); padding:28px 25px 20px; border-radius:4px; background:#fffaf0; box-shadow:0 12px 25px #6f3e4d30; transform:rotate(.5deg); text-align:left; font-family:"Baloo 2"; font-size:15px; line-height:1.4; }
.love-letter::before { content:""; position:absolute; inset:9px; border:1px solid #e9b5c0; pointer-events:none; }.love-letter p { margin:0 0 11px; }.signature { text-align:right; color:#c75474; font-weight:700; }.love-signoff { display:block; text-align:right; color:#c75474; font-size:18px; white-space:nowrap; }.letter-heart { position:absolute; right:20px; top:13px; color:#de6b8a; font-size:24px; }
.gallery-content { justify-content:flex-start; padding-top:25px; }.gallery { width:min(88vw,380px); }.gallery-track { position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; border:10px solid #fffaf2; box-shadow:0 12px 25px #6f3e4d30; background:#f4d88d; }
.gallery-slide { position:absolute; inset:0; display:none; }.gallery-slide.active { display:flex; animation:screenIn .35s both; }.gallery-slide img { display:none; width:100%; height:100%; object-fit:contain; background:#f5e8e7; }.gallery-slide.has-image img { display:block; }.gallery-slide.has-image .gallery-placeholder { display:none; }
.gallery-placeholder { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:linear-gradient(150deg,#97d8d4,#f2a7bb); color:white; font-size:52px; text-shadow:0 2px #75606666; }.gallery-placeholder small { font-size:13px; }.gallery-controls { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:12px; font-weight:800; }.gallery-controls button { width:42px; height:42px; border-radius:50%; background:#fff8; font-size:30px; line-height:38px; }.gallery-controls button:disabled { opacity:.35; cursor:default; }
.date-invite { max-width:390px; font-family:"Nunito",sans-serif; font-size:15px !important; line-height:1.35 !important; padding:22px 24px; }
.date-invite p { margin:10px 0; }.date-invite > strong:first-child { display:block; font-family:"Baloo 2"; font-size:23px; }
.final-scene { justify-content:flex-start; padding-top:18px; gap:10px; }.final-scene .character-slot.large { height:min(31dvh,270px); }
.final-scene .final-hearts { color:#e55f84; font-size:24px; letter-spacing:8px; animation:pulse 1.2s infinite; }.final-hearts span { font-size:38px; }.text-btn { z-index:4; background:transparent; color:#70525b; border-bottom:2px solid #70525b; font-size:12px; font-weight:800; }

@keyframes screenIn { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes popIn { 0%{opacity:0;transform:scale(.6)} 70%{transform:scale(1.06)} 100%{opacity:1;transform:scale(1)} }
@keyframes float { 50%{transform:translateY(-12px) rotate(8deg)} }
@keyframes wave { to{transform:rotate(20deg)} }
@keyframes pulse { 50%{transform:scale(1.16)} }
@keyframes shake { 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
@keyframes confetti { to{background-position:0 100vh,0 100vh,0 100vh} }
@keyframes giftBob { 50%{transform:translateY(-5px) rotate(2deg)} }
@keyframes flapOpen { to{transform:rotateX(178deg);z-index:0} }
@keyframes letterRise { from{transform:translateY(0)} to{transform:translateY(-105px)} }
@keyframes envelopeOpen { from{transform:scale(.8);opacity:0} to{transform:none;opacity:1} }

@media (max-height: 740px) {
  .character-slot.large { height:310px; }.speech-bubble { padding:12px 18px;font-size:18px}.center-scene{gap:12px}.gift-card{min-height:102px}.gift-box{font-size:58px}.gifts-scene header{margin-bottom:13px}.gifts-scene h1{font-size:32px}.gift-grid{gap:9px}.letter-content,.gallery-content{padding-top:8px}.love-letter{font-size:13px;padding:22px}.surprise-content h1{font-size:27px;margin-bottom:10px}.date-invite{font-size:13px !important}.final-scene .character-slot.large{height:210px}
}
@media (min-width: 600px) { #app { max-width:500px; margin:auto; box-shadow:0 0 50px #59303b55; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-delay:0ms !important; } }