/* PixelVerse Cyberpunk Menu Styles */

/* Global Pixel Art Settings & Resets */
* {
    box-sizing: border-box;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

:root {
    /* --- Theme Colors --- */
    /* Visual Accents (borders, glows, non-text highlights) */
    --primary-visual-accent: #C700C7; /* Softer Magenta */
    --primary-visual-accent-glow: rgba(199, 0, 199, 0.5);
    --primary-visual-accent-medium: #A300A3;
    
    --secondary-visual-accent: #D4C037; /* Softer Gold/Yellow */
    --secondary-visual-accent-glow: rgba(212, 192, 55, 0.5);
    
    --tertiary-visual-accent: #00A0A0; /* Softer Cyan */
    --tertiary-visual-accent-glow: rgba(0, 160, 160, 0.5);

    --quaternary-visual-accent: #005F9C; /* Softer Electric Blue */
    --quaternary-visual-accent-glow: rgba(0, 95, 156, 0.5);

    /* Text Colors */
    --text-color-main: #00DCDC; /* Main Teal for most text */
    --text-color-main-glow: rgba(0, 220, 220, 0.4); 
    --text-color-main-hover: #30FFFF; 
    --text-color-main-hover-glow: rgba(48, 255, 255, 0.5);
    --text-color-muted: #507070; 

    /* Background Colors */
    --dark-bg-primary: #040304; 
    --dark-bg-secondary: #0A080A; /* Main menu panel bg */
    --dark-bg-tertiary: #0F0D0F;  /* Section bg */

    /* UI Elements */
    --border-radius-soft: 6px; 
    --button-click-animation-duration: 0.6s; /* Consistent duration for button click anim */
}

/* --- Main Menu Styles --- */
#main-menu {
    position: fixed; 
    top: 0; left: 0;
    min-width: 100vw; min-height: 100vh;
    background-color: rgba(4, 3, 4, 0.93); 
    z-index: 1000;
    display: flex; 
    justify-content: center;
    align-items: center;
    overflow: auto; 
    padding: 15px; 
}

/* --- Menu Container & Animated Border --- */
.menu-container {
    background-color: var(--dark-bg-secondary); 
    width: fit-content;
    min-width: 300px;
    max-width: 90vw;
    padding: 15px; 
    border: 1px solid transparent; /* Spacing for animated border */
    box-shadow: 0 0 15px var(--primary-visual-accent-glow), 
                0 0 5px var(--secondary-visual-accent-glow) inset; 
    display: flex;
    flex-direction: column;
    position: relative; 
    border-radius: var(--border-radius-soft); 
    max-height: 80vh;
    overflow: hidden; /* Hide overflow to contain borders */
    /* Remove fixed border from the original styles */
    border: none;
}

.menu-container > .menu-border-top,
.menu-container > .menu-border-bottom,
.menu-container > .menu-border-left,
.menu-container > .menu-border-right {
    position: absolute;
    background: linear-gradient(90deg, 
        var(--primary-visual-accent), 
        var(--secondary-visual-accent), 
        var(--tertiary-visual-accent), 
        var(--quaternary-visual-accent), 
        var(--primary-visual-accent)
    );
    background-size: 400% 100%; 
    opacity: 0.9;
    z-index: 1; 
    pointer-events: none; /* Ensure borders don't interfere with interactions */
}

/* Scrollable content wrapper */
.menu-content {
    height: 100%;
    overflow-y: auto;
    padding-right: 2px; /* Account for scrollbar */
}

/* Hide scrollbar for cleaner look */
.menu-content::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

.menu-content::-webkit-scrollbar-track {
    background: transparent;
}

.menu-content::-webkit-scrollbar-thumb {
    background: transparent;
}

/* Make the border lines thicker and more visible */
.menu-container > .menu-border-top { 
    top: 0; left: 0; width: 100%; height: 2px; 
    animation: scanLineHorizontal 18s linear infinite, borderColorCycle 15s linear infinite alternate; 
}
.menu-container > .menu-border-bottom { 
    bottom: 0; right: 0; width: 100%; height: 2px; 
    animation: scanLineHorizontalReverse 18s linear infinite, borderColorCycle 15s linear infinite alternate; 
    animation-delay: -9s; 
}
.menu-container > .menu-border-left {
    left: 0; top:0; width: 2px; height: 100%; 
    background-size: 100% 400%; 
    animation: scanLineVertical 18s linear infinite, borderColorCycle 15s linear infinite alternate; 
    animation-delay: -4.5s;
}
.menu-container > .menu-border-right {
    right: 0; top:0; width: 2px; height: 100%; 
    background-size: 100% 400%; 
    animation: scanLineVerticalReverse 18s linear infinite, borderColorCycle 15s linear infinite alternate; 
    animation-delay: -13.5s;
}

/* --- Keyframe Animations --- */
@keyframes scanLineHorizontal {0% { background-position: 400% 0; } 100% { background-position: 0% 0; }}
@keyframes scanLineHorizontalReverse {0% { background-position: 0% 0; } 100% { background-position: 400% 0; }}
@keyframes scanLineVertical {0% { background-position: 0 400%; } 100% { background-position: 0 0%; }}
@keyframes scanLineVerticalReverse {0% { background-position: 0 0%; } 100% { background-position: 0 400%; }}
@keyframes borderColorCycle { 
    0%   { filter: saturate(0.7) brightness(0.8); }
    25%  { filter: saturate(0.9) brightness(1.0); }
    50%  { filter: saturate(0.6) brightness(0.7); }
    75%  { filter: saturate(1.0) brightness(1.1); }
    100% { filter: saturate(0.7) brightness(0.8); }
}

/* Make sure the border corners are properly aligned */
.menu-container > .menu-border-top,
.menu-container > .menu-border-bottom {
    border-radius: var(--border-radius-soft) var(--border-radius-soft) 0 0;
}

.menu-container > .menu-border-left,
.menu-container > .menu-border-right {
    border-radius: var(--border-radius-soft) 0 0 var(--border-radius-soft);
}

/* Important class for hiding elements - keep this for compatibility */
.hidden { display: none !important; }