:root {
--roxo-profundo: #1E0A2E;
--roxo-medio: #3D1B56;
--lilas-vibrante: #9B5FC0;
--lavanda-suave: #E8D5F2;
--branco-rosado: #F9F0FF;
--sombra-suave: 0 8px 32px rgba(0,0,0,0.3);
--raio-botao: 50px;
--transicao: 0.3s ease;
--foco-cor: #FFD700;
--erro-cor: #FF6B6B;
--sucesso-cor: #4ECDC4;
}

/* Classe para leitores de tela */
.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;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow-x:hidden; }

body {
font-family: 'Lora', serif;
background-color: var(--roxo-profundo);
color: var(--branco-rosado);
display:flex; flex-direction:column; min-height:100vh;
-webkit-tap-highlight-color:transparent;
-webkit-font-smoothing:antialiased;
}

#particulas {
position:fixed; top:0; left:0; width:100%; height:100%;
pointer-events:none; z-index:0; overflow:hidden;
}

.particula {
position:absolute; top:-50px; color:var(--lavanda-suave);
font-size:18px; animation:cair linear infinite; opacity:0.6;
}

@keyframes cair {
0% { transform:translateY(-50px) rotate(0deg) scale(1); opacity:0.6; }
50% { opacity:0.8; }
100% { transform:translateY(110vh) rotate(360deg) scale(0.3); opacity:0; }
}

#header {
text-align:center; padding:40px 20px 20px; position:relative; z-index:1;
}

.titulo-site {
font-family:'Playfair Display',serif;
font-size:clamp(28px,6vw,42px); font-weight:700;
background:linear-gradient(135deg,var(--lilas-vibrante),var(--lavanda-suave));
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
background-clip:text; margin-bottom:8px;
}

.subtitulo-site {
font-family:'Dancing Script',cursive;
font-size:clamp(16px,3vw,20px); color:var(--lavanda-suave); opacity:0.9;
}

#conteudo-principal {
flex:1; display:flex; flex-direction:column;
align-items:center; justify-content:center; padding:20px;
position:relative; z-index:1;
}

.tela {
display:flex; flex-direction:column; align-items:center;
width:100%; max-width:420px; animation:fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
from { opacity:0; transform:translateY(20px); }
to { opacity:1; transform:translateY(0); }
}

@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.carregamento-spinner {
width:50px; height:50px; border:3px solid var(--roxo-medio);
border-top-color:var(--lilas-vibrante); border-radius:50%;
animation:girar 1s linear infinite; margin-bottom:20px;
}

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

.card-instalacao {
  background: rgba(61, 27, 86, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(212, 176, 232, 0.2);
  text-align: center;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  animation: fadeInUp 0.5s ease;
}

.instalacao-titulo {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: var(--branco-rosado);
  margin-bottom: 8px;
}

.instalacao-texto {
  font-size: 13px;
  color: var(--lavanda-suave);
  line-height: 1.5;
  margin-bottom: 15px;
}

.instalacao-botoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.botao-instalacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--roxo-medio);
  color: var(--branco-rosado);
  border: 1px solid var(--lilas-vibrante);
  border-radius: var(--raio-botao);
  font-family: 'Lora', serif;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transicao);
  min-height: 44px;
}

.botao-instalacao:hover, .botao-instalacao:active {
  background: var(--lilas-vibrante);
  border-color: var(--lavanda-suave);
}

.botao-instalacao:focus-visible {
  outline: 3px solid var(--foco-cor);
  outline-offset: 2px;
}

.botao-icone {
  font-size: 16px;
}

.card-contagem, .card-motivo, .card-bloqueio {
background:var(--roxo-medio); border-radius:24px; padding:40px 30px;
text-align:center; box-shadow:var(--sombra-suave);
border:1px solid rgba(212,176,232,0.15); width:100%;
}

.icone-grande { font-size:60px; margin-bottom:15px; }

.countdown-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 65px;
}

.countdown-value {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 8vw, 48px);
  font-weight: 700;
  color: var(--lilas-vibrante);
  text-shadow: 0 0 10px rgba(155, 95, 192, 0.3);
}

.countdown-label {
  font-size: 12px;
  color: var(--lavanda-suave);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

.countdown-divider {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 7vw, 40px);
  color: var(--lilas-vibrante);
  padding-bottom: 22px;
}

