/* ============================================
   LEGO VAULT — Star Wars Theme Custom Styles
   ============================================ */

/* --- Starfield Background --- */
.stars-bg {
    background: radial-gradient(ellipse at center, #0A0A1A 0%, #050508 100%);
}
.stars-bg::before,
.stars-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255, 232, 31, 0.4), transparent),
        radial-gradient(1px 1px at 30% 65%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1.5px 1.5px at 50% 10%, rgba(79, 195, 247, 0.5), transparent),
        radial-gradient(1px 1px at 70% 40%, rgba(255, 255, 255, 0.25), transparent),
        radial-gradient(1px 1px at 90% 80%, rgba(255, 232, 31, 0.3), transparent),
        radial-gradient(1px 1px at 15% 85%, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(1.5px 1.5px at 45% 50%, rgba(200, 169, 81, 0.4), transparent),
        radial-gradient(1px 1px at 80% 15%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 60% 90%, rgba(79, 195, 247, 0.3), transparent),
        radial-gradient(1px 1px at 25% 45%, rgba(255, 255, 255, 0.2), transparent);
    background-size: 200px 200px;
    animation: twinkle 8s ease-in-out infinite alternate;
}
.stars-bg::after {
    background-image:
        radial-gradient(1px 1px at 5% 50%, rgba(255, 232, 31, 0.3), transparent),
        radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 40% 75%, rgba(79, 195, 247, 0.3), transparent),
        radial-gradient(1px 1px at 55% 25%, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(1px 1px at 75% 60%, rgba(200, 169, 81, 0.3), transparent),
        radial-gradient(1.5px 1.5px at 85% 35%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 35% 90%, rgba(255, 232, 31, 0.25), transparent),
        radial-gradient(1px 1px at 95% 55%, rgba(79, 195, 247, 0.4), transparent);
    background-size: 300px 300px;
    animation: twinkle 12s ease-in-out infinite alternate-reverse;
}

@keyframes twinkle {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* --- Lightsaber Glow Dividers --- */
.lightsaber-blue {
    box-shadow: 0 0 8px 2px rgba(79, 195, 247, 0.4), 0 0 20px 4px rgba(79, 195, 247, 0.2);
}
.lightsaber-yellow {
    box-shadow: 0 0 8px 2px rgba(255, 232, 31, 0.4), 0 0 20px 4px rgba(255, 232, 31, 0.2);
}

/* --- Card Hover Effects --- */
.set-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- Stat Card Hover Glow --- */
.stat-card:hover {
    box-shadow: 0 0 20px rgba(255, 232, 31, 0.15);
}

/* --- Custom Scrollbar (Webkit) --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0A0A0F;
}
::-webkit-scrollbar-thumb {
    background: #2A2A3E;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #FFE81F40;
}

/* --- Selection Color --- */
::selection {
    background: rgba(255, 232, 31, 0.3);
    color: #FFE81F;
}

/* --- Line Clamp Utility --- */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Pulse animation for the tagline --- */
@keyframes pulse-slow {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
.animate-pulse-slow {
    animation: pulse-slow 3s ease-in-out infinite;
}

/* --- Select dropdown arrow fix for dark theme --- */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FFE81F' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* --- Image error state --- */
img[src*="data:image/svg"] {
    opacity: 0.6;
}