/* =============================
   GLOBAL PAGE STYLE
============================= */

body{
    margin:0;
    padding:40px;
    font-family:Inter,Segoe UI,system-ui,sans-serif;

    background:linear-gradient(145deg,#0f1114,#181c20);
    color:#e5e7eb;
}

/* container */

.table-container{
    max-width:1200px;
    margin:auto;
}

/* =============================
   TABLE LAYOUT
============================= */

table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 12px; /* creates row gaps */
}

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

thead th{

    text-align:left;

    padding:10px 16px;

    font-size:11px;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#9ca3af;
}

/* header links */

th a{
    text-decoration:none;
    color:inherit;
}

th a:hover{
    color:#ffffff;
}

/* =============================
   ROW STYLE (CARD STYLE)
============================= */

tbody tr{

    background:#161a1f;

    box-shadow:0 6px 14px rgba(0,0,0,.35);

    transition:.25s;

    border-radius:10px;
}

/* rounded row edges */

tbody tr td:first-child{
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
}

tbody tr td:last-child{
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
}

tbody tr:hover{

    transform:translateY(-3px);

    background:#1b2026;

    box-shadow:0 10px 24px rgba(0,0,0,.45);
}

/* =============================
   CELLS
============================= */

td{

    padding:18px;

    font-size:14px;

    vertical-align:middle;
}

/* =============================
   WEAPON NAME
============================= */

td[data-label="Weapon Name"]{

    font-weight:700;

    color:#ffffff;

    font-size:15px;
}

/* =============================
   WEAPON TYPE TAG
============================= */

td[data-label="Weapon Type"]{

    font-weight:600;

    font-size:13px;

    color:#9ca3af;
}

/* =============================
   AMMO BADGES
============================= */

td[data-label="Ammo Type"]{

    font-weight:600;

    text-align:center;

    border-radius:999px;

    padding:4px 12px;

    display:inline-block;

    font-size:12px;
}

/* ammo colors */

.ammo-light{background:#facc15;color:#111;}
.ammo-medium{background:#3b82f6;}
.ammo-heavy{background:#ef4444;}
.ammo-shotgun{background:#f97316;}
.ammo-energy{background:#10b981;color:#012;}
.ammo-sniper{background:#8b5cf6;}
.ammo-explosive{background:#e11d48;}

/* =============================
   RARITY SYSTEM
============================= */

tbody tr.Common{
    border-left:4px solid #9ca3af;
}

tbody tr.Uncommon{
    border-left:4px solid #22c55e;
}

tbody tr.Rare{
    border-left:4px solid #3b82f6;
}

tbody tr.Epic{
    border-left:4px solid #a855f7;
}

tbody tr.Legendary{
    border-left:4px solid #facc15;
}

/* rarity text */

.Common{color:#9ca3af;}
.Uncommon{color:#22c55e;}
.Rare{color:#3b82f6;}
.Epic{color:#a855f7;}
.Legendary{color:#facc15;font-weight:700;}

/* =============================
   STAT BARS
============================= */

.stat-bar{

    width:100%;

    height:8px;

    border-radius:6px;

    background:#2a2f35;

    overflow:hidden;

    margin-top:6px;
}

.stat-bar-fill{

    height:100%;

    background:linear-gradient(90deg,#4ade80,#22c55e);

    border-radius:6px;
}

/* =============================
   MAGAZINE + WEIGHT
============================= */

td[data-label="Magazine"],
td[data-label="Weight"]{

    text-align:center;

    font-weight:600;
}

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

@media (max-width:900px){

    table{
        border-spacing:0 20px;
    }

    td{

        display:block;

        padding-left:40%;

        position:relative;

        margin-bottom:6px;
    }

    td::before{

        content:attr(data-label);

        position:absolute;

        left:16px;

        font-size:10px;

        text-transform:uppercase;

        color:#9ca3af;

        font-weight:700;
    }

}