/* ============================= ÁREA DO JOGO ============================= */
.cbp-app {
    font-family: Arial, Helvetica, sans-serif;
    background:#f2f2f2;
    margin:0;
    padding:0;
    text-align:center;
}

.cbp-app #cbp-jogo{
    margin-top:20px;
}

.cbp-app #cbp-baralho{
    display:flex;
    justify-content:center;
}

/* ============================= STACK / BARALHO ============================= */
.cbp-app .cbp-stack{
    perspective:1000px;
}

/* ============================= CARTA BASE ============================= */
.cbp-app .cbp-carta{
    width:340px;
    height:520px;
    position:relative;
    transform-style:preserve-3d;
    transition:transform .6s;
    cursor:pointer;
}

.cbp-app .cbp-carta.virada{
    transform:rotateY(180deg);
}

/* ============================= FRENTE E VERSO ============================= */
.cbp-app .cbp-carta .frente,
.cbp-app .cbp-carta .verso{
    position:absolute;
    width:100%;
    height:100%;
    border-radius:14px;
    backface-visibility:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,0.25);
}

/* ============================= FRENTE ============================= */
.cbp-app .cbp-carta .frente{
    background:linear-gradient(135deg,#1d3557,#457b9d);
    color:white;
    font-size:80px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ============================= VERSO ============================= */
.cbp-app .cbp-carta .verso{
    background:white;
    transform:rotateY(180deg);
    padding:18px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

/* ============================= IMAGEM ============================= */
.cbp-app .cbp-carta .verso img{
    width:100%;
    max-height:130px;
    object-fit:cover;
    border-radius:8px;
    margin-bottom:10px;
}

/* ============================= TITULO ============================= */
.cbp-app .cbp-carta .verso h3{
    margin:0 0 10px 0;
    font-size:22px;
}

/* ============================= LISTA DE PISTAS ============================= */
.cbp-app #cbp-pistas{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    flex:1;
    font-size:16px;
}

.cbp-app #cbp-pistas li{
    padding:6px 0;
    border-bottom:1px solid #eee;
}

/* ============================= BOTÕES ============================= */
.cbp-app button{
    margin-top:10px;
    padding:10px;
    border:none;
    border-radius:8px;
    background:#457b9d;
    color:white;
    font-weight:bold;
    cursor:pointer;
}

.cbp-app button:hover{
    background:#1d3557;
}

/* ============================= ANIMAÇÃO SAÍDA CARTA ============================= */
.cbp-app .cbp-carta.saindo{
    animation: cbp-sair .4s forwards;
}

@keyframes cbp-sair{
    to{
        transform:translateX(400px) rotate(20deg);
        opacity:0;
    }
}

/* ============================= MODO MESTRE ============================= */
.cbp-app .cbp-carta-mestre{
    width:420px;
    background:white;
    border-radius:12px;
    padding:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.3);
    margin:auto;
    text-align:left;
}

.cbp-app .cbp-mestre-topo{
    text-align:center;
}

.cbp-app .cbp-mestre-img{
    width:100%;
    max-height:160px;
    object-fit:cover;
    border-radius:8px;
    margin-bottom:10px;
}

.cbp-app .cbp-mestre-pistas{
    margin-top:15px;
}

.cbp-app .cbp-mestre-pistas ol{
    padding-left:20px;
}

.cbp-app .cbp-mestre-resposta{
    margin-top:20px;
    font-size:18px;
    font-weight:bold;
    color:#333;
}

.cbp-app .cbp-mestre-controles{
    margin-top:15px;
    text-align:center;
}

/* ============================= MODAL CARTAS GUARDADAS ============================= */
.cbp-app #cbp-guardadas-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    display:none;
    justify-content:center;
    align-items:center;
}

.cbp-app #cbp-guardadas-conteudo{
    background:white;
    width:80%;
    max-height:80%;
    overflow:auto;
    border-radius:12px;
    padding:20px;
}

.cbp-app #cbp-guardadas-lista{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    justify-content:center;
}

/* ============================= MINI CARTAS GUARDADAS ============================= */
.cbp-app .cbp-mini-carta{
    width:200px;
    background:#fafafa;
    border-radius:10px;
    padding:10px;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

.cbp-app .cbp-mini-carta img{
    width:100%;
    border-radius:6px;
    margin-bottom:8px;
}

.cbp-app .cbp-mini-carta ul{
    padding-left:18px;
    font-size:14px;
}

/* ============================= TIMER ============================= */
.cbp-app #cbp-tempo{
    font-size:28px;
    font-weight:bold;
    margin-top:10px;
}

/* ============================= RESPONSIVO ============================= */
@media(max-width:500px){
    .cbp-app .cbp-carta{
        width:90%;
        height:480px;
    }
    .cbp-app .cbp-carta-mestre{
        width:95%;
    }
}