/* Pioche, défausse, rivière et éphéméride (Components/Table/TablePiles.razor). */

/* ---------- Pioche et défausse : deux vraies piles de cartes posées sur un tapis. La pioche est
   un paquet de dos de cartes (épaisseur selon le nombre restant), la défausse montre la carte du
   dessus face visible avec les précédentes en éventail. La pile utilisable pulse. ---------- */
.table-piles {
    --pile-w: 96px;
    --pile-h: 134px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(1.5rem, 6vw, 4.5rem);
    padding: 0.9rem 1rem 0.6rem;
    border-radius: 18px;
    background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 70%),
        rgba(0, 0, 0, 0.14);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.07), inset 0 6px 22px rgba(0, 0, 0, 0.35);
    flex-wrap: wrap;
}

.pile-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding-top: 6px;
}

.deck-pile,
.discard-stack {
    position: relative;
    width: var(--pile-w);
    height: var(--pile-h);
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: var(--card-radius);
    transition: transform 0.15s ease;
}

.deck-pile:disabled,
.discard-stack:disabled {
    cursor: default;
}

.deck-pile.ready:hover,
.discard-stack.ready:hover {
    transform: translateY(-4px);
}

.deck-pile.ready:active,
.discard-stack.ready:active {
    transform: translateY(1px);
}

/* Halo doré pulsant : « c'est à toi, tu peux piocher / prendre ». */
.deck-pile.ready::after,
.discard-stack.ready::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: calc(var(--card-radius) + 6px);
    box-shadow: 0 0 0 3px var(--gold), 0 0 18px 4px rgba(224, 180, 0, 0.55);
    animation: pile-pulse 1.6s ease-in-out infinite;
    pointer-events: none;
}

/* Dos de carte : motif losangé vert profond, liseré doré, emblème au centre. Chaque couche est
   décalée pour donner l'épaisseur du paquet. */
.card-back {
    position: absolute;
    inset: 0;
    transform: translate(calc(var(--layer) * -3px), calc(var(--layer) * -3px));
    border-radius: var(--card-radius);
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 6px, transparent 6px 12px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.07) 0 6px, transparent 6px 12px),
        linear-gradient(160deg, #13824f 0%, #07401f 100%);
    border: 3px solid #f4f2ea;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-back::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: calc(var(--card-radius) - 5px);
    border: 1.5px solid rgba(224, 180, 0, 0.65);
}

.card-back-emblem {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6c9 0%, var(--gold) 60%, #a37f00 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
}

.deck-pile:disabled .card-back {
    filter: saturate(0.75) brightness(0.9);
}

.pile-count-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 2;
    background: var(--gold);
    color: #2a1e00;
    border-radius: 999px;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
    padding: 0 0.35rem;
}

.pile-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    min-height: 2.4em;
    color: var(--ink);
    font-size: 0.72rem;
    text-align: center;
}

.pile-caption strong {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
    opacity: 0.85;
}

.pile-hint {
    color: var(--gold);
    font-weight: 700;
}

.pile-note {
    opacity: 0.6;
    font-style: italic;
}

.pile-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--ink);
    text-decoration: underline;
    opacity: 0.75;
    font: inherit;
    font-size: 0.68rem;
    cursor: pointer;
}

.pile-link:hover {
    opacity: 1;
}

/* ---------- Rivière (variante p.19) : 3 cartes face visible à côté de la pioche et de la défausse ---------- */
.river-cards {
    display: flex;
    gap: 0.55rem;
    padding-top: 6px;
}

.river-card-wrap {
    position: relative;
    width: var(--pile-w);
    height: var(--pile-h);
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    border-radius: var(--card-radius);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.river-card-wrap:disabled {
    cursor: default;
}

.river-card-wrap .card-face {
    transform: none;
}

.river-card-wrap:disabled .card-face {
    filter: brightness(0.93);
}

.river-card-wrap.ready:hover {
    transform: translateY(-4px);
}

.river-card-wrap.ready::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: calc(var(--card-radius) + 5px);
    box-shadow: 0 0 0 2px rgba(127, 216, 255, 0.9), 0 0 14px 3px rgba(60, 170, 255, 0.45);
    animation: pile-pulse 1.6s ease-in-out infinite;
    pointer-events: none;
}

.pick-card.hidden-card .card-back-emblem {
    font-size: 1rem;
    font-weight: 900;
    color: #2a1e00;
}

