:root {
  --bg: #121212;
  --surface: #1e1e1e;
  --surface-alt: #262626;
  --text: #f7f7f7;
  --muted: #a8adb5;
  --green: #1ed760;
  --blue: #77baff;

  /* Uma unica familia de destaque, em tres intensidades. A pagina tinha
     quatro paletas sem relacao: terracota no botao de play, rosa claro nos
     coracoes, rosa quente no mini player e vinho na carta. Tudo passa a
     derivar daqui, entao trocar a marca e mexer nestas tres linhas. */
  --accent-soft: #f2a3b8;
  --accent: #e0577a;
  --accent-strong: #a8294a;
  --accent-shadow: rgba(200, 60, 100, 0.35);
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  --z-modal: 40;
}

/* Temas de destaque
   Cada tema redefine apenas a familia de acento; fundo, superficies e o creme
   do papel da carta sao iguais nos tres, porque sao eles que dao o acabamento
   que diferencia a pagina. Os tres valores foram calibrados para igualar ou
   superar o contraste do rosa que ja estava no ar:
     --accent-soft e sempre texto sobre superficie escura (>= 8:1 nos tres)
     --accent e sempre fundo, com branco por cima (rosa 3.6, dourado 4.0, violeta 4.7)
*/
[data-lt-theme="dorado"] {
  --accent-soft: #f3d7a8;
  --accent: #b0731c;
  --accent-strong: #74490d;
  --accent-shadow: rgba(190, 140, 50, 0.35);
}

[data-lt-theme="violeta"] {
  --accent-soft: #c9a8e8;
  --accent: #8b5cc7;
  --accent-strong: #4e2a7a;
  --accent-shadow: rgba(130, 90, 200, 0.35);
}


* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  /* A cor solida antes do gradiente e o que fecha a faixa branca no rodape do
     celular: gradiente e background-image, e fora da caixa dele (safe area do
     aparelho, overscroll) nao havia cor nenhuma, entao o navegador pintava
     branco. */
  background-color: #121212;
  background-image: radial-gradient(circle at 20% 0%, #1a1a1a, #121212 60%);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
}

body {
  min-height: 100vh;
  /* dvh acompanha a barra do navegador no celular, que aparece e some ao
     rolar. Com 100vh sozinho a pagina fica mais alta que a area visivel. */
  min-height: 100dvh;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) rgba(5, 7, 12, 0.92);
}

body.is-loading-lock {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  touch-action: none;
}

body.is-story-open {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  touch-action: none;
}

/* Modern page scrollbar */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 7px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: rgba(5, 7, 12, 0.92);
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: #f2f0f8;
  box-shadow: none;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: #fbfaff;
}

.romance-hearts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.floating-heart {
  position: absolute;
  color: #ff2c46;
  font-family: "Times New Roman", Georgia, serif;
  filter: drop-shadow(0 0 9px rgba(255, 23, 61, 0.5));
  animation-name: heartBurstFall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

@keyframes heartBurstFall {
  0% {
    transform: translate3d(0, 0, 0) scale(0.72) rotate(0deg);
    opacity: 0;
  }
  14% {
    opacity: 0.98;
  }
  100% {
    transform: translate3d(var(--drift-x), var(--drift-y), 0) rotate(var(--rotate));
    opacity: 0;
  }
}

/* CTA "Crear el mío": fica no canto superior direito, o unico canto livre da
   pagina -- embaixo, no centro, mora o mini-player.
   A cor vem de --accent, e nao de um rosa fixo: a pagina tem tres temas
   (rosa, dourado, violeta) e o botao acompanha o que estiver ativo, em vez de
   destoar da demo que a pessoa esta olhando. */
.demo-create-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--accent), var(--accent-strong));
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px -8px var(--accent-shadow);
  transition: transform 0.18s ease;
}
.demo-create-btn:hover { transform: translateY(-1px) scale(1.03); }
.demo-create-btn svg { width: 15px; height: 15px; fill: currentColor; }
.demo-create-btn.is-hidden { display: none; }

/* Pulso espacado: a onda leva ~1,2s e depois o botao fica quieto por uns 6s.
   A demo e para ser assistida -- com musica e fotos -- e um pulso constante no
   canto competiria com ela o tempo todo. Espacado, ele so lembra que a saida
   existe. Mesmo ritmo do botao de WhatsApp da landing. */
