@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');

:root {
    --bg-dark: #0f1014;
    --sidebar-bg: #1c1e22;
    --card-bg: #252830;
    --neon-blue: #00f3ff;
    --neon-purple: #bc13fe;
    --neon-green: #0aff0a;
    --text: #ffffff;
    --sidebar-width: 240px;
}

body {
    background-color: var(--bg-dark);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    margin: 0; padding: 0; overflow-x: hidden;
}
a { text-decoration: none; color: inherit; transition: 0.3s; }

/* --- 1. FIXED SIDEBAR (Global) --- */
.left-sidebar {
    position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh;
    background: var(--sidebar-bg); border-right: 1px solid #333; z-index: 1000;
    overflow-y: auto; padding-top: 20px;
}
.sidebar-logo {
    text-align: center; font-size: 1.5rem; font-weight: 800; margin-bottom: 30px;
    background: linear-gradient(to right, var(--neon-blue), var(--neon-purple));
    -webkit-background-clip: text; color: transparent;
}
.nav-item {
    display: flex; align-items: center; padding: 12px 25px; color: #aaa;
    border-left: 3px solid transparent;
}
.nav-item i { width: 30px; font-size: 1.2rem; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,0.05); color: var(--neon-blue); border-left-color: var(--neon-blue); }

/* --- 2. MAIN LAYOUT --- */
.main-wrapper {
    margin-left: var(--sidebar-width);
    padding: 20px 30px;
    width: calc(100% - var(--sidebar-width));
}
.top-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

/* --- 3. HOMEPAGE STYLES (Grid & Slider) --- */
.game-card {
    background: var(--card-bg); border-radius: 12px; overflow: hidden;
    position: relative; transition: 0.3s; border: 1px solid #333;
}
.game-card:hover { transform: translateY(-5px); border-color: var(--neon-purple); box-shadow: 0 0 15px rgba(188,19,254,0.4); }
.card-img-wrapper { height: 150px; overflow: hidden; }
.card-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.play-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center;
    opacity: 0; transition: 0.3s;
}
.game-card:hover .play-overlay { opacity: 1; }
.play-icon { font-size: 3rem; color: var(--neon-blue); }

/* Carousel */
.carousel-item img { height: 350px; object-fit: cover; border-radius: 12px; opacity: 0.9; }

/* --- 4. GAME PLAYER STYLES (Play.php) --- */
.game-window {
    width: 100%; height: 650px; background: #000; border-radius: 16px;
    overflow: hidden; border: 1px solid #333; position: relative; margin-bottom: 20px;
}
iframe { width: 100%; height: 100%; border: none; }
.loader-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10;
}
.play-btn-big {
    background: linear-gradient(45deg, #bc13fe, #00f3ff); border: none; padding: 15px 50px;
    border-radius: 50px; color: white; font-weight: 800; font-size: 1.5rem; cursor: pointer;
    box-shadow: 0 0 30px rgba(188,19,254,0.5); animation: pulse 2s infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(188,19,254,0.6); } 70% { box-shadow: 0 0 0 20px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } }

/* Mobile Responsive */
@media (max-width: 900px) {
    :root { --sidebar-width: 0px; }
    .left-sidebar { display: none; } /* Mobile Menu Toggle needed later */
    .main-wrapper { margin-left: 0; width: 100%; padding: 15px; }
    .game-window { height: 300px; }
    .carousel-item img { height: 200px; }
}