/*
# Card Game Template

Core styles for the card game UI. Sizes are driven by
`--cardwidth` and `--cardheight` custom properties, which
can be updated at runtime via `Card.setCSS()`.
*/

:root {
    --cardwidth: 100px;
    --cardheight: 150px;
}

/*
## Slot Base

Shared styles for deck, empty slot, and selection overlay elements.
All slot variants share the same card-sized box with rounded corners
and a centered label.

    <div class="deck">Deck</div>
*/

.deck,
.deckempty,
.deckselect {
    position: absolute;
    min-width: var(--cardwidth);
    width: var(--cardwidth);
    height: var(--cardheight);
    background-color: darkred;
    border: 2px solid #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    z-index: 1;
}

/*
## Empty Slot

A faded, flat variant used for slots that have no card in them.

    <div class="deckempty">Empty</div>
*/

.deckempty {
    background-color: rgba(60, 54, 46, 0.083);
    padding: 1px;
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.367);
    border-radius: 11px;
    z-index: unset;
}

/*
## Selection Overlay

Highlighted overlay shown on available slots during a card-move
selection. Pulses with a goldenrod glow via the `deckselect`
keyframes animation.

    <div class="deckselect">&#x2B07;</div>
*/
.deckselect {
    background-color: orange;
    box-shadow: 0px 0px 5px orange;
    border-color: darkorange;
    font-size: 3rem;
    animation: deckselect 1s linear infinite alternate;
}

@keyframes deckselect {
    0% {
        box-shadow: 0px 0px 0px orange;
        background-color: rgba(255, 165, 0, 0.3);
    }

    100% {
        box-shadow: 0px 0px 15px darkorange;
        background-color: rgba(255, 140, 0, 0.6);
    }
}

/*
## Allow Overlay

Highlighted overlay shown on valid target slots during a card-move
selection. Pulses with a green glow via the `deckallow` keyframes
animation to indicate the slot accepts the card.

    <div class="deckallow">&#x2B07;</div>
*/

.deckallow {
    background-color: forestgreen;
    box-shadow: 0px 0px 5px forestgreen;
    border-color: limegreen;
    font-size: 3rem;
    animation: deckallow 1s linear infinite alternate;
}

@keyframes deckallow {
    0% {
        box-shadow: 0px 0px 0px forestgreen;
        background-color: rgba(34, 139, 34, 0.3);
    }

    100% {
        box-shadow: 0px 0px 15px limegreen;
        background-color: rgba(34, 139, 34, 0.6);
    }
}

/*
## Restrict Overlay

Highlighted overlay shown on restricted slots during a card-move
selection. Pulses with a red glow via the `deckrestrict` keyframes
animation to indicate the slot does not accept the card.

    <div class="deckrestrict">&#x26D4;</div>
*/

.deckrestrict {
    background-color: crimson;
    box-shadow: 0px 0px 5px crimson;
    border-color: red;
    font-size: 3rem;
    animation: deckrestrict 1s linear infinite alternate;
}

@keyframes deckrestrict {
    0% {
        box-shadow: 0px 0px 0px crimson;
        background-color: rgba(220, 20, 60, 0.3);
    }

    100% {
        box-shadow: 0px 0px 15px red;
        background-color: rgba(220, 20, 60, 0.6);
    }
}

/*
## Card Placeholder

Pseudo-element that displays a label inside an empty slot.
The label text is set via the `--text-card` custom property
on the slot element.

    <div class="deckempty cardplaceholder" style="--text-card: 'Hand'"></div>
*/

.cardplaceholder::before {
    content: var(--text-card);
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.5;
    font-size: 0.8rem;
}

/*
## Card

The main playing card element. Sized by the `--cardwidth` /
`--cardheight` custom properties. Shows a gold glow on hover.

    <div class="card">Card Name</div>
*/

.card {
    width: var(--cardwidth);
    height: var(--cardheight);
    background-color: white;
    border: 2px solid black;
    color: black;
    border-radius: 8px;
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    font-size: 18px;
    font-weight: bold;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    z-index: 1;
    transition-duration: 0.5s;
    position: relative;
    overflow: hidden;
    touch-action: none;
}

.card:hover {
    box-shadow: 4px 4px 2px gold, -4px -4px 2px gold;
    /* transform-origin: center center; */
    /* transform: scale(1.2); */
    /* z-index: 2; */
    margin-right: 0 !important;
}

/*
## Card Face (Front & Back)

Inner layers of a two-sided card. Both faces are absolutely
positioned to fill the `.card` container. By default both are
visible; adding `.card-close` hides the front face and adding
`.card-open` hides the back face. The `.flip` class triggers
a scale-based flip animation (`cardflip`) that briefly collapses
the card to zero width and cross-fades the visible face using
the `cardflipshow` / `cardfliphide` keyframes.

    <div class="card card-open">
        <div class="face-front">Front</div>
        <div class="face-back">Back</div>
    </div>
*/

