/*
 * tarot-cards.css — Стили страницы выбора карт
 * Веер карт, анимации выбора, область выбранных
 */

/* ── Layout ── */
.cards-page {
    width: 100%;
    height: 100vh;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    padding: 12px;
    z-index: 10;
    /* Гадание происходит в зале — самом глубоком слое темноты (DESIGN.md §2) */
    background: var(--hall);
}

/* ── Header ── */
.cards-header {
    text-align: center;
    padding: 8px 0 10px;
    flex-shrink: 0;
}

/* Заголовок и строка под ним — .title/.subtitle из components.css.
   Своей типографики у экрана нет: кегль заголовка общий для всех экранов. */
.cards-counter { margin-top: var(--space-1); }

/* Золото на экране одно — кнопка внизу. Счётчик выделяется тоном, а не краской */
.cards-counter span {
    color: var(--ink);
    font-weight: 500;
}

/* ── Fans Container ── */
.fans-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

.card-fan {
    position: relative;
    height: 22%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ── Individual Card ── */
.card {
    position: absolute;
    width: 50px;
    height: 80px;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    transform-style: preserve-3d;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-face, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Карты в вееере лежат внахлёст: от соседней видно полоску в 12–28 px, и держит
   её только край. Волосяная рамка (1.21) на этой полоске не видна вовсе — веер
   читался тёмным пятном. Край рубашки — видимая рамка нажимаемого объекта. */
.card-back {
    background: var(--canvas);
    border: 1px solid var(--border);
}

.card-back svg {
    width: 100%;
    height: 100%;
}

.card-face {
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hall);
}

.card-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover: ничего не двигается и не увеличивается (DESIGN.md §4) — только тон */
.card:hover:not(.disabled):not(.selected) {
    z-index: 100;
    filter: brightness(1.25);
}

/* Подсказка «эту карту можно взять»: свечений в направлении нет, пульсируем прозрачностью */
.card.glow:not(.disabled):not(.selected) {
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.card.disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

.card.selecting {
    pointer-events: none;
    cursor: wait;
}

.card.flying {
    z-index: 1000;
    pointer-events: none;
}

/* ── Selected Cards Area ── */
.selected-area {
    flex-shrink: 0;
    height: 110px;
    background: var(--case);
    border-radius: var(--radius-case);
    padding: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hair);
    margin-bottom: 8px;
    overflow-x: auto;
}

.selected-card {
    width: 50px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.selected-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.selected-card.reversed img {
    transform: rotate(180deg);
}

.empty-slot {
    width: 50px;
    height: 80px;
    border: 1px dashed var(--hair);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

/* ── Действие ──
   Кнопка системная (.btn), здесь только поведение в колонке экрана. */
.submit-button { flex-shrink: 0; }
.submit-button.btn-hidden { display: none; }

/* ── Loading ── */
.cards-loading {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--body);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 400;
}

.cards-loading::after {
    content: '';
    animation: loadDots 1.5s infinite;
}

@keyframes loadDots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .card { width: 40px; height: 64px; }
    .selected-card, .empty-slot { width: 40px; height: 64px; }
    .selected-area { height: 90px; }
}

@media (max-width: 360px) {
    .card { width: 35px; height: 56px; }
    .selected-card, .empty-slot { width: 35px; height: 56px; }
    .selected-area { height: 80px; padding: 8px; gap: 6px; }
}