/* CENTER BOARD STUFF */
.card-pile {
    position: absolute;
    display: relative;
    transform: 
                translate(-50%, -50%) 
                scale(3);
    transform-origin: center center;
    top: 50%;
    padding: 0;
    overflow: visible;
    display: relative;


    transition: 
                transform calc(var(--gameSpeed) * 0.15s) ease;
    transform-origin: center;
}

.draw-card-pile {
    width: 35px;
    height: 47px;
    contain: layout;
}

.add-shadow {
    position: relative;
}

.add-shadow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    box-shadow: 
                3px 3px 1px #22222210, 
                -0.5px -0.5px 1px #ffffff05;
    transition: 
                box-shadow calc(var(--gameSpeed) * 0.15s) ease;
}

.add-shadow:hover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow: 
                4px 4px 1px #22222209, 
                -0.5px -0.5px 1px #ffffff05;
}

.dark-draw {
    left: 10%;
}

.draw-pile {
    content: "";
    position: absolute;
    transform: 
                translate(calc(var(--offsetX) * 1px), 
                calc(var(--offsetY) * 1px));
}

.draw-pile:hover::after {
    content: var(--afterText);
    position:absolute;
    inset: 0;
    background-color: #33333380;
    filter: blur(0.1px);
    backdrop-filter: blur(1px);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: white;
}

.dark-discard {
    left: 30%;
    animation: 
                dark-center-animation-end calc(var(--gameSpeed) * 0.5s) ease;
}

.light-discard {
    left: 70%;
    animation: 
                light-center-animation-end calc(var(--gameSpeed) * 0.5s) ease;
}

.light-draw {
    left: 90%;
}

.light-center {
    left: 50%;
    transform: 
                translate(-50%, -50%) 
                scale(4);
    animation: 
                light-center-animation-start calc(var(--gameSpeed) * 0.5s) ease;
    transform-origin: center;
}

.dark-center {
    left: 50%;
    transform: 
                translate(-50%, -50%) 
                scale(4);
    animation: 
                dark-center-animation-start calc(var(--gameSpeed) * 0.5s) ease;
    transform-origin: center;
}

.visual-hint-card {
    opacity: 50%;
    left: 50%;
    transform: 
                translate(-50%, -50%) 
                scale(4);
    animation: 
                center-pile-hint 3s ease-in-out infinite;
    pointer-events: none;
}

.moving-card {
    position: absolute;
    overflow: visible;
    inset: 0;
    transform: 
                translate(-50%, -50%) 
                rotate(calc(var(--rotateAmount) * 1deg));
    transform-origin: center center;
    z-index: 10000;

    transition: 
                transform calc(var(--gameSpeed) * 0.15s) ease;

    animation: 
                moving-pile-card calc(var(--gameSpeed) * 0.5s) ease-out;
}

.moving-card:hover {
    transform: 
                translate(-50%, -50%) 
                scale(1.3);
    transform-origin: center center;

    transition: 
                transform calc(var(--gameSpeed) * 0.15s) ease;
}

.grayed-card {
    filter: brightness(0.85);

    animation: 
                moving-pile-card-under-gray calc(var(--gameSpeed) * 5s) ease-out;
}

.grayed-card:hover {
    transform: 
                translate(-50%, -50%);
    transform-origin: center center;
}

.perfect-play {
    background-color: inherit;

    animation: 
                moving-pile-card calc(var(--gameSpeed) * 0.3s) ease-out, 
                perfect-play-made calc(var(--gameSpeed) * 1s) linear;
}

.move-towards-player {
    transform: 
                translate(calc(var(--offsetX) * 1px), calc(var(--offsetY) * 1px + 1500%));

    animation: 
                move-towards-player-animation calc(var(--gameSpeed) * 0.8s) ease-in;
}

.move-towards-opponent {
    transform: 
                translate(calc(var(--offsetX) * 1px), calc(var(--offsetY) * 1px - 1500%));

    animation: 
                move-towards-opponent-animation calc(var(--gameSpeed) * 0.8s) ease-in;
}

/* -------------------------------- ANIMATIONS ---------------------------------- */

@keyframes light-center-animation-start {
    0% {
        left: 70%;
        transform: translate(-50%, -50%) scale(3);
    }
    100% {
        left: 50%;
        transform: translate(-50%, -50%) scale(4);
    }
}

@keyframes light-center-animation-end {
    0% {
        left: 50%;
        transform: translate(-50%, -50%) scale(4);
    }
    100% {
        left: 70%;
        transform: translate(-50%, -50%) scale(3);
    }
}

@keyframes dark-center-animation-start {
    0% {
        left: 30%;
        transform: translate(-50%, -50%) scale(3);
    }
    100% {
        left: 50%;
        transform: translate(-50%, -50%) scale(4);
    }
}

@keyframes dark-center-animation-end {
    0% {
        left: 50%;
        transform: translate(-50%, -50%) scale(4);
    }
    100% {
        left: 30%;
        transform: translate(-50%, -50%) scale(3);
    }
}

@keyframes center-pile-hint {
    0% { opacity: 5%; }
    30% { opacity: 5%; }
    50% { opacity: 80%; }
    70% { opacity: 5%; }
    100% { opacity: 5%; }
}

@keyframes moving-pile-card {
    0% { transform: translate(-50%, 150%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(calc(var(--rotateAmount) * 1deg)); }
}

@keyframes moving-pile-card-under-gray {
    0% { filter: brightness(1) }
    80% { filter: brightness(1) }
    100% { filter: brightness(0.8) }
}

@keyframes perfect-play-made {
    0% { background-color: inherit; }
    30% { background-color: inherit; }
    35% { background-color: #ecc350; }
    70% { background-color: #ecc350; }
    100% { background-color: inherit; }
}

@keyframes move-towards-player-animation {
    0% { transform: translate(calc(var(--offsetX) * 1px), calc(var(--offsetY) * 1px) + 1500%); }
}

@keyframes move-towards-opponent-animation {
    0% { transform: translate(calc(var(--offsetX) * 1px), calc(var(--offsetY) * 1px) - 1500%); }
}