/* Extension Fantastique : éphéméride au centre, boutons de maléfice. */
.ephemeris-slot .ephemeris-card {
    position: relative;
    width: var(--pile-w);
    height: var(--pile-h);
    display: grid;
    place-items: center;
}

.ephemeris-slot .ephemeris-card .card-face {
    position: absolute;
    inset: 0;
    box-shadow: 0 0 18px rgba(120, 140, 255, .55);
}

.ephemeris-slot .ephemeris-rule {
    max-width: 220px;
    white-space: normal;
    line-height: 1.25;
}

.ephemeris-slot .card-slot-empty { font-size: 1.6rem; }
/* Boule de cristal : la pioche entière (jusqu'à ~300 cartes) défile dans sa propre boîte. */
.game-shell .floating-panel .crystal-pile {
    max-height: 26vh;
    overflow-y: auto;
    margin-top: 0;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    font-size: 0.85rem;
    line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
    .deck-pile.ready::after,
    .discard-stack.ready::after {
        animation: none;
        opacity: 0.8;
    }

    .river-card-wrap.ready::after {
        animation: none;
    }
}

@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
    .pile-note {
        font-size: 0.62rem;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    .pile-slot {
        gap: 0.35rem;
    }

    .pile-caption {
        font-size: 0.62rem;
        min-height: 0;
    }

    .pile-caption strong {
        font-size: 0.6rem;
    }

    .ephemeris-slot .ephemeris-rule {
        max-width: 120px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-width: 480px), (orientation: landscape) and (max-height: 500px) {
    .river-cards {
        gap: 0.3rem;
    }

    .table-piles {
        gap: 0.9rem;
    }
}

@media (max-width: 480px) {
    .ephemeris-slot .card-face.top .card-face-name {
        font-size: 0.66rem;
        overflow-wrap: normal;
        hyphens: manual;
        letter-spacing: -0.01em;
    }

    .table-piles {
        --pile-w: 66px;
        --pile-h: 92px;
        padding: 0.6rem 0.5rem 0.4rem;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    .table-piles {
        --pile-w: 56px;
        --pile-h: 78px;
        flex-wrap: nowrap;
        gap: 0.9rem;
        padding: 0.5rem 0.4rem 0.3rem;
    }
}

@media (max-width: 360px) and (orientation: portrait) {
    .table-piles {
        --pile-w: 50px;
        --pile-h: 70px;
        gap: 0.6rem;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .card-back-emblem {
        width: 24px;
        height: 24px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .card-back-emblem {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .table-piles {
        --pile-w: 46px;
        --pile-h: 64px;
        gap: 1rem;
        padding: 0.35rem 0.4rem 0.2rem;
        flex-wrap: nowrap;
    }

    .pile-slot {
        gap: 0.25rem;
    }

    .pile-caption {
        min-height: 0;
        font-size: 0.6rem;
    }

    .pile-caption .pile-note,
    .ephemeris-slot .ephemeris-rule {
        display: none;
    }
}

@keyframes pile-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

/* Casino (livret p.18) : tuile posée au centre ; halo doré quand je peux miser. */
.casino-tile {
    position: relative;
    width: var(--pile-w);
    height: var(--pile-h);
    padding: 0;
    border: 3px solid rgba(224, 180, 0, 0.55);
    border-radius: var(--card-radius);
    background: radial-gradient(ellipse at 50% 35%, #2f8a52 0%, #0d4a28 75%);
    color: inherit;
    font: inherit;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s ease;
}

.casino-tile:disabled { cursor: default; }
.casino-tile.ready { cursor: pointer; }
.casino-tile.ready:hover { transform: translateY(-4px); }

.casino-tile.ready::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: calc(var(--card-radius) + 6px);
    box-shadow: 0 0 0 3px var(--gold), 0 0 18px 4px rgba(224, 180, 0, 0.55);
    animation: pile-pulse 1.6s ease-in-out infinite;
    pointer-events: none;
}

.casino-tile .casino-icon { font-size: 2.2rem; line-height: 1; }

/* Mise face cachée : petit dos de carte incliné sur le tapis. */
.casino-tile .casino-stake {
    --layer: 0;
    inset: auto;
    bottom: 10%;
    right: 12%;
    width: 42%;
    height: 38%;
    transform: rotate(-12deg);
    border-width: 2px;
}

.casino-tile .casino-stake::before { inset: 3px; }
.casino-tile .casino-stake .card-back-emblem { width: 20px; height: 20px; font-size: 0.8rem; }