/* Basic styles */
:root {
		--small-image-gap: 4%; /* Gap between small images */
		--large-to-small-gap: 3%; /* Gap between large and small images */
		--main-image-gap: 0.75vh; /* Gap between large images */
		--main-image-width-percent: 75vw; /* Percentage width of large images */
		--main-image-min-width: 340px; /* Minimum width of large images */
		--main-image-max-width: 680px; /* Maximum width of large images */
		--upper-image-width-percent: 8vw; /* Percentage width of the upper image */
		--upper-image-position: 0px /* Vertical offset of the upper image */
}

/* Basic body styles */
body {
		font-size: 14px; /* Grundgröße */
		margin: 0;
		padding: 0; 
		height: 100vh; /* Höhe des Viewports */
		width: 100vw; /* Breite des Viewports */
		font-family: Consolas, monospace;
		font-style: normal;
		font-weight: 400;
		font-display: swap;
		src: local('Consolas'), local('Consolas-Regular'), url(Consolas.woff2) format('woff2');
		display: flex;
		flex-direction: column; /* Vertikale Anordnung */
		height: 100vh; /* Damit der Body die volle Höhe des Viewports hat */
		/*background-color: #FFF; /* background #42413D;*/
		background-image: url(../web_images/10k.jpg);
		/*background-image: url(../web_images/33.png);*/
		/*background-image: url(../web_images/background.webp);*/	
		background-size: cover; /* Bild auf die Größe des Viewports anpassen */
		background-position: center; /* Das Bild zentrieren */
		background-attachment: fixed; /* Bild bleibt beim Scrollen fixiert */
		background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
		overflow: hidden; /* Prevent scrolling */
		-webkit-user-select: none; /* Für Safari */
		-moz-user-select: none;    /* Für Firefox */
		-ms-user-select: none;     /* Für Internet Explorer/Edge */
		user-select: none;         /* Standard */
}

.body a {
		color: #070;
		text-decoration: underline;
		/*margin: 0 10px;*/
}

.body a:hover {
		color: #0E0;
		text-decoration: underline;
}

.body a:visited {
		color: #070;
}

/* Fixierter Header-Bereich */
.header {
		font-size: 12px;
		position: fixed; /* Fixierte Position */
		top: 0; /* Am oberen Rand */
		left: 0;
		width: 100%; /* Ganze Breite des Viewports */
		height: 80px;
		background-color: rgba(10,52,77,0.5); /* Dunkler Hintergrund #0A344D */
		color: white; /* Weiße Schriftfarbe */
		display: flex;
		justify-content: center; /* Horizontale Zentrierung */
		align-items: center; /* Vertikale Zentrierung */
		z-index: 9999; /* Sicherstellen, dass der Header oben bleibt */
		box-shadow: 0px 7px 7px rgba(0, 111, 0, 0.3); /* Optional: Shadow to highlight the widget */
		user-select: none;
		backdrop-filter: blur(10px); /* Der Wert bestimmt die Intensität des Unschärfeeffekts */
}

/* Updated CSS for perfect centering */

/* Content wrapper - this should be a flexbox container */
.content-wrapper {
    margin-top: 0px;
    margin-bottom: 0px; /* Remove bottom margin */
    width: 100vw;
    height: 100vh; /* Full viewport height */
    flex: 1;
    padding: 0px;
    display: flex; /* Add flexbox */
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    box-sizing: border-box;
    background-color: rgba(10,52,77,0.2);
    overflow-x: hidden;
    z-index: 100;
}

/* Main Content - remove conflicting properties */
.content {
    font-size: calc(100% - 5px);
    margin: 0; /* Remove all margins - flexbox handles centering */
    padding: 20px;
    width: 80%;
    min-width: 360px;
    max-width: 1000px;
    /* Remove height calculations - let content determine height */
    color: #BBB;
    text-align: justify;
    box-sizing: border-box;
    background-color: rgba(10,52,77,0.9);
    backdrop-filter: blur(4px);
    text-align: center; /* Keep text centered */
    border-radius: 20px;
    border: 4px solid rgba(53, 160, 224, 1);
    box-shadow: 7px 7px 7px rgba(53,160,224,0.7);
    /* Remove conflicting align-items and justify-content from here */
}

