/* ========== GLOBAL THEME ========== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

body {
    font-family: 'Orbitron', sans-serif;
    background: radial-gradient(circle at top, #0a0a0f, #000 70%);
    color: #e0e0e0;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

a {
    color: #0af;
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    color: #0ff;
    text-shadow: 0 0 8px #0ff;
}

/* ========== NAVBAR ========== */
.navbar {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    letter-spacing: 1px;
    box-shadow: 0 0 15px rgba(0,255,255,0.3);
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.3rem;
    text-shadow: 0 0 12px #0af;
}

.nav-link {
    color: #aaa !important;
    transition: 0.3s;
}

.nav-link:hover, .nav-link.active-link {
    color: #0ff !important;
    text-shadow: 0 0 10px #0ff;
    border-bottom: 2px solid #0ff;
}

/* ========== UNIVERSAL GAMING PANEL ========== */
.gaming-panel {
    background: rgba(10, 10, 20, 0.85);
    border: 2px solid #0af;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem auto;
    box-shadow: 0 0 20px rgba(0,255,255,0.3), inset 0 0 15px rgba(0,255,255,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gaming-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(0,255,255,0.5), inset 0 0 20px rgba(0,255,255,0.2);
}

.gaming-panel h2 {
    text-align: center;
    color: #0ff;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 12px #0ff;
}

/* ========== FORMS INSIDE PANELS ========== */
.gaming-panel input, 
.gaming-panel select {
    background: #111;
    border: 1px solid #0af;
    color: #eee;
    border-radius: 8px;
    padding: 0.75rem;
    width: 100%;
    margin-bottom: 1rem;
    outline: none;
    transition: 0.3s;
}

.gaming-panel input:focus, 
.gaming-panel select:focus {
    border-color: #0ff;
    box-shadow: 0 0 10px #0ff;
}

.gaming-panel button {
    background: linear-gradient(90deg, #0af, #0ff);
    border: none;
    color: black;
    font-weight: bold;
    padding: 0.75rem;
    border-radius: 8px;
    width: 100%;
    cursor: pointer;
    transition: 0.3s;
}

.gaming-panel button:hover {
    background: linear-gradient(90deg, #0ff, #0af);
    box-shadow: 0 0 15px #0ff;
}
/* 🔔 Flash Messages */
.flash-message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: bold;
    text-align: center;
    animation: fadeIn 0.5s ease-in-out;
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.4);
}

.flash-success {
    background: rgba(0, 255, 100, 0.15);
    border: 1px solid #00ff88;
    color: #00ffcc;
    text-shadow: 0 0 6px #00ffcc;
}

.flash-error {
    background: rgba(255, 0, 80, 0.15);
    border: 1px solid #ff004c;
    color: #ff4d6d;
    text-shadow: 0 0 6px #ff004c;
}

.flash-warning {
    background: rgba(255, 180, 0, 0.15);
    border: 1px solid #ffcc00;
    color: #ffcc33;
    text-shadow: 0 0 6px #ffcc00;
}
/* Neon Username Glow */
.neon-username {
    color: #0ff;
    font-weight: bold;
    text-shadow: 
        0 0 5px #0ff,
        0 0 10px #0ff,
        0 0 20px #0ff,
        0 0 40px #00faff,
        0 0 80px #00faff;
    letter-spacing: 1px;
}
/* Hero Cover */
.cover-section {
    background: url("/cover.jpg") no-repeat center center/cover;
    height: 50vh;
    border-radius: 15px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.6);
}

.text-glow {
    text-shadow: 0 0 15px cyan, 0 0 25px cyan, 0 0 35px blue;
}
/* ========== NEWS / UPDATES / UPCOMING CARDS ========== */
.tab-pane .gaming-panel {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(10, 10, 20, 0.85);
    border: 2px solid #0af;
    border-radius: 12px;
    padding: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tab-pane .gaming-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(0,255,255,0.5), inset 0 0 20px rgba(0,255,255,0.2);
}

.tab-pane .gaming-panel img {
    width: 200px;       /* fixed width */
    height: 120px;      /* fixed height */
    object-fit: cover;  /* ensure image fills box */
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(0,255,255,0.3);
    transition: transform 0.2s ease;
}

.tab-pane .gaming-panel img:hover {
    transform: scale(1.05);
}

.tab-pane .gaming-panel h3 {
    color: #0ff;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 0 8px #0ff;
}

.tab-pane .gaming-panel p {
    color: #ccc;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.tab-pane .gaming-panel small {
    color: #888;
    display: block;
}

/* Tabs customization */
.nav-tabs .nav-link {
    color: #aaa;
    font-weight: bold;
    letter-spacing: 1px;
    transition: 0.3s;
}

.nav-tabs .nav-link.active {
    color: #0ff;
    border-bottom: 3px solid #0ff;
    text-shadow: 0 0 8px #0ff;
}
/* Fade-in animation for tab content */
.tab-pane {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.tab-pane.show.active {
    opacity: 1;
    transform: translateY(0);
}
/* Neon dropdown glow */
.neon-dropdown {
    border: 1px solid #0af;
    box-shadow: 0 0 10px #0ff, 0 0 20px #0ff inset;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.neon-dropdown-item {
    color: #0ff !important;
    transition: all 0.3s ease;
}

.neon-dropdown-item:hover {
    color: #fff !important;
    text-shadow: 
        0 0 5px #0ff,
        0 0 10px #0ff,
        0 0 20px #0ff,
        0 0 40px #00faff;
    background-color: rgba(0, 255, 255, 0.1);
}
/* Neon username pulsing effect */
@keyframes neonPulse {
    0%, 100% {
        text-shadow: 
            0 0 5px #0ff,
            0 0 10px #0ff,
            0 0 20px #0ff,
            0 0 40px #00faff,
            0 0 60px #00faff;
    }
    50% {
        text-shadow: 
            0 0 10px #0ff,
            0 0 20px #0ff,
            0 0 30px #0ff,
            0 0 50px #00faff,
            0 0 80px #00faff;
    }
}

.neon-username {
    color: #0ff;
    font-weight: bold;
    letter-spacing: 1px;
    animation: neonPulse 1.5s infinite alternate;
}
/* Download tables */
.btn-cyan {
    background: linear-gradient(90deg, #0af, #0ff);
    color: black;
    font-weight: bold;
    transition: 0.3s;
}

.btn-cyan:hover {
    background: linear-gradient(90deg, #0ff, #0af);
    color: white;
    text-shadow: 0 0 6px #0ff;
}

.table-dark th, .table-dark td {
    vertical-align: middle;
}

.table-dark img {
    border-radius: 6px;
}