/* ═══════════════════════════════════════════
   INVENTORY — unified retro chrome
   ═══════════════════════════════════════════ */

.files-body {
    --inv-peach: #ffe9c7;
    --inv-cream: #fff4dc;
    --inv-muted: #5c3b4a;
}

.files-scroll {
    padding: 0 var(--space-4) var(--space-4);
}

.inv-sec-title {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    color: var(--pink);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    letter-spacing: 0.5px;
}

.inv-bg-grid {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.inv-bg-item {
    border: 2.5px solid var(--dark);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 0 var(--dark);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    width: 96px;
    height: 60px;
    transition: transform .15s, box-shadow .15s;
    flex-shrink: 0;
}

.inv-bg-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--dark);
}

.inv-bg-item.active {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px var(--pink), 0 4px 0 var(--dark);
}

.inv-bg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inv-bg-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .55);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    color: #fff;
    text-align: center;
    padding: 3px 4px;
    letter-spacing: 0.5px;
}

.inv-locked {
    opacity: .4;
    cursor: not-allowed;
    filter: grayscale(70%);
}

.inv-lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
}

/* ── Collectible tiles (aliens, toys) ────── */
.inv-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.inv-tile {
    background: #fff;
    border: 2.5px solid var(--dark);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 0 var(--dark);
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    position: relative;
    transition: transform .12s;
}

.inv-tile:hover { transform: translateY(-1px); }

.inv-tile-thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    border: 2.5px solid var(--dark);
    background: var(--inv-peach);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 0 var(--dark);
}

.inv-tile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.inv-tile-name {
    font-family: var(--font-display);
    font-size: 8px;
    color: var(--dark);
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.5px;
    word-break: break-word;
}

.inv-tile-count {
    background: var(--pink);
    color: #fff;
    border: 2px solid var(--dark);
    border-radius: var(--radius-pill);
    padding: 1px 7px;
    font-family: var(--font-display);
    font-size: 8px;
    box-shadow: 0 2px 0 var(--dark);
    letter-spacing: 0.5px;
    position: absolute;
    top: -6px;
    right: -4px;
}

.inv-tile-rare {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 12px;
    color: #ffd83d;
    text-shadow: 1px 1px 0 var(--dark);
    line-height: 1;
}

.inv-tile.locked {
    opacity: 0.55;
    background: var(--inv-cream);
}

.inv-tile.locked .inv-tile-thumb img {
    filter: brightness(0) opacity(.4);
}

.inv-tile.locked .inv-tile-name {
    color: var(--inv-muted);
}

.inv-tile-locktag {
    background: #fff;
    border: 2px solid var(--dark);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-family: var(--font-display);
    font-size: 8px;
    color: var(--dark);
    box-shadow: 0 2px 0 var(--dark);
    letter-spacing: 0.5px;
    position: absolute;
    top: -6px;
    right: -4px;
}

/* ── Title chips ─────────────────────────── */
.inv-nick-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.inv-nick {
    background: #fff;
    border: 2.5px solid var(--dark);
    border-radius: var(--radius-pill);
    padding: 5px 12px;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    color: var(--dark);
    box-shadow: 0 2px 0 var(--dark);
    letter-spacing: 0.5px;
    cursor: default;
    line-height: 1.3;
}

.inv-nick.rare      { background: var(--soft); }
.inv-nick.legendary { background: #ffd83d; }
.inv-nick.uncommon  { background: #bfe9c9; }

.inv-nick.locked {
    background: #f3f0ec;
    color: var(--inv-muted);
    opacity: 0.65;
}

.inv-nick.equipped {
    background: var(--pink);
    color: #fff;
    border-color: var(--dark);
    box-shadow: 0 0 0 2px var(--pink), 0 3px 0 var(--dark);
}

/* ── IRL reward cards ────────────────────── */
.inv-reward-item {
    background: #fff;
    border: 2.5px solid var(--dark);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 0 var(--dark);
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.inv-reward-icon {
    font-size: 22px;
}

.inv-reward-name {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    color: var(--dark);
    letter-spacing: 0.5px;
    line-height: 1.4;
}

.inv-reward-code {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    color: var(--pink);
    margin-top: 3px;
    letter-spacing: 0.5px;
}

.inv-empty {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--inv-muted);
    text-align: center;
    padding: var(--space-3) var(--space-4);
    line-height: 1.5;
    background: var(--inv-cream);
    border: 2.5px dashed var(--dark);
    border-radius: var(--radius-md);
}