/* =========================================================================
   gameManager/MTG/cardExtras.css — 2026-08-30 STACKS / FLIP / TOKENS batch.

   Styling for three JS-created features (no index.php markup):
     1. CARD STACKS (mechanics/cardAttach.js) — the hovered host's float
        + slap-down, driven through the independent CSS `translate`/`scale`
        properties so the inline transform strings hand.js owns are never
        touched (the same trick cardFeel.js uses with `rotate`).
     2. FLIP OVER (mechanics/cardFlip.js + the icon cardDice.js creates) —
        the second icon of the hover pair, sitting to the RIGHT of the
        dice; the pair stays centered on the card together.
     3. THE TOKEN DRAWER (mechanics/tokenDrawer.js) — the round button
        under the ☰ and the top-edge token fan.

   Scoping: every selector is .attach-*, .flip-btn*, .token-*, #tokenDrawer
   or #tokenButton — nothing existing is restyled.
   ========================================================================= */

/* ---------------------------------------------------------------------
   1. CARD STACKS — the host float ("pick the card up off the table")
   --------------------------------------------------------------------- */

/* Give every card a resting translate so the float transitions smoothly.
   `translate` composes with the transform strings hand.js writes — the
   card lifts whatever scale/rotate it currently carries. */
.card {
    translate: 0 0;
    transition-property: transform, rotate, translate, box-shadow, filter;
    transition-duration: 0.22s, 0.3s, 0.25s, 0.25s, 0.25s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1),
                                cubic-bezier(0.34, 1.56, 0.64, 1),
                                cubic-bezier(0.3, 0.9, 0.3, 1),
                                ease,
                                ease;
}

/* The hovered drop host — lifted up-left, floating shadow: the exact
   reverse of the presentation's final slap-down. */
.card.attach-float {
    translate: -8px -16px;
    box-shadow: 0 26px 44px rgba(0, 0, 0, 0.45),
                0 10px 18px rgba(0, 0, 0, 0.3),
                0 0 16px rgba(255, 235, 170, 0.45) !important;
    filter: brightness(1.06);
}

/* The slap back down — a quick squash-and-settle via the independent
   `scale` property (inline transforms untouched). */
.card.attach-land {
    animation: attachLand 0.3s cubic-bezier(0.55, 0, 0.6, 1.4);
}

@keyframes attachLand {
    0%   { scale: 1; }
    45%  { scale: 0.955; }
    100% { scale: 1; }
}

/* ---------------------------------------------------------------------
   2. FLIP OVER — the second icon of the hover pair (cardDice.js builds
   both). The dice pair shifts left of center; the flip icon sits right
   of center; together they read as one centered control cluster, and
   they rise together when the card carries dice.
   --------------------------------------------------------------------- */
.dice-btn.dice-btn-paired {
    margin-left: -48px;   /* pair layout: dice left of the card's midline */
}

.flip-btn {
    position: absolute;
    top: -11px;
    left: 50%;
    width: 34px;
    height: 24px;
    margin-left: 8px;      /* pair layout: flip right of the card's midline */
    z-index: 20;
    cursor: pointer;
    opacity: 0;
    transform: translateY(3px) scale(0.92);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    color: #f4ead2;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 4px rgba(255, 235, 170, 0.35));
}

.flip-btn.flip-btn-raised {
    top: -28px;            /* rise with the dice when the card carries dice */
}

.flip-btn.flip-btn-show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Same invisible hover bridge the raised dice icon has (dice.css) — a slow
   pointer can cross the gap without deselecting the card. */
.flip-btn.flip-btn-raised.flip-btn-show::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 8px;
}

.flip-btn:hover {
    transform: translateY(-1px) scale(1.12);
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 7px rgba(255, 220, 130, 0.75));
}

.flip-btn svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ---------------------------------------------------------------------
   3. THE TOKEN DRAWER
   --------------------------------------------------------------------- */

/* The round button under the ☰ — .menu-button's 40×40 language. Fixed so
   it never moves with the board; hidden outside games / token-less decks. */
.token-button {
    position: fixed;
    top: 64px;
    left: 10px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1002;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: background-color 0.15s ease, transform 0.12s ease;
}

.token-button:hover {
    background: #fff;
    transform: translateY(-1px);
}

.token-button.token-button-open {
    background: #ffd27a;
}

.token-button.hidden {
    display: none;
}

body.game-on.bs-on .token-button {
    background: rgba(30, 30, 36, 0.85);
    color: rgba(255, 255, 255, 0.9);
}

body.game-on.bs-on .token-button.token-button-open {
    background: rgba(240, 184, 74, 0.9);
    color: #2a1d05;
}

/* The drawer — the graveyard fan's interaction, parked on the TOP edge.
   Cards are positioned/scaled inline by tokenDrawer.js. */
#tokenDrawer {
    position: fixed;
    top: -1vh;
    left: 5px;
    right: 5px;
    height: 15vh;
    z-index: 1001;
}

#tokenDrawer .card.token-drawer-card {
    cursor: grab;
}

#tokenDrawer .card.token-drawer-card:active {
    cursor: grabbing;
}

/* The dragged COPY — the original stays in the drawer */
.token-drag-clone {
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.45),
                0 8px 16px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .card.attach-float,
    .card.attach-land,
    .flip-btn,
    .token-button {
        transition: none;
        animation: none;
    }
}