.demo-create-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--accent);
  pointer-events: none;
  animation: demo-create-pulse 7.5s ease-out 2s infinite;
  opacity: 0;
}
@keyframes demo-create-pulse {
  0%        { transform: scale(1);    opacity: 0.75; }
  16%, 100% { transform: scale(1.35, 1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-create-btn::after { animation: none; }
  .demo-create-btn:hover { transform: none; }
}

/* Cancion do YouTube: o iframe existe e toca, mas fica fora de vista para
   que a interface visivel continue sendo o player do LoveTrace.
   Nao usa display:none nem visibility:hidden — os navegadores bloqueiam a
   reproducao nesses casos. */
.song-embed-offstage {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  left: -9999px;
}

/* ---------------------------------------------------------------------------
   Compartilhar
   Mesma linguagem dos outros cards da pagina: fundo escuro, raio 18px e
   titulo em Inter. A versao anterior usava a paleta rosa clara da referencia
   e destoava de tudo ao redor.
--------------------------------------------------------------------------- */
/* O unico bloco da pagina que fala com quem RECEBEU o presente, entao ganha
   um tratamento proprio: brilho rosado muito baixo, arabescos de canto do
   envelope e titulo na letra manuscrita usada nos momentos romanticos. */
.share-card {
  position: relative;
  padding: 32px 18px 34px;
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(224, 87, 122, 0.16) 0%, transparent 62%),
    linear-gradient(160deg, rgba(56, 53, 58, 0.94), rgba(45, 42, 46, 0.96));
  border: 1px solid rgba(224, 87, 122, 0.16);
  text-align: center;
  overflow: hidden;
}
.share-card.is-hidden { display: none; }

/* Mesmos arabescos do envelope: amarram este bloco ao mundo da carta sem
   precisar de nenhum enfeite novo. */
.share-corners {
  position: absolute;
  inset: 0;
  color: rgba(242, 163, 184, 0.22);
  pointer-events: none;
}
.share-corners .envelope-corner { width: 40px; height: 40px; }
.share-corners .envelope-corner--tl { top: 10px; left: 10px; }
.share-corners .envelope-corner--tr { top: 10px; right: 10px; transform: rotate(90deg); }
.share-corners .envelope-corner--br { bottom: 10px; right: 10px; transform: rotate(180deg); }
.share-corners .envelope-corner--bl { bottom: 10px; left: 10px; transform: rotate(270deg); }

.share-title {
  position: relative;
  margin: 0;
  color: #fdf3f6;
  font-family: "Playfair Display", "Georgia", serif;
  font-size: clamp(1.34rem, 4.5vw, 1.62rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.18;
}
.share-sub {
  position: relative;
  margin: 4px 0 24px;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: rgba(242, 163, 184, 0.72);
}

.share-actions {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 18px;
}

/* Texto acessivel sem ocupar espaco: os botoes sao so icone, mas leitores de
   tela e o rotulo de "link copiado" continuam funcionando. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Quadrados so com icone, no estilo da referencia: os tres cabem numa linha
   mesmo em tela estreita. */
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(232, 238, 246, 0.9);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 180ms ease, transform 140ms ease, border-color 180ms ease, color 180ms ease;
}
.share-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}
.share-btn:active { transform: scale(0.97); }
.share-btn:focus-visible { outline: 2px solid rgba(255, 111, 147, 0.8); outline-offset: 2px; }
.share-btn svg { width: 21px; height: 21px; flex: none; }
.share-btn--whatsapp { color: #4ad07d; }
.share-btn--whatsapp svg { fill: currentColor; }
.share-btn--whatsapp:hover { color: #6ee69a; border-color: rgba(74, 208, 125, 0.45); }

/* Um icone de cada vez: o de confirmacao substitui o de copiar. */
.share-icon-done { display: none; }
.share-btn.is-done .share-icon-done { display: block; }
.share-btn.is-done .share-icon-copy { display: none; }
.share-btn.is-done { color: #4ad07d; border-color: rgba(74, 208, 125, 0.45); }

/* O QR mantem fundo claro: e o unico jeito de a camera conseguir ler. */
.share-qr {
  margin: 16px auto 0;
  width: min(200px, 64%);
  padding: 12px;
  border-radius: 14px;
  background: #ffffff;
}
.share-qr.is-hidden { display: none; }
.share-qr img { width: 100%; display: block; }
.share-qr p { margin: 9px 0 0; font-size: 0.76rem; color: #6c6a70; }

@media (prefers-reduced-motion: reduce) {
  .share-btn { transition-duration: 1ms; }
}

/* ---------------------------------------------------------------------------
   Mini player
   A musica continua tocando enquanto a pessoa desce a pagina, mas o
   reprodutor fica la em cima. Esta barra assume o controle quando ele sai de
   vista — so aparece se houver musica tocando, para nao virar mais um
   elemento fixo ocupando a tela.
--------------------------------------------------------------------------- */
.mini-player {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 90;
  width: min(100%, 448px);
  transform: translate(-50%, 110%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
  background: rgba(20, 20, 22, 0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 380ms cubic-bezier(0.22, 0.9, 0.28, 1);
}
.mini-player.is-hidden { display: none; }
.mini-player.is-visible { transform: translate(-50%, 0); }

.mini-player-btn {
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.mini-player-btn:hover { background: rgba(255, 255, 255, 0.18); }
.mini-player-btn svg { width: 17px; height: 17px; fill: currentColor; }
.mini-icon-play { display: none; }
.mini-player.is-paused .mini-icon-play { display: block; }
.mini-player.is-paused .mini-icon-pause { display: none; }

/* Barras de som: param quando a musica pausa, entao a barra nunca "mente"
   sobre o que esta acontecendo. */
.mini-wave {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 18px;
}
.mini-wave i {
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  height: 40%;
  animation: miniWave 900ms ease-in-out infinite;
}
.mini-wave i:nth-child(2) { animation-delay: 150ms; }
.mini-wave i:nth-child(3) { animation-delay: 320ms; }
.mini-wave i:nth-child(4) { animation-delay: 90ms; }
.mini-player.is-paused .mini-wave i { animation-play-state: paused; height: 30%; }

@keyframes miniWave {
  0%, 100% { height: 28%; }
  50%      { height: 100%; }
}

.mini-player-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.mini-player-meta strong {
  font-size: 0.86rem;
  color: var(--accent-soft);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-player-state {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-player-jump {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--accent-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.mini-player-jump svg { width: 18px; height: 18px; fill: currentColor; }
.mini-player-jump:hover { color: var(--accent-soft); }

@media (prefers-reduced-motion: reduce) {
  .mini-player { transition-duration: 1ms; }
  .mini-wave i { animation: none; height: 55%; }
}

/* Empty photo slots inside the /crear preview: show where each photo lands. */
.is-lt-placeholder {
  position: relative;
  background-image: none !important;
  background-color: #1c1f27 !important;
  border: 1px dashed rgba(255, 255, 255, 0.22);
}

.is-lt-placeholder::after {
  /* Camera glyph, then a newline, then the label set on the element.
     The space after \1F4F7 terminates the hex escape so it can't be
     misread as a 6-digit codepoint. */
  content: "\1F4F7 \A" attr(data-lt-placeholder);
  white-space: pre-line;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.62);
  pointer-events: none;
}

.album-slide.is-lt-placeholder::after { font-size: 0.82rem; }
.timeline-photo.is-lt-placeholder::after { font-size: 0.62rem; }

/* ---------------------------------------------------------------------------
   Envelope de abertura
   E a primeira e unica tela: aparece antes de qualquer requisicao e serve ao
   mesmo tempo como carregamento e como o momento de abrir o presente.
   A animacao usa apenas transform e opacity, que o navegador compoe sem
   recalcular layout.
--------------------------------------------------------------------------- */
.envelope-gate {
  position: fixed;
  inset: 0;
  z-index: 118;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 34px;
  padding: 24px;
  background: radial-gradient(120% 90% at 50% 32%, #241a1d 0%, #0d0b0c 62%, #050505 100%);
  /* Opaco desde o primeiro quadro: se o fundo entrasse com fade, a pagina
     apareceria por tras durante a transicao. Quem anima e o envelope dentro. */
  opacity: 1;
}
.envelope-gate.is-hidden { display: none; }
.envelope-gate.is-gone {
  opacity: 0;
  pointer-events: none;
  /* Sai depois da pagina ja ter comecado a aparecer, para as duas se
     cruzarem em vez de piscar preto entre uma e outra. */
  transition: opacity 440ms ease;
}

/* Palco com perspectiva: e o que faz a aba abrir como papel, nao como imagem. */
.envelope-stage {
  perspective: 1100px;
  perspective-origin: 50% 30%;
}

.envelope-card {
  position: relative;
  /* 4:3 e nao 3:2. Com o formato achatado anterior nao sobrava altura entre a
     ponta da aba e a borda de baixo, e o nome vivia espremido. */
  width: min(400px, calc(100vw - 40px));
  aspect-ratio: 4 / 3;
  transform: translateY(26px) scale(0.94);
  opacity: 0;
  transition: transform 720ms cubic-bezier(0.18, 0.72, 0.24, 1), opacity 520ms ease;
}
.envelope-gate.is-arrived .envelope-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
/* Abertura por aproximacao: o envelope cresce ate ultrapassar a tela e a
   pagina aparece atraves dele. A curva e ease-in de proposito — comeca
   devagar e acelera, que e o que da a sensacao de ser puxado para dentro,
   em vez de o cartao simplesmente inchar. */
.envelope-gate.is-opening .envelope-card {
  transform: scale(4.8);
  opacity: 0;
  transition:
    transform 860ms cubic-bezier(0.55, 0, 0.85, 0.4),
    opacity 460ms ease 420ms;
}

/* Corpo do envelope: fica na frente da carta, para ela parecer sair de dentro. */
.envelope-body {
  position: absolute;
  inset: 0;
  /* overflow: hidden recorta a aba e os ornamentos no proprio raio do corpo,
     que e o jeito certo de nao sobrar fresta nas quinas — antes eu tinha
     resolvido isso deixando tudo com canto reto. */
  border-radius: 22px;
  overflow: hidden;
  /* A perspectiva do palco nao alcanca a aba, que e neta dele. Declarada aqui
     ela vale para os filhos diretos do corpo — sem isso a aba "achatava" em
     vez de dobrar. */
  perspective: 900px;
  border: 2px solid rgba(198, 106, 132, 0.22);
  /* Degrade vertical: em 135deg ele criava um brilho diagonal que parecia um
     vinco solto e competia com a aba. */
  background: linear-gradient(180deg, #fffaf6 0%, #f6e9df 100%);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  z-index: 2;
}
/* Aba de baixo como forma de verdade, com clip-path.
   Desenhar os vincos com gradiente nao funciona aqui: cada gradiente traca
   uma diagonal de canto a canto da propria caixa, entao as duas se cruzavam
   em X em vez de formar o V da aba. */
/* Sem aba de baixo, de proposito. Duas abas competindo pelo mesmo espaco era
   o que nao deixava o nome caber em lugar nenhum; a face de baixo fica limpa
   e o carater de carta vem dos ornamentos de canto. */

/* Ornamentos de canto: e o que da cara de papel de carta sem cruzar o texto. */
.envelope-corners { position: absolute; inset: 0; z-index: 3; color: rgba(198, 106, 132, 0.3); }
.envelope-corner {
  position: absolute;
  /* Grandes o bastante para lerem como arabesco de papel de carta; a 26px
     sumiam e o envelope ficava com cara de retangulo liso. */
  width: 58px;
  height: 58px;
}
.envelope-corner svg { width: 100%; height: 100%; display: block; }
.envelope-corner--tl { top: 8px; left: 8px; }
.envelope-corner--tr { top: 8px; right: 8px; transform: rotate(90deg); }
.envelope-corner--br { bottom: 8px; right: 8px; transform: rotate(180deg); }
.envelope-corner--bl { bottom: 8px; left: 8px; transform: rotate(270deg); }

/* A carta que sobe de dentro do envelope ao abrir. */
.envelope-letter {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 8%;
  bottom: 12%;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf8 0%, #f6efe3 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  display: grid;
  place-items: center;
  transform: translateY(6%);
  opacity: 0;
  z-index: 1;
}
/* A carta nao sobe mais de dentro: no zoom quem entrega o conteudo e a
   propria pagina surgindo atras do envelope. */
.envelope-letter-heart {
  color: #c0394f;
  font-size: 2rem;
  opacity: 0.5;
}

@keyframes letterRise {
  0% { transform: translateY(6%); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(-62%); opacity: 1; }
}

/* Aba superior: dobra para tras a partir do topo. */
.envelope-gate .envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* A linguinha que se abre. Precisa de tom proprio e de sombra para ler como
     uma folha dobrada por cima da outra.
     O vinco NAO pode sair de box-shadow: inset — o inset e desenhado no
     retangulo e o clip-path recorta justamente essa borda fora, que foi o
     que deixou a aba invisivel. drop-shadow segue a forma ja recortada. */
  height: 50%;
  /* Tom quente e claro, so o suficiente para ler como folha dobrada por cima
     do corpo — o vinco vem da sombra, nao de escurecer a aba. */
  background: linear-gradient(180deg, #fffdfb 0%, #f0ddd0 100%);
  filter: drop-shadow(0 1.5px 1px rgba(168, 118, 132, 0.26));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 760ms cubic-bezier(0.5, 0, 0.2, 1);
  backface-visibility: hidden;
  z-index: 4;
}

/* Sem elemento de contorno: a aba tem filter, e filter cria contexto de
   empilhamento — um filho com z-index: -1 nao vai para tras do fundo do pai,
   ele cobre a aba inteira. Era isso que pintava o V de rosa escuro.
   O vinco vem do drop-shadow da propria aba. */
/* A aba nao dobra mais: no zoom o envelope inteiro se aproxima e a dobra
   competiria com esse movimento. O corpo mantem overflow: hidden, entao as
   quinas seguem limpas o tempo todo. */

.envelope-seal {
  position: absolute;
  /* Assenta na ponta da aba, como um lacre de cera de verdade. */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--accent), var(--accent-strong) 72%);
  color: #ffe9ec;
  display: grid;
  place-items: center;
  font-size: 20px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.35);
  z-index: 5;
  transition: transform 320ms ease, opacity 260ms ease;
}
.envelope-gate.is-ready .envelope-seal span {
  display: block;
  animation: sealBreath 2.6s ease-in-out infinite;
}
/* No zoom o selo e o nome crescem junto com o envelope: se sumissem, o
   cartao chegaria vazio na tela. Quem controla o fade e o card inteiro. */

@keyframes sealBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}

/* Para / De, escritos a mao na frente do envelope. */
/* Nome escrito no envelope, centrado na parte de baixo. Centralizado e nessa
   altura ele fica bem dentro da aba, longe das diagonais — o problema antes
   era estar encostado no canto inferior esquerdo, onde o vinco passa. */
.envelope-lines {
  position: absolute;
  /* Face limpa abaixo da aba e do lacre: largura total, sem nenhuma diagonal
     para competir. */
  left: 8%;
  right: 8%;
  top: 63%;
  z-index: 4;
  font-family: "Caveat", cursive;
  color: #4d3a33;
  line-height: 1.16;
  text-align: center;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 460ms ease 260ms, transform 460ms ease 260ms;
}
.envelope-gate.is-ready .envelope-lines {
  opacity: 1;
  transform: translateY(0);
}
.envelope-line {
  margin: 0;
  font-size: 1.85rem;
  /* Nome longo encurta com reticencias em vez de estourar o envelope. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.envelope-line.is-hidden { display: none; }
.envelope-from { font-size: 1.12rem; opacity: 0.6; margin-top: 1px; }
.envelope-label {
  font-family: "Inter", sans-serif;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.45;
  margin-right: 8px;
  vertical-align: 0.32em;
}

/* Botao: enquanto carrega mostra o texto de espera e nao responde ao toque. */
.envelope-open-btn {
  position: relative;
  border: 0;
  border-radius: 999px;
  padding: 14px 32px;
  background: #f4ece0;
  color: #17120f;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 460ms ease 180ms, transform 460ms ease 180ms, background 200ms ease;
}
.envelope-gate.is-arrived .envelope-open-btn { opacity: 1; transform: translateY(0); }
.envelope-gate.is-opening .envelope-open-btn {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.envelope-btn-label { display: none; }
.envelope-btn-loading { display: inline-block; opacity: 0.72; font-weight: 500; }
.envelope-gate.is-ready .envelope-btn-label { display: inline-block; }
.envelope-gate.is-ready .envelope-btn-loading { display: none; }

/* Enquanto nao esta pronto o botao nao e clicavel nem parece clicavel. */
.envelope-gate:not(.is-ready) .envelope-open-btn {
  cursor: progress;
  background: rgba(244, 236, 224, 0.14);
  color: #f4ece0;
}
.envelope-gate.is-ready .envelope-open-btn {
  animation: envelopePulse 2.4s ease-in-out infinite;
}
.envelope-gate.is-ready .envelope-open-btn:hover { background: #fffaf2; }

@keyframes envelopePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
  .envelope-gate,
  .envelope-card,
  .envelope-flap,
  .envelope-seal,
  .envelope-lines,
  .envelope-open-btn { transition-duration: 1ms; }
  .envelope-gate.is-ready .envelope-open-btn,
  .envelope-gate.is-ready .envelope-seal span { animation: none; }
  .envelope-gate.is-opening .envelope-card { transition-duration: 1ms; }
}

.module-dashboard.is-locked {
  filter: blur(16px) saturate(0.75) brightness(0.85);
  pointer-events: none;
  user-select: none;
  transition: filter 900ms ease;
}

.lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  background: rgba(5, 5, 5, 0.35);
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

.lock-overlay.is-hidden {
  display: none;
}

.lock-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.lock-overlay-card {
  max-width: 320px;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
}

.lock-cta {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--green);
  color: #0a0a0a;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}

.lock-cta:active {
  opacity: 0.85;
}

.lock-fallback {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--muted);
}

.lock-icon {
  width: 36px;
  height: 36px;
  color: var(--muted);
  margin-bottom: 14px;
}

.lock-overlay-card h2 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.lock-overlay-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}


.app-shell {
  width: min(100%, 448px);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  /* Fica escondida ate a carta ser aberta. Sem isto a pagina chega a pintar
     uma vez antes de o envelope cobrir, e o presente aparece adiantado. */
  opacity: 0;
}
body.is-revealed .app-shell {
  opacity: 1;
  transition: opacity 460ms ease;
}

.module {
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition: 420ms ease;
}

.module.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.module-entry {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.entry-content {
  text-align: center;
}

.entry-content h1 {
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1.06;
  margin: 10px 0;
  font-weight: 900;
}

.entry-content h1 span {
  color: var(--green);
}

.eyebrow {
  color: #7e8792;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.73rem;
}

.subtitle {
  color: var(--muted);
}

.module-dashboard {
  padding: 14px 14px 20px;
  display: grid;
  gap: 16px;
}

/* O espaco extra so existe quando a barra de musica esta no ar. Reservar
   120px fixos deixava um vazio no fim da pagina em toda visita que nao
   chegasse a tocar a musica. */
body.has-mini-player .module-dashboard {
  padding-bottom: 104px;
}

.lovetrace-footer {
  margin: 6px 14px 26px;
  padding: 18px 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.lovetrace-footer-love {
  margin: 0;
  color: rgba(224, 233, 245, 0.82);
  font-size: 1.02rem;
  font-weight: 500;
}

.lovetrace-footer-love span {
  color: #ff375f;
  margin: 0 4px;
  filter: drop-shadow(0 0 7px rgba(255, 55, 95, 0.42));
}

.lovetrace-footer-copy {
  margin: 8px 0 0;
  color: rgba(182, 197, 214, 0.68);
  font-size: 0.86rem;
}

.card,
.player-card {
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 14px;
  box-shadow: var(--shadow);
}

.glass {
  background: linear-gradient(145deg, #1e1e1e, #171717);
}

.hero-stack {
  position: relative;
  display: grid;
  /* Mesmo respiro dos demais blocos: com gap 0 o player encostava no
     contador logo abaixo. */
  gap: 16px;
  margin-bottom: 18px;
}

.hero-stack > .player-card {
  margin-top: -14px;
  margin-left: -14px;
  margin-right: -14px;
  border-radius: 0;
  padding: 18px 16px 34px;
}

.player-photo-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 8px -16px 0;
  padding: 0 16px 22px;
  aspect-ratio: 3 / 3.75;
  overflow: hidden;
}

.album-carousel {
  position: absolute;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: hidden;
  z-index: 0;
}

.player-photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 32%, rgba(13, 10, 9, 0.5) 58%, rgba(11, 8, 7, 0.88) 78%, #0b0807 100%);
  pointer-events: none;
  z-index: 1;
}

.player-photo-frame > *:not(.album-carousel) {
  position: relative;
  z-index: 2;
}

.album-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 300ms ease;
}

.album-slide.is-visible {
  opacity: 1;
}

/* Bolinhas do carrossel: ficam no fluxo, logo acima do nome da musica, entao
   nunca cobrem a foto nem o texto queimado nela. */
.album-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin: 0 0 12px;
  height: 5px;
  opacity: 0.72;
}
.album-dots.is-hidden { display: none; }

.album-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  transition: width 260ms ease, background 260ms ease;
}
.album-dot.is-active {
  width: 12px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.66);
}

@media (prefers-reduced-motion: reduce) {
  .album-dot { transition-duration: 1ms; }
}

.song-meta h2 {
  margin: 12px 0 4px;
  font-size: 1.32rem;
  font-weight: 800;
}

.song-subline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.song-subline h2 {
  margin: 0;
  color: var(--muted);
}

.verified {
  font-size: 0.75rem;
  background: rgba(30, 215, 96, 0.2);
  color: #8effba;
  padding: 5px 10px;
  border-radius: 999px;
}

.progress-wrap {
  margin-top: 28px;
}

.is-hidden { display: none !important; }

.song-embed {
  margin: 10px 0;
  border-radius: 14px;
  overflow: hidden;
}
.song-embed iframe {
  display: block;
  width: 100%;
  border: none;
}

.progress-track {
  position: relative;
  --lt-progress: 0;
  background: #2e2e2e;
  height: 5px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
}

.progress-value {
  display: block;
  width: 0;
  height: 100%;
  background: #fff;
  border-radius: 999px;
}

.progress-track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--lt-progress) * 100%);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: #fbf1e6;
  box-shadow: 0 0 0 2px rgba(9, 7, 6, 0.4);
}

.progress-times {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.72rem;
}

.player-controls {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.player-controls button {
  border: none;
  background: transparent;
  color: #efefef;
  font-size: 1.1rem;
}

.player-controls .play-btn {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 700;
}

.cover-placeholder {
  height: 130px;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, #5f5f5f 0%, #1e1e1e 70%);
}

.couple-card {
  position: relative;
  z-index: 3;
  width: calc(100% - 18px);
  margin: -24px auto 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(44, 43, 49, 0.98) 0%, rgba(30, 29, 34, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.couple-card .couple-section-title {
  margin: 0;
  color: rgba(248, 251, 255, 0.96);
  font-family: "MonteCarlo", "Great Vibes", "Caveat", cursive;
  font-size: clamp(2.25rem, 7.1vw, 2.95rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.68);
}

.couple-cover {
  position: relative;
  height: 300px;
  background: linear-gradient(145deg, #8b623e 0%, #463733 46%, #27262f 100%);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 -58px 72px rgba(0, 0, 0, 0.44);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 16px 16px 0;
}

.couple-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 10, 16, 0.56) 0%, rgba(5, 10, 16, 0.42) 42%, rgba(5, 10, 16, 0.6) 100%);
  pointer-events: none;
}
.couple-cover.is-title-hidden::before {
  background: linear-gradient(180deg, rgba(5, 10, 16, 0.2) 0%, rgba(5, 10, 16, 0.12) 42%, rgba(5, 10, 16, 0.22) 100%);
}

.card h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 800;
}

.card-head {
  margin: 0;
  padding: 14px 16px 10px;
  background: rgba(48, 47, 54, 0.96);
}

.card-head p {
  margin: 0;
  color: var(--muted);
}

.couple-card .card-head p {
  color: #b6cce2;
  text-align: center;
  font-family: "MonteCarlo", "Great Vibes", "Caveat", cursive;
  font-size: clamp(1.6rem, 5.6vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0.01em;
}

.couple-card #coupleName {
  font-family: "MonteCarlo", "Great Vibes", "Caveat", cursive;
  font-size: clamp(1.88rem, 7.1vw, 2.45rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.counter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px 18px;
}

.counter-item {
  border-radius: 14px;
  background: rgba(39, 38, 43, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 10px;
  text-align: center;
}

.counter-item strong {
  display: block;
  font-size: 1.15rem;
}

.counter-item span {
  color: var(--muted);
  font-size: 0.72rem;
}

.counter-item-filler strong {
  color: var(--accent-soft);
  filter: drop-shadow(0 0 12px rgba(226, 120, 155, 0.4));
  font-size: 1.9rem;
  line-height: 1;
  display: block;
  margin: 0;
  animation: counterHeartPulse 1.9s ease-in-out infinite;
}

.counter-item-filler span {
  display: none;
}

.counter-item.counter-item-filler {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes counterHeartPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

.highlights-card {
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(56, 53, 58, 0.94), rgba(45, 42, 46, 0.96));
  overflow: hidden;
}

.highlights-card h3 {
  margin-bottom: 14px;
  color: #f8fbff;
  font-size: clamp(1.16rem, 3.45vw, 1.46rem);
  font-family: "Inter", "Segoe UI", sans-serif;
  font-weight: 800;
  line-height: 1.08;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.highlights-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.highlight {
  border: none;
  padding: 0;
  cursor: pointer;
  aspect-ratio: 9/16;
  border-radius: 14px;
  background-color: #0d1623;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 -60px 72px rgba(0, 0, 0, 0.45);
  transform: translateY(0);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.highlight:hover,
.highlight:focus-visible {
  transform: translateY(-2px);
  box-shadow: inset 0 -70px 84px rgba(0, 0, 0, 0.52), 0 10px 20px rgba(0, 0, 0, 0.26);
}


.highlight-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 11, 16, 0.04) 45%, rgba(7, 11, 16, 0.76) 100%);
  z-index: 1;
}

.highlight-title {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.15;
  text-align: left;
  z-index: 2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.astro-stage {
  min-height: 220px;
  position: relative;
}

.astro-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  opacity: 0;
  transform: scale(0.95);
  transition: 450ms ease;
}

.astro-scene.is-visible {
  opacity: 1;
  transform: scale(1);
}

.moon {
  width: 108px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, #bbc7d6 60%, #8090a0 100%);
  box-shadow: 0 0 34px rgba(199, 219, 255, 0.5);
}

.snowflake {
  font-size: 4rem;
  animation: spin 6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.timeline-card {
  position: relative;
  padding: 18px 14px 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 14%, rgba(239, 74, 162, 0.12), transparent 35%),
    radial-gradient(circle at 75% 78%, rgba(121, 57, 255, 0.09), transparent 35%),
    #0a0d14;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.timeline-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.36) 1px, transparent 1.5px),
    radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1.5px);
  background-size: 120px 120px, 180px 180px;
  background-position: 0 0, 50px 70px;
  opacity: 0.35;
  pointer-events: none;
}

.timeline-card h3,
.timeline-subtitle,
.timeline-items,
.timeline-line,
#completeFlowBtn {
  position: relative;
  z-index: 1;
}

