@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Inter:wght@400;700;900&display=swap');

/* --- GRUNDGERÜST --- */
body {
    /* Der typische Fortnite-Hintergrund: Ein radialer Verlauf von Hellblau zu fast Schwarz */
    background: radial-gradient(circle at center, #1e3a8a 0%, #020617 100%);
    background-attachment: fixed; /* Hintergrund bleibt beim Scrollen stehen */
    color: white;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden; /* Verhindert seitliches Wackeln */
}

/* --- BILD-WECHSLER (Cross-Fade Animation) --- */
/* Der Container für das Wechsel-Bild */
.image-swapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Beide Bilder liegen übereinander */
.image-swapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Animation für den ECHTEN Skin (Verschwindet, wenn Lego kommt) */
.main-layer {
    animation: fadeOutMain 6s infinite;
}

/* Animation für die LEGO Version (Erscheint) */
.lego-layer {
    animation: fadeInLego 6s infinite;
}

/* --- KEYFRAMES FÜR DEN ÜBERGANG --- */
@keyframes fadeOutMain {
    0%, 45% { opacity: 1; }  /* Bleibt sichtbar */
    50%, 95% { opacity: 0; } /* Wird unsichtbar (damit Lego sauber aussieht) */
    100% { opacity: 1; }     /* Kommt wieder */
}

@keyframes fadeInLego {
    0%, 45% { opacity: 0; }  /* Bleibt unsichtbar */
    50%, 95% { opacity: 1; } /* Wird sichtbar */
    100% { opacity: 0; }     /* Geht wieder weg */
}

/* --- SCROLLBAR (Hübsch machen für die Sidebar) --- */
/* Das macht den Scrollbalken dünner und transparenter */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* --- TYPOGRAFIE --- */
h1, h2, h3 {
    /* Ein leichter schwarzer Schatten unter der Schrift macht sie lesbarer */
    text-shadow: 0px 4px 10px rgba(0,0,0,0.5);
}

/* --- KARTEN DESIGN (Die Boxen) --- */
.skin-card {
    position: relative;
    /* Falls ein Bild transparent ist, sieht man diesen Hintergrund nicht direkt, sondern die Rarity-Farbe */
    background-color: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease-in-out;
}

.skin-card:hover {
    transform: scale(1.05); /* Zoom-Effekt */
    border-color: rgba(255, 255, 255, 0.8); /* Weißer Rand beim Hover */
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.15); /* Leuchten */
    z-index: 20;
}

/* --- SELTENHEITEN (Hintergrund-Farben & Ränder) --- */
/* Diese Verläufe füllen den Hintergrund, wenn ein Item (z.B. Spray) transparent ist */

/* Grau (Gewöhnlich / Common) */
.rarity-common {
    background: radial-gradient(circle, #6e6e6e 0%, #2b2b2b 100%);
    border-bottom: 4px solid #bebebe;
}

/* Grün (Ungewöhnlich / Uncommon) */
.rarity-uncommon {
    background: radial-gradient(circle, #60aa3a 0%, #1e3512 100%);
    border-bottom: 4px solid #60aa3a;
}

/* Blau (Selten / Rare) */
.rarity-rare {
    background: radial-gradient(circle, #44bdff 0%, #0f364d 100%);
    border-bottom: 4px solid #44bdff;
}

/* Lila (Episch / Epic) */
.rarity-epic {
    background: radial-gradient(circle, #d05ce3 0%, #4a1c52 100%);
    border-bottom: 4px solid #d05ce3;
}

/* Gold (Legendär / Legendary) */
.rarity-legendary {
    background: radial-gradient(circle, #f0a946 0%, #633f12 100%);
    border-bottom: 4px solid #f0a946;
}

/* --- SPEZIAL REIHEN (Marvel, DC, Icons, etc.) --- */

/* Marvel (Rot) */
.rarity-marvel {
    background: radial-gradient(circle, #e23d3d 0%, #4a0e0e 100%);
    border-bottom: 4px solid #e23d3d;
}

/* DC (Dunkelblau) */
.rarity-dc {
    background: radial-gradient(circle, #3b5f8a 0%, #0f1b2b 100%);
    border-bottom: 4px solid #3b5f8a;
}

/* Ikonen / Icon Series (Türkis) */
.rarity-icon {
    background: radial-gradient(circle, #60dcd2 0%, #1a4f4b 100%);
    border-bottom: 4px solid #60dcd2;
}

/* Gaming Legenden (Lila-Blau) */
.rarity-gaminglegends {
    background: radial-gradient(circle, #6848c9 0%, #221645 100%);
    border-bottom: 4px solid #6848c9;
}

/* Star Wars (Blau/Schwarz) */
.rarity-starwars {
    background: radial-gradient(circle, #2e4da8 0%, #000000 100%);
    border-bottom: 4px solid #2e4da8;
}

/* Schatten / Shadow Series (Schwarz/Weiß) */
.rarity-shadow {
    background: radial-gradient(circle, #333333 0%, #000000 100%);
    border-bottom: 4px solid #ffffff;
}

/* Slurp Series (Mintgrün) */
.rarity-slurp {
    background: radial-gradient(circle, #00f2d5 0%, #004d44 100%);
    border-bottom: 4px solid #00f2d5;
}

/* Lava Series (Feuer) */
.rarity-lava {
    background: radial-gradient(circle, #ffba36 0%, #691616 100%);
    border-bottom: 4px solid #ffba36;
}

/* Eis / Frozen Series (Hellblau) */
.rarity-frozen {
    background: radial-gradient(circle, #aeeeff 0%, #2e5d75 100%);
    border-bottom: 4px solid #aeeeff;
}

/* Dunkle / Dark Series (Lila/Schwarz) */
.rarity-dark {
    background: radial-gradient(circle, #d05ce3 0%, #000000 100%);
    border-bottom: 4px solid #d05ce3;
}