/* =========================================================
   ArmorPlus Wiki - Weapons & Tools
   ========================================================= */


/* =========================================================
   Shared Weapon Grid
   ========================================================= */

.weapons-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1rem;

    margin-top: 1.25rem;
}


/* =========================================================
   Weapon Family Card
   Used on /wiki/weapons-tools/
   ========================================================= */

.weapon-family-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);

    align-items: center;

    gap: 1rem;

    min-width: 0;

    padding: 1rem;

    color: inherit;

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

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

    border-radius: 9px;

    text-decoration: none;

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

.weapon-family-card:link,
.weapon-family-card:visited,
.weapon-family-card:hover,
.weapon-family-card:active {
    color: inherit;
    text-decoration: none;
}

.weapon-family-card:hover {
    background:
        linear-gradient(
            145deg,
            #191933,
            #121225
        );

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

    box-shadow:
        0 0 14px
        rgba(114, 137, 218, 0.12);

    transform: translateY(-2px);
}

.weapon-family-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}


/* =========================================================
   Family Card Icons
   ========================================================= */

.weapon-family-icons {
    display: grid;
    grid-template-columns: repeat(2, 48px);
    grid-template-rows: repeat(2, 48px);

    gap: 6px;

    justify-content: center;
}

.weapon-family-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    width: 48px;
    height: 48px;

    overflow: hidden;

    background: #080812;

    border: 1px solid #303055;
    border-radius: 7px;
}

.weapon-family-icon img,
.weapon-family-icon .weapon-sprite {
    display: block;

    width: 38px;
    height: 38px;

    object-fit: contain;
    image-rendering: pixelated;
}

.weapon-family-icon .weapon-sprite {
    background-repeat: no-repeat;
    background-position: center top;
}


/* =========================================================
   Family Card Information
   ========================================================= */

.weapon-family-info {
    min-width: 0;
}

.weapon-family-type {
    display: block;

    margin-bottom: 0.4rem;

    color: #8195e5;

    font-family: var(--font-accent);
    font-size: 0.55rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.wiki-article .weapon-family-card h3 {
    margin: 0 0 0.45rem;
    padding: 0;

    color: #c6d2ff;

    border: 0;

    font-family: var(--font-accent);
    font-size: 0.82rem;
    line-height: 1.5;
}

.wiki-article .weapon-family-card p {
    margin: 0;

    color: #aeb0c0;

    font-size: 0.82rem;
    line-height: 1.55;
}

.weapon-family-types {
    display: flex;
    flex-wrap: wrap;

    gap: 0.35rem;

    margin-top: 0.7rem;
}

.weapon-family-types span {
    display: inline-flex;
    align-items: center;

    padding: 0.22rem 0.42rem;

    color: #a9bfff;

    background:
        rgba(114, 137, 218, 0.07);

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

    border-radius: 4px;

    font-size: 0.67rem;
}


/* =========================================================
   Weapon Detail Grid
   Used on /coal/, /guardian/, etc.
   ========================================================= */

.weapon-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1rem;

    margin-top: 1.25rem;
}


/* =========================================================
   Individual Weapon Card
   ========================================================= */

.weapon-detail-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 1rem;

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

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

    border-radius: 9px;

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

.weapon-detail-card:hover {
    border-color:
        rgba(114, 137, 218, 0.4);

    box-shadow:
        0 0 12px
        rgba(114, 137, 218, 0.08);

    transform: translateY(-1px);
}


/* =========================================================
   Weapon Detail Header
   ========================================================= */

.weapon-detail-header {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);

    align-items: center;

    gap: 0.9rem;
}

.weapon-detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    width: 64px;
    height: 64px;

    overflow: hidden;

    background: #080812;

    border: 1px solid #35355e;
    border-radius: 9px;
}

.weapon-detail-icon img,
.weapon-detail-icon .weapon-sprite {
    display: block;

    width: 52px;
    height: 52px;

    object-fit: contain;
    image-rendering: pixelated;
}

.weapon-detail-icon .weapon-sprite {
    background-repeat: no-repeat;
    background-position: center top;
}

.weapon-detail-info {
    min-width: 0;
}

