/* ─────────────────────────────────────────────
   CARTA — visual limpo e separado
   Usa assets/backgrounds/letter_bg.png quando existir.
───────────────────────────────────────────── */

.letter-modal {
  align-items: center;
}

.letter-reader {
  position: relative;
  width: min(1050px, calc(100vw - 42px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 5px solid var(--wood-900);
  outline: 3px solid rgba(240, 200, 64, .40);
  outline-offset: -11px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 151, 183, .14), transparent 24%),
    radial-gradient(circle at 78% 86%, rgba(255, 218, 88, .12), transparent 26%),
    rgba(58, 38, 16, .98);
  box-shadow:
    0 0 0 4px rgba(0,0,0,.36),
    10px 10px 0 rgba(0,0,0,.44);
  color: var(--cream-100);
}

.letter-reader__top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-end;
  padding: 22px 28px 12px;
}

.letter-reader__eyebrow {
  display: block;
  color: var(--gold-300);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1;
  text-shadow: 2px 2px 0 var(--shadow-hard);
}

.letter-reader__top h2 {
  margin: 8px 0 0;
  color: var(--cream-100);
  font-size: clamp(34px, 4vw, 54px);
  line-height: .9;
  text-shadow: 3px 3px 0 var(--shadow-hard);
}

.letter-reader__counter {
  color: var(--gold-300);
  font-size: clamp(20px, 2vw, 28px);
  text-shadow: 2px 2px 0 var(--shadow-hard);
  white-space: nowrap;
}

.letter-reader__main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 6px 28px 14px;
}

.letter-reader__speaker {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  color: var(--cream-100);
  text-align: center;
  text-shadow: 2px 2px 0 var(--shadow-hard);
}

.letter-speaker__caption {
  display: block;
  max-width: 165px;
  margin-top: 18px;
  color: var(--cream-300);
  font-size: 16px;
  line-height: 1.08;
}

.letter-speaker {
  width: 78px;
  height: 98px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 9px rgba(255, 218, 88, .20))
    drop-shadow(4px 6px 0 rgba(0,0,0,.28));
}

.letter-speaker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.letter-speaker.is-talking {
  animation: letterSpeakerTalk .40s ease-in-out infinite;
}

.letter-paper-original {
  position: relative;
  width: min(796px, 100%);
  aspect-ratio: 796 / 448;
  min-height: 448px;
  margin: 0 auto;
  padding: clamp(34px, 4.7vw, 54px) clamp(42px, 6vw, 66px) clamp(44px, 5vw, 60px);
  background:
    url("../assets/backgrounds/letter_bg.png") center center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 36%, #fff0bd, #f1c985 68%, #b8743a 100%);
  color: #2b1508;
  filter:
    drop-shadow(0 0 14px rgba(255, 231, 174, .20))
    drop-shadow(8px 9px 0 rgba(0,0,0,.28));
}

.letter-paper-original__inner {
  height: 100%;
  overflow-y: auto;
  padding: 2px 4px 2px 0;
}

.letter-text {
  font-size: clamp(20px, 2.05vw, 29px);
  line-height: 1.26;
  color: #2b1508;
  text-shadow: none;
  white-space: pre-wrap;
}

.letter-text.is-typing::after {
  content: "▌";
  display: inline-block;
  margin-left: 4px;
  color: #8f3b25;
  animation: letterCaret .72s steps(1, end) infinite;
}

.letter-reader__controls {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 28px 26px;
}

.gold-button--secondary {
  background: linear-gradient(#ead5a8, #d9b97a);
  color: #4c2811;
}

.gold-button--ghost {
  background: rgba(255, 231, 174, .22);
  color: var(--cream-100);
}

.letter-reader__ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.letter-float-heart,
.letter-sparkle {
  position: absolute;
  z-index: 1;
  text-shadow: 0 0 8px rgba(255,255,255,.28);
  opacity: 0;
}

.letter-float-heart {
  color: rgba(255, 105, 150, .50);
  font-size: 24px;
  animation: letterHeartFloat 7.5s linear infinite;
}

.letter-sparkle {
  color: rgba(255, 231, 124, .55);
  font-size: 28px;
  animation: letterSparkleFloat 6.2s ease-in-out infinite;
}

.letter-float-heart--1 { left: 8%; top: 82%; animation-delay: 0s; }
.letter-float-heart--2 { left: 19%; top: 20%; animation-delay: -1.4s; }
.letter-float-heart--3 { left: 70%; top: 78%; animation-delay: -3.1s; }
.letter-float-heart--4 { left: 88%; top: 30%; animation-delay: -2.0s; }
.letter-float-heart--5 { left: 49%; top: 88%; animation-delay: -4.7s; }
.letter-sparkle--1 { left: 82%; top: 14%; animation-delay: -2.3s; }
.letter-sparkle--2 { left: 13%; top: 58%; animation-delay: -4.1s; }

@keyframes letterSpeakerTalk {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-1px) rotate(-1deg); }
  50% { transform: translateY(0) rotate(1deg); }
  75% { transform: translateY(-1px) rotate(0deg); }
}

