/* Scene-specific styling: intro envelope, map, final, reveal. */

/* ---------------- INTRO / ENVELOPE ---------------- */
.intro-wrap{ display:flex; flex-direction:column; align-items:center; gap:22px; width:100%; }
.intro-hint{ font-size:1.5rem; color:var(--ink-soft); transform:rotate(-2deg); transition:opacity .4s; }
.envelope{
  position:relative; width:min(340px,84vw); aspect-ratio:1.5/1; cursor:pointer;
  filter:drop-shadow(var(--shadow-card)); transition:transform .3s;
}
.envelope:hover{ transform:translateY(-4px) rotate(-1deg); }
.env-body{
  position:absolute; inset:0; border-radius:10px;
  background:linear-gradient(160deg,#eacf99,#ddb877);
  border:1px solid rgba(120,90,50,.4);
  box-shadow:inset 0 -20px 40px rgba(120,88,44,.25);
}
.env-body::before,.env-body::after{ content:""; position:absolute; inset:0; }
.env-body::before{ /* bottom fold */
  clip-path:polygon(0 100%, 50% 42%, 100% 100%);
  background:linear-gradient(#e7c88c,#d3a862); border-radius:0 0 10px 10px; }
.env-flap{
  position:absolute; top:0; left:0; right:0; height:64%;
  clip-path:polygon(0 0, 100% 0, 50% 92%);
  background:linear-gradient(#efd9a6,#e3c485);
  transform-origin:top center; transition:transform .6s ease, opacity .4s;
  box-shadow:0 6px 10px -6px rgba(80,55,20,.4); z-index:3;
}
.envelope.open .env-flap{ transform:rotateX(160deg); opacity:.9; z-index:0; }
.env-seal{ position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); width:74px; height:74px;
  font-size:1.6rem; z-index:4; transition:opacity .3s; }
.envelope.open .env-seal{ opacity:0; }
.env-to{ position:absolute; bottom:16%; left:0; right:0; text-align:center; font-size:1.8rem;
  color:var(--ink); z-index:2; }
.intro-letter{ max-width:600px; }

/* ---------------- MAP ---------------- */
.map-page{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; max-width:620px; }
.map-head h2{ margin-top:2px; }
.map-board{
  position:relative; width:min(560px,92vw); aspect-ratio:3/3.5;
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), transparent 20%),
    var(--paper-2);
  border-radius:16px; box-shadow:var(--shadow-card);
  border:1px solid var(--line);
}
.map-board::before{ content:""; position:absolute; inset:7px; border:1px dashed var(--line); border-radius:11px; pointer-events:none; }
.map-path{ position:absolute; inset:0; width:100%; height:100%; }
.map-doodle{ position:absolute; font-size:1.4rem; color:var(--sage-deep); }
.map-stop{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; width:86px;
}
.map-stop.locked{ cursor:default; }
.stop-dot{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:1.5rem;
  background:#fff8ec; border:2.5px solid var(--ink-soft); box-shadow:var(--shadow-soft); transition:.25s;
}
.stop-label{ font-size:1.25rem; color:var(--ink-soft); line-height:1; }
.map-stop.locked .stop-dot{ background:#e5d6b8; border-color:var(--line); color:var(--ink-soft); opacity:.55; filter:grayscale(.5); }
.map-stop.locked .stop-label{ opacity:.5; }
.map-stop.open .stop-dot{ background:linear-gradient(160deg,#e7a94e,#cf8329); border-color:var(--amber-deep); color:#fff; }
.map-stop.done .stop-dot{ background:linear-gradient(160deg,#8aa06f,#617a49); border-color:var(--sage-deep); color:#fff; }
.map-stop.open:hover .stop-dot{ transform:scale(1.08) rotate(-3deg); }
.stop-letter{ position:absolute; top:-8px; right:6px; width:26px; height:26px; border-radius:7px;
  background:var(--seal); color:#fff2e6; display:grid; place-items:center; font-size:1rem;
  box-shadow:var(--shadow-soft); transform:rotate(6deg); }
.stop-fragment{ position:absolute; top:-8px; right:7px; width:27px; height:27px; display:grid; place-items:center;
  color:#dca32c; background:#f5dfb1; border:1px solid #bd8b50; font-size:.78rem; box-shadow:var(--shadow-soft);
  clip-path:polygon(5% 8%,30% 1%,52% 8%,72% 2%,97% 11%,92% 36%,100% 58%,91% 82%,97% 98%,70% 92%,48% 100%,27% 93%,3% 99%,8% 71%,1% 49%,8% 27%);
  transform:rotate(7deg); }
.map-stop.pulse .stop-dot{ animation:pulse 1.6s ease-out infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(207,131,41,.5), var(--shadow-soft); }
  70%{ box-shadow:0 0 0 16px rgba(207,131,41,0), var(--shadow-soft); }
  100%{ box-shadow:0 0 0 0 rgba(207,131,41,0), var(--shadow-soft); } }
.map-foot{ min-height:2.4em; }

/* ---------------- STAGE OVERLAY ---------------- */
.stage-screen,.fin-screen,.reveal-screen{ }
.stage-card{ max-width:660px; }

/* full-bleed themed stage pages */
.screen.fullbleed{ padding:0; }
.stage-page{ position:absolute; inset:0; overflow:hidden; }
.stage-close.on-scene{ z-index:60; background:rgba(255,248,236,.92); }
.stage-head{ text-align:center; margin-bottom:10px; }
.stage-body{ margin-top:8px; }
.stage-close{
  position:absolute; top:10px; right:14px; z-index:5; width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--line); background:#fff8ec; cursor:pointer; font-size:1.3rem; color:var(--ink-soft);
  line-height:1; box-shadow:var(--shadow-soft);
}
.stage-close:hover{ color:var(--ink); }

/* award overlay */
.award{ position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; background:radial-gradient(circle, rgba(247,236,214,.92), rgba(247,236,214,.75)); }
.award-fragment{ position:relative; width:112px; height:94px; display:grid; place-items:center; color:#d69c23; font-size:2.2rem;
  background:linear-gradient(145deg,#f7e7c7,#e8c992); border:2px solid #c99d61; box-shadow:0 18px 30px rgba(70,42,20,.3);
  clip-path:polygon(2% 8%,22% 1%,43% 7%,63% 2%,82% 8%,98% 4%,94% 28%,100% 51%,93% 75%,98% 96%,76% 92%,54% 100%,32% 94%,4% 99%,8% 72%,1% 48%,7% 26%);
  transform:rotate(-4deg); }
.award-fragment::before{ content:""; position:absolute; inset:10px; border:1px dashed rgba(118,78,38,.3); }
.award-fragment span{ position:relative; z-index:2; text-shadow:0 2px #fff5d6; }.award-fragment i{ position:absolute; width:28px; border-top:1px solid rgba(100,60,30,.2); transform:rotate(22deg); }
.award-fragment i:first-of-type{ left:10px; top:25px; }.award-fragment i:last-of-type{ right:8px; bottom:20px; transform:rotate(-17deg); }
.award-txt{ font-size:1.8rem; color:var(--rose-deep); margin:8px 0 0; }

/* ---------------- GUIDE PLACEMENTS ---------------- */
.intro-guide{ position:absolute; top:-58px; right:18px; z-index:3; }
.intro-guide .guide2-bubble{ display:none; }
.stage-guide{ justify-content:flex-start; margin:6px 0 14px; }
.reveal-guide{ justify-content:center; margin:-56px auto 6px; }
.reveal-guide .guide2-bubble{ display:none; }

/* ---------------- REVEAL ---------------- */
.reveal-card{ max-width:560px; }
.reveal-q{ line-height:1.1; }
.reveal-btns{ display:flex; gap:16px; justify-content:center; align-items:center; margin-top:22px;
  min-height:70px; position:relative; }
.yes-btn{ font-size:1.15rem; padding:.8em 2em; transition:transform .2s; }
.no-btn{ transition:transform .25s ease; }
.big-yes{ font-size:3rem; color:var(--rose-deep); }
@media(max-width:480px){
  .reveal-guide{ margin-top:-44px; }
}

/* ---------------- SIX-FRAGMENT INVITATION ---------------- */
.invitation-final{ position:absolute; inset:0; overflow:hidden; color:#fff0d2; background:#0b0b1d; }
.inv-night{ position:absolute; inset:0 0 31%; background:
  radial-gradient(circle at 50% 84%,rgba(118,70,126,.42),transparent 44%),
  linear-gradient(180deg,#08091a,#17132e 62%,#332143); }
.inv-night::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:42%; background:#090a16;
  clip-path:polygon(0 65%,7% 65%,7% 20%,13% 20%,13% 76%,20% 76%,20% 43%,27% 43%,27% 68%,34% 68%,34% 5%,39% 68%,48% 68%,48% 30%,55% 30%,55% 78%,64% 78%,64% 48%,71% 48%,71% 66%,78% 66%,78% 18%,84% 18%,84% 70%,91% 70%,91% 40%,100% 40%,100% 100%,0 100%); }
.inv-night i{ position:absolute; width:3px; height:3px; border-radius:50%; background:#fff0ba; box-shadow:0 0 7px #fff; animation:invStar 2.5s ease-in-out infinite; }
.inv-night i:nth-child(1){ left:9%; top:17%; }.inv-night i:nth-child(2){ left:24%; top:36%; animation-delay:-1s; }.inv-night i:nth-child(3){ left:66%; top:20%; animation-delay:-.4s; }.inv-night i:nth-child(4){ left:84%; top:42%; animation-delay:-1.8s; }.inv-night i:nth-child(5){ left:54%; top:9%; animation-delay:-.9s; }
@keyframes invStar{ 50%{ opacity:.25; transform:scale(.5); } }
.inv-thames{ position:absolute; left:0; right:0; bottom:0; height:34%; overflow:hidden; background:linear-gradient(#252143,#11142f 45%,#090c20); }
.inv-thames::before{ content:""; position:absolute; inset:0; opacity:.28; background:repeating-linear-gradient(176deg,transparent 0 18px,rgba(195,175,221,.2) 19px 21px); }
.inv-thames span{ position:absolute; height:2px; background:linear-gradient(90deg,transparent,rgba(240,205,145,.45),transparent); animation:invWater 6s ease-in-out infinite; }
.inv-thames span:nth-child(1){ left:5%; top:22%; width:43%; }.inv-thames span:nth-child(2){ right:7%; top:52%; width:51%; animation-delay:-2s; }.inv-thames span:nth-child(3){ left:25%; top:78%; width:58%; animation-delay:-4s; }
@keyframes invWater{ 50%{ transform:translateX(35px) scaleX(.72); opacity:.35; } }
.inv-final-head{ position:absolute; z-index:4; top:3vh; left:50%; transform:translateX(-50%); width:min(92vw,670px); text-align:center; text-shadow:0 3px 14px #03030b; transition:opacity .6s; }
.inv-final-head p{ margin:0; color:#edbc68; font-size:1.3rem; }.inv-final-head h2{ color:#fff1d2; font-size:clamp(1.65rem,4vw,2.7rem); }
.inv-puzzle{ position:absolute; z-index:7; left:50%; top:52%; transform:translate(-50%,-50%); width:min(740px,82vw); aspect-ratio:5/3;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); filter:drop-shadow(0 22px 28px rgba(0,0,0,.55)); isolation:isolate; }
.inv-puzzle::before{ content:""; position:absolute; inset:-8px; z-index:-2; border:1px dashed rgba(255,224,172,.18); opacity:0; transition:opacity .7s 2.4s; }
.invitation-alive .inv-puzzle::before{ opacity:1; }
.inv-piece{ position:relative; min-width:0; min-height:0; perspective:800px; opacity:0;
  transform:translate(var(--dx),var(--dy)) rotate(var(--turn)) scale(.72); transition:transform .9s cubic-bezier(.18,.82,.24,1.15),opacity .45s; }
.inv-piece.landed{ opacity:1; transform:none; }.inv-piece-inner{ position:absolute; inset:-1px; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.3,.7,.25,1); }
.inv-piece.revealed .inv-piece-inner{ transform:rotateY(180deg); }
.inv-piece-back,.inv-piece-front{ position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; }
.inv-piece-back{ display:flex; flex-direction:column; align-items:center; justify-content:center; color:#d59c26; background:linear-gradient(135deg,#f6e5c2,#dfbd82); border:1px solid rgba(119,75,36,.3); }
.inv-piece-back::before{ content:""; position:absolute; inset:9px; border:1px dashed rgba(115,72,36,.25); }.inv-piece-back span{ font-size:clamp(1.5rem,4vw,2.7rem); text-shadow:0 2px #fff3ce; }.inv-piece-back small{ color:#7a5635; font-size:clamp(.62rem,1.4vw,.9rem); }
.inv-piece-front{ transform:rotateY(180deg); background:#241a27; }.inv-piece-art{ position:absolute; display:block; max-width:none; }
.inv-piece:nth-child(1){ clip-path:polygon(0 0,96% 0,100% 12%,96% 26%,100% 42%,97% 60%,100% 78%,96% 100%,0 100%,3% 82%,0 62%,3% 43%,0 20%); }
.inv-piece:nth-child(2){ clip-path:polygon(3% 0,98% 0,95% 17%,100% 35%,96% 54%,100% 73%,97% 100%,2% 100%,5% 82%,1% 63%,5% 44%,1% 24%); }
.inv-piece:nth-child(3){ clip-path:polygon(3% 0,100% 0,97% 21%,100% 43%,96% 64%,100% 84%,100% 100%,2% 100%,5% 78%,1% 59%,5% 38%,1% 18%); }
.inv-piece:nth-child(4){ clip-path:polygon(0 2%,3% 18%,0 38%,4% 57%,0 77%,3% 100%,97% 100%,100% 82%,96% 62%,100% 42%,96% 23%,100% 1%); }
.inv-piece:nth-child(5){ clip-path:polygon(3% 1%,97% 2%,100% 19%,96% 39%,100% 58%,96% 78%,100% 100%,2% 100%,5% 81%,1% 61%,5% 41%,1% 20%); }
.inv-piece:nth-child(6){ clip-path:polygon(3% 1%,100% 0,97% 20%,100% 39%,96% 59%,100% 79%,97% 100%,2% 100%,5% 82%,1% 62%,5% 43%,1% 22%); }
.invite-waiting-character{ position:absolute; z-index:12; left:16%; bottom:4%; width:14%; opacity:0; transform:translateY(14px); transition:.8s 2.7s; pointer-events:none; }
.invite-waiting-character .him2-fig{ width:100%; }.invitation-alive .invite-waiting-character{ opacity:1; transform:none; }
.invite-folded-note{ position:absolute; z-index:15; left:73%; top:55%; width:15%; aspect-ratio:1.38/1; padding:0; border:1px solid #bd9566; border-radius:4px; opacity:0; transform:translateY(-8px) rotate(7deg) scale(.6); cursor:pointer;
  color:#6d4630; background:linear-gradient(155deg,#fff2d2,#e4c391); box-shadow:0 8px 14px rgba(35,18,11,.38); transition:.6s cubic-bezier(.2,1.5,.4,1); }
.invite-folded-note::before,.invite-folded-note::after{ content:""; position:absolute; inset:0; clip-path:polygon(0 0,50% 58%,100% 0); background:rgba(192,143,83,.16); }.invite-folded-note::after{ clip-path:polygon(0 100%,50% 45%,100% 100%); }
.invite-folded-note span,.invite-folded-note i{ position:relative; z-index:2; display:block; }.invite-folded-note span{ font-size:clamp(.65rem,1.6vw,1.05rem); }.invite-folded-note i{ color:#d7a12f; font-style:normal; }
.invite-folded-note.ready{ opacity:1; transform:rotate(4deg) scale(1); animation:noteTempt 1.8s ease-in-out infinite .7s; }.invite-folded-note:hover{ animation:none; transform:translateY(-4px) rotate(0) scale(1.08); }
@keyframes noteTempt{ 50%{ transform:translateY(-6px) rotate(-2deg); box-shadow:0 10px 20px rgba(250,195,90,.32); } }
.invitation-alive .inv-flame{ transform-origin:307px 151px; animation:invFlame .7s ease-in-out infinite alternate; filter:drop-shadow(0 0 8px #ffb34d); }
@keyframes invFlame{ to{ transform:scale(.8,1.14) rotate(3deg); } }
.inv-final-status{ position:absolute; z-index:8; left:50%; bottom:3.5vh; transform:translateX(-50%); width:90%; margin:0; text-align:center; color:#efd5aa; font-size:clamp(1.05rem,2.3vw,1.5rem); text-shadow:0 2px 9px #03030b; }

/* folded note question */
.inv-question-overlay{ position:absolute; z-index:35; inset:0; min-width:0; display:grid; place-items:center; padding:20px; opacity:0; background:rgba(5,5,16,.22); backdrop-filter:blur(0); transition:opacity .55s,background .7s,backdrop-filter .7s; }
.inv-question-overlay.open{ opacity:1; background:rgba(5,5,16,.67); backdrop-filter:blur(7px); }.inv-open-note{ position:relative; width:min(640px,92vw); min-height:330px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(28px,6vw,62px); text-align:center;
  color:#4d3428; background:linear-gradient(160deg,#fff3d9,#ecd5a9); border:2px solid #c9a36d; box-shadow:0 28px 55px rgba(0,0,0,.48); transform:rotateX(78deg) scale(.75); transform-origin:bottom; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.inv-question-overlay.open .inv-open-note{ transform:rotateX(0) scale(1); }.inv-open-note::before{ content:""; position:absolute; inset:12px; border:1px dashed rgba(103,67,39,.25); pointer-events:none; }.note-crease{ position:absolute; inset:50% 0 auto; border-top:1px solid rgba(107,68,39,.12); }
.note-for{ margin:0 0 7px; color:#a56b45; font-size:1.35rem; }.inv-open-note .reveal-q{ max-width:530px; margin:0; font-size:clamp(1.8rem,5vw,3rem); line-height:1.12; }.note-heart{ position:absolute; right:24px; bottom:18px; color:#d4a02d; font-size:1.3rem; transform:rotate(8deg); }
.question-open .invite-folded-note{ opacity:0; pointer-events:none; }

/* ---------------- BEST ANSWER / KISS ENDING ---------------- */
.kiss-ending{ position:absolute; inset:0; overflow:hidden; color:#fff0d0; background:#211522; }
.kiss-night{ position:absolute; inset:0 0 38%; background:radial-gradient(circle at 50% 72%,rgba(185,102,92,.26),transparent 48%),linear-gradient(#111127,#39243b); }
.kiss-night::before{ content:""; position:absolute; left:8%; top:9%; width:32%; height:58%; border:11px solid #54352e; background:linear-gradient(#101b34,#2e2949); box-shadow:0 14px 28px rgba(0,0,0,.4); }
.kiss-night::after{ content:""; position:absolute; left:24%; top:9%; height:58%; border-left:7px solid #54352e; }
.kiss-night i{ position:absolute; width:3px; height:3px; border-radius:50%; background:#fff0b0; box-shadow:0 0 6px #fff; }.kiss-night i:nth-child(1){ left:15%; top:18%; }.kiss-night i:nth-child(2){ left:31%; top:30%; }.kiss-night i:nth-child(3){ right:17%; top:18%; }
.kiss-floor{ position:absolute; left:0; right:0; bottom:0; height:40%; background:repeating-linear-gradient(93deg,#34201d 0 82px,#462c25 83px 88px); box-shadow:inset 0 16px 25px rgba(0,0,0,.45); }
.kiss-table{ position:absolute; z-index:3; left:50%; bottom:6%; width:min(640px,78vw); height:90px; transform:translateX(-50%); border-radius:50%; background:#8d5537; box-shadow:0 14px 22px rgba(0,0,0,.38); }
.kiss-table::after{ content:""; position:absolute; left:18%; right:18%; top:34px; height:100px; border-left:18px solid #603824; border-right:18px solid #603824; }
.kiss-table span{ position:absolute; top:-55px; width:16px; height:60px; border-radius:4px; background:#f5dfb1; box-shadow:0 0 20px rgba(246,165,67,.25); }.kiss-table span::before{ content:""; position:absolute; left:4px; top:-21px; width:9px; height:22px; border-radius:50%; background:#ffd15e; box-shadow:0 0 18px 6px rgba(255,168,65,.58); animation:candleFlicker 1.1s ease-in-out infinite alternate; }.kiss-table .candle-one{ left:35%; }.kiss-table .candle-two{ right:35%; height:43px; top:-38px; }
.kiss-friends{ position:absolute; z-index:5; left:50%; bottom:15%; width:min(760px,94vw); height:210px; opacity:0; transform:translateX(-50%) translateY(14px); transition:opacity .6s .2s,transform .8s; pointer-events:none; }.walking .kiss-friends{ opacity:.92; transform:translateX(-50%); }.kiss-rosa,.kiss-federico{ position:absolute; bottom:0; transition:transform 1s,opacity 1s; }.kiss-rosa{ left:10%; }.kiss-federico{ right:10%; }.kiss-rosa .friend2-fig{ width:78px; }.kiss-federico .friend2-fig{ width:86px; }.friends-step-back .kiss-friends{ opacity:.52; }.friends-step-back .kiss-rosa{ transform:translate(-44px,10px) scale(.84); }.friends-step-back .kiss-federico{ transform:translate(44px,10px) scale(.84); }
.kiss-couple{ position:absolute; z-index:8; left:50%; bottom:8%; width:min(560px,100vw); height:300px; transform:translateX(-50%); pointer-events:none; }
.kiss-him,.kiss-leonie{ position:absolute; bottom:0; transition:left 1.8s cubic-bezier(.25,.75,.25,1),transform .65s; }.kiss-him{ left:39%; }.kiss-leonie{ left:115%; }
.kiss-him .him2-fig{ width:135px; }.kiss-leonie .guide2-bubble{ display:none; }.kiss-leonie .guide2-fig{ width:127px; }.kiss-leonie .gv-top,.kiss-leonie .gv-arm-l rect,.kiss-leonie .gv-arm-r rect{ fill:#8a627d; }
.kiss-ending.walking .kiss-leonie{ left:51%; }.kiss-ending.walking:not(.kissed) .kiss-leonie .gv-leg-l{ animation:gvStep .3s infinite alternate; }.kiss-ending.walking:not(.kissed) .kiss-leonie .gv-leg-r{ animation:gvStep .3s infinite alternate-reverse; }
.kiss-ending.kissed .kiss-him{ transform:translateX(6px) rotate(4deg); }.kiss-ending.kissed .kiss-leonie{ left:45%; transform:translateX(-3px) rotate(-7deg); }.kiss-ending.kissed .kiss-leonie .guide2-fig{ transform:scaleX(-1); }
.kiss-heart{ position:absolute; z-index:15; left:50%; top:38%; color:#ffd75c; font-size:4rem; opacity:0; transform:translate(-50%,20px) scale(.2); text-shadow:0 0 24px #ffc758; }
.kissed .kiss-heart{ animation:kissHeart .9s cubic-bezier(.2,1.6,.4,1) forwards; }@keyframes kissHeart{ 55%{ opacity:1; transform:translate(-50%,-10px) scale(1.35) rotate(8deg); }100%{ opacity:1; transform:translate(-50%,-22px) scale(1); } }
.kiss-answer{ position:absolute; z-index:16; left:0; right:0; top:9%; margin:0; text-align:center; color:#fff1c6; font-size:clamp(3rem,9vw,6rem); opacity:0; transform:translateY(16px) scale(.8); text-shadow:0 0 26px rgba(238,172,80,.65); transition:.75s cubic-bezier(.2,1.5,.4,1); }
.answer-shown .kiss-answer{ opacity:1; transform:none; }

@media(max-width:700px){
  .inv-final-head{ top:2.5vh; }.inv-final-head h2{ font-size:1.55rem; }.inv-puzzle{ width:94vw; top:50%; }.inv-final-status{ bottom:8vh; }
  .invite-waiting-character{ width:16%; left:15%; }.invite-folded-note{ width:18%; left:71%; }.inv-piece-back small{ display:none; }
  .inv-open-note{ min-height:300px; }.note-for{ font-size:1.15rem; }
  .kiss-couple{ height:245px; bottom:10%; }.kiss-him .him2-fig{ width:92px; }.kiss-leonie .guide2-fig{ width:88px; }.kiss-him{ left:35%; }.kiss-ending.walking .kiss-leonie{ left:52%; }.kiss-ending.kissed .kiss-leonie{ left:43%; }
  .kiss-friends{ bottom:18%; width:100vw; height:155px; }.kiss-rosa{ left:8%; }.kiss-federico{ right:8%; }.kiss-rosa .friend2-fig{ width:58px; }.kiss-federico .friend2-fig{ width:64px; }.friends-step-back .kiss-rosa{ transform:translate(8px,8px) scale(.82); }.friends-step-back .kiss-federico{ transform:translate(-8px,8px) scale(.82); }
  .kiss-table{ width:92vw; }.kiss-heart{ top:43%; }
}
@media(max-width:480px){
  .inv-question-overlay{ padding:12px; }
  .inv-open-note{ width:calc(100vw - 24px); max-width:calc(100vw - 24px); min-width:0; min-height:290px; padding:28px 18px; }
  .inv-open-note>*{ min-width:0; max-width:100%; }
  .inv-open-note .reveal-q{ font-size:clamp(1.65rem,8.2vw,2.05rem); overflow-wrap:anywhere; }
  .note-for{ font-size:1rem; }
  .note-heart{ right:18px; bottom:14px; }
}
@media(max-height:650px){
  .inv-final-head p{ display:none; }.inv-puzzle{ width:min(680px,76vw); top:50%; }.inv-final-status{ bottom:2vh; }
  .kiss-couple{ height:220px; bottom:3%; }.kiss-him .him2-fig{ width:88px; }.kiss-leonie .guide2-fig{ width:84px; }.kiss-answer{ top:4%; }
}