/* EarnVerse - Earnverse Kinetic Cyber-Professional Gaming & Earning Platform CSS */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');

:root {
    /* Earnverse Kinetic Color Tokens */
    --bg-main: #070913;
    --surface: #11131d;
    --surface-dim: #11131d;
    --surface-bright: #373944;
    --surface-container-lowest: #0b0e18;
    --surface-container-low: #191b26;
    --surface-container: #1d1f2a;
    --surface-container-high: #272935;
    --surface-container-highest: #323440;
    
    --on-surface: #e1e1f1;
    --on-surface-variant: #cfc2d7;
    --outline: #988ca0;
    --outline-variant: #4d4354;
    
    --primary: #ddb8ff;
    --primary-bright: #e9d5ff;
    --on-primary: #490080;
    --primary-container: #9333ea;
    --on-primary-container: #f6e6ff;
    --primary-glow: rgba(147, 51, 234, 0.4);
    
    --secondary: #5de6ff;
    --on-secondary: #00363e;
    --secondary-container: #00cbe6;
    --on-secondary-container: #00515d;
    --secondary-glow: rgba(93, 230, 255, 0.4);
    
    --tertiary: #ffb2b7;
    --on-tertiary: #67001b;
    --tertiary-container: #ce1f45;
    
    --error: #ffb4ab;
    --error-container: #93000a;
    
    --forest-green: #10b981;
    --gold-accent: #f59e0b;
    --interface-gray: #988ca0;
    --pure-white: #ffffff;
    
    --glass-surface: rgba(15, 18, 35, 0.6);
    --neon-border: rgba(147, 51, 234, 0.4);
    --ghost-white: #F1F5F9;
    
    --header-height: 64px;
    --nav-height: 72px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #0b0e18;
}
::-webkit-scrollbar-thumb {
    background: rgba(147, 51, 234, 0.4);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(93, 230, 255, 0.6);
}

body {
    background-color: var(--bg-main);
    color: var(--on-surface);
    font-family: 'Inter', sans-serif;
    padding-top: calc(var(--header-height) + 12px);
    padding-bottom: calc(var(--nav-height) + 16px);
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(147, 51, 234, 0.12), transparent 30%),
        radial-gradient(circle at 85% 30%, rgba(93, 230, 255, 0.08), transparent 30%);
    background-attachment: fixed;
}

@media (min-width: 768px) {
    body {
        padding-top: calc(var(--header-height) + 20px);
        padding-bottom: 40px;
    }
}

