* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    background: #000;
    color: #fff;
    font-family: 'Montserrat', Arial, sans-serif;
    overflow: hidden;
}

#heart {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.conteudo {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 13vh; /* sobrescrito pelo JS em função do coração */
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    text-align: center;
    z-index: 2;
    padding: 0 20px;
}

.saudacao {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-weight: 300;
    font-size: clamp(40px, 9.5vw, 72px);
    letter-spacing: 0.02em;
    color: #f6e9ec;
    text-shadow: 0 0 30px rgba(255, 40, 70, 0.25);
    line-height: 1.1;
    opacity: 0;
}

.subtitulo {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(18px, 3vw, 26px);
    color: rgba(255, 255, 255, 0.75);
    opacity: 0;
}

.btn-iniciar {
    display: inline-block;
    padding: 18px 0;
    width: auto; /* largura mínima/altura/fonte ajustadas pelo JS em proporção ao coração */
    text-align: center;
    border: 1.5px solid #ff3355;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.09em;
    white-space: nowrap;
    box-sizing: border-box;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(255, 45, 85, 0.55), inset 0 0 12px rgba(255, 45, 85, 0.15);
    transition: background .3s, box-shadow .3s, transform .2s;
    opacity: 0;
}

.btn-iniciar:hover {
    background: rgba(255, 45, 85, 0.18);
    box-shadow: 0 0 32px rgba(255, 45, 85, 0.9), inset 0 0 16px rgba(255, 45, 85, 0.3);
    transform: translateY(-2px);
}

/* texto e botão só aparecem depois que o coração se forma (classe adicionada pelo JS) */
body.formado .saudacao  { animation: aparecer 1.4s ease-out both; }
body.formado .subtitulo { animation: aparecer 1.4s 0.3s ease-out both; }
body.formado .btn-iniciar { animation: aparecer 1.4s 0.5s ease-out both; }

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

.mensagem-misterio {
    position: fixed;
    left: 50%;
    bottom: 17vh;
    z-index: 2;
    width: max-content;
    max-width: 85vw;
    color: rgba(255, 225, 232, 0.58);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(16px, 2vw, 21px);
    font-style: italic;
    letter-spacing: 0.08em;
    pointer-events: none;
    animation: misterio 6.8s ease both;
}

@keyframes misterio {
    0%, 20% { opacity: 0; transform: translate(-50%, 10px); }
    38%, 68% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -7px); }
}

.voice-retry {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 5;
    padding: 9px 14px;
    border: 1px solid rgba(255, 65, 100, 0.42);
    border-radius: 999px;
    background: rgba(10, 0, 3, 0.62);
    color: rgba(255, 235, 240, 0.72);
    font: 500 10px 'Montserrat', Arial, sans-serif;
    letter-spacing: 0.13em;
    cursor: pointer;
    backdrop-filter: blur(8px);
    animation: aparecer 0.8s ease both;
}

.voice-retry:hover,
.voice-retry:focus-visible {
    color: #fff;
    border-color: #ff3355;
    box-shadow: 0 0 18px rgba(255, 45, 85, 0.35);
    outline: none;
}

body.voz-ativa #heart { filter: saturate(1.08) brightness(1.04); }

.voice-picker { position:fixed; top:18px; right:18px; z-index:20; font-family:'Montserrat',Arial,sans-serif; }
.voice-picker-toggle { float:right; padding:10px 15px; border:1px solid rgba(255,62,99,.65); border-radius:999px; background:rgba(15,0,5,.82); color:#ffeef2; font:600 10px 'Montserrat',Arial,sans-serif; letter-spacing:.12em; cursor:pointer; box-shadow:0 0 18px rgba(255,34,76,.25); backdrop-filter:blur(12px); }
.voice-picker-panel { clear:both; width:min(310px,calc(100vw - 28px)); margin-top:46px; padding:18px; border:1px solid rgba(255,62,99,.35); border-radius:20px; background:rgba(10,0,4,.93); box-shadow:0 16px 55px rgba(0,0,0,.7),0 0 28px rgba(255,30,70,.14); backdrop-filter:blur(16px); }
.voice-picker-title { color:#fff1f4; font:500 20px 'Cormorant Garamond',Georgia,serif; }
.voice-picker-help { margin:3px 0 13px; color:rgba(255,255,255,.5); font-size:10px; }
.voice-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.voice-option { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:0 11px; border:1px solid rgba(255,255,255,.12); border-radius:11px; background:rgba(255,255,255,.035); color:#fce9ed; font:500 12px 'Montserrat',Arial,sans-serif; cursor:pointer; }
.voice-option small { color:#ff6682; font-size:8px; letter-spacing:.08em; }
.voice-option:hover,.voice-option:focus-visible,.voice-option.is-playing { border-color:#ff3355; background:rgba(255,35,76,.13); box-shadow:0 0 15px rgba(255,35,76,.18); outline:none; }
@media (max-width:520px) { .voice-picker { top:10px; right:10px; } .voice-picker-panel { margin-top:42px; padding:14px; } }