/* Adjust footer to not overlap */
.footer {
    font-size: calc(100% - 4px);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 0px;
    color: #BBB;
    z-index: 10000;
    user-select: none;
    display: flex;
    flex-direction: row;
    background-color: rgba(10,52,77,0.8);
    backdrop-filter: blur(5px);
    border: 0px solid rgba(53, 160, 224, 0.9);
    box-shadow: 0px -7px 7px rgba(53,160,224,0.7);
}

.content a {
    	color: #C3E4F7;
    	text-decoration: none;
    	/*margin: 0 10px;*/
}

.content a:hover {
		color: #C3E4F7;
		text-decoration: underline;
}

.content a:visited {
		color: #C3E4F7;
}


.copyright {
		font-size: calc(100% - 2px); /* Schriftgröße 8px kleiner als die Grundgröße */
		color: #C3E4F7;
}

/* Main images */
.main-images {
		display: flex;
		height: auto; 
		/*min-height: 300px;*/
		flex-direction: column;
		justify-content: center; /* Horizontale Zentrierung */
		align-items: center; /* Vertikale Zentrierung */
		position: relative; /* Relative positioning for main images */
		margin: 5% 0px 0px 0px ;
		width: 100%;
		/*background-color: #050; /* background */
		box-sizing: border-box; /* Boxgröße berücksichtigen */
		z-index: 1000; /* Sicherstellen, dass es oben bleibt */
}

/* First (upper) large image */
.main-images a:first-child img {
		min-width: 150px;  /*Minimum width */
		max-width: 200px; /* Maximum width */
		width: var(--upper-image-width-percent); /* Width of the upper image */
		height: auto; /* Proportional height */
		/*border: 4px solid #8E8A91; /* Border with color and thickness */
		border: 6px solid #35A0E0; /* Border with color and thickness */
		border-radius: 50%; /* Round image */
		/*box-shadow: 15px 15px 15px rgba(0, 111, 0, 0.2); /* Slight white shadow */
		margin-bottom: var(--main-image-gap); /* Gap to the lower image */
		z-index: 1; /* Ensure the image stays below small images */
		opacity: 1;
		/*background-color: #500; /* background #42413D;*/
		box-sizing: border-box; /* Boxgröße berücksichtigen */
}

/* Second (lower) large image */
.main-images a:last-child img {
		width: var(--main-image-width-percent); /* Percentage width remains the same */
		max-width: var(--main-image-max-width); /* Maximum width */
		height: auto; /* Proportional height */
		border: none; /* No border */
		/*position: relative;*/
		z-index: 0; /* Ensure the image stays below small images */
		align-items: center;
		opacity:1;
		/*background-color: #500; /* background #42413D;*/
		box-sizing: border-box; /* Boxgröße berücksichtigen */
}

/* Small images */
.small-images {
		margin: 0px 0px 5% 0px;
		width: 100%;
		height: auto;
		min-height: 100px;
		max-height: 160px;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--small-image-gap); /* Gap between small images */
		flex-wrap: nowrap;
		margin-top: var(--large-to-small-gap); /* Gap between large and small images */
		z-index: 2; /* Small images above large images */
		position: relative; /* Position relative to other elements */
		/*background-color: #050; /* background #42413D;*/

}

/* Small images */
.small-images a {
		display: inline-block;
		position: relative; /* Position relative to the image so tooltip appears correctly */
		padding: 0px; /* Space between the image and the border */
}

/* Small images */
.small-images img {
		min-width: 50px;
		max-width: 100px;
		min-height: 50px;
		max-height: 100px;
		width: 14vw;
		height: auto;
		/*border-radius: 50%;*/
		*box-shadow: 10px 10px 10px rgba(111, 255, 111, 0.2); /* Slight white shadow */
		transition: transform 0.7s ease;
		/*border: 3px solid #8E8A91; /* The border is added here */
		opacity: 0.6;
		z-index: 666;
}

