*{box-sizing:border-box;margin:0;padding:0}

html,body{
  position:fixed;inset:0;overflow:hidden;
  background:#07030f;color:#fff3ea;
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}

#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:pointer}

/* ---------- presente ---------- */
#gift{
  position:fixed;left:0;top:0;opacity:0;pointer-events:none;
  will-change:transform,opacity;transform-origin:50% 50%;
  filter:drop-shadow(0 0 22px rgba(255,120,170,.45));
}
#gift svg{display:block;width:100%;height:100%;overflow:visible}
#g-lid{transform-box:fill-box;transform-origin:50% 70%}

#flash{
  position:fixed;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,#fffaf0 0%,#ffe3c4 28%,#ff9fc0 62%,#b23a7a 100%);
  transition:opacity 1.5s ease-out;
}
#flash.on{opacity:1;transition:opacity .5s ease-in}

/* ---------- textos ---------- */
#ui{position:fixed;inset:0;pointer-events:none}
#ui::before,#ui::after{
  content:'';position:absolute;left:0;right:0;opacity:0;transition:opacity 1.6s ease;
}
#ui::before{top:0;height:34vh;background:linear-gradient(#07030f 0%,rgba(7,3,15,.72) 45%,rgba(7,3,15,0) 100%)}
#ui::after{bottom:0;height:30vh;background:linear-gradient(rgba(7,3,15,0) 0%,rgba(7,3,15,.75) 60%,#07030f 100%)}
body.deep #ui::before,body.deep #ui::after{opacity:1}
#ui>*{z-index:1}

.say{transition:opacity .8s ease}
.say.out{opacity:0}
.say .ln{display:block}
.say .w{
  display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.35em);
  animation:rv 1s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(var(--i)*70ms);
}
@keyframes rv{to{opacity:1;filter:blur(0);transform:none}}

#intro{
  position:absolute;left:0;right:0;top:36%;
  padding:0 9vw;text-align:center;
  font-style:italic;font-weight:300;line-height:1.3;
  font-size:clamp(22px,5.6vw,38px);
  text-shadow:0 0 28px rgba(255,150,190,.45);
}
#intro .ln:first-child{font-size:1.9em;font-weight:500;line-height:1.1;margin-bottom:.25em}

#counter{
  position:absolute;left:0;right:0;top:max(5.5vh,calc(env(safe-area-inset-top) + 14px));
  display:flex;flex-direction:column;align-items:center;
  opacity:0;transition:opacity .9s ease;
}
#counter.on{opacity:1}
#count{
  font-weight:300;line-height:.95;
  font-size:clamp(58px,min(17vw,13vh),118px);
  font-variant-numeric:lining-nums tabular-nums;
  text-shadow:0 0 34px rgba(255,140,180,.6);
  display:inline-block;
}
#counter small{
  font-family:'Jost',system-ui,sans-serif;font-weight:300;
  font-size:clamp(10px,2.7vw,13px);letter-spacing:.55em;text-indent:.55em;
  text-transform:uppercase;opacity:.75;margin-top:.5em;
}
#caption{
  margin-top:1.1em;padding:0 8vw;text-align:center;
  font-style:italic;font-size:clamp(20px,5.2vw,30px);min-height:1.3em;
  text-shadow:0 0 22px rgba(0,0,0,.8),0 0 30px rgba(255,150,190,.5);
}

#title{
  position:absolute;left:0;right:0;top:max(4.5vh,calc(env(safe-area-inset-top) + 12px));
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
#t-a,#t-c{
  font-family:'Jost',system-ui,sans-serif;font-weight:300;text-transform:uppercase;
  font-size:clamp(10px,2.8vw,14px);letter-spacing:.46em;text-indent:.46em;opacity:.85;
}
#t-b{
  font-style:italic;font-weight:500;line-height:1.02;
  font-size:clamp(60px,min(19vw,13vh),132px);
  margin:.04em 0 .1em;
  filter:drop-shadow(0 0 26px rgba(255,150,190,.5));
}
#t-b .w{
  padding:.08em .14em;margin:-.08em -.14em;
  background:linear-gradient(180deg,#fffaf0 12%,#ffd9a6 52%,#ff9dbd 92%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation-delay:calc(var(--i)*130ms);animation-duration:1.4s;
}

#msg{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:max(6.5vh,calc(env(safe-area-inset-bottom) + 34px));
  width:min(92vw,24em);text-align:center;
  font-style:italic;font-weight:300;line-height:1.28;
  font-size:clamp(19px,5vw,28px);
  text-shadow:0 0 20px rgba(0,0,0,.9),0 0 26px rgba(255,150,190,.35);
}
#msg .ln.sig{font-size:.8em;opacity:.8;margin-top:.5em}

#hint{
  position:absolute;left:0;right:0;bottom:max(2.4vh,calc(env(safe-area-inset-bottom) + 8px));
  text-align:center;
  font-family:'Jost',system-ui,sans-serif;font-weight:300;text-transform:uppercase;
  font-size:clamp(10px,2.7vw,12px);letter-spacing:.4em;text-indent:.4em;
  opacity:0;transition:opacity .9s ease;
  text-shadow:0 0 12px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.7);
}
#hint.mid{bottom:13vh}
#hint.on{opacity:.9;animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* ---------- botões ---------- */
button{
  position:fixed;top:max(14px,env(safe-area-inset-top));
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#fff3ea;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .8s ease,background .2s;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
button.on{opacity:.6;pointer-events:auto}
button.on:hover{opacity:1;background:rgba(255,255,255,.12)}
#mute{right:14px}
#replay{left:14px}
#mute .off{display:none}
#mute.muted .on{display:none}
#mute.muted .off{display:inline}

/* ---------- telas largas: texto à esquerda, buquê à direita ---------- */
body.wide #title{left:5vw;right:auto;width:42vw;top:24vh}
body.wide #msg{left:26vw;bottom:auto;top:60vh;width:min(38vw,24em)}