/* DECK CARDS */
.tarot-deck {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#cardsContainer {
position: relative;
width: 100%;
aspect-ratio: 1.5 / 1;
display: flex;
justify-content: center;
align-items: center;
}
.tarotcard {
width: 10%;
position: absolute;
aspect-ratio: 51 / 91;
background: url('/assets/img/back-card.webp') no-repeat center center;
background-size: cover;
border: 2px solid rgba(199, 178, 153, 0.5);
border-radius: 10px;
backdrop-filter: blur(10px);
will-change: transform, opacity;
transform-origin: center;
transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-in-out;
opacity: 0;
cursor: grab;
z-index: 1;
}
/* PLACEHOLDER CARD – вже вибрана карта */
.tarotcard-drop-zone {
display: flex;
gap: 20px;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Тематичні змінні для placeholder */
[data-bs-theme=light] {
--bs-placeholder: rgba(0, 0, 0, 0.1);
--bs-question-shadow: 0 0px 50px 500px rgba(248, 242, 236, 0.7);
}
[data-bs-theme=dark] {
--bs-placeholder: rgba(255, 255, 255, 0.1);
--bs-question-shadow: 0 0px 50px 500px rgba(15, 16, 20, 0.7);
}
.question-shadow {
box-shadow:var(--bs-question-shadow);
}
/* Основний контейнер для вибраної карти (початково без глянцю) */
.tarotcard-placeholder {
position: relative;  
overflow: hidden; /* Щоб глянець не виходив за межі */
width: 100%;
aspect-ratio: 51 / 91;
background: var(--bs-placeholder);
border: 2px dashed var(--bs-text-gray-400);
border-radius: 10px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.history-cards {
display: grid;
gap: 20px;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.history-cards img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 	992px) { 
#cardsContainer {
aspect-ratio: 1 / 1;
}
.tarotcard {
width: 20%;
}
.tarotcard-drop-zone {
flex-direction: row;
}
.history-cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 576px) {
#questionInput {
font-size: 16px !important;
}
.history-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}