.texto-data { 
font-family:'Playfair Display',serif; font-size:16px; 
color:var(--branco-rosado); opacity:0.8; margin-top:15px; 
}

.coracoes-pequenos { 
color:var(--lilas-vibrante); font-size:20px; 
margin-top:15px; letter-spacing:8px; 
}

.numero-dia {
font-family:'Playfair Display',serif;
font-size:clamp(20px,4vw,26px); font-weight:700;
color:var(--lilas-vibrante); margin-bottom:20px;
}

.texto-motivo {
font-family:'Lora',serif; font-size:clamp(17px,3.8vw,21px);
line-height:1.8; color:var(--branco-rosado); padding:20px 15px; font-style:italic;
border-left: 3px solid var(--lilas-vibrante);
margin: 10px 0;
text-align: left;
}


.indicador-visualizado { 
margin-top:15px; font-size:13px; 
color:var(--lavanda-suave); opacity:0.7; 
}

.contador-juntos {
margin-top:10px; font-size:14px; color:var(--lavanda-suave); opacity:0.8;
text-align:center;
}

.botao-galeria {
margin-top:20px; padding:14px 35px; background:var(--lilas-vibrante);
color:var(--branco-rosado); border:none; border-radius:var(--raio-botao);
font-family:'Lora',serif; font-size:16px; cursor:pointer;
transition:all var(--transicao);
box-shadow:0 4px 15px rgba(155,95,192,0.3);
min-height: 44px; /* Tamanho mínimo de toque */
}

.botao-galeria:hover, .botao-galeria:active {
background:var(--lavanda-suave); color:var(--roxo-profundo); transform:scale(0.98);
}

.botao-galeria:focus-visible {
outline: 3px solid var(--foco-cor);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--roxo-profundo), 0 0 0 5px var(--foco-cor);
}

.botao-voltar {
margin-top:20px; padding:12px 25px; background:transparent;
color:var(--branco-rosado); border:2px solid var(--lavanda-suave);
border-radius:var(--raio-botao); font-family:'Lora',serif;
font-size:14px; cursor:pointer; transition:all var(--transicao);
min-height: 44px; /* Tamanho mínimo de toque */
}

.botao-voltar:hover { 
background:var(--lavanda-suave); color:var(--roxo-profundo); 
}

.botao-voltar:focus-visible {
outline: 3px solid var(--foco-cor);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--roxo-profundo), 0 0 0 5px var(--foco-cor);
}

.contador-rodape { 
margin-top:15px; font-size:14px; 
color:var(--lavanda-suave); opacity:0.7; 
}

.modal {
position:fixed; top:0; left:0; width:100%; height:100%;
background:rgba(30,10,46,0.95); z-index:100;
display:flex; align-items:center; justify-content:center;
padding:20px; animation:fadeIn 0.3s ease;
}

.modal-conteudo {
background:var(--roxo-medio); border-radius:24px;
width:100%; max-width:440px; max-height:85vh; overflow-y:auto;
padding:25px; box-shadow:var(--sombra-suave);
border:1px solid rgba(212,176,232,0.2);
}

.modal-header {
display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;
}

.modal-header h3 { 
font-family:'Playfair Display',serif; font-size:20px; 
color:var(--lilas-vibrante); 
}

.botao-fechar {
background:none; border:none; color:var(--lavanda-suave);
font-size:24px; cursor:pointer; padding:8px 12px;
transition:color var(--transicao);
border-radius: 4px;
min-height: 44px; /* Tamanho mínimo de toque */
min-width: 44px;
}

.botao-fechar:hover { color:var(--branco-rosado); }

.botao-fechar:focus-visible {
outline: 3px solid var(--foco-cor);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--roxo-profundo), 0 0 0 5px var(--foco-cor);
}

.galeria-grid {
display:grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap:12px;
}

.galeria-item {
background:rgba(212,176,232,0.1); border-radius:12px; padding:10px;
text-align:center; cursor:pointer; transition:all var(--transicao);
aspect-ratio:1/1; display:flex; flex-direction:column;
align-items:center; justify-content:center;
border:1px solid rgba(212,176,232,0.15); position:relative;
min-height: 44px; /* Tamanho mínimo de toque */
}

