/* =========================================
   1. ROOT VARIABLES
========================================= */

:root {
    color-scheme: dark;

    --bg: #090e17;
    --panel: #121b2a;
    --line: #293447;
    --text: #f5f7fb;
    --muted: #a2adbf;
    --red: #ed4756;
}


/* =========================================
   2. GLOBAL
========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;

    min-height: 100vh;
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);

    background:
        linear-gradient(
            110deg,
            rgba(8, 13, 22, 0.94),
            rgba(8, 13, 22, 0.86)
        ),
        url("../../bg.png") center / cover fixed;

    background-color: var(--bg);
}

a {
    color: inherit;
}

button,
input,
select {
    font: inherit;
}


/* =========================================
   3. MAIN CONTAINER
========================================= */

.wrap {
    flex: 1;

    width: 100%;
    max-width: 1260px;

    margin: 0 auto;
    padding: 64px 24px 90px;
}


/* =========================================
   4. BREADCRUMB
========================================= */

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    font-size: 12px;
    letter-spacing: 1px;

    color: var(--muted);
}

.breadcrumb a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--red);
}

.breadcrumb strong {
    color: var(--red);
}


/* =========================================
   5. HERO SECTION
========================================= */

.hero {
    max-width: 850px;
    margin: 38px 0;
}

.tag {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--red);
}

.hero h1 {
    margin: 14px 0;

    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.1;
    letter-spacing: -1px;
}

.hero em {
    font-style: normal;
    color: var(--red);
}

.hero p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
}


/* =========================================
   6. SEARCH & FILTER TOOLS
========================================= */

.tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    padding: 17px;

    background: #101a29;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.tools label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--muted);
}

.tools input,
.tools select {
    min-height: 44px;
    padding: 12px;

    background: #090f19;
    color: var(--text);

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

.tools input {
    flex: 1;
    min-width: 170px;
}

.tools select {
    min-width: 150px;
}

.tools input:focus-visible,
.tools select:focus-visible,
.tools button:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

.tools button {
    min-height: 44px;
    padding: 12px 18px;

    background: var(--red);
    border: 0;
    border-radius: 7px;

    color: #fff;
    font-weight: 800;

    cursor: pointer;
    transition: background 0.2s ease;
}

.tools button:hover {
    background: #d93848;
}


/* =========================================
   7. RESULT COUNT
========================================= */

.count {
    margin: 22px 0;

    font-size: 13px;
    color: var(--muted);
}


/* =========================================
   8. WEAPON SECTION
========================================= */

.weapon-section {
    margin: 36px 0 50px;
}

.weapon-section h2 {
    margin: 0 0 8px;
    font-size: 21px;
}

.weapon-section .description {
    margin: 0 0 19px;

    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}


/* =========================================
   9. WEAPON GRID
========================================= */

.weapon-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}


/* =========================================
   10. WEAPON CARD
========================================= */

