/* Dark Theme Styles for W3W GAME */

/* Global Styles */
body {
    background-color: #121212;
    color: #e0e0e0;
}

:root {
    --dark-accent: #5781bd;
    --dark-bg-primary: #121212;
    --dark-bg-secondary: #1e1e1e;
    --dark-bg-tertiary: #2d2d2d;
    --dark-text-primary: #e0e0e0;
    --dark-text-secondary: #b0b0b0;
    --dark-border: #3d3d3d;
}

/* Main Container */
.main-container {
    background-color: var(--dark-bg-primary);
}

/* Content Area */
.content-area {
    background-color: var(--dark-bg-primary);
}

/* Sidebar Styles */
.sidebar {
    background-color: var(--dark-bg-secondary);
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
}

.logo-container h1 {
    color: #ffffff;
}

.slogan {
    color: var(--dark-text-secondary);
}

/* Navigation Menu */
.main-nav ul li a {
    color: var(--dark-text-primary);
}

.main-nav ul li.active,
.main-nav ul li:hover {
    background-color: var(--dark-bg-tertiary);
}

/* Donation QR Code */
.donation-container {
    background-color: #2d2d2d;
}

.donation-container p {
    color: #b0b0b0;
}

/* Right Sidebar */
.right-sidebar {
    background-color: #1e1e1e;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
}

/* Top Bar */
.top-bar {
    background-color: #1e1e1e;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.search-container {
    background-color: #2d2d2d;
}

.search-container input {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

.search-container input::placeholder {
    color: #909090;
}

.language-selector {
    background-color: #2d2d2d;
}

.language-selector select {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

/* Main Banner */
.main-banner {
    background-color: #1e1e1e;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Section Headers */
.section-header h2 {
    color: #ffffff;
}

/* Game Cards */
.game-card {
    background-color: #1e1e1e;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #2d2d2d;
    transition: all 0.3s ease;
}

.game-card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transform: translateY(-3px);
    border-color: #5781bd;
}

.game-title {
    color: #ffffff;
}

.game-category {
    color: #b0b0b0;
}

.game-card .play-button {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border: 1px solid #3d3d3d;
}

.game-card .play-button:hover {
    background-color: #5781bd;
    color: #ffffff;
    border-color: #5781bd;
}

/* Secondary Ad */
.secondary-ad {
    background-color: #1e1e1e;
}

/* Load More Button */
.load-more-btn {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border: 1px solid #3d3d3d;
}

.load-more-btn:hover {
    background-color: #3d3d3d;
}

/* Footer */
.main-footer {
    background-color: #1e1e1e;
    color: #b0b0b0;
}

.footer-email {
    color: #4d9aff;
}

/* Game Modal */
.game-modal {
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-header {
    background-color: #1e1e1e;
}

.modal-header h3 {
    color: #ffffff;
}

.modal-controls button {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

.modal-controls button:hover {
    background-color: #3d3d3d;
}

/* Social Links */
.social-links-container {
    background-color: #1e1e1e;
}

.social-links-title {
    color: #ffffff;
}

/* Search Suggestions */
.search-suggestions {
    background-color: #1e1e1e;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.search-suggestion-item {
    border-bottom: 1px solid #2d2d2d;
}

.search-suggestion-item:hover {
    background-color: #2d2d2d;
}

.suggestion-title {
    color: #e0e0e0;
}

/* Additional Dark Theme Elements */
.banner-dots .dot {
    background-color: #3d3d3d;
}

.banner-dots .dot.active {
    background-color: #5781bd;
}

/* Game Modal Improvements */
.game-modal .modal-content {
    background-color: #121212;
}

/* Mobile Menu */
.mobile-menu-toggle {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

.mobile-menu-toggle:hover {
    background-color: #3d3d3d;
}

/* Mobile Specific Styles */
@media screen and (max-width: 768px) {
    .sidebar {
        background-color: #1e1e1e;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
    }
    
    .mobile-menu-overlay {
        background-color: rgba(0, 0, 0, 0.7);
    }
    
    .top-bar {
        background-color: #1e1e1e;
    }
    
    .game-grid {
        gap: 15px;
    }
}

/* Inputs and Selects */
input, select, button {
    border-color: #3d3d3d;
}

input:focus, select:focus, button:focus {
    border-color: #5781bd;
    outline-color: #5781bd;
}

/* Links */
a:hover {
    color: #5781bd;
}

/* Music Player */
.music-player-widget {
    background-color: #1e1e1e;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(87, 129, 189, 0.2);
}

.now-playing {
    border-bottom: 1px solid rgba(87, 129, 189, 0.2);
    background: linear-gradient(135deg, #1a1a1a, #1e1e1e);
}

.song-title {
    color: #e0e0e0;
}

.song-artist {
    color: #b0b0b0;
}

.playlist-container {
    background-color: #1e1e1e;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.playlist-container.expanded {
    border-top: 1px solid rgba(87, 129, 189, 0.2);
}

.playlist-item:hover {
    background-color: #2d2d2d;
}

.playlist-item.active {
    background-color: rgba(87, 129, 189, 0.2);
    border-left: 3px solid #5781bd;
}

.music-controls {
    background-color: #1e1e1e;
}

.control-button {
    color: #e0e0e0;
    background-color: #2d2d2d;
}

.control-button:hover {
    background-color: #3d3d3d;
    color: #ffffff;
}

.progress-container {
    background-color: #2d2d2d;
}

.progress-bar {
    background-color: #5781bd;
}

.volume-control {
    background-color: #2d2d2d;
}

.volume-slider {
    background-color: #3d3d3d;
}

.volume-slider::-webkit-slider-thumb {
    background-color: #5781bd;
}

.volume-slider::-moz-range-thumb {
    background-color: #5781bd;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1e1e1e;
}

::-webkit-scrollbar-thumb {
    background: #3d3d3d;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4d4d4d;
}