:root {
    --oro: #d4af37;
    --azul-profundo: #0a0a1a;
    --blanco: #e0e0e0;
}

body {
    margin: 0;
    background: var(--azul-profundo) radial-gradient(circle, #1b1b3a 0%, #0a0a1a 100%);
    color: var(--blanco);
    font-family: 'Raleway', sans-serif;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.container {
    text-align: center;
    padding: 40px 20px;
    max-width: 900px;
    width: 100%;
}

h1 { font-family: 'Cinzel', serif; color: var(--oro); font-size: 3rem; margin-bottom: 0; }
.subtitle { font-style: italic; opacity: 0.7; margin-bottom: 30px; }

.input-group { margin-bottom: 40px; display: flex; justify-content: center; }
input {
    padding: 15px; width: 60%; background: rgba(255,255,255,0.05);
    border: 1px solid var(--oro); color: white; border-radius: 5px 0 0 5px; outline: none;
}
button {
    padding: 15px 25px; background: var(--oro); border: none;
    color: black; font-family: 'Cinzel', serif; font-weight: bold;
    cursor: pointer; border-radius: 0 5px 5px 0; text-transform: uppercase;
}

/* --- CARTAS --- */
.mazo-container {
    display: flex; justify-content: center; gap: 20px;
    margin: 40px 0; perspective: 1000px; min-height: 250px; flex-wrap: wrap;
}

.carta-wrap {
    width: 150px; height: 250px; position: relative;
    transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    animation: volar 0.6s ease-out backwards;
}

.revelada { transform: rotateY(180deg); }

.cara {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden; border-radius: 10px; border: 2px solid var(--oro);
}

.dorso {
    background-color: #1a1a1a !important;
    /* Usamos ruta relativa por si el HTTPS da problemas internos */
    background-image: url('/img/reverso3.png') !important; 
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 2px solid var(--oro);
    box-sizing: border-box;
    /* Esto ayuda a que el navegador reserve el espacio para la imagen */
    content: ""; 
}


.frontal { transform: rotateY(180deg); background: white; overflow: hidden; }
.frontal img { width: 100%; height: 100%; object-fit: cover; }

@keyframes volar {
    from { opacity: 0; transform: translateY(100px) scale(0.5); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- LOADER --- */
.loader-mistico {
    width: 40px; height: 40px; margin: 20px auto; border-radius: 50%;
    background: var(--oro); box-shadow: 0 0 20px var(--oro);
    animation: pulso 1.5s infinite; display: none;
}
@keyframes pulso {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.5); opacity: 1; }
}

.respuesta-ia {
    background: rgba(0,0,0,0.6); padding: 25px; border-radius: 15px;
    border: 1px solid rgba(212,175,55,0.3); margin-top: 20px;
}


* --- NOMBRE DE LA CARTA (DEBAJO) --- */
.nombre-carta {
    margin-top: 15px;
    font-family: 'Cinzel', serif;
    color: var(--oro);
    font-size: 0.9rem;
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity 0.5s ease;
    text-transform: uppercase;
}

/* Se activa cuando la carta se gira */
.revelada + .nombre-carta {
    opacity: 1;
}

/* --- DISEÑO RESPONSIVO --- */
@media (max-width: 600px) {
    .mazo-container {
        gap: 10px;
    }
    .carta-wrap {
        width: 100px; /* Cartas más pequeñas en móvil */
        height: 170px;
    }
    h1 { font-size: 2.2rem; }
    input { width: 50%; }
}

/* --- HISTORIAL (ESTILO) --- */
.historial-reciente {
    margin-top: 30px;
    font-size: 0.8rem;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    padding-top: 20px;
    color: var(--blanco);
    opacity: 0.6;
}