.timeline-card h3 {
  margin-bottom: 4px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.timeline-subtitle {
  margin: 0 0 12px;
  color: rgba(226, 235, 246, 0.7);
  font-size: 0.98rem;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.timeline-line {
  position: absolute;
  top: 120px;
  bottom: 24px;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(252, 131, 192, 0.3) 0%, rgba(252, 131, 192, 0.72) 28%, rgba(252, 131, 192, 0.3) 100%);
  box-shadow: 0 0 12px rgba(252, 131, 192, 0.25);
}

.timeline-items {
  display: grid;
  gap: 28px;
  margin-bottom: 14px;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 360ms ease, transform 360ms ease;
}

.timeline-item .timeline-polaroid-wrap {
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
}

.timeline-item .timeline-copy {
  text-align: left;
  max-width: 220px;
  padding-left: 26px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.timeline-item .timeline-copy .text {
  margin: 6px 0 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: #d6e7f4;
}

/* Momento sem foto: uma coluna so, para o texto nao ficar espremido em
   metade da largura com a outra metade vazia. */
.timeline-item.is-textonly {
  grid-template-columns: minmax(0, 1fr);
}
.timeline-item.is-textonly .timeline-copy {
  padding-left: 26px;
  padding-right: 26px;
  text-align: left;
  margin-left: 0;
}
.timeline-item.is-right.is-textonly .timeline-copy {
  order: 0;
  text-align: left;
  margin-left: 0;
  padding-left: 26px;
  padding-right: 26px;
}

.timeline-item.is-right .timeline-polaroid-wrap {
  order: 2;
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 30px;
}

.timeline-item.is-right .timeline-copy {
  order: 1;
  margin-left: auto;
  text-align: right;
  padding-left: 0;
  padding-right: 26px;
}

.timeline-polaroid {
  width: min(100%, 174px);
  background: #f5f5f8;
  border-radius: 6px;
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  transform: rotate(-3deg);
}
.timeline-polaroid.has-note {
  padding-bottom: 22px;
}
.timeline-polaroid.no-note {
  padding-bottom: 8px;
}

.timeline-item.is-right .timeline-polaroid {
  transform: rotate(3deg);
}

.timeline-photo {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #273145;
}

.timeline-note {
  margin: 0;
  min-height: 72px;
  display: grid;
  place-items: center;
  padding: 8px 6px 0;
  color: #2d2f37;
  font-size: 1.16rem;
  font-weight: 600;
  text-align: center;
  font-family: "Caveat", "Inter", sans-serif;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.timeline-heart {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0;
  box-shadow: 0 0 0 3px rgba(10, 13, 20, 0.92), 0 0 14px rgba(255, 79, 169, 0.36);
}

.timeline-heart::before {
  content: "\2665";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  display: block;
  font-size: 0.82rem;
  line-height: 1;
  animation: timelineHeartPulse 2.6s ease-in-out infinite;
  will-change: transform, filter;
}

@keyframes timelineHeartPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    filter: brightness(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-heart::before {
    animation: none;
  }
}

.timeline-item.visible {
  opacity: 1;
  transform: none;
}

.timeline-item p {
  margin: 0;
}

.timeline-item .date {
  color: var(--accent-soft);
  font-weight: 800;
  font-size: 1.08rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.timeline-item .label {
  margin-top: 8px;
  color: rgba(237, 243, 250, 0.88);
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.28;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 520px) {
  .timeline-item {
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    gap: 10px;
  }

  .timeline-polaroid {
    width: min(100%, 150px);
  }

  .timeline-item .timeline-copy {
    max-width: 170px;
    padding-left: 20px;
  }

  .timeline-item .timeline-polaroid-wrap {
    padding-right: 24px;
  }

  .timeline-item .date {
    font-size: 1.05rem;
  }

  .timeline-item .label {
    font-size: 1.02rem;
  }

  .timeline-item.is-right .timeline-copy {
    padding-right: 20px;
  }

  .timeline-item.is-right .timeline-polaroid-wrap {
    padding-left: 24px;
  }
}

.wordle-grid {
  display: grid;
  gap: 6px;
}

.wordle-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.cell {
  height: 42px;
  border: 1px solid #3b3b3b;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1rem;
  transform-style: preserve-3d;
  transition: transform 360ms ease;
}

.cell.flip {
  transform: rotateX(180deg);
}

.cell.correct {
  background: #4caf50;
}

.cell.present {
  background: #b0a33f;
}

.cell.absent {
  background: #3a3a3a;
}

.wordle-keyboard {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.kb-row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;
}

.kb-row button {
  min-height: 34px;
  border: none;
  border-radius: 8px;
  background: #2f2f2f;
  color: #f5f5f5;
}

.starmap-card {
  background: #000;
}

.script-title {
  font-family: "Great Vibes", "Caveat", cursive;
  font-size: 2rem;
  text-align: center;
  margin: 0 0 6px;
}

.starmap-canvas {
  height: 220px;
  border-radius: var(--radius-md);
  background: radial-gradient(circle at 30% 20%, #1f2f5f 0, #000 65%);
  position: relative;
  overflow: hidden;
}

.star {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #fff;
}

.star-line {
  position: absolute;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  transform-origin: left center;
}

.starmap-log {
  margin: 12px 0 0;
  color: #afbfda;
  font-size: 0.83rem;
}

.btn {
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-weight: 700;
}

.btn-primary {
  background: var(--green);
  color: #0a0a0a;
}

.btn-secondary {
  background: rgba(0, 0, 0, 0.18);
  color: #07233f;
}

.btn-pill {
  border-radius: 999px;
  min-width: 210px;
  font-size: 1rem;
}

.sheet-overlay,
.story-player,
.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
  opacity: 0;
  transition: 300ms ease;
}

.sheet-overlay.open,
.story-player.open,
.transition-overlay.open {
  pointer-events: auto;
  opacity: 1;
}

.sheet-overlay {
  background: rgba(0, 0, 0, 0.55);
  display: grid;
  align-items: end;
}

.sheet {
  background: #8cc8ff;
  color: #0e2f56;
  border-radius: 22px 22px 0 0;
  padding: 18px;
  min-height: 60vh;
}

.sheet.dark {
  background: #1f1f1f;
  color: #fff;
}

.sheet-close {
  margin-left: auto;
  border: none;
  background: transparent;
  color: inherit;
}

.story-player {
  background: rgba(2, 4, 7, 0.95);
  padding: 0 10px;
  display: grid;
  place-items: center;
  overscroll-behavior: contain;
  touch-action: none;
}

.story-stage {
  position: relative;
  width: min(100%, 460px);
  height: min(calc(100svh - 12px), 920px);
  border-radius: 24px;
  overflow: hidden;
  background: #05080e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
}

@supports (height: 100dvh) {
  .story-stage {
    height: min(calc(100dvh - 12px), 920px);
  }
}

.story-progress {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 16px;
  right: 16px;
  z-index: 8;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}

.story-progress span {
  height: 2.5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.story-progress span.is-done,
.story-progress span.is-active {
  background: #fff;
}

.story-topbar {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  left: calc(env(safe-area-inset-left, 0px) + 16px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-topbar p {
  margin: 0;
  color: #ffffff;
  text-align: center;
  font-size: 2rem;
  font-family: "MonteCarlo", "Great Vibes", "Caveat", cursive;
  line-height: 1;
  transform: translateY(2px);
}

.story-close,
.story-mute {
  border: none;
  color: #fff;
  background: rgba(6, 14, 23, 0.48);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-close svg,
.story-mute svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-close {
  position: absolute;
  left: 0;
}

.story-topbar-spacer {
  position: absolute;
  right: 0;
  width: 36px;
  height: 36px;
}

.story-mute .icon-muted {
  display: none;
}

.story-mute.is-muted .icon-sound {
  display: none;
}

.story-mute.is-muted .icon-muted {
  display: block;
}

.story-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28%;
  border: none;
  background: transparent;
  z-index: 6;
  pointer-events: none;
}

.story-nav.left {
  left: 0;
}

.story-nav.right {
  right: 0;
}

.story-content {
  width: 100%;
  height: 100%;
  transition: transform 180ms ease;
  position: relative;
  overflow: hidden;
  touch-action: none;
}

.story-content-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.story-content-media-backdrop {
  position: absolute;
  inset: -18px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(18px);
  transform: scale(1.04);
  opacity: 0;
  transition: opacity 160ms ease;
}

.story-content.is-horizontal-fit .story-content-media-backdrop {
  opacity: 0.58;
}

.story-content.is-horizontal-fit .story-content-media {
  background-size: contain;
  background-position: center;
  background-color: rgba(2, 6, 12, 0.82);
}

.story-content.is-nudging {
  animation: storySwipeNudge 640ms cubic-bezier(0.22, 0.8, 0.28, 1);
}

@keyframes storySwipeNudge {
  0% {
    transform: translateY(0);
  }
  42% {
    transform: translateY(-26px);
  }
  100% {
    transform: translateY(0);
  }
}

.story-content-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(2, 6, 12, 0.35) 0%,
    rgba(2, 8, 16, 0.05) 42%,
    rgba(2, 7, 14, 0.58) 72%,
    rgba(1, 4, 8, 0.86) 100%
  );
}

.story-content-copy {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 118px;
  z-index: 7;
  color: #fff;
}

.story-content-copy h4 {
  margin: 0 0 6px;
  font-size: 1.65rem;
  line-height: 1.08;
  font-weight: 800;
}

.story-content-copy p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
  color: rgba(239, 246, 254, 0.9);
}

.story-mute {
  position: absolute;
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 188px);
  z-index: 8;
}

.story-mute.is-muted {
  opacity: 0.42;
}

.story-album-card {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 8;
  min-height: 66px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, rgba(10, 44, 68, 0.92), rgba(8, 29, 44, 0.94));
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
}

.story-album-thumb {
  display: block;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(11, 26, 40, 0.85);
}

.story-album-copy strong {
  display: block;
  color: #eef8ff;
  font-size: 1.08rem;
  line-height: 1.1;
}

.story-album-copy small {
  color: rgba(225, 239, 252, 0.86);
  font-size: 0.9rem;
}

.story-album-check {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #eaf7ff;
  color: #20648d;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  font-weight: 900;
}

@media (max-width: 420px) {
  .highlights-track {
    gap: 8px;
  }

  .highlight-title {
    left: 8px;
    right: 8px;
    bottom: 8px;
    font-size: 0.88rem;
    font-weight: 500;
  }

  .story-stage {
    border-radius: 20px;
  }

  .story-content-copy {
    left: 16px;
    right: 16px;
  }

}

.transition-overlay {
  background: #000;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.diamonds-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.6);
  transition: 500ms ease;
  background-size: 42px 42px;
}

.diamonds-green {
  background-image: linear-gradient(45deg, transparent 35%, rgba(30, 215, 96, 0.6) 35% 65%, transparent 65%);
}

.diamonds-red {
  background-image: linear-gradient(45deg, transparent 35%, rgba(240, 59, 59, 0.45) 35% 65%, transparent 65%);
}

.transition-overlay.animate .diamonds-green {
  opacity: 1;
  transform: scale(1.4);
}

.transition-overlay.animate .diamonds-red {
  opacity: 1;
  transform: scale(1.1);
  transition-delay: 220ms;
}

#transitionText {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 70%;
  font-size: 1.35rem;
  font-weight: 800;
}

.answer-reveal {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  margin-bottom: 12px;
}

.answer-reveal span {
  height: 40px;
  border-radius: 8px;
  background: #4caf50;
  display: grid;
  place-items: center;
  font-weight: 800;
}

@media (min-width: 768px) {
  .module-dashboard {
    gap: 16px;
  }
}

/* LoveTrace player overrides (stable) */
.glass {
  background: linear-gradient(180deg, #1c1512 0%, #130f0d 55%, #0c0a09 100%);
  position: relative;
  overflow: hidden;
  padding-bottom: 58px;
}

.glass::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(180deg, rgba(12, 10, 9, 0) 0%, rgba(12, 10, 9, 0.5) 56%, rgba(9, 7, 6, 0.94) 100%);
  pointer-events: none;
}

.player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.player-head p {
  margin: 0;
  font-family: "Great Vibes", "Caveat", cursive;
  font-size: clamp(1.6rem, 5.6vw, 2.05rem);
  font-weight: 400;
  line-height: 1;
  color: #f7ece1;
  letter-spacing: 0.01em;
  min-width: 0;
  flex: 1 1 auto;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.player-head-heart {
  display: inline-block;
  margin-left: 0.15em;
  font-family: "Inter", sans-serif;
  font-style: normal;
  color: var(--accent-soft);
  filter: drop-shadow(0 2px 8px rgba(226, 120, 155, 0.4));
}

.ghost-icon {
  border: none;
  background: transparent;
  color: #f0e2d3;
  font-size: 1.2rem;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  opacity: 0.95;
}

.song-meta h2 {
  margin: 0;
  font-family: "Playfair Display", "Georgia", serif;
  font-size: clamp(1.4rem, 5.4vw, 1.65rem);
  font-weight: 700;
  line-height: 1.1;
  color: #f8ece0;
  display: block;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.song-artist {
  margin: 4px 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #e2a37c;
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.song-subline h2 {
  margin: 0;
  font-family: "Playfair Display", "Georgia", serif;
  color: #f8ece0;
  font-size: clamp(1.4rem, 5.4vw, 1.65rem);
  font-weight: 700;
  line-height: 1.1;
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.song-subline {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lt-text-size-tools {
  position: fixed;
  z-index: 132;
  display: inline-flex;
  align-items: center;
  transform: translateY(-50%);
  color: #d8ecff;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  line-height: 1;
}

.lt-text-size-trigger {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(143, 205, 255, 0.7);
  border-radius: 999px;
  background: rgba(8, 26, 44, 0.9);
  color: #eef8ff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.lt-text-size-panel {
  position: absolute;
  left: 34px;
  top: 50%;
  display: none;
  align-items: center;
  gap: 4px;
  min-width: max-content;
  padding: 4px 6px;
  border: 1px solid rgba(143, 205, 255, 0.62);
  border-radius: 999px;
  background: rgba(8, 26, 44, 0.94);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
  transform: translateY(-50%);
}

.lt-text-size-tools.is-left .lt-text-size-panel {
  left: auto;
  right: 34px;
}

.lt-text-size-tools.is-open .lt-text-size-panel {
  display: inline-flex;
}

.lt-text-size-tools strong {
  color: #e7f3ff;
  font-size: 0.72rem;
  font-weight: 700;
}

.lt-text-size-panel button {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(143, 205, 255, 0.7);
  border-radius: 999px;
  background: rgba(13, 45, 70, 0.92);
  color: #eef8ff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.verified-badge {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: none;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--accent-soft);
  filter: drop-shadow(0 2px 8px rgba(226, 120, 155, 0.4));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 150ms ease;
}

.verified-badge:active {
  transform: scale(0.86);
}

.verified-badge svg {
  width: 22px;
  height: 22px;
}

.progress-track {
  background: rgba(247, 231, 219, 0.24);
  height: 4px;
}

.progress-value {
  background: #f7ece0;
}

.progress-times {
  color: rgba(247, 231, 219, 0.72);
  font-size: 0.86rem;
  font-weight: 600;
}

.player-controls button {
  color: #e9d3c2;
  font-size: 1.75rem;
  width: 46px;
  height: 46px;
}

.player-controls .play-btn {
  width: 70px;
  height: 70px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff8f2;
  font-weight: 900;
  font-size: 1.9rem;
}

.player-head .ghost-icon {
  width: 24px;
  height: 24px;
  border: none;
  padding: 0;
  background: transparent;
  display: grid;
  place-items: center;
  color: #f0e2d3;
  opacity: 0.95;
}

.player-head .ghost-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.player-controls {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.player-controls button {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: #e9d3c2;
  display: grid;
  place-items: center;
}

.player-controls button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.player-controls .control-muted {
  opacity: 0.3;
}

.player-controls .control-shuffle,
.player-controls .control-repeat {
  opacity: 0.8;
}

.player-controls .play-btn {
  min-width: 72px;
  min-height: 72px;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff8f2;
  box-shadow: 0 10px 24px var(--accent-shadow);
}

.player-controls .play-btn svg {
  width: 30px;
  height: 30px;
  stroke: none;
  fill: currentColor;
}

.player-controls .play-btn .icon-pause {
  display: none;
}

.player-controls .play-btn.is-playing .icon-play {
  display: none;
}

.player-controls .play-btn.is-playing .icon-pause {
  display: block;
}
.player-controls .control-shuffle svg,
.player-controls .control-repeat svg {
  stroke-width: 2;
}

.player-controls .control-skip svg {
  stroke-width: 3;
}

.player-lyrics-panel {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  margin-bottom: 8px;
  padding: 10px 10px 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(9, 40, 63, 0.62) 0%, rgba(8, 34, 53, 0.58) 100%);
  border: 1px solid rgba(242, 249, 254, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 18px rgba(4, 18, 29, 0.22);
}

.player-current-lyric {
  margin: 0 0 8px;
  color: #f7fcff;
  font-size: 1.08rem;
  line-height: 1.34;
  font-weight: 700;
  letter-spacing: 0.01em;
  min-height: 30px;
  text-align: center;
}

.story-content.is-focus-mode .story-content-gradient,
.story-content.is-focus-mode .story-content-copy {
  pointer-events: none;
}

.player-lyrics-list {
  max-height: 82px;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  gap: 5px;
  padding-right: 4px;
  padding-left: 2px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 234, 251, 0.45) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.album-carousel {
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

.album-track {
  height: 100%;
  display: flex;
  gap: 0;
  transition: transform 460ms cubic-bezier(0.22, 0.8, 0.28, 1);
  will-change: transform;
}

.album-slide {
  position: relative;
  inset: auto;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: none;
}

.album-slide.is-visible {
  opacity: 1;
  transform: scale(1);
}

.player-lyrics-list::-webkit-scrollbar {
  width: 6px;
}

.player-lyrics-list::-webkit-scrollbar-track {
  background: transparent;
}

.player-lyrics-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(236, 248, 255, 0.75), rgba(186, 220, 246, 0.35));
}

.player-lyrics-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(246, 252, 255, 0.9), rgba(201, 229, 249, 0.55));
}

.player-lyrics-list .lyric-line {
  margin: 0;
  color: rgba(230, 245, 255, 0.66);
  font-size: 0.9rem;
  line-height: 1.34;
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.player-lyrics-list .lyric-line.is-active {
  color: #ffffff;
  opacity: 1;
  font-weight: 700;
  transform: translateX(2px);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.24);
}

.player-lyrics-list .state-message {
  margin: 0;
  color: rgba(230, 245, 255, 0.72);
  font-size: 0.9rem;
}
.romantic-letter-card {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% -10%, rgba(175, 0, 20, 0.24), rgba(7, 2, 4, 0.94) 52%), #090305;
  color: #ffeef2;
  border: 1px solid rgba(255, 44, 70, 0.28);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 96, 124, 0.18);
  padding: 18px 14px 16px;
}

@media (max-width: 380px) {
  .couple-card {
    width: calc(100% - 10px);
    margin-top: -14px;
  }

  .couple-cover {
    height: 262px;
  }
}

.letter-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.letter-header h3 {
  margin: 0;
  font-family: "Caveat", "Great Vibes", cursive;
  font-size: clamp(1.58rem, 6vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff4f6;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
}

.letter-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 39, 77, 0.55), transparent);
}

