/* IntenseServers — Obsidian Theme v2
 * Dark metallic base, violet as accent only, glassmorphism on surfaces.
 * Loads AFTER main.css; overrides via cascade + !important.
 */

:root {
    /* Near-black metallic surfaces */
    --primary-dark: #07070a;
    --primary-darker: #040407;
    --primary-darkest: #020203;
    --bg-primary: #07070a;

    /* Violet accent (used sparingly) + moon red secondary */
    --accent-primary: #8b5cf6;
    --accent-secondary: #a21c3a;
    --accent-bright: #a78bfa;
    --accent-dark: #5b21b6;
    --accent-glow: rgba(139, 92, 246, 0.22);

    /* Glass surfaces — darker, more contrast */
    --bg-card: rgba(14, 14, 20, 0.55);
    --bg-card-hover: rgba(20, 18, 32, 0.72);
    --bg-input: rgba(12, 12, 18, 0.6);

    --border-color: rgba(139, 92, 246, 0.16);
    --border-light: rgba(167, 139, 250, 0.10);

    --shadow-glow: 0 0 30px rgba(139, 92, 246, 0.25);
}

/* Body — black metallic, single subtle violet hint top-left only */
body {
    background:
        radial-gradient(ellipse 60% 50% at 0% 0%, rgba(139, 92, 246, 0.10), transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(162, 28, 58, 0.06), transparent 55%),
        linear-gradient(180deg, #07070a 0%, #030305 100%) !important;
    background-attachment: fixed !important;
}

/* Brushed-metal noise overlay — subtle, monochrome */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: overlay;
}
body > *:not(script):not(style) { position: relative; z-index: 1; }

/* Navbar — near black, real glass */
.navbar {
    background: rgba(7, 7, 10, 0.72) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.12) !important;
}
.navbar.scrolled {
    background: rgba(7, 7, 10, 0.92) !important;
    border-bottom-color: rgba(139, 92, 246, 0.22) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* Logo — solid white, faint violet glow only */
.logo-img,
.footer-logo-img {
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.45));
}
.logo-text,
.footer-logo-text {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #f5f5f7 !important;
    color: #f5f5f7 !important;
    text-shadow: 0 0 12px rgba(139, 92, 246, 0.35);
}

/* Section headings — solid white, NO gradient fill */
.section-header h2,
h1, h2 {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #f5f5f7 !important;
    color: #f5f5f7 !important;
}

/* Nav links — subtle violet hover only */
.nav-link:hover {
    background: rgba(139, 92, 246, 0.10) !important;
    color: #c4b5fd !important;
}
.nav-link.active {
    background: rgba(139, 92, 246, 0.14) !important;
    color: #c4b5fd !important;
}
.nav-link.active::after {
    background: #a78bfa !important;
    box-shadow: 0 0 8px #a78bfa !important;
}

/* CTAs — the ONE place gradient lives. Darker, less candy. */
.btn-primary,
.nav-cta {
    background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 50%, #7f1d2e 100%) !important;
    box-shadow:
        0 4px 18px rgba(91, 33, 182, 0.45),
        0 0 0 1px rgba(167, 139, 250, 0.12) inset !important;
    color: #fff !important;
}
.btn-primary:hover,
.nav-cta:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #a21c3a 100%) !important;
    box-shadow:
        0 8px 32px rgba(91, 33, 182, 0.55),
        0 0 0 1px rgba(167, 139, 250, 0.22) inset !important;
}

.nav-register {
    border-color: rgba(139, 92, 246, 0.45) !important;
    color: #c4b5fd !important;
    background: rgba(139, 92, 246, 0.06) !important;
}

/* Cards — deeper glass, violet hairline */
.card,
.game-card,
.featured-game,
.pricing-card,
.package-card {
    background: rgba(12, 12, 18, 0.55) !important;
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    border: 1px solid rgba(139, 92, 246, 0.14) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 8px 32px rgba(0, 0, 0, 0.5);
}
.card:hover,
.game-card:hover,
.featured-game:hover,
.pricing-card:hover,
.package-card:hover {
    border-color: rgba(167, 139, 250, 0.35) !important;
    background: rgba(20, 18, 32, 0.65) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 12px 48px rgba(0, 0, 0, 0.6),
        0 0 32px rgba(139, 92, 246, 0.18) !important;
}

/* Featured / "Most Popular" badge — moon red */
.badge-info,
.featured-badge,
.badge-featured,
.game-card .badge {
    background: linear-gradient(135deg, #7f1d2e, #5b1422) !important;
    color: #fecaca !important;
    border: 1px solid rgba(162, 28, 58, 0.45) !important;
}

/* Forms */
.form-input, .form-select, .form-textarea,
select, input[type="text"], input[type="email"],
input[type="password"], input[type="search"] {
    background: rgba(12, 12, 18, 0.6) !important;
    border-color: rgba(139, 92, 246, 0.18) !important;
    backdrop-filter: blur(8px);
    color: #f3f4f6;
}
.form-input:focus, .form-select:focus, .form-textarea:focus,
select:focus, input:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18) !important;
    outline: none;
}

/* Footer — black glass */
.footer {
    background: linear-gradient(180deg, rgba(4, 4, 7, 0.6), rgba(2, 2, 3, 0.95)) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.12) !important;
    backdrop-filter: blur(12px);
}

/* Selection + scrollbar */
::selection { background: rgba(139, 92, 246, 0.4); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #04040a; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #5b21b6, #7f1d2e);
    border-radius: 10px;
    border: 2px solid #04040a;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7c3aed, #a21c3a);
}

/* Footer grid — accommodate 5 columns now that Legal is added */
.footer-content {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important;
    gap: 2rem !important;
}

@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 640px) {
    .footer-content {
        grid-template-columns: 1fr !important;
    }
}