/* --- 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: #ffffff;
    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: #ffffff;
    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 rgba(42, 143, 189, 0.6), 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 #2a8fbd !important;
    outline-offset: 4px !important;
}

/* Metal Mania Game Font Style for Title & Links */
.arcade-game-font {
    font-family: 'Metal Mania', cursive !important;
    letter-spacing: 2px !important;
    color: #ffffff !important;
    text-shadow: 3px 3px 0px rgba(42, 143, 189, 0.5), 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: #ffffff !important;
    font-family: 'Metal Mania', cursive !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: #2a8fbd !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    transform: translateY(-2px) scale(1.02) !important;
    text-shadow: none !important;
    box-shadow: 0 0 15px rgba(42, 143, 189, 0.8) !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: #2a8fbd !important;
    border: 3px solid #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5), 0 0 12px #2a8fbd !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: #ffffff !important;
}