/* ---------------------------------------------------------------------------
   Carta dentro da pagina
   Envelope e carta sao o MESMO elemento. Fechado ele tem altura fixa e mostra
   aba, lacre e ornamentos; ao abrir, a aba dobra, o lacre sai e o texto cresce
   dentro dele. Antes eram dois blocos — um sumia e outro chegava — e por isso
   a troca parecia seca por mais suave que fosse cada metade.
--------------------------------------------------------------------------- */
.letter-envelope {
  position: relative;
  z-index: 3;
  width: 100%;
  /* Altura fechada. Aberto, quem manda e o texto dentro. */
  min-height: 232px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid rgba(198, 106, 132, 0.28);
  background: linear-gradient(180deg, #fffaf6 0%, #f8ede3 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  perspective: 900px;
  transition: box-shadow 400ms ease;
}

/* Ornamentos ficam nos dois estados: sao eles que mantem a cara de papel de
   carta depois de aberta. */
.letter-envelope .envelope-corners {
  position: absolute;
  inset: 0;
  z-index: 4;
  color: rgba(198, 106, 132, 0.3);
  pointer-events: none;
}
.letter-envelope .envelope-corner { width: 46px; height: 46px; }

/* A linguinha. Absoluta, entao nao empurra o texto e pode dobrar sem mexer
   no tamanho do bloco. */
.letter-envelope .envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 116px;
  background: linear-gradient(180deg, #fffdfb 0%, #f0ddd0 100%);
  filter: drop-shadow(0 1.5px 1px rgba(168, 118, 132, 0.26));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 620ms cubic-bezier(0.5, 0, 0.2, 1), opacity 300ms ease 420ms;
  backface-visibility: hidden;
  z-index: 5;
}

.envelope-heart {
  position: absolute;
  left: 50%;
  top: 116px;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--accent), var(--accent-strong) 72%);
  color: #ffe9ec;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.35);
  z-index: 6;
  transition: opacity 320ms ease, transform 480ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.romantic-letter-card:not(.is-open) .letter-envelope {
  animation: letterEnvelopeBreath 3.4s ease-in-out infinite;
}
@keyframes letterEnvelopeBreath {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* O texto cresce de 0fr para 1fr. E a unica forma confiavel de animar ate uma
   altura de conteudo: height/max-height nao interpolam a partir de auto. */
.letter-paper-slot {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 700ms cubic-bezier(0.22, 0.84, 0.28, 1);
}
.letter-paper {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 360ms ease;
}
.letter-paper > * { padding-inline: 18px; }
.letter-greeting:first-child { padding-top: 20px; }

/* --- Aberta -------------------------------------------------------------- */
.romantic-letter-card.is-open .letter-envelope {
  animation: none;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.romantic-letter-card.is-open .envelope-flap {
  transform: rotateX(-172deg);
  opacity: 0;
}
.romantic-letter-card.is-open .envelope-heart {
  opacity: 0;
  transform: translate(-50%, -150%) scale(1.5);
}
.romantic-letter-card.is-open .letter-paper-slot {
  grid-template-rows: 1fr;
  transition: grid-template-rows 700ms cubic-bezier(0.22, 0.84, 0.28, 1) 260ms;
}
.romantic-letter-card.is-open .letter-paper {
  opacity: 1;
  transition: opacity 420ms ease 420ms;
}

.letter-greeting {
  margin: 0;
  font-family: "Great Vibes", "Caveat", cursive;
  font-size: clamp(2.1rem, 8vw, 3rem);
  /* Unico lugar em que o tom mais escuro vira texto — aqui o fundo e o papel
     creme, entao o contraste fica alto (6,6:1). */
  color: var(--accent-strong);
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Pauta so atras do texto corrido: atras da saudacao manuscrita ela cortava
   as letras. */
.letter-body {
  color: #4a3a34;
  font-size: 1.14rem;
  line-height: 34px;
  padding-bottom: 22px;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 33px,
    rgba(176, 138, 150, 0.16) 33px,
    rgba(176, 138, 150, 0.16) 34px
  );
  overflow-wrap: anywhere;
  word-break: break-word;
}
.letter-body p {
  margin: 0 0 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Fechado, o botao usa a cor do lacre de cera: e o convite principal do bloco
   e precisa puxar o olho. Aberto, vira discreto — fechar e acao secundaria. */
.letter-open-btn {
  margin: 18px auto 0;
  /* flex e nao inline-flex: com inline-flex a caixa nao e de nivel de bloco
     e o "margin: auto" horizontal nao centraliza. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(84%, 250px);
  height: 50px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff3f5;
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0.005em;
  font-weight: 700;
  font-size: 0.97rem;
  cursor: pointer;
  box-shadow: 0 8px 20px var(--accent-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 160ms ease, box-shadow 220ms ease, background 220ms ease, color 220ms ease;
}
.letter-btn-icon {
  width: 19px;
  height: 19px;
  flex: none;
  transition: transform 300ms cubic-bezier(0.3, 0.9, 0.3, 1);
}
.letter-open-btn:hover {
  box-shadow: 0 11px 26px rgba(200, 60, 100, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
/* A aba do icone levanta no hover, prevendo o gesto de abrir. */
.letter-open-btn:hover .letter-btn-icon { transform: translateY(-1.5px); }
.letter-open-btn:active { transform: scale(0.98); }
.letter-open-btn:focus-visible {
  outline: 2px solid #ffd7e0;
  outline-offset: 3px;
}

.letter-open-btn.is-open {
  background: transparent;
  color: rgba(255, 214, 224, 0.72);
  box-shadow: none;
  border: 1px solid rgba(255, 214, 224, 0.28);
  font-weight: 600;
}
.letter-open-btn.is-open:hover {
  color: #ffd6e0;
  border-color: rgba(255, 214, 224, 0.5);
  box-shadow: none;
}
.letter-open-btn.is-open .letter-btn-icon { display: none; }

@media (prefers-reduced-motion: reduce) {
  .romantic-letter-card:not(.is-open) .letter-envelope { animation: none; }
  .letter-envelope,
  .letter-envelope .envelope-flap,
  .envelope-heart,
  .letter-paper-slot,
  .letter-paper,
  .romantic-letter-card.is-open .letter-paper-slot,
  .romantic-letter-card.is-open .letter-paper { transition-duration: 1ms; }
}



.inline-editor-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 130;
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid rgba(115, 203, 255, 0.5);
  border-radius: 12px;
  background: rgba(7, 16, 27, 0.94);
  padding: 10px;
  backdrop-filter: blur(6px);
}

.inline-editor-bar strong {
  font-size: 0.9rem;
}

.inline-editor-bar span {
  color: #c3d2e4;
  font-size: 0.8rem;
}

.inline-editor-bar button {
  border: 1px solid #3f5e87;
  border-radius: 8px;
  background: #10233a;
  color: #fff;
  font: inherit;
  padding: 7px 10px;
  cursor: pointer;
}

.inline-editor-bar.is-active {
  display: flex;
}

.inline-config-modal {
  position: fixed;
  inset: 0;
  z-index: 136;
  background: rgba(2, 8, 16, 0.64);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 14px max(88px, env(safe-area-inset-bottom));
  overflow-y: auto;
}

.inline-config-modal.is-open {
  display: flex;
}

.inline-config-dialog {
  width: min(100%, 520px);
  max-height: calc(100vh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  border: 1px solid rgba(115, 203, 255, 0.4);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(8, 18, 31, 0.97), rgba(7, 14, 24, 0.97));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  margin: auto 0;
}

.inline-config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(130, 167, 207, 0.22);
}

.inline-config-head h3 {
  margin: 0;
  font-size: 1rem;
  color: #e5eef9;
}

.inline-config-head button {
  border: 1px solid rgba(139, 180, 224, 0.45);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  background: rgba(11, 32, 56, 0.75);
  color: #e2f0ff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.inline-config-body {
  display: grid;
  gap: 12px;
  padding: 14px;
  overflow-y: auto;
}

.inline-config-group {
  border: 1px solid rgba(130, 167, 207, 0.24);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 10px;
}

.inline-config-group h4 {
  margin: 0;
  font-size: 0.9rem;
  color: #dbe8f6;
}

.inline-config-field {
  display: grid;
  gap: 8px;
}

.inline-config-field span {
  font-size: 0.86rem;
  color: #bfd3ea;
}

.inline-config-field input[type="text"] {
  width: 100%;
  border: 1px solid rgba(128, 172, 219, 0.45);
  border-radius: 10px;
  background: rgba(11, 31, 53, 0.75);
  color: #f3f8ff;
  padding: 10px 11px;
  font: inherit;
}

.inline-config-check {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #d4e4f5;
  font-size: 0.9rem;
}

.inline-config-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.inline-config-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.inline-config-actions button,
.inline-config-foot button {
  border: 1px solid #3f5e87;
  border-radius: 9px;
  background: #10233a;
  color: #fff;
  font: inherit;
  padding: 8px 11px;
  cursor: pointer;
}

.inline-config-field small {
  color: #9bb5d2;
  font-size: 0.8rem;
}

.inline-config-order-list {
  display: grid;
  gap: 7px;
}

.inline-config-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(130, 167, 207, 0.2);
  border-radius: 8px;
  padding: 7px 9px;
  background: rgba(11, 24, 40, 0.5);
}

.inline-config-order-row span {
  color: #d4e4f5;
  font-size: 0.84rem;
}

.inline-config-order-actions {
  display: flex;
  gap: 6px;
}

.inline-config-order-actions button {
  min-width: 30px;
  height: 28px;
  border: 1px solid #3f5e87;
  border-radius: 8px;
  background: #10233a;
  color: #fff;
  cursor: pointer;
}

.inline-config-order-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.inline-config-details-list {
  display: grid;
  gap: 8px;
}

.inline-highlight-stories-list {
  display: grid;
  gap: 10px;
}

.inline-highlight-story-focus {
  border: 1px solid rgba(128, 172, 219, 0.35);
  border-radius: 10px;
  padding: 8px;
  background: rgba(6, 21, 36, 0.48);
}

.inline-highlight-story-focus > strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
}

