:root{
  /* Festive palette: deep green, night blue, warm card, gold accent */
  --bg1:#072b1f; /* deep green */
  --bg2:#08152a; /* night blue */
  --card:#fff9f0; /* warm cream */
  --accent:#d4af37; /* gold */
  --accent-2:#b71c1c; /* red for subtle highlights */
  --muted:#6b7376;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Montserrat',system-ui,Arial,sans-serif;background:linear-gradient(180deg,var(--bg1),var(--bg2));color:#fff}
.scene{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px}
.card{position:relative;z-index:1;max-width:900px;background:linear-gradient(180deg,rgba(255,249,240,0.95),rgba(255,249,240,0.9));backdrop-filter: blur(4px);border-radius:16px;padding:34px 40px;box-shadow:0 10px 40px rgba(2,6,23,0.45);border:1px solid rgba(0,0,0,0.06);color:#10221a;transform:translateY(12px);animation:card-in 900ms ease both}
.card h1{font-weight:800;margin:0 0 16px 0;font-size:1.8rem;color:var(--accent-2)}
.card p{color:rgba(16,34,26,0.9);line-height:1.6;margin:12px 0}
.card .highlight{background:linear-gradient(90deg,rgba(212,175,55,0.12),transparent);padding:12px;border-radius:8px}
.signature{margin-top:18px;font-weight:600;color:var(--accent-2)}

.audio-native{margin-top:14px}
.audio-native audio{width:100%;max-width:480px}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Autoplay overlay styles */
.autoplay-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(rgba(2,6,10,0.6),rgba(2,6,10,0.6));z-index:50}
.autoplay-overlay[aria-hidden="false"]{display:flex}
.autoplay-card{background:var(--card);color:#10221a;padding:18px 22px;border-radius:12px;box-shadow:0 12px 40px rgba(2,6,23,0.5);text-align:center;max-width:420px}
.autoplay-card p{margin:0 0 12px}
.autoplay-card .play-btn{background:linear-gradient(90deg,var(--accent),#f1c65b);border:none;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:700}

/* Navigation buttons */
.nav-buttons{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.nav-link{background:linear-gradient(90deg,var(--accent),#f1c65b);border:none;color:#08120a;padding:10px 14px;border-radius:8px;font-weight:700;text-decoration:none;cursor:pointer;display:inline-block;transition:transform 0.2s}
.nav-link:hover{transform:scale(1.05)}
.nav-link:focus{outline:3px solid rgba(212,175,55,0.2)}

/* Home page styles */
.home-card{padding:28px 24px!important}
.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:20px 0}
.home-card-item{background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));border:1px solid rgba(0,0,0,0.08);border-radius:10px;padding:18px;color:rgba(16,34,26,0.9)}
.home-card-item h2{font-size:1.4rem;margin:0 0 10px;color:var(--accent-2)}
.home-card-item p{margin:0 0 12px;line-height:1.6}
.btn-primary{display:inline-block;background:linear-gradient(90deg,var(--accent),#f1c65b);color:#08120a;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:700;border:none;cursor:pointer;transition:transform 0.2s}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary:focus{outline:3px solid rgba(212,175,55,0.2)}
.footer-text{margin-top:24px;text-align:center;font-size:0.95rem;color:rgba(16,34,26,0.85)}

/* Little decorative tree on the left */

.card::before{content:"";position:absolute;left:-90px;top:-30px;width:160px;height:200px;background:radial-gradient(circle at 50% 30%,#2b6e2b,#18411f);clip-path:polygon(50% 0, 70% 30%, 60% 30%, 80% 60%, 65% 60%, 90% 100%, 10% 100%, 35% 60%, 20% 60%, 40% 30%, 30% 30%);z-index:0;opacity:0.55;pointer-events:none;} 

/* Ensure card content sits above decorations */
.card > *{position:relative;z-index:1}

@media (max-width:720px){
  .card{padding:28px 20px;margin:12px;border-radius:12px}
  .card h1{font-size:1.4rem}
}

/* Mobile refinements for buttons, widgets and spacing */
@media (max-width:720px){
  .nav-buttons{flex-direction:column;align-items:stretch}
  .nav-link, .btn-primary, .dedicatorias-widget-link, .btn {
    display:block !important;
    width:100% !important;
    padding:12px 14px !important;
    text-align:center !important;
    font-size:1rem !important;
    border-radius:10px !important;
  }

  /* Garantir que o wrapper com flex deixa o botão ocupar espaço */
  div[style*="display:flex"] > .dedicatorias-widget-link,
  div[style*="display:flex"] > .btn-primary {
    flex: 1;
    max-width: 100%;
  }

  .dedicatorias-widget-grid {
    grid-template-columns: 1fr;
    max-height: none;
    overflow: visible;
  }

  .dedicatoria-widget-item-texto,
  .dedicatoria-texto {
    font-size: 0.98rem;
    line-height:1.5;
  }

  /* esconder decoração lateral em telas pequenas para evitar overflow */
  .card::before{display:none}

  /* aumentar espaçamento geral dentro do card */
  .card{padding:20px}
}

@media (max-width:420px){
  .card{padding:16px}
  .card h1{font-size:1.15rem}

  /* tornar botões com toque confortável em telefones */
  .nav-link, .btn-primary, .dedicatorias-widget-link, .btn {
    padding:14px 16px;
    font-size:1rem;
  }

  /* garantir que o botão flutuante de áudio não cubra conteúdo importante */
  #audio-control-btn{right:14px;bottom:18px;width:56px;height:56px}
}

/* Card entrance animation */
@keyframes card-in{
  from{opacity:0;transform:translateY(28px) scale(.995)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Snowflakes */
#snow{position:fixed;left:0;top:0;right:0;bottom:0;pointer-events:none;z-index:0;overflow:hidden}
.snowflake{position:absolute;top:-10px;color:#fff;opacity:0.9;font-size:12px;will-change:transform;animation-name:fall, sway;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes fall{
  to{transform:translateY(110vh)}
}
@keyframes sway{
  0%{transform:translateX(0)}
 50%{transform:translateX(20px)}
 100%{transform:translateX(-10px)}
}

/* subtle festive lights at top */
.scene::after{content:"";position:absolute;left:0;right:0;top:0;height:80px;background:linear-gradient(180deg,rgba(4,10,6,0.18),transparent);pointer-events:none;z-index:0}

/* Widget de Dedicatórias */
.dedicatorias-widget {
  background: rgba(255, 249, 240, 0.95);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 2rem;
  border-left: 4px solid #d4af37;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.dedicatorias-widget h3 {
  color: #072b1f;
  font-size: 1.1rem;
  margin: 0 0 1rem 0;
  text-align: center;
}

.dedicatorias-widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  max-height: 400px;
  overflow-y: auto;
}

.dedicatoria-widget-item {
  background: rgba(255, 255, 255, 0.9);
  padding: 1rem;
  border-radius: 8px;
  border-left: 3px solid #d4af37;
  color: #1a3a30;
  font-size: 0.9rem;
}

.dedicatoria-widget-item-nome {
  font-weight: 600;
  color: #072b1f;
  margin-bottom: 0.5rem;
}

.dedicatoria-widget-item-texto {
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  color: #1a3a30;
}

.dedicatoria-widget-item-data {
  font-size: 0.8rem;
  color: #888;
  text-align: right;
}

.dedicatorias-widget-empty {
  text-align: center;
  color: #888;
  padding: 1rem;
  font-size: 0.95rem;
}

.dedicatorias-widget-link {
  display: inline-block;
  margin-top: 1rem;
  background: linear-gradient(135deg, #d4af37 0%, #a68a2e 100%);
  color: #072b1f;
  padding: 0.7rem 1.2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  text-align: center;
}

.dedicatorias-widget-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.3);
}