/* Typography Helpers */
h1, h2, h3, h4, h5, h6, .font-headline, .font-display, .brand-title {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

.font-mono, .label-mono, .font-label-mono {
    font-family: 'JetBrains Mono', monospace;
}

.font-body {
    font-family: 'Inter', sans-serif;
}

/* Cyber Gradients */
.cyber-gradient-text {
    background: linear-gradient(90deg, #ddb8ff 0%, #5de6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cyber-gradient-bg {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.9) 0%, rgba(0, 203, 230, 0.9) 100%);
}

.btn-gradient {
    background: linear-gradient(135deg, #9333ea 0%, #5de6ff 100%);
    color: #070913;
    font-weight: 700;
    transition: all 0.3s ease;
}
.btn-gradient:hover {
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.6);
    transform: translateY(-1px);
}

/* Glassmorphism Panels & Cards */
.glass-surface, .glass-panel, .cyber-panel {
    background: var(--glass-surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.glass-card {
    background: rgba(15, 18, 35, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.glass-panel-neon {
    background: rgba(15, 18, 35, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--neon-border);
    box-shadow: 0 0 25px rgba(147, 51, 234, 0.25);
}

.neon-glow {
    transition: all 0.3s ease;
}
.neon-glow:hover {
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.4);
    border-color: rgba(147, 51, 234, 0.6);
}

.hover-box-glow:hover {
    box-shadow: 0 0 30px rgba(93, 230, 255, 0.3);
    border-color: rgba(93, 230, 255, 0.5);
}

/* Shimmer Light Effect */
.shimmer-effect {
    position: relative;
    overflow: hidden;
}
.shimmer-effect::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    animation: shimmer 4s infinite;
}
@keyframes shimmer {
    0% { transform: translateX(-100%) rotate(30deg); }
    100% { transform: translateX(100%) rotate(30deg); }
}

/* Header Navbar Styling */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: rgba(15, 18, 35, 0.75);
    border-bottom: 1px solid var(--neon-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0 25px rgba(147, 51, 234, 0.2);
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

@media (min-width: 1024px) {
    .app-header {
        padding: 0 36px;
    }
}

.header-nav-link {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-nav-link:hover {
    color: var(--secondary);
    background: rgba(93, 230, 255, 0.08);
}

.header-nav-link.active {
    color: var(--primary) !important;
    background: rgba(147, 51, 234, 0.18) !important;
    border: 1px solid var(--neon-border) !important;
    box-shadow: 0 0 15px rgba(147, 51, 234, 0.3) !important;
}

/* Balance Pill Badge */
.balance-pill {
    background: rgba(25, 27, 38, 0.9);
    border: 1px solid rgba(0, 203, 230, 0.4);
    color: var(--secondary);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    box-shadow: 0 0 12px rgba(0, 203, 230, 0.2);
}

/* Admin Desk Button */
.btn-admin-desk {
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid rgba(245, 158, 11, 0.6) !important;
    color: #f59e0b !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.15) !important;
}
.btn-admin-desk:hover {
    background: rgba(245, 158, 11, 0.25) !important;
    border-color: #fbbf24 !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.4) !important;
}

/* Mobile Bottom Navigation */
.app-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: rgba(11, 14, 24, 0.92);
    border-top: 1px solid var(--neon-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.7);
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 4px 8px;
}

@media (min-width: 768px) {
    .app-bottom-nav {
        display: none;
    }
}

.nav-item-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--on-surface-variant);
    text-decoration: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    gap: 3px;
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.nav-item-link.active {
    color: var(--primary) !important;
    background: rgba(147, 51, 234, 0.15) !important;
    filter: drop-shadow(0 0 8px rgba(221, 184, 255, 0.6));
}

/* Modals */
.dark-modal {
    background: #11131d !important;
    border: 1px solid var(--neon-border) !important;
    color: var(--on-surface) !important;
    border-radius: 16px !important;
    box-shadow: 0 0 35px rgba(147, 51, 234, 0.3) !important;
}

.dark-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}




/* Dedicated homepage game promotion banner */
.home-game-banner-slot {
    width: 100%;
    margin-top: 0;
}

.home-game-banner-link {
    position: relative;
    display: block;
    width: 100%;
    min-height: 150px;
    border: 1px solid rgba(147, 51, 234, 0.42);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    background: #080b14;
    box-shadow: 0 0 28px rgba(147, 51, 234, 0.14);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.home-game-banner-link:hover {
    transform: translateY(-2px);
    border-color: rgba(93, 230, 255, 0.72);
    box-shadow: 0 0 34px rgba(147, 51, 234, 0.24);
}
.home-game-banner-media { position: relative; width: 100%; min-height: 150px; }
.home-game-banner-media > img {
    width: 100%; height: 150px; display: block; object-fit: cover;
}
.home-game-banner-cta {
    position: absolute; right: 18px; bottom: 14px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 12px; border-radius: 9px;
    color: #08100b; background: #b7ff1b;
    font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 900;
    letter-spacing: .05em; white-space: nowrap;
    box-shadow: 0 0 18px rgba(183,255,27,.38);
}
.home-game-banner-placeholder { min-height: 150px; width: 100%; align-items: center; gap: 16px; padding: 20px 28px; color: #e1e1f1; }
.home-game-banner-placeholder strong { display:block; font-family:'Space Grotesk',sans-serif; font-size:1rem; letter-spacing:.08em; }
.home-game-banner-placeholder small { display:block; margin-top:4px; color:#cfc2d7; font-family:'JetBrains Mono',monospace; font-size:.66rem; }

/* Game modal independent of Bootstrap JS */
.ev-game-modal {
    position: fixed; inset: 0; z-index: 2050; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(2, 4, 10, .88); backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.ev-game-modal.is-open { display:flex; }
.ev-game-modal-dialog { width:min(620px, 100%); max-height:calc(100vh - 40px); margin:0 auto; }
.ev-game-modal-content { max-height:calc(100vh - 40px); overflow:auto; background:#0e111b; border:1px solid rgba(147,51,234,.55); border-radius:18px; box-shadow:0 0 50px rgba(147,51,234,.4); }
.ev-game-modal-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08); background:#11131d; }
.ev-game-modal-body { padding:20px; color:#e1e1f1; }
.ev-game-modal-close { width:38px; height:38px; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:#1b1e29; color:#fff; font-size:28px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s ease; }
.ev-game-modal-close:hover { border-color:#ddb8ff; color:#ddb8ff; background:rgba(147,51,234,0.3); }
body.game-modal-open { overflow:hidden; }

/* Cyber Game Engine Button & UI Helper Classes */
.btn-primary-glow {
    background: linear-gradient(135deg, #9333ea 0%, #00cbe6 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    transition: all 0.25s ease;
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.4);
    cursor: pointer;
}
.btn-primary-glow:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 0 28px rgba(0, 203, 230, 0.6);
    color: #ffffff;
}
.btn-primary-glow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-ghost-dark {
    background: #191b26;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e1e1f1;
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    transition: all 0.2s ease;
    cursor: pointer;
}
.btn-ghost-dark:hover {
    background: rgba(147, 51, 234, 0.2);
    border-color: rgba(147, 51, 234, 0.6);
    color: #ddb8ff;
}

.text-pure-white { color: #ffffff !important; }
.text-interface-gray { color: #988ca0 !important; }
.text-forest-green { color: #10b981 !important; }
.bg-forest-green { background-color: #10b981 !important; }
.border-forest-green { border-color: #10b981 !important; }

@media (max-width: 640px) {
    .home-game-banner-link, .home-game-banner-media { min-height: 108px; }
    .home-game-banner-media > img { height: 108px; }
    .home-game-banner-cta { right: 10px; bottom: 10px; padding: 6px 8px; font-size:.58rem; }
    .ev-game-modal { padding:10px; }
    .ev-game-modal-dialog, .ev-game-modal-content { max-height:calc(100vh - 20px); }
    .ev-game-modal-body { padding:12px; }
}



/* Dashboard reference-layout tuning: profile + balance first, banner compact, ecosystem below */
.dashboard-reference { max-width: 1500px; }
.dashboard-reference .glass-surface, .dashboard-reference .glass-card { border-color: rgba(255,255,255,.10); }
@media (min-width: 1024px) {
    .dashboard-reference .home-game-banner-link { min-height: 158px; }
    .dashboard-reference .home-game-banner-media, .dashboard-reference .home-game-banner-media > img { height: 158px; min-height:158px; }
}