.inline-focus-preview {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  border: 1px solid rgba(130, 167, 207, 0.35);
  background-size: cover;
  background-repeat: no-repeat;
  cursor: grab;
}

.inline-focus-preview:active {
  cursor: grabbing;
}

.inline-focus-fields {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.inline-config-detail-card {
  border: 1px solid rgba(130, 167, 207, 0.2);
  border-radius: 8px;
  background: rgba(10, 21, 36, 0.58);
  padding: 6px 8px;
}

.inline-config-detail-card > summary {
  cursor: pointer;
  color: #d8e7f7;
  font-size: 0.86rem;
  font-weight: 600;
  list-style: none;
}

.inline-config-detail-card > summary::-webkit-details-marker {
  display: none;
}

.inline-config-detail-grid {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.inline-config-field textarea {
  width: 100%;
  border: 1px solid rgba(128, 172, 219, 0.45);
  border-radius: 10px;
  background: rgba(11, 31, 53, 0.75);
  color: #f3f8ff;
  padding: 10px 11px;
  font: inherit;
  resize: vertical;
}

.inline-config-foot {
  padding: 12px 14px;
  border-top: 1px solid rgba(130, 167, 207, 0.22);
  display: flex;
  justify-content: flex-end;
}

.lt-editable {
  outline: 2px dashed rgba(129, 201, 255, 0.7);
  outline-offset: 3px;
  border-radius: 6px;
  cursor: text;
}

.lt-editable-date {
  outline: 2px dashed rgba(120, 255, 177, 0.68);
  outline-offset: 3px;
  border-radius: 8px;
  cursor: pointer;
}

.lt-editable-image {
  outline: 2px dashed rgba(255, 210, 120, 0.58);
  outline-offset: 3px;
}

.lt-focus-draggable {
  cursor: grab;
}

.lt-focus-draggable:active {
  cursor: grabbing;
}

.inline-section-tools {
  display: none;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.inline-section-tools button {
  border: 1px dashed rgba(143, 205, 255, 0.72);
  border-radius: 999px;
  background: rgba(8, 26, 44, 0.75);
  color: #d8ecff;
  font: inherit;
  font-size: 0.78rem;
  padding: 5px 10px;
  cursor: pointer;
}

.inline-section-tools button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lt-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 12;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 80, 104, 0.82);
  border-radius: 999px;
  background: rgba(35, 7, 12, 0.84);
  color: #ffd8df;
  font-weight: 800;
  font-size: 0.82rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.story-content-copy .lt-remove-btn {
  top: -8px;
  right: 0;
}

.lt-change-photo-btn {
  position: absolute;
  top: 78px;
  right: 14px;
  z-index: 12;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(128, 214, 255, 0.82);
  border-radius: 999px;
  background: rgba(7, 26, 43, 0.82);
  color: #d9f2ff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.95rem;
}

.lt-focus-mode-btn {
  position: absolute;
  top: 118px;
  right: 14px;
  z-index: 12;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 231, 168, 0.82);
  border-radius: 999px;
  background: rgba(43, 32, 7, 0.84);
  color: #ffe8b8;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.95rem;
}

.lt-focus-mode-btn.is-active {
  border-color: rgba(125, 255, 181, 0.92);
  background: rgba(8, 54, 30, 0.88);
  color: #d8ffe8;
}

.lt-fit-mode-btn {
  position: absolute;
  top: 158px;
  right: 14px;
  z-index: 12;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(175, 218, 255, 0.82);
  border-radius: 999px;
  background: rgba(8, 24, 42, 0.84);
  color: #dcefff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.95rem;
}

.lt-fit-mode-btn.is-active {
  border-color: rgba(125, 255, 181, 0.92);
  background: rgba(8, 54, 30, 0.88);
  color: #d8ffe8;
}

.lt-focus-mode-btn-slider {
  top: 12px;
  right: 12px;
}

.lt-add-btn {
  position: absolute;
  top: 78px;
  right: 54px;
  z-index: 12;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(120, 255, 177, 0.86);
  border-radius: 999px;
  background: rgba(7, 37, 24, 0.84);
  color: #d7ffea;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 900;
}

/* Removido: sombra em V vermelho-escuro do estilo antigo. Sobre o papel creme
   ela aparecia como uma mancha por cima da aba. */

/* ---------------------------------------------------------------------------
   Quiz do casal
   Reusa a linguagem do envelope (arabescos de canto, brilho rosado) para ser
   um momento da mesma carta, e nao um widget colado na pagina.
--------------------------------------------------------------------------- */
.quiz-card {
  position: relative;
  padding: 28px 18px 30px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--accent-shadow) 0%, transparent 62%),
    linear-gradient(160deg, rgba(56, 53, 58, 0.94), rgba(45, 42, 46, 0.96));
  border: 1px solid var(--accent-shadow);
}
.quiz-card.is-hidden { display: none; }