.weapon-detail-type {
    display: block;

    margin-bottom: 0.3rem;

    color: #818dbd;

    font-family: var(--font-accent);
    font-size: 0.58rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.wiki-article .weapon-detail-card h3 {
    margin: 0;
    padding: 0;

    color: #c6d2ff;

    border: 0;

    font-family: var(--font-accent);
    font-size: 0.84rem;
    line-height: 1.45;
}


/* =========================================================
   Weapon Detail Body
   ========================================================= */

.weapon-detail-body {
    display: flex;
    flex: 1;
    flex-direction: column;

    margin-top: 0.9rem;
    padding-top: 0.9rem;

    border-top:
        1px solid
        rgba(114, 137, 218, 0.12);
}

.wiki-article .weapon-detail-body p {
    margin: 0;

    color: #bfc1d0;

    font-size: 0.82rem;
    line-height: 1.55;
}

.weapon-recipe-link {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-top: auto;
    padding-top: 0.85rem;

    color: #9aafff !important;

    font-size: 0.78rem;
    font-weight: 600;

    text-decoration: none !important;
}

.weapon-recipe-link::after {
    content: "→";

    margin-left: 0.4rem;

    transition:
        transform 0.15s ease;
}

.weapon-recipe-link:hover {
    color: #ffffff !important;
}

.weapon-recipe-link:hover::after {
    transform: translateX(3px);
}


/* =========================================================
   Equipment Summary
   ========================================================= */

.weapon-equipment-summary {
    display: flex;
    flex-wrap: wrap;

    gap: 0.5rem;

    margin-top: 1.25rem;
}

.weapon-equipment-summary span {
    display: inline-flex;
    align-items: center;

    padding: 0.4rem 0.65rem;

    color: #dbe4ff;

    background:
        rgba(114, 137, 218, 0.09);

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

    border-radius: 6px;

    font-size: 0.76rem;
}


/* =========================================================
   Empty / Error State
   ========================================================= */

.weapon-empty-state {
    padding: 1rem;

    color: #aeb0c0;

    background:
        rgba(114, 137, 218, 0.05);

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

    border-radius: 8px;

    font-size: 0.85rem;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 760px) {

    .weapons-grid,
    .weapon-detail-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 480px) {

    .weapon-family-card {
        grid-template-columns: 1fr;
    }

    .weapon-family-icons {
        grid-template-columns: repeat(4, 48px);
        grid-template-rows: 48px;

        justify-content: start;
    }

    .weapon-detail-header {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .weapon-detail-icon {
        width: 56px;
        height: 56px;
    }

    .weapon-detail-icon img,
    .weapon-detail-icon .weapon-sprite {
        width: 44px;
        height: 44px;
    }

}

/* =========================================================
   Weapon Equipment Preview
   ========================================================= */

.weapon-equipment-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 0.75rem;

    margin-top: 1rem;
}


.weapon-equipment-card {
    min-width: 0;

    padding: 1rem;

    text-align: center;

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

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

    border-radius: 9px;
}


.weapon-equipment-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 72px;

    margin-bottom: 0.7rem;
}


/*
 * createItemSlot() provides its own item-slot element.
 * Don't let global anchor rules change its appearance.
 */

.weapon-equipment-icon a {
    text-decoration: none;
}


.weapon-equipment-info {
    min-width: 0;
}


.weapon-equipment-type {
    display: block;

    margin-bottom: 0.35rem;

    color: #818dbd;

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

    font-size: 0.58rem;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.wiki-article .weapon-equipment-card h3 {
    margin: 0;

    padding: 0;

    color: #c6d2ff;

    border: 0;

    font-size: 0.76rem;

    line-height: 1.45;
}


/* =========================================================
   Embedded Weapon Recipes
   ========================================================= */

.weapon-page-recipes {
    display: grid;

    gap: 1.25rem;

    margin-top: 1rem;
}


/*
 * Recipes already receive their primary styling from
 * /armorplus/recipes/recipes.css.
 *
 * These rules only adapt them to the wiki article.
 */

.weapon-page-recipes .recipe-card {
    margin:
        0;
}


.weapon-page-recipes h3:first-child {
    margin-top:
        0;
}


/* =========================================================
   Weapon Stats
   ========================================================= */

.weapon-stats-grid {
    display: grid;

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

    gap:
        1rem;

    margin-top:
        1rem;
}


.weapon-stats-card {
    min-width:
        0;

    padding:
        1rem;

    background:
        #121226;

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

    border-radius:
        8px;
}


.weapon-stats-header {
    display:
        flex;

    align-items:
        center;

    gap:
        0.75rem;

    margin-bottom:
        0.85rem;
}


.weapon-stats-header h3 {
    margin:
        0 !important;
}


.weapon-stats-list {
    display:
        grid;

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

    gap:
        0;
}


.weapon-stats-list dt,
.weapon-stats-list dd {
    margin:
        0;

    padding:
        0.5rem 0;

    border-bottom:
        1px solid
        rgba(114, 137, 218, 0.09);
}


.weapon-stats-list dt {
    color:
        #8f98ba;

    font-size:
        0.75rem;
}


.weapon-stats-list dd {
    padding-left:
        1rem;

    color:
        #d6ddff;

    font-size:
        0.78rem;

    font-weight:
        600;

    text-align:
        right;
}


.weapon-stats-list dt:last-of-type,
.weapon-stats-list dd:last-of-type {
    border-bottom:
        0;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 760px) {

    .weapon-equipment-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .weapon-stats-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 420px) {

    .weapon-equipment-grid {
        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   Material Effects
   ========================================================= */

.weapon-effects {
    margin-top: 1.5rem;
}

.wiki-article .weapon-effects h3 {
    margin: 0 0 0.75rem;
    padding: 0;
    color: #a9bfff;
    border: 0;
    font-family: var(--font-accent);
    font-size: 0.72rem;
}

.weapon-effect-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.weapon-effect-list span {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.5rem;
    color: #c6d2ff;
    background: rgba(114, 137, 218, 0.08);
    border: 1px solid rgba(114, 137, 218, 0.24);
    border-radius: 5px;
    font-size: 0.72rem;
    line-height: 1.35;
}