@media screen and (pointer: fine) {
		/* Styles for devices with fine pointers like a mouse or trackpad */
		/* Hover effect for small images */
		.small-images img:hover {
		transform: scale(1.2); /* Enlargement on hover */
		opacity: 1;
	}
	
	/* Hide tooltip when the image is clicked */
	.small-images a[title].clicked::after {
		display: none;
		color: #000;
	}
	
	/* Reset the scale of the small image after it's clicked */
	.small-images a.clicked img {
		transform: scale(1.0) !important;  /* Ensure image is at normal scale after click */
		opacity: 0.6;  /* Optional: Reset opacity if needed */
	}
	/* Tooltips for small images */
	.small-images a[title]:hover::after {
		content: attr(title);
		position: absolute;
		/*background-color: rgba(0, 0, 0, 0.8);*/
		color: #CCC;
		padding: 3px 3px 3px 3px;
		border-radius: 5px;
		bottom: -30%; /* Tooltip below the image */
		left: 50%; /* Tooltip horizontally centered */
		transform: translateX(-50%); /* Align tooltip exactly in the middle */
		font-size: 16px;
		white-space: nowrap;
		z-index: 9999;
	}
}


.footer a {
		color: #BBB;
		text-decoration: none;
		/*margin: 0 10px;*/
}

.footer a:hover {
		color: #CCC;
		text-decoration: underline;
}

.footer a:visited {
		color: #BBB;
}

.separator { 
		color: rgba( 53, 160, 224, 0.7); 
		padding: 0px 8px 0px 8px;
}

@media (max-width: 480px) {
		.body {
			font-size: 10px; /* Smaller font size for tablets */
			
		}
		.footer {
			font-size: 10px; /* Even smaller font size for smartphones */
		}
		
		.content {
			font-size: 10px; /* Even smaller font size for smartphones */
		}
		
		.header {
			font-size: 10px; /* Even smaller font size for smartphones */
		}
}
@media (min-width: 480px) {
		.body {
			font-size: 12px; /* Smaller font size for tablets */
			
		}
		.footer {
			font-size: 12px; /* Even smaller font size for smartphones */
		}
		
		.content {
			font-size: 12px; /* Even smaller font size for smartphones */
		}
		
		.header {
			font-size: 12px; /* Even smaller font size for smartphones */
		}	
}


/* Adjust font size on smaller screens */
@media (min-width: 768px) {
		.body {
			font-size: 14px; /* Smaller font size for tablets */
		}
		.footer {
			font-size: 14px; /* Smaller font size for tablets */
		}
		.content {
			font-size: 14px; /* Even smaller font size for smartphones */
		}
		.header {
			font-size: 14px; /* Even smaller font size for smartphones */
		}
}

@media (min-width: 1921px) {
		.body {
			font-size: 16px; /* Smaller font size for tablets */
			
		}
		
		.footer {
			font-size: 16px; /* Even smaller font size for smartphones */
		}
		
		.content {
			font-size: 16px; /* Even smaller font size for smartphones */
		}
		.header {
			font-size: 16px; /* Even smaller font size for smartphones */
		}
}

/* Adjust font size on bigger screens */
@media (min-width: 2561px) {
		.body {
			font-size: 18px; /* Smaller font size for tablets */
			
		}
		
		.footer {
			font-size: 18px; /* Smaller font size for tablets */
		}
		
		.content {
			font-size: 18px; /* Even smaller font size for smartphones */
		}
		
		.header {
			font-size: 18px; /* Even smaller font size for smartphones */
		}
}

