/* poppins-300 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/poppins-v24-latin-300.woff2') format('woff2');
}
/* poppins-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/poppins-v24-latin-regular.woff2') format('woff2');
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/poppins-v24-latin-600.woff2') format('woff2');
}
/* poppins-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/poppins-v24-latin-500.woff2') format('woff2');
}
/* poppins-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/poppins-v24-latin-700.woff2') format('woff2');
}
/* poppins-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/poppins-v24-latin-800.woff2') format('woff2');
}
/* poppins-900 - map to 800 file (no 900 woff2 available) */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/poppins-v24-latin-800.woff2') format('woff2');
}
/* rajdhani - lokal (kein Google Fonts) */
@font-face {
  font-display: swap;
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/rajdhani-v17-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/rajdhani-v17-latin-700.woff2') format('woff2');
}
/* --- FIX: HORIZONTAL SCROLLING --- */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important; /* Verhindert seitliches Scrollen strikt */
    position: relative;
    margin: 0;
    padding: 0;
    overscroll-behavior-x: none; /* Verhindert den "Bounce"-Effekt beim Swipen */
}

/* --- BESTEHENDE STYLES (PC BLEIBT PERFEKT) --- */
@keyframes rumble {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-1px, 1px) rotate(-1deg); }
    50% { transform: translate(1px, -1px) rotate(1deg); }
    75% { transform: translate(-1px, -1px) rotate(-1deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.rumble-effect {
    animation: rumble 0.4s infinite linear;
    box-shadow: 0 0 30px var(--gold-main) !important;
    border-color: #fff !important;
    color: #fff !important;
}

/* --- OUT OF STOCK STYLES --- */
.grid-card.out-of-stock {
    opacity: 0.5;
    filter: grayscale(0.8);
    cursor: not-allowed !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.grid-card.out-of-stock:hover {
    transform: none !important;
    box-shadow: none !important;
}
.grid-card.out-of-stock .grid-img {
    transform: none !important;
}

.sold-out-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
    background: rgba(0,0,0,0.4);
}

.sold-out-text {
    color: #ff0055;
    font-size: 1.8rem;
    font-weight: 900;
    text-transform: uppercase;
    border: 4px solid #ff0055;
    padding: 10px 20px;
    transform: rotate(-15deg);
    text-shadow: 0 0 20px #ff0055;
    box-shadow: 0 0 20px #ff0055, inset 0 0 20px #ff0055;
    background: rgba(0,0,0,0.9);
    border-radius: 8px;
    letter-spacing: 2px;
    backdrop-filter: blur(5px);
}

/* --- FIX: SPEED ANZEIGE --- */
.filter-group {
    display: flex;
    align-items: center;
    gap: 5px !important;
    padding-right: 10px !important;
}

.ms-input {
    width: 50px !important;
    min-width: 40px !important;
    text-align: center;            
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    font-weight: 800;
    font-size: 1.1rem;              
    color: var(--gold-main) !important;
    outline: none !important;
}

.ms-label {
    white-space: nowrap;
    margin-right: 5px;
}

#back-to-top,
#scroll-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    background: var(--gold-gradient);
    border: none;
    border-radius: 50%;
    color: #000;
    font-size: 1.3rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55);
    display: none;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 9990;
}
#back-to-top.visible {
    display: flex;
}
#scroll-to-top-btn:hover,
#back-to-top.visible:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 22px rgba(255, 215, 0, 0.5);
}

/* --- GLITCH EFFECT --- */
.logo {
    position: relative;
    display: inline-block;
}
.logo:hover {
    animation: glitch-anim 0.3s infinite;
}
.logo::before, .logo::after {
    content: '';
    display: none;
}
.logo::before {
    left: 2px;
    text-shadow: -1px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim-2 5s infinite linear alternate-reverse;
}
.logo::after {
    left: -2px;
    text-shadow: -1px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim-2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { transform: translate(0) }
    20% { transform: translate(-2px, 2px) }
    40% { transform: translate(-2px, -2px) }
    60% { transform: translate(2px, 2px) }
    80% { transform: translate(2px, -2px) }
    100% { transform: translate(0) }
}
@keyframes glitch-anim-2 {
    0% { clip: rect(12px, 9999px, 5px, 0); }
    5% { clip: rect(72px, 9999px, 44px, 0); }
    10% { clip: rect(10px, 9999px, 83px, 0); }
    15% { clip: rect(2px, 9999px, 90px, 0); }
    20% { clip: rect(20px, 9999px, 20px, 0); }
    21% { clip: rect(0, 0, 0, 0); } 
    99% { clip: rect(0, 0, 0, 0); }
    100% { clip: rect(64px, 9999px, 18px, 0); }
}

