/* =========================================================
   VIKING RISE SINGULARITY
   Mechanics Database
   ========================================================= */


/* =========================================================
   MECHANICS GRID
   ========================================================= */

.mechanics-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 30px;

    width: 100%;

}



/* =========================================================
   SEARCH INPUT
   ========================================================= */

#mechanicsSearch {

    width: 100%;

    padding: 13px 16px;

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

    border-radius: 6px;

    outline: none;

    background:
        var(--surface);

    color:
        var(--text);

    font-family:
        inherit;

    font-size:
        0.85rem;

    line-height:
        1.4;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;

}


#mechanicsSearch::placeholder {

    color:
        var(--text-muted);

}


#mechanicsSearch:focus {

    border-color:
        var(--border-red);

    background:
        var(--surface-light);

}



/* =========================================================
   MECHANICS CARD
   ========================================================= */

.mechanic-card {

    position: relative;

    display: block;

    width: 100%;

    padding: 30px 40px;

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

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.018),
            rgba(197, 31, 50, 0.018)
        );

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

}


.mechanic-card:hover {

    border-color:
        rgba(
            197,
            31,
            50,
            0.55
        );

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.025),
            rgba(197, 31, 50, 0.035)
        );

    transform:
        translateY(-2px);

}



/* =========================================================
   CARD HEADER
   ========================================================= */

.mechanic-card-header {

    margin-bottom:
        18px;

}


.mechanic-title {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

}


.mechanic-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

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

    border-radius:
        7px;

    background:
        rgba(
            255,
            255,
            255,
            0.02
        );

    font-size:
        1.35rem;

}


.mechanic-title h3 {

    margin:
        0 0 7px;

    color:
        var(--text);

    font-size:
        1.3rem;

    font-weight:
        800;

    line-height:
        1.3;

}



/* =========================================================
   MECHANIC TYPE
   ========================================================= */

.mechanic-type {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        5px 9px;

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

    border-radius:
        5px;

    color:
        var(--text-muted);

    font-size:
        0.65rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}



/* =========================================================
   DESCRIPTION
   ========================================================= */

.mechanic-description {

    margin:
        0 0 24px;

    color:
        var(--text);

    font-size:
        0.95rem;

    line-height:
        1.75;

}



/* =========================================================
   DETAILS
   ========================================================= */

.mechanic-detail {

    padding:
        18px 0;

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

}


.mechanic-detail-label {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--text-muted);

    font-size:
        0.65rem;

    font-weight:
        900;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

}


.mechanic-detail-value {

    color:
        var(--text);

    font-size:
        0.9rem;

    line-height:
        1.6;

}



/* =========================================================
   TAGS
   ========================================================= */

.mechanic-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

}


.mechanic-tag {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        7px 11px;

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

    border-radius:
        5px;

    background:
        rgba(
            255,
            255,
            255,
            0.02
        );

    color:
        var(--text);

    font-size:
        0.67rem;

    font-weight:
        800;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

}



/* =========================================================
   NOTES
   ========================================================= */

.mechanic-notes p {

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        0.88rem;

    line-height:
        1.75;

}



/* =========================================================
   EMPTY / ERROR
   ========================================================= */

.mechanics-grid .database-empty,
.mechanics-grid .database-error {

    grid-column:
        1 / -1;

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .mechanics-grid {

        gap:
            18px;

    }


    .mechanic-card {

        padding:
            22px;

    }


    .mechanic-title h3 {

        font-size:
            1.15rem;

    }


    .mechanic-description {

        font-size:
            0.9rem;

    }


    .mechanic-tag {

        padding:
            7px 10px;

        font-size:
            0.62rem;

    }

}