/* Modo viewer: entrada, HUD sobre a cena 3D, card da mensagem, roleta, fallback 2D. */
.mode-viewer { overflow: hidden; }

.intro-card { text-align: center; max-width: 480px; width: 100%; padding: 32px 24px 30px; display: grid; justify-items: center; gap: 6px; }
.intro-title { font-size: clamp(1.4rem, 5.5vw, 1.9rem); font-weight: 400; margin: 6px 0 4px; display: grid; gap: 4px; }
.intro-title .name { font-size: clamp(2.6rem, 12vw, 3.8rem); line-height: 1.1; overflow-wrap: anywhere; }
.intro-for { margin: 0 0 18px; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.15rem; color: var(--muted); overflow-wrap: anywhere; }

.gift { width: 110px; height: 110px; margin: 20px auto 8px; position: relative; animation: wiggle 2.4s ease-in-out infinite; filter: drop-shadow(0 16px 30px color-mix(in srgb, var(--accent) 45%, transparent)); }
.gift-box, .gift-lid { position: absolute; background: linear-gradient(90deg, transparent 42%, var(--gold) 42% 58%, transparent 58%), linear-gradient(135deg, var(--accent), var(--accent2)); }
.gift-box { left: 10px; right: 10px; bottom: 0; height: 66px; border-radius: 10px 10px 14px 14px; }
.gift-lid { left: 0; right: 0; top: 26px; height: 24px; border-radius: 8px; z-index: 1; filter: brightness(1.15); }
.gift-lid::before, .gift-lid::after { content: ""; position: absolute; top: -26px; width: 30px; height: 28px; border: 7px solid var(--gold); border-radius: 50% 50% 10% 50%; }
.gift-lid::before { left: 22px; transform: rotate(-20deg); }
.gift-lid::after { right: 22px; transform: scaleX(-1) rotate(-20deg); }
@keyframes wiggle { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-6deg); } 85% { transform: rotate(6deg); } 92% { transform: rotate(-3deg); } }

/* Dourado escurecido no tema claro, para manter contraste. */
.theme-fofo { --gold: #c2410c; }

/* ---------- cena + HUD ---------- */
.stage { position: fixed; inset: 0; }
.stage-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.hud {
  position: fixed; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(14px + var(--safe-top)) 16px calc(18px + var(--safe-bottom));
  transition: opacity 0.3s, visibility 0s;
}
/* Com um modal aberto, o HUD some: evita botões sobrepostos (ex.: × do cartão em cima do som). */
.hud.behind-modal { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }
.hud-top { display: flex; justify-content: flex-end; }
.sound-controls { display: flex; gap: 8px; pointer-events: auto; }
.hud-bottom { display: grid; gap: 12px; justify-items: center; }
.hud-bottom .actions { pointer-events: auto; }
.hint-bubble { margin: 0; padding: 10px 18px; border-radius: 999px; font-weight: 500; text-align: center; font-size: 0.93rem; }
.btn .meter { display: none; width: 38px; height: 8px; border-radius: 4px; background: rgb(0 0 0 / 0.2); overflow: hidden; position: relative; }
.btn.listening .meter { display: block; }
.btn .meter::after { content: ""; position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(var(--level, 0)); transition: transform 0.08s; }
.btn.listening { animation: pulse 1.2s ease-in-out infinite; opacity: 1; }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent); } }