.quiz-corners {
  position: absolute;
  inset: 0;
  color: var(--accent-soft);
  opacity: 0.22;
  pointer-events: none;
}
.quiz-corners .envelope-corner { width: 40px; height: 40px; }
.quiz-corners .envelope-corner--tl { top: 10px; left: 10px; }
.quiz-corners .envelope-corner--tr { top: 10px; right: 10px; transform: rotate(90deg); }
.quiz-corners .envelope-corner--br { bottom: 10px; right: 10px; transform: rotate(180deg); }
.quiz-corners .envelope-corner--bl { bottom: 10px; left: 10px; transform: rotate(270deg); }

.quiz-intro, .quiz-play, .quiz-result { position: relative; }
.quiz-intro.is-hidden, .quiz-play.is-hidden, .quiz-result.is-hidden { display: none; }
.quiz-play, .quiz-result { animation: quizIn 380ms cubic-bezier(.22,1,.36,1); }
@keyframes quizIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.quiz-title {
  margin: 0;
  color: #fdf3f6;
  font-family: "Playfair Display", "Georgia", serif;
  font-size: clamp(1.34rem, 4.5vw, 1.62rem);
  font-weight: 700;
  line-height: 1.18;
}
.quiz-sub {
  margin: 6px 0 0;
  font-size: 0.88rem;
  color: var(--accent-soft);
}

