/* Universe (11A), Little Messages (12C), Final Surprise (12D). Existing CSS untouched. */
/* existing gift-box note: keep its paragraphs readable */
#giftText{white-space:pre-wrap}

/* ---- Universe ---- */
.u-universe{position:relative;overflow:hidden;text-align:center;color:#ece9ff;padding:84px 6% 72px;background:radial-gradient(ellipse at 50% 35%,#171049 0%,#0a0a2c 45%,#020309 100%)}
.u-sky{position:absolute;inset:0;width:100%;height:100%;display:block}
.u-neb{position:absolute;inset:-10%;pointer-events:none;background:radial-gradient(38% 30% at 25% 30%,#7b4fd855,transparent 70%),radial-gradient(34% 28% at 78% 35%,#e3b45a33,transparent 70%),radial-gradient(40% 30% at 55% 80%,#8a6ae033,transparent 70%);animation:uDrift 45s ease-in-out infinite alternate}
@keyframes uDrift{to{transform:translate(-2%,2%) scale(1.07)}}
.u-inner{position:relative;z-index:2;max-width:580px;margin:0 auto}
.u-eyebrow{display:block;font:10px var(--mono);letter-spacing:.14em;color:#a99ee0}
.u-title{margin:18px 0 0;font:600 clamp(18px,5vw,30px)/1.25 var(--serif);letter-spacing:.2em;text-indent:.2em;color:#fff}
.u-stage{width:min(420px,96%);margin:6px auto 0}
.u-svg{display:block;width:100%;height:auto;overflow:visible}
.u-core{transform:scale(.1);opacity:.5;animation:uMyst 3s ease-in-out infinite alternate;transition:transform 2.6s cubic-bezier(.2,.8,.2,1),opacity 1.6s}
@keyframes uMyst{to{opacity:.85}}
.u-rays{transform-origin:0 0}
.u-orbits ellipse{opacity:0;transition:opacity 2s 1s;transform-origin:0 0}
.u-con polyline{stroke-dasharray:1;stroke-dashoffset:1}
.u-dots circle{opacity:0;transition:opacity 1s 2.2s;filter:drop-shadow(0 0 4px #d8ddff)}
.u-universe.is-in .u-core{transform:scale(1);opacity:1;animation:none}
.u-universe.is-in .u-rays{animation:uPulse 5s ease-in-out infinite 2.6s}
@keyframes uPulse{50%{transform:scale(1.1) rotate(5deg);opacity:.85}}
.u-universe.is-in .u-orbits ellipse{opacity:.55}
.u-universe.is-in .o1{animation:uSpin 38s linear infinite}.u-universe.is-in .o2{animation:uSpin 55s linear infinite reverse}.u-universe.is-in .o3{animation:uSpin 26s linear infinite}
@keyframes uSpin{to{transform:rotate(360deg)}}
.u-universe.is-in .u-con polyline{animation:uDraw 1.6s ease forwards 2.2s}
@keyframes uDraw{to{stroke-dashoffset:0}}
.u-universe.is-in .u-dots circle{opacity:1}
.u-reveal{min-height:0}
.u-name,.u-born,.u-msg{opacity:0;visibility:hidden;transform:translateY(14px)}
.u-name{margin:6px 0 8px;font:600 clamp(42px,13vw,76px)/1 var(--serif);letter-spacing:.07em;background:linear-gradient(180deg,#fff,#ffd88a 55%,#c9b3ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px #ffd88a66)}
.u-name span{display:inline-block}
.u-born{margin:0;font:500 clamp(16px,4.4vw,21px) var(--serif);letter-spacing:.3em;text-indent:.3em;color:#f3e6bd}
.u-msg{margin:24px auto 0;max-width:480px;font:italic 17px/1.85 var(--serif);color:#e6e4ff}
.u-universe.is-in .u-name,.u-universe.is-in .u-born,.u-universe.is-in .u-msg{visibility:visible;opacity:1;transform:none;transition:opacity 1.6s ease,transform 1.6s ease}
.u-universe.is-in .u-name{transition-delay:1.4s}.u-universe.is-in .u-born{transition-delay:2.6s}.u-universe.is-in .u-msg{transition-delay:3.6s}
.u-btn{margin-top:26px;font:11px var(--mono);letter-spacing:.14em;color:#fff4d4;background:linear-gradient(135deg,#ffffff18,#b9a2ff14);border:1px solid #ffd88aaa;border-radius:40px;padding:16px 28px;cursor:pointer;box-shadow:0 0 24px #ffd88a33,inset 0 0 14px #ffffff0d;animation:uBtn 3s ease-in-out infinite}
@keyframes uBtn{50%{box-shadow:0 0 36px #b9a2ff66}}
.u-universe.is-in .u-btn{display:none}
.u-replay{margin-top:20px;background:none;border:0;font:10px var(--mono);letter-spacing:.14em;color:#a99ee0;cursor:pointer;padding:12px}
.u-note{margin:20px auto 0;max-width:420px;font:9.5px/1.6 var(--mono);letter-spacing:.06em;color:#7f78b8}

/* ---- Little Messages (cookie) ---- */
.c-cookie-section{background:linear-gradient(165deg,#fbe6ee,#f1e6f7 50%,#faf0dc);border-top:1px solid #e9cfdc;text-align:center}
.c-title{margin:0 0 20px;font:600 clamp(22px,5.6vw,38px)/1.15 var(--serif);letter-spacing:-.02em;color:#4a3a55}
.c-title em{font-weight:500;color:#b0607a}
.c-stage{position:relative;max-width:480px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px;min-height:330px;justify-content:flex-end}
.c-glitter{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,#e8c98a 1.2px,transparent 1.6px) 0 0/46px 46px,radial-gradient(circle,#d9bdf0 1.2px,transparent 1.6px) 23px 23px/46px 46px;opacity:.35;animation:cTw 4s ease-in-out infinite alternate;-webkit-mask-image:radial-gradient(circle at 50% 60%,#000 20%,transparent 70%);mask-image:radial-gradient(circle at 50% 60%,#000 20%,transparent 70%)}
@keyframes cTw{to{opacity:.12}}
.c-slip{position:relative;width:100%;padding:24px 24px 22px;background:#fffdf6 repeating-linear-gradient(transparent 0 29px,#f0e4d0 30px);border:1px solid #ecd9bf;border-radius:14px;box-shadow:0 12px 26px #a2708433;opacity:0;transform:translateY(40px) scale(.7);transition:opacity .6s,transform .7s cubic-bezier(.2,.9,.3,1);pointer-events:none;display:none}
.c-slip.show{display:block;opacity:1;transform:none;pointer-events:auto}
.c-slip span{display:block;font:10px var(--mono);letter-spacing:.16em;color:#b0607a}
.c-slip p{margin:10px 0 0;font:600 clamp(18px,4.8vw,22px)/1.6 var(--serif);color:#4a3a45;white-space:pre-wrap}
.c-cookie{width:min(240px,70%);animation:cFloat 5s ease-in-out infinite;filter:drop-shadow(0 14px 14px #b0788045)}
@keyframes cFloat{50%{transform:translateY(-8px) rotate(-1.5deg)}}
.c-cookie svg{display:block;width:100%;height:auto;overflow:visible}
.c-half{transition:transform .8s cubic-bezier(.3,.9,.3,1)}
.c-left{transform-origin:120px 128px}.c-right{transform-origin:120px 128px}
.c-cookie.open .c-left{transform:translate(-30px,6px) rotate(-22deg)}
.c-cookie.open .c-right{transform:translate(30px,6px) rotate(22deg)}
.c-cookie.shake{animation:cShake .5s}
@keyframes cShake{25%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
.c-actions{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:26px}
.c-btn{font:11px var(--mono);letter-spacing:.12em;color:#fff;background:linear-gradient(135deg,#c987a5,#a974c4);border:0;border-radius:40px;padding:16px 28px;cursor:pointer;box-shadow:0 8px 20px #a974c44d;transition:.25s}
.c-btn:hover:not(:disabled){transform:translateY(-2px)}.c-btn:disabled{opacity:.5;cursor:default}
.c-btn[hidden],.c-actions .text-button[hidden]{display:none}
.c-final{max-width:480px;margin:24px auto 0;padding:24px;background:linear-gradient(135deg,#c987a5,#a974c4);color:#fff;border-radius:16px;font:italic 600 17px/1.75 var(--serif);box-shadow:0 12px 26px #a974c44d;animation:cPop .9s ease}
@keyframes cPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

/* ---- Final Surprise ---- */
.g-gift-section{position:relative;overflow:hidden;text-align:center;color:#f6eefc;background:linear-gradient(180deg,#0e1030,#1b1647 60%,#2a1c55)}
.g-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 20%,#ffd88a22,transparent 40%),radial-gradient(circle at 80% 70%,#f2a6c533,transparent 45%),radial-gradient(circle,#ffffff55 1px,transparent 1.5px) 0 0/60px 60px;opacity:.7}
.g-inner{position:relative;z-index:2;max-width:620px;margin:0 auto}
.g-eyebrow{display:block;font:10px var(--mono);letter-spacing:.14em;color:#c7b9ee}
.g-title{margin:16px 0 8px;font:600 clamp(22px,6vw,36px)/1.2 var(--serif);letter-spacing:.01em;color:#fff}
.g-title em{color:#ffd88a;font-weight:500}
.g-scene{position:relative;height:400px;display:flex;justify-content:center;align-items:flex-end;padding-bottom:30px}
.g-glow{position:absolute;left:50%;bottom:40px;width:320px;height:320px;margin-left:-160px;border-radius:50%;background:radial-gradient(circle,#ffd88a66,#f2a6c533 45%,transparent 70%);opacity:.35;transition:opacity 1s;animation:gBreath 4s ease-in-out infinite alternate}
@keyframes gBreath{to{transform:scale(1.12);opacity:.55}}
.g-box{position:relative;width:180px;height:200px;margin-left:-44px;animation:gFloat 5s ease-in-out infinite alternate;filter:drop-shadow(0 22px 18px #0008)}
@keyframes gFloat{to{transform:translateY(-8px)}}
.g-body{position:absolute;left:0;bottom:0;width:180px;height:128px;background:linear-gradient(180deg,#f6bdd3,#e5a0bd 60%,#d98aab)}
.g-body:after{content:"";position:absolute;left:100%;top:0;width:44px;height:100%;background:linear-gradient(180deg,#c9779a,#b0618a);transform-origin:0 0;transform:skewY(-32deg)}
.g-body:before{content:"";position:absolute;left:0;bottom:100%;width:calc(100% + 44px);height:27px;background:radial-gradient(ellipse at 50% 60%,#ffe9b0aa,#8a4474 55%,#5b2a52);clip-path:polygon(0 100%,calc(100% - 44px) 100%,100% 0,44px 0)}
.g-rib-v,.g-lid-rib{z-index:1;position:absolute;left:50%;width:28px;margin-left:-14px;top:0;bottom:0;background:linear-gradient(90deg,#d9b25c,#f7e2a2 45%,#d3a94e)}
.g-lid{position:absolute;left:-8px;bottom:128px;width:196px;height:50px;background:linear-gradient(180deg,#fbd2e2,#eeaac6);transition:transform 1.1s cubic-bezier(.3,1.2,.4,1);z-index:2}
.g-lid:after{content:"";position:absolute;left:100%;top:0;width:44px;height:100%;background:linear-gradient(180deg,#d684a6,#bd6a93);transform-origin:0 0;transform:skewY(-32deg)}
.g-lid:before{content:"";position:absolute;left:0;bottom:100%;width:calc(100% + 44px);height:27px;background:linear-gradient(90deg,#fde0ec,#f4bad2);clip-path:polygon(0 100%,calc(100% - 44px) 100%,100% 0,44px 0)}
.g-bow{position:absolute;left:50%;bottom:calc(100% + 3px);margin-left:22px;width:0;height:0;z-index:3}
.g-bow i{position:absolute;bottom:-4px;width:54px;height:34px;border:10px solid #e5bf67;border-radius:50% 50% 50% 50%;box-shadow:inset 0 0 6px #fff7;background:#ffffff08}
.g-bow i:first-child{right:2px;transform:rotate(-24deg);transform-origin:100% 100%}
.g-bow i:nth-child(2){left:2px;transform:rotate(24deg);transform-origin:0 100%}
.g-bow b{position:absolute;left:-10px;bottom:-6px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#f7e2a2,#cfa247)}
.g-top-rib{position:absolute;left:84px;bottom:100%;width:72px;height:27px;z-index:1;background:linear-gradient(90deg,#d9b25c,#f7e2a2 45%,#d3a94e);clip-path:polygon(0 100%,28px 100%,72px 0,44px 0)}
.g-scene.is-open .g-lid{transform:translate(-34px,-92px) rotate(-14deg)}
.g-scene.is-open .g-glow{opacity:.95;animation:none;transform:scale(1.25)}
.g-parts{position:absolute;left:50%;bottom:120px;width:0;height:0;pointer-events:none}
.g-parts i{position:absolute;font-style:normal;font-size:18px;animation:gFly 2.4s ease-out forwards}
@keyframes gFly{from{opacity:1;transform:translate(0,0) scale(.5)}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1.1)}}
.g-btn{font:11px var(--mono);letter-spacing:.14em;color:#2a1c3a;background:linear-gradient(135deg,#ffe7a8,#ffc9de);border:0;border-radius:40px;padding:17px 30px;cursor:pointer;box-shadow:0 0 26px #ffd88a55;transition:.25s}
.g-btn:hover{transform:translateY(-2px)}
.g-btn[hidden]{display:none}
.g-card{margin:26px auto 0;padding:34px 28px 26px;text-align:left;background:#fffaf0 repeating-linear-gradient(transparent 0 35px,#eddfc6 36px) 0 34px;color:#463a3f;border-radius:6px;box-shadow:0 22px 50px #0009,0 0 0 1px #e9d7b4;animation:gCard 1s cubic-bezier(.2,.9,.3,1)}
@keyframes gCard{from{opacity:0;transform:translateY(40px) scale(.92)}to{opacity:1;transform:none}}
.g-card-text{white-space:pre-wrap;font:20px/1.8 var(--hand);overflow-wrap:anywhere}
.g-close{display:block;margin:20px auto 0;background:none;border:0;font:10px var(--mono);letter-spacing:.12em;color:#9a5b6a;cursor:pointer;padding:10px}

@media(max-width:560px){.u-universe{padding:70px 5% 60px}.g-card{padding:30px 20px 22px}.g-card-text{font-size:19px}.c-stage{min-height:310px}}
@media(prefers-reduced-motion:reduce){.u-neb,.u-btn,.c-cookie,.c-glitter,.g-box,.g-glow,.u-universe.is-in .u-rays,.u-universe.is-in .o1,.u-universe.is-in .o2,.u-universe.is-in .o3,.c-final,.g-card{animation:none!important}.u-core,.c-half,.c-slip,.g-lid{transition-duration:.01s}}