/* =========================================================
   ArmorPlus Gallery
   ========================================================= */


/* =========================================================
   Armor Category Dropdown
   ========================================================= */

.armor-category {
    overflow: visible;
}


.armor-category summary {
    display: flex;
    align-items: center;

    gap: .75rem;

    padding:
        1rem 1.5rem;

    cursor:
        pointer;

    color:
        var(--accent);

    background:
        #141430;

    border-bottom:
        1px solid
        rgba(114, 137, 218, .25);

    font-family:
        var(--font-accent);

    font-size:
        1rem;

    list-style:
        none;

    transition:
        background .2s ease,
        color .2s ease;
}


.armor-category summary:hover {
    background:
        rgba(114, 137, 218, .08);
}


.armor-category summary::marker {
    display:
        none;

    content:
        "";
}


.armor-category summary::-webkit-details-marker {
    display:
        none;
}


/* =========================================================
   Category Arrow
   ========================================================= */

.category-arrow {
    display:
        inline-block;

    flex:
        0 0 auto;

    font-size:
        .8rem;

    transition:
        transform .25s ease;
}


.armor-category[open] .category-arrow {
    transform:
        rotate(90deg);
}


.armor-category-content {
    overflow:
        visible;
}


/* =========================================================
   Gallery Hint
   ========================================================= */

.gallery-hint {
    display:
        flex;

    align-items:
        center;

    gap:
        .5rem;

    width:
        fit-content;

    margin:
        .75rem 0 1.5rem;

    padding:
        .55rem .8rem;

    color:
        #a9bfff;

    background:
        rgba(114, 137, 218, .08);

    border:
        1px solid
        rgba(114, 137, 218, .3);

    border-radius:
        8px;

    font-family:
        var(--font-body);

    font-size:
        .85rem;

    font-weight:
        500;

    line-height:
        1.4;
}


.gallery-hint-icon {
    flex:
        0 0 auto;

    color:
        var(--accent);

    font-family:
        var(--font-accent);

    font-size:
        1rem;

    line-height:
        1;
}


/* =========================================================
   Armor Card
   ========================================================= */

.gallery-group {
    display:
        grid;

    grid-template-columns:
        auto minmax(0, 1fr);

    align-items:
        center;

    gap:
        1.5rem;

    margin-bottom:
        1.25rem;

    padding:
        1.5rem;

    background:
        linear-gradient(
            145deg,
            #181832,
            #101020
        );

    border:
        1px solid
        rgba(114, 137, 218, .15);

    border-radius:
        12px;

    overflow:
        visible;

    scroll-margin-top:
        24px;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.gallery-group:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(114, 137, 218, .5);

    box-shadow:
        0 0 15px
        rgba(114, 137, 218, .18);
}


.gallery-group:target {
    border-color:
        var(--accent);

    box-shadow:
        0 0 18px
        rgba(114, 137, 218, .28);
}


/* =========================================================
   Armor Item Row
   ========================================================= */

.armor-items {
    display:
        flex;

    align-items:
        center;

    gap:
        .6rem;

    overflow:
        visible;
}


.armor-item {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        visible;
}


/* =========================================================
   Armor Icons
   ========================================================= */

