/* =============================================================================
   Page: sub_pages/asset-gallery.html
   Downloadable image and audio assets, including the "mystery blind box"
   rarity tiers.

   Every rarity is one class that sets three custom properties. Adding a tier
   means adding four lines at the bottom of this file — no new selectors.
   ========================================================================== */

:root {
    /* The gallery reads best at a slightly narrower measure than the guides. */
    --container-max-width: 1200px;
}

/* --- Gallery sections ------------------------------------------------------ */
.image-gallery-section {
    margin-top: var(--space-8);
}

.image-gallery-section:first-of-type {
    margin-top: 0;
}

.image-gallery-section > h2 {
    font-size: 1.8rem;
    color: var(--heading-color);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

.image-gallery-section > h3 {
    font-size: 1.5rem;
    color: var(--heading-color);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-color);
    font-weight: 500;
}

/* An italic lead-in paragraph above a group of assets. */
.gallery-note {
    font-style: italic;
    margin-bottom: var(--space-4);
}

.gallery-note--mystery {
    color: #ff6b6b;
}

.gallery-note--audio {
    color: #6c5ce7;
}

/* --- Asset card ------------------------------------------------------------ */
.image-gallery-section .card {
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    align-items: center;
    text-align: center;
    justify-content: space-between;
}

.image-gallery-section .card img {
    max-width: 100%;
    height: auto;
    max-height: 150px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
    object-fit: contain;
}

/* Filenames and rarity labels sit on a dark chip so they stay legible on top
   of the coloured rarity gradients. */
.image-gallery-section .card .filename,
.image-gallery-section .card p {
    background-color: rgba(0, 0, 0, 0.6);
    padding: var(--space-1) 8px;
    border-radius: var(--radius-sm);
    margin: var(--space-1) 0;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
}

.image-gallery-section .card .filename {
    font-size: 0.9rem;
    margin-bottom: var(--space-2);
    word-break: break-all;
    flex-grow: 1;
}

.image-gallery-section .card p strong {
    font-weight: bold;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}

.image-gallery-section .card .download-link {
    background-color: rgba(0, 0, 0, 0.7);
    border-width: 2px;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
}

/* Emoji stand-in used by cards whose asset has no visual preview (audio). */
.asset-icon {
    font-size: 3rem;
    margin-bottom: var(--space-2);
}

.asset-audio {
    width: 100%;
    margin: var(--space-2) 0;
}

/* --- Rarity tiers ----------------------------------------------------------
   Contract: .rarity-card + one .rarity-card--<tier> modifier. The modifier
   supplies --rarity-color plus the two gradient stops; nothing else. */
.rarity-card {
    background: linear-gradient(to bottom right, var(--rarity-from), var(--rarity-to));
    border: 2px dashed var(--rarity-color);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.rarity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--rarity-color) 30%, transparent);
}

.image-gallery-section .rarity-card .rarity-label {
    font-size: 0.8rem;
    color: var(--rarity-color);
}

.image-gallery-section .rarity-card .rarity-label strong {
    color: var(--rarity-color);
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.9),
        0 0 10px color-mix(in srgb, var(--rarity-color) 50%, transparent);
}

.image-gallery-section .rarity-card .download-link {
    border-color: var(--rarity-color);
    color: var(--rarity-color);
}

.image-gallery-section .rarity-card .download-link:hover {
    background-color: var(--rarity-color);
    color: #ffffff;
    transform: scale(1.05);
}

/* Solid-bordered, glowing tiers. */
.rarity-card--ultra,
.rarity-card--mythic {
    border-style: solid;
}

.rarity-card--common {
    --rarity-color: #e17055;
    --rarity-from: #ffeaa7;
    --rarity-to: #fab1a0;
}

.rarity-card--rare {
    --rarity-color: #0984e3;
    --rarity-from: #81ecec;
    --rarity-to: #74b9ff;
}

.rarity-card--epic {
    --rarity-color: #6c5ce7;
    --rarity-from: #a29bfe;
    --rarity-to: #6c5ce7;
}

.rarity-card--legendary {
    --rarity-color: #e84393;
    --rarity-from: #fd79a8;
    --rarity-to: #e84393;
}

.rarity-card--ultra {
    --rarity-color: #ff9f1a;
    --rarity-from: #ffd32a;
    --rarity-to: #ff9f1a;
    box-shadow: 0 0 15px #ffd32a;
}

.rarity-card--mythic {
    --rarity-color: #00b894;
    --rarity-from: #55efc4;
    --rarity-to: #00b894;
    box-shadow: 0 0 20px #55efc4;
}

.rarity-card--ultra:hover,
.rarity-card--mythic:hover {
    box-shadow: 0 10px 25px color-mix(in srgb, var(--rarity-color) 40%, transparent);
}

/* --- Divine tier -----------------------------------------------------------
   The top tier gets an animated rainbow surface instead of a flat gradient. */
@keyframes rainbow-bg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes divine-glow {
    0% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }
    50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); }
    100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }
}

.rarity-card--divine {
    --rarity-color: gold;
    background: linear-gradient(45deg,
            #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff);
    background-size: 400% 400%;
    animation: rainbow-bg 8s ease infinite, divine-glow 3s infinite;
    border: 2px solid gold;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.rarity-card--divine:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 15px 30px rgba(255, 215, 0, 0.4);
}

.rarity-card--divine::before {
    content: "";
    position: absolute;
    inset: -10px;
    background: inherit;
    background-size: 400% 400%;
    filter: blur(10px);
    opacity: 0.7;
    z-index: -1;
    animation: rainbow-bg 8s ease infinite;
}

.image-gallery-section .rarity-card--divine .download-link {
    border-color: gold;
    color: gold;
}

.image-gallery-section .rarity-card--divine .download-link:hover {
    background-color: gold;
    color: black;
    text-shadow: none;
}

/* --- Print ----------------------------------------------------------------
   Keep the asset library compact while retaining every preview. */
@media print {

    .image-gallery-section {
        display: block !important;
        margin: 0 0 7mm !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .image-gallery-section > h2 {
        margin: 8mm 0 4mm !important;
        padding: 0 0 2mm !important;
        border: 0 !important;
        border-bottom: 1pt solid var(--accent-color) !important;
        font-size: 16.5pt !important;
        font-weight: 700 !important;
    }

    .image-gallery-section > h3 {
        margin: 5mm 0 2.5mm !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        font-size: 13pt !important;
        font-weight: 700 !important;
    }

    .image-gallery-section .grid-container {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4mm !important;
    }

    .image-gallery-section .card {
        margin: 0 !important;
        padding: 3mm !important;
        border: 0.6pt solid var(--border-color) !important;
        text-align: center !important;
        break-inside: avoid-page;
    }

    .image-gallery-section .card img {
        max-width: 88% !important;
        max-height: 28mm !important;
    }

    .image-gallery-section .card .filename,
    .image-gallery-section .card p {
        margin: 1.5mm 0 !important;
        padding: 0 !important;
        background: transparent !important;
        color: var(--text-color) !important;
        font-size: 8.5pt !important;
        text-shadow: none !important;
        word-break: break-word !important;
    }

    .asset-icon {
        font-size: 14pt !important;
    }
}