.galeria-item:hover, .galeria-item:active {
background:rgba(212,176,232,0.2); transform:scale(1.03);
}

.galeria-item:focus-visible {
outline: 3px solid var(--foco-cor);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--roxo-profundo), 0 0 0 5px var(--foco-cor);
}

.galeria-item[tabindex="0"] {
cursor: pointer;
}

.galeria-item[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
}

.galeria-item-numero { 
font-family:'Playfair Display',serif; font-size:14px; 
font-weight:700; color:var(--lilas-vibrante); 
}

.galeria-item-icone { font-size:28px; margin:5px 0; }

.galeria-item-bloqueado { opacity:0.5; }

.galeria-item-bloqueado .galeria-item-icone { filter:grayscale(100%); }

.galeria-vazia { 
text-align:center; color:var(--lavanda-suave); padding:30px; 
}

.modal-senha-conteudo { text-align:center; max-width:360px; }

.modal-senha-conteudo p { 
margin:8px 0; color:var(--branco-rosado); 
}

.senha-inputs-container { margin:20px 0; }

.senha-inputs {
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
}

.senha-digit {
width: 50px;
height: 50px;
padding: 8px;
font-size: 24px;
text-align: center;
background: rgba(255,255,255,0.08);
border: 2px solid var(--lilas-vibrante);
border-radius: 12px;
color: var(--branco-rosado);
font-family: 'Playfair Display', serif;
font-weight: 700;
outline: none;
transition: all var(--transicao);
}

.senha-digit:focus {
border-color: var(--lavanda-suave);
box-shadow: 0 0 20px rgba(232, 213, 242, 0.3);
background: rgba(255,255,255,0.12);
}

.senha-digit:focus-visible {
outline: 3px solid var(--foco-cor);
outline-offset: 2px;
}

.senha-digit.erro {
border-color: var(--erro-cor);
background: rgba(255, 107, 107, 0.1);
animation: shake 0.5s ease-in-out;
}

@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}

.botao-desbloquear {
padding:14px 35px; background:var(--lilas-vibrante);
color:var(--branco-rosado); border:none; border-radius:var(--raio-botao);
font-family:'Lora',serif; font-size:16px; cursor:pointer;
margin:10px 0; transition:all var(--transicao);
min-height: 44px; /* Tamanho mínimo de toque */
}

.botao-desbloquear:hover, .botao-desbloquear:active {
background:var(--lavanda-suave); color:var(--roxo-profundo);
}

.botao-desbloquear:focus-visible {
outline: 3px solid var(--foco-cor);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--roxo-profundo), 0 0 0 5px var(--foco-cor);
}

.botao-desbloquear:disabled {
opacity: 0.6;
cursor: not-allowed;
}

.mensagem-erro { 
color: var(--erro-cor); 
font-size: 14px; 
margin: 5px 0; 
font-weight: 500;
}

.texto-dica { 
font-size: 13px; 
color: var(--lavanda-suave); 
opacity: 0.8; 
margin-top: 10px; 
}

#footer {
text-align:center; padding:20px; position:relative; z-index:1;
}

#footer p {
font-family:'Dancing Script',cursive;
font-size:clamp(14px,2.5vw,17px); color:var(--lavanda-suave); opacity:0.7;
}

@media (max-width:480px) {
#header { padding:30px 15px 15px; }
.card-motivo { padding:25px 18px; }
.galeria-grid { 
grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); 
gap:8px; 
}
.modal-conteudo { padding:20px 15px; }
.senha-inputs {
gap: 8px;
}
.senha-digit {
width: 42px;
height: 42px;
font-size: 20px;
}
/* Melhor espaçamento para toque */
.botao-galeria, .botao-voltar, .botao-desbloquear {
padding: 16px 20px;
font-size: 16px;
}
.botao-fechar {
padding: 12px;
font-size: 20px;
}
}

@media (min-width:768px) {
.card-motivo { max-width:500px; padding:40px 35px; }
}

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--roxo-medio); border-radius:4px; }

::selection { background:var(--lilas-vibrante); color:var(--branco-rosado); }

/* --- ONBOARDING / TELA DE PRIMEIRO ACESSO --- */
.modal-onboarding {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(30, 10, 46, 0.95);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.4s ease;
}

