@import url('./global_nav.css');

:root {
    --story-color: #1e88e5; /* Valkyrion Blue */
    --story-glow: rgba(30, 136, 229, 0.8);
    --arcade-color: #e53935; /* Arcade Red */
    --arcade-glow: rgba(229, 57, 53, 0.8);
}

* {
    box-sizing: border-box;
}

body {
    color: #e0e0e0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
}

#bg-image {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: url('../../img/valkyrion_bg.jpeg'); 
    background-size: cover; background-position: center;
    z-index: -2;
}

#overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: linear-gradient(to bottom, rgba(10, 15, 25, 0.95), rgba(5, 5, 10, 0.98)); 
    z-index: -1;
}

header {
    padding: 60px 20px 20px 20px;
    text-align: center; width: 100%;
}

h1 {
    letter-spacing: 8px; font-size: 3rem; margin: 0; color: #fff;
    text-transform: uppercase; text-shadow: 0 0 20px rgba(255,255,255,0.3);
}

.subtitle {
    color: #888; font-size: 1.2rem; letter-spacing: 3px;
    margin-top: 10px; text-transform: uppercase;
}

main {
    width: 100%; max-width: 1200px; padding: 40px 20px;
    display: flex; justify-content: center; align-items: center;
    flex-grow: 1;
}

/* --- SPLIT MENU CONTAINER --- */
.campaign-selector {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 500px;
    background: #000;
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    overflow: hidden;
}

/* Diagonal Divider Line */
.campaign-selector::after {
    content: '';
    position: absolute;
    top: -10%; left: 49.5%;
    width: 4px; height: 120%;
    background: rgba(255,255,255,0.8);
    transform: rotate(26.5deg);
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 0 15px #fff;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mode-panel {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
}

/* --- STORY MODE (BLUE, TOP-LEFT) --- */
.story-mode {
    background-image: linear-gradient(135deg, rgba(10, 30, 60, 0.95), rgba(15, 45, 90, 0.98)), url('../img/menu_story_bg.jpg');
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 2;
    padding: 50px;
    align-items: flex-start;
    justify-content: flex-start;
}

.story-mode .content-wrapper { max-width: 55%; }

/* --- ARCADE MODE (RED, BOTTOM-RIGHT) --- */
.arcade-mode {
    background-image: linear-gradient(135deg, rgba(60, 10, 15, 0.95), rgba(90, 15, 20, 0.98)), url('../img/menu_arcade_bg.jpg');
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: 1;
    padding: 50px;
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
}

.arcade-mode .content-wrapper { max-width: 55%; }

/* --- TYPOGRAPHY --- */
.mode-title {
    font-size: 3.5rem;
    margin: 0 0 15px 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 5px;
    transition: text-shadow 0.3s ease;
    white-space: nowrap;
}

.story-mode .mode-title { color: var(--story-color); }
.arcade-mode .mode-title { color: var(--arcade-color); }

.mode-desc {
    font-size: 1.2rem;
    color: #ccc;
    line-height: 1.6;
    margin: 0;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* --- HOVER KINETICS --- */

.story-mode:hover {
    background-image: linear-gradient(135deg, rgba(20, 70, 150, 0.8), rgba(30, 90, 190, 0.85)), url('../img/menu_story_bg.jpg');
    box-shadow: inset 0 0 80px var(--story-glow);
    clip-path: polygon(0 0, 100% 0, 0 105%); 
    z-index: 10;
}
.story-mode:hover .mode-title { text-shadow: 0 0 25px var(--story-glow); color: #fff; }
.story-mode:hover .mode-desc { opacity: 1; color: #fff; }

.arcade-mode:hover {
    background-image: linear-gradient(135deg, rgba(150, 20, 30, 0.8), rgba(190, 30, 40, 0.85)), url('../img/menu_arcade_bg.jpg');
    box-shadow: inset 0 0 80px var(--arcade-glow);
    clip-path: polygon(100% -5%, 100% 100%, 0 100%); 
    z-index: 10;
}
.arcade-mode:hover .mode-title { text-shadow: 0 0 25px var(--arcade-glow); color: #fff; }
.arcade-mode:hover .mode-desc { opacity: 1; color: #fff; }

/* Shift the center line depending on hover */
.campaign-selector:has(.story-mode:hover)::after { transform: rotate(26.5deg) translate(10px, -10px); background: var(--story-color); box-shadow: 0 0 20px var(--story-glow); }
.campaign-selector:has(.arcade-mode:hover)::after { transform: rotate(26.5deg) translate(-10px, 10px); background: var(--arcade-color); box-shadow: 0 0 20px var(--arcade-glow); }


/* --- RESPONSIVE FALLBACK --- */
@media (max-width: 900px) {
    .campaign-selector {
        height: auto;
        display: flex;
        flex-direction: column;
        border-radius: 8px;
    }
    .campaign-selector::after { display: none; } 
    
    .mode-panel {
        position: relative;
        width: 100%;
        height: 300px;
        clip-path: none !important; 
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 30px;
    }
    
    .content-wrapper { max-width: 100% !important; }
    .mode-title { white-space: normal; font-size: 2.8rem; }
    .arcade-mode { text-align: center; }
    
    .story-mode:hover { transform: scale(1.02); z-index: 2; }
    .arcade-mode:hover { transform: scale(1.02); z-index: 2; }
}

.back-link {
            display: block;
            margin-bottom: 20px;
            color: #777;
            text-decoration: none;
            transition: color 0.3s;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 2px;
        }

        .back-link:hover { color: #fff; }