/* ==========================================================================
   Deck Viewer Styles - Tailwind Theme Compatible
   ========================================================================== */

@import url("/static/events/fonts/mm_font.css");

/* --------------------------------------------------------------------------
   CSS Variables (inherit from Tailwind theme)
   -------------------------------------------------------------------------- */
:root {
    --card-width: 180px;
    --card-height: 251px;
    --card-stack-offset: 45px;
    --card-border-radius: 12px;
    --transition-fast: 0.2s ease-out;
    --transition-normal: 0.4s ease-out;
    --side-scale-factor: -3.2;
}

/* --------------------------------------------------------------------------
   Section Background
   -------------------------------------------------------------------------- */
#deck_view {
    /*background-image: var(--deck-bg);*/
    /*background-size: cover;*/
    /*background-position: center;*/
    /*background-attachment: fixed;*/
    min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Main Deck Grid - 5 columns layout
   -------------------------------------------------------------------------- */
.main-deck-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    justify-items: center;
}

/* Each card stack (column of 4 cards) */
.card-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-height: calc(var(--card-height) + (3 * var(--card-stack-offset)));
}

.card-stack .card {
    position: absolute;
}

.card-stack .card:nth-child(1) { top: 0; z-index: 4; }
.card-stack .card:nth-child(2) { top: var(--card-stack-offset); z-index: 3; }
.card-stack .card:nth-child(3) { top: calc(var(--card-stack-offset) * 2); z-index: 2; }
.card-stack .card:nth-child(4) { top: calc(var(--card-stack-offset) * 3); z-index: 1; }

/* Main deck row spacing */
.main-deck-row {
    margin-bottom: 2rem;
}

.main-deck-row:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Sideboard Grid - stacked cards in groups of 3
   -------------------------------------------------------------------------- */
.sideboard-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
}

.sideboard-grid .card-wrapper {
    position: relative;
}

/* Stack sideboard cards - every 3rd card starts a new stack */
/* Each subsequent stack has higher z-index so it appears on top */

/* Stack 1 (cards 1-3) */
.sideboard-grid .card-wrapper:nth-child(1) { margin-top: 0; z-index: 1; }
.sideboard-grid .card-wrapper:nth-child(2) { margin-top: calc(-1 * (var(--card-width) * 1.4 - var(--stack-visible))); z-index: 2; }
.sideboard-grid .card-wrapper:nth-child(3) { margin-top: calc(-1 * (var(--card-width) * 1.4 - var(--stack-visible))); z-index: 3; }

/* Stack 2 (cards 4-6) - on top of stack 1 */
.sideboard-grid .card-wrapper:nth-child(4) { margin-top: calc(var(--stack-visible) * var(--side-scale-factor)); z-index: 10; }
.sideboard-grid .card-wrapper:nth-child(5) { margin-top: calc(-1 * (var(--card-width) * 1.4 - var(--stack-visible))); z-index: 11; }
.sideboard-grid .card-wrapper:nth-child(6) { margin-top: calc(-1 * (var(--card-width) * 1.4 - var(--stack-visible))); z-index: 12; }

/* Stack 3 (cards 7-9) - on top of stack 2 */
.sideboard-grid .card-wrapper:nth-child(7) { margin-top: calc(var(--stack-visible) * var(--side-scale-factor)); z-index: 20; }
.sideboard-grid .card-wrapper:nth-child(8) { margin-top: calc(-1 * (var(--card-width) * 1.4 - var(--stack-visible))); z-index: 21; }
.sideboard-grid .card-wrapper:nth-child(9) { margin-top: calc(-1 * (var(--card-width) * 1.4 - var(--stack-visible))); z-index: 22; }

/* Stack 4 (cards 10-12) - on top of stack 3 */
.sideboard-grid .card-wrapper:nth-child(10) { margin-top: calc(var(--stack-visible) * var(--side-scale-factor)); z-index: 30; }
.sideboard-grid .card-wrapper:nth-child(11) { margin-top: calc(-1 * (var(--card-width) * 1.4 - var(--stack-visible))); z-index: 31; }
.sideboard-grid .card-wrapper:nth-child(12) { margin-top: calc(-1 * (var(--card-width) * 1.4 - var(--stack-visible))); z-index: 32; }