.onboarding-conteudo {
  background: var(--roxo-medio);
  border-radius: 28px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px 25px;
  box-shadow: 0 15px 50px rgba(0,0,0,0.5);
  border: 1px solid rgba(212, 176, 232, 0.25);
  text-align: center;
  position: relative;
}

.onboarding-cabecalho {
  margin-bottom: 20px;
}

.onboarding-coracao {
  font-size: 50px;
  display: inline-block;
  animation: pulsar 2s infinite ease-in-out;
}

@keyframes pulsar {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 10px var(--lilas-vibrante)); }
}

#onboarding-titulo {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: var(--branco-rosado);
  margin-top: 10px;
}

.onboarding-texto {
  font-size: 14px;
  color: var(--lavanda-suave);
  line-height: 1.6;
  margin-bottom: 25px;
}

.onboarding-passos {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
  text-align: left;
}

.onboarding-passo {
  background: rgba(30, 10, 46, 0.4);
  border-radius: 18px;
  padding: 15px;
  border: 1px solid rgba(212, 176, 232, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onboarding-passo-info {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.passo-numero {
  width: 28px;
  height: 28px;
  background: var(--lilas-vibrante);
  color: var(--branco-rosado);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(155, 95, 192, 0.4);
}

.passo-titulo {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  color: var(--branco-rosado);
  margin-bottom: 4px;
}

.passo-descricao {
  font-size: 12px;
  color: var(--lavanda-suave);
  line-height: 1.4;
  opacity: 0.9;
}

.botao-onboarding-acao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--roxo-medio);
  color: var(--branco-rosado);
  border: 1px solid var(--lilas-vibrante);
  border-radius: var(--raio-botao);
  font-family: 'Lora', serif;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transicao);
  min-height: 44px;
  width: 100%;
}

.botao-onboarding-acao:hover, .botao-onboarding-acao:active {
  background: var(--lilas-vibrante);
  border-color: var(--lavanda-suave);
}

.botao-onboarding-acao.concluido {
  background: rgba(78, 205, 196, 0.15);
  border-color: var(--sucesso-cor);
  color: var(--sucesso-cor);
  cursor: default;
  font-weight: bold;
}

.onboarding-dica {
  font-size: 11px;
  color: var(--lavanda-suave);
  background: rgba(232, 213, 242, 0.08);
  padding: 10px;
  border-radius: 8px;
  line-height: 1.4;
  border-left: 2px solid var(--lilas-vibrante);
}

.botao-onboarding-concluir {
  padding: 14px 35px;
  background: linear-gradient(135deg, var(--lilas-vibrante), #b07cd8);
  color: var(--branco-rosado);
  border: none;
  border-radius: var(--raio-botao);
  font-family: 'Lora', serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transicao);
  width: 100%;
  box-shadow: 0 6px 20px rgba(155, 95, 192, 0.4);
  min-height: 44px;
}

.botao-onboarding-concluir:hover, .botao-onboarding-concluir:active {
  transform: scale(0.98);
  box-shadow: 0 4px 15px rgba(155, 95, 192, 0.3);
  filter: brightness(1.1);
}

.onboarding-ajuda {
  font-size: 11px;
  color: var(--lavanda-suave);
  opacity: 0.6;
  margin-top: 10px;
}

