body{

    background:#1d1d1d;
    color:white;
    font-family:Arial, Helvetica, sans-serif;

    margin:30px;
}

h1{
    text-align:center;
}

#secretArea{

    text-align:center;

    margin-bottom:40px;
}

#secretCardImage{

    width:300px;

    border-radius:12px;

    box-shadow:0 0 20px black;
}

#secretCardName{

    font-size:24px;

    margin:15px;
}

.buttons{

    margin-top:20px;
}

button{

    padding:10px 20px;

    margin:6px;

    font-size:18px;

    cursor:pointer;
}

#board{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:20px;
}

.card{

    position:relative;

    cursor:pointer;

    transition:.2s;
}

.card img{

    width:100%;

    border-radius:10px;
}

.card:hover{

    transform:scale(1.03);
}

.crossed::after{

    content:"✖";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    color:red;

    font-size:140px;

    font-weight:bold;

    text-shadow:0 0 20px black;
}

.crossed img{

    opacity:.35;
}

/* Card picker popup */

.modal {

    display:none;

    position:fixed;

    z-index:1000;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.8);

}


.modalContent {

    background:#333;

    margin:3% auto;

    padding:20px;

    width:90%;

    max-width:900px;

    border-radius:15px;

    max-height:85vh;

    overflow-y:auto;

}


#pickerGrid {

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:15px;

}


.pickerCard {

    cursor:pointer;

}


.pickerCard img {

    width:100%;

    border-radius:8px;

}


.pickerCard:hover {

    transform:scale(1.05);

}