.navi-main .navi-menu, .navi-main .dropdown, .navi-main form, .navi-main .navbar-toggler, .navi-main .offcanvas-toggle, .navi-main .user-menu, header .navi-menu, header .dropdown, header form, header .navbar-toggler, header .user-menu { display: none !important; }
.navi-main .container, .navi-main .container-fluid, header .container, header .container-fluid { justify-content: center !important; display: flex !important; }
.navi-main .navbar-brand, header .navbar-brand { margin: 0 auto !important; }

.glass-card { background: linear-gradient(145deg, rgba(30,30,30,0.6) 0%, rgba(10,10,10,0.8) 100%); border: 1px solid rgba(255,255,255,0.05); backdrop-filter: blur(20px); transition: transform 0.5s cubic-bezier(0.25, 1, 0.25, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.25, 1); z-index: 51; }
#spotlight-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); opacity: 0; pointer-events: none; z-index: 50; transition: opacity 0.5s ease; }
body.spotlight-active #spotlight-overlay { opacity: 1; }
body.spotlight-active .glass-card { transform: scale(1.02); box-shadow: 0 25px 50px rgba(0,0,0,0.8), 0 0 0 2px rgba(220,20,60,0.4) !important; }
/* Verhindert den nativen gelben Browser-Fokus-Ring auf dem Haupt-Kasten */
.glass-card:focus, .glass-card:focus-visible, .glass-card:focus-within { outline: none !important; }

.glass-input-group { background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.375rem; transition: all 0.3s ease; overflow: hidden; }
body.page-ready .glass-input-group:focus-within { background: rgba(0,0,0,0.4); border-color: crimson; box-shadow: none; }
.glass-input-group .glass-input { background: transparent !important; border: none !important; box-shadow: none !important; color: #fff !important; }
.glass-input-group .glass-input:focus,
.glass-input-group .glass-input:active { outline: none !important; box-shadow: none !important; }

/* Fix für den gelben Browser Auto-Fill Hintergrund (Passwort-Manager) */
.glass-input-group .glass-input:-webkit-autofill,
.glass-input-group .glass-input:-webkit-autofill:hover, 
.glass-input-group .glass-input:-webkit-autofill:focus, 
.glass-input-group .glass-input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
}
.glass-input-group .input-group-text { color: rgba(255,255,255,0.5) !important; }
.sso-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.05); color: var(--text-primary); transition: all 0.2s; }
.sso-btn:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); color: #fff; }
.sso-discord:hover { background: #5865F2; border-color: #5865F2; }
.sso-google:hover { background: #EA4335; border-color: #EA4335; }
.sso-twitch:hover { background: #9146FF; border-color: #9146FF; }
.sso-steam:hover { background: #66c0f4; border-color: #66c0f4; color: #121212; }

.card-hand { position: relative; display: flex; justify-content: center; align-items: center; height: 260px; perspective: 1000px; width: 100%; max-width: 100%; }
.game-card-wrapper { position: absolute; width: 150px; height: 220px; transform-origin: bottom center; cursor: pointer; will-change: transform; transition: transform 0.4s cubic-bezier(0.25, 1, 0.25, 1); }
.game-card { width: 100%; height: 100%; border-radius: 12px; background: #1a1a1a; box-shadow: 0 10px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05); overflow: hidden; position: relative; transform-style: preserve-3d; transition: box-shadow 0.3s ease; }
.game-card-wrapper.active .game-card { box-shadow: 0 15px 30px rgba(0,0,0,0.6), 0 0 0 2px crimson, 0 0 25px rgba(220,20,60,0.4); }
.game-card img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.3s ease; }
.game-card-wrapper.active .game-card img { filter: brightness(1.1) contrast(1.1); }

.auth-logo-svg { height: 100px; margin-right: 0; }
@media (max-width: 768px) {
    .auth-logo-svg { height: 55px; }
    #active-game-info { margin-top: -20px !important; margin-bottom: 2rem !important; }
}

@property --current-score { syntax: '<number>'; inherits: true; initial-value: 0; }
.card-scores { position: absolute; bottom: -24px; left: 0; width: 100%; display: flex; justify-content: center; flex-direction: row; gap: 8px; opacity: 0; transform: translateY(10px) scale(0.9); transition: all 0.4s cubic-bezier(0.25, 1, 0.25, 1); pointer-events: none; z-index: 30; }
.game-card-wrapper.active .card-scores { opacity: 1; transform: translateY(0) scale(1); }
.circular-score { width: 48px; height: 48px; border-radius: 50%; --current-score: 0; background: conic-gradient(var(--score-color) calc(var(--current-score) * 1%), rgba(255,255,255,0.05) 0); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 6px 15px rgba(0,0,0,0.6); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); transition: --current-score 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
.game-card-wrapper.active .circular-score { --current-score: var(--score); }
.circular-score::before { content: ""; position: absolute; inset: 4px; background: #1a1a1a; border-radius: 50%; }
.circular-score .score-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.circular-score .score-value { font-size: 0.95rem; font-weight: 800; color: #fff; }
.circular-score .score-label { font-size: 0.45rem; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 1px; letter-spacing: 0.5px; }

.reviews-marquee-container { width: 100%; overflow-x: auto; overflow-y: hidden; position: relative; padding: 15px 0; margin: 0 auto 2rem auto; mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); cursor: grab; scrollbar-width: none; -ms-overflow-style: none; }
.reviews-marquee-container::-webkit-scrollbar { display: none; }
.reviews-marquee-container:active { cursor: grabbing; }
@media (min-width: 768px) { .reviews-marquee-container { padding: 15px 0; margin: 0 auto 3rem auto; } }
.reviews-marquee-track { display: flex; width: max-content; }
.review-card { width: 380px; background: linear-gradient(145deg, rgba(30,30,30,0.6) 0%, rgba(10,10,10,0.8) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 1.5rem; margin: 0 1rem; display: flex; flex-direction: column; flex-shrink: 0; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.review-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1); }
.no-image-cover { object-fit: contain !important; padding: 8px; opacity: 0.6; }