/* ============================================
   ARCADE ROOT VARIABLES
   ============================================ */
:root {
    /* Arcade Colors */
    --arcade-primary: #2a8fbd;
    --arcade-primary-dark: #227599;
    --arcade-primary-light: #66c2ff;
    --arcade-glow-primary: rgba(42, 143, 189, 0.6);
    --arcade-glow-primary-strong: rgba(42, 143, 189, 0.8);
    
    /* Arcade Backgrounds */
    --arcade-bg-dark: #021004;
    --arcade-bg-card: #051405;
    --arcade-bg-black: #000000;
    
    /* Arcade Text Colors */
    --arcade-text-white: #ffffff;
    --arcade-text-gray: #d1d5db;
    --arcade-text-muted: #9ca3af;
    
    /* Arcade Border Colors */
    --arcade-border-primary: rgba(42, 143, 189, 0.3);
    --arcade-border-strong: rgba(42, 143, 189, 0.4);
    
    /* Arcade Shadows */
    --arcade-shadow: 0 0 25px rgba(42, 143, 189, 0.15);
    --arcade-shadow-strong: 0 0 35px rgba(42, 143, 189, 0.3);
    --arcade-shadow-glow: 0 0 30px rgba(42, 143, 189, 0.6);
    
    /* Arcade Fonts */
    --arcade-font-orbitron: 'Orbitron', sans-serif;
    --arcade-font-rajdhani: 'Rajdhani', sans-serif;
    --arcade-font-metal-mania: 'Metal Mania', cursive;
}

/* ============================================
   ARCADE GAME UI POPUP STYLES
   ============================================ */

/* Hamburger to 'X' Transformation Rules */
#mobile-menu-btn.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    background-color: var(--arcade-text-white);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

#mobile-menu-btn.is-active span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

#mobile-menu-btn.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    background-color: var(--arcade-text-white);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Arcade Wooden Panel with Cyber Blue Neon Border */
.arcade-wood-panel {
    background: linear-gradient(135deg, #3d1f0d 0%, #221005 100%) !important;
    border: 6px solid #5c2c10 !important;
    box-shadow: 0 0 30px var(--arcade-glow-primary), 0 15px 40px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(0, 0, 0, 0.8) !important;
    border-radius: 28px !important;
    outline: 2px solid var(--arcade-primary) !important;
    outline-offset: 4px !important;
}

/* Metal Mania Game Font Style for Title & Links */
.arcade-game-font {
    font-family: var(--arcade-font-metal-mania) !important;
    letter-spacing: 2px !important;
    color: var(--arcade-text-white) !important;
    text-shadow: 3px 3px 0px var(--arcade-glow-primary), 2px 2px 8px rgba(0, 0, 0, 0.9) !important;
}

/* Arcade Link Button with Wood & Blue Accent */
.arcade-link-btn {
    position: relative !important;
    background: linear-gradient(to bottom, #733814, #4a220b) !important;
    border: 2px solid #2b1306 !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    color: var(--arcade-text-white) !important;
    font-family: var(--arcade-font-metal-mania) !important;
    font-size: 1.25rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.2) !important;
    transition: all 0.25s ease !important;
    display: block !important;
    text-align: center !important;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.8) !important;
}

.arcade-link-btn span {
    position: relative !important;
    z-index: 1 !important;
}

.arcade-link-btn:hover {
    background: var(--arcade-primary) !important;
    color: var(--arcade-bg-black) !important;
    border-color: var(--arcade-text-white) !important;
    transform: translateY(-2px) scale(1.02) !important;
    text-shadow: none !important;
    box-shadow: 0 0 15px var(--arcade-glow-primary-strong) !important;
}

/* Cyber Blue Spherical Close Button */
.arcade-neon-close-btn {
    position: absolute !important;
    top: -18px !important;
    right: -18px !important;
    width: 44px !important;
    height: 44px !important;
    background: var(--arcade-primary) !important;
    border: 3px solid var(--arcade-text-white) !important;
    border-radius: 50% !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5), 0 0 12px var(--arcade-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
    z-index: 20 !important;
}

.arcade-neon-close-btn:hover {
    transform: scale(1.1) !important;
    background: var(--arcade-text-white) !important;
}

/* ============================================
   FIXED: MOBILE NAV - ONLY CLASS NAME CHANGED
   ============================================ */

#mobile-menu nav li {
    list-style: none !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
}

#mobile-menu nav li:last-child {
    margin-bottom: 0 !important;
}

#mobile-menu nav li::marker {
    display: none !important;
    content: '' !important;
}

#mobile-menu nav li a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 16px !important;
    border-radius: 9999px !important;
    background: linear-gradient(to bottom, #1c7aa6, #09324a) !important;
    border: 3px solid var(--arcade-text-white) !important;
    color: #f3f4f6 !important;
    font-family: var(--arcade-font-orbitron) !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.3), 0 4px 6px rgba(0, 0, 0, 0.5) !important;
    text-shadow: 0 2px 2px rgba(3, 18, 28, 0.9) !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}

#mobile-menu nav li a:hover {
    background: linear-gradient(to bottom, var(--arcade-primary), #0b4263) !important;
    color: var(--arcade-text-white) !important;
}

#mobile-menu nav li a:active {
    transform: translateY(3px) !important;
}