:root {
  --bg: #180b20;
  --bg-alt: #2f102b;
  --cream: #fff4e9;
  --gold: #f5c983;
  --gold-light: #ffebbd;
  --muted: #e5c7d3;
  --accent: #a73865;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--cream);
  color-scheme: dark;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html { height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100%; overflow: hidden; }
button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 5px; }
.app {
  isolation: isolate;
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: radial-gradient(ellipse 90% 54% at 50% 48%, #481935 0%, #2a112b 57%, #180b20 100%);
}
.ambient, .starfield, .confetti { position: absolute; inset: 0; pointer-events: none; }
.ambient { filter: blur(52px); border-radius: 50%; opacity: .4; }
.ambient--one { inset: -14% auto auto -58%; width: 110%; height: 65%; background: #873354; }
.ambient--two { inset: auto -50% -30% auto; width: 115%; height: 65%; background: #98471b; opacity: .20; }
.starfield {
  opacity: .65;
  background-image:
    radial-gradient(circle at 11% 20%, #f8deab 1px, transparent 2px),
    radial-gradient(circle at 84% 13%, #f8deab 1px, transparent 2px),
    radial-gradient(circle at 65% 36%, #f8deab 1px, transparent 2px),
    radial-gradient(circle at 15% 75%, #f8deab 1px, transparent 2px),
    radial-gradient(circle at 86% 81%, #f8deab 1px, transparent 2px),
    radial-gradient(circle at 45% 90%, #f8deab 1px, transparent 2px);
  animation: starglow 5s ease-in-out infinite alternate;
}
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(32px + var(--safe-top)) 24px calc(55px + var(--safe-bottom));
  text-align: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(15px) scale(.985);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .48s ease, transform .48s ease, visibility .48s;
}
.scene.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); z-index: 2; }
.scene__inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 480px; flex-shrink: 0; }
.eyebrow {
  margin: 0 0 21px;
  font: 700 clamp(10px, 2.4vw, 12px)/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: .21em;
  color: var(--gold);
}
.headline {
  margin: 0;
  font-weight: 400;
  font-size: clamp(40px, 10vw, 61px);
  line-height: 1.09;
  letter-spacing: -.038em;
  text-shadow: 0 5px 26px #190d18aa;
}
.headline em { font-weight: normal; color: var(--gold-light); }
.description {
  margin: 20px auto 14px;
  max-width: 335px;
  font: 400 clamp(14px, 3.7vw, 17px)/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--muted);
}
.illustration-button {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  min-height: 240px;
  width: min(100%, 310px);
  border: 0;
  color: var(--gold-light);
  background: transparent;
  margin: 14px 0 16px;
  transition: transform .2s;
  touch-action: manipulation;
}
.illustration-button:active { transform: scale(.97); }
.tap-label {
  font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: .09em;
  opacity: .77;
  animation: hint 2.3s ease-in-out infinite;
}
.primary-button {
  min-height: 54px;
  padding: 15px 25px;
  min-width: min(100%, 250px);
  border-radius: 99px;
  border: 1px solid rgba(255, 237, 200, .38);
  background: linear-gradient(110deg, #f8d89e, #edba71);
  box-shadow: 0 8px 34px #0004, inset 0 2px 0 #ffffff50;
  color: #451e2c;
  font: 700 15px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: transform .2s, box-shadow .2s;
  touch-action: manipulation;
}
.primary-button span { padding-left: 7px; }
.primary-button:active { transform: scale(.97); box-shadow: 0 3px 20px #0004; }
.primary-button:disabled, .illustration-button:disabled { cursor: default; }
.progress {
  position: absolute;
  bottom: calc(22px + var(--safe-bottom));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 9px;
}
.progress span { width: 6px; height: 6px; border-radius: 20px; background: #dfbecb50; transition: .3s; }
.progress span.is-current { width: 25px; background: var(--gold); }

/* Envelope */
.envelope { position: relative; display: block; width: 235px; height: 152px; margin-top: 22px; perspective: 800px; filter: drop-shadow(0 16px 30px #15061588); }
.envelope__back { position: absolute; inset: 0; border-radius: 7px; background: #ebba90; border: 2px solid #f5d1a4; }
.envelope__paper { position: absolute; z-index: 1; width: 82%; height: 80%; top: 14px; left: 9%; background: #fff2df; border-radius: 4px; color: #b84062; font-size: 57px; line-height: 118px; transition: transform .8s .18s; }
.envelope__front { position: absolute; z-index: 3; inset: 0; clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); background: linear-gradient(148deg, #ffdab3, #dd987e); border-radius: 7px; }
.envelope__flap { position: absolute; z-index: 4; top: 0; left: 0; width: 100%; height: 87px; background: #f5cba1; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: center top; transition: transform .56s ease-in-out; }
.envelope__seal { z-index: 5; position: absolute; top: 68px; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: #9a3651; font-size: 15px; color: #ffdeb8; box-shadow: 0 2px 5px #0003; transition: opacity .3s; }
.scene--opening .envelope__flap { transform: rotateX(180deg); z-index: 0; }
.scene--opening .envelope__paper { transform: translateY(-46px); }
.scene--opening .envelope__seal { opacity: 0; }

/* 50 anos */
.fifty { position: relative; font-size: clamp(128px, 36vw, 183px); line-height: .88; letter-spacing: -.085em; padding-right: .12em; font-weight: bold; margin: 3px 0 26px; color: transparent; background: linear-gradient(145deg, #fff5d5 5%, #edb862 45%, #f7d99f 62%, #ac663a 96%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 13px 28px #19091c88); }
.fifty__sparkle { position: absolute; right: -2px; top: 3px; font-size: 34px; color: var(--gold-light); -webkit-text-fill-color: var(--gold-light); animation: sparkle 3s infinite; }
.heart-divider { font-size: 39px; color: var(--gold); margin: 12px 0 22px; animation: pulse 2.2s infinite; }

/* Gift */
.gift-button { min-height: 260px; margin-top: 9px; }
.gift { position: relative; display: block; width: 216px; height: 193px; filter: drop-shadow(0 17px 25px #130819aa); }
.gift__glow { position: absolute; inset: -28px -42px; border-radius: 50%; background: radial-gradient(circle, #f6c67345, transparent 64%); animation: pulse 2.5s infinite; }
.gift__box { position: absolute; left: 20px; right: 20px; top: 72px; bottom: 0; border-radius: 4px 4px 12px 12px; background: linear-gradient(125deg, #ffe0a6, #efb673 55%, #c37860); box-shadow: inset -18px -8px 30px #97483c25; }
.gift__ribbon-vertical { position: absolute; top: 72px; bottom: 0; left: 95px; width: 30px; background: linear-gradient(90deg, #942848, #db5272, #92233c); z-index: 2; }
.gift__ribbon-horizontal { position: absolute; left: 20px; right: 20px; top: 107px; height: 22px; background: linear-gradient(180deg, #df607a, #a22d4e); z-index: 3; }
.gift__lid { position: absolute; left: 10px; top: 58px; width: 196px; height: 40px; border-radius: 6px; background: linear-gradient(125deg, #ffe9bd, #dda16b); box-shadow: 0 5px 6px #4c1a2a44; z-index: 4; transition: transform .65s cubic-bezier(.17,.67,.42,1.18); }
.gift__lid::after { content: ''; position: absolute; left: 85px; top: 0; height: 100%; width: 30px; background: #bb3656; }
.gift__bow { position: absolute; z-index: 5; width: 72px; height: 51px; border: 12px solid #cb4869; border-radius: 72% 23% 68% 33%; top: 16px; transition: transform .65s cubic-bezier(.17,.67,.42,1.18); }
.gift__bow--left { left: 36px; transform: rotate(25deg); }
.gift__bow--right { right: 36px; transform: rotate(60deg) scaleX(-1); }
.gift__knot { position: absolute; z-index: 6; top: 49px; left: 97px; width: 24px; height: 24px; border-radius: 50%; background: #a52c51; transition: transform .65s cubic-bezier(.17,.67,.42,1.18); }
.scene--opening .gift__lid { transform: translateY(-67px) rotate(-9deg); }
.scene--opening .gift__bow--left { transform: translateY(-67px) rotate(16deg); }
.scene--opening .gift__bow--right { transform: translateY(-67px) rotate(53deg) scaleX(-1); }
.scene--opening .gift__knot { transform: translateY(-67px); }

/* Card reveal */
.scene--final { background: radial-gradient(ellipse at 50% 31%, #5f233c66, transparent 55%); }
.scene__inner--final { padding: 8px 0 0; }
.scene--final .eyebrow { margin-bottom: 10px; }
.final-heart { font-size: 26px; color: #f3c47d; text-shadow: 0 0 30px #f6a85f99; margin-bottom: 12px; animation: pulse 2s infinite; }
.headline--final { font-size: clamp(40px, 10.4vw, 58px); }
.description--final { font-size: 14px; line-height: 1.5; max-width: 310px; margin: 13px 0 20px; }
.card-preview { position: relative; display: block; width: 100%; max-width: 445px; padding: 5px; border: 1px solid #f5d6a69e; border-radius: 8px; background: linear-gradient(145deg, #fff5d0, #ad704b); box-shadow: 0 13px 45px #0008, 0 0 40px #ffb77f20; animation: card-arrival .75s .2s backwards; touch-action: manipulation; }
.card-preview img { display: block; width: 100%; height: auto; border-radius: 3px; }
.card-preview__hint { position: absolute; bottom: 15px; right: 15px; border: 1px solid #ffffff60; background: #321c2edc; color: white; padding: 9px 11px; border-radius: 20px; font: 600 11px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; backdrop-filter: blur(8px); }
.final-note { font-size: 23px; font-style: italic; color: var(--gold-light); margin: 22px 0 16px; }
.text-button { border: 0; background: transparent; color: #f2d5d5; text-decoration: underline; text-underline-offset: 5px; padding: 12px; font: 500 13px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.confetti { z-index: 5; }
.confetti-piece { position: absolute; top: -30px; width: 8px; height: 13px; border-radius: 1px; animation: confetti-fall var(--duration) var(--delay) ease-in forwards; opacity: 0; }

/* Card fullscreen dialog */
.card-dialog { position: fixed; inset: 0; padding: 65px 10px 22px; border: 0; max-width: none; max-height: none; width: 100%; height: 100%; background: #1d0d1df2; color: white; overflow: auto; text-align: center; place-content: center; }
.card-dialog[open] { display: grid; }
.card-dialog::backdrop { background: #1c0719ed; }
.card-dialog img { max-width: min(96vw, 950px); max-height: 70dvh; height: auto; width: auto; object-fit: contain; margin: auto; box-shadow: 0 0 35px #0009; border: 2px solid #f5c983; border-radius: 5px; }
.card-dialog p { color: #f4d7d9; font: 13px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin-top: 22px; }
.card-dialog__close { position: fixed; right: 17px; top: calc(15px + var(--safe-top)); display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ffffff70; border-radius: 50%; background: #422136; color: white; font: 21px sans-serif; }

@keyframes pulse { 50% { transform: scale(1.08); opacity: .75; } }
@keyframes sparkle { 50% { transform: rotate(25deg) scale(.8); opacity: .5; } }
@keyframes hint { 50% { opacity: .43; } }
@keyframes starglow { 50% { opacity: .34; } }
@keyframes card-arrival { from { opacity: 0; transform: translateY(35px) scale(.91) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes confetti-fall { 0% { opacity: 1; transform: translate3d(0,0,0) rotate(0deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--drift), 110svh,0) rotate(var(--spin)); } }

@media (max-height: 730px) {
  .scene { padding-top: calc(15px + var(--safe-top)); padding-bottom: calc(43px + var(--safe-bottom)); }
  .eyebrow { margin-bottom: 10px; }
  .headline { font-size: clamp(35px, 9vw, 50px); }
  .description { margin: 13px auto 7px; font-size: 14px; }
  .illustration-button { min-height: 201px; margin: 7px 0 5px; gap: 13px; }
  .envelope { transform: scale(.83); margin: 0 0 -13px; }
  .gift-button { min-height: 218px; }
  .gift { transform: scale(.83); margin-bottom: -20px; }
  .fifty { font-size: 112px; margin: 0 0 16px; }
  .heart-divider { margin: 4px 0 12px; }
  .scene--final .eyebrow { margin-bottom: 3px; }
  .final-heart { margin-bottom: 5px; }
  .description--final { margin: 8px 0 12px; }
  .final-note { margin: 11px 0 5px; }
}
@media (min-width: 700px) {
  .scene { padding-inline: 40px; }
  .scene__inner--final { max-width: 525px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}