body{
    margin:0;
    min-height:100vh;
    background-image:url("https://thumbs.dreamstime.com/b/fondo-m%C3%ADstico-con-el-libro-de-la-magia-negra-las-velas-ardientes-y-el-mirrow-81514102.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    font-family:Arial, Helvetica, sans-serif;
}

.oculto{
    display:none !important;
}



.tarot-controls{
    position:fixed;
    top:20px;
    left:20px;
    z-index:1000;
}

#menu-btn{
    font-size:24px;
    padding:10px;
    cursor:pointer;
    border:none;
    border-radius:10px;
}

#tarot-menu{
    background:#111;
    color:white;
    list-style:none;
    padding:0;
    margin-top:10px;
    width:220px;
    border:1px solid #444;
}

#tarot-menu li{
    padding:12px;
    cursor:pointer;
    border-bottom:1px solid #333;
}

#tarot-menu li:hover{
    background:#333;
}



.ambiente-terror{
    position:fixed;
    top:20px;
    right:30px;
    pointer-events:none;
}

#vela{
    font-size:4rem;
    transition:0.5s;
}

#vela.encendida{
    text-shadow:
    0 0 20px orange,
    0 0 40px red;
}

#vela.apagada{
    filter:grayscale(100%);
    opacity:0.4;
}

#ojos-rojos{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:120px;
    height:40px;

    background:
    radial-gradient(circle, red 15%, transparent 25%)
    0 0 / 60px 40px;

    opacity:0;
    transition:opacity 2s ease;
    z-index:-1;
}

#ojos-rojos.mirando{
    opacity:.9;
    animation:parpadeo 4s infinite;
}

@keyframes parpadeo{
    0%,90%,100%{
        height:40px;
    }
    95%{
        height:2px;
    }
}



#mesa-tarot{
    position: relative;
    width: 100%;
    height: 100vh;
}

#mazo{
 position: fixed;
 left: 30px;
 top: 50%;
 transform: translateY(-50%);
 width: 180px;
 height: 300px;
 z-index: 10;
}

.zona-tirada{
    position:absolute;

    left:260px;
    top:50%;

    transform:translateY(-50%);

    display:flex;
    gap:30px;
    align-items:center;
}

.carta-container{
    text-align:center;
}

.carta{
    width:180px;
    height:300px;
    object-fit:cover;
    border-radius:12px;
    box-shadow:0 0 15px black;

    animation:repartir .8s ease;
}

.titulo-carta{
    color:white;
    font-weight:bold;
    margin-top:10px;
    text-shadow:0 0 5px black;
}

@keyframes repartir{

    from{
        transform:
        translateY(-400px)
        rotate(-20deg);

        opacity:0;
    }

    to{
        transform:
        translateY(0)
        rotate(0deg);

        opacity:1;
    }
}



.cruz-celta{
    display:grid;
    grid-template-columns:repeat(3, 220px);
    gap:20px;
    justify-content:center;
    align-items:center;
}
#mazo{
    position:fixed;
    left:30px;
    bottom:30px;
    width:180px;
    height:300px;
}



.carta-mazo{
    position:absolute;
    width:180px;
    height:300px;
    object-fit:cover;
    border-radius:12px;
    box-shadow:0 0 15px black;
    cursor:pointer;
    transition:.3s;
}


.carta-mazo:hover{
    transform:translateY(-10px);
}