.face-front, .face-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: inherit;
    height: inherit;
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
}
.card.flip > .face-front, .card.flip > .face-back {
    animation: cardflipshow 0.5s linear 1;
}
.card.card-close.flip, .card.card-open.flip {
    animation: cardflip 0.5s linear 1;
}
.card.card-close > .face-front, .card.card-open > .face-back {
    visibility: hidden;
}
.card.card-close.flip > .face-front, .card.card-open.flip > .face-back {
    animation: cardfliphide 0.5s linear 1;
}

@keyframes cardflip {
    0%, 100% {
        transform: scaleX(1);
        pointer-events: none;
    }
    50% {
        transform: scaleX(0);
    }
}

@keyframes cardflipshow {
    0%, 49% {
        visibility: visible;
        opacity: 0;
        pointer-events: none;
    }
    
    50%, 100% {
        visibility: visible;
        opacity: 1;
        pointer-events: none;
    }
}

@keyframes cardfliphide {
    0%, 49% {
        visibility: visible;
        opacity: 1;
        pointer-events: none;
    }
    
    50%, 100% {
        visibility: visible;
        opacity: 0;
        pointer-events: none;
    }
}

/*
## Card Draw Animation

Applied by `cardMove()` after moving a card to a new slot.
Slides the card from its previous position (`--animfromx`,
`--animfromy`) to its current position with a brief rotation
and fade-in. Pointer events are disabled during the animation
to prevent clicks mid-flight.
*/

.carddraw {
    animation: carddraw 0.5s ease-out 1;
    --animfromx: 10px;
    --animfromy: 10px;
}

@keyframes carddraw {
    0% {
        transform: translate(var(--animfromx), var(--animfromy));
        opacity: 0;
        pointer-events: none;
    }

    50% {
        opacity: 1;
        rotate: 5deg;
        pointer-events: none;
    }

    100% {
        transform: translate(0px, 0px);
        pointer-events: none;
    }
}

/*
## Card Highlight

Adds a bold gold-and-orange glow around a card to draw attention.
Toggled via `Card.highlightOn()` / `Card.highlightOff()`. The
`::before` pseudo-element animates a rotating box-shadow for a
pulsing, eye-catching effect.

    <div class="card card-highlight">Highlighted</div>
*/

.card-highlight {
    border-color: gold;
    box-shadow: -8px 8px 12px gold, 8px -8px 12px gold, -8px -8px 12px orange, 8px 8px 12px orange;
    z-index: 11;
}

.card-highlight::before {
    animation: card-highlight 2s linear infinite alternate;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
}

@keyframes card-highlight {
    0% {
        box-shadow: 8px 8px 12px gold, -8px -8px 12px red;
    }

    50% {
        box-shadow: -8px 8px 12px red, 8px -8px 12px gold;
    }

    100% {
        box-shadow: -8px -8px 12px gold, 8px 8px 12px red;
    }
}

/*
## Deck List

A horizontal flex container used for list-type slots that display
multiple cards side by side. Positioned absolutely at the bottom-left
of its parent. Cards inside will stack with negative margins when the
pile exceeds the `maxCardUnstack` threshold (see `slotAdjustCards()`).

    <div class="decklist">
        <div class="card">A</div>
        <div class="card">B</div>
    </div>
*/

.decklist {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    min-width: var(--cardwidth);
    height: var(--cardheight);
}


/*
## Card Menu

A context-menu dropdown anchored to a card. Positioned above the
card by default; adding `.cardtop` shifts it below, and `.cardright`
shifts it to the right side. Contains `.cardmenuitem` children
that highlight on hover. The menu is hidden (`display: none`) until
toggled open by JavaScript.

    <div class="card">
        <div class="cardmenu">
            <div class="cardmenuitem">Play</div>
            <div class="cardmenuitem">Discard</div>
        </div>
    </div>
*/

.cardmenu {
    font-size: 0.8rem;
    position: absolute;
    bottom: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #444;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 100;
}

.cardtop.cardmenu, .cardtop .cardmenu {
    bottom: unset;
    top: 100%;
}

.cardright.cardmenu, .cardright .cardmenu {
    right: unset;
    left: 100%;
    bottom: unset;
    top: 0;
}

.cardmenuitem {
    padding: 10px 20px;
    cursor: pointer;
    white-space: nowrap;
    color: black;
}

.cardmenuitem:hover {
    background-color: #eee;
}