/* Inventory Popup Styles */
.inventory-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
    pointer-events: auto;
    /* Isolate popup from host page styles */
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    color: #c5c3c0;
}

.inventory-popup-overlay * {
    pointer-events: auto;
}

/* Animations */
@keyframes popupOverlayFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes popupScaleIn { from { transform: translateY(10px) scale(0.98); opacity: 0 } to { transform: translateY(0) scale(1); opacity: 1 } }

.inventory-popup-overlay { animation: popupOverlayFadeIn 180ms ease-out; }
.inventory-popup { transform-origin: center; animation: popupScaleIn 220ms ease-out; }

.item-details-modal { animation: popupOverlayFadeIn 180ms ease-out; }
.game-key-modal-overlay { animation: popupOverlayFadeIn 180ms ease-out; }


.inventory-popup {
    background: linear-gradient(135deg, var(--card-bg, #1c2733) 0%, var(--bg-dark, #0b121b) 100%);
    width: 90%;
    max-width: 900px;
    max-height: 80vh;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    color: #c5c3c0;
}

/* Header styles */
.inventory-popup .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: linear-gradient(90deg, rgba(28, 39, 51, 0.95), rgba(11, 18, 27, 0.95));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Game Card Counter */
.inventory-popup .game-card-counter {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #22c55e;
    transition: all 0.3s;
}

.inventory-popup .game-card-counter i {
    font-size: 0.9rem;
}

.inventory-popup .game-card-counter.at-limit {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
    animation: limitPulse 2s ease-in-out infinite;
}

@keyframes limitPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 10px 3px rgba(239, 68, 68, 0.3); }
}

