:root{
  --sand-0:#fff8df;
  --sand-1:#f6e2a4;
  --sand-2:#e6bc60;
  --sand-3:#c98c32;
  --leaf:#5f7f36;
  --leaf-dark:#35562f;
  --moss:#456b37;
  --orange:#de8c27;
  --amber:#f4b844;
  --brown:#5a3523;
  --brown-2:#7b4c2d;
  --paper:#fffdf7;
  --paper-2:#fff7e8;
  --ink:#4b3124;
  --muted:#7b6657;
  --line:rgba(102,73,45,.14);
  --shadow:0 28px 80px rgba(76,49,20,.22);
  --ff-display:"Baloo 2","Fredoka",system-ui,sans-serif;
  --ff-body:"Nunito",system-ui,sans-serif;
  --ff-cute:"Fredoka","Nunito",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100%;
  color:var(--ink);
  font-family:var(--ff-body);
  background:#e3bc63;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
button{font:inherit}
button:focus-visible{outline:3px solid rgba(245,177,55,.65);outline-offset:3px}
.hidden{display:none!important}

.savannaBg{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 8%,rgba(255,255,255,.55),transparent 22%),
    radial-gradient(circle at 82% 18%,rgba(255,235,168,.28),transparent 25%),
    linear-gradient(180deg,#fff2c5 0%,#f1d486 48%,#d3a64b 100%);
}
.savannaBg::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:radial-gradient(rgba(103,73,34,.22) .7px,transparent .7px);
  background-size:9px 9px;
  mask-image:linear-gradient(to bottom,transparent,black 30%,black 75%,transparent);
}
.sun{
  position:absolute;right:-55px;top:-55px;width:230px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 42%,#fffbe2 0 17%,#ffe38c 30%,rgba(249,190,65,.58) 54%,transparent 72%);
  filter:drop-shadow(0 0 32px rgba(255,210,97,.42));
}
.cloud{position:absolute;width:130px;height:28px;border-radius:999px;background:rgba(255,255,255,.32);filter:blur(.3px)}
.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud::before{width:45px;height:45px;left:18px;bottom:4px}.cloud::after{width:58px;height:58px;right:16px;bottom:1px}
.cloud--a{top:80px;left:-180px;animation:cloudDrift 26s linear infinite}.cloud--b{top:170px;left:-220px;opacity:.55;transform:scale(.74);animation:cloudDrift 36s linear infinite 7s}
@keyframes cloudDrift{to{translate:calc(100vw + 420px) 0}}

.leaf{position:absolute;width:72px;height:27px;border-radius:90% 10% 90% 10%;background:linear-gradient(135deg,rgba(62,106,45,.45),rgba(111,139,58,.15));filter:blur(.1px);animation:leafFloat 4.8s ease-in-out infinite}
.leaf--1{left:-15px;top:34px;rotate:-24deg}.leaf--2{left:12px;top:112px;rotate:-36deg;scale:.72}.leaf--3{right:5px;top:125px;rotate:17deg;animation-delay:.6s}.leaf--4{right:-10px;top:34px;rotate:-18deg;scale:.8;animation-delay:1.3s}.leaf--5{left:2vw;bottom:15vh;rotate:32deg;scale:.6;opacity:.45}
@keyframes leafFloat{50%{translate:0 -7px;rotate:8deg}}
.horizon{position:absolute;left:-10%;right:-10%;bottom:-85px;height:270px;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 50% 0%,rgba(92,127,54,.48),rgba(92,127,54,.12) 52%,transparent 72%)}

