/* ARC Raiders item catalog — base platform styles */

:root {
    --text-primary: #eef2f8;
    --text-secondary: #a8b4c8;
    --text-muted: #7a879c;
    --border-subtle: #1a2330;
    --border-mid: #2a3648;
    --border-bright: #4c5e7e;
    --transition: 0.18s ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Manrope", system-ui, sans-serif;
    color: var(--text-primary);
    background: #0b0f14;
}

.catalog-page {
    overflow-x: hidden;
}

.ambient-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(107, 163, 245, 0.12), transparent 55%),
        radial-gradient(ellipse 60% 40% at 90% 10%, rgba(76, 94, 126, 0.14), transparent 50%),
        #0b0f14;
}

.app-container {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    padding-bottom: 40px;
}

.portal {
    display: grid;
    align-items: start;
}

.main {
    min-width: 0;
}

.page-topbar {
    margin-bottom: 18px;
}

.page-topbar__kicker {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
}

/* Search input */
.filters-search-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid rgba(107, 163, 245, 0.26);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(107, 163, 245, 0.12), rgba(76, 94, 126, 0.12));
}

.filters-search-wrap__icon {
    color: #a8c7f5;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.filters-search-wrap__input {
    appearance: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    min-width: 0;
    flex: 1;
    padding: 9px 0;
    cursor: text;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
}

.filters-search-wrap__input:focus {
    outline: none;
}

.filters-search-wrap__input::placeholder {
    color: #9db6d9;
}

.filters-search-wrap__clear {
    border: 0;
    background: transparent;
    color: #bcd4f6;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.filters-search-wrap__clear:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Item grid + cards */
.inv-grid {
    display: grid;
}

.inv-card__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #090c19;
}

.inv-card[class*="rarity-"] .inv-card__icon {
    border: none;
}

.inv-card[class*="rarity-"] .inv-card__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--inv-icon-plate);
}

.inv-card[class*="rarity-"] .inv-card__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(to top right, var(--inv-rarity-color) 0%, #51525c 90%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.inv-card__icon img[data-inv-img],
.inv-card__icon .no-icon {
    position: relative;
    z-index: 1;
}

.inv-card__icon .no-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-muted);
}

.inv-card__icon-deco {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.inv-card__icon-deco-path {
    fill: var(--inv-rarity-color, rgb(108, 108, 108));
}

/* Rarity washes */
.inv-card.rarity-common .inv-card__icon {
    --inv-rarity-color: rgb(108, 108, 108);
    --inv-icon-plate: linear-gradient(to top right, rgba(108, 108, 108, 0.3) 0%, #090c19 90%);
}

.inv-card.rarity-uncommon .inv-card__icon {
    --inv-rarity-color: rgb(38, 191, 87);
    --inv-icon-plate: linear-gradient(to top right, rgba(38, 191, 87, 0.3) 0%, #090c19 90%);
}

.inv-card.rarity-rare .inv-card__icon {
    --inv-rarity-color: rgb(0, 168, 242);
    --inv-icon-plate: linear-gradient(to top right, rgba(0, 168, 242, 0.3) 0%, #090c19 90%);
}

.inv-card.rarity-epic .inv-card__icon {
    --inv-rarity-color: rgb(196, 49, 235);
    --inv-icon-plate: linear-gradient(to top right, rgba(196, 49, 235, 0.3) 0%, #090c19 90%);
}

.inv-card.rarity-legendary .inv-card__icon {
    --inv-rarity-color: rgb(255, 179, 0);
    --inv-icon-plate: linear-gradient(to top right, rgba(255, 179, 0, 0.3) 0%, #090c19 90%);
}

.inv-card.rarity-blueprint .inv-card__icon {
    --inv-rarity-color: rgb(255, 198, 0);
    background: url(../assets/blueprint-bg.webp) center / cover no-repeat;
    --inv-icon-plate: linear-gradient(to top right, rgba(24, 151, 189, 0.55) 0%, #090c19 90%);
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}

.empty-state__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.empty-state__text {
    font-size: 0.9rem;
}