/* --- PRELOADER --- */
#preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #050505;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: var(--gold-main);
    animation: spin 1s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}
@keyframes spin { to { transform: rotate(360deg); } }
body.loaded #preloader {
    opacity: 0;
    visibility: hidden;
}

/* --- CUSTOM SCROLLBAR --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px; 
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3); 
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #b8860b, #ffd700); 
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffd700, #fff); 
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
html {
    scrollbar-width: thin;
    scrollbar-color: #ffd700 var(--bg-dark);
}

/* ═══════════════════════════════════════
   THEME — Dark Gaming / Eneba-Style
   Accent: Cyan (#00ffff) on near-black
   ═══════════════════════════════════════ */
:root {
    --bg-dark: #080a12;
    --bg-dynamic: radial-gradient(ellipse 120% 60% at 50% -5%, rgba(0,200,200,0.07) 0%, #080a12 55%);

    --gold-main: #00ffff;
    --gold-dark: #00b8b8;
    --gold-gradient: linear-gradient(135deg, #00ffff 0%, #00d4d4 100%);

    --card-bg: rgba(255, 255, 255, 0.04);
    --panel-bg: rgba(8, 10, 18, 0.97);
    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.48);
    --border-color: rgba(255, 255, 255, 0.08);

    --rarity-common: #95a5a6;
    --rarity-rare: #00d2ff;
    --rarity-legendary: #00ffff;
    --rarity-secret: #ff2d55;
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --accent-green: #2ecc71;
}

/* Logo */
.logo {
    cursor: pointer;
    transition: transform 0.25s;
    user-select: none;
    display: flex;
    align-items: center;
}
.logo-img {
    height: 58px;
    width: auto;
    display: block;
    object-fit: contain;
}
.logo span {
    display: none;
    letter-spacing: 0;
}

.logo:hover {
    transform: scale(1.04);
}

/* Fix für die Preise im Shop */
.grid-price {
    color: var(--gold-main) !important;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.4) !important;
}

/* Fix für den Hero-Titel im Hintergrund */
.hero-title {
    background: linear-gradient(135deg, #ffffff 10%, #00ffff 60%, #008b8b 90%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.2)) !important;
}

/* Fix für den Kaufen-Button */
.buy-button {
    background: var(--gold-gradient) !important;
    color: #000 !important;
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2) !important;
}

* { 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-dark);
    background-image: var(--bg-dynamic);
    background-attachment: fixed;
    background-size: cover;
    color: var(--text-main);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    /* Entfernt störende Effekte für einen cleanen Look */
}

/* Shop Badge color via CSS var (defined in header section) */
/* Verhindert Browser-Styling bei Auto-Fill */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0px 1000px #081a1a inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ── PERFORMANCE OPTIMIERUNGEN ─────────────────────────────────────────────── */

/* Sektionen unterhalb des Folds: Browser rendert sie erst wenn nötig */
.vb-section,
.mp-section,
footer {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
}

/* GPU-Layer für häufig animierte Elemente */
.hero-card-slot,
.groove-hero,
.vb-card,
.grid-card,
.loader-spinner {
    will-change: transform;
}

/* Glitch-Effekt nur auf Hover aktiv halten (spart CPU für Logo::before/after) */
.logo::before,
.logo::after {
    animation-play-state: paused;
}
.logo:hover::before,
.logo:hover::after {
    animation-play-state: running;
}

/* Nutzer mit Reduzierte-Bewegung-Einstellung: alle Animationen abschalten */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .floater { display: none; }
}