/* --- CRONÔMETRO PRÓXIMO DIA (TELA MOTIVOS) --- */
.cronometro-proximo-dia {
  margin-top: 20px;
  padding: 12px 15px;
  background: rgba(155, 95, 192, 0.1);
  border: 1px dashed rgba(155, 95, 192, 0.3);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.proximo-dia-label {
  font-size: 11px;
  color: var(--lavanda-suave);
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.proximo-dia-valor {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--lilas-vibrante);
  text-shadow: 0 0 8px rgba(155, 95, 192, 0.2);
}

/* --- TEMAS DE CORES DINÂMICAS --- */
body.tema-manha {
  --roxo-profundo: #1E072D;
  --roxo-medio: #3E164D;
  --lilas-vibrante: #D39BE3;
  --lavanda-suave: #F0E2F6;
  --branco-rosado: #FFF8FF;
  background: linear-gradient(180deg, #1E072D 0%, #351240 50%, #4D215B 100%);
}

body.tema-tarde {
  --roxo-profundo: #2A0934;
  --roxo-medio: #4E1B5A;
  --lilas-vibrante: #FF8E53; /* Toque quente de crepúsculo */
  --lavanda-suave: #FFD2A8;
  --branco-rosado: #FFF3E5;
  background: linear-gradient(180deg, #2A0934 0%, #5C1952 60%, #7E284E 100%);
}

body.tema-noite {
  --roxo-profundo: #1E0A2E;
  --roxo-medio: #3D1B56;
  --lilas-vibrante: #9B5FC0;
  --lavanda-suave: #E8D5F2;
  --branco-rosado: #F9F0FF;
  background: linear-gradient(180deg, #1E0A2E 0%, #170724 50%, #0E0317 100%);
}

/* --- RASPADINHA (SCRATCH CARD) --- */
.texto-motivo-wrapper {
  position: relative;
  width: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  overflow: hidden;
  border-radius: 12px;
}

.scratch-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 10;
  border-radius: 12px;
  touch-action: none; /* Impede rolagem na tela ao raspar no celular */
}

/* --- PAINEL DE REAÇÕES (DIÁRIO) --- */
.painel-reacoes {
  margin-top: 15px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  animation: fadeInUp 0.5s ease;
}

.reacoes-titulo {
  font-size: 13px;
  color: var(--lavanda-suave);
  opacity: 0.8;
  margin-bottom: 8px;
}

.reacoes-botoes {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.botao-reacao {
  font-size: 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 176, 232, 0.15);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transicao);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  outline: none;
}

.botao-reacao:hover, .botao-reacao:active {
  transform: scale(1.15);
  background: rgba(155, 95, 192, 0.2);
  border-color: var(--lilas-vibrante);
}

.botao-reacao.ativa {
  background: rgba(155, 95, 192, 0.4);
  border-color: var(--lavanda-suave);
  transform: scale(1.2);
  box-shadow: 0 0 15px rgba(155, 95, 192, 0.5);
}

.botao-reacao:focus-visible {
  outline: 3px solid var(--foco-cor);
  outline-offset: 2px;
}

/* --- CONSTELAÇÃO DO AMOR (GALERIA) --- */
.galeria-grid {
  background: radial-gradient(circle, #250b3a 0%, #0c0214 100%) !important;
  position: relative;
  padding: 15px;
  border-radius: 16px;
  overflow-y: auto;
  min-height: 250px;
}

.galeria-item {
  z-index: 1; /* Acima do canvas */
  border-radius: 50% !important; /* Estrelas redondas */
  background: rgba(30, 10, 46, 0.7);
  border: 1.5px solid rgba(212, 176, 232, 0.35);
  box-shadow: 0 0 10px rgba(155, 95, 192, 0.3);
  aspect-ratio: 1/1;
  transition: all var(--transicao);
}

.galeria-item:hover, .galeria-item:active {
  background: rgba(155, 95, 192, 0.35);
  border-color: var(--lavanda-suave);
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 18px rgba(155, 95, 192, 0.6);
}

.galeria-item-bloqueado {
  background: rgba(15, 5, 20, 0.85);
  border-color: rgba(212, 176, 232, 0.1);
  box-shadow: none;
}

/* Estrela pulsante dourada para o dia atual */
.galeria-item-atual {
  border-color: #FFD700 !important;
  box-shadow: 0 0 20px #FFD700, 0 0 10px rgba(255, 215, 0, 0.4);
  animation: pulsarEstrelaAtual 1.5s infinite alternate ease-in-out;
}

@keyframes pulsarEstrelaAtual {
  from {
    transform: scale(1);
    box-shadow: 0 0 10px #FFD700;
  }
  to {
    transform: scale(1.08);
    box-shadow: 0 0 25px #FFD700, 0 0 12px rgba(255, 215, 0, 0.5);
  }
}

/* --- BOTOES FLUTUANTES E POTE DE RECORDACÕES --- */
.botao-flutuante-pote {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 56px;
  height: 56px;
  background: var(--roxo-medio);
  border: 1.5px solid var(--lilas-vibrante);
  border-radius: 50%;
  color: var(--branco-rosado);
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  box-shadow: 0 4px 20px rgba(155, 95, 192, 0.5);
  transition: all var(--transicao);
  animation: flutuarBotaoPote 3s ease-in-out infinite alternate;
  outline: none;
}

@keyframes flutuarBotaoPote {
  0% { transform: translateY(0); box-shadow: 0 4px 15px rgba(155, 95, 192, 0.4); }
  100% { transform: translateY(-8px); box-shadow: 0 8px 25px rgba(155, 95, 192, 0.6); }
}

.botao-flutuante-pote:hover, .botao-flutuante-pote:active {
  background: var(--lilas-vibrante);
  border-color: var(--lavanda-suave);
  transform: scale(1.1);
}

.botao-flutuante-pote:focus-visible {
  outline: 3px solid var(--foco-cor);
  outline-offset: 2px;
}

.modal-pote-conteudo {
  text-align: center;
  max-width: 380px;
}

.pote-animacao-container {
  margin: 15px 0;
  perspective: 1000px;
}

.pote-grande {
  font-size: 80px;
  display: inline-block;
  transition: transform 0.1s;
}

.pote-grande.chacoalhar {
  animation: chacoalharPote 0.5s ease-in-out;
}

@keyframes chacoalharPote {
  0%, 100% { transform: rotate(0) scale(1); }
  15% { transform: rotate(-15deg) scale(1.05); }
  30% { transform: rotate(12deg) scale(1.05); }
  45% { transform: rotate(-10deg) scale(1.05); }
  60% { transform: rotate(8deg) scale(1.05); }
  75% { transform: rotate(-4deg) scale(1.02); }
  90% { transform: rotate(2deg) scale(1.01); }
}

.pote-conteudo-bilhete {
  background: #FFFDF0;
  border: 1px solid #E6D2B5;
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
  color: #4D2C0C;
  font-family: 'Dancing Script', cursive;
  font-size: 21px;
  line-height: 1.5;
  text-align: center;
  box-shadow: inset 0 0 15px rgba(230, 210, 181, 0.3), 0 6px 15px rgba(0, 0, 0, 0.15);
  animation: fadeInUp 0.4s ease;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.botao-pote-sortear {
  padding: 12px 25px;
  background: var(--lilas-vibrante);
  color: var(--branco-rosado);
  border: none;
  border-radius: var(--raio-botao);
  font-family: 'Lora', serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transicao);
  width: 100%;
  box-shadow: 0 4px 12px rgba(155, 95, 192, 0.3);
  min-height: 44px;
}

.botao-pote-sortear:hover, .botao-pote-sortear:active {
  background: var(--lavanda-suave);
  color: var(--roxo-profundo);
  transform: scale(0.98);
}

.botao-pote-sortear:focus-visible {
  outline: 3px solid var(--foco-cor);
  outline-offset: 2px;
}

/* --- BEIJO VIRTUAL --- */
.beijo-container {
  margin: 20px 0 10px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.botao-enviar-beijo {
  background: rgba(255, 107, 107, 0.12);
  color: #FF6B6B;
  border: 1.5px solid #FF6B6B;
  border-radius: var(--raio-botao);
  padding: 10px 25px;
  font-family: 'Lora', serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transicao);
  min-height: 44px;
  box-shadow: 0 4px 10px rgba(255, 107, 107, 0.1);
  outline: none;
}

.botao-enviar-beijo:hover, .botao-enviar-beijo:active {
  background: #FF6B6B;
  color: #FFF;
  transform: scale(1.04);
  box-shadow: 0 6px 15px rgba(255, 107, 107, 0.3);
}

.botao-enviar-beijo:focus-visible {
  outline: 3px solid var(--foco-cor);
  outline-offset: 2px;
}

.contador-beijos-texto {
  font-size: 12px;
  color: var(--lavanda-suave);
  opacity: 0.8;
  letter-spacing: 0.5px;
}

/* Beijo Flutuante (Efeito Físico) */
.beijo-flutuante {
  position: fixed;
  pointer-events: none;
  font-size: 32px;
  z-index: 1000;
  animation: subirBeijo 1.2s ease-out forwards;
}

@keyframes subirBeijo {
  0% {
    transform: translate(-50%, -50%) scale(0.6) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(calc(-50% + 20px), -100px) scale(1.2) rotate(-10deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(calc(-50% - 20px), -220px) scale(1.6) rotate(15deg);
    opacity: 0;
  }
}