/* Optional: Absatzabstände */
p {
		margin-bottom: 10px; /* Abstand zwischen Absätzen */
}
/* Für Webkit-Browser (Chrome, Safari, Opera) */
::-webkit-scrollbar {
		width: 14px; /* Breite der Scrollleiste */
		height: 14px; /* Höhe der horizontalen Scrollleiste */
}
::-webkit-scrollbar-thumb {
		background-color: rgba( 53, 160, 224,0.3); /* Dunkler Daumen (der bewegliche Teil) */
		/*border-radius: 10px; /* Abgerundete Ecken für den Daumen */
		border: 1px solidrgba( 53, 160, 224,0.3); /* Dunkler Rand um den Daumen */
}
::-webkit-scrollbar-track {
		background: rgba(0,0,0,0.8); /* Farbe des Bereichs, in dem sich der Daumen bewegt */
		/*border-radius: 10px;*/
		border: 1px solid rgba( 53, 160, 224,0.3); /* Dunkler Rand um den Daumen */
}
/* Firefox */
scrollbar-width: 12px; /* Macht die Scrollleiste dünner */
scrollbar-color: rgba(0,0,0,0.7) rgba(0,0,0,0.7); /* Daumen und Track (Hintergrund) */


#snow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

.snowflake {
    position: absolute;
    top: -10px;
    background-color: white;
    border-radius: 50%;
    opacity: 0.8;
    pointer-events: none;
    animation: fall linear infinite;
}

@keyframes fall {
    0% {
        transform: translateX(0) translateY(0);
    }
    100% {
        transform: translateX(var(--x)) translateY(100vh);
    }
}

/* Optional: Einfache Nachricht, um die Besucher anzusprechen */
.message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    font-family: 'Arial', sans-serif;
    text-align: center;
    z-index: 10000;
}
		