/* Stack 5 (cards 13-15) - on top of stack 4 */
.sideboard-grid .card-wrapper:nth-child(13) { margin-top: calc(var(--stack-visible) * var(--side-scale-factor)); z-index: 40; }
.sideboard-grid .card-wrapper:nth-child(14) { margin-top: calc(-1 * (var(--card-width) * 1.4 - var(--stack-visible))); z-index: 41; }
.sideboard-grid .card-wrapper:nth-child(15) { margin-top: calc(-1 * (var(--card-width) * 1.4 - var(--stack-visible))); z-index: 42; }

.sideboard-grid .card-wrapper:hover {
    z-index: 100 !important;
}

.sideboard-grid .card {
    position: relative;
}

/* --------------------------------------------------------------------------
   Card Base Styles
   -------------------------------------------------------------------------- */
.card {
    width: var(--card-width);
    height: auto;
    transition: var(--transition-fast);
    border-radius: var(--card-border-radius);
    background-color: transparent;
    border: none;
    display: block;
}

.card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--card-border-radius);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
}

.card:hover {
    transform: translateY(-15px) scale(1.05);
    transition: var(--transition-normal);
    z-index: 100 !important;
}

.card:hover img {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */
.flipped {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

.no-padding {
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   GLightBox Customization
   -------------------------------------------------------------------------- */
.glightbox-clean .gslide-title {
    font-size: 1.6em;
    font-weight: 500;
    font-family: "MagicMedieval Regular", serif;
    color: hsl(var(--foreground));
    margin-bottom: 0.5rem !important;
    line-height: 1.4em;
}

.glightbox-clean .gslide-desc {
    font-size: 1.2rem;
    margin-bottom: 0;
    font-family: "Gentium Plus", serif;
    line-height: 1.5em;
    color: hsl(var(--muted-foreground));
}

.glightbox-clean .gslide-description {
    background: hsl(var(--card));
    border-left: 3px solid hsl(var(--primary));
}

.card_type {
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

/* Mana colors */
.ms-r { color: #d32f2f; }
.ms-w { color: #f5f5dc; text-shadow: 0 0 2px #000; }
.ms-u { color: #1976d2; }
.ms-b { color: #212121; }
.ms-g { color: #388e3c; }
.ms-c { color: #8d6e63; }

@media (min-width: 769px) {
    .gslide-description.description-left,
    .gslide-description.description-right {
        max-width: 420px;
    }
}

/* --------------------------------------------------------------------------
   Responsive Breakpoints
   -------------------------------------------------------------------------- */

/* Extra Large screens */
@media (min-width: 1920px) {
    :root {
        --card-width: 200px;
        --card-height: 279px;
        --card-stack-offset: 50px;
    }
}

/* Large screens */
@media (max-width: 1599px) {
    :root {
        --card-width: 160px;
        --card-height: 223px;
        --card-stack-offset: 40px;
    }
}

/* Medium screens */
@media (max-width: 1399px) {
    :root {
        --card-width: 140px;
        --card-height: 195px;
        --card-stack-offset: 35px;
    }
}

/* Small-Medium screens / iPad landscape */
@media (max-width: 1199px) {
    :root {
        --card-width: 110px;
        --card-height: 154px;
        --card-stack-offset: 28px;
        --side-scale-factor: -2.8;
    }
}

/* iPad portrait */
@media (max-width: 991px) {
    :root {
        --card-width: 90px;
        --card-height: 126px;
        --card-stack-offset: 22px;
        --side-scale-factor: -2.5;
    }
}

/* Large mobile / iPhone landscape */
@media (max-width: 767px) {
    :root {
        --card-width: 70px;
        --card-height: 98px;
        --card-stack-offset: 18px;
        --side-scale-factor: -2.2;
    }

    .card:hover {
        transform: translateY(-8px) scale(1.02);
    }
}

/* iPhone portrait */
@media (max-width: 479px) {
    :root {
        --card-width: 55px;
        --card-height: 77px;
        --card-stack-offset: 14px;
        --side-scale-factor: -2.0;
    }

    .card:hover {
        transform: translateY(-5px) scale(1.01);
    }
}

/* Very small iPhone SE */
@media (max-width: 375px) {
    :root {
        --card-width: 48px;
        --card-height: 67px;
        --card-stack-offset: 12px;
        --side-scale-factor: -1.8;
    }
}