/* ---------- overlays ---------- */
.overlay-host:empty { display: none; }
.overlay {
  position: fixed; inset: 0; z-index: 10; display: grid; overflow-y: auto;
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  /* Escuro e desfocado em todos os temas, para o modal ser o único foco. */
  background: rgb(6 3 16 / 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 0.35s ease-out;
}
.overlay > * { margin: auto; min-width: 0; max-width: 100%; } /* centraliza sem cortar o topo quando o card é maior que a tela */
/* Sobre o overlay escuro, o vidro translúcido ficaria acinzentado nos temas claros:
   pinta a cor do card sobre o fundo do tema, deixando o card opaco e fiel à paleta. */
.overlay > .glass { background: linear-gradient(var(--card), var(--card)), var(--bg1); }
.overlay > .glass { animation: pop-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { transform: scale(0.88) translateY(24px); opacity: 0; } }
.close { position: absolute; top: 14px; right: 14px; }

.message-card { position: relative; text-align: center; max-width: 520px; width: 100%; padding: 40px 24px 28px; display: grid; justify-items: center; }
.message-title { display: grid; gap: 0; margin: 14px 0 8px; font-weight: 400; }
.message-title .script { font-size: clamp(2.8rem, 12vw, 4rem); line-height: 1.05; }
.message-name { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(1.7rem, 7vw, 2.4rem); overflow-wrap: anywhere; }
.message-text {
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.06rem; line-height: 1.65;
  margin: 10px 0 14px; max-height: 42vh; overflow-y: auto; color: color-mix(in srgb, var(--ink) 92%, transparent);
}
.message-signature { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.1rem; color: var(--muted); margin: 0 0 22px; overflow-wrap: anywhere; }

.wheel-card { position: relative; text-align: center; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; max-width: 420px; width: 100%; padding: 30px 22px 26px; }
.wheel-card h2 { font-family: var(--script); font-size: 2.3rem; font-weight: 600; margin: 0; }
.wheel-wrap { position: relative; width: 100%; max-width: 340px; display: grid; place-items: center; }
/* aspect-ratio + height auto: se o max-width encolher o canvas, a roleta continua redonda. */
.wheel-canvas { display: block; max-width: 100%; height: auto !important; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 85%, transparent), 0 0 50px color-mix(in srgb, var(--accent) 40%, transparent); }
.wheel-pointer {
  position: absolute; top: -14px; left: 50%; margin-left: -14px; z-index: 1;
  border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 28px solid var(--gold);
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.4));
}
.wheel-result { margin: 0; min-height: 3.4em; display: grid; gap: 2px; color: var(--muted); }
.wheel-result strong { font-family: var(--serif); font-style: italic; font-size: 1.7rem; color: var(--ink); animation: pop-in 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); overflow-wrap: anywhere; }

/* ---------- fallback 2D ---------- */
.css-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.css-confetti i { position: absolute; top: -20px; left: var(--x); width: 9px; height: 14px; border-radius: 2px; background: var(--c); animation: fall var(--dur) linear var(--delay) infinite; }
@keyframes fall { to { transform: translateY(110vh) rotate(var(--rot)); } }

@media (prefers-reduced-motion: reduce) {
  .css-confetti i { animation: none !important; top: auto; bottom: 0; }
}

/* ---------- cartão com foto: envelope → cartão que gira ---------- */
.greeting {
  /* Dica e botões ficam direto sobre o overlay escuro: tokens claros em todos os temas. */
  --ink: #ffffff; --muted: rgb(255 255 255 / 0.72); --line: rgb(255 255 255 / 0.18); --soft: rgb(255 255 255 / 0.1);
  color: var(--ink);
}
.greeting { width: min(92vw, 380px); display: grid; justify-items: center; gap: 16px; text-align: center; }
.greeting > .close { position: fixed; top: calc(14px + var(--safe-top)); right: 14px; z-index: 2; }
.envelope-intro { display: grid; justify-items: center; gap: 18px; }
.card-hint { margin: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.92rem; }

.envelope {
  appearance: none; border: 0; padding: 0; background: none; cursor: pointer;
  position: relative; width: min(78vw, 300px); width: min(78vw, 300px, (100dvh - 220px) * 1.5); aspect-ratio: 3 / 2; margin-top: 40px;
  animation: bob 3s ease-in-out infinite;
  filter: drop-shadow(0 24px 40px rgb(0 0 0 / 0.4));
}
.envelope:focus-visible { outline: 3px solid var(--gold); outline-offset: 8px; border-radius: 12px; }
.envelope > span { position: absolute; display: block; }
.env-back { inset: 0; border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent2) 80%, black), color-mix(in srgb, var(--accent) 70%, black)); }
.env-letter {
  left: 7%; right: 7%; top: 6%; height: 80%; z-index: 1; border-radius: 8px;
  background: #fffaf3; display: grid; place-items: center; font-size: clamp(1.4rem, 6vw, 1.9rem);
  overflow: hidden; padding: 0 12px; text-align: center;
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) 0.35s;
}
.env-pocket {
  inset: 0; z-index: 2; border-radius: 0 0 12px 12px;
  clip-path: polygon(0 28%, 50% 64%, 100% 28%, 100% 100%, 0 100%);
  background: linear-gradient(170deg, var(--accent), var(--accent2));
}
.env-flap {
  left: 0; right: 0; top: 0; height: 64%; z-index: 3; transform-origin: top;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, white), var(--accent));
  transition: transform 0.5s ease-in, z-index 0s 0.25s;
}
.env-seal {
  z-index: 4; left: 50%; top: 58%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  display: grid !important; place-items: center; color: #fff; font-size: 1.2rem;
  background: radial-gradient(circle at 35% 30%, #fbbf24, #d97706); box-shadow: 0 4px 12px rgb(0 0 0 / 0.3);
  transition: transform 0.3s, opacity 0.3s;
}
.env-letter .script { overflow-wrap: anywhere; line-height: 1.15; }
.envelope.open { animation: none; }
.envelope.open .env-flap { transform: rotateX(180deg); z-index: 0; }
.envelope.open .env-seal { transform: scale(0.4); opacity: 0; }
.envelope.open .env-letter { transform: translateY(-58%); }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-1deg); } }

