/* Removal motion for .displayed → .removed is controlled only here (transform + easing). */
:root {
    --card-displayed-removal-duration: 1.65s;
    --card-displayed-removal-easing: cubic-bezier(0.22, 0.98, 0.34, 1);
    /* Max width (third arg) for .card.*.played clamp() */
    --playground-played-card-max: 7rem;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --card-displayed-removal-duration: 0.4s;
        --card-displayed-removal-easing: ease-out;
    }
}

.card {
    height: auto;
    border-radius: 10px;
    border: 0px;
    transition: all 0.5s;
    background-color: var(--top-row-background-color);
}

.card img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.card.Main {
    width: 10vw;
    min-width: 5rem;
    max-width: 10rem;
    height: auto;
    position: absolute;
    top: 100%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: auto;
    will-change: transform, left;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card.Main.hidden {
    left: 50%;
    top: 200%;
}

.card.Main.played {
    transform: translate(-50%, clamp(-138%, calc(-142% + 3vw), -110%)) rotate(180deg);
    left: 50% !important;
    height: auto;
    width: clamp(3rem, 5svw, var(--playground-played-card-max));
    min-width: 0;
    top: 0 !important;
    bottom: auto !important;
    z-index: 11;
}

@media (max-width: 700px) {
    .card.Main.played {
        transform: translate(-50%, -110%) rotate(180deg);
    }
}

@media (min-width: 1300px) {
    .card.Main.played {
        transform: translate(-50%, -110%) rotate(180deg);
    }
}

.card.Top {
    width: 10rem;
    position: absolute;
    left: 50%;
    top: -200%;
}

/* Extra offset past -200% so no edge peeks on wide viewports (percentage is only ~2× container width). */
.card.Left {
    width: 10rem;
    position: absolute;
    top: 50%;
    left: calc(-200% - 12rem);
}

.card.Right {
    width: 10rem;
    position: absolute;
    top: 50%;
    right: calc(-200% - 12rem);
}

.card.Top.played {
    transform: translateX(-50%) rotate(360deg);
    height: auto;
    width: clamp(3rem, 5svw, var(--playground-played-card-max));
    top: 1%;
}

.card.Left.played {
    transform: translateY(-50%) rotate(270deg);
    height: auto;
    width: clamp(3rem, 5svw, var(--playground-played-card-max));
    left: 5%;
}

.card.Right.played {
    transform: translateY(-50%) rotate(270deg);
    height: auto;
    width: clamp(3rem, 5svw, var(--playground-played-card-max));
    right: 5%;
}


.card.Top.played.MainWinner {
    transform: translate(-50%, 80vh) rotate(180deg);
    visibility: hidden !important;
}

.card.Top.played.TopWinner {
    transform: translateX(-50%) translateY(-50vh) rotate(180deg);
}

.card.Top.played.LeftWinner {
    transform: translateX(-70vw) translateY(10rem) rotate(90deg)
}

.card.Top.played.RightWinner {
    transform: translateY(6rem) translateX(50vw) rotate(90deg)
}

.card.Left.played.MainWinner {
    transform: translateY(60vh) translateX(4rem) rotate(0deg)
}

.card.Left.played.TopWinner {
    transform: translateX(4rem) translateY(-70vh) rotate(0deg);
}

.card.Left.played.RightWinner {
    transform: translateX(80vw) translateY(-50%) rotate(-90deg);
}

.card.Left.played.LeftWinner {
    transform: translateY(-50%) translateX(-65vw) rotate(-90deg)
}

.card.Right.played.MainWinner {
    transform: translateY(60vh) translateX(-4rem) rotate(0deg)
}

.card.Right.played.TopWinner {
    transform: translateX(-4rem) translateY(-70vh) rotate(0deg);
}

.card.Right.played.RightWinner {
    transform: translateX(45vw) translateY(-50%) rotate(90deg)
}

.card.Right.played.LeftWinner {
    transform: translateX(-80vw) translateY(-50%) rotate(90deg)
}

.card.Main.played.MainWinner {
    transform: translateX(-50%) translateY(50vh) rotate(180deg)
}

.card.Main.played.TopWinner {
    transform: translateX(-50%) translateY(-80vh) rotate(180deg)
}

.card.Main.played.LeftWinner {
    transform: translateX(-70vw) translateY(-9rem) rotate(90deg)
}

.card.Main.played.RightWinner {
    transform: translateX(60vw) translateY(-7rem) rotate(90deg)
}

/* Side piles: layout box stays 8×4rem (matches card art); rotate only affects painting.
   Do not shrink height below 4rem — that warped images vs the 90° transform. */
.container.Left.display {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: absolute;
    width: max(40%, min(8.5rem, 100%));
    height: 100%;
    max-height: 100%;
    min-height: 0;
    left: 0;
    top: 0;
    box-sizing: border-box;
    padding: 0.25rem 0;
    overflow: hidden;
}

.container.Right.display {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: absolute;
    width: max(40%, min(8.5rem, 100%));
    height: 100%;
    max-height: 100%;
    min-height: 0;
    right: 0;
    top: 0;
    box-sizing: border-box;
    padding: 0.25rem 0;
    overflow: hidden;
}

/* Slide uses transform so it can interpolate (left/right from auto does not animate). */
.card.Left.displayed {
    left: 0;
    top: auto;
    flex: 0 0 auto;
    width: min(8rem, 100%);
    max-width: 100%;
    height: 4rem;
    position: relative;
    transform: translateX(0) rotate(90deg);
    box-sizing: border-box;
    transition:
        transform var(--card-displayed-removal-duration) var(--card-displayed-removal-easing),
        box-shadow 0.5s ease;
}

.card.Left.displayed.removed {
    transform: translateX(calc(-8rem - 140%)) rotate(90deg);
}

.card.Right.displayed {
    right: 0px;
    top: auto;
    flex: 0 0 auto;
    width: min(8rem, 100%);
    max-width: 100%;
    height: 4rem;
    position: relative;
    transform: translateX(0) rotate(-90deg);
    box-sizing: border-box;
    transition:
        transform var(--card-displayed-removal-duration) var(--card-displayed-removal-easing),
        box-shadow 0.5s ease;
}

.card.Right.displayed.removed {
    transform: translateX(calc(8rem + 140%)) rotate(-90deg);
}

.card.Top.displayed {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    max-width: 7rem;
    width: auto;
    height: auto;
    z-index: 1;
    top: 0px;
    left: auto;
    transform: translateY(0);
    transition:
        transform var(--card-displayed-removal-duration) var(--card-displayed-removal-easing),
        box-shadow 0.5s ease;
}

/* Slight overlap so more cards fit without expanding the row */
.card.Top.displayed:not(:first-child) {
    margin-left: clamp(-1.5rem, -3vw, -0.35rem);
}

.card.Top.displayed.removed {
    transform: translateY(-140%);
}

.container.Top.display {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: absolute;
    width: 100%;
    max-width: 100%;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 0 clamp(0.25rem, 2vw, 0.75rem);
    overflow: visible;
    /* border: 5px solid black; */
}

.card.Main.displayed:not(.played) {
    transform: translateY(-60%);
    /* box-shadow: 0px 0px 10px 0px rgb(0, 0, 255); */
}

.card.Main:not(.played):hover {
    cursor: pointer;
    /* box-shadow: 15px 15px 30px #bebebe, -15px -15px 30px #ffffff; */
    transform: translateY(-80%);
}

/* WebKit compositing stabilization without changing motion values. */
@supports (-webkit-hyphens: none) {
    .card.Main:not(.played) {
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }

    .card.Main.displayed:not(.played) {
        -webkit-transform: translate3d(0, -60%, 0);
        transform: translate3d(0, -60%, 0);
    }

    .card.Main:not(.played):hover {
        -webkit-transform: translate3d(0, -80%, 0);
        transform: translate3d(0, -80%, 0);
    }
}

/* Add increase shadow animation */
.card.first-played {
    box-shadow: -3px 0px 17px 0px var(--mud-palette-primary)
}

@keyframes increase-shadow {
    0% {
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
    }

    40% {
        box-shadow: -3px 0px 17px 0px var(--mud-palette-primary)
    }

    100% {
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
    }
}