.armor-icon {
    box-sizing:
        border-box;

    width:
        64px;

    height:
        64px;

    padding:
        6px;

    background:
        #080812;

    border:
        2px solid
        #2d2d55;

    border-radius:
        10px;

    object-fit:
        contain;

    image-rendering:
        pixelated;

    cursor:
        help;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.armor-icon:hover {
    transform:
        scale(1.08);

    border-color:
        var(--accent);

    box-shadow:
        var(--border-glow);
}


/* =========================================================
   Armor Information
   ========================================================= */

.armor-info {
    min-width:
        0;
}


.gallery-group h3 {
    margin:
        0 0 .5rem;

    padding-bottom:
        .45rem;

    color:
        var(--accent);

    border-bottom:
        1px solid
        rgba(140, 165, 255, .8);

    font-family:
        var(--font-accent);

    font-size:
        1rem;

    line-height:
        1.4;
}


.gallery-group p {
    margin:
        .5rem 0;

    color:
        #c5c5d8;

    line-height:
        1.55;
}


/* =========================================================
   Minecraft Item Tooltip
   ========================================================= */

.minecraft-tooltip {
    position:
        absolute;

    left:
        50%;

    bottom:
        calc(100% + 12px);

    z-index:
        1000;

    min-width:
        240px;

    max-width:
        340px;

    padding:
        9px 11px;

    color:
        #ffffff;

    background:
        rgba(16, 0, 16, .97);

    border:
        2px solid
        #2a0a55;

    border-radius:
        2px;

    box-shadow:
        inset 0 0 0 1px #5000a0,
        3px 3px 0 rgba(0, 0, 0, .45);

    font-family:
        var(--font-heading);

    font-size:
        9px;

    line-height:
        1.7;

    text-align:
        left;

    white-space:
        nowrap;

    pointer-events:
        none;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateX(-50%)
        translateY(5px);

    transition:
        opacity .08s ease,
        visibility .08s ease,
        transform .08s ease;
}


.armor-item:hover .minecraft-tooltip {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   Tooltip Content
   ========================================================= */

.tooltip-name {
    margin-bottom:
        8px;

    color:
        #55ffff;
}


.tooltip-slot {
    margin-top:
        5px;

    color:
        #aaaaaa;
}


.tooltip-stat {
    color:
        #5555ff;
}


.tooltip-extra-section {
    margin-top:
        8px;

    padding-top:
        6px;

    border-top:
        1px solid
        rgba(170, 170, 170, .2);
}


.tooltip-extra {
    color:
        #aaaaaa;
}


/* =========================================================
   Armor Actions
   ========================================================= */

.armor-actions {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        .6rem;

    margin-top:
        1rem;
}


/* =========================================================
   Effects Button
   ========================================================= */

.armor-effects {
    position:
        relative;

    margin:
        0;
}


.effects-button {
    box-sizing:
        border-box;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        .4rem;

    min-height:
        34px;

    padding:
        .45rem .7rem;

    color:
        #a9bfff;

    background:
        rgba(114, 137, 218, .07);

    border:
        1px solid
        rgba(114, 137, 218, .5);

    border-radius:
        7px;

    font-family:
        var(--font-accent);

    font-size:
        .72rem;

    line-height:
        1;

    cursor:
        default;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.effects-button:hover,
.effects-button:focus-visible {
    color:
        #ffffff;

    background:
        rgba(114, 137, 218, .18);

    border-color:
        var(--accent);

    box-shadow:
        0 0 10px
        rgba(114, 137, 218, .18);

    transform:
        translateY(-1px);
}


.effects-button:focus-visible {
    outline:
        2px solid
        var(--accent);

    outline-offset:
        3px;
}


/* =========================================================
   Recipe Link
   ========================================================= */

.armor-recipe-link {
    box-sizing:
        border-box;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        .45rem;

    min-height:
        34px;

    width:
        fit-content;

    padding:
        .45rem .7rem;

    color:
        #a9bfff;

    background:
        rgba(114, 137, 218, .07);

    border:
        1px solid
        rgba(114, 137, 218, .5);

    border-radius:
        7px;

    font-family:
        var(--font-accent);

    font-size:
        .72rem;

    line-height:
        1;

    text-decoration:
        none;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.armor-recipe-link::before {
    content:
        "▦";

    font-size:
        .8rem;

    line-height:
        1;
}


.armor-recipe-link:hover {
    color:
        #ffffff;

    background:
        rgba(114, 137, 218, .18);

    border-color:
        var(--accent);

    box-shadow:
        0 0 10px
        rgba(114, 137, 218, .18);

    transform:
        translateY(-1px);
}


.armor-recipe-link:focus-visible {
    outline:
        2px solid
        var(--accent);

    outline-offset:
        3px;
}


/* =========================================================
   Effects Popup
   ========================================================= */

.effects-popup {
    position:
        absolute;

    left:
        0;

    bottom:
        calc(100% + 10px);

    z-index:
        20;

    min-width:
        220px;

    padding:
        1rem;

    background:
        #111122;

    border:
        2px solid
        var(--accent);

    border-radius:
        6px;

    box-shadow:
        0 0 15px
        rgba(114, 137, 218, .5);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateY(8px);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;
}


.armor-effects:hover .effects-popup,
.armor-effects:focus-within .effects-popup {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateY(0);
}


.effects-popup strong {
    display:
        block;

    margin-bottom:
        .5rem;

    color:
        var(--accent);

    font-family:
        var(--font-accent);
}


.effects-popup ul {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(120px, 1fr)
        );

    gap:
        .35rem .75rem;

    padding:
        0;

    margin:
        0;

    list-style:
        none;
}


.effects-popup li {
    padding:
        .35rem .7rem;

    color:
        #dbe4ff;

    background:
        #1e2438;

    border:
        1px solid
        rgba(114, 137, 218, .5);

    border-radius:
        8px;

    font-size:
        .8rem;
}


.effects-popup:not(.long-effects) ul {
    grid-template-columns:
        1fr;
}


/* =========================================================
   Animated Lava Armor
   ========================================================= */

.lava-sprite {
    width:
        64px;

    height:
        64px;

    background-size:
        64px 192px;

    image-rendering:
        pixelated;
}


@keyframes lavaFlow {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            0 -192px;
    }

}


/* =========================================================
   Quick Reference / Recipes Button
   ========================================================= */

.recipe-button {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        .55rem;

    color:
        #a9bfff;

    background:
        linear-gradient(
            135deg,
            rgba(114, 137, 218, .12),
            rgba(114, 137, 218, .04)
        );

    border-color:
        #a9bfff;
}


.recipe-button::before {
    content:
        "▦";

    font-family:
        var(--font-accent);

    font-size:
        1rem;
}


.recipe-button:hover {
    color:
        #ffffff;

    background:
        var(--accent);

    border-color:
        var(--accent);
}


/* =========================================================
   Supported Minecraft Versions
   ========================================================= */

#supported-versions {
    display:
        grid;

    gap:
        10px;

    margin:
        20px 0;
}


/* =========================================================
   Version Row
   ========================================================= */

.version-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    padding:
        15px 16px;

    background:
        linear-gradient(
            135deg,
            rgba(10, 15, 35, .45),
            rgba(20, 20, 48, .45)
        );

    border:
        1px solid
        rgba(120, 150, 255, .25);

    border-radius:
        8px;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.version-row:hover {
    transform:
        translateY(-1px);

    background:
        rgba(114, 137, 218, .07);

    border-color:
        rgba(120, 150, 255, .5);

    box-shadow:
        0 0 10px
        rgba(114, 137, 218, .08);
}


/* =========================================================
   Version Main
   ========================================================= */

.version-main {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        .65rem;

    min-width:
        0;
}


/* =========================================================
   Version Information
   ========================================================= */

.version-info {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.version-number {
    color:
        var(--text-color);

    font-family:
        var(--font-body);

    font-size:
        .95rem;

    font-weight:
        700;

    line-height:
        1.3;
}


/* =========================================================
   Latest Version Badge
   ========================================================= */

.version-latest {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        .25rem .45rem;

    color:
        #ffffff;

    background:
        rgba(114, 137, 218, .15);

    border:
        1px solid
        var(--accent);

    border-radius:
        4px;

    font-family:
        var(--font-accent);

    font-size:
        .58rem;

    font-weight:
        600;

    line-height:
        1.3;

    letter-spacing:
        .03em;

    text-transform:
        uppercase;
}


/* =========================================================
   Loader Badges
   ========================================================= */

.version-loaders {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    flex:
        0 0 auto;

    gap:
        7px;
}


.version-loader {
    box-sizing:
        border-box;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        30px;

    padding:
        .35rem .6rem;

    color:
        #a9bfff;

    background:
        rgba(114, 137, 218, .07);

    border:
        1px solid
        rgba(114, 137, 218, .45);

    border-radius:
        5px;

    font-family:
        var(--font-body);

    font-size:
        .75rem;

    font-weight:
        600;

    line-height:
        1.2;
}


/* =========================================================
   Version Download Buttons
   ========================================================= */

.version-downloads {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        .5rem;
}


.version-download {
    box-sizing:
        border-box;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        .4rem;

    min-height:
        32px;

    width:
        fit-content;

    padding:
        .4rem .65rem;

    color:
        #a9bfff;

    background:
        linear-gradient(
            135deg,
            rgba(114, 137, 218, .10),
            rgba(114, 137, 218, .04)
        );

    border:
        1px solid
        rgba(114, 137, 218, .4);

    border-radius:
        5px;

    font-family:
        var(--font-body);

    font-size:
        .75rem;

    font-weight:
        500;

    line-height:
        1.2;

    text-decoration:
        none;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.version-download::after {
    content:
        "↗";

    font-size:
        .7rem;

    line-height:
        1;

    transition:
        transform .2s ease;
}


.version-download:hover {
    color:
        #ffffff;

    background:
        rgba(114, 137, 218, .18);

    border-color:
        var(--accent);

    box-shadow:
        0 0 8px
        rgba(114, 137, 218, .18);

    transform:
        translateY(-1px);
}


.version-download:hover::after {
    transform:
        translate(2px, -1px);
}


.version-download:focus-visible {
    outline:
        2px solid
        var(--accent);

    outline-offset:
        3px;
}


/* =========================================================
   Tablet / Mobile Gallery
   ========================================================= */

@media (max-width: 700px) {

    #gallery {
        max-width:
            500px;

        margin:
            0 auto;
    }


    .gallery-group {
        grid-template-columns:
            1fr;

        align-items:
            stretch;

        gap:
            1rem;

        padding:
            1rem;
    }


    .armor-items {
        justify-content:
            center;

        flex-wrap:
            wrap;

        gap:
            .35rem;
    }


    .armor-icon,
    .lava-sprite {
        width:
            44px;

        height:
            44px;

        padding:
            4px;
    }


    .lava-sprite {
        background-size:
            44px 132px;
    }


    .gallery-group h3 {
        font-size:
            1rem;
    }


    .gallery-group p {
        font-size:
            .9rem;
    }


    .armor-actions {
        gap:
            .5rem;
    }


    /*
        Armor item tooltips become fixed overlays
        on smaller screens.
    */
    .minecraft-tooltip {
        position:
            fixed;

        left:
            50%;

        bottom:
            20px;

        min-width:
            240px;

        max-width:
            calc(100vw - 50px);

        white-space:
            normal;

        transform:
            translateX(-50%)
            translateY(10px);

        z-index:
            2000;
    }


    .armor-item:hover .minecraft-tooltip {
        transform:
            translateX(-50%)
            translateY(0);
    }


    /*
        Effects popup becomes a fixed overlay
        on smaller screens.
    */
    .effects-popup {
        position:
            fixed;

        left:
            50%;

        bottom:
            20px;

        max-width:
            calc(100vw - 50px);

        transform:
            translateX(-50%)
            translateY(10px);

        z-index:
            2000;
    }


    .armor-effects:hover .effects-popup,
    .armor-effects:focus-within .effects-popup {
        transform:
            translateX(-50%)
            translateY(0);
    }

}


/* =========================================================
   Versions - Mobile
   ========================================================= */

@media (max-width: 600px) {

    .version-row {
        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            12px;

        padding:
            14px;
    }


    .version-main {
        width:
            100%;
    }


    .version-loaders {
        justify-content:
            flex-start;
    }


    .version-downloads {
        width:
            100%;
    }


    .version-download {
        max-width:
            100%;
    }

}


/* =========================================================
   Very Small Screens
   ========================================================= */

@media (max-width: 420px) {

    .armor-category summary {
        padding:
            .9rem 1rem;

        font-size:
            .85rem;
    }


    .gallery-group {
        padding:
            .85rem;
    }


    .armor-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .effects-button,
    .armor-recipe-link {
        width:
            100%;
    }


    .version-info {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .version-downloads {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .version-download {
        width:
            100%;

        justify-content:
            space-between;
    }

}