.inventory-popup .popup-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.inventory-popup .popup-close {
    background: transparent;
    border: none;
    color: #a0aec0;
    font-size: 1.25rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.inventory-popup .popup-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Header actions container */
.inventory-popup .popup-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Sell cards button */
.inventory-popup .sell-cards-btn {
    background: linear-gradient(135deg, var(--primary-color, #fc9d0b), var(--primary-hover, #e68a00));
    border: none;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(252, 157, 11, 0.25);
}

.inventory-popup .sell-cards-btn:hover {
    background: linear-gradient(135deg, var(--primary-light, #fdb94d), var(--primary-color, #fc9d0b));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(252, 157, 11, 0.35);
}

/* Filters button: slightly subtler than Sell */
.inventory-popup .sell-cards-btn.filters-btn {
    background: rgba(252, 157, 11, 0.12);
    border: 1px solid rgba(252, 157, 11, 0.25);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: none;
}

.inventory-popup .sell-cards-btn.filters-btn:hover {
    background: rgba(252, 157, 11, 0.18);
    border-color: rgba(252, 157, 11, 0.38);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(252, 157, 11, 0.20);
}

.inventory-popup .sell-cards-btn i {
    font-size: 0.85rem;
}

/* Category tabs */
.inventory-popup .inventory-categories {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.inventory-popup .inventory-category {
    flex: 1;
    padding: 0.75rem;
    background: transparent;
    border: none;
    color: #a0aec0;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.inventory-popup .inventory-category:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.inventory-popup .inventory-category.active {
    color: var(--primary-color, #fc9d0b);
    border-bottom: 2px solid var(--primary-color, #fc9d0b);
}

/* Search bar */
.inventory-popup .inventory-search {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Filters (rarity + lock status) */
.inventory-popup .inventory-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.inventory-popup .inventory-filters select {
    flex: 1;
    min-width: 160px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e6edf3;
    border-radius: 10px;
    padding: 10px 12px;
    outline: none;
    font-size: 0.9rem;
}

.inventory-popup .inventory-filters select:focus {
    border-color: rgba(252, 157, 11, 0.6);
    box-shadow: 0 0 0 3px rgba(252, 157, 11, 0.12);
}

@media (max-width: 600px) {
    .inventory-popup .inventory-filters { flex-direction: column; }
}

/* Stacked quantity badge (e.g. grouped lootboxes in All Items) */
.inventory-popup .stack-qty-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #e6edf3;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.12);
    z-index: 2;
    pointer-events: none;
}

/* Filters popup overlay (button lives in header next to Sell Cards) */
.inventory-popup .inventory-filters-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 50;
}

.inventory-popup .inventory-filters-panel {
    width: min(420px, 100%);
    background: rgba(28, 39, 51, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.inventory-popup .inventory-filters-panel .filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.inventory-popup .inventory-filters-panel .filters-title {
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 8px;
}

.inventory-popup .inventory-filters-panel .filters-close {
    appearance: none;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}

.inventory-popup .inventory-filters-panel .filters-body {
    padding: 12px 14px 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.inventory-popup .inventory-filters-panel .filters-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    align-items: center;
}

.inventory-popup .inventory-filters-panel .filters-row label {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    font-size: 13px;
}

.inventory-popup .inventory-filters-panel select {
    width: 100%;
    min-width: 0;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e6edf3;
    border-radius: 10px;
    padding: 10px 12px;
    outline: none;
    font-size: 0.9rem;
}

.inventory-popup .inventory-filters-panel select:focus {
    border-color: rgba(252, 157, 11, 0.6);
    box-shadow: 0 0 0 3px rgba(252, 157, 11, 0.12);
}

@media (max-width: 480px) {
    .inventory-popup .inventory-filters-panel .filters-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

.inventory-popup .search-container {
    display: flex;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 24px;
    padding: 0.5rem 1rem;
    align-items: center;
}

.inventory-popup .search-container i {
    color: #a0aec0;
}

.inventory-popup .search-container input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    padding: 0.5rem 0;
    outline: none;
    font-size: 0.9rem;
}

.inventory-popup .search-container input::placeholder {
    color: #a0aec0;
}

/* Lootbox tab: shop CTA banner */
.inventory-popup .shop-info-section {
    grid-column: 1 / -1;
    margin-top: 14px;
    padding: 0;
}

.inventory-popup .shop-info-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.inventory-popup .shop-info-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(252, 157, 11, 0.12);
    border: 1px solid rgba(252, 157, 11, 0.25);
    color: rgba(252, 157, 11, 0.95);
    flex: 0 0 auto;
}

.inventory-popup .shop-info-text {
    flex: 1;
    min-width: 0;
}

.inventory-popup .shop-info-title {
    font-weight: 800;
    color: rgba(255, 255, 255, 0.92);
}

.inventory-popup .shop-info-subtitle {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.9rem;
}

.inventory-popup .shop-cta-btn {
    text-decoration: none;
    white-space: nowrap;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(252, 157, 11, 0.16);
    border: 1px solid rgba(252, 157, 11, 0.28);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 800;
}

.inventory-popup .shop-cta-btn:hover {
    background: rgba(252, 157, 11, 0.22);
    border-color: rgba(252, 157, 11, 0.45);
}

@media (max-width: 520px) {
    .inventory-popup .shop-info-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .inventory-popup .shop-cta-btn {
        text-align: center;
    }
}

/* Inventory content */
.inventory-popup .inventory-content {
    flex: 1;
    max-height: 55vh;
    overflow-y: auto;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}
.inventory-popup .inventory-content::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Empty inventory state */
.inventory-popup .empty-inventory {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
}

.inventory-popup .empty-inventory i {
    font-size: 3rem;
    color: #a0aec0;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.inventory-popup .empty-inventory p {
    color: #a0aec0;
    margin-bottom: 0.5rem;
}

.inventory-popup .empty-inventory .empty-subtitle {
    color: #a0aec0;
    font-size: 0.9rem;
}

/* Inventory items */
.inventory-popup .inventory-item {
    min-height: 140px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.inventory-popup .inventory-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Listed item styles - item is on marketplace */
.inventory-popup .inventory-item.item-listed {
    opacity: 0.7;
    border-color: rgba(155, 89, 182, 0.5);
    background: rgba(155, 89, 182, 0.1);
    cursor: not-allowed;
}

.inventory-popup .inventory-item.item-listed::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(155, 89, 182, 0.05) 10px,
        rgba(155, 89, 182, 0.05) 20px
    );
    pointer-events: none;
}

.inventory-popup .inventory-item.item-listed:hover {
    transform: none;
    box-shadow: none;
}

.inventory-popup .inventory-item .listed-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(155, 89, 182, 0.4);
}

.inventory-popup .inventory-item .listed-badge i {
    font-size: 0.65rem;
}

/* Unlock status badge for game cards */
.inventory-popup .inventory-item .unlock-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
}

.inventory-popup .inventory-item .unlock-badge.unlocked {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: #fff;
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.4);
}

.inventory-popup .inventory-item .unlock-badge.locked {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.4);
}

.inventory-popup .inventory-item .unlock-badge i {
    font-size: 0.6rem;
}

/* Protected badge for game cards */
.inventory-popup .inventory-item .protected-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.5);
    z-index: 10;
}

.inventory-popup .inventory-item.item-protected {
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.4), 0 4px 15px rgba(0, 0, 0, 0.2);
}