.weapon-card {
    overflow: hidden;

    background: #121c2c;
    border: 1px solid var(--line);
    border-radius: 12px;

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

.weapon-card:hover {
    transform: translateY(-3px);
    border-color: var(--red);
}


/* =========================================
   11. WEAPON IMAGE
========================================= */

.weapon-image {
    position: relative;

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

    width: 100%;
    aspect-ratio: 8 / 5;

    overflow: hidden;

    background: linear-gradient(
        135deg,
        #1d2b3e,
        #101825
    );
}

.weapon-image img {
    width: 90%;
    height: 90%;

    object-fit: contain;
}

.image-placeholder {
    padding: 15px;

    text-align: center;
    font-size: 11px;
    letter-spacing: 1px;

    color: #8c9aae;
}

.image-placeholder b {
    display: block;

    margin-bottom: 12px;

    font-size: 32px;
    color: #526277;
}


/* =========================================
   12. WEAPON INFORMATION
========================================= */

.weapon-info {
    padding: 17px 19px;
}

.weapon-info h3 {
    margin: 0 0 12px;
    font-size: 18px;
}

.weapon-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.weapon-meta span {
    padding: 6px 10px;

    border: 1px solid #435066;
    border-radius: 99px;

    font-size: 11px;
    color: #c2ccda;
}

.weapon-meta .special {
    border-color: #a34853;
    color: #ff9ca5;
}


/* =========================================
   13. RANK PERMISSION SECTION
========================================= */

.rank-section {
    margin-top: 70px;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;

    margin-bottom: 24px;
    padding-bottom: 15px;

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

.section-head h2 {
    margin: 0;

    font-size: 18px;
    letter-spacing: 1px;
}

.section-head span {
    font-size: 12px;
    color: var(--muted);
}

.rank-section > p {
    line-height: 1.7;
    color: var(--muted);
}

.pending {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #ffc77b;
}


/* =========================================
   14. RANK TABLE
========================================= */

.rank-table {
    width: 100%;
    overflow-x: auto;

    border: 1px solid var(--line);
    border-radius: 10px;
}

.rank-table table {
    width: 100%;
    min-width: 450px;

    border-collapse: collapse;
}

.rank-table th,
.rank-table td {
    padding: 15px;

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

    text-align: left;
    vertical-align: top;
}

.rank-table th {
    background: #1a2738;

    font-size: 12px;
    letter-spacing: 0.7px;
}

.rank-table td {
    font-size: 14px;
    color: #d4dbe5;
}

.rank-table tr:last-child td {
    border-bottom: 0;
}


/* =========================================
   15. INFORMATION NOTE
========================================= */

.note {
    margin-top: 27px;
    padding: 13px 17px;

    background: #172030;
    border-left: 3px solid var(--red);

    font-size: 13px;
    line-height: 1.7;
    color: #b7c0cd;
}


/* =========================================
   16. EMPTY SEARCH RESULT
========================================= */

.empty {
    padding: 30px;

    border: 1px dashed var(--line);
    border-radius: 10px;

    text-align: center;
    color: var(--muted);
}


/* =========================================
   17. FOOTER
========================================= */

footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;

    padding: 24px max(5%, calc((100vw - 1260px) / 2));

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

    font-size: 12px;
    color: var(--muted);
}


/* =========================================
   18. RESPONSIVE TABLET
========================================= */

@media (max-width: 900px) {

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

    .wrap {
        padding: 50px 24px 75px;
    }

}


/* =========================================
   19. RESPONSIVE MOBILE
========================================= */

@media (max-width: 650px) {

    /* Background */

    body {
        background-attachment: scroll;
    }

    /* Main Container */

    .wrap {
        padding: 40px 18px 65px;
    }

    /* Breadcrumb */

    .breadcrumb {
        gap: 8px;
        font-size: 11px;
    }

    /* Hero */

    .hero {
        margin: 28px 0;
    }

    .hero h1 {
        letter-spacing: -0.5px;
    }

    .hero p {
        font-size: 14px;
    }

    /* Search & Filter */

    .tools {
        flex-direction: column;
        align-items: stretch;
    }

    .tools input,
    .tools select,
    .tools button {
        width: 100%;
    }

    .tools input {
        flex: none;
        min-width: 0;
    }

    /* Weapon Grid */

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

    /* Rank Section */

    .rank-section {
        margin-top: 50px;
    }

    .section-head h2 {
        font-size: 15px;
    }

    /* Footer */

    footer {
        flex-direction: column;
        align-items: flex-start;

        gap: 8px;
        padding: 20px 18px;
    }

}


/* =========================================
   20. REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .weapon-card,
    .tools button,
    .breadcrumb a {
        transition: none;
    }


}

/* Inventaris pangkat: panel yang dapat dibuka tanpa JavaScript */
.rank-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:22px; }
.rank-card { min-width:0; background:#111b2a; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.rank-card[open] { border-color:#516078; }
.rank-card summary { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:19px; cursor:pointer; list-style:none; }
.rank-card summary::-webkit-details-marker { display:none; }
.rank-card summary strong { display:block; font-size:16px; color:var(--text); }
.rank-card summary small { display:block; margin-top:7px; color:var(--muted); font-size:12px; line-height:1.5; }
.rank-total { flex-shrink:0; font-size:11px; font-weight:800; color:var(--red); white-space:nowrap; }
.rank-card .rank-table { border:0; border-top:1px solid var(--line); border-radius:0; }
.rank-card .rank-table table { min-width:0; }
.rank-card .rank-table th:last-child,.rank-card .rank-table td:last-child { width:90px; text-align:right; white-space:nowrap; }
.rank-card .rank-table td { padding:11px 18px; }
.rank-card .rank-table th { padding:12px 18px; }
.inventory-caveat { padding:14px 16px; border-left:3px solid #c8a363; background:#201e20; font-size:13px; }
.special-section { margin-top:55px; padding:24px; background:#111b2a; border:1px solid var(--line); border-radius:12px; }
.special-section p { color:var(--muted); line-height:1.8; margin-bottom:0; }
@media (max-width:800px) { .rank-list { grid-template-columns:1fr; } }
@media (max-width:650px) { .special-section { padding:18px; } .rank-card summary { padding:15px; } }

/* Placeholder pencarian senjata */
#weaponSearch::placeholder {
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    color: #8b95a7;
    opacity: 1;
}

/* Teks ketika pengguna mengetik */
#weaponSearch {
    font-size: 14px;
    font-style: normal;
}
#weaponSearch {
    min-width: 0;
    width: 100%;
}
/* Status pemuatan inventaris JSON */
.inventory-loading { grid-column: 1 / -1; color: var(--muted); padding: 18px; }