.quiz-prize {
  display: grid;
  gap: 3px;
  margin: 16px auto 0;
  padding: 12px 16px;
  max-width: 320px;
  border: 1px dashed var(--accent-shadow);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.quiz-prize.is-hidden { display: none; }
.quiz-prize-label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(224, 233, 245, 0.55);
}
.quiz-prize strong {
  color: #f8fbff;
  font-size: 1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.quiz-start-btn {
  margin: 20px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff3f5;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 22px var(--accent-shadow);
  transition: transform 160ms ease, box-shadow 200ms ease;
}
.quiz-start-btn:hover { transform: translateY(-1px); }
.quiz-start-btn:active { transform: translateY(0) scale(0.98); }

.quiz-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.quiz-step-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(224, 233, 245, 0.5);
}
.quiz-dots { display: flex; gap: 5px; }
.quiz-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: background 240ms ease, width 240ms ease;
}
.quiz-dot.is-done { background: var(--accent-soft); }
.quiz-dot.is-current { width: 16px; border-radius: 3px; background: var(--accent); }

.quiz-question {
  margin: 0 0 16px;
  color: #f7f7f7;
  font-size: clamp(1.02rem, 3.4vw, 1.16rem);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

.quiz-answers { display: grid; gap: 9px; }
.quiz-answer {
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #eef0f4;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 140ms ease;
}
.quiz-answer:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--accent-soft);
}
.quiz-answer:active:not(:disabled) { transform: scale(0.99); }
.quiz-answer:disabled { cursor: default; }
/* Verde e vermelho aqui sao semantica de acerto/erro, nao a cor da marca:
   ficam iguais nos tres temas de proposito. */
