/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    background-color: #4a9e9e; /* Fundo verde-azulado */
    font-family: 'Signika', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 150px;
    padding: 20px;
}
/* Botão Pular */
.pular {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #fff6e0;
    color: #4d2626;
    border: 2px solid #4d2626;
    padding: 6px 16px;
    border-radius: 12px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}

.pular span {
    font-size: 10px;
    text-decoration: none;
}

.pular a {
    color: #4d2626;
    text-decoration: none;
}

/* Container Principal */
.container {
    text-align: center;
    width: 100%;
    max-width: 800px;
    padding: 20px;
}

/* Títulos */
.header {
    margin-bottom: 30px;
}

.title-main {
    font-family: 'Fredoka One', cursive;
    color: #e6dfb8;
    font-size: 42px;
    line-height: 1;
    text-shadow: 2px 2px 0px #3c6e6e;
    letter-spacing: 1px;
}

.title-sub {
    font-family: 'Fredoka One', cursive;
    color: transparent;
    -webkit-text-stroke: 1.5px #e6dfb8;
    font-size: 38px;
    line-height: 1;
    margin-top: -2px;
    letter-spacing: 2px;
}

.subtitle {
    color: #571e1e;
    font-size: 30px;
    font-weight: bold;
    margin-top: 15px;
}

/* Carrossel de Avatares */
.carousel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 40px auto;
    width: 100%;
    max-width: 650px;
}

.avatar-list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 160px;
    position: relative;
}

/* Estilização Geral dos Avatares */
.avatar {
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 3px solid #4d1c1c;
    position: absolute;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

/* Avatar Central (Destaque) */
.main-avatar {
    width: 220px;
    height: 220px;
    z-index: 10;
    border: 4px solid #571e1e;
}

/* Efeito de sobreposição lateral (3 camadas para cada lado) */
.side-1 { width: 180px; height: 180px; z-index: 8; }
.side-2 { width: 160px; height: 160px; z-index: 6; }
.side-3 { width: 135px; height: 135px; z-index: 4; }
.side-4 { width: 110px; height: 110px; z-index: 2; }

/* Posicionamentos manuais simulando o empilhamento horizontal da imagem */
.avatar-list .avatar:nth-child(1) { transform: translateX(-220px); opacity: 0.95; }
.avatar-list .avatar:nth-child(2) { transform: translateX(-170px); opacity:0.95; }
.avatar-list .avatar:nth-child(3) { transform: translateX(-100px); opacity: 0.95; }


.avatar-list .avatar:nth-child(5) { transform: translateX(100px); opacity: 0.95; }
.avatar-list .avatar:nth-child(6) { transform: translateX(170px); opacity: 0.95; }
.avatar-list .avatar:nth-child(7) { transform: translateX(220px); opacity: 0.95; }


/* Setas do Carrossel */
.flexa {
    background: none;
    border: none;
    color: #571e1e;
    font-size: 54px;
    cursor: pointer;
    position: absolute;
    padding: 10px;
}

.flexa-esquerda { left: -100px; }
.flexa-direita { right: -100px; }

/* Botões de Ação Inferiores */
.actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.botao-red {
    background-color: #B9333B;
    color: #FFFDC8;
    border: none;
    padding: 1px 7px;
    font-size: 27px;
    font-weight: bold;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 360px;
    justify-content: center;
    font-family: serif; 
}

.botao-red:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0px #571e1e;
}

.botao-red img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 80px;
    padding: 10px;
}

/* Botão Confirmar */
.confirm {
    background-color: #3349B9;
    padding: 12px 66px;
    font-size: 28px;
    border-radius: 20px;
    margin-top: 15px;
    border: none;
    font-family: serif; 
}

.confirm a {
    color: #FFFDC8;
    text-decoration: none;
    font-weight: bold;
}

.confirm:hover {
    color: #FFFDC8;
    text-decoration: none;
    font-weight: bold;
}

.confirm:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0px #1e2557;
}