/* Override any conflicting styles for better compatibility */
        .nft-grid {
            display: grid;
            gap: 15px;
            margin-bottom: 30px;
            transition: all 0.3s ease;
            /* Remove any conflicting properties that might break layout */
            contain: initial;
            will-change: initial;
            transform: initial;
            padding: 20px 20px;
            margin: -20px -20px 30px -20px;
            /* Mobile Performance Optimizations */
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }

        /* Ensure grid sizes work properly */
        .grid-small { 
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
        }
        .grid-medium { 
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); 
        }
        .grid-large { 
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
        }
		
		/* ===== RARITY-BASIERTE NFT CARD STYLING ===== */
        /* Base NFT Card Styling - OHNE feste Border-Farbe */
        .nft-card {
            position: relative;
            border-radius: 15px;
            overflow: hidden;
            border: 2px solid; /* Border wird durch Rarity-Klasse gesetzt */
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(15px);
            transition: all 0.2s ease;
            opacity: 0;
            transform: translateY(20px);
            cursor: pointer;
            /* Mobile Performance */
            contain: layout style paint;
            will-change: transform;
            /* Default border fallback (falls keine Rarity gesetzt) */
            border-color: rgba(149, 165, 166, 0.7);
            box-shadow: 0 4px 15px rgba(149, 165, 166, 0.3);
        }

        .nft-card.loaded {
            opacity: 1;
            transform: translateY(0);
        }

        /* ===== RARITY-BASIERTE BORDER FARBEN ===== */
        .nft-card.super-legendary {
            border-color: rgba(231, 76, 60, 0.7); /* #E74C3C */
            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
        }

        .nft-card.legendary {
            border-color: rgba(255, 176, 38, 0.7); /* #FFB026 */
            box-shadow: 0 4px 15px rgba(255, 176, 38, 0.3);
        }

        .nft-card.epic {
            border-color: rgba(142, 68, 173, 0.7); /* #8E44AD */
            box-shadow: 0 4px 15px rgba(142, 68, 173, 0.3);
        }

        .nft-card.mythical {
            border-color: rgba(26, 188, 156, 0.7); /* #1ABC9C */
            box-shadow: 0 4px 15px rgba(26, 188, 156, 0.3);
        }

        .nft-card.rare {
            border-color: rgba(52, 152, 219, 0.7); /* #3498DB */
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }

        .nft-card.distinct {
            border-color: rgba(39, 174, 96, 0.7); /* #27AE60 */
            box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
        }

        .nft-card.common {
            border-color: rgba(149, 165, 166, 0.7); /* #95A5A6 */
            box-shadow: 0 4px 15px rgba(149, 165, 166, 0.3);
        }

        /* ===== RARITY-BASIERTE HOVER EFFECTS ===== */
        /* Desktop hover effects */
        @media (hover: hover) and (pointer: fine) {
            .nft-card.super-legendary:hover {
                border-color: rgba(231, 76, 60, 0.9);
                box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
                transform: scale(1.03);
                z-index: 10;
            }

            .nft-card.legendary:hover {
                border-color: rgba(255, 176, 38, 0.9);
                box-shadow: 0 8px 25px rgba(255, 176, 38, 0.4);
                transform: scale(1.03);
                z-index: 10;
            }

            .nft-card.epic:hover {
                border-color: rgba(142, 68, 173, 0.9);
                box-shadow: 0 8px 25px rgba(142, 68, 173, 0.4);
                transform: scale(1.03);
                z-index: 10;
            }

            .nft-card.mythical:hover {
                border-color: rgba(26, 188, 156, 0.9);
                box-shadow: 0 8px 25px rgba(26, 188, 156, 0.4);
                transform: scale(1.03);
                z-index: 10;
            }

            .nft-card.rare:hover {
                border-color: rgba(52, 152, 219, 0.9);
                box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
                transform: scale(1.03);
                z-index: 10;
            }

            .nft-card.distinct:hover {
                border-color: rgba(39, 174, 96, 0.9);
                box-shadow: 0 8px 25px rgba(39, 174, 96, 0.4);
                transform: scale(1.03);
                z-index: 10;
            }

            .nft-card.common:hover {
                border-color: rgba(149, 165, 166, 0.9);
                box-shadow: 0 8px 25px rgba(149, 165, 166, 0.4);
                transform: scale(1.03);
                z-index: 10;
            }
            
            .nft-card:hover .nft-image {
                transform: scale(1.03);
                opacity: 1; /* Bilder bleiben immer undurchsichtig */
            }
        }

        /* Mobile: reduced hover effects for performance */
        @media (hover: none) and (pointer: coarse) {
            .nft-card.super-legendary:hover {
                border-color: rgba(231, 76, 60, 1);
                transform: none;
            }

            .nft-card.legendary:hover {
                border-color: rgba(255, 176, 38, 1);
                transform: none;
            }

            .nft-card.epic:hover {
                border-color: rgba(142, 68, 173, 1);
                transform: none;
            }

            .nft-card.mythical:hover {
                border-color: rgba(26, 188, 156, 1);
                transform: none;
            }

            .nft-card.rare:hover {
                border-color: rgba(52, 152, 219, 1);
                transform: none;
            }

            .nft-card.distinct:hover {
                border-color: rgba(39, 174, 96, 1);
                transform: none;
            }

            .nft-card.common:hover {
                border-color: rgba(149, 165, 166, 1);
                transform: none;
            }
            
            .nft-card:hover .nft-image {
                transform: none;
                opacity: 1; /* Bilder bleiben auch auf Mobile undurchsichtig */
            }
        }

        .nft-image {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            opacity: 1; /* NFT-Bilder immer vollständig undurchsichtig */
            background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
            display: block;
            vertical-align: top;
            transition: transform 0.3s ease;
            /* Mobile image optimizations */
            image-rendering: auto;
            image-rendering: crisp-edges;
            image-rendering: -webkit-optimize-contrast;
        }

        /* PLATZHALTER mit EXAKT gleichen CSS-Regeln wie echte NFT Cards */
        .nft-placeholder {
            /* Make placeholder invisible but keep structure */
            opacity: 0 !important;
            background: transparent !important;
            border: 1px solid rgba(149, 165, 166, 0.2) !important; /* Neutral placeholder border */
        }
        
        /* Platzhalter-spezifische Inhalte für small mode */
        .nft-placeholder.small-placeholder {
            font-size: 10px !important;
        }
        
        /* Platzhalter-spezifische Inhalte für medium/large mode */
        .nft-placeholder.info-placeholder {
            flex-direction: column !important;
            padding: 10px !important;
        }
        
        @media (max-width: 768px) {
            .nft-placeholder {
                font-size: 12px !important;
            }
        }

        /* Maintain all original badge styles */
        .rank-badge, .rarity-star-badge, .rarity-badge {
            position: absolute;
            top: 6px;
            padding: 3px 6px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: bold;
            color: white;
            backdrop-filter: blur(10px);
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        .rank-badge {
            left: 6px;
            background: rgba(0, 0, 0, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .rarity-star-badge {
            right: 6px;
            background: none !important;
            border: none !important;
            backdrop-filter: none !important;
            padding: 0 !important;
            width: auto !important;
            height: 18px !important;
        }

        .rarity-badge {
            right: 6px;
        }

        .rarity-star {
            font-size: 22px;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
            background: none !important;
            border: none !important;
            line-height: 1;
        }

        .rarity-star.super-legendary { color: #E74C3C; }   /* Fiery red */
        .rarity-star.legendary { color: #FFB026; }         /* Golden orange */
        .rarity-star.epic { color: #8E44AD; }              /* Royal purple */
        .rarity-star.mythical { color: #1ABC9C; }          /* Aqua teal */
        .rarity-star.rare { color: #3498DB; }              /* Bright blue */
        .rarity-star.distinct { color: #27AE60; }          /* Emerald green */
        .rarity-star.common { color: #95A5A6; }            /* Neutral grey */

        .super-legendary { 
          background: linear-gradient(135deg, #E74C3C, #C0392B); 
        } /* Fiery red gradient */

        .legendary { 
          background: linear-gradient(135deg, #FFB026, #FF8C00); 
        } /* Golden orange gradient */

        .epic { 
          background: linear-gradient(135deg, #8E44AD, #9B59B6); 
        } /* Royal purple gradient */

        .mythical { 
          background: linear-gradient(135deg, #1ABC9C, #16A085); 
        } /* Aqua teal gradient */

        .rare { 
          background: linear-gradient(135deg, #3498DB, #2980B9); 
        } /* Bright blue gradient */

        .distinct { 
          background: linear-gradient(135deg, #27AE60, #2ECC71); 
        } /* Emerald green gradient */

        .common { 
          background: linear-gradient(135deg, #95A5A6, #7F8C8D); 
        } /* Neutral grey gradient */

        .nft-info {
            padding: 12px;
            background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 1));
        }

        .nft-name {
            color: white;
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'Consolas', monospace;
        }

        .nft-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            font-size: 12px;
        }

        .stat-label {
            color: #BBB;
            text-align: center;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .stat-score {
            color: #FFB026;
            font-weight: bold;
            text-align: center;
        }

        .stat-id {
            color: #BBB;
            font-weight: 500;
            text-align: center;
        }

        /* Maintain original control styles */
        .controls {
            margin-bottom: 30px;
        }

        .control-select, .search-input {
            padding: 10px 12px;
            background: rgba(0, 0, 0, 0.6);
            border: 2px solid rgba(0, 255, 0, 0.3);
            border-radius: 12px;
            color: #FFF;
            font-family: 'Consolas', monospace;
            transition: border-color 0.3s ease; /* Removed transition from all properties */
            /* iOS Select Fix */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        .control-select:focus, .search-input:focus {
            outline: none !important;
            border-color: rgba(0, 255, 0, 0.7) !important;
            box-shadow: 0 0 0 3px rgba(0, 255, 0, 0.1) !important;
            transition: none !important; /* Remove transition on focus */
        }

        /* Add custom dropdown arrow */
        .control-select {
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 16px;
            padding-right: 40px;
        }

        /* Custom Select Styling */
        .custom-select {
            position: relative;
            flex: 1;
        }

        .select-display {
            padding: 10px 12px;
            background: rgba(0, 0, 0, 0.6);
            border: 2px solid rgba(0, 255, 0, 0.3);
            border-radius: 12px;
            color: #FFF;
            font-family: 'Consolas', monospace;
            cursor: pointer;
            transition: border-color 0.3s ease;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 16px;
            padding-right: 40px;
            -webkit-user-select: none;
            user-select: none;
        }

        .select-display:hover, .search-input:hover {
            border-color: rgba(0, 255, 0, 0.5);
        }

        .select-options {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.95);
            border: 2px solid rgba(0, 255, 0, 0.3);
            border-radius: 12px;
            margin-top: 4px;
            z-index: 1000;
            display: none;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        }

        .select-options.show {
            display: block;
        }

        .select-option {
            padding: 10px 12px;
            color: #FFF;
            cursor: pointer;
            transition: background-color 0.2s ease;
            font-family: 'Consolas', monospace;
            text-align: left; /* Linksbündig */
            -webkit-user-select: none;
            user-select: none;
        }

        .select-option:hover {
            background: rgba(255, 0, 0, 0.2);
        }

        .select-option:first-child {
            border-radius: 10px 10px 0 0;
        }

        .select-option:last-child {
            border-radius: 0 0 10px 10px;
        }

        .select-option.selected {
            background: rgba(255, 0, 0, 0.3);
        }

        /* Rarity-spezifische Hintergründe für Custom Select */
        .select-option[data-value="legendary"] {
            background: linear-gradient(90deg, rgba(255, 176, 38, 0.1), transparent);
        }
        
        .select-option[data-value="mythical"] {
            background: linear-gradient(90deg, rgba(26, 188, 156, 0.1), transparent);
        }
        
        .select-option[data-value="epic"] {
            background: linear-gradient(90deg, rgba(142, 68, 173, 0.1), transparent);
        }
        
        .select-option[data-value="rare"] {
            background: linear-gradient(90deg, rgba(52, 152, 219, 0.1), transparent);
        }
        
        .select-option[data-value="distinct"] {
            background: linear-gradient(90deg, rgba(39, 174, 96, 0.1), transparent);
        }
        
        .select-option[data-value="common"] {
            background: linear-gradient(90deg, rgba(149, 165, 166, 0.1), transparent);
        }

        .select-option[data-value="legendary"]:hover {
            background: linear-gradient(90deg, rgba(255, 176, 38, 0.2), transparent);
        }
        
        .select-option[data-value="mythical"]:hover {
            background: linear-gradient(90deg, rgba(26, 188, 156, 0.2), transparent);
        }
        
        .select-option[data-value="epic"]:hover {
            background: linear-gradient(90deg, rgba(142, 68, 173, 0.2), transparent);
        }
        
        .select-option[data-value="rare"]:hover {
            background: linear-gradient(90deg, rgba(52, 152, 219, 0.2), transparent);
        }
        
        .select-option[data-value="distinct"]:hover {
            background: linear-gradient(90deg, rgba(39, 174, 96, 0.2), transparent);
        }
        
        .select-option[data-value="common"]:hover {
            background: linear-gradient(90deg, rgba(149, 165, 166, 0.2), transparent);
        }

        /* Remove old select styling */
        .rarity-select {
            display: none;
        }

        /* Alte Rarity Filter Option Styling entfernen */
        #rarityFilter option[value="legendary"] {
            background: linear-gradient(90deg, rgba(255, 176, 38, 0.2), transparent);
        }
        
        #rarityFilter option[value="mythical"] {
            background: linear-gradient(90deg, rgba(26, 188, 156, 0.2), transparent);
        }
        
        #rarityFilter option[value="epic"] {
            background: linear-gradient(90deg, rgba(142, 68, 173, 0.2), transparent);
        }
        
        #rarityFilter option[value="rare"] {
            background: linear-gradient(90deg, rgba(52, 152, 219, 0.2), transparent);
        }
        
        #rarityFilter option[value="distinct"] {
            background: linear-gradient(90deg, rgba(39, 174, 96, 0.2), transparent);
        }
        
        #rarityFilter option[value="common"] {
            background: linear-gradient(90deg, rgba(149, 165, 166, 0.2), transparent);
        }

        #rarityFilter option[value="all"] {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent);
        }

        /* Remove all mobile height changes - keep original */
        @media (max-width: 768px) {
            .control-select {
                font-size: 16px; /* Only prevent zoom, no size changes */
                -webkit-user-select: none;
                user-select: none;
            }
        }

        .search-input {
            width: calc(100% - 24px);
            margin-bottom: 15px;
        }

        /* NEW: Compact Grid Selector Styles */
        .grid-selector {
            display: inline-flex;
            background: rgba(0, 0, 0, 0.6);
            border: 2px solid rgba(0, 255, 0, 0.3);
            border-radius: 25px;
            padding: 4px;
            gap: 2px;
            transition: all 0.3s ease;
            width: fit-content; /* Only take needed space */
            flex-shrink: 0; /* Don't shrink */
            max-width: 120px; /* Prevent excessive width */
        }

        .grid-selector:hover {
            border-color: rgba( 0, 255,0, 0.5);
        }

        .grid-btn {
            padding: 8px;
            background: transparent;
            border: none;
            border-radius: 50%;
            color: #FFF;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            font-family: 'Consolas', monospace;
            /* iOS Touch Optimizations */
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            touch-action: manipulation;
        }

        .grid-btn:hover {
            background: rgba( 0, 255,0, 0.2);
            color: #66FF66;
            transform: scale(1.05);
        }

        .grid-btn.active {
            background: linear-gradient(135deg, #00AA00, #00AA00);
            color: #FFF;
            transform: scale(1.1);
            box-shadow: 0 2px 8px rgba( 0, 255, 0, 0.4);
        }

        .grid-btn svg {
            width: 16px;
            height: 16px;
            stroke-width: 2;
        }

        /* Control row layout - Desktop horizontal */
        .control-row {
            display: flex;
            gap: 15px;
            align-items: center;
            justify-content: space-between;
        }

        .control-selects {
            display: flex;
            gap: 15px;
            flex: 1; /* Take available space */
        }

        .control-select {
            flex: 1; /* Equal width for both selects */
        }

        .grid-selector {
            flex-shrink: 0; /* Don't shrink */
        }

        /* Mobile layout: Selects stacked, Grid selector on right */
        @media (max-width: 768px) {
            .control-row {
                display: flex;
                gap: 15px;
                align-items: flex-start;
            }
            
            .control-selects {
                display: flex;
                flex-direction: column;
                gap: 10px;
                flex: 1;
            }
            
            .control-select {
                width: 100%; /* Full width in mobile stack */
            }
            
            .grid-selector {
                align-self: center; /* Center vertically relative to the selects */
                flex-shrink: 0; /* Prevent shrinking */
            }
        }

        @media (max-width: 480px) {
            .control-row {
                gap: 12px;
            }
            
            .control-selects {
                gap: 8px;
            }
        }

        /* Loading and status indicators */
        .loading-indicator {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .loading-indicator.show {
            opacity: 1;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 3px solid rgba(255, 0, 0, 0.3);
            border-top: 3px solid #FF0000;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .end-message {
            text-align: center;
            padding: 40px 20px;
            color: #888;
            font-style: italic;
            border: 2px dashed rgba(255, 0, 0, 0.3);
            border-radius: 12px;
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
        }

        .error-message {
            text-align: center;
            padding: 20px;
            color: #ff6b6b;
            border: 2px solid rgba(255, 107, 107, 0.3);
            border-radius: 12px;
            margin: 20px 0;
            background: rgba(255, 107, 107, 0.1);
            backdrop-filter: blur(10px);
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Mobile specific optimizations */
        @media (max-width: 768px) {
            .nft-grid {
                padding: 10px;
                margin: -10px -10px 20px -10px;
                gap: 10px;
            }
            
            .nft-card {
                border-width: 1px;
                transition: transform 0.1s ease;
            }
            
            .controls {
                margin-bottom: 20px;
            }
        }

        /* iOS scroll optimization */
        @supports (-webkit-overflow-scrolling: touch) {
            body {
                -webkit-overflow-scrolling: touch;
                -webkit-transform: translateZ(0);
            }
        }