.pageShell{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:max(18px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
}

.invite{
  position:relative;
  width:min(100%,600px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.72);
  border-radius:34px;
  background:
    linear-gradient(rgba(255,253,247,.96),rgba(255,250,238,.98)),
    radial-gradient(#d2aa69 1px,transparent 1px);
  background-size:auto,14px 14px;
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(107,75,38,.07);
  isolation:isolate;
}
.invite::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.3;
  background:linear-gradient(115deg,transparent 0 48%,rgba(227,183,100,.08) 49% 51%,transparent 52% 100%);
  background-size:38px 38px;
}
.invite__topline{height:7px;background:linear-gradient(90deg,var(--leaf-dark),#7c9a44 30%,var(--amber) 52%,#ca7430 70%,var(--leaf-dark))}

.hero{padding:10px 10px 0;text-align:center}
.hero__media{position:relative;aspect-ratio:16/9;min-height:205px;border-radius:25px 25px 16px 16px;overflow:hidden;background:#9bb969;border:1px solid rgba(63,86,47,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.hero__video{width:100%;height:100%;display:block;object-fit:cover;object-position:center 42%}
.hero__fallback{position:absolute;inset:0;display:grid;place-content:center;gap:8px;background:linear-gradient(180deg,#badb86,#6c984d);color:#fff;opacity:0;pointer-events:none;transition:.25s}
.hero__fallback.is-visible{opacity:1}.hero__fallback span{font-size:3rem}.hero__fallback strong{font:800 1.15rem var(--ff-cute)}
.hero__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(32,52,25,.1),transparent 36%,rgba(23,31,18,.53) 100%),radial-gradient(circle at 50% 45%,transparent 0 42%,rgba(41,53,29,.17) 100%)}
.hero__canopy{position:absolute;left:-2%;right:-2%;top:-18px;height:76px;opacity:.8;filter:drop-shadow(0 6px 5px rgba(37,55,29,.16));background:radial-gradient(45px 34px at 5% 65%,#3e7338 0 54%,transparent 56%),radial-gradient(48px 34px at 17% 55%,#4f833e 0 54%,transparent 56%),radial-gradient(50px 34px at 31% 67%,#3c6c33 0 54%,transparent 56%),radial-gradient(52px 36px at 46% 53%,#4c7d39 0 54%,transparent 56%),radial-gradient(50px 34px at 62% 65%,#3a6932 0 54%,transparent 56%),radial-gradient(50px 36px at 78% 52%,#4c7d39 0 54%,transparent 56%),radial-gradient(48px 34px at 94% 66%,#3b6e34 0 54%,transparent 56%)}
.hero__dust i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff2b7;box-shadow:0 0 8px #ffdc7c;opacity:.6;animation:dust 3.5s ease-in-out infinite}.hero__dust i:nth-child(1){left:12%;top:40%;animation-delay:.2s}.hero__dust i:nth-child(2){left:75%;top:24%;animation-delay:1s}.hero__dust i:nth-child(3){left:84%;top:58%;animation-delay:1.8s}.hero__dust i:nth-child(4){left:28%;top:68%;animation-delay:2.4s}@keyframes dust{50%{translate:0 -10px;opacity:1}}

.hero__badge{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);width:min(92%,430px);color:#fff;text-shadow:0 2px 12px rgba(37,24,11,.5)}
.hero__eyebrow{display:inline-block;margin-bottom:2px;padding:4px 10px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(46,64,37,.38);backdrop-filter:blur(6px);font:700 .69rem var(--ff-cute);letter-spacing:.08em;text-transform:uppercase}
.hero__badge h1{margin:-2px 0 -8px;font:800 clamp(2.5rem,10vw,4.35rem)/1 var(--ff-display);letter-spacing:.01em}
.hero__badge p{display:inline-block;margin:4px 0 0;padding:4px 12px;border-radius:999px;background:#f0a52f;color:#fff;font:800 .98rem var(--ff-cute);box-shadow:0 3px 0 rgba(90,54,25,.18);text-shadow:0 1px 2px rgba(80,44,10,.25)}
.hero__intro{position:relative;padding:18px 20px 4px}.hero__intro p{margin:0 auto;max-width:360px;font:700 clamp(.98rem,3.2vw,1.12rem)/1.35 var(--ff-cute)}
.tinyCrown{display:block;color:#ce8726;font-size:1.12rem;line-height:1;margin-bottom:2px}.hero__divider{display:block;width:64px;height:5px;margin:12px auto 0;border-radius:999px;background:linear-gradient(90deg,transparent,#ca9c55,transparent)}

.stage{padding:10px 20px 24px}.stage--envelope{text-align:center;padding-top:8px}.preEnvelope{margin:2px 0 13px;color:var(--muted);font:600 .85rem var(--ff-cute)}
.envelopeButton{position:relative;display:flex;width:100%;flex-direction:column;align-items:center;gap:10px;border:0;background:transparent;padding:6px 0 4px;cursor:pointer;color:inherit}.envelopeButton:disabled{cursor:default}.tapHalo{position:absolute;top:20px;left:50%;width:245px;height:155px;translate:-50% 0;border-radius:50%;background:radial-gradient(ellipse,rgba(246,188,67,.2),transparent 68%);animation:haloPulse 2s ease-in-out infinite}@keyframes haloPulse{50%{scale:1.08;opacity:.55}}
.envelope{position:relative;width:min(260px,72vw);aspect-ratio:1.56/1;perspective:900px;transform-style:preserve-3d;filter:drop-shadow(0 13px 16px rgba(81,57,28,.18));transition:transform .2s ease}.envelopeButton:not(:disabled):hover .envelope{transform:translateY(-3px) rotate(-.5deg)}
.envelope__shadow{position:absolute;left:9%;right:9%;bottom:-12px;height:20px;border-radius:50%;background:rgba(77,56,29,.17);filter:blur(8px);z-index:0}
.envelope__back{position:absolute;inset:0;border-radius:16px;background:linear-gradient(180deg,#7dbf54,#56a643);border:2px solid #4f8e3d;z-index:1;box-shadow:inset 0 1px rgba(255,255,255,.38),inset 0 -13px 22px rgba(37,88,31,.13)}
.envelope__letter{position:absolute;left:15px;right:15px;top:20px;height:66%;z-index:3;border-radius:12px;background:linear-gradient(180deg,#fffef9,#fff6e1);border:1px solid #ead6ad;opacity:0;transform:translateY(28px) scale(.97);transition:transform .72s cubic-bezier(.2,.85,.2,1.16),opacity .2s ease;box-shadow:0 5px 14px rgba(86,59,30,.1);display:grid;place-items:center}.letterMark{display:grid;place-items:center;width:58px;aspect-ratio:1;border-radius:50%;background:#f0bb4d;color:#65412a;font:800 2rem var(--ff-display);border:2px dashed rgba(93,57,31,.25)}
.envelope__flap{position:absolute;left:0;right:0;top:0;height:61%;z-index:6;transform-origin:top center;transition:transform .78s cubic-bezier(.2,.75,.18,1);clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(160deg,#83ca5d,#5fb048);border-top-left-radius:14px;border-top-right-radius:14px;backface-visibility:hidden;box-shadow:inset 0 1px rgba(255,255,255,.35)}
.envelope__front{position:absolute;inset:41% 0 0;z-index:5;border-radius:0 0 16px 16px;overflow:hidden;background:linear-gradient(180deg,#68b64a,#4d9f3f);border:2px solid #4b8d39;border-top:0}.envelope__front::before,.envelope__front::after{content:"";position:absolute;top:0;width:62%;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(51,99,39,.14))}.envelope__front::before{left:0;clip-path:polygon(0 0,100% 100%,0 100%)}.envelope__front::after{right:0;clip-path:polygon(100% 0,0 100%,100% 100%)}
.envelope__seal{position:absolute;z-index:8;left:50%;top:56%;translate:-50% -50%;width:76px;height:68px;display:grid;place-items:center;transition:transform .4s ease,opacity .3s ease;filter:drop-shadow(0 4px 4px rgba(67,43,20,.16))}.envelope__seal img{display:block;width:100%;height:100%;object-fit:contain}
.envelope.is-flap-open .envelope__flap{transform:rotateX(178deg);z-index:2}.envelope.is-flap-open .envelope__seal{transform:translateY(8px) scale(.82);opacity:0}.envelope.is-letter-out .envelope__letter{opacity:1;transform:translateY(-58px) scale(1)}.envelope.is-letter-out .envelope__shadow{transform:scaleX(1.12);opacity:.65}
.envelopeHint{font:800 .94rem var(--ff-cute);color:#674631;animation:hint 1.45s ease-in-out infinite}.envelopeHint b{display:inline-block;font-size:.9rem}@keyframes hint{50%{translate:0 -2px}}

.stage--content{position:relative;padding-top:2px;animation:reveal .55s ease both}.stage--content.is-visible{display:block}@keyframes reveal{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.revealRibbon{display:flex;justify-content:center;margin:2px 0 12px}.revealRibbon span{position:relative;padding:7px 20px;background:linear-gradient(180deg,#6d8a3f,#4e6e35);color:#fff8dd;font:800 .72rem var(--ff-cute);letter-spacing:.18em;border-radius:4px;box-shadow:0 5px 10px rgba(65,89,43,.16)}.revealRibbon span::before,.revealRibbon span::after{content:"";position:absolute;top:4px;width:14px;height:100%;background:#46612f;z-index:-1}.revealRibbon span::before{left:-9px;transform:skewY(-18deg)}.revealRibbon span::after{right:-9px;transform:skewY(18deg)}
.storyCard{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin:0 auto 22px;padding:16px 15px;border:1px solid #e5cf9f;border-radius:20px;background:linear-gradient(180deg,#fffaf0,#fff4da);box-shadow:0 7px 18px rgba(99,67,29,.07)}.storyCard p{margin:0;text-align:center;font:700 .95rem/1.4 var(--ff-cute)}.storyCard__icon{font-size:1.1rem}
.sectionKicker{margin:0 0 2px;color:#aa7429;text-transform:uppercase;letter-spacing:.12em;font:800 .68rem var(--ff-cute)}.eventSection h2,.countdownCard h2,.actionSection h2{margin:0;color:var(--brown);font:800 1.35rem/1.1 var(--ff-display)}
.eventSection{text-align:center;margin:6px 0 20px}.eventTickets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.ticket{position:relative;min-height:105px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;border-radius:20px;background:linear-gradient(150deg,#fffdf7,#fff1d1);border:1px solid #e8d1a7;box-shadow:0 8px 20px rgba(97,66,29,.07);overflow:hidden}.ticket::after{content:"";position:absolute;inset:auto -20px -38px;width:85px;aspect-ratio:1;border-radius:50%;background:rgba(228,172,67,.1)}.ticket__icon{font-size:1.35rem}.ticket__label{color:var(--muted);font:700 .69rem var(--ff-cute);text-transform:uppercase;letter-spacing:.1em}.ticket strong{font:800 1.02rem var(--ff-display);color:#5c3925}

.placeCard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:15px;border-radius:22px;background:linear-gradient(140deg,#607a3f,#3f6437);color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 24px rgba(59,83,43,.16)}.placeCard__pin{display:grid;place-items:center;width:46px;aspect-ratio:1;border-radius:16px;background:rgba(255,255,255,.13);font-size:1.25rem}.placeCard__copy{min-width:0}.placeCard__copy>span{font:700 .66rem var(--ff-cute);letter-spacing:.08em;text-transform:uppercase;color:#f6db9b}.placeCard h2{margin:2px 0 0;font:800 1rem/1.15 var(--ff-display);color:#fff}.placeCard p{margin:3px 0 0;font-size:.73rem;line-height:1.25;color:rgba(255,255,255,.76)}.miniMapBtn{border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:9px 11px;background:#f6be50;color:#5b3b25;font:800 .72rem var(--ff-cute);cursor:pointer;box-shadow:0 3px 0 rgba(39,65,33,.2)}

.countdownCard{margin-top:18px;padding:18px 12px;text-align:center;border-radius:24px;background:linear-gradient(180deg,rgba(255,247,224,.92),rgba(255,236,188,.68));border:1px dashed rgba(161,112,42,.3)}.countdown{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:4px;margin:14px auto 7px;max-width:390px}.countdown div{display:flex;min-width:0;flex-direction:column;align-items:center;padding:8px 4px;border-radius:16px;background:rgba(255,255,255,.64);border:1px solid rgba(190,138,64,.14)}.countdown strong{font:800 clamp(1.25rem,5vw,1.75rem)/1 var(--ff-display);color:#7a4b27}.countdown span{margin-top:4px;color:var(--muted);font:700 .58rem var(--ff-cute);text-transform:uppercase;letter-spacing:.05em}.countdown i{font-style:normal;font:800 1.1rem var(--ff-display);color:#c8933c;opacity:.6}.countdownText{margin:7px 0 0;color:#8b6e52;font-size:.72rem;font-weight:700}

.actionSection{margin-top:20px;text-align:center}.actionGrid{display:grid;gap:9px;margin-top:12px}.actionBtn{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;width:100%;min-height:68px;padding:10px 13px;border:1px solid #ead7b7;border-radius:19px;background:rgba(255,255,255,.78);color:var(--ink);text-align:left;cursor:pointer;box-shadow:0 7px 18px rgba(94,65,31,.06);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.actionBtn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(94,65,31,.1);border-color:#daba7f}.actionBtn__icon{display:grid;place-items:center;width:44px;aspect-ratio:1;border-radius:15px;background:#f7ead0;font-size:1.16rem}.actionBtn strong{display:block;font:800 .9rem var(--ff-cute)}.actionBtn small{display:block;margin-top:1px;color:var(--muted);font-size:.68rem;font-weight:700}.actionBtn>b{font:800 1.5rem var(--ff-display);color:#bd8735}.actionBtn--primary{background:linear-gradient(135deg,#f2b84d,#df8c2f);border-color:#d68b2e;color:#fff}.actionBtn--primary .actionBtn__icon{background:rgba(255,255,255,.2)}.actionBtn--primary small{color:rgba(255,255,255,.8)}.actionBtn--primary>b{color:#fff}
.friendsDecor{height:82px;position:relative;margin-top:10px;pointer-events:none}.friendsDecor img{position:absolute;width:150px;right:-15px;bottom:-31px;filter:drop-shadow(0 7px 10px rgba(58,60,31,.12));transform:rotate(1.5deg)}

.footerArt{padding:0 10px 10px}.footerArt__frame{position:relative;overflow:hidden;min-height:180px;border-radius:20px 20px 24px 24px;background:#d99e45;box-shadow:inset 0 0 0 1px rgba(105,67,27,.12)}.footerArt img{width:100%;height:100%;min-height:180px;display:block;object-fit:cover;object-position:center 54%}.footerArt__gradient{position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(70,42,20,.74) 100%)}.footerArt__text{position:absolute;left:18px;right:18px;bottom:13px;margin:0;color:#fff;text-align:center;font:800 .88rem/1.25 var(--ff-cute);text-shadow:0 2px 8px rgba(52,33,19,.5)}
.cornerPaw{position:absolute;z-index:-1;font-size:1.8rem;opacity:.08;filter:grayscale(1)}.cornerPaw--a{left:11px;top:52%}.cornerPaw--b{right:10px;top:67%;rotate:18deg}.pageCredit{margin:0;color:rgba(81,55,28,.72);font:700 .7rem var(--ff-cute);text-align:center}

.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:end center;padding:18px}.modal__backdrop{position:absolute;inset:0;border:0;background:rgba(48,35,22,.56);backdrop-filter:blur(5px);cursor:pointer}.modal__panel{position:relative;width:min(100%,470px);padding:28px 20px 20px;border-radius:30px;background:linear-gradient(180deg,#fffdf7,#fff4dd);box-shadow:0 24px 90px rgba(38,27,17,.34);border:1px solid rgba(255,255,255,.7);animation:modalUp .3s ease both;overflow:hidden}@keyframes modalUp{from{opacity:0;translate:0 20px;scale:.98}}
.modal__friends{position:absolute;right:-26px;top:-38px;width:155px;opacity:.18;rotate:8deg}.modal__close{position:absolute;right:14px;top:14px;z-index:2;width:38px;aspect-ratio:1;border:0;border-radius:50%;background:#f0e0bf;color:#76523a;font-size:1.35rem;cursor:pointer}.modal__kicker{margin:0;color:#a66e23;font:800 .67rem var(--ff-cute);letter-spacing:.12em;text-transform:uppercase}.modal h2{position:relative;margin:3px 50px 4px 0;font:800 1.5rem/1.1 var(--ff-display);color:#5b3825}.modal__intro{margin:0 0 14px;color:var(--muted);font-size:.82rem}.giftList{display:grid;gap:8px}.giftItem{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:center;padding:11px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid #ead8b7}.giftItem>span{display:grid;place-items:center;width:42px;aspect-ratio:1;border-radius:14px;background:#f8e5bd}.giftItem strong{display:block;font:800 .84rem var(--ff-cute)}.giftItem small{display:block;color:var(--muted);font-size:.7rem;font-weight:700}.modal__note{margin:14px 0 13px;text-align:center;color:#705440;font-size:.76rem;font-weight:700}.modal__ok{width:100%;border:0;border-radius:16px;padding:12px;background:linear-gradient(135deg,#6f8f46,#4c7038);color:#fff;font:800 .88rem var(--ff-cute);cursor:pointer;box-shadow:0 4px 0 #35562f}
body.modal-open{overflow:hidden}

.celebration{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}.celebration span{position:absolute;top:45%;left:50%;width:9px;height:16px;border-radius:999px;background:#efb341;animation:burst 1s cubic-bezier(.16,.76,.35,1) forwards;opacity:0}.celebration span:nth-child(3n){background:#6f9648}.celebration span:nth-child(3n+2){background:#df7f32}@keyframes burst{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) translateY(0) scale(.7)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) translateY(var(--d)) rotate(260deg) scale(1)}}

@media (min-width:680px){.pageShell{padding-top:36px}.invite{border-radius:38px}.hero{padding:12px 12px 0}.hero__media{min-height:290px}.stage{padding-inline:34px}.footerArt{padding:0 12px 12px}.footerArt__frame{min-height:225px}.footerArt img{min-height:225px}.friendsDecor img{width:180px;right:-25px}.modal{place-items:center}}

@media (max-width:420px){.pageShell{padding-inline:7px}.invite{border-radius:27px}.hero{padding:7px 7px 0}.hero__media{min-height:190px;border-radius:21px 21px 14px 14px}.stage{padding-inline:14px}.hero__intro{padding-inline:12px}.eventTickets{gap:8px}.ticket{min-height:96px}.placeCard{grid-template-columns:auto 1fr}.miniMapBtn{grid-column:1/-1;width:100%}.friendsDecor{height:62px}.friendsDecor img{width:130px;right:-8px}.footerArt{padding:0 7px 7px}.countdown{gap:2px}.countdown div{padding-inline:2px}.modal{padding:10px}.modal__panel{border-radius:25px}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}

/* =========================================================
   V3 — hierarquia do hero + ilustrações infantis próprias
   ========================================================= */
.hero__fallback img{
  width:72px;
  height:72px;
  object-fit:contain;
  margin:0 auto;
  filter:drop-shadow(0 6px 10px rgba(48,34,20,.22));
}

.hero__badge{
  bottom:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.hero__badge h1{
  margin:0;
  font-size:clamp(2.65rem,10.5vw,4.55rem);
  line-height:.88;
  text-shadow:0 3px 16px rgba(37,24,11,.62),0 1px 0 rgba(255,255,255,.18);
}

.hero__eyebrow{
  order:2;
  margin:1px 0 0;
  padding:3px 10px;
  background:rgba(41,60,32,.48);
  border-color:rgba(255,255,255,.22);
  font-size:.65rem;
  letter-spacing:.095em;
}

.hero__agePill{
  order:3;
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  margin:0 !important;
  padding:5px 10px 5px 12px !important;
}

.hero__agePill img{
  width:22px;
  height:22px;
  object-fit:contain;
  filter:drop-shadow(0 1px 1px rgba(73,46,22,.16));
}

.tinyCrown{
  width:22px;
  height:22px;
  margin:0 auto 4px;
}
.tinyCrown img{width:100%;height:100%;object-fit:contain;transform:rotate(-12deg)}

.sparkleMark{
  position:relative;
  display:inline-block;
  width:13px;
  height:13px;
  margin-left:3px;
  vertical-align:-1px;
}
.sparkleMark::before,.sparkleMark::after{
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:#d99a34;
}
.sparkleMark::before{width:3px;height:13px}.sparkleMark::after{width:13px;height:3px}

.storyCard__icon{width:27px;height:27px;display:grid;place-items:center}
.storyCard__icon img{width:100%;height:100%;object-fit:contain}
.storyCard__icon--flip{transform:scaleX(-1)}

.ticket__icon{
  width:38px;
  height:38px;
  margin-bottom:3px;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 3px 4px rgba(95,63,29,.08));
}
.ticket__icon img{width:100%;height:100%;object-fit:contain}

.placeCard__pin{
  width:50px;
  border-radius:18px;
  background:rgba(255,250,233,.95);
  box-shadow:inset 0 0 0 1px rgba(73,61,36,.08),0 4px 10px rgba(31,47,25,.08);
}
.placeCard__pin img{width:34px;height:34px;object-fit:contain}

.actionBtn__icon{
  width:48px;
  border-radius:17px;
  background:linear-gradient(150deg,#fff9eb,#f5e3bd);
  border:1px solid rgba(112,78,40,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.actionBtn__icon img{width:34px;height:34px;object-fit:contain}
.actionBtn--primary .actionBtn__icon{
  background:rgba(255,251,238,.94);
  border-color:rgba(97,61,30,.1);
}

.giftItem>span{
  width:46px;
  border-radius:16px;
  background:linear-gradient(150deg,#fff8e6,#f7e4bc);
  border:1px solid rgba(112,78,40,.09);
}
.giftItem>span img{width:34px;height:34px;object-fit:contain}

.cornerPaw{width:34px;height:34px;font-size:0;filter:none;opacity:.075}
.cornerPaw img{width:100%;height:100%;object-fit:contain}

.pageCredit{
  max-width:420px;
  margin:2px auto 0;
  padding:0 16px;
  color:rgba(81,55,28,.68);
  font:700 .72rem/1.4 var(--ff-cute);
  letter-spacing:.01em;
}
.pageCredit::before,.pageCredit::after{
  content:"";
  display:inline-block;
  width:16px;
  height:1px;
  margin:0 7px 3px;
  background:rgba(107,83,48,.28);
}

@media (max-width:420px){
  .hero__badge{bottom:12px;gap:3px}
  .hero__badge h1{font-size:clamp(2.5rem,13vw,3.25rem)}
  .hero__eyebrow{font-size:.59rem;padding:3px 8px}
  .hero__agePill{font-size:.86rem !important;padding:4px 9px 4px 10px !important}
  .hero__agePill img{width:19px;height:19px}
  .actionBtn__icon{width:45px}
  .actionBtn__icon img{width:31px;height:31px}
}

/* =========================================================
   V4 — personagens com função narrativa, não “soltos”
   ========================================================= */

/* Pequena transição visual: Simba literalmente caminha para a próxima parte. */
.journeyDivider{
  position:relative;
  height:86px;
  margin:10px 2px 4px;
  overflow:hidden;
  border-radius:20px;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.72),transparent 24%),
    linear-gradient(180deg,rgba(250,227,169,.46),rgba(250,241,213,.2));
}
.journeyDivider::after{
  content:"";
  position:absolute;
  left:7%;right:7%;bottom:18px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(135,94,45,.17) 16% 82%,transparent);
}
.journeyDivider img{
  position:absolute;
  z-index:3;
  width:106px;
  right:8%;
  bottom:4px;
  object-fit:contain;
  filter:drop-shadow(0 7px 7px rgba(81,56,27,.14));
  transform:rotate(-1deg);
}
.journeyDivider__trail{
  position:absolute;
  left:13%;right:32%;bottom:24px;
  height:22px;
}
.journeyDivider__trail i{
  position:absolute;
  width:7px;height:9px;
  border-radius:55% 55% 60% 60%;
  background:rgba(111,75,39,.18);
  transform:rotate(35deg);
}
.journeyDivider__trail i:nth-child(1){left:4%;bottom:0}
.journeyDivider__trail i:nth-child(2){left:22%;bottom:8px;transform:rotate(25deg) scale(.92)}
.journeyDivider__trail i:nth-child(3){left:41%;bottom:2px;transform:rotate(38deg) scale(.84)}
.journeyDivider__trail i:nth-child(4){left:60%;bottom:10px;transform:rotate(29deg) scale(.76)}
.journeyDivider__trail i:nth-child(5){left:79%;bottom:3px;transform:rotate(39deg) scale(.68)}
.journeyDivider__label{
  position:absolute;
  z-index:2;
  left:9%;top:17px;
  color:#9b682c;
  font:800 .64rem var(--ff-cute);
  letter-spacing:.11em;
  text-transform:uppercase;
}

/* O antigo PNG flutuante virou uma “cena” própria. */
.savannaScene{
  position:relative;
  min-height:190px;
  margin:22px 0 4px;
  overflow:hidden;
  border:1px solid rgba(129,92,45,.13);
  border-radius:28px;
  background:
    radial-gradient(circle at 72% 18%,rgba(255,248,204,.92),transparent 17%),
    linear-gradient(180deg,#f9e5a8 0%,#efc66e 52%,#b6a652 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.56),0 12px 25px rgba(88,62,30,.08);
  isolation:isolate;
}
.savannaScene::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 15% 22%,rgba(255,255,255,.42),transparent 18%),
    linear-gradient(90deg,rgba(255,255,255,.1),transparent 38%);
}
.savannaScene__sun{
  position:absolute;
  right:14%;top:14px;
  width:48px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff6ca 0 34%,#f7ce62 62%,rgba(247,206,98,.08) 72%);
  box-shadow:0 0 24px rgba(246,196,68,.36);
}
.savannaScene__hill{
  position:absolute;
  left:-12%;width:124%;
  border-radius:50% 50% 0 0;
  pointer-events:none;
}
.savannaScene__hill--back{
  bottom:20px;height:82px;
  background:rgba(115,139,64,.28);
  transform:rotate(-2deg);
}
.savannaScene__hill--front{
  bottom:-38px;height:105px;
  background:linear-gradient(180deg,#718b45,#4e7138);
  transform:rotate(1deg);
}
.savannaScene__copy{
  position:relative;
  z-index:4;
  width:55%;
  margin:38px auto 0;
  text-align:center;
  text-shadow:0 1px rgba(255,255,255,.24);
}
.savannaScene__copy span{
  display:block;
  margin-bottom:2px;
  color:#926126;
  font:800 .61rem var(--ff-cute);
  letter-spacing:.11em;
  text-transform:uppercase;
}
.savannaScene__copy strong{
  display:block;
  color:#563521;
  font:800 clamp(1.2rem,4.8vw,1.65rem)/1.02 var(--ff-display);
}
.savannaScene__copy small{
  display:block;
  max-width:180px;
  margin:5px auto 0;
  color:#775b3d;
  font:700 .68rem/1.3 var(--ff-cute);
}
.savannaScene__nala{
  position:absolute;
  z-index:3;
  left:-15px;
  bottom:-21px;
  width:148px;
  max-height:176px;
  object-fit:contain;
  object-position:bottom;
  filter:drop-shadow(0 8px 8px rgba(72,51,27,.13));
}
.savannaScene__friends{
  position:absolute;
  z-index:3;
  right:-18px;
  bottom:-13px;
  width:155px;
  filter:drop-shadow(0 8px 8px rgba(55,53,26,.15));
}
.savannaScene__grass{
  position:absolute;
  z-index:5;
  left:-2%;right:-2%;bottom:-1px;height:27px;
  background:
    linear-gradient(72deg,transparent 47%,#496b38 49% 53%,transparent 55%) 0 100%/17px 27px repeat-x,
    linear-gradient(108deg,transparent 47%,#5b7b3c 49% 53%,transparent 55%) 8px 100%/19px 24px repeat-x;
  opacity:.85;
  pointer-events:none;
}

/* A foto/arte final ganha respiro depois da cena, como fechamento da história. */
.footerArt{padding-top:8px}
.footerArt__frame{box-shadow:inset 0 0 0 1px rgba(105,67,27,.12),0 10px 25px rgba(86,57,29,.08)}

/* O personagem antigo não é mais usado como sticker flutuante. */
.friendsDecor{display:none!important}

@media (min-width:680px){
  .journeyDivider{height:98px;margin-top:14px}
  .journeyDivider img{width:126px;right:11%}
  .journeyDivider__label{left:11%;top:22px;font-size:.68rem}
  .savannaScene{min-height:220px;margin-top:26px}
  .savannaScene__nala{width:176px;left:-8px;bottom:-24px;max-height:205px}
  .savannaScene__friends{width:185px;right:-8px;bottom:-15px}
  .savannaScene__copy{margin-top:48px;width:48%}
  .savannaScene__copy small{max-width:210px}
}

@media (max-width:420px){
  .journeyDivider{height:76px;margin-inline:0}
  .journeyDivider img{width:88px;right:4%;bottom:3px}
  .journeyDivider__trail{left:12%;right:31%;bottom:20px}
  .journeyDivider__label{left:7%;top:14px;font-size:.56rem;letter-spacing:.09em}

  .savannaScene{min-height:176px;border-radius:24px}
  .savannaScene__copy{width:52%;margin-top:33px}
  .savannaScene__copy strong{font-size:1.15rem}
  .savannaScene__copy span{font-size:.53rem}
  .savannaScene__copy small{font-size:.61rem;max-width:140px}
  .savannaScene__nala{width:117px;left:-18px;bottom:-17px;max-height:150px}
  .savannaScene__friends{width:126px;right:-19px;bottom:-9px}
  .savannaScene__sun{width:40px;right:12%;top:13px}
}

@media (max-width:350px){
  .savannaScene__nala{width:102px;left:-24px}
  .savannaScene__friends{width:112px;right:-24px}
  .savannaScene__copy{width:56%}
}


/* =========================================================
   V5 — trilha sonora elegante, iniciada pelo envelope
   ========================================================= */
.musicControl{
  position:fixed;
  right:max(14px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  z-index:45;
  display:grid;
  grid-template-columns:38px auto 22px;
  align-items:center;
  gap:8px;
  min-height:54px;
  padding:7px 10px 7px 8px;
  border:1px solid rgba(104,73,41,.16);
  border-radius:999px;
  background:rgba(255,250,235,.91);
  color:#583a27;
  box-shadow:0 12px 32px rgba(70,49,27,.18),inset 0 1px rgba(255,255,255,.8);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  transition:opacity .28s ease,transform .28s ease,box-shadow .22s ease;
}
.musicControl:hover{transform:translateY(-2px);box-shadow:0 15px 36px rgba(70,49,27,.22),inset 0 1px rgba(255,255,255,.9)}
.musicControl.is-hidden{opacity:0;pointer-events:none;transform:translateY(10px) scale(.96)}
.musicControl__icon{
  display:grid;
  place-items:center;
  width:38px;
  aspect-ratio:1;
  border-radius:50%;
  background:linear-gradient(145deg,#fff3c7,#f4d681);
  box-shadow:inset 0 0 0 1px rgba(145,99,44,.12);
}
.musicControl__icon img{display:block;width:25px;height:25px;object-fit:contain}
.musicControl__copy{text-align:left;line-height:1.02;white-space:nowrap}
.musicControl__copy strong{display:block;font:800 .72rem var(--ff-cute);letter-spacing:.01em}
.musicControl__copy small{display:block;margin-top:3px;color:#8b725d;font:700 .58rem var(--ff-cute)}
.musicControl__bars{height:22px;display:flex;align-items:center;justify-content:center;gap:2px}
.musicControl__bars i{display:block;width:3px;height:7px;border-radius:999px;background:#78954c;transform-origin:center;opacity:.55}
.musicControl.is-playing .musicControl__bars i{animation:musicBar .72s ease-in-out infinite alternate;opacity:1}
.musicControl.is-playing .musicControl__bars i:nth-child(2){animation-delay:-.24s;height:13px}
.musicControl.is-playing .musicControl__bars i:nth-child(3){animation-delay:-.46s;height:9px}
.musicControl.is-ended .musicControl__bars i{background:#c48d39}
@keyframes musicBar{from{transform:scaleY(.48)}to{transform:scaleY(1.18)}}

@media (max-width:420px){
  .musicControl{right:max(9px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));grid-template-columns:36px auto 18px;min-height:50px;padding:6px 9px 6px 7px;gap:6px}
  .musicControl__icon{width:36px}
  .musicControl__copy strong{font-size:.67rem}
  .musicControl__copy small{display:none}
}

@media (prefers-reduced-motion:reduce){
  .musicControl.is-playing .musicControl__bars i{animation:none}
}