/* Também limitado pela altura: no celular deitado, um cartão 3:4 pela largura passaria da tela. */
.flip-card { width: min(84vw, 340px); width: min(84vw, 340px, (100dvh - 200px) * 0.75); aspect-ratio: 3 / 4; perspective: 1400px; cursor: pointer; border-radius: 22px; animation: rise-in 0.6s cubic-bezier(0.2, 1.2, 0.4, 1); }
.flip-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
@keyframes rise-in { from { transform: translateY(60px) scale(0.9); opacity: 0; } }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.3, 0.9, 0.25, 1); }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0; border-radius: 22px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #fffaf3; box-shadow: 0 30px 70px rgb(0 0 0 / 0.45);
}
.face.front { display: grid; grid-template-rows: 1fr auto; padding: 14px 14px 0; }
.card-photo { border-radius: 14px; overflow: hidden; background: #efe6ee; min-height: 0; }
.card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-photo-missing { height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 20px; color: #8b7a8c; font-size: 0.92rem; }
.card-photo-missing .icon { width: 2em; height: 2em; }
.card-caption { margin: 6px 0 10px; font-size: clamp(1.9rem, 8vw, 2.3rem); line-height: 1.2; }
/* Verso em papel claro em todos os temas: redefine os tokens derivados de --ink. */
.face.back {
  --ink: #3b2a3f; --muted: #7a6680; --line: rgb(59 42 63 / 0.14); --soft: rgb(59 42 63 / 0.06); --gold: #b45309;
  color: var(--ink); transform: rotateY(180deg);
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  padding: 26px 20px; overflow-y: auto;
}
.face.back .message-title { margin-top: 8px; }
.face.back .message-text { max-height: none; overflow: visible; font-size: 1rem; margin: 6px 0 10px; }
.face.back .message-signature { margin: 0; }

/* ---------- volume da música (popover no ícone de música) ---------- */
.music-control { position: relative; }
.volume-pop {
  position: absolute; top: 100%; right: 0; margin-top: 10px;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0s 0.18s;
}
/* Ponte invisível entre o botão e o slider: o mouse atravessa o espaço sem fechar o popover. */
.volume-pop::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
.music-control:hover .volume-pop,
.music-control:focus-within .volume-pop {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.18s, transform 0.18s, visibility 0s;
}
.volume-pop .icon.small { width: 1em; height: 1em; color: var(--muted); }
.volume-slider {
  appearance: none; -webkit-appearance: none; width: 120px; height: 24px; margin: 0;
  background: transparent; cursor: pointer;
}
.volume-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2)) 0 / var(--fill, 80%) 100% no-repeat, var(--soft);
}
.volume-slider::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2)) 0 / var(--fill, 80%) 100% no-repeat, var(--soft);
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
}
.volume-slider::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / 0.35); }
.volume-slider:focus-visible { outline: none; }
.volume-slider:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--gold); outline-offset: 2px; }
.volume-slider:focus-visible::-moz-range-thumb { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Celular deitado: pouca altura, muita largura. Cartão à esquerda, dica e botões à direita,
   para o cartão usar a altura toda em vez de dividi-la com os botões. */
@media (orientation: landscape) and (max-height: 520px) {
  .greeting { width: auto; grid-template-columns: auto minmax(0, 260px); column-gap: 28px; align-items: center; }
  .greeting .envelope-intro { grid-column: 1 / -1; }
  .greeting .envelope { margin-top: 24px; }
  .greeting .flip-card { grid-row: 1 / span 2; width: min(340px, (100vh - 48px) * 0.75); width: min(340px, (100dvh - 48px) * 0.75); }
  .greeting .card-caption { font-size: 1.6rem; }
  .greeting .card-hint { align-self: end; }
  .greeting .actions { align-self: start; flex-direction: column; align-items: stretch; }
}