/* =========================================================
   VIKING RISE SINGULARITY
   JEWELS DATABASE
   ========================================================= */


/* =========================================================
   DATABASE CONTROLS
   ========================================================= */

.jewel-database-view {

    width: 100%;

}


.jewel-database-view .database-controls {

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    margin-bottom: 30px;

}


#jewelSearch {

    flex: 1;

    width: 100%;

    min-width: 0;

    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;

}


#jewelSearch::placeholder {

    color:
        var(--text-muted);

}


#jewelSearch:focus {

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

    background:
        var(--surface-light);

}


#jewelTroopFilter {

    width: 170px;

    padding: 13px 14px;

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

    border-radius: 6px;

    outline: none;

    background:
        var(--surface);

    color:
        var(--text);

    font-family:
        inherit;

    font-size:
        0.78rem;

    font-weight:
        700;

    cursor:
        pointer;

}


#jewelTroopFilter:focus {

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

}



/* =========================================================
   JEWEL GRID
   ========================================================= */

.jewel-grid {

    display: grid;

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

    gap: 24px;

    width: 100%;

}



/* =========================================================
   JEWEL CARD
   ========================================================= */

.jewel-card {

    position: relative;

    display: block;

    min-height: 210px;

    padding: 30px;

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

    border-radius: 9px;

    outline: none;

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

    cursor: pointer;

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

}


.jewel-card:hover,
.jewel-card:focus-visible {

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

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

    transform:
        translateY(-2px);

}


.jewel-card-content {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    height: 100%;

}

.jewel-card-image {

    position: absolute;

    top: 50%;

    right: 0;

    width: 90px;

    height: 90px;

    object-fit: contain;

    transform: translateY(-50%);

    pointer-events: none;

}


.jewel-card-type {

    display: inline-flex;

    align-items: center;

    margin-bottom: 18px;

    padding: 5px 9px;

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

    border-radius: 5px;

    color:
        var(--text-muted);

    font-size:
        0.63rem;

    font-weight:
        900;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

}


.jewel-card h3 {

    margin: 0;

    color:
        var(--text);

    font-size:
        1.25rem;

    font-weight:
        850;

    line-height:
        1.3;

}


.jewel-card-troop {

    display: inline-flex;

    margin-top: 10px;

    color:
        var(--red-light);

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

}


.jewel-card-action {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: auto;

    padding-top: 28px;

    color:
        var(--text-muted);

    font-size:
        0.67rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.jewel-card-action span {

    color:
        var(--red-light);

    font-size:
        0.9rem;

}



/* =========================================================
   DETAIL VIEW
   ========================================================= */

.jewel-detail-view {

    width: 100%;

}


.jewel-back-button {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 28px;

    padding: 10px 14px;

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

    border-radius: 6px;

    background:
        var(--surface);

    color:
        var(--text-muted);

    font-family:
        inherit;

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    cursor:
        pointer;

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

}


.jewel-back-button:hover {

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

    color:
        var(--text);

    background:
        var(--surface-light);

}



/* =========================================================
   DETAIL HEADER
   ========================================================= */

.jewel-detail-header {

    padding-bottom:
        28px;

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

}


.jewel-detail-type {

    display: inline-flex;

    margin-bottom:
        12px;

    padding:
        5px 9px;

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

    border-radius:
        5px;

    color:
        var(--text-muted);

    font-size:
        0.63rem;

    font-weight:
        900;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

}


.jewel-detail-header h1 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        clamp(1.7rem, 3vw, 2.4rem);

    font-weight:
        900;

    line-height:
        1.2;

}


.jewel-detail-troop {

    display: inline-flex;

    margin-top:
        12px;

    color:
        var(--red-light);

    font-size:
        0.7rem;

    font-weight:
        900;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

}



/* =========================================================
   DETAIL SECTIONS
   ========================================================= */

.jewel-detail-section {

    margin-top:
        28px;

    padding:
        0 0 28px;

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

}


.jewel-detail-section-header {

    margin-bottom:
        16px;

}


.jewel-detail-section-header h3 {

    margin:
        0 0 6px;

    color:
        var(--text);

    font-size:
        0.78rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.jewel-detail-section-header p {

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        0.78rem;

    line-height:
        1.6;

}



/* =========================================================
   ATTRIBUTE LIST
   ========================================================= */

.jewel-attribute-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.jewel-attribute {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        12px 14px;

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

    border-radius:
        6px;

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

}


.jewel-attribute-name {

    color:
        var(--text);

    font-size:
        0.82rem;

    line-height:
        1.5;

}


.jewel-attribute-value {

    flex:
        0 0 auto;

    color:
        var(--red-light);

    font-size:
        0.78rem;

    font-weight:
        900;

    white-space:
        nowrap;

}



/* =========================================================
   CONDITION
   ========================================================= */

.jewel-condition {

    margin-top:
        28px;

    padding:
        18px 20px;

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

    border-radius:
        7px;

    background:
        rgba(
            197,
            31,
            50,
            0.025
        );

}


.jewel-detail-section-label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--text-muted);

    font-size:
        0.65rem;

    font-weight:
        900;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

}


.jewel-condition p {

    margin:
        0;

    color:
        var(--text);

    font-size:
        0.88rem;

    line-height:
        1.7;

}



/* =========================================================
   RANDOM ATTRIBUTE VALUES
   ========================================================= */

.jewel-random-values {

    margin-top:
        28px;

    padding:
        24px;

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

    border-radius:
        8px;

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

}


.jewel-random-table-wrapper {

    width:
        100%;

    overflow-x:
        auto;

}


.jewel-random-table {

    width:
        100%;

    border-collapse:
        collapse;

}


.jewel-random-table th,
.jewel-random-table td {

    padding:
        12px 14px;

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

    text-align:
        left;

}


.jewel-random-table th {

    color:
        var(--text-muted);

    font-size:
        0.63rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.jewel-random-table td {

    color:
        var(--text);

    font-size:
        0.78rem;

    line-height:
        1.5;

}


.jewel-random-table td:not(:first-child) {

    color:
        var(--red-light);

    font-weight:
        800;

}


.jewel-random-table tr:last-child td {

    border-bottom:
        none;

}



/* =========================================================
   NO DATA
   ========================================================= */

.jewel-no-data {

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        0.82rem;

}



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

@media (max-width: 800px) {

    .jewel-grid {

        grid-template-columns:
            1fr;

    }


    .jewel-database-view .database-controls {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    #jewelTroopFilter {

        width:
            100%;

    }

}


@media (max-width: 600px) {

    .jewel-card {

        min-height:
            190px;

        padding:
            24px;

    }


    .jewel-attribute {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            5px;

    }


    .jewel-random-values {

        padding:
            18px;

    }


    .jewel-random-table th,
    .jewel-random-table td {

        padding:
            10px;

    }

}