/* D:\Weekly_Reroll\WebDashboard\static\css\shop.css */
body { font-family: 'Prompt', sans-serif; }

@keyframes amberPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.45), 0 0 40px rgba(234, 88, 12, 0.25);
        border-color: rgba(245, 158, 11, 0.8);
    }
    50% {
        box-shadow: 0 0 35px rgba(245, 158, 11, 0.85), 0 0 65px rgba(234, 88, 12, 0.55);
        border-color: rgba(251, 191, 36, 1);
    }
}
.amber-glow-box {
    animation: amberPulse 2.5s infinite ease-in-out;
}

.fullcard-item {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.fullcard-item:hover { transform: translateY(-3px) scale(1.03); }
.fullcard-item.selected {
    border-color: #f59e0b !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
    transform: translateY(-2px);
}
.fullcard-item.selected::after {
    content: '✓';
    position: absolute;
    top: 4px; right: 4px;
    background: #f59e0b; color: #000;
    font-weight: bold; font-size: 10px;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.filter-btn.active {
    background-color: #f59e0b !important;
    color: #020617 !important;
    border-color: #f59e0b !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.player-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 4px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.tier-tier_1 { 
    background: #fef3c7 !important; 
    border: 1.5px solid #f59e0b !important; 
    color: #b45309 !important; 
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.25) !important;
}
.tier-tier_2 { 
    background: #f3e8ff !important; 
    border: 1.5px solid #a855f7 !important; 
    color: #6b21a8 !important; 
    box-shadow: 0 1px 4px rgba(168, 85, 247, 0.25) !important;
}
.tier-tier_3 { 
    background: #dbeafe !important; 
    border: 1.5px solid #3b82f6 !important; 
    color: #1d4ed8 !important; 
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.2) !important;
}
.tier-tier_4 { 
    background: #dcfce7 !important; 
    border: 1.5px solid #22c55e !important; 
    color: #15803d !important; 
    box-shadow: 0 1px 4px rgba(34, 197, 94, 0.2) !important;
}
.tier-tier_5 { 
    background: #f1f5f9 !important; 
    border: 1px solid #cbd5e1 !important; 
    color: #475569 !important; 
}

.dark .tier-tier_1 { 
    background: rgba(30, 27, 15, 0.9) !important; 
    border: 1.5px solid #f59e0b !important; 
    color: #fbbf24 !important; 
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.45) !important;
}
.dark .tier-tier_2 { 
    background: rgba(25, 16, 38, 0.9) !important; 
    border: 1.5px solid #a855f7 !important; 
    color: #c084fc !important; 
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.45) !important;
}
.dark .tier-tier_3 { 
    background: rgba(15, 23, 42, 0.9) !important; 
    border: 1.5px solid #3b82f6 !important; 
    color: #60a5fa !important; 
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.35) !important;
}
.dark .tier-tier_4 { 
    background: rgba(13, 31, 23, 0.9) !important; 
    border: 1.5px solid #22c55e !important; 
    color: #4ade80 !important; 
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.35) !important;
}
.dark .tier-tier_5 { 
    background: rgba(30, 41, 59, 0.8) !important; 
    border: 1px solid rgba(148, 163, 184, 0.4) !important; 
    color: #cbd5e1 !important; 
}

@keyframes soundWave {
    0%, 100% { height: 4px; }
    50% { height: 12px; }
}
.wave-bar {
    width: 2px;
    background-color: #f59e0b;
    border-radius: 99px;
    animation: soundWave 1.2s infinite ease-in-out;
}
.wave-bar:nth-child(2) { animation-delay: 0.2s; }
.wave-bar:nth-child(3) { animation-delay: 0.4s; }
.paused .wave-bar { animation-play-state: paused; height: 3px; } 

@media (max-width: 768px) {
    #fullcardsGrid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 4px !important;
        max-height: 240px !important;
    }

    .fullcard-item {
        width: 100% !important;
        padding: 2px !important;
    }

    .fullcard-item img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        border-radius: 6px !important;
    }

    .fullcard-item span {
        font-size: 8px !important;
        line-height: 1.1 !important;
        margin-top: 1px !important;
    }
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.35);
    border-radius: 9999px;
    transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.7);
}
#imageModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
}