/* Configurações Gerais */
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: radial-gradient(circle, #fff0f5 0%, #ffe6e6 100%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    color: #8c2a52;
}

#main-container {
    width: 100%;
    max-width: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* --- 1. Tela de Início --- */
#welcome-screen {
    text-align: center;
    position: absolute;
    z-index: 10;
}

/* Wrapper centralizado */
#heart-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-bottom: 15px;
}

/* Coração simples e centralizado para evitar cortes */
.heart-simple {
    font-size: 80px; /* Tamanho do emoji */
    animation: heartbeat 1.3s infinite;
    transition: all 0.5s ease-in-out;
    color: #d63384;
}

/* Animação do Coração */
@keyframes heartbeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

#welcome-screen p {
    font-size: 1.1rem;
    color: #c4407b;
    margin: 0;
}

/* Transição de desaparecimento */
#heart-wrapper.fade-out {
    opacity: 0;
    transform: scale(0) translateY(-100px);
}

/* --- 2. Área do Jardim --- */
.hidden {
    display: none !important;
}

#garden {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    opacity: 0;
    animation: fadeIn 1s forwards 0.5s;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Área da Árvore e o NOVO Coração de Pétalas */
#tree-container {
    position: relative;
    width: 400px; /* Aumentado para acomodar um coração bonito */
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Tronco começa embaixo */
}

/* Tronco da Árvore (Atualizado) */
.tree-trunk {
    width: 25px;
    height: 180px; /* Encurtado de 250px para 180px */
    background-color: #6F4E37;
    border-radius: 10px 10px 0 0;
    z-index: 1;
}

/* Container para a copa de coração (Atualizado) */
#petals-canopy {
    position: absolute;
    top: -50px; /* Movido para -50px para alinhar o coração no topo */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 300px;
    z-index: 2;
}
/* Estilização da Pétala */
.petal {
    position: absolute;
    border-radius: 50px 0 50px 0; /* Formato de folha/pétala */
    opacity: 0.8;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* Cores das pétalas (rosa magenta) */
.petal.type-1 { background-color: #ff69b4; } 
.petal.type-2 { background-color: #ffb6c1; } 
.petal.type-3 { background-color: #d63384; } 

/* --- Info Panel e Relógio (inalterados) --- */
.info-panel { text-align: center; margin-top: 20px; }
h1 { font-size: 1.3rem; font-weight: 300; }
.timer-container { background: white; padding: 15px 25px; border-radius: 30px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); display: inline-block; border: 1px solid #ffccde; }
.timer-container h2 { font-size: 0.8rem; margin: 0 0 10px; font-weight: 600; }
#clock { font-size: 0.9rem; color: #c4407b; }
#clock span { font-weight: bold; font-size: 1.1rem; }

/* Container das fotos */
.photo-gallery {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Permite clicar no coração mesmo com fotos na frente */
    z-index: 5;
}

/* Estilo comum para todas as fotos */
.side-photo {
    position: absolute;
    width: 220px; /* Você pode ajustar o tamanho aqui */
    height: 280px;
    object-fit: cover;
    border: 5px solid white;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    opacity: 0; /* Começam invisíveis */
    transition: opacity 1s ease-in;
}

/* Posicionamento Individual */
.left-1 { top: 10%; left: 5%; transform: rotate(-10deg); }
.left-2 { bottom: 15%; left: 8%; transform: rotate(5deg); }
.right-1 { top: 12%; right: 5%; transform: rotate(12deg); }
.right-2 { bottom: 10%; right: 7%; transform: rotate(-8deg); }

/* Classe para mostrar as fotos via JS */
.side-photo.show {
    opacity: 1;
}

/* --- OTIMIZAÇÃO PARA MOBILE (FOTOS MENORES) --- */
@media (max-width: 768px) {
    .side-photo {
        width: 100px;   /* Reduzi de 120px para 100px */
        height: 135px;  /* Mantive a proporção retangular, mas menor */
        border-width: 3px; /* Borda mais fina para combinar com o tamanho */
    }

    /* Ajuste de posição para não ficarem muito no meio */
    .left-1 { top: 5%; left: 2%; }
    .left-2 { bottom: 22%; left: 2%; }
    .right-1 { top: 5%; right: 2%; }
    .right-2 { bottom: 22%; right: 2%; }

    /* Garante que o container da árvore não empurre as fotos */
    #tree-container {
        width: 250px;
        height: 300px;
    }
}

    .tree-trunk {
        height: 120px; /* Tronco menor no celular */
        width: 15px;
    }

    #petals-canopy {
        top: -30px;
    }

    /* Ajusta o tamanho dos textos */
    h1 { font-size: 1.1rem; }
    .timer-container { padding: 10px 15px; }
    #clock { font-size: 0.8rem; }
    #clock span { font-size: 1rem; }