/* ==========================================================================
   KillarNation — Gun Components
   Mobile-first. Uses tokens from tokens.css. No hex values.
   ========================================================================== */


/* ── Filter tabs (archive) ──────────────────────────────────────────────── */

.gun-filters {
    display: flex;
    gap: var(--kn-sp-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--kn-sp-3);
    margin-bottom: var(--kn-sp-4);
}
.gun-filters::-webkit-scrollbar { display: none; }

.gun-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--kn-sp-1);
    padding: var(--kn-sp-2) var(--kn-sp-4);
    font-size: var(--kn-fs-sm);
    font-weight: var(--kn-fw-medium);
    color: var(--kn-text-soft);
    background: var(--kn-surface-sunken);
    border: 1px solid var(--kn-border-light);
    border-radius: var(--kn-radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--kn-transition);
    flex-shrink: 0;
}
.gun-filter-btn:hover {
    border-color: var(--kn-primary);
    color: var(--kn-primary);
}
.gun-filter-btn--active {
    background: var(--kn-yellow-soft);
    color: var(--kn-yellow-dark);
    border-color: var(--kn-primary);
    font-weight: var(--kn-fw-semibold);
}
.gun-filter-btn__count {
    font-size: 10px;
    opacity: .6;
}


/* ── Gun Card (archive grid) ────────────────────────────────────────────── */

.gun-card__thumb {
    display: block;
    background: var(--kn-surface-sunken);
    text-align: center;
    padding: var(--kn-sp-4) var(--kn-sp-3);
}
.gun-card__thumb img {
    max-height: 140px;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
}

.gun-card__body {
    padding: var(--kn-sp-3) var(--kn-sp-4) var(--kn-sp-4);
}

.gun-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kn-sp-2);
    margin-bottom: var(--kn-sp-2);
}

.gun-card__name {
    font-size: var(--kn-fs-lg);
    margin-bottom: var(--kn-sp-1);
}

.gun-card__ammo {
    display: block;
    font-size: var(--kn-fs-xs);
    color: var(--kn-text-muted);
    margin-bottom: var(--kn-sp-3);
}

.gun-card__stats {
    display: flex;
    flex-direction: column;
    gap: var(--kn-sp-2);
}


/* ── Stat bar (shared by card + single) ─────────────────────────────────── */

.gun-stat {
    display: grid;
    grid-template-columns: 36px 1fr 28px;
    align-items: center;
    gap: var(--kn-sp-2);
}

.gun-stat--full {
    grid-template-columns: 110px 1fr 36px;
}

.gun-stat__label {
    font-size: var(--kn-fs-xs);
    font-weight: var(--kn-fw-semibold);
    color: var(--kn-text-soft);
    text-transform: uppercase;
    letter-spacing: var(--kn-ls-wide);
}

.gun-stat__bar {
    height: 6px;
    background: var(--kn-surface-sunken);
    border-radius: var(--kn-radius-pill);
    overflow: hidden;
}

.gun-stat__fill {
    height: 100%;
    border-radius: var(--kn-radius-pill);
    transition: width var(--kn-dur-slow) var(--kn-ease);
}

/* Stat fill colors */
.gun-stat__fill--dmg { background: var(--kn-danger); }
.gun-stat__fill--rof { background: var(--kn-primary); }
.gun-stat__fill--rng { background: var(--kn-info); }
.gun-stat__fill--acc { background: var(--kn-success); }
.gun-stat__fill--rld { background: var(--kn-warning); }
.gun-stat__fill--spd { background: var(--kn-gray-400); }
.gun-stat__fill--pen { background: #C084FC; }

.gun-stat__val {
    font-size: var(--kn-fs-sm);
    font-weight: var(--kn-fw-bold);
    color: var(--kn-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* ── Tier badge ─────────────────────────────────────────────────────────── */

.gun-tier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: var(--kn-fs-xs);
    font-weight: var(--kn-fw-bold);
    border-radius: var(--kn-radius-xs);
    line-height: 1;
    flex-shrink: 0;
}
.gun-tier--lg {
    width: auto;
    padding: 2px var(--kn-sp-2);
}

.gun-tier--s { background: rgba(239, 68, 68, .15); color: var(--kn-danger); }
.gun-tier--a { background: var(--kn-yellow-soft); color: var(--kn-yellow-dark); }
.gun-tier--b { background: rgba(59, 130, 246, .12); color: var(--kn-info); }
.gun-tier--c { background: rgba(115, 115, 115, .12); color: var(--kn-gray-500); }


/* ── Rarity badges ──────────────────────────────────────────────────────── */

.badge--legendary { background: rgba(239, 68, 68, .10); color: var(--kn-danger); }
.badge--epic      { background: rgba(168, 85, 247, .10); color: #A855F7; }
.badge--rare      { background: rgba(59, 130, 246, .10); color: var(--kn-info); }
.badge--common    { background: rgba(115, 115, 115, .10); color: var(--kn-gray-500); }


/* ── Single Gun Page ────────────────────────────────────────────────────── */

.gun-single__header {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--kn-sp-6);
    margin-bottom: var(--kn-sp-8);
}

.gun-single__image {
    background: var(--kn-surface-sunken);
    border-radius: var(--kn-radius-lg);
    padding: var(--kn-sp-6);
    text-align: center;
}
.gun-single__image img {
    max-height: 220px;
    width: auto;
    object-fit: contain;
}

.gun-single__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kn-sp-2);
    margin-bottom: var(--kn-sp-3);
}