@keyframes letterHeartFloat {
  0% { transform: translateY(12px) scale(.82); opacity: 0; }
  18% { opacity: .90; }
  78% { opacity: .90; }
  100% { transform: translateY(-34px) scale(1.10); opacity: 0; }
}

@keyframes letterSparkleFloat {
  0%, 100% { transform: translateY(0) scale(.9) rotate(0deg); opacity: .15; }
  50% { transform: translateY(-12px) scale(1.1) rotate(10deg); opacity: .72; }
}

@keyframes letterCaret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (max-width: 900px) {
  .letter-reader__main {
    grid-template-columns: 1fr;
  }

  .letter-reader__speaker {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }

  .letter-speaker__caption {
    max-width: none;
  }

  .letter-speaker {
    width: 64px;
    height: 88px;
  }

  .letter-paper-original {
    min-height: 390px;
    aspect-ratio: auto;
  }

  .letter-text {
    font-size: clamp(19px, 4vw, 25px);
  }
}


/* Página final com áudio */
.letter-audio-page {
  min-height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 22px;
  text-align: center;
}

.letter-audio-page p {
  margin: 0;
  font-size: clamp(23px, 2.45vw, 34px);
  line-height: 1.3;
}

.letter-audio-page small {
  display: block;
  max-width: 520px;
  color: rgba(43, 21, 8, .62);
  font-size: 15px;
  line-height: 1.15;
}

.letter-audio-button {
  min-height: 62px;
  padding: 0 28px;
  border: 5px solid #2b1508;
  background: linear-gradient(#f6cf47, #d99a23);
  color: #2b1508;
  box-shadow:
    5px 5px 0 rgba(0,0,0,.30),
    0 0 18px rgba(255, 217, 91, .28);
  cursor: pointer;
  font: inherit;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1;
}

.letter-audio-button:hover,
.letter-audio-button:focus-visible,
.letter-audio-button.is-playing {
  outline: none;
  filter: brightness(1.08);
  box-shadow:
    5px 5px 0 rgba(0,0,0,.30),
    0 0 24px rgba(255, 120, 170, .42);
}


.letter-audio-figure {
  width: min(100%, 360px);
  margin: 0;
  opacity: 0;
  transform: translateY(8px) scale(.985);
  transition: opacity .45s ease, transform .45s ease;
}

.letter-audio-figure.is-ready {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.letter-audio-image {
  display: block;
  width: 100%;
  max-height: 230px;
  object-fit: contain;
  image-rendering: auto;
  border: 5px solid #6b3d17;
  outline: 3px solid rgba(255, 233, 173, .55);
  outline-offset: -10px;
  background:
    linear-gradient(180deg, rgba(255, 245, 214, .92), rgba(243, 219, 177, .88));
  box-shadow:
    0 0 0 4px rgba(0,0,0,.16),
    0 10px 28px rgba(92, 49, 19, .18),
    0 0 22px rgba(255, 170, 196, .18);
}


/* Polimento da página 16 */
.letter-reader.is-final-page .letter-paper-original {
  filter:
    drop-shadow(0 0 20px rgba(255, 155, 190, .20))
    drop-shadow(8px 9px 0 rgba(0,0,0,.28));
}

.letter-reader.is-final-page .letter-paper-original__inner {
  animation: finalLetterSoftGlow .95s ease-out both;
}

.letter-reader.is-final-page .letter-reader__eyebrow {
  color: #ffd9e7;
}

.letter-audio-page {
  animation: finalPageFadeIn .55s ease-out both;
}

.letter-audio-button {
  position: relative;
  overflow: hidden;
}

.letter-audio-button::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.34), transparent 65%);
  transform: translateX(-55%);
  animation: finalButtonShimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes finalPageFadeIn {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes finalLetterSoftGlow {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.06) saturate(1.06);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes finalButtonShimmer {
  0%, 45% {
    transform: translateX(-65%);
    opacity: 0;
  }
  60% {
    opacity: .75;
  }
  100% {
    transform: translateX(65%);
    opacity: 0;
  }
}


.letter-audio-guard {
  margin: -8px 0 0;
  max-width: 520px;
  color: rgba(43, 21, 8, .70);
  font-size: clamp(17px, 1.65vw, 22px);
  line-height: 1.15;
}

.letter-audio-guard.is-done {
  color: rgba(61, 110, 42, .88);
}

.letter-audio-guard.needs-attention,
.letter-audio-button.needs-attention,
#letter-next.is-waiting-audio {
  animation: audioGuardPulse .85s ease-in-out 2;
}

@keyframes audioGuardPulse {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-2px); filter: brightness(1.13); }
}