:root{
  --mint:#f4f9ee; --sage:#e1eed5; --sage-2:#cfe2bf; --grass:#5e9437; --grass-l:#86bb5c; --grass-d:#3f6e22;
  --pink:#f6c3cf; --pink-2:#f2b0c0; --rose:#e2809a; --ink:#161616; --cream:#fffdf7;
  --ease:cubic-bezier(.22,.8,.24,1);
  --top:calc(56px + env(safe-area-inset-top));
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  display:grid;place-items:center;background:radial-gradient(circle at 70% 20%,#f4f9ee,#c6dab3);
  font-family:'Cormorant Garamond',Georgia,serif;color:var(--ink);
  -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;
}
button,input,a{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{text-decoration:none}
[hidden]{display:none!important}

.app{position:relative;width:100%;height:100dvh;overflow:hidden;
  background:radial-gradient(90% 60% at 50% 42%,#fbfdf7 0%,var(--mint) 35%,var(--sage) 75%,var(--sage-2) 100%)}
@media (min-width:600px){
  .app{width:410px;height:min(calc(100dvh - 48px),880px);border-radius:40px;
       box-shadow:0 0 0 10px #121212,0 40px 90px rgba(40,70,30,.35)}
}

/* ---------- top bar ---------- */
.top{position:absolute;left:0;right:0;top:0;height:var(--top);padding:env(safe-area-inset-top) 14px 0;
  display:flex;align-items:center;justify-content:space-between;z-index:20;pointer-events:none}
.top>*{pointer-events:auto;transition:opacity .4s ease,transform .4s var(--ease)}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.icon-btn svg{width:20px;height:20px}
.lang-chip{height:34px;min-width:44px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-weight:700;font-size:14px;letter-spacing:.12em}
.top .off{opacity:0;pointer-events:none;transform:scale(.8)}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateX(40px);
  transition:opacity .55s ease,transform .7s var(--ease),visibility 0s linear .7s}
.screen.left{transform:translateX(-40px)}
.screen.on{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease .08s,transform .7s var(--ease),visibility 0s}

.center,.col{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--top) 22px calc(22px + env(safe-area-inset-bottom));gap:clamp(10px,2dvh,16px);text-align:center}
.col.top-col{justify-content:flex-start;padding-top:calc(var(--top) + clamp(6px,5dvh,48px))}
.col>*{width:100%;max-width:360px}
.col>.sprig{width:110px;flex:none}

.script{font-family:'Pinyon Script',cursive;font-weight:400;line-height:1.05}
h2.script{font-size:clamp(40px,7dvh,52px)}
.names{font-size:clamp(48px,8dvh,60px)}
.lead{font-size:clamp(18px,2.6dvh,21px);line-height:1.3;opacity:.85}
.note{font-size:16px;background:rgba(255,255,255,.6);border-radius:12px;padding:8px 12px;color:var(--grass-d)}
.mini-heart{width:clamp(96px,16dvh,130px);height:auto;flex:none}
.stack{display:flex;flex-direction:column;gap:12px;width:100%;max-width:300px;margin-top:6px}

/* ---------- buttons & fields ---------- */
.btn{display:flex;align-items:center;justify-content:center;height:54px;border-radius:999px;padding:0 24px;
  background:var(--grass-d);color:var(--cream);font-size:20px;font-weight:600;letter-spacing:.02em;
  box-shadow:0 10px 24px rgba(40,80,20,.22);transition:transform .2s var(--ease),opacity .3s,background .3s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:rgba(255,255,255,.75);color:var(--grass-d);box-shadow:inset 0 0 0 1.5px var(--grass-l)}
.btn:disabled{opacity:.4;box-shadow:none;cursor:default}
.btn.wide{width:100%;max-width:360px;flex:none}
.link{font-size:17px;text-decoration:underline;text-underline-offset:4px;opacity:.7;padding:8px}

.field{width:100%;height:58px;border-radius:16px;border:1.5px solid #cfe0bf;background:var(--cream);
  padding:0 18px;font-size:22px;font-weight:500;text-align:center;outline:none;transition:border-color .2s,box-shadow .2s}
.field:focus{border-color:var(--grass);box-shadow:0 0 0 4px rgba(94,148,55,.15)}
.field::placeholder{color:#9aa893;font-weight:400}
.field-wrap{position:relative}
.field.with-ic{padding-left:46px;text-align:left;font-size:19px}
.ic{width:22px;height:22px;color:var(--grass);flex:none}
.ic.in{position:absolute;left:16px;top:50%;transform:translateY(-50%)}
.msg{min-height:1.4em;font-size:17px;color:#b4506b}

/* ---------- details card ---------- */
.card{background:var(--cream);border-radius:22px;padding:clamp(12px,2dvh,18px) 16px;text-align:left;
  box-shadow:0 18px 40px rgba(50,80,40,.12);border:1px solid #e3eed8}
.row{display:flex;gap:12px;align-items:flex-start}
.row .ic{margin-top:3px}
.grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.grow b{font-size:clamp(18px,2.5dvh,20px);font-weight:700;line-height:1.2}
.grow span{font-size:clamp(16px,2.2dvh,18px);line-height:1.3}
.grow .small{font-size:clamp(15px,2.1dvh,17px);opacity:.85}
.addr{opacity:.8}
.card hr{border:0;height:1px;background:linear-gradient(90deg,transparent,#d6e6c7,transparent);margin:clamp(8px,1.5dvh,12px) 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;font-size:15px;font-weight:700;
  background:#eef6e6;color:var(--grass-d);transition:background .2s,transform .2s}
.chip:active{transform:scale(.95);background:#e1eed5}

/* ---------- lists ---------- */
.list{display:flex;flex-direction:column;gap:10px;max-height:46dvh;overflow-y:auto;padding:2px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.list::-webkit-scrollbar{display:none}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--cream);border-radius:16px;padding:14px 18px;text-align:left;
  border:1.5px solid #e3eed8;transition:border-color .2s,transform .2s}
.opt:active{transform:scale(.98);border-color:var(--grass-l)}
.opt b{font-size:20px}
.opt span{font-size:16px;opacity:.75}
.person{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--cream);border-radius:16px;
  padding:10px 10px 10px 18px;border:1.5px solid #e3eed8;text-align:left}
.person b{font-size:19px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg{display:flex;background:#eef4e8;border-radius:999px;padding:3px;flex:none}
.seg button{height:36px;min-width:58px;padding:0 12px;border-radius:999px;font-size:16px;font-weight:700;color:#6f7d68;transition:background .25s,color .25s,transform .2s}
.seg button:active{transform:scale(.94)}
.seg button.y[aria-pressed="true"]{background:var(--grass-d);color:var(--cream)}
.seg button.n[aria-pressed="true"]{background:var(--rose);color:#fff}

/* ---------- home: two vines, one heart ---------- */
.home .stage{flex:1;min-height:0;position:relative;margin-top:calc(env(safe-area-inset-top) + 8px)}
.home .stage svg{position:absolute;inset:0;width:100%;height:100%}
.home .foot{height:calc(122px + env(safe-area-inset-bottom));position:relative;flex:none}
.home:not(.play) *{animation-play-state:paused!important}

.vine{fill:none;stroke:var(--grass);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  animation:draw 3.4s cubic-bezier(.45,.05,.35,1) .3s forwards}
.vine.thin{stroke:var(--grass-l);stroke-width:1.5;animation-duration:3.8s;animation-delay:.6s}
@keyframes draw{to{stroke-dashoffset:0}}
.leaf{transform-box:fill-box;transform-origin:0% 50%;scale:0;animation:leaf .7s var(--ease) forwards}
@keyframes leaf{to{scale:1}}
.photo{opacity:0;transform-box:fill-box;transform-origin:center;scale:.9;animation:photo 1.6s var(--ease) 2.6s forwards}
@keyframes photo{to{opacity:1;scale:1}}
.bloom{transform-box:fill-box;transform-origin:center;scale:0;rotate:-60deg;animation:bloom 1.1s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes bloom{to{scale:1;rotate:0deg}}
.sway{transform-box:fill-box;transform-origin:center;animation:sway 6s ease-in-out infinite}
@keyframes sway{50%{rotate:8deg}}
.heartgrp{transform-box:fill-box;transform-origin:50% 60%;animation:beat 5s ease-in-out 5s infinite}
@keyframes beat{0%,100%{scale:1}8%{scale:1.025}16%{scale:1}24%{scale:1.02}32%{scale:1}}
.date{font-family:'Pinyon Script',cursive;font-size:40px;fill:var(--ink);paint-order:stroke;stroke:#e8f1df;stroke-width:10px;stroke-linejoin:round;
  opacity:0;animation:fade 1.4s ease 4.2s forwards}
@keyframes fade{to{opacity:1}}
.float{fill:var(--rose);opacity:0;transform-box:fill-box;transform-origin:center;animation:rise 6s ease-in infinite}
@keyframes rise{0%{opacity:0;translate:0 0;scale:.6}15%{opacity:.8}100%{opacity:0;translate:var(--dx) -120px;scale:1}}

.go{position:absolute;left:50%;top:22px;width:66px;height:66px;border-radius:50%;
  background:var(--grass-d);display:grid;place-items:center;translate:-50% 16px;opacity:0;
  animation:goin 1s var(--ease) 4.6s forwards;box-shadow:0 10px 24px rgba(40,80,20,.3)}
@keyframes goin{to{translate:-50% 0;opacity:1}}
.go svg{width:26px;height:26px;transition:transform .3s var(--ease)}
.go:active svg{transform:scale(.85)}
.go::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--grass);opacity:.35;animation:soft 2.8s ease-in-out infinite}
@keyframes soft{50%{transform:scale(1.08);opacity:.05}}

/* returning to home: skip the long intro */
.home.seen .vine,.home.seen .leaf,.home.seen .photo,.home.seen .bloom,.home.seen .date,.home.seen .go{animation-duration:.001s!important;animation-delay:0s!important}

/* entrance for content screens */
.screen.on .col>*,.screen.on .center>*{animation:up .7s var(--ease) both}
.screen.on .col>*:nth-child(2),.screen.on .center>*:nth-child(2){animation-delay:.06s}
.screen.on .col>*:nth-child(3),.screen.on .center>*:nth-child(3){animation-delay:.12s}
.screen.on .col>*:nth-child(4),.screen.on .center>*:nth-child(4){animation-delay:.18s}
.screen.on .col>*:nth-child(n+5){animation-delay:.24s}
@keyframes up{from{opacity:0;transform:translateY(14px)}}

/* ---------- confetti hearts ---------- */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-24px;width:var(--s);height:var(--s);
  background:var(--c);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  animation:confetti var(--d) cubic-bezier(.25,.6,.4,1) var(--dl) forwards;opacity:0}
@keyframes confetti{
  0%{opacity:0;transform:translate(0,0) rotate(0)}
  10%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),105dvh) rotate(var(--r))}
}

/* ---------- toast ---------- */
.toast{position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));z-index:30;
  transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--cream);
  padding:10px 18px;border-radius:999px;font-size:16px;font-weight:600;transition:opacity .3s,transform .4s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* short phones (iPhone SE etc.) */
@media (max-height:700px){
  .col>.sprig{width:90px}
  .card{padding:10px 14px}
  .btn{height:50px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001s!important}
  .float,.confetti{display:none}
}

/* ======================= puzzle ======================= */
.pz-col{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--top) - 6px) 18px calc(14px + env(safe-area-inset-bottom));text-align:center}
.pz-q{font-size:clamp(25px,3.9dvh,31px);line-height:1.08;max-width:350px;display:flex;align-items:center;justify-content:center}
.pz-board-wrap{position:relative;flex:none;margin:34px 0 22px}
.pz-board{position:absolute;inset:0;border-radius:6px}
.pz-board::before{content:"";position:absolute;inset:0;background:var(--img) center/cover;opacity:.13;filter:grayscale(1);border-radius:4px;transition:opacity 1s ease}
.pz-board::after{content:"";position:absolute;inset:0;background:var(--img) center/cover;opacity:0;border-radius:4px;transition:opacity .8s ease}
.pz-board.complete::after{opacity:1}
.pz-v4 .pz-board::before{opacity:0}
.pz-slots{position:absolute;inset:0;overflow:visible}
.pz-slot{fill:rgba(255,253,247,.35);stroke:#86bb5c;stroke-width:1.2;stroke-dasharray:4 4;transition:fill .3s,stroke .3s}
.pz-slot.glow{fill:rgba(246,195,207,.55);stroke:var(--rose);stroke-dasharray:none;stroke-width:2}
.complete .pz-slots{opacity:0;transition:opacity .4s}

.pz-frame{position:absolute;left:-18px;top:-18px;overflow:visible;pointer-events:none;z-index:3}
.pz-vine{fill:none;stroke:var(--grass);stroke-width:2.6;stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.45,.05,.35,1)}
.pz-leaf{transform-box:fill-box;transform-origin:0 50%;scale:0;transition:scale .6s var(--ease) .5s}
.pz-leaf.on{scale:1}
.pz-bloom{transform-box:fill-box;transform-origin:center;scale:0;rotate:-60deg;transition:scale .9s cubic-bezier(.3,1.5,.5,1),rotate .9s var(--ease)}
.pz-bloom.on{scale:1;rotate:0deg}

.pz-line{min-height:2.7em;max-width:330px;font-size:clamp(18px,2.6dvh,21px);line-height:1.3;font-style:italic;font-weight:500;
  display:flex;align-items:center;justify-content:center;opacity:0}
.pz-line.show{animation:lineIn .6s var(--ease) forwards}
.pz-line.final{font-family:'Pinyon Script',cursive;font-style:normal;font-weight:400;font-size:clamp(34px,5.4dvh,44px);color:var(--grass-d)}
@keyframes lineIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.pz-tray{width:100%;max-width:360px;height:112px;flex:none;transition:height .6s var(--ease)}
.pz-tray.gone{height:0}
.pz-foot{position:relative;width:100%;flex:1;min-height:76px;display:flex;align-items:center;justify-content:center}
.pz .pz-go{position:relative;left:auto;top:auto;translate:none;opacity:1;animation:none;transition:opacity .4s,transform .4s var(--ease)}
.pz .pz-go.gone{opacity:0;transform:scale(.6);pointer-events:none}
.pz-v2 .pz-go,.pz-v3 .pz-go,.pz-v4 .pz-go{display:none}
.pz-v2 .pz-foot,.pz-v3 .pz-foot{min-height:0}
.pz-done{position:absolute;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .6s,transform .6s var(--ease);min-width:220px}
.pz-done.on{opacity:1;transform:none;pointer-events:auto}

/* pieces live in a layer over the whole screen so they can fly anywhere */
.pz-layer{position:absolute;inset:0;pointer-events:none;z-index:4}
.pc{position:absolute;left:0;top:0;pointer-events:auto;touch-action:none;cursor:pointer;transform-origin:center;
  filter:drop-shadow(0 6px 8px rgba(40,70,30,.28));
  transition:transform .85s cubic-bezier(.3,1.25,.45,1),filter .4s}
.pc-img{position:absolute;inset:0;background-repeat:no-repeat}
.pc.placed{pointer-events:none;filter:drop-shadow(0 0 0 rgba(0,0,0,0))}
.pc.dragging{z-index:5;filter:drop-shadow(0 14px 18px rgba(40,70,30,.35));transition:transform .18s ease-out}
.pc.offstage{opacity:0}
.pz-v3 .pc{cursor:grab}

/* variant 4: cards with a line written on each */
.pz-cards{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:5px;
  transition:gap .7s var(--ease)}
.pz-card{position:relative;perspective:700px;border-radius:9px;transition:border-radius .7s}
.pz-card-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.pz-card.flip .pz-card-in{transform:rotateY(180deg)}
.pz-card-front,.pz-card-back{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:inherit}
.pz-card-front{display:flex;align-items:center;justify-content:center;padding:6px;border-radius:9px;
  background:var(--cream);border:1.5px solid #e3eed8;box-shadow:0 4px 10px rgba(50,80,40,.10);
  font-size:clamp(11.5px,1.65dvh,13.5px);line-height:1.18;font-weight:600;color:#3d4a36}
.pz-card-front::after{content:"";position:absolute;right:6px;bottom:6px;width:9px;height:9px;opacity:.7;
  background:var(--rose);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.2 0 3.6 1.3 4.3 2.5h2c.7-1.2 2.1-2.5 4.3-2.5 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.2 0 3.6 1.3 4.3 2.5h2c.7-1.2 2.1-2.5 4.3-2.5 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat}
.pz-card-back{transform:rotateY(180deg);background-repeat:no-repeat;border-radius:9px}
.pz-v4 .complete .pz-cards{gap:0}
.pz-v4 .complete .pz-card,.pz-v4 .complete .pz-card-back{border-radius:0}
.pz-v4 .pz-board::after{z-index:1}
.pz-sticker{position:absolute;z-index:2;opacity:0;pointer-events:none;transform-origin:50% 90%;
  filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 10px 12px rgba(0,0,0,.3));
  transition:opacity .3s, transform .9s cubic-bezier(.3,1.5,.5,1)}
.pz-board.stickers::after{filter:brightness(.82) saturate(.8) blur(1.5px);transition:filter .8s}
.pz-board.stickers .pz-sticker{opacity:1}
.pz-board.stickers .pz-sticker.s0{transform:translate(-6%,-3%) rotate(-5deg) scale(1.12)}
.pz-board.stickers .pz-sticker.s1{transform:translate(6%,-3%) rotate(5deg) scale(1.12)}

/* "you're invited" */
.invited-fam{font-size:clamp(24px,3.6dvh,30px);font-weight:700}
.invited-when{font-size:18px;letter-spacing:.06em;opacity:.75}

/* type-ahead suggestions under the last-name field */
.suggest{display:flex;flex-direction:column;gap:8px;max-height:34dvh;overflow-y:auto;padding:2px;scrollbar-width:none;
  animation:up .35s var(--ease) both}
.suggest::-webkit-scrollbar{display:none}
.sug{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--cream);border:1.5px solid #e3eed8;
  border-radius:16px;padding:12px 16px;box-shadow:0 6px 16px rgba(50,80,40,.08);transition:transform .15s,border-color .2s,background .2s}
.sug:active{transform:scale(.98);border-color:var(--grass-l);background:#f4f9ee}
.sug svg{width:20px;height:20px;flex:none}
.sug b{font-size:20px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug span{font-size:15px;opacity:.6;flex:none}