.mulligan-animation-stage {
    --mulligan-card-scale: 1;
    --mulligan-slot-count: 5;
    position: fixed;
    inset: 0;
    z-index: 1350;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(2, 6, 23, 0.32);
}

.mulligan-animation-stage.is-wide-hand {
    --mulligan-card-scale: 0.9;
}

.mulligan-animation-panel {
    width: min(840px, 96vw);
    padding: 18px 18px 20px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.9);
    color: #f8fafc;
    box-shadow: 0 26px 58px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(10px);
}

.mulligan-animation-title {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 800;
    text-align: center;
}

.mulligan-animation-row {
    display: grid;
    gap: 8px;
    justify-items: center;
}

.mulligan-animation-row-label {
    font-weight: 800;
    font-size: 0.88rem;
    opacity: 0.88;
}

.mulligan-animation-cards {
    display: grid;
    grid-template-columns: repeat(var(--mulligan-slot-count), calc(96px * var(--mulligan-card-scale)));
    gap: clamp(6px, 1.3vw, 12px);
    align-items: center;
    justify-content: center;
    width: 100%;
}

.mulligan-animation-slot {
    position: relative;
    width: calc(96px * var(--mulligan-card-scale));
    height: calc(136px * var(--mulligan-card-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.mulligan-animation-slot .card {
    cursor: default;
    transform: scale(var(--mulligan-card-scale));
    transform-origin: center center;
}

.mulligan-animation-slot.is-selected {
    filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.5));
}

.mulligan-animation-slot.is-empty {
    opacity: 0.18;
    transform: scale(0.94);
    filter: none;
}

.mulligan-animation-deck-row {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 104px;
    margin: 8px 0;
}

.mulligan-animation-deck {
    position: relative;
    width: 76px;
    aspect-ratio: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mulligan-animation-deck::before,
.mulligan-animation-deck::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.74);
    border: 2px solid rgba(226, 232, 240, 0.42);
}

.mulligan-animation-deck::before {
    transform: translate(5px, -5px);
}

.mulligan-animation-deck::after {
    transform: translate(10px, -10px);
}

.mulligan-animation-deck .card {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    cursor: default;
}

.mulligan-animation-deck.is-shuffling {
    animation: mulliganDeckShuffle 650ms ease-in-out;
}

.mulligan-animation-deck.is-shuffling .card {
    animation: mulliganDeckCardShuffle 650ms ease-in-out;
}

.mulligan-animation-fly-card {
    z-index: 1500;
}

@keyframes mulliganDeckShuffle {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    18% {
        transform: translate3d(-10px, 0, 0) rotate(-5deg);
    }
    36% {
        transform: translate3d(10px, -2px, 0) rotate(5deg);
    }
    54% {
        transform: translate3d(-7px, 2px, 0) rotate(-3deg);
    }
    72% {
        transform: translate3d(6px, 0, 0) rotate(3deg);
    }
}

@keyframes mulliganDeckCardShuffle {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    25% {
        transform: translate3d(9px, -4px, 0);
    }
    50% {
        transform: translate3d(-8px, 3px, 0);
    }
    75% {
        transform: translate3d(5px, -2px, 0);
    }
}

@media (max-width: 720px) {
    .mulligan-animation-stage {
        --mulligan-card-scale: 0.76;
        padding: 10px;
    }

    .mulligan-animation-stage.is-wide-hand {
        --mulligan-card-scale: 0.62;
    }

    .mulligan-animation-panel {
        padding: 14px 10px 16px;
    }

    .mulligan-animation-cards {
        gap: 5px;
    }

    .mulligan-animation-deck-row {
        min-height: 82px;
        margin: 5px 0;
    }

    .mulligan-animation-deck {
        width: 58px;
    }
}