/*RESPONSIVIDADE*/
/* --- RESPONSIVIDADE PARA SMARTPHONES MÉDIOS (480px) --- */
@media (min-width: 320px) and (max-width: 425px) {
    body {
        overflow-y: auto !important;
        padding: 15px;
    }

    /* Ajusta o container para aproveitar melhor os 480px de largura */
    .container {
        width: 100% !important;
        max-width: 440px !important;
        margin: 0 auto;
        padding: 0;
    }

    /* Dá espaço no topo para o título e abre espaço para o botão Pular */
    .header {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
        padding-top: 25px; 
    }

    /* Mantém o botão Pular bem colado no topo direito da tela */
    .pular {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        margin: 0 !important;
        font-size: 14px !important;
        padding: 5px 12px !important;
        z-index: 9999 !important;
    }

    .subtitle {
        font-size: 22px !important;
        margin-top: 10px;
    }

    .header img {
        height: 85px !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* --- CARROSSEL PARA 480px --- */
    /* Como a tela é maior, as fotos ganham mais espaço para respirar */
    .carousel-container {
        margin: 30px auto !important;
        width: 100% !important;
        max-width: 360px !important; 
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .avatar-list {
        height: 160px !important;
        width: 240px !important; /* Mais largo que no de 320px para mostrar mais as fotos das pontas */
    }

    /* Proporções dos Avatares para telas de 480px */
    .avatar-list .avatar:nth-child(1) { width: 50px; height: 50px; transform: translateX(-95px); opacity: 0.1; pointer-events: none; }
    .avatar-list .avatar:nth-child(2) { width: 70px; height: 70px; transform: translateX(-75px); opacity: 0.5; }
    .avatar-list .avatar:nth-child(3) { width: 95px; height: 95px; transform: translateX(-40px); opacity: 0.8; z-index: 8; }
    
    /* Avatar Central (Destaque) */
    .avatar-list .avatar:nth-child(4) { width: 130px; height: 130px; transform: translateX(0); opacity: 1; z-index: 10; }
    
    .avatar-list .avatar:nth-child(5) { width: 95px; height: 95px; transform: translateX(40px); opacity: 0.8; z-index: 8; }
    .avatar-list .avatar:nth-child(6) { width: 70px; height: 70px; transform: translateX(75px); opacity: 0.5; }
    .avatar-list .avatar:nth-child(7) { width: 50px; height: 50px; transform: translateX(-95px); opacity: 0.1; pointer-events: none; }

    /* Setas bem posicionadas nas bordas livres do carrossel */
    .flexa {
        font-size: 32px !important;
        z-index: 15;
        position: absolute !important;
        padding: 5px !important;
    }
    .flexa-esquerda { left: -20px !important; }
    .flexa-direita { right: -20px !important; }

    /* --- BOTÕES INFERIORES --- */
    .actions {
        width: 100% !important;
        gap: 15px;
        margin-top: 25px;
    }

    /* Botões vermelhos ligeiramente maiores e fáceis de tocar */
    .botao-red {
        width: 100% !important;
        max-width: 320px !important;
        font-size: 18px !important;
        padding: 10px !important;
        height: 50px !important; 
    }

    .botao-red img {
        height: 28px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Botão de confirmação azul */
    .confirm {
        width: 100% !important;
        max-width: 320px !important;
        padding: 12px 0 !important;
        font-size: 20px !important;
        margin-top: 10px !important;
    }
}


@media (min-width: 426px) and (max-width: 768px) {
    body {
        overflow-y: auto !important;
        padding: 20px;
    }

    /* Expande o container para usar melhor a largura de 600px */
    .container {
        width: 100% !important;
        max-width: 560px !important;
        margin: 0 auto;
        padding: 0;
    }

    /* Cabeçalho centralizado com folga */
    .header {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 25px;
        padding-top: 20px; 
    }

    /* Mantém o botão Pular firme no canto superior direito */
    .pular {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        margin: 0 !important;
        font-size: 15px !important;
        padding: 6px 14px !important;
        z-index: 9999 !important;
    }

    .subtitle {
        font-size: 24px !important;
        margin-top: 12px;
    }

    .header img {
        height: 100px !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* --- CARROSSEL PARA 600px --- */
    /* Abrimos espaço para que mais avatares apareçam sem amassar */
    .carousel-container {
        margin: 35px auto !important;
        width: 100% !important;
        max-width: 480px !important; 
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .avatar-list {
        height: 200px !important;
        width: 340px !important; /* Bem mais amplo para mostrar os rostos nas laterais */
    }

    /* Proporções confortáveis dos Avatares para telas de 600px */
    .avatar-list .avatar:nth-child(1) { width: 70px; height: 70px; transform: translateX(-150px); opacity: 0.2; }
    .avatar-list .avatar:nth-child(2) { width: 90px; height: 90px; transform: translateX(-110px); opacity: 0.6; }
    .avatar-list .avatar:nth-child(3) { width: 120px; height: 120px; transform: translateX(-60px); opacity: 0.85; z-index: 8; }
    
    /* Avatar Central (Fica maior e imponente) */
    .avatar-list .avatar:nth-child(4) { width: 160px; height: 160px; transform: translateX(0); opacity: 1; z-index: 10; border: 4px solid #571e1e !important; }
    
    .avatar-list .avatar:nth-child(5) { width: 120px; height: 120px; transform: translateX(60px); opacity: 0.85; z-index: 8; }
    .avatar-list .avatar:nth-child(6) { width: 90px; height: 90px; transform: translateX(110px); opacity: 0.6; }
    .avatar-list .avatar:nth-child(7) { width: 70px; height: 70px; transform: translateX(150px); opacity: 0.2; }

    /* Setas maiores e fáceis de clicar com o dedão no tablet */
    .flexa {
        font-size: 40px !important;
        z-index: 15;
        position: absolute !important;
        padding: 5px !important;
    }
    .flexa-esquerda { left: -40px !important; }
    .flexa-direita { right: -40px !important; }

    /* --- BOTÕES INFERIORES --- */
    .actions {
        width: 100% !important;
        gap: 15px;
        margin-top: 30px;
    }

    /* Botões crescem um pouco na largura para acompanhar a tela do tablet */
    .botao-red {
        width: 100% !important;
        max-width: 360px !important;
        font-size: 20px !important;
        padding: 10px !important;
        height: 55px !important; 
    }

    .botao-red img {
        height: 32px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .confirm {
        width: 100% !important;
        max-width: 360px !important;
        padding: 12px 0 !important;
        font-size: 22px !important;
        margin-top: 10px !important;
    }
}


@media (min-width: 769px) {
    body {
        overflow-y: auto !important;
        padding: 30px 20px;
    }

    /* O container expande bem perto do limite da tela de 769px */
    .container {
        width: 100% !important;
        max-width: 720px !important;
        margin: 0 auto;
        padding: 0;
    }

    /* Cabeçalho com espaçamento profissional */
    .header {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30px;
        padding-top: 15px; 
    }

    /* Botão Pular integrado ao canto superior com tamanho confortável */
    .pular {
        position: absolute !important;
        top: 25px !important;
        right: 25px !important;
        margin: 0 !important;
        font-size: 16px !important;
        padding: 6px 16px !important;
        z-index: 9999 !important;
    }

    .subtitle {
        font-size: 26px !important;
        margin-top: 15px;
    }

    .header img {
        height: 120px !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* --- CARROSSEL PARA 769px --- */
    /* Espaço amplo: os avatares não se esmagam e a transição fica perfeita */
    .carousel-container {
        margin: 40px auto !important;
        width: 100% !important;
        max-width: 600px !important; 
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .avatar-list {
        height: 220px !important;
        width: 480px !important; /* Bastante espaço horizontal para o empilhamento elegante */
    }

    /* Proporções ideais e expansivas dos Avatares para 769px */
    .avatar-list .avatar:nth-child(1) { width: 90px; height: 90px; transform: translateX(-200px); opacity: 0.4; }
    .avatar-list .avatar:nth-child(2) { width: 110px; height: 110px; transform: translateX(-150px); opacity: 0.7; }
    .avatar-list .avatar:nth-child(3) { width: 140px; height: 140px; transform: translateX(-80px); opacity: 0.9; z-index: 8; }
    
    /* Avatar Central (Praticamente o tamanho original do seu design de desktop) */
    .avatar-list .avatar:nth-child(4) { width: 190px; height: 190px; transform: translateX(0); opacity: 1; z-index: 10; border: 4px solid #571e1e !important; }
    
    .avatar-list .avatar:nth-child(5) { width: 140px; height: 140px; transform: translateX(80px); opacity: 0.9; z-index: 8; }
    .avatar-list .avatar:nth-child(6) { width: 110px; height: 110px; transform: translateX(150px); opacity: 0.7; }
    .avatar-list .avatar:nth-child(7) { width: 90px; height: 90px; transform: translateX(-200px); opacity: 0.4; }

    /* Setas grandes e bem posicionadas para navegação precisa */
    .flexa {
        font-size: 46px !important;
        z-index: 15;
        position: absolute !important;
        padding: 5px !important;
    }
    .flexa-esquerda { left: -50px !important; }
    .flexa-direita { right: -50px !important; }

    /* --- BOTÕES INFERIORES --- */
    .actions {
        width: 100% !important;
        gap: 15px;
        margin-top: 35px;
    }

    /* Os botões chegam bem perto do tamanho final original, ideais para telas maiores */
    .botao-red {
        width: 100% !important;
        max-width: 360px !important; /* Mantém o padrão estético original de largura máxima */
        font-size: 24px !important;
        padding: 8px !important;
        height: 60px !important; 
    }

    .botao-red img {
        height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .confirm {
        width: 100% !important;
        max-width: 360px !important;
        padding: 12px 0 !important;
        font-size: 24px !important;
        margin-top: 10px !important;
    }
}