.quiz-answer.is-right {
  border-color: rgba(64, 200, 140, 0.7);
  background: rgba(64, 200, 140, 0.14);
  color: #d8ffe8;
}
.quiz-answer.is-picked-right { font-weight: 700; }
.quiz-answer.is-picked-wrong {
  border-color: rgba(224, 92, 92, 0.6);
  background: rgba(224, 92, 92, 0.13);
  color: #ffd9d9;
}

.quiz-result-mark {
  display: block;
  margin-bottom: 8px;
  font-size: 2.1rem;
  color: var(--accent-soft);
}

@media (prefers-reduced-motion: reduce) {
  .quiz-play, .quiz-result { animation: none; }
  .quiz-start-btn, .quiz-answer, .quiz-dot { transition: none; }
}

/* Barra de progresso compacta. Uma barrinha por foto funciona ate umas vinte;
   com os capitulos aceitando ate 100 fotos, as barras virariam riscos de 2px.
   Acima do limite o app.js liga .is-compact: uma barra continua + contador.
   Os filhos sao <div> de proposito: a regra ".story-progress span" pintaria
   qualquer <span> aqui dentro como barrinha. */
.story-progress.is-compact {
  display: flex;
  align-items: center;
  gap: 10px;
}
.story-progress-track {
  flex: 1;
  height: 2.5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.story-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: #fff;
  transition: width 0.3s ease;
}
.story-progress-count {
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .story-progress-fill { transition: none; }
}

/* Contador no lugar das bolinhas quando ha mais de 12 fotos principais: a
   fileira de bolinhas passaria da largura da tela. Mesmo tom das bolinhas. */
.album-dots.is-compact { height: auto; }
.album-dots-count {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Modo Cine. Mora dentro do player, logo abaixo dos controles: e o mesmo
   gesto de "dar play", so que na historia inteira. Usa --accent, entao
   acompanha o tema da pagina (rosa, dourado ou violeta). */
.cinema-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 18px;
  padding: 13px 18px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--accent), var(--accent-strong));
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 26px -10px var(--accent-shadow);
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.cinema-btn svg { width: 16px; height: 16px; fill: currentColor; }
.cinema-btn:hover { transform: translateY(-1px); }
/* Enquanto o filme roda o botao fica apagado: um segundo toque nao pode
   comecar outro filme por cima do primeiro. */
.cinema-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cinema-btn:hover { transform: none; }
}