.inventory-popup .item-rarity-bar {
    height: 4px;
}

.inventory-popup .item-rarity-bar.common {
    background: linear-gradient(90deg, #8e8e93, #636366);
}

.inventory-popup .item-rarity-bar.uncommon {
    background: linear-gradient(90deg, #34c759, #30d158);
}

.inventory-popup .item-rarity-bar.rare {
    background: linear-gradient(90deg, #007aff, #5ac8fa);
}

.inventory-popup .item-rarity-bar.epic {
    background: linear-gradient(90deg, #af52de, #bf5af2);
}

.inventory-popup .item-rarity-bar.legendary {
    background: linear-gradient(90deg, #ff9500, #ffb340, #ffd700, #ffb340, #ff9500);
    background-size: 200% 100%;
    animation: legendary-bar-shine 2s ease-in-out infinite;
    height: 6px;
    box-shadow: inset 0 0 6px rgba(255, 149, 0, 0.3);
}

.inventory-popup .item-rarity-bar.mythic {
    background: linear-gradient(90deg, #ff3b30, #ff6961, #ff1744, #e91e63, #ff3b30);
    background-size: 200% 100%;
    animation: mythic-bar-shine 1.5s ease-in-out infinite;
    height: 8px;
    box-shadow: 0 2px 12px rgba(255, 59, 48, 0.5);
}

@keyframes legendary-bar-shine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes mythic-bar-shine {
    0%, 100% { background-position: 0% 50%; filter: brightness(1); }
    50% { background-position: 100% 50%; filter: brightness(1.2); }
}

.inventory-popup .item-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.inventory-popup .item-type {
    font-size: 0.8rem;
    color: #a0aec0;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.inventory-popup .item-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
    flex-grow: 1;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    letter-spacing: normal;
}

.inventory-popup .item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inventory-popup .item-rarity {
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: capitalize;
}

.inventory-popup .item-rarity.common { color: #8e8e93; }
.inventory-popup .item-rarity.uncommon { color: #34c759; }
.inventory-popup .item-rarity.rare { color: #007aff; }
.inventory-popup .item-rarity.epic { color: #af52de; }
.inventory-popup .item-rarity.legendary { color: #ff9500; }
.inventory-popup .item-rarity.mythic { color: #ff3b30; }

.inventory-popup .item-id {
    color: #a0aec0;
    font-size: 0.85rem;
}

/* Loading state */
.inventory-popup-overlay.loading {
    background-color: rgba(0, 0, 0, 0.5);
}

.inventory-popup.loading-popup {
    width: auto;
    background: rgba(0, 0, 0, 0.7);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.inventory-popup .loading-spinner {
    font-size: 2rem;
    color: #fc9d0b;
    margin-bottom: 1rem;
}

/* Lootbox multi-open controls */
.inventory-popup .lootbox-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}

.inventory-popup .lootbox-open-count-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 6px 8px;
    flex: 0 0 auto;
}

.inventory-popup .lootbox-open-count-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
}

.inventory-popup .lootbox-open-count-buttons {
    display: flex;
    gap: 6px;
}

.inventory-popup .lootbox-count-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.inventory-popup .lootbox-count-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.inventory-popup .lootbox-count-btn.active {
    background: rgba(252, 157, 11, 0.20);
    border-color: rgba(252, 157, 11, 0.45);
}

/* Ensure open button fits */
.inventory-popup .open-lootbox-btn {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
}

/* Lootbox results modal */
.lootbox-results-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10050;
    padding: 20px;
}

.lootbox-results-popup {
    width: min(760px, 96vw);
    max-height: min(80vh, 720px);
    overflow: hidden;
    border-radius: 14px;
    background: rgba(20, 30, 46, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
}

.lootbox-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.lootbox-results-title {
    font-weight: 700;
    color: #fff;
}

.lootbox-results-close {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    padding: 6px;
}

.lootbox-results-summary {
    padding: 10px 16px;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lootbox-results-summary-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.lootbox-results-summary-dot {
    opacity: 0.6;
}

.lootbox-results-summary-hint {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

.lootbox-results-grid {
    padding: 14px 16px;
    overflow: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.lootbox-results-tablet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
}

.lootbox-results-tablet-left {
    display: flex;
    gap: 10px;
    align-items: center;
}

.lootbox-results-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
    flex: 0 0 auto;
}

.lootbox-results-icon i {
    color: rgba(255, 255, 255, 0.92);
    font-size: 18px;
}

.lootbox-results-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lootbox-results-name {
    color: #fff;
    font-weight: 700;
}

.lootbox-results-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.lootbox-results-rarity {
    text-transform: capitalize;
    font-size: 12px;
    font-weight: 700;
}

.lootbox-results-badge {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 3px 8px;
    border-radius: 999px;
}

.lootbox-results-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    justify-content: flex-end;
}

.lootbox-results-ok {
    border: 0;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 700;
    color: #111827;
    background: #fc9d0b;
}

/* Tablet coloring by rarity */
.lootbox-results-tablet.common { border-left: 6px solid #8e8e93; }
.lootbox-results-tablet.uncommon { border-left: 6px solid #34c759; background: linear-gradient(145deg, rgba(52, 199, 89, 0.10), rgba(0,0,0,0.25)); }
.lootbox-results-tablet.rare { border-left: 6px solid #007aff; background: linear-gradient(145deg, rgba(0, 122, 255, 0.12), rgba(0,0,0,0.25)); }
.lootbox-results-tablet.epic { border-left: 6px solid #af52de; background: linear-gradient(145deg, rgba(175, 82, 222, 0.14), rgba(0,0,0,0.25)); }

.lootbox-results-tablet.legendary {
    border-left: 6px solid #ff9500;
    background: linear-gradient(90deg, rgba(255, 149, 0, 0.20), rgba(255, 179, 64, 0.10), rgba(255, 215, 0, 0.18), rgba(255, 179, 64, 0.10), rgba(255, 149, 0, 0.20));
    background-size: 200% 100%;
    animation: legendary-bar-shine 2s ease-in-out infinite;
    box-shadow: 0 0 0 1px rgba(255, 149, 0, 0.12), 0 10px 26px rgba(0, 0, 0, 0.35);
}

.lootbox-results-tablet.mythic {
    border-left: 6px solid #ff3b30;
    background: linear-gradient(90deg, rgba(255, 59, 48, 0.18), rgba(255, 105, 97, 0.10), rgba(255, 23, 68, 0.14), rgba(233, 30, 99, 0.10), rgba(255, 59, 48, 0.18));
    background-size: 200% 100%;
    animation: mythic-bar-shine 1.5s ease-in-out infinite;
    box-shadow: 0 0 0 1px rgba(255, 59, 48, 0.14), 0 10px 26px rgba(0, 0, 0, 0.35);
}

.lootbox-results-tablet.ascendant { border-left: 6px solid #22c55e; background: linear-gradient(145deg, rgba(34, 197, 94, 0.12), rgba(0,0,0,0.25)); }
.lootbox-results-tablet.transcendent {
    border-left: 6px solid #ffd700;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.22), rgba(255, 179, 64, 0.10), rgba(255, 215, 0, 0.18));
    background-size: 200% 100%;
    animation: legendary-bar-shine 2.2s ease-in-out infinite;
}

.lootbox-results-rarity.common { color: #8e8e93; }
.lootbox-results-rarity.uncommon { color: #34c759; }
.lootbox-results-rarity.rare { color: #007aff; }
.lootbox-results-rarity.epic { color: #af52de; }
.lootbox-results-rarity.legendary { color: #ff9500; }
.lootbox-results-rarity.mythic { color: #ff3b30; }
.lootbox-results-rarity.ascendant { color: #22c55e; }
.lootbox-results-rarity.transcendent { color: #ffd700; }

/* Error state */
.inventory-popup.error-popup {
    width: auto;
    background: rgba(0, 0, 0, 0.7);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.inventory-popup .error-icon {
    font-size: 2rem;
    color: #ff3b30;
    margin-bottom: 1rem;
}

.inventory-popup .popup-button.error {
    background: #ff3b30;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    margin-top: 1rem;
    cursor: pointer;
}

/* Item details modal */
.item-details-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100001;
}

.item-details-popup {
    background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%);
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.item-details-content {
    padding: 1.5rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.item-details-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
}

.item-details-icon.common { background: linear-gradient(135deg, #8e8e93, #636366); }
.item-details-icon.uncommon { background: linear-gradient(135deg, #34c759, #30d158); }
.item-details-icon.rare { background: linear-gradient(135deg, #007aff, #5ac8fa); }
.item-details-icon.epic { background: linear-gradient(135deg, #af52de, #bf5af2); }
.item-details-icon.legendary { background: linear-gradient(135deg, #ff9500, #ffb340); }
.item-details-icon.mythic { background: linear-gradient(135deg, #ff3b30, #ff6961); }

.item-details-info {
    flex: 1;
}

.item-detail {
    display: flex;
    margin-bottom: 0.75rem;
}

.item-detail .detail-label {
    width: 80px;
    color: #a0aec0;
    font-size: 0.9rem;
}

.item-detail .detail-value {
    flex: 1;
    color: #fff;
}

.item-description {
    margin-top: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 1rem;
}

.item-description .detail-label {
    display: block;
    color: #a0aec0;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.item-description p {
    margin: 0;
    color: #fff;
    line-height: 1.5;
}

.item-actions {
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Listed warning banner in item details */
.listed-warning-banner {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.3), rgba(142, 68, 173, 0.3));
    border: 1px solid rgba(155, 89, 182, 0.5);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #d4a5ff;
    font-size: 0.9rem;
}

.listed-warning-banner i {
    font-size: 1.2rem;
    color: #b388ff;
}

.listed-warning-banner strong {
    color: #fff;
}

/* Listed item notice in actions area */
.listed-item-notice {
    background: rgba(155, 89, 182, 0.15);
    border: 1px solid rgba(155, 89, 182, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    text-align: left;
    width: 100%;
}

.listed-item-notice i {
    color: #b388ff;
    font-size: 1rem;
    margin-top: 2px;
}

.listed-item-notice p {
    margin: 0;
    color: #a0aec0;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Cancel listing button style */
.item-action-button.cancel-listing-btn:hover {
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

.item-action-button {
    background: linear-gradient(135deg, #fc9d0b 0%, #e68a00 100%);
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 24px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.item-action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(252, 157, 11, 0.4);
}

.item-action-button.claimed {
    background: linear-gradient(135deg, #8e8e93 0%, #636366 100%);
    cursor: not-allowed;
}

.item-action-button.claimed:hover {
    transform: none;
    box-shadow: none;
}

/* Game key modal */
.game-key-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100002;
}

.game-key-modal {
    background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    color: #c5c3c0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.game-key-header {
    background: linear-gradient(135deg, #2a475e 0%, #1b2838 100%);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.game-key-header h3 {
    margin: 0;
    color: #fc9d0b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.game-key-content {
    padding: 1.5rem;
}

.game-key-display {
    margin-bottom: 1.5rem;
}

.key-label {
    color: #fc9d0b;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.key-container {
    display: flex;
    gap: 0.75rem;
}

.key-input {
    flex: 1;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(252, 157, 11, 0.3);
    border-radius: 6px;
    color: #fc9d0b;
    font-family: monospace;
    font-size: 1.1rem;
    text-align: center;
}

.copy-key-btn {
    background: linear-gradient(135deg, #fc9d0b, #e68a00);
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.copy-key-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(252, 157, 11, 0.3);
}

.activation-instructions h4 {
    color: #fc9d0b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.activation-instructions ol {
    padding-left: 1.5rem;
    margin: 0;
    color: #8f98a0;
    line-height: 1.6;
}

.activation-instructions li {
    margin-bottom: 0.5rem;
}

.activation-instructions li:last-child {
    margin-bottom: 0;
}

/* Toast notifications */
.toast {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 100003;
    background: rgba(0, 0, 0, 0.8);
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transform: translateX(120%);
    transition: transform 0.3s ease;
}

.toast.success {
    border-left: 4px solid #4caf50;
}

.toast.error {
    border-left: 4px solid #f44336;
}

.toast.info {
    border-left: 4px solid #2196f3;
}

.toast.show {
    transform: translateX(0);
}

.toast-content {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
}

.toast i {
    margin-right: 10px;
}

.toast.success i {
    color: #4caf50;
}

.toast.error i {
    color: #f44336;
}

.toast.info i {
    color: #2196f3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .inventory-popup .inventory-content {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 1rem;
        padding: 1rem;
    }

    .item-details-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .item-detail {
        flex-direction: column;
        text-align: center;
    }

    .item-detail .detail-label {
        width: auto;
        margin-bottom: 0.25rem;
    }

    .key-container {
        flex-direction: column;
    }

    .copy-key-btn {
        align-self: stretch;
    }
}