/* ============================================================
   Deck Card Grid — Canonical Layout
============================================================ */

:root {
    --card-canonical-width: 480px;
    --card-max-columns: 5;
    --grid-gap: 1.5rem;
}

/* Grid wrapper */
#deck-cards {
    width: 100%;
    padding: 2rem;

    display: grid;
    gap: var(--grid-gap);

    justify-content: center;
    align-content: start;

    box-sizing: border-box;
}

/* ------------------------------------------------------------
   Responsive column control
------------------------------------------------------------ */

/* Mobile: 1 column, full width */
@media (max-width: 599px) {
    #deck-cards {
        grid-template-columns: 1fr;
    }
}

/* Tablet: 2 columns */
@media (min-width: 600px) and (max-width: 899px) {
    #deck-cards {
        grid-template-columns: repeat(2, minmax(0, var(--card-canonical-width)));
    }
}

/* Small desktop: 3 columns */
@media (min-width: 900px) and (max-width: 1199px) {
    #deck-cards {
        grid-template-columns: repeat(3, minmax(0, var(--card-canonical-width)));
    }
}

/* Desktop: 4 columns */
@media (min-width: 1200px) and (max-width: 1599px) {
    #deck-cards {
        grid-template-columns: repeat(4, minmax(0, var(--card-canonical-width)));
    }
}

/* Large desktop: cap at 5 columns */
@media (min-width: 1600px) {
    #deck-cards {
        grid-template-columns: repeat(5, minmax(0, var(--card-canonical-width)));
    }
}

/* ------------------------------------------------------------
   Card frame
------------------------------------------------------------ */

.card-frame {
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.deck-card-frame {
    width: 100%;
    max-width: var(--card-canonical-width);
    position: relative;
    box-sizing: border-box;
}