.gun-single__title {
    font-size: var(--kn-fs-3xl);
    line-height: var(--kn-lh-tight);
    margin-bottom: var(--kn-sp-2);
}

.gun-single__subtitle {
    color: var(--kn-text-soft);
    font-size: var(--kn-fs-md);
    margin-bottom: var(--kn-sp-3);
}

.gun-single__section-title {
    font-size: var(--kn-fs-xl);
    margin-bottom: var(--kn-sp-4);
}


/* Quick info table */
.gun-quick-info {
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius);
    overflow: hidden;
}
.gun-quick-info__row {
    display: flex;
    justify-content: space-between;
    padding: var(--kn-sp-3) var(--kn-sp-4);
    font-size: var(--kn-fs-base);
}
.gun-quick-info__row:nth-child(even) {
    background: var(--kn-surface-alt);
}
.gun-quick-info__label {
    color: var(--kn-text-soft);
    font-weight: var(--kn-fw-medium);
}
.gun-quick-info__val {
    font-weight: var(--kn-fw-semibold);
    color: var(--kn-text);
}


/* Stat grid on single page */
.gun-single__stats {
    margin: var(--kn-sp-8) 0;
    padding: var(--kn-sp-6);
    background: var(--kn-surface-alt);
    border-radius: var(--kn-radius-lg);
}

.gun-stats-grid {
    display: flex;
    flex-direction: column;
    gap: var(--kn-sp-3);
}


/* Attachments chips */
.gun-single__attachments {
    margin-bottom: var(--kn-sp-6);
}

.gun-attachments-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kn-sp-2);
}

.gun-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--kn-sp-1);
    padding: var(--kn-sp-2) var(--kn-sp-3);
    background: var(--kn-surface-sunken);
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius-sm);
    font-size: var(--kn-fs-sm);
    font-weight: var(--kn-fw-medium);
    color: var(--kn-text);
}


/* Pro tip callout */
.gun-single__tip {
    padding: var(--kn-sp-4) var(--kn-sp-5);
    background: var(--kn-yellow-soft);
    border-left: 3px solid var(--kn-primary);
    border-radius: 0 var(--kn-radius) var(--kn-radius) 0;
    margin-bottom: var(--kn-sp-6);
    font-size: var(--kn-fs-base);
    line-height: var(--kn-lh-normal);
    color: var(--kn-text);
}
.gun-single__tip strong {
    color: var(--kn-yellow-dark);
}


/* ── Tablet+ (>768px) — two-column header ───────────────────────────────── */

@media (min-width: 769px) {
    .gun-single__header {
        grid-template-columns: 320px 1fr;
        align-items: start;
    }
    .gun-single__image {
        position: sticky;
        top: calc(var(--kn-header-h) + var(--kn-sp-4));
    }
    .gun-stat--full {
        grid-template-columns: 130px 1fr 40px;
    }
}

@media (max-width: 480px) {
    .gun-single__title {
        font-size: var(--kn-fs-2xl);
    }
    .gun-stat--full {
        grid-template-columns: 80px 1fr 30px;
    }
    .gun-single__stats {
        padding: var(--kn-sp-4);
    }
}