:root{--cream:#fff0d2;--paper:#fffcf4;--ink:#402018;--shadow:#35180f;--wine:#98254e;--yellow:#f5bd43;--gold:#ffd36a;--orange:#e98b35;--pink:#f5d8cb;--muted:#8a6854}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:var(--cream);color:var(--ink);font-family:'Comic Sans MS','Segoe Print',cursive;background-image:radial-gradient(#b9824d22 .8px,transparent .8px);background-size:13px 13px}.paper-grain{position:fixed;inset:0;pointer-events:none;opacity:.16;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}.decorations{position:fixed;inset:0;overflow:hidden;pointer-events:none}.deco{position:absolute;width:38px;height:38px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-style:normal;box-shadow:3px 4px var(--shadow);animation:float 5s ease-in-out infinite}.d1,.d6,.d11{background:var(--yellow)}.d2,.d8,.d13{background:var(--wine);color:white}.d3,.d7,.d12{background:var(--orange)}.d4,.d9,.d14{background:var(--gold)}.d5,.d10{background:var(--pink)}.d1{left:5%;top:18%}.d2{left:7%;top:43%}.d3{left:7%;bottom:17%}.d4{right:10%;top:20%}.d5{right:8%;bottom:37%}.d6{right:8%;bottom:12%}.d7{left:28%;top:5%}.d8{right:24%;bottom:7%}.d9{right:18%;top:5%}.d10{left:30%;bottom:5%}.d11{left:2%;top:66%}.d12{right:2%;top:43%}.d13{left:42%;top:3%}.d14{right:42%;bottom:4%}@keyframes float{50%{transform:translateY(-9px) rotate(8deg)}}#app{height:100dvh;display:grid;place-items:center;padding:20px;position:relative;z-index:1}.paper-card{position:relative;width:min(800px,94vw);height:min(640px,88dvh);min-height:450px;background:var(--paper);border:3px solid var(--ink);border-radius:13px;box-shadow:9px 10px 0 var(--shadow);padding:48px 40px 30px;animation:cardIn .58s cubic-bezier(.2,.8,.2,1) both;display:flex;flex-direction:column}@keyframes cardIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}.tape{position:absolute;z-index:3;top:-13px;left:50%;transform:translateX(-50%) rotate(-1.5deg);width:104px;height:30px;background:repeating-linear-gradient(135deg,#f5bd43 0 8px,#ffd36a 8px 14px);border:1px solid var(--ink);opacity:.95}.badge{position:absolute;z-index:4;right:-17px;top:-20px;width:79px;height:79px;border-radius:50%;background:var(--wine);border:3px solid var(--ink);box-shadow:3px 4px 0 var(--shadow);color:white;text-align:center;display:grid;align-content:center;font:700 10px/1.25 Arial;letter-spacing:1px;transform:rotate(9deg)}h1{font-size:clamp(27px,4vw,40px);line-height:1.12;margin:0 0 15px}p{margin:0}.intro-card{width:min(620px,90vw);height:min(590px,84dvh);text-align:center;justify-content:center}.envelope-stage{display:flex;flex-direction:column;align-items:center}.envelope{position:relative;border:0;background:none;width:min(330px,70vw);height:210px;margin:26px auto 14px;cursor:pointer;filter:drop-shadow(5px 6px 0 var(--shadow));transition:transform .2s}.envelope:active{transform:scale(.975) translateY(3px)}.env-back,.env-front,.env-flap,.letter-slip{position:absolute;inset:0;border:3px solid var(--ink);border-radius:7px}.env-back{background:var(--yellow)}.env-front{background:#efac31;clip-path:polygon(0 34%,50% 74%,100% 34%,100% 100%,0 100%)}.env-flap{background:var(--gold);clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:top;transition:transform .65s;z-index:3}.seal{position:absolute;z-index:4;left:50%;top:60%;transform:translate(-50%,-50%);width:47px;height:47px;border-radius:50%;background:var(--wine);color:white;display:grid;place-items:center;border:2px solid var(--ink);font-size:22px}.letter-slip{inset:auto 18px 24px;height:165px;background:var(--paper);z-index:1;padding-top:20px;font-size:14px;transition:transform .65s .18s}.opening .env-flap{transform:rotateX(180deg);z-index:0}.opening .letter-slip{transform:translateY(-80px)}.tap{font-size:17px;margin:5px}.destined{letter-spacing:3px;color:var(--muted);font:10px Arial;margin-top:12px}.letter-card{width:min(850px,94vw);height:min(600px,88dvh);justify-content:center}.letter-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:38px;align-items:center;height:100%}.photo-print{position:relative;background:white;border:2px solid var(--ink);border-radius:8px;padding:8px;box-shadow:5px 6px #40201855;transform:rotate(-3deg);aspect-ratio:4/5}.photo-print img,.photo-frame img,.polaroid-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.photo-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:17px;background:repeating-linear-gradient(45deg,#f8ead4,#f8ead4 8px,#fff7e9 8px,#fff7e9 16px)}.photo-print .photo-fallback,.photo-frame .photo-fallback{inset:8px}.letter-copy h1{font-size:clamp(26px,3vw,34px)}.letter-copy p{font-size:16px;line-height:1.55}.letter-copy .intro{font-weight:bold;margin:0 0 8px}.typed{min-height:150px}.typed:not(.done)::after{content:' ';border-right:2px solid var(--wine);animation:blink .8s steps(2) infinite}@keyframes blink{50%{opacity:0}}.signature{text-align:right;font-style:italic;margin:9px 0 15px!important}.btn{font:700 15px 'Comic Sans MS','Segoe Print',cursive;letter-spacing:.8px;color:white;background:var(--wine);border:2px solid var(--ink);border-radius:7px;padding:12px 25px;box-shadow:4px 5px var(--shadow);cursor:pointer;transition:transform .16s,box-shadow .16s;min-height:46px}.btn:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:5px 7px var(--shadow)}.btn:active{transform:translate(3px,4px);box-shadow:1px 1px var(--shadow)}.balloon-card{width:min(730px,94vw);height:min(650px,90dvh);padding:44px 30px 24px;text-align:center}.balloon-head h1{margin:4px 0}.balloon-head p{color:var(--muted);font-size:17px}.progress{font:12px Arial;color:var(--wine);letter-spacing:1px;margin-top:8px}.balloon-field{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);place-items:center;padding:12px 38px 4px}.balloon{position:relative;width:clamp(82px,12vw,115px);height:clamp(105px,16vw,145px);border:2px solid var(--ink);border-radius:52% 48% 50% 50%/45% 46% 54% 55%;box-shadow:inset -11px -10px 13px #35180f26,3px 5px #35180f40;cursor:pointer;animation:balloonFloat var(--dur,4s) ease-in-out infinite;transition:filter .2s}.balloon:hover{filter:brightness(1.08);scale:1.08}.balloon.gold{background:radial-gradient(ellipse at 30% 25%,#fff5c4 0 8%,transparent 10%),linear-gradient(120deg,#ffe58a,#f5bd43 60%,#d99a27)}.balloon.wine{background:radial-gradient(ellipse at 30% 25%,#f5c4cf 0 8%,transparent 10%),linear-gradient(120deg,#c84e78,#98254e 60%,#6d1837)}.balloon.orange{background:radial-gradient(ellipse at 30% 25%,#ffe0ad 0 8%,transparent 10%),linear-gradient(120deg,#ffc878,#e98b35 60%,#bd5f25)}.balloon.red{background:radial-gradient(ellipse at 30% 25%,#ffc3a6 0 8%,transparent 10%),linear-gradient(120deg,#fb9966,#cc4d35 65%,#902d27)}.balloon.mustard{background:radial-gradient(ellipse at 30% 25%,#fff0ac 0 8%,transparent 10%),linear-gradient(120deg,#ffda65,#dca52e 65%,#ad7622)}.balloon.pink{background:radial-gradient(ellipse at 30% 25%,#ffd8e7 0 8%,transparent 10%),linear-gradient(120deg,#e6608e,#a32659 65%,#751b3d)}.shine{position:absolute;top:17%;left:19%;width:13px;height:35px;border-radius:50%;background:#fff9;transform:rotate(22deg)}.knot{position:absolute;bottom:-8px;left:calc(50% - 8px);width:15px;height:14px;background:inherit;clip-path:polygon(0 0,100% 0,50% 100%)}.string{position:absolute;top:100%;left:50%;height:38px;border-left:1px dashed var(--muted)}.b1{--dur:4.2s}.b2{--dur:5s;animation-delay:-2s}.b3{--dur:3.8s;animation-delay:-.6s}.b4{--dur:4.7s;animation-delay:-2.7s}.b5{--dur:5.3s;animation-delay:-1.8s}.b6{--dur:4s;animation-delay:-3s}@keyframes balloonFloat{0%,100%{translate:0 3px;rotate:-3deg}50%{translate:4px -12px;rotate:4deg}}.balloon.pop{animation:pop .38s ease-in forwards;pointer-events:none}@keyframes pop{0%{scale:1}45%{scale:1.2 .72}70%{scale:.3}100%{scale:0;opacity:0}}.burst{position:absolute;inset:-20px;display:grid;place-items:center;color:var(--wine);font-size:60px;animation:burst .4s ease-out forwards}@keyframes burst{to{opacity:0;scale:1.5;rotate:50deg}}.balloon-note{font:11px Arial;letter-spacing:1px;color:var(--muted)}#overlay-root{position:fixed;z-index:10;inset:0;pointer-events:none}.scrim{pointer-events:auto;position:absolute;inset:0;background:#28130fc2;backdrop-filter:blur(5px);display:grid;place-items:center;padding:18px;animation:fade .35s both}@keyframes fade{from{opacity:0}to{opacity:1}}.message-modal{width:min(440px,91vw);max-height:90dvh;overflow:auto;background:var(--paper);border:3px solid var(--ink);border-radius:12px;box-shadow:8px 9px var(--shadow);padding:28px 34px 30px;text-align:center;animation:modalIn .55s cubic-bezier(.2,.8,.2,1) both}@keyframes modalIn{from{opacity:0;transform:scale(.75) rotate(8deg)}to{opacity:1;transform:scale(1) rotate(-1deg)}}.polaroid{background:#fffefa;border:2px solid var(--ink);box-shadow:5px 6px #35180f77}.message-polaroid{width:min(255px,70vw);padding:9px 9px 0;margin:0 auto 22px;transform:rotate(2deg)}.polaroid-photo{position:relative;aspect-ratio:1.08;background:#f7e7cd;overflow:hidden}.polaroid>p{padding:10px 2px 11px;font-size:17px}.message-text{font-size:19px;line-height:1.45;margin:0 auto 23px;max-width:340px}.btn.yellow{background:var(--yellow);color:var(--ink)}.gallery-card{width:min(890px,95vw);height:min(670px,91dvh);padding:48px 38px 22px;text-align:center}.gallery-head h1{font-size:clamp(25px,3.4vw,35px);margin-bottom:5px}.gallery-head p{font:700 11px Arial;letter-spacing:2.2px;color:var(--wine)}.gallery-layout{flex:1;display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center;min-height:0;padding:15px 24px}.gallery-main,.gallery-side{height:100%;position:relative;display:grid;place-items:center}.photo-frame{position:relative;background:white;padding:9px;border:2px solid var(--ink);box-shadow:6px 7px #35180f66;overflow:hidden}.photo-frame.large{width:min(350px,90%);height:80%;transform:rotate(-3deg)}.polaroid-photo{position:relative;aspect-ratio:1;background:#f7e7cd;overflow:hidden}.gallery-side .polaroid{width:min(230px,90%);padding:9px 9px 0;transform:rotate(3deg)}.gallery-side .polaroid>p{font-size:17px}.sticker{position:absolute;z-index:2;background:var(--gold);border:1.5px solid var(--ink);box-shadow:2px 3px var(--shadow);padding:7px 10px;font-size:14px;line-height:1.1;transform:rotate(-7deg)}.s1{top:5%;left:0}.s2{top:18%;right:0;background:var(--pink);transform:rotate(5deg)}.s3{bottom:8%;left:-1%;background:#f3ceaa;transform:rotate(-4deg)}.sparkle{position:absolute;right:3%;top:12%;font-size:37px;color:var(--orange)}.back-btn{align-self:flex-start;background:var(--yellow);color:var(--ink);padding:8px 20px;min-height:38px;font-size:13px}
@media(max-width:650px){#app{padding:13px}.deco{width:29px;height:29px;font-size:13px}.paper-card{height:min(680px,92dvh);min-height:0;padding:40px 20px 20px;border-width:2px;box-shadow:6px 7px var(--shadow)}.badge{width:65px;height:65px;right:-12px;top:-15px;font-size:8px}.tape{width:84px;height:24px}.intro-card{height:min(560px,86dvh)}.envelope{height:175px;width:min(290px,76vw)}.letter-card{height:min(700px,92dvh)}.letter-layout{grid-template-columns:.88fr 1.12fr;gap:18px}.letter-copy h1{font-size:23px}.letter-copy p{font-size:13px;line-height:1.45}.typed{min-height:145px}.letter-copy .btn{padding:10px 19px}.balloon-card{height:min(700px,94dvh);padding:42px 12px 17px}.balloon-head h1{font-size:27px}.balloon-head p{font-size:15px}.balloon-field{padding:10px;row-gap:15px}.balloon{width:clamp(75px,24vw,105px);height:clamp(94px,31vw,130px)}.string{height:28px}.gallery-card{height:min(700px,94dvh);padding:40px 15px 14px}.gallery-layout{gap:10px;padding:12px 5px}.photo-frame.large{height:65%;width:95%}.gallery-side .polaroid{width:100%;padding:6px 6px 0}.gallery-side .polaroid>p{font-size:14px;padding:7px 0}.sticker{font-size:11px;padding:5px 7px}.s1{left:-5px;top:13%}.s2{right:-5px;top:26%}.s3{left:-7px;bottom:13%}.sparkle{font-size:29px}.message-modal{padding:21px 20px 24px}.message-text{font-size:17px}}@media(max-width:390px){.letter-layout{gap:12px;grid-template-columns:.9fr 1.1fr}.letter-copy h1{font-size:20px}.letter-copy p{font-size:12px}.typed{min-height:160px}.balloon-card{padding-inline:7px}.balloon-field{padding-inline:0}.gallery-head h1{font-size:24px}.sticker{font-size:10px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
/* Fixed balloon board: explicit coordinates come from src/content.js. */
.balloon-field{position:relative;display:block;padding:0;min-height:0}
.balloon{position:absolute;left:var(--balloon-x);top:var(--balloon-y);transform:translate(-50%,-50%);animation:none!important;transition:filter .2s}
.balloon:hover{filter:brightness(1.08);scale:1}
/* Keep the long personalized letter inside its existing two-column card. */
.letter-copy{height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center}
.letter-copy .typed{height:clamp(165px,32dvh,210px);min-height:0;flex:0 1 auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9a181 transparent}
/* Bound the copy column to the paper card; the typed paragraph can scroll. */
.letter-layout{grid-template-rows:minmax(0,1fr);min-height:0;min-width:0}
.letter-copy{height:100%;max-height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.letter-copy .typed{height:clamp(165px,32dvh,210px);max-height:clamp(165px,32dvh,210px);min-height:0;flex:0 1 auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9a181 transparent}