/* /assets/css/reading_table.css */

.interactive-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(15, 5, 41, 0.8) 0%, rgba(10, 3, 30, 0.95) 100%);
    backdrop-filter: blur(8px);
    z-index: 1900;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #EAEAEA;
    padding: 1rem;
    box-sizing: border-box;
}
.shuffling-container, .card-selection-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.shuffling-deck {
    position: relative;
    width: 100px;
    height: 160px;
    margin: 2rem auto;
}
.shuffling-card {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../img/cards/card_back.png');
    background-size: cover;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    animation: shuffle 2.5s ease-in-out infinite;
    animation-delay: calc(var(--i)*-.5s);
}
.shuffling-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    opacity: .8;
}
@keyframes shuffle {
    0%,to {
        transform: translateX(-100px) rotate(-15deg)
    }
    50% {
        transform: translateX(100px) rotate(15deg)
    }
}
.selection-prompt {
    text-align: center;
    flex-shrink: 0;
    padding-top: 1rem;
    margin-bottom: 1rem;
}
.selection-prompt h3 {
    font-family: 'Cormorant Garamond', serif;
}
.spread-container {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 1rem;
    overflow-y: auto;
    padding: 1.5rem;
    padding-bottom: 3rem;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: rgba(0,0,0,.2);
    scrollbar-width: thin;
    scrollbar-color: #4a148c #0a031e;
}
.spread-container::-webkit-scrollbar {
    width: 8px;
}
.spread-container::-webkit-scrollbar-track {
    background: #0a031e;
}
.spread-container::-webkit-scrollbar-thumb {
    background-color: #4a148c;
    border-radius: 10px;
    border: 2px solid #0a031e;
}
.selectable-card {
    width: 100px;
    height: 180px;
    background-image: url('../img/cards/card_back.png');
    background-size: cover;
    border-radius: 6px;
    cursor: pointer;
    transition: transform .2s,box-shadow .2s;
    flex-shrink: 0;
}
.selectable-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 0 20px rgba(255,215,0,.5);
}
.selectable-card.selected {
    transform: translateY(-20px) scale(1.1);
    box-shadow: 0 0 30px #ffd700;
    opacity: .7;
    cursor: not-allowed;
}
.card-flip-container {
    perspective: 1000px;
    width: 100%;
    max-width: 200px;
    margin: auto;
    aspect-ratio: 2/3;
}
.card-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .8s;
    transform-style: preserve-3d;
}
.card-flipper.is-flipped {
    transform: rotateY(180deg);
}
.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,.4);
}
.card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-back {
    transform: rotateY(180deg);
}
.card-back .card-container {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.card-back .card-container .card-header {
    flex-shrink: 0;
    font-size: .8rem;
    padding: .3rem;
}
.card-back .card-container .card-img-top {
    flex-grow: 1;
    padding: 0!important;
    object-fit: contain;
    max-height: 70%;
}
.card-back .card-container .card-body {
    display: none;
}
.card-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    background-color: rgba(0,0,0,.7);
    padding: 8px 5px;
    font-size: .9rem;
    border-radius: 10px 10px 0 0;
}
.card-flip-container.cc-card-2 .card-flipper {
    transform: rotate(90deg);
}
.card-flip-container.cc-card-2 .card-flipper.is-flipped {